/* === Greenvert — Header (GeneratePress Elements + Gutenberg Navigation) === */
:root{
--gv-brand:#2d5a3f; /* vert Greenvert */
--gv-accent:#8bb557; /* accent doux */
--gv-warm:#904932;
--gv-dark-accent: #904932;
--gv-text:#424140;
--gv-heading:#424140;
--gv-bg:#ffffff;
--gv-radius:16px;
--gv-underline:2px;
--gv-shadow:0 10px 30px rgba(0,0,0,.08);
--gv-header-h:clamp(56px,7vh,78px);
--gv-button: #8bb557;
--gv-button-hover: #cdb99e;
--gv-link: #904932;
--gv-link-hover: #8bb557;
}
Template:generatepress
/* MENU DE NAVIGATION */
.gb-site-header{
min-height:var(--gv-header-h);
background:
linear-gradient(180deg,
color-mix(in oklab, var(--gv-brand) 6%, transparent) 0%,
transparent 100%),
color-mix(in oklab, var(--gv-bg) 86%, transparent);
backdrop-filter:saturate(140%) blur(8px);
-webkit-backdrop-filter:saturate(140%) blur(8px);
border-bottom:1px solid color-mix(in oklab, var(--gv-brand) 12%, transparent);
}
/* Navigation principale (bloc Gutenberg) */
.gb-site-header .wp-block-navigation__container{
display:flex; align-items:center;
gap:clamp(.6rem, 1.4vw, 1.6rem); /* ESPACEMENT ENTRE ITEMS */
}
/* Chaque 1er niveau */
.gb-site-header .wp-block-navigation-item{
position:relative;
margin-inline:clamp(.1rem,.5vw,.6rem);
}
/* Liens 1er niveau : “pill” + soulignement animé */
.gb-site-header .wp-block-navigation-item__content{
display:inline-flex; align-items:center; gap:.5ch;
padding:.6rem .95rem;
border-radius:999px;
font-weight:600; letter-spacing:.2px;
color:var(--gv-text); text-decoration:none;
line-height:1;
transition:background-color .25s ease, color .25s ease, transform .18s ease, background-size .25s ease;
background-image:linear-gradient(var(--gv-accent), var(--gv-accent));
background-repeat:no-repeat;
background-size:0% var(--gv-underline);
background-position:50% calc(100% - .35rem);
}
/* Hover/Focus 1er niveau */
.gb-site-header .wp-block-navigation-item__content:hover,
.gb-site-header .wp-block-navigation-item__content:focus-visible{
background-color:color-mix(in oklab, var(--gv-accent) 18%, transparent);
color:color-mix(in oklab, var(--gv-text) 20%, black);
transform:translateY(-1px);
background-size:100% var(--gv-underline);
outline:none;
}
/* État actif (WP ajoute ces classes sur ) */
.gb-site-header li.current-menu-item > .wp-block-navigation-item__content,
.gb-site-header li.current-menu-ancestor > .wp-block-navigation-item__content{
background-color:color-mix(in oklab, var(--gv-accent) 24%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--gv-accent) 40%, transparent);
}
/* === Sous-menus (ul.wp-block-navigation__submenu-container) === */
.gb-site-header .wp-block-navigation__submenu-container{
position:absolute; inset-inline-start:0; top:calc(100% + 10px);
min-width:240px;
background:color-mix(in oklab, var(--gv-bg) 96%, transparent);
border:1px solid color-mix(in oklab, var(--gv-brand) 14%, transparent);
box-shadow:var(--gv-shadow);
border-radius:calc(var(--gv-radius) + 6px);
}
/* optimisation menu mobile */
/* === Sous-menus (ul.wp-block-navigation__submenu-container) === */
/* 1. Masquer tous les sous-menus par défaut sur mobile (où ils sont souvent affichés verticalement) */
/* CIBLE: ul.wp-block-navigation__submenu-container */
.gb-site-header .wp-block-navigation__submenu-container {
/* Vos styles existants pour la version desktop (position:absolute, etc.) */
position: absolute;
inset-inline-start: 0;
top: calc(100% + 10px);
min-width: 240px;
background: color-mix(in oklab, var(--gv-bg) 96%, transparent);
border: 1px solid color-mix(in oklab, var(--gv-brand) 14%, transparent);
box-shadow: var(--gv-shadow);
border-radius: calc(var(--gv-radius) + 6px);
/* 💥 Règle clé pour l'accordéon mobile : masquer par défaut 💥 */
display: none;
/* Annule la position absolue pour l'affichage vertical dans le menu mobile */
/* Assurez-vous d'appliquer cela uniquement sur la vue mobile/le menu ouvert (voir point 3) */
}
/* 2. Afficher le sous-menu si son parent a l'attribut "aria-expanded=true" */
.gb-site-header .wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation__submenu-container {
display: block !important;
position: static; /* Force l'affichage en mode accordéon vertical */
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
/* Appliquer les styles d'accordéon uniquement sur mobile/tablette */
@media screen and (max-width: 768px) {
/* Masquer tous les sous-menus par défaut */
.gb-site-header .wp-block-navigation__submenu-container {
display: none !important; /* Force le masquage, car les styles desktop peuvent être trop forts */
position: static; /* Rendre l'élément statique pour un flux vertical */
margin: 10px 0; /* Ajoute un peu d'espace vertical */
padding: 10px;
/* Annule les bordures/ombres pour un look plus "menu" */
border: none;
box-shadow: none;
background: transparent;
}
/* Afficher le sous-menu lorsque son parent est ouvert */
/* Cible l'état "ouvert" du lien parent */
.gb-site-header .wp-block-navigation-item[aria-expanded="true"] > .wp-block-navigation__submenu-container {
display: block !important;
}
/* Optionnel : Styliser les éléments de menu de sous-niveau */
.gb-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 0.4rem 0.5rem;
/* Ajoutez ici d'autres ajustements de style pour les sous-liens */
}
}
/* end optimisation menu mobile /*
/* END MENU DE NAVIGATION /*
/* ============================================================
HERO SECTION GREENVERT (Solution Finale)
============================================================ */
/* Cibler le conteneur de l'image de fond qui contient TOUT le Hero */
.gb-element-0c4e019d {
display: flex;
justify-content: center; /* Centre horizontalement */
align-items: center; /* Centre verticalement */
position: relative;
min-height: 450px;
}
/* === HERO COPY CONTAINER STYLING (Boîte de texte flottante) === */
.hero-copy-box {
/* 1. POSITIONNEMENT ABSOLU (Clé pour la stabilité) */
margin: 0; /* Assurez-vous qu'il n'y ait pas de marges par défaut */
/* 2. FLEXBOX INTERNE (Gère l'alignement H1/Bouton) */
display: flex;
flex-direction: column;
align-items: center;
/* AJOUT DU GAP pour séparer le H1 et le Bouton */
gap: 30px;
/* 3. TAILLE ET STYLE */
max-width: clamp(300px, 80%, 720px);
width: 100%;
background-color: color-mix(in srgb, var(--gv-bg) 95%, transparent);
border-radius: var(--gv-radius);
padding: clamp(30px, 4vw, 50px);
box-shadow: var(--gv-shadow);
border: 1px solid color-mix(in srgb, var(--gv-brand) 10%, transparent);
text-align: center;
}
/* 4. NEUTRALISATION DES MARGES DES ENFANTS (Obligatoire pour que le gap fonctionne) */
/* Neutralise toutes les marges du H1 interne */
.hero-copy-box h1.gb-text {
margin: 0 !important;
position: static !important; /* Annule la position relative héritée */
isolation: auto !important;
}
/* Neutralise toutes les marges et paddings du conteneur de boutons (.wp-block-buttons) */
.hero-copy-box .wp-block-buttons {
margin: 0 !important;
padding: 0 !important;
}
/* === STYLE H1 === */
h1.entry-title,
.wp-block-post-title,
h1.gb-text{
font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color: var(--gv-heading);
font-weight:700;
font-size:clamp(2.05rem,1.2rem + 3.2vw,3.2rem);
line-height:1.12;
letter-spacing:-.01em;
text-wrap:balance;
margin:0 0 .75em 0;
/* soulignement éditorial */
text-decoration-line: underline;
text-decoration-color: var(--gv-accent);
text-decoration-thickness:.14em;
text-underline-offset:.28em;
}
h1.entry-title::before,
.wp-block-post-title::before,
h1.gb-text::before{
inset-inline-start:-.1em;
background:radial-gradient(circle at 60% 40%, var(--gv-accent), color-mix(in oklab, var(--gv-accent) 20%, transparent));
}
h1.entry-title::after,
.wp-block-post-title::after,
h1.gb-text::after{
inset-inline-end:-.1em;
background:radial-gradient(circle at 40% 60%, var(--gv-warm), color-mix(in oklab, var(--gv-warm) 20%, transparent));
}
/* === END STYLE H1 === */
/* === STYLE H2 === */
h2{
/* 1. Maintien de la famille de polices */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* 2. Réduction de l'impact visuel */
/* Mêmes couleurs que H1 (ou couleur de texte) */
color: var(--gv-heading);
/* Poids plus léger que H1 (700) pour une hiérarchie claire */
font-weight: 600;
/* 3. Taille fluide mais plus petite que H1 */
/* H1 est ~2.05rem à 3.2rem. H2 sera ~1.6rem à 2.4rem */
font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
line-height: 1.2;
margin: 1.5em 0 0.8em 0; /* Plus de marge au-dessus pour séparer les sections */
/* 4. Cohérence du style éditorial : le trait de soulignement devient un bord */
border-bottom: 2px solid var(--gv-accent);
padding-bottom: 0.1em;
/* Option : utiliser la couleur d'accent pour la première lettre ou un petit élément */
}
/* Option: style alternatif avec couleur d'accent pour l'en-tête de section */
/* Si H2 est utilisé comme un titre de section */
.section-header h2{
color: var(--gv-brand); /* Utiliser la couleur de marque pour plus de distinction */
}
/*END === H2 ===*/
/* === STYLE H3 === */
h3{
/* Maintien des bases */
font-family: "Poppins", system-ui, sans-serif;
color: var(--gv-heading);
font-weight: 600;
font-size: 1.35rem;
margin: 1em 0 0.5em 0;
/* L'accentuation : Bordure fine à gauche */
border-inline-start: 4px solid var(--gv-dark-accent); /* Utilisation de la nouvelle couleur sombre */
padding-inline-start: 12px;
margin-inline-start: 0;
}
/*== STYLE SOUS-CATEGORIES==*/
/* -------------------------------------- */
/* CORRECTION: Débloquer l'espace des conteneurs parents */
/* -------------------------------------- */
/* Cibler les conteneurs Flex et Grid du thème (site-content, site-main) */
.site-content,
.site-main,
.generate-columns-container,
.category-sub-list {
/* Forcer ces éléments à prendre la largeur maximale */
max-width: none !important;
width: 100%;
/* Pour contrer les règles Flexbox qui pourraient compresser la grille */
flex-basis: 100%;
flex-shrink: 0;
}
/* -------------------------------------- */
/* 1. GRILLE À 3 COLONNES - VÉRIFIEZ OU AJOUTEZ CELA */
/* -------------------------------------- */
/* ====== GRILLE SOUS-CATÉGORIES ====== */
.subcategories-grid {
display: grid;
/* Colonnes de largeur bornée ; la grille se recentre automatiquement */
grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
gap: 30px;
/* Centrer la grille dans son wrapper */
justify-content: center;
/* Propreté */
list-style: none;
padding: 0;
margin: 20px auto 0;
}
/* -------------------------------------- */
/* 2. STYLE DES CARTES (Image + Overlay + Titre) - NOUVELLE CORRECTION */
/* -------------------------------------- */
/* Le conteneur qui est votre lien () */
.subcategory-link {
/* Retirons le flexbox du lien, car il est géré par le wrapper interne */
display: block; /* Doit être un bloc pour que la hauteur fonctionne */
text-decoration: none;
position: relative;
min-height: 200px;
/* Styles visuels de la carte */
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Appliquons le centrage Flexbox au wrapper qui contient tout */
.subcategory-image-wrapper {
/* Le wrapper doit remplir le lien parent */
position: relative; /* Devient le point d'ancrage pour l'overlay et le titre */
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 200px; /* Assure la hauteur minimale du contenu */
/* C'est ici qu'on met le flexbox pour centrer le titre et l'overlay */
display: flex;
align-items: center; /* Centrage vertical */
justify-content: center; /* Centrage horizontal */
z-index: 1; /* Le conteneur entier est au-dessus du reste du contenu */
}
/* Assurez-vous que l'image remplisse l'espace et ne pousse pas le wrapper */
.subcategory-image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0; /* L'image est en fond */
}
/* -------------------------------------- */
/* 3. L'OVERLAY (Filtre sombre) */
/* -------------------------------------- */
.subcategory-overlay {
/* Il est désormais relatif au wrapper */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
transition: background-color 0.3s ease;
z-index: 2; /* Au-dessus de l'image (z-index: 0) */
}
/* Assombrit davantage l'overlay au survol */
.subcategory-link:hover .subcategory-overlay {
background-color: rgba(0, 0, 0, 0.6);
}
/* -------------------------------------- */
/* 4. LE TITRE DE LA CATÉGORIE */
/* -------------------------------------- */
.subcategory-title {
position: relative;
z-index: 3; /* Le titre doit être au-dessus de tout */
color: #fff;
font-size: 1.5rem;
text-align: center;
margin: 0 15px;
padding: 10px;
}
/*== END STYLE SOUS-CATEGORIES==*/
/* ======================================================== */
/* STYLE GENERAL POUR TOUS LES BLOCS LATEST POSTS */
/* ======================================================== */
/* ========================================================
0) BASE – styles communs Latest Posts
======================================================== */
.wp-block-latest-posts {
list-style: none !important;
margin: 20px 0 0 0;
padding: 0;
}
.wp-block-latest-posts li {
margin: 0;
padding: 10px 0;
border-bottom: 1px solid #eee;
transition: background-color .3s ease;
}
.wp-block-latest-posts li:hover { background-color: #f5f5f5; }
.wp-block-latest-posts__post-title {
display: block;
font-size: 1em;
font-weight: 500;
line-height: 1.4;
color: #333;
text-decoration: none;
}
.wp-block-latest-posts__post-title:hover {
color: #cdb99e;
text-decoration: underline;
}
/* ====== LISTE COMPACTE (non .recettes-a-la-une) ====== */
/* 1) Mise en forme de base */
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) li,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) li {
display: flex;
align-items: center;
gap: 15px;
margin: 0;
padding: 10px 0;
border-bottom: 1px solid #eee;
transition: background-color .3s ease;
}
/* 2) Neutraliser les floats Gutenberg sur l’image */
.wp-block-latest-posts__featured-image.alignleft,
.wp-block-latest-posts__featured-image.alignright {
float: none !important;
margin: 0;
}
/* 3) Vignette 16:9 (paysage) */
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image {
position: relative;
flex-shrink: 0;
width: 300px; /* ajuste si tu veux plus grand/petit */
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
}
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image img,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 4) Titre */
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__post-title,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__post-title {
flex: 1 1 auto;
text-align: left;
padding: 0;
}
/* 5) Desktop = image à droite, titre à gauche */
@media (min-width: 769px) {
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) li,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) li {
flex-direction: row;
}
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__post-title,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__post-title {
order: 2;
}
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image {
order: 1;
margin-left: 16px;
}
}
/* 6) Mobile = image au-dessus, titre dessous */
@media (max-width: 768px) {
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) li,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) li {
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__featured-image {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.wp-block-latest-posts:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__post-title,
.wp-block-latest-posts__list:not(.is-grid):not(.recettes-a-la-une) .wp-block-latest-posts__post-title {
width: 100%;
padding: 0 10px;
}
}
/* Var. "bloc vert" */
.category-block .wp-block-latest-posts:not(.recettes-a-la-une) .wp-block-latest-posts__post-title { color: #fefefe; }
.category-block .wp-block-latest-posts:not(.recettes-a-la-une) li { border-bottom: 1px solid rgba(255,255,255,.2); }
.category-block .wp-block-latest-posts:not(.recettes-a-la-une) li:hover { background-color: rgba(0,0,0,.2); }
.category-block .wp-block-latest-posts:not(.recettes-a-la-une) .wp-block-latest-posts__post-title:hover { color: #f8c338; }
/* ========================================================
2) MODE "RECETTES À LA UNE" (cartes/grille)
– on neutralise alignwide/alignfull et on centre le bloc
======================================================== */
/* Neutralise les marges négatives de Gutenberg pour CE bloc uniquement */
.entry-content .recettes-a-la-une.wp-block-latest-posts.alignwide,
.entry-content .recettes-a-la-une.wp-block-latest-posts.alignfull {
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
/* Conteneur principal centré + gouttières */
.recettes-a-la-une.wp-block-latest-posts {
max-width: 1200px;
margin: 40px auto; /* espace vertical */
padding-inline: 24px; /* évite de coller aux bords */
box-sizing: border-box;
border-top: 1px solid rgba(0,0,0,.05);
border-bottom: 1px solid rgba(0,0,0,.05);
}
/* Grille uniforme */
.recettes-a-la-une.is-grid {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Les items "carte" n'ont pas de ligne de séparation */
.recettes-a-la-une.is-grid li {
border-bottom: 0;
padding: 0;
margin: 0;
}
/* Vignette 16:9 – méthode moderne + fallback */
.recettes-a-la-une .wp-block-latest-posts__featured-image,
.recettes-a-la-une .wp-block-latest-posts__featured-image a {
display: block;
position: relative;
width: 100%;
overflow: hidden;
border-radius: 8px;
}
@supports (aspect-ratio: 16 / 9) {
.recettes-a-la-une .wp-block-latest-posts__featured-image,
.recettes-a-la-une .wp-block-latest-posts__featured-image a {
aspect-ratio: 16 / 9;
}
}
@supports not (aspect-ratio: 16 / 9) {
.recettes-a-la-une .wp-block-latest-posts__featured-image a::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.recettes-a-la-une .wp-block-latest-posts__featured-image img { position: absolute; inset: 0; }
}
.recettes-a-la-une .wp-block-latest-posts__featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Titre sous la carte */
.recettes-a-la-une .wp-block-latest-posts__post-title {
text-align: center;
margin: 12px 0 4px 0;
}
/* == END STYLE LATEST POST == */
/* ======================================================== */
/* 1. STYLE DE LA BARRE DE RECHERCHE (Le Conteneur) */
/* ======================================================== */
.wp-block-search.search-section {
width: 100%;
margin: 40px auto;
padding: 40px 30px;
/* Fond gris très pâle pour délimiter l'espace */
background-color: #eee5da;
border-radius: 16px;
/* Ombre raffinée pour un effet "flottant" */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 5px 10px rgba(0, 0, 0, 0.03);
}
/* ======================================================== */
/* 2. CORRECTION DES ÉLÉMENTS INTERNES (Critique) */
/* ======================================================== */
/* CORRECTION: Neutraliser la bordure par défaut sur le conteneur du champ */
.wp-block-search__inside-wrapper {
display: flex;
width: 100%;
/* Neutraliser tout style qui pourrait casser les coins ou les bordures */
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
/* Important pour éviter que les éléments enfants ne dépassent */
overflow: hidden;
}
/* Le champ de saisie (input) */
.wp-block-search__input {
flex-grow: 1;
padding: 16px 24px;
font-size: 1.1em;
font-family: inherit;
color: #333;
background-color: #ffffff;
/* Bordure subtile et moderne (1px au lieu de 2px) */
border: 1px solid #e9e9e9;
border-right: none;
border-radius: 12px 0 0 12px;
transition: all 0.3s ease;
}
/* Effet au focus */
.wp-block-search__input:focus {
outline: none;
border-color: #8bb557;
/* Ombre interne légère pour un effet "enfoncé" ou "actif" */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Le bouton de recherche */
.wp-block-search__button {
background-color: #8bb557;
color: #ffffff;
padding: 16px 30px;
font-size: 1em;
font-weight: 600;
border: none;
cursor: pointer;
border-radius: 12px 0px 12px 0;
transition: background-color 0.3s ease, transform 0.1s ease;
}
/* Effet au survol du bouton */
.wp-block-search__button:hover {
background-color: #74a04e;
}
/* Effet au clic (léger enfoncement) */
.wp-block-search__button:active {
transform: translateY(1px);
}
/* Masquer le label */
.wp-block-search__label {
display: none;
}
/* ======================================================== */
/* MEDIA QUERY POUR MOBILE (Écran < 600px) */
/* ======================================================== */
@media (max-width: 600px) {
/* 1. Rendre le bouton compact et masquer le texte */
.wp-block-search__button {
/* Masquer le texte "Rechercher" */
text-indent: -9999px;
/* Réduire le padding pour ne laisser que l'espace pour l'icône */
padding: 16px 20px; /* Moins large que le 16px 30px précédent */
/* Assurer que la hauteur reste cohérente avec l'input */
height: 100%;
width: 60px; /* Taille fixe pour le bouton */
/* Positionner l'icône de loupe au centre */
position: relative;
}
/* 2. Afficher l'icône de loupe */
.wp-block-search__button::before {
content: "\f002"; /* Code de la loupe (Font Awesome) ou alternative */
/* Si vous utilisez Font Awesome : */
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
font-weight: 900; /* Nécessaire pour afficher les icônes 'Solid' */
/* Styles de l'icône */
font-size: 1.2em;
text-indent: 0; /* Rendre le contenu visible */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centrer l'icône parfaitement */
color: #ffffff;
}
/* 3. Ajuster le champ de saisie sur mobile */
.wp-block-search__input {
/* Réduire légèrement le padding horizontal si nécessaire */
padding: 16px 15px;
}
}
/* ======================================================== */
/* 1. END STYLE DE LA BARRE DE RECHERCHE (Le Conteneur) */
/* ======================================================== */
/* ======================================================== */
/* STYLE DU CONTENEUR DE TAGS (Tags-Container) */
/* ======================================================== */
/* Cibler le conteneur du nuage de tags pour un alignement propre */
.tags-container,
.custom-filtered-tag-cloud {
padding: 20px 0 10px 0; /* Espacement au-dessus et en dessous de la barre de recherche */
text-align: center; /* Centrer les tags si l'espace le permet */
}
/* ⚠️ Optionnel : Si vous voulez que le nuage de tags ait le même fond que la barre de recherche */
/* Retirez ce bloc si vous voulez que les tags soient sur le fond de page */
/*
.tags-container {
padding: 20px 30px;
background-color: #f8f8f8;
border-radius: 0 0 16px 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
margin-bottom: 40px;
}
*/
/* ======================================================== */
/* STYLE DES LIENS DE TAGS (Boutons Pilules) */
/* ======================================================== */
.wp-block-tag-cloud {
display: flex;
flex-wrap: wrap; /* Permet le retour à la ligne */
justify-content: center; /* Centre horizontalement */
gap: 8px; /* Espace uniforme entre les tags */
text-align: center; /* Sécurité pour les anciens navigateurs */
}
.wp-block-tag-cloud a {
/* Rendre les liens indépendants (pilules) */
display: inline-block;
/* Couleurs par défaut (neutres) */
background-color: #eee5da;
color: var(--gv-text);
border: 1px solid #e0e0e0;
/* Espacement et Forme */
padding: 8px 15px;
margin: 5px 8px 5px 0; /* Espace entre les pilules */
border-radius: 20px; /* Force la forme de pilule */
/* Typographie */
text-decoration: none;
font-size: 0.9em !important; /* Uniformiser la taille du texte (important pour le look) */
font-weight: 500;
transition: all 0.2s ease-in-out;
}
/* Effet de survol (Hover) : Utiliser votre couleur d'accentuation */
.wp-block-tag-cloud a:hover {
background-color: #8bb557; /* Vert de votre marque */
color: #ffffff; /* Texte blanc pour le contraste */
border-color: #8bb557;
/* Ombre légère pour l'effet de carte */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transform: translateY(-1px); /* Léger déplacement vers le haut */
}
/* ======================================================== */
/* END STYLE DES LIENS DE TAGS (Boutons Pilules) */
/* ======================================================== */
/* ======================================================== */
/* TITRES BANNIERES et LIENS BANNIERES */
/* ======================================================== */
/* --- TITRES ADAPTATIFS DANS LES BANNIÈRES GUTENBERG --- */
/* 2) Fallback universel : s'adapte au viewport */
.wp-block-cover .wp-block-heading.has-large-font-size {
line-height: 1.15;
overflow-wrap: anywhere;
hyphens: auto;
--wp--preset--font-size--large: clamp(1rem, 2.5vw + 0.5rem, 2.4rem);
font-size: var(--wp--preset--font-size--large) !important;
}
/* === Taille Maximale Desktop === */
/* Applique cette règle uniquement aux titres des bannières de régime/colonnes sur desktop */
@media (min-width: 1024px) {
.category-block .wp-block-cover h2.wp-block-heading.has-large-font-size {
/*
Ceci surcharge l'intégralité du clamp(min, pref, max) par une taille fixe plus petite,
qui respecte l'espace disponible (ex: 1.5rem ≈ 27px)
*/
font-size: 1.5rem !important;
/* Assure que la fluidité ne ré-augmente pas la taille max en cas de conflit */
--wp--preset--font-size--large: 1.5rem;
}
}
/* === Uniformisation des liens de titre dans les Bannières (WP Cover) === */
/* Cible tous les liens à l'intérieur d'un élément wp-block-cover. */
/* Assure que la couleur reste blanche quelle que soit la classe Gutenberg. */
.wp-block-cover a,
.wp-block-cover h2 a,
.wp-block-cover h3 a {
/* Utilise une couleur blanche ou très claire pour un bon contraste sur l'overlay sombre. */
color: var(--gv-bg); /* #ffffff */
}
/* Force le style au survol pour rester en blanc */
.wp-block-cover a:hover,
.wp-block-cover a:focus {
color: var(--gv-bg); /* Maintient la couleur blanche au survol */
text-decoration: underline; /* Optionnel : maintient le soulignement */
}
/* === CORRECTION TITRES TROP LONGS DANS WP-COVER (Mobile/Desktop) === */
.wp-block-cover h2.wp-block-heading {
/* Permet le retour à la ligne forcé pour les mots très longs ("anti-inflammatoires") */
overflow-wrap: break-word;
word-break: break-word;
/* Assure la place pour au moins deux lignes sur une carte */
min-height: 2.8em;
}
/* Lève la restriction de lignes sur le lien interne (si elle existe) */
.wp-block-cover h2.wp-block-heading a {
display: block;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
white-space: normal !important;
}
/* ======================================================== */
/* END TITRES et LIENS BANNIERES */
/* ======================================================== */
/* ======================================================== */
/* /* ====== CITATIONS / BLOCKQUOTE (WP) ====== */
/* ======================================================== */
.wp-block-quote{
--q-bg: color-mix(in oklab, var(--gv-bg) 96%, transparent);
--q-border: color-mix(in oklab, var(--gv-brand) 18%, transparent);
--q-accent: var(--gv-accent);
position: relative;
margin: clamp(1.25rem, 2.5vw, 2rem) 0;
padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.35rem) clamp(.85rem, 2vw, 1.1rem)
clamp(1rem, 2vw, 1.35rem);
background: var(--q-bg);
border: 1px solid var(--q-border);
border-radius: calc(var(--gv-radius) + 8px);
box-shadow: var(--gv-shadow);
}
/* Trait d’accent à gauche */
.wp-block-quote::before{
content:"";
position:absolute;
inset: clamp(.7rem, 1.2vw, .9rem) auto clamp(.7rem, 1.2vw, .9rem) clamp(.7rem, 1.2vw, .9rem);
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--q-accent) 85%, transparent),
color-mix(in oklab, var(--q-accent) 35%, transparent));
}
/* Guillemets décoratifs (subtils) */
.wp-block-quote p{
margin: 0;
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.55;
font-weight: 520;
color: var(--gv-text);
}
.wp-block-quote p:first-child{
text-wrap: pretty;
}
.wp-block-quote::after{
content: "“";
position: absolute;
inset: -12px 10px auto auto;
font-size: 64px;
line-height: 1;
opacity: .07;
font-weight: 700;
pointer-events: none;
}
/* Légende / auteur (si présent) */
.wp-block-quote cite,
.wp-block-quote footer{
display:block;
margin-top: .75rem;
font-size: .95em;
color: color-mix(in oklab, var(--gv-text) 70%, var(--gv-brand));
font-style: normal;
}
.wp-block-quote cite:not(:empty)::before,
.wp-block-quote footer:not(:empty)::before{
content: "— ";
opacity: .85;
}
/* Variante compacte (ajoute la classe is-style-plain dans WP si tu veux) */
.wp-block-quote.is-style-plain{
box-shadow: none;
background: transparent;
border: 0;
padding: 0 0 0 1rem;
}
.wp-block-quote.is-style-plain::before{
inset: 0 auto 0 0;
width: 3px;
background: var(--q-accent);
}
.wp-block-quote.is-style-plain::after{ display:none; }
/* Pullquote (bloc WP distinct) : style éditorial */
.wp-block-pullquote{
--q-accent: var(--gv-accent);
margin: clamp(1.5rem, 4vw, 3rem) auto;
padding: 0;
border-inline: 4px solid color-mix(in oklab, var(--q-accent) 60%, transparent);
text-align: center;
}
.wp-block-pullquote blockquote{
margin: 0; padding: clamp(1rem, 3vw, 1.5rem);
border: 0; background: transparent; box-shadow: none;
}
.wp-block-pullquote p{
font-size: clamp(1.1rem, 2.2vw, 1.45rem);
line-height: 1.45;
font-weight: 650;
}
.wp-block-pullquote cite{
display:block; margin-top:.6rem; font-size:.95em; opacity:.8;
}
/* Mode sombre si tu l’utilises (facultatif) */
@media (prefers-color-scheme: dark){
.wp-block-quote{
--q-bg: color-mix(in oklab, var(--gv-bg) 82%, transparent);
--q-border: color-mix(in oklab, var(--gv-brand) 26%, transparent);
}
/* ======================================================== */
/* /* ====== CITATIONS / BLOCKQUOTE (WP) ====== */ /*
/* ======================================================== */
}
/* ==============================
FIX AUTO ADSENSE GUTENBERG
=============================== */
/* 1) Normaliser les blocs d'annonces, partout */
.google-auto-placed,
.adsbygoogle {
display: block;
width: 100%;
max-width: 100%;
margin: 12px auto; /* espace raisonnable */
clear: both;
}
/* 2) Dans un parent FLEX : l’annonce prend la ligne entière */
.is-layout-flex > .google-auto-placed,
.is-layout-flex > .adsbygoogle,
.wp-block-columns > .google-auto-placed,
.wp-block-columns > .adsbygoogle,
[style*="display:flex"] > .google-auto-placed,
[style*="display:flex"] > .adsbygoogle {
flex: 0 0 100%;
width: 100%;
order: 99; /* optionnel : pousse après le contenu */
}
/* 3) Dans une GRILLE : l’annonce s’étend sur toute la rangée */
.is-layout-grid > .google-auto-placed,
.is-layout-grid > .adsbygoogle,
[style*="display:grid"] > .google-auto-placed,
[style*="display:grid"] > .adsbygoogle {
grid-column: 1 / -1;
}
/* 4) Sécuriser l’iframe interne en responsive */
.google-auto-placed iframe,
.adsbygoogle iframe {
display: block;
width: 100% !important;
height: auto;
}
/* === Correction AdSense dans les colonnes Gutenberg === */
[class^="wp-container-core-columns-is-layout-"],
[class*=" wp-container-core-columns-is-layout-"] {
flex-wrap: wrap !important;
}
[class^="wp-container-core-columns-is-layout-"] > .google-auto-placed,
[class^="wp-container-core-columns-is-layout-"] > .adsbygoogle,
[class*=" wp-container-core-columns-is-layout-"] > .google-auto-placed,
[class*=" wp-container-core-columns-is-layout-"] > .adsbygoogle {
flex: 0 0 100%;
width: 100%;
order: 99;
}
/* ==============================
END FIX AUTO ADSENSE GUTENBERG
=============================== */
/* ============================================================
STYLE GLOBAL DES SÉPARATEURS WP
============================================================ */
/* === Greenvert — Séparateur UX 2025 (fix emoji clipping) === */
:root{
--gv-sep-icon: "🥑"; /* emoji central */
--gv-sep-line-color: color-mix(in srgb, var(--gv-accent) 25%, #dcd6c9);
--gv-sep-glow: color-mix(in srgb, var(--gv-accent) 35%, transparent);
}
/* Ligne */
.wp-block-separator,
hr.wp-block-separator{
position: relative;
border: none;
height: 6px;
width: 100%;
max-width: 520px;
margin: clamp(40px, 7vw, 80px) auto;
background: linear-gradient(
90deg,
transparent,
var(--gv-sep-line-color) 15%,
var(--gv-sep-line-color) 85%,
transparent
);
border-radius: 999px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: visible; /* ✅ évite de couper l’emoji */
}
/* Emoji central */
.wp-block-separator::after{
content: var(--gv-sep-icon);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
font-size: clamp(2rem, 3vw, 2.6rem); /* ✅ plus grand */
line-height: 1;
color: var(--gv-accent);
text-shadow: 0 0 10px var(--gv-sep-glow);
background: var(--gv-bg);
padding: 0.4em 0.5em; /* ✅ plus d’espace autour */
border-radius: 50%;
box-shadow: 0 0 0 8px color-mix(in srgb, var(--gv-sep-glow) 25%, transparent);
transition: transform 0.35s ease, text-shadow 0.35s ease;
z-index: 2;
}
/* Mode sombre */
@media (prefers-color-scheme: dark){
.wp-block-separator,
hr.wp-block-separator{
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--gv-accent) 35%, #333),
transparent
);
}
.wp-block-separator::after{
background: #222;
box-shadow: 0 0 0 8px color-mix(in srgb, var(--gv-accent) 25%, transparent);
}
}
/* ============================================================
END STYLE GLOBAL DES SÉPARATEURS WP
============================================================ */
/* ============================================================
GRILLE dernier post sous-catégories
============================================================ */
/* 1 colonne par défaut (mobile + tablette portrait) */
.gv-subcat__grid{
display:grid !important;
grid-template-columns: 1fr;
gap: clamp(12px, 2vw, 20px);
}
/* ===== Bouton "Voir tout" — header des sous-catégories (Greenvert 2025) ===== */
.gv-subcat__header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
/* + aération : meilleur rythme avant la grille */
margin: 6px 0 12px;
}
.gv-subcat__title{
margin:0;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
line-height:1.25;
}
/* Ghost pill cohérent (CTA secondaire) */
.gv-subcat__more{
display:inline-flex;
align-items:center;
gap:.5ch;
padding: 9px 16px; /* touch target + confortable */
border-radius: 999px;
border: 1px solid var(--gv-button);
color: var(--gv-button);
background: transparent;
font-weight: 600;
text-decoration: none;
line-height: 1;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
will-change: transform;
margin-right: 4px; /* équilibre visuel à droite */
}
.gv-subcat__more::after{
content: "›"; /* chevron fin, plus moderne */
transform: translateX(0);
transition: transform .15s ease;
}
.gv-subcat__more:hover{
background: var(--gv-button);
color: #fff;
border-color: var(--gv-button);
transform: translateY(-1px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); /* micro-relief 2025 */
}
.gv-subcat__more:hover::after{ transform: translateX(2px); }
/* Focus accessible */
.gv-subcat__more:focus-visible{
outline: 2px solid color-mix(in srgb, var(--gv-accent) 60%, #7fb);
outline-offset: 2px;
}
/* Mobile : bouton sous le titre, aligné à gauche et un peu plus compact */
@media (max-width: 640px){
.gv-subcat__header{
flex-direction: column;
align-items: flex-start;
gap:8px;
margin-bottom: 10px;
}
.gv-subcat__more{
padding: 8px 14px;
}
}
/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce){
.gv-subcat__more{ transition: none; }
}
/* ===== end Bouton "Voir tout" — header des sous-catégories (Greenvert 2025) ===== */
/* 2 colonnes — tablette paysage */
@media (min-width: 768px) and (orientation: landscape){
.gv-subcat__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3 colonnes — desktop */
@media (min-width: 1024px){
.gv-subcat__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Cartes : éviter l’empilement pleine largeur imposé ailleurs */
.gv-subcat__grid .gv-card{
margin: 0 !important; /* neutralise marges par défaut GP */
width: 100% !important;
display: flex; /* pour maîtriser la hauteur */
flex-direction: column;
}
/* Image responsive propre */
.gv-subcat__grid .gv-card__thumb img,
.gv-subcat__grid .gv-card__ph{
display:block;
width:100%;
height: auto;
}
/* Titre compact */
.gv-subcat__grid .gv-card__title{
margin: 10px 8px 14px !important;
font-size: 1rem;
line-height: 1.3;
}
/* Option: réduire l’espace entre sections sous-catégories sur desktop */
@media (min-width:1024px){
.gv-subcat{ margin: 32px 0; }
}
/* ===== Transition entre GRILLE sous-catégories et listes "6 dernières recettes" ===== */
/* 1) Respiration + séparateur doux sous la grille des sous-catégories */
.gv-subcats-wrap{
padding-bottom: clamp(24px, 4vw, 40px);
border-bottom: 1px solid color-mix(in srgb, var(--gv-text) 10%, transparent);
margin-bottom: clamp(28px, 4.5vw, 52px);
}
/* 2) Chaque bloc sous-catégorie (les "6 dernières") présenté comme une carte légère */
.gv-subcat{
background: color-mix(in srgb, var(--gv-bg) 92%, #fff 8%);
border: 1px solid color-mix(in srgb, var(--gv-text) 7%, transparent);
border-radius: 12px;
padding: clamp(10px, 2vw, 16px);
margin: clamp(20px, 3.5vw, 36px) 0;
box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
/* Apparition douce (magazine 2025) */
.gv-subcat{
opacity: 0;
transform: translateY(14px);
animation: gvFadeUp .5s ease forwards;
}
.gv-subcat:nth-of-type(2){ animation-delay: .04s; }
.gv-subcat:nth-of-type(3){ animation-delay: .08s; }
.gv-subcat:nth-of-type(4){ animation-delay: .12s; }
@keyframes gvFadeUp{
to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.gv-subcat{ animation: none; opacity:1; transform:none; }
}
/* 3) Header des sous-catégories + bouton "Voir tout" affiné */
.gv-subcat__header{
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin: 0 0 clamp(10px, 2vw, 14px);
}
.gv-subcat__title{
margin:0; line-height:1.25;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}
/* Bouton secondaire (ghost) – déjà installé, on ajoute juste la respiration locale */
.gv-subcat__more{ margin-top: 2px; } /* détache légèrement du titre */
.gv-subcat .gv-subcat__more{ margin-top: clamp(8px, 1.5vw, 12px); }
/* 4) Grille interne (tes 6 recettes) – on garantit une marge haute régulière */
.gv-subcat__grid{ margin-top: clamp(8px, 1.5vw, 12px); }
/* 5) Espacement global entre les blocs pour un rythme régulier */
@media (min-width: 1024px){
.gv-subcat{ margin: 36px 0; }
}
/* ============================================================
END GRILLE dernier post sous-catégories
============================================================ */
/* ============================================================
ARCHIVES CATEGORIES
============================================================ */
/* === 1. STYLE UNIFORME : CONTENEUR DE CARTE (Wrapper) === */
/* Cible le wrapper d'archive standard (.inside-article) ET le wrapper du Query Loop (.gb-loop-item) */
body.category .inside-article,
.gvrt-recipes-archive .gb-loop-item {
background: var(--gv-bg); /* #ffffff */
border: 1px solid color-mix(in srgb, var(--gv-text) 10%, transparent);
border-radius: var(--gv-radius);
box-shadow: 0 2px 10px rgba(0,0,0,.04);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
padding: 0; /* Le padding doit être sur les éléments internes pour éviter de casser l'image */
}
/* Applique l'effet de survol aux deux wrappers */
body.category .inside-article:hover,
.gvrt-recipes-archive .gb-loop-item:hover {
transform: translateY(-2px);
box-shadow: var(--gv-shadow);
border-color: color-mix(in srgb, var(--gv-text) 16%, transparent);
}
/* === 2. STYLE UNIFORME : IMAGE DE L'ARTICLE (Ratio éditorial 3/2) === */
/* Image wrapper (Simule le conteneur .post-image de l'archive) */
body.category .inside-article .post-image,
.gvrt-recipes-archive .gb-image {
overflow: hidden;
border-radius: var(--gv-radius) var(--gv-radius) 0 0;
display: flex;
justify-content: center;
align-items: center;
margin: 4px 0 5px;
}
/* L'image elle-même */
body.category .inside-article .post-image img,
.gvrt-recipes-archive .gb-image img {
width: 100%;
height: auto;
aspect-ratio: 3/2; /* Utilise le ratio éditorial */
object-fit: contain; /* Assure que l'image n'est pas coupée */
object-position: center;
}
/* L'effet de survol de l'image (zoom/brightness) */
body.category .inside-article:hover .post-image img,
.gvrt-recipes-archive .gb-loop-item:hover .gb-image img {
transform: scale(1.02);
filter: brightness(1.05);
}
/* === 3. STYLE UNIFORME : TITRE DE L'ARTICLE (Titre + Soulignement) === */
/* Applique le padding interne (pour le header, l'extrait ET les metas) */
body.category .inside-article .entry-header,
body.category .inside-article .entry-summary,
body.category .inside-article .entry-meta,
.gvrt-recipes-archive .gb-headline {
padding-left: 16px;
padding-right: 16px;
margin-bottom: 10px;
}
/* On gère les marges spécifiquement pour le rythme vertical */
body.category .inside-article .entry-header {
padding-top: 5px;
padding-bottom: 4px;
margin-bottom: 4px; /* Règle spécifique pour le rythme sous le titre d'archive */
}
/* Style du lien de titre */
body.category .entry-title a,
.gvrt-recipes-archive .gb-headline a {
/* Le style `display: -webkit-box; -webkit-line-clamp: 2;` est déjà défini sur l'archive,
nous assurons la couleur et la taille de base. */
color: var(--gv-heading); /* Assure la couleur de titre */
font-size: clamp(1.05rem, 1.6vw, 1.35rem); /* Taille d'archive */
text-decoration: none;
/* Ajoutez d'autres styles de base ici si nécessaire */
}
/* Soulignement éditorial du titre (la barre) */
body.category .entry-title a::after,
.gvrt-recipes-archive .gb-headline a::after { /* <-- CORRECTION: cibler le lien du Query Loop */
content: "";
display: block;
width: 64px;
height: 3px;
margin-top: 10px;
background: var(--gv-accent);
border-radius: 999px;
opacity: .85;
}
/* ============================================================
STYLE COMPLÉMENTAIRE QUERY LOOP (Marge & Chips de Catégorie)
============================================================ */
/* === CORRECTION MARGE INTERNE ET CHARTE DE CATÉGORIE === */
/* Ajoute l'espace vertical autour des liens de catégories et le padding pour aligner */
.gvrt-recipes-archive .gvrt-cats {
margin: 8px 0 10px 0; /* Marge verticale pour aérer */
padding: 0 16px;
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
font-size: 0; /* Masque tout séparateur texte */
}
/* Style de chaque lien de catégorie (la pilule) */
.gvrt-recipes-archive .gvrt-cats a {
font-size: 0.9rem !important;
display: inline-flex;
align-items: center;
padding: 6px 10px;
line-height: 1;
border-radius: 999px;
/* Couleurs cohérentes avec la charte des metas (.entry-meta a) */
background: #eee5da;
color: var(--gv-text);
border: 1px solid color-mix(in srgb, var(--gv-text) 10%, transparent);
/* Retire l'effet de soulignement indésirable des titres */
padding-bottom: 6px;
text-decoration: none;
}
/* Enlève la barre de titre du Query Loop si elle est présente par erreur sur ces liens spécifiques */
.gvrt-recipes-archive .gvrt-cats a::after {
display: none !important;
content: none !important;
}
/* Effet de survol cohérent */
.gvrt-recipes-archive .gvrt-cats a:hover {
background: color-mix(in srgb, var(--gv-accent) 16%, #fff);
border-color: color-mix(in srgb, var(--gv-accent) 30%, transparent);
color: var(--gv-heading);
}
/* Assure que l'extrait a une marge basse pour l'aération */
.gvrt-recipes-archive .wp-block-post-excerpt,
.gvrt-recipes-archive .gb-container p {
padding: 0 16px; /* Assure le padding latéral */
margin-bottom: 0.8em;
}
/* === CORRECTION ESPACEMENT GRILLE QUERY LOOP (Page Toutes les recettes) === */
/* Cible le Query Loop GenerateBlocks (le Looper) pour ajouter le gap entre les cartes */
.gvrt-recipes-archive [class*="gb-looper-"] {
display: grid;
gap: 20px; /* Espace de 20px entre les cartes (Horizontal et Vertical) */
margin-bottom: 40px; /* Assure une bonne marge après la grille */
}
/* === CORRECTION: PADDING LATÉRAL DES EXTRAITS DANS LE QUERY LOOP (GVRT) === */
/* Cible l'extrait (wp-block-post-excerpt) et le paragraphe (gb-container p) du Query Loop */
.gvrt-recipes-archive .gb-text,
.gvrt-recipes-archive .gb-container p {
/* Assure le padding latéral de 16px pour décoller le texte des bords */
padding-left: 16px;
padding-right: 16px;
/* Corrige les marges verticales pour une meilleure aération */
margin-top: 0;
margin-bottom: 10px;
}
/* === CORRECTION: GRILLE 1 COLONNE SUR MOBILE/TABLETTE PORTRAIT === */
/* Cible le conteneur de la grille (le looper) */
.gvrt-recipes-archive [class*="gb-looper-"] {
/* Par défaut, c'est une grille flexible qui peut être cassée par d'anciennes règles de thème. */
/* Assure une grille de 2 colonnes par défaut pour le desktop (comme souhaité) */
grid-template-columns: repeat(3, 1fr); /* Si vous souhaitez 3 colonnes sur desktop */
}
/* Forcer 1 seule colonne sur les petits écrans (jusqu'à 768px, couvrant mobile et tablette portrait) */
@media (max-width: 768px) {
.gvrt-recipes-archive [class*="gb-looper-"] {
grid-template-columns: 1fr !important; /* Force la grille sur 1 colonne */
}
}
/* ... (Le reste du Bloc 3 peut rester tel quel, vous pouvez ajouter les sélecteurs à la ligne 1882) ... */
/* Extrait compact (3 lignes partout) */
body.category .entry-summary > p{
margin: 0 0 10px;
color: color-mix(in srgb, var(--gv-text) 86%, #000);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* CTA */
body.category .read-more-container{ margin: 12px 0 0; }
body.category .read-more.button{
display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
padding:10px 16px; line-height:1; white-space:nowrap; max-width:max-content;
background: var(--gv-button); color:#fff !important; border:1px solid var(--gv-button);
border-radius:999px; font-weight:600; text-decoration:none;
transition: background .2s ease, color .2s ease, transform .15s ease;
}
body.category .read-more.button:hover{
background: var(--gv-button-hover); border-color: var(--gv-button-hover); transform: translateY(-1px);
}
body.category .read-more.button::after{ content:" →"; }
/* Métas en chips (+ suppression des virgules) */
body.category .entry-meta{
margin-top:auto;
border-top: 1px solid color-mix(in srgb, var(--gv-text) 8%, transparent);
padding-top: 12px;
display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
}
body.category .entry-meta .gp-icon{ display:none; }
body.category .entry-meta .cat-links,
body.category .entry-meta .tags-links{
display:flex; flex-wrap:wrap; gap:8px 10px;
font-size:0; /* masque les séparateurs texte (virgules) */
}
body.category .entry-meta .cat-links a,
body.category .entry-meta .tags-links a{
font-size:.9rem;
display:inline-flex; align-items:center;
padding:6px 10px; line-height:1; border-radius:999px;
background:#eee5da; color:var(--gv-text);
text-decoration:none;
border:1px solid color-mix(in srgb, var(--gv-text) 10%, transparent);
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.category .entry-meta .cat-links a + a,
body.category .entry-meta .tags-links a + a{ margin-left:0; }
body.category .entry-meta a:hover{
background: color-mix(in srgb, var(--gv-accent) 16%, #fff);
border-color: color-mix(in srgb, var(--gv-accent) 30%, transparent);
color: var(--gv-heading);
}
/* Accessibilité / motion */
body.category a:focus-visible{
outline:2px solid color-mix(in srgb, var(--gv-accent) 60%, #7fb);
outline-offset:2px; border-radius:6px;
}
/* Ajustements verticaux fins — archives */
body.category .inside-article .entry-summary {
margin-top: 0px; /* ↓ réduit l'espace entre image et texte */
margin-bottom: 10px; /* ↓ espace plus aéré avant le bouton */
}
body.category .inside-article .read-more-container {
margin-top: 14px; /* ↑ éloigne légèrement le bouton du texte */
}
@media (prefers-reduced-motion: reduce){
body.category .inside-article,
body.category .post-image img,
body.category .read-more.button{ transition:none; }
}
/* ===== Containers ===== */
/* GB : conteneur + nav de la pagination sur "Toutes les recettes" */
.gvrt-recipes-archive .gvrt-pager,
.gvrt-recipes-archive .gvrt-pager,
.generate-columns-container .paging-navigation, nav{
display:flex; justify-content:center; align-items:center;
gap:8px; flex-wrap:wrap;
margin: clamp(28px, 6vw, 6px) 0 0;
margin-bottom: 20px !important;
}
/* Core : autres templates */
.paging-navigation{
display:flex; justify-content:center; align-items:center;
gap:8px; flex-wrap:wrap;
margin: clamp(28px, 6vw, 64px) auto 0;
}
.paging-navigation .nav-links{ display:flex; gap:8px; flex-wrap:wrap; }
/* ===== Pastilles unifiées (GB + Core) ===== */
/* numéros */
.paging-navigation .page-numbers,
.gvrt-recipes-archive .gvrt-pager nav .page-numbers{
width:40px; height:40px; min-width:40px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px; line-height:1; font-weight:600; text-decoration:none;
border:2px solid var(--gv-button, #8bb557);
color: var(--gv-button, #8bb557);
background: transparent;
transition: background .2s ease, color .2s ease,
border-color .2s ease, transform .15s ease;
}
/* hover (liens uniquement) */
.paging-navigation a.page-numbers:hover,
.gvrt-recipes-archive .gvrt-pager nav a.page-numbers:hover{
background: var(--gv-button, #8bb557);
color:#fff;
border-color: var(--gv-button, #8bb557);
transform: translateY(-1px);
}
/* courant : .current (core) et .current (GB, span.page-numbers.current) */
.paging-navigation .page-numbers.current,
.gvrt-recipes-archive .gvrt-pager nav .page-numbers.current{
background: var(--gv-button, #8bb557);
color:#fff;
border-color: var(--gv-button, #8bb557);
font-weight:700; transform:none; cursor:default;
}
/* Prev / Next -> pill ovales */
.paging-navigation .prev,
.paging-navigation .next,
.gvrt-recipes-archive .gvrt-pager nav .prev,
.gvrt-recipes-archive .gvrt-pager nav .next{
width:auto; min-width:44px; height:40px; padding:0 14px;
border-radius:999px;
}
/* Mobile : compacter un peu */
@media (max-width:640px){
.paging-navigation .page-numbers,
.gvrt-recipes-archive .gvrt-pager nav .page-numbers{
width:36px; height:36px; min-width:36px;
}
}
/* === Boutons hors