/*
Theme Name: GeneratePress Child
Theme URI: https://dev.neowood.fr/blog/
Description: Thème enfant de GeneratePress — styles et scripts personnalisés (slider, etc.).
Author: Neowood
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/
/* ===== Sliders : disposition COMMUNE (accueil + articles) ===== */
/* Mécanique partagée par les deux variantes .home-slider et .post-slider. */
/* Seules les DIMENSIONS diffèrent (voir « variantes » plus bas). */
.home-slider,
.post-slider {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 1rem;
scrollbar-width: none;
/* Firefox : barre masquée */
}
.home-slider::-webkit-scrollbar,
.post-slider::-webkit-scrollbar {
display: none;
}
/* Chrome/Safari : barre masquée */
.home-slider figure,
.post-slider figure {
flex: 0 0 100% !important;
/* largeur d'une slide */
max-width: 100% !important;
margin: 0 !important;
scroll-snap-align: center;
position: relative;
/* ancre le voile ::after + l'overlay */
z-index: 0;
/* contexte d'empilement local : l'overlay */
/* passe au-dessus du voile MAIS reste sous */
/* le header sticky (z-index élevé). */
}
/* Image : règles communes (la HAUTEUR est propre à chaque variante). */
.home-slider figure img,
.post-slider figure img {
width: 100% !important;
object-fit: cover;
/* recadre pour remplir sans déformer */
border-radius: 8px;
}
/* ===== Variantes : hauteur des slides ===== */
.home-slider figure img {
height: 75vh;
}
/* accueil : héro plein écran */
.post-slider figure img {
height: 480px;
}
/* articles : galerie inline (à ajuster) */
/* ===== Sliders : flèches de navigation ===== */
.slider-wrap {
position: relative;
}
/* Calque centré sur CHAQUE image (accueil uniquement) : le container qui suit */
/* une figure est déplacé dans cette figure par le JS et reçoit .slide-overlay. */
.home-slider figure .slide-overlay {
position: absolute;
inset: 0;
/* couvre toute l'image */
z-index: 1;
/* au-dessus du voile ::after (contexte de la figure) */
display: flex;
flex-direction: column;
align-items: flex-start;
/* contenu aligné à GAUCHE */
justify-content: center;
/* centrage vertical du contenu */
text-align: left;
padding: 2rem clamp(1.5rem, 5vw, 4rem);
pointer-events: none;
/* laisse passer le swipe/scroll vers l'image */
}
/* Rétablit l'interactivité sur les éléments cliquables de l'overlay. */
.home-slider figure .slide-overlay a,
.home-slider figure .slide-overlay button {
pointer-events: auto;
}
/* Contenu de l'overlay aligné à GAUCHE : chaque .gb-text a son propre
text-align:center + margin-left:auto (CSS GenerateBlocks) à écraser ici. */
.home-slider figure .slide-overlay .gb-text,
.home-slider figure .slide-overlay > div {
text-align: left;
margin-left: 0;
margin-right: 0;
}
/* Conteneurs internes (dont le conteneur du bouton) : alignés à gauche. */
.home-slider figure .slide-overlay [class*="gb-element-"] {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
margin-left: 0;
margin-right: 0;
}
/* ===== Menu de la home : liens en blanc (desktop uniquement) ===== */
/* En dessous de 992px le burger ouvre un menu sur fond clair (le blanc le */
/* rendrait illisible). Doit rester aligné sur le point de bascule réel du */
/* menu burger (992px, vérifié au rendu). */
/* Spécificité (0,3,1) laissée basse pour ne pas écraser l'item courant (0,3,3). */
@media (min-width: 992px) {
.home .main-navigation:not(.navigation-stick) a {
color: #ffffff;
}
}
/* ===== Icônes loupe + burger en blanc (mobile + tablette) ===== */
/* Menu principal NON sticky uniquement. Les SVG .gp-icon sont en */
/* fill: currentColor → la couleur suffit, fill forcé par sécurité. */
.home .main-navigation:not(.navigation-stick) .menu-toggle .gp-icon,
.home .main-navigation:not(.navigation-stick) .menu-bar-item .gp-icon,
.home .main-navigation:not(.navigation-stick) .menu-toggle .gp-icon svg,
.home .main-navigation:not(.navigation-stick) .menu-bar-item .gp-icon svg {
color: #ffffff;
fill: #ffffff;
}
/* ===== Header top (non sticky) survolé : même rendu que le menu sticky ===== */
/* Au top de la home le header est fusionné au hero (fond transparent, logo
blanc .page-hero-logo, liens blancs). Au survol du header on reproduit la
barre sticky : fond blanc, liens gris (--contrast-2), logo couleur.
Desktop uniquement (992px = bascule burger, comme les règles ci-dessus). */
@media (min-width: 992px) {
/* z-index : le hero (plus loin dans le DOM) peignait par-dessus le header
(liens masqués par l'image, fond blanc voilé par l'overlay du hero). */
.home .site-header {
position: relative;
z-index: 60;
transition: background-color 0.2s ease;
/* dark overlay at the top (non-sticky, non-hover) for link legibility */
background-color: rgba(0, 0, 0, 0.3);
}
.home .site-header:hover {
background-color: #ffffff;
}
.home .site-header:hover .main-navigation:not(.navigation-stick) a {
color: var(--contrast-2);
}
/* Le lien réellement survolé / l'item courant restent bleus : la règle
grise ci-dessus (0,5,1) battrait sinon le hover Customizer (0,3,3). */
.home .site-header:hover .main-navigation:not(.navigation-stick) .main-nav ul li a:hover,
.home .site-header:hover .main-navigation:not(.navigation-stick) .main-nav ul li[class*="current-menu-"] > a {
color: #10A9B6;
}
.home .site-header:hover .main-navigation:not(.navigation-stick) .menu-toggle .gp-icon,
.home .site-header:hover .main-navigation:not(.navigation-stick) .menu-bar-item .gp-icon,
.home .site-header:hover .main-navigation:not(.navigation-stick) .menu-toggle .gp-icon svg,
.home .site-header:hover .main-navigation:not(.navigation-stick) .menu-bar-item .gp-icon svg {
color: var(--contrast-2);
fill: var(--contrast-2);
}
/* Bascule des logos : on cache le blanc, on montre le couleur (GP le
masque via « .site-logo:not(.page-hero-logo){display:none} », (0,2,0)). */
.home .site-header:hover .site-logo.page-hero-logo {
display: none;
}
.home .site-header:hover .site-logo:not(.page-hero-logo) {
display: block;
}
}
/* ===== Sous-menus (dropdowns), menu NON sticky : fond blanc + texte vert ===== */
/* Sélecteur (0,4,1) pour battre la règle GeneratePress .main-nav ul ul (0,3,0). */
.main-navigation:not(.navigation-stick) .main-nav ul.sub-menu {
background-color: #ffffff;
}
.main-navigation:not(.navigation-stick) .main-nav ul.sub-menu a {
color: var(--accent-2);
}
/* Survol / item courant : fond blanc + bleu du blog (comme le menu principal). */
.main-navigation:not(.navigation-stick) .main-nav ul.sub-menu a:hover,
.main-navigation:not(.navigation-stick) .main-nav ul.sub-menu li[class*="current-menu-"]>a {
background-color: #ffffff;
color: #10A9B6;
}
/* GP only draws the right + bottom hairline: add the left one (selector (0,2,2)
beats GP's .main-navigation ul ul and .main-navigation.sub-menu-left ul ul). */
.main-navigation .main-nav ul ul {
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1);
}
/* ===== Menu off-canvas : pas de séparateur avant la flèche de sous-menu ===== */
/* GP pose une border-left (+ margin/padding) entre le libellé et le chevron */
/* des items à enfants. Ciblé via l'ID du panneau (#generate-slideout-menu) : */
/* spécificité ID (1,2,1) > règle GP par classes (0,3,1). */
#generate-slideout-menu .menu-item-has-children .dropdown-menu-toggle {
border-left: 0;
margin-left: 10px;
padding-left: 0;
}
/* ===== Burger mobile : pas de fond (comme l'icône recherche) ===== */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
background-color: transparent;
}
/* Burger + loupe : icônes un peu plus grandes (les SVG font 1em). */
.main-navigation .menu-toggle .gp-icon,
.main-navigation .menu-bar-item .gp-icon {
font-size: 1.4em;
}
/* Burger + loupe : padding haut pour aligner les icônes sur le logo */
/* (menu NON sticky, toutes résolutions). */
.main-navigation:not(.navigation-stick) .menu-toggle .gp-icon,
.main-navigation:not(.navigation-stick) .menu-bar-item .gp-icon {
padding-top: 10px;
}
/* ===== 992–1200px : le menu desktop peut passer sur 2 lignes ===== */
/* (Le burger ne prend le relais qu'en dessous de 992px, vérifié au rendu.) */
/* On compacte : lignes à 40px (2 × 40 = les 80px d'origine) et logo du */
/* header calé en haut à gauche. */
@media (min-width: 992px) and (max-width: 1200px) {
/* Le logo est dans .inside-header (flex centré) : on le cale en haut. */
.site-header .inside-header {
align-items: flex-start;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-item > a {
line-height: 40px;
}
/* Les
du menu et la loupe deviennent des enfants flex directs de */
/* .inside-navigation : la loupe suit « Échantillons » dans le flux, */
/* quel que soit l'endroit exact où le menu passe à la ligne (le seuil */
/* dépend du rendu des polices, on ne peut pas le figer en px). */
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
display: contents;
}
/* Sans ça, le space-between de GP répartirait les items sur la ligne. */
.main-navigation .inside-navigation {
justify-content: flex-start;
}
/* Passage à la ligne forcé AVANT « Échantillons » (dernier item) : le */
/* seuil de wrap naturel varie selon le rendu des polices, on impose */
/* donc toujours 2 lignes ici — ligne 2 = Échantillons + loupe. Le */
/* pseudo-élément flex-basis:100% casse la ligne entre order 0 et 2. */
.main-navigation .inside-navigation::after {
content: "";
flex-basis: 100%;
order: 1;
}
.main-navigation .main-nav > ul > li:last-child,
.main-navigation .menu-bar-items {
order: 2;
}
/* Le padding-top de la loupe (alignement sur le logo) casserait */
/* l'alignement avec la ligne du menu : on l'annule ici. */
.main-navigation:not(.navigation-stick) .menu-bar-item .gp-icon {
padding-top: 0;
}
}
/* ===== Menu sticky : padding latéral selon la résolution ===== */
/* Cible par ID (#sticky-navigation) : spécificité ID > toute règle de classe GP. */
/* Desktop : aucun padding latéral, 10px haut/bas. */
#sticky-navigation .inside-navigation.grid-container {
padding-left: 0;
padding-right: 0;
padding-top: 10px;
padding-bottom: 10px;
}
/* Dropdowns must stay glued to the
(top:auto): any gap and the pointer
drops li:hover on the way down, GP closing the panel instantly. The 10px of
sticky bar padding below the
is cleared with transparent padding, whose
background is clipped away — the panel keeps its Customizer colour. */
#sticky-navigation .main-nav > ul > li > ul {
top: auto;
padding-top: 10px;
background-clip: content-box;
box-shadow: none;
z-index: 100000;
}
/* Hairlines redrawn around the visible area: the box-shadow above is painted on
the border box, so it would ride 10px up into the bar. */
#sticky-navigation .main-nav > ul > li > ul::before {
content: "";
position: absolute;
top: 10px;
left: 0;
right: 0;
bottom: 0;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1);
pointer-events: none;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Pas de z-index positif (cf. .slide-overlay) : éviterait de passer */
/* devant le header sticky ; l'ordre du DOM suffit à les garder visibles. */
border: 0;
cursor: pointer;
width: 42px;
height: 42px;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
color: #fff;
font-size: 24px;
line-height: 1;
display: flex;
/* centrage du chevron */
align-items: center;
justify-content: center;
}
.slider-btn:hover {
background: #5AB8C0;
}
.slider-prev {
left: 8px;
}
.slider-next {
right: 8px;
}
/* ===== Header : padding (menu non sticky) ===== */
/* Cible via #masthead (ID) pour battre les règles/inline GeneratePress (0,1,0). */
#masthead .inside-header,
nav.gpc-breadcrumb {
padding: 10px;
}
/* ===== Suppression des lettrines (drop caps) ===== */
.has-drop-cap:not(:focus)::first-letter {
color: inherit;
float: none;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0;
text-transform: none;
}
/* ===== Contact Form 7 : bords arrondis (style thème GenerateBlocks) ===== */
/* Champs simples : pilule, comme les champs/boutons du thème (9999px) */
.wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit),
.wpcf7-form select.wpcf7-form-control {
border-radius: 9999px;
width: 100%;
/* pleine largeur, comme le textarea */
}
/* Zone de texte : rayon des cartes (1.5rem) — la pilule serait inadaptée */
.wpcf7-form textarea.wpcf7-form-control {
border-radius: 1.5rem;
}
/* Bouton d'envoi : pilule comme les CTA du thème, légèrement agrandi */
.wpcf7-form input.wpcf7-submit {
border-radius: 9999px;
padding: 0.9em 2.5em;
/* plus d'air autour du label */
font-size: 1.05rem;
/* texte un peu plus grand */
}
/* Message de réponse global : rendu identique aux messages d'erreur de champ */
/* (.wpcf7-not-valid-tip) → sans bordure ni padding, couleur + police des tips. */
.wpcf7 form .wpcf7-response-output {
margin-left: 0;
margin-right: 0;
border: 0;
/* vire la bordure */
padding: 0;
/* vire le padding */
color: #dc3232;
/* = couleur des tips d'erreur CF7 */
font: inherit;
/* même police que les tips (héritée) */
}
/* Temps de lecture dans l'en-tête d'article : calé sur la date (.gb-text-d1109e84) */
/* Classe doublée (0,2,0) pour battre le style global du plugin (0,1,0), sans dépendre de l'emplacement */
.bsf-rt-reading-time.bsf-rt-reading-time {
display: inline-flex;
align-items: center;
column-gap: 0.25em;
/* rétablit l'espace entre "Reading Time" / "2" / "mins" (flex ignore les blancs) */
width: auto;
/* annule le width:max-content du plugin */
background: none;
/* annule la pastille grise */
margin: 0;
padding: 0;
font-size: 0.75rem;
/* = date */
line-height: 1rem;
/* = date */
letter-spacing: 0.025em;
/* = date */
color: var(--contrast-2);
/* = date */
/* font-family non forcée par le plugin → héritée comme la date */
}
/* ===== Read Meter : barre de progression ===== */
/* --rt-bandeau = bas réel du bandeau collé, calculé par assets/js/reading-progress-offset.js. */
/* Il inclut déjà la barre d'admin (margin-top du menu sticky). 0px avant scroll = tout en haut. */
/* Le 1er sélecteur (0,3,0) bat la règle .admin-bar .progress-container-top {top:30px} du plugin (0,2,0). */
.admin-bar .progress-container-top.progress-container-top,
.progress-container-top.progress-container-top {
top: var(--rt-bandeau, 0px);
transition: top 120ms linear;
visibility: hidden;
/* masquée tant que le bandeau n'est pas collé (tout en haut) */
/* Purely decorative: it sits right under the sticky bar and would otherwise
steal the pointer leaving a menu item, closing the dropdown. */
pointer-events: none;
}
/* Affichée seulement quand le bandeau est collé (classe posée par le JS). */
html.rt-bandeau-stuck .progress-container-top.progress-container-top {
visibility: visible;
}
/* Hauteur réduite à 6px. Sélecteur .admin-bar … (0,3,0) pour battre la règle */
/* .admin-bar .progress-container-top {height:…px} injectée par le plugin (0,2,0). */
.admin-bar .progress-container-top.progress-container-top,
.progress-container-top.progress-container-top {
height: 6px;
}
.progress-container-top .progress-bar {
height: 6px;
}
/* Mobile : slider d'accueil en plein écran (le post-slider garde sa hauteur) */
@media (max-width: 768px) {
.home-slider figure img {
height: 100vh;
}
}
/* 801px – 872px : 40px de padding latéral (10px haut/bas inchangés). */
@media (min-width: 801px) and (max-width: 872px) {
#masthead .inside-header {
padding: 10px;
}
}
/* Mobile : flèches masquées (navigation au swipe) */
@media (max-width: 768px) {
.slider-btn {
display: none;
}
}
/* Téléphone + tablette (≤ 1024px) : padding latéral fluide (borné 1.2rem ↔ 3rem). */
@media (max-width: 1024px) {
#sticky-navigation .inside-navigation.grid-container {
padding-left: clamp(1.2rem, 4vw, 3rem);
padding-right: clamp(1.2rem, 4vw, 3rem);
}
}
/* 1025px – 1451px : même padding latéral fluide. */
@media (min-width: 1025px) and (max-width: 1451px) {
#sticky-navigation .inside-navigation.grid-container {
padding-left: clamp(1.2rem, 4vw, 3rem);
padding-right: clamp(1.2rem, 4vw, 3rem);
}
}
/* Yoast Breadcrumb */
.gpc-breadcrumb--after-header {
padding: 1rem 0;
font-size: 0.875rem;
line-height: 1.4;
}
.gpc-breadcrumb--after-header p {
margin: 0;
}
.gpc-breadcrumb--after-header a {
text-decoration: none;
}
.gpc-breadcrumb {
--gpc-breadcrumb-separator-color: #999;
}
.gpc-breadcrumb-separator {
display: inline-flex;
align-items: center;
margin: 0 0.45rem;
color: #999;
vertical-align: middle;
}
.gpc-breadcrumb-separator svg {
display: block;
}
/* ===== Single article : hero custom ===== */
.single-post .site-content {
flex-wrap: wrap;
align-items: flex-start;
}
.single-post .gpc-single-hero {
flex: 0 0 100%;
width: 100vw;
max-width: none;
margin-top: clamp(10rem, 8vw, 10rem);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-bottom: clamp(2rem, 5vw, 4.5rem);
background: #f7faf8;
}
@media (max-width: 800px) {
.single-post .gpc-single-hero {
margin-top: clamp(8rem, 8vw, 10rem);
}
}
.single-post .gpc-single-hero__inner {
padding: 0 10px;
}
.single-post .gpc-single-body {
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%;
padding: 0 10px;
}
.single-post .gpc-single-body>.content-area,
.single-post .gpc-single-body>.sidebar {
min-width: 0;
}
@media (min-width: 769px) {
.single-post.right-sidebar .gpc-single-body>.content-area {
margin-right: 30px;
}
.single-post.both-right .gpc-single-body>.content-area,
.single-post.both-sidebars .gpc-single-body>.content-area,
.single-post.both-left .gpc-single-body>.content-area {
margin-right: 30px;
}
}
.single-post.full-width-content.separate-containers .inside-article,
.single-post.contained-content.separate-containers .inside-article {
padding: 0 0 40px;
}
.single-post .gpc-single-hero__inner {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: stretch;
padding-top: clamp(2rem, 6vw, 5rem);
padding-bottom: clamp(2rem, 6vw, 5rem);
}
.single-post .gpc-single-hero__content {
align-self: center;
max-width: 680px;
}
.single-post .gpc-single-hero__inner.no-cover {
grid-template-columns: minmax(0, 860px);
justify-content: center;
}
.single-post .gpc-single-hero__inner.no-cover .gpc-single-hero__content {
max-width: 860px;
text-align: center;
}
.single-post .gpc-single-hero__inner.no-cover .gpc-single-hero__meta {
justify-content: center;
}
/* Category + tags as plain text links above the title, dot-separated. */
.single-post .gpc-single-hero__terms {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1rem;
}
.single-post .gpc-single-hero__pill {
display: inline-flex;
align-items: center;
color: #10A9B6;
font-size: 0.8rem;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none;
}
.single-post .gpc-single-hero__pill:hover {
text-decoration: none;
color: #0d8a95; /* subtle darken instead of underline */
}
/* Dot separator: black SVG circle, flex-centered with the term (color in SVG). */
.single-post .gpc-single-hero__pill:not(:last-child)::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23182a39'/%3E%3C/svg%3E");
margin: 0 0.55rem;
position: relative;
top: -1px; /* raise by half the dot size */
}
.single-post .gpc-single-hero__title {
margin: 0;
color: #182a39;
font-size: clamp(1rem, 2.5vw, 3rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: 0;
text-transform: none;
margin-bottom: 2rem;
}
.single-post .gpc-single-hero__excerpt {
margin: 1.25rem 0 4rem;
color: #182a39;
font-size: clamp(1rem, 1.4vw, 1.1rem);
font-weight: 700;
line-height: 1.5;
}
.single-post .gpc-single-hero__excerpt p {
margin-bottom: 0;
}
.single-post .gpc-single-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1rem;
align-items: center;
margin-top: 1.5rem;
color: var(--contrast-2);
font-size: 0.82rem;
line-height: 1.4;
}
/* Bouton « Partager » du hero : même rendu que les autres métas.
Sélecteur volontairement spécifique (0,3,1) : les styles génériques de
« button » (GeneratePress, plugins) écrasent un simple .gpc-share. */
.single-post .gpc-single-hero__meta button.gpc-share {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0;
border: none;
background: none;
color: inherit;
font-size: inherit;
line-height: inherit;
cursor: pointer;
}
/* background/border répétés : « button:hover/:focus » de GeneratePress
(fond var(--accent-2)) est plus spécifique que le reset .gpc-share seul. */
.single-post .gpc-single-hero__meta button.gpc-share:hover,
.single-post .gpc-single-hero__meta button.gpc-share:focus,
.single-post .gpc-single-hero__meta button.gpc-share.gpc-share--copied {
padding: 0;
border: none;
background: none;
color: #10A9B6;
}
/* Police système partagée par les éléments d'UI (méta, filtres, badges, CTA…). */
.single-post .gpc-single-hero__meta>*,
.gpc-cat-filter:not(.gpc-cat-filter--menu) .gpc-cat-filter__link,
.gpc-cat-filter:not(.gpc-cat-filter--menu) .gpc-cat-filter__link:hover,
.gpc-cat-filter:not(.gpc-cat-filter--menu) .gpc-cat-filter__link:focus,
.gpc-featured__badge,
.gpc-featured__date,
.gpc-featured__cta span,
.gb-loop-item p.gb-text > a[rel="tag"],
.gb-loop-item a:has(> .gb-shape),
.gb-loop-item a:has(> .gb-shape) .gb-text,
.gb-loop-item a:has(> .gb-shape) .gb-shape svg,
.gpc-cat-filter__search-input,
.gpc-cat-filter__select,
.gpc-cat-filter--menu,
.gpc-cat-filter--menu *,
.gpc-sidebar .gpc-sidebar__search-input,
.gb-text.gpc-archive-pill,
.wp-block-button .wp-block-button__link.wp-element-button,
a[class*="gb-text-"]:has(> .gb-text):has(> .gb-shape),
a[class*="gb-text-"]:has(> .gb-text):has(> .gb-shape) .gb-text {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Core buttons: teal outline on hover (Customizer can't add a hover-only border). */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
box-shadow: inset 0 0 0 1px #10A9B6;
}
/* Titre (h2) + sous-titre (p) de la description catégorie : police de marque
Avenir LT Std (comme la maquette), pas system-ui. Poids forcés pour éviter le
fichier Avenir 600 qui est un OBLIQUE (sinon le texte repart en italique) :
h2 gras => 700 (Heavy, droit), p => 400 (Book, droit). */
/* ATTENTION : le
est auto-fermé par le navigateur
dès qu'il rencontre le
de la description → dans le DOM réel, le h2 et le p
sont des FRÈRES du h1 (vide), pas des enfants. On les cible donc avec le
combinateur de frère « ~ » (et NON en descendant « .gpc-archive-desc p »). */
.gpc-archive-desc ~ h2,
.gpc-archive-desc ~ p {
font-family: var(--gp-font--avenir-lt-std);
text-transform: none;
letter-spacing: normal;
text-align: center;
}
/* Titre : Avenir Heavy (droit), bleu marine de marque. */
.gpc-archive-desc ~ h2,
.gpc-archive-desc ~ h2 strong {
font-weight: 700;
}
.gpc-archive-desc ~ h2 {
max-width: 700px;
margin: 0 auto 1rem;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
color: #2C404F;
}
/* Sous-titre : Avenir Book (droit), gris. */
.gpc-archive-desc ~ p {
max-width: 700px;
margin: 0 auto;
font-weight: 400;
font-size: 1.05rem;
line-height: 1.6;
color: #54595F;
}
.single-post .gpc-single-hero__meta>* {
display: inline-flex;
align-items: center;
}
.single-post .gpc-single-hero__meta .gp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-right: 0.45em;
opacity: 0.7;
}
.single-post .gpc-single-hero__meta .gp-icon svg {
display: block;
top: 0;
}
.single-post .gpc-single-hero__meta a {
color: inherit;
text-decoration: none;
}
.single-post .gpc-single-hero__meta a:hover {
color: var(--accent);
}
.single-post .gpc-single-hero__image {
position: relative;
height: 100%;
min-height: 0;
margin: 0;
overflow: hidden;
border-radius: 8px;
}
.single-post .gpc-single-hero__image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar.is-right-sidebar {
margin-bottom: 20px;
}
.sidebar.is-right-sidebar .widget {
padding: 15px;
border-radius: 16px;
border: 1px solid #f2f2f2;
margin-bottom: 20px;
}
/* Panneau de ressources ([blog_resources]) : il porte déjà son fond et son
padding interne (.gpc-sidebar__panel). Le padding du widget ferait un double
cadre : on le retire pour ce seul widget. */
.single-post .sidebar.is-right-sidebar .widget:has(.gpc-sidebar--resources) {
padding: 0;
}
.sidebar.is-right-sidebar .widget .widget-title,
.sidebar .widget .wp-block-heading {
font-size: 20px;
font-weight: 900;
line-height: 1.5;
margin: 0 0 0 15px;
color: #182a39;
text-transform: none;
}
.sidebar.is-right-sidebar .widget ul,
.sidebar.is-right-sidebar .widget p {
margin: 10px 0 0 15px;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__list {
display: grid;
gap: 1.5rem;
margin: 15px 0 0 15px;
padding: 0;
list-style: none;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__item {
margin: 0;
padding: 0;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__link {
display: flex;
gap: 1rem;
align-items: center;
color: inherit;
text-decoration: none;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__thumb {
flex: 0 0 120px;
width: 120px;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 8px;
background: #f2f5f3;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__content {
display: grid;
gap: 0.25rem;
min-width: 0;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__title {
color: #182a39;
font-size: 0.95rem;
font-weight: 800;
line-height: 1.25;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__date {
color: var(--contrast-2);
font-size: 0.78rem;
line-height: 1.3;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__link:hover .gpc-related-sidebar__title {
color: var(--accent);
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__archive-link {
display: inline-flex;
gap: 0.4rem;
align-items: center;
margin: 1.5rem 0 0 15px;
color: var(--accent);
font-size: 0.9rem;
font-weight: 800;
line-height: 1.3;
text-decoration: none;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__archive-link:hover {
color: var(--accent-2);
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__archive-icon {
flex: 0 0 auto;
width: 1.05em;
height: 1.05em;
transition: transform 160ms ease;
}
.sidebar.is-right-sidebar .widget .gpc-related-sidebar__archive-link:hover .gpc-related-sidebar__archive-icon {
transform: translateX(2px);
}
@media (min-width: 769px) {
.single-post #right-sidebar {
align-self: stretch;
}
.single-post #right-sidebar .inside-right-sidebar {
position: sticky;
top: calc(var(--rt-bandeau, 0px) + 2rem);
}
}
/* ===== Easy TOC widget : numéros + état actif ===== */
.single-post {
--gpc-toc-number-color: #10A9B6;
--gpc-toc-active-bar-color: #10A9B6;
--gpc-toc-item-space-before: 0.35rem;
--gpc-toc-item-space-after: 0.35rem;
--gpc-toc-link-padding-y: 0.15rem;
--gpc-toc-link-padding-x: 0;
--gpc-toc-number-gap: 0.5rem;
--gpc-toc-active-bar-width: 3px;
--gpc-toc-active-bar-gap: 0.75rem;
}
.single-post #ez-toc-widget-container ul.ez-toc-list,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list {
counter-reset: gpc-toc-item;
margin: 0;
padding: 0;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li {
counter-increment: gpc-toc-item;
position: relative;
margin-top: var(--gpc-toc-item-space-before);
margin-bottom: var(--gpc-toc-item-space-after);
padding-left: var(--gpc-toc-active-bar-gap);
background: transparent;
border-left: var(--gpc-toc-active-bar-width) solid transparent;
overflow: visible;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li::before,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li::before {
content: none;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li>a,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li>a {
display: flex;
gap: var(--gpc-toc-number-gap);
align-items: flex-start;
width: 100%;
padding: var(--gpc-toc-link-padding-y) var(--gpc-toc-link-padding-x);
color: inherit;
font-weight: inherit;
line-height: 1.35;
text-decoration: none;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li>a::before,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li>a::before {
content: counter(gpc-toc-item, decimal-leading-zero);
display: inline-block;
flex: 0 0 auto;
min-width: 2ch;
color: var(--gpc-toc-number-color);
font-weight: 700;
line-height: inherit;
white-space: nowrap;
}
.single-post #ez-toc-widget-container.ez-toc-counter nav ul li a::before,
.single-post #ez-toc-widget-sticky-container.ez-toc-widget-sticky-container nav ul li a::before {
content: counter(gpc-toc-item, decimal-leading-zero);
display: inline-block;
flex: 0 0 auto;
min-width: 2ch;
counter-increment: none;
margin: 0;
float: none;
width: auto;
color: var(--gpc-toc-number-color);
white-space: nowrap;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li.is-active,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.is-active {
background: transparent;
border-left-color: var(--gpc-toc-active-bar-color);
}
html.gpc-toc-pending .single-post #ez-toc-widget-container ul.ez-toc-list li.is-active,
html.gpc-toc-pending .single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.is-active {
border-left-color: transparent;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li.is-active>a,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.is-active>a {
background: transparent;
}
.single-post #ez-toc-widget-container ul.ez-toc-list li.is-active>a,
.single-post #ez-toc-widget-sticky-container ul.ez-toc-widget-sticky-list li.is-active>a {
font-weight: 700;
}
/* Mobile: TOC as a sticky select at the top (built by toc-select.js). */
.gpc-toc-select {
display: none;
}
@media (max-width: 768px) {
/* Hide the sidebar TOC widget: the select replaces it on mobile. */
.single-post #ez-toc-widget-container {
display: none;
}
.gpc-toc-select {
display: block;
position: sticky;
/* below the sticky header: bandeau height + a header clearance to tune */
top: calc(var(--rt-bandeau, 0px) + 74px);
z-index: 20;
width: 100%;
margin: 0 0 1.5rem;
padding: 0.7em 2.6em 0.7em 1.1em;
border: 1px solid #e2e8e5;
border-radius: 9999px;
background-color: #ffffff;
color: #182a39;
font-size: 0.95rem;
line-height: 1.2;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.1em center;
background-size: 1em;
box-shadow: 0 4px 14px rgba(24, 42, 57, 0.12);
}
.gpc-toc-select:focus {
outline: none;
border-color: #10A9B6;
}
}
@media (max-width: 900px) {
.single-post .gpc-single-hero__inner {
grid-template-columns: 1fr;
min-height: 0;
}
.single-post .gpc-single-hero__content {
max-width: none;
}
.single-post .gpc-single-hero__image {
min-height: 280px;
}
}
@media (max-width: 768px) {
.single-post .gpc-single-body {
flex-direction: column;
}
.single-post .gpc-single-body>.content-area,
.single-post .gpc-single-body>.sidebar {
width: 100%;
}
/* Hide single article intro text on mobile. */
.single-post .gpc-single-hero__excerpt {
display: none;
}
}
/* ===== Menu de filtre par catégorie (archives) — maquette ===== */
/* Bande pleine largeur. */
.gpc-cat-filter {
margin: 2rem 0;
}
/* Wrapper interne : aligné pile sur la colonne des cartes.
Les cartes = .site.grid-container (1355px centré) PUIS padding clamp(1.2rem,4vw,3rem).
On reproduit les deux niveaux ici. */
.gpc-cat-filter__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: var(--gb-container-width);
margin-left: auto;
margin-right: auto;
padding-left: clamp(1.2rem, 4vw, 3rem);
padding-right: clamp(1.2rem, 4vw, 3rem);
}
.gpc-cat-filter__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.gpc-cat-filter__item {
margin: 0;
}
/* Élément inactif : texte simple, sans fond. */
.gpc-cat-filter__link {
display: inline-block;
padding: 0.5em 1.5em;
border-radius: 8px;
background: transparent;
color: #182a39;
font-size: 0.95rem;
line-height: 1.2;
text-decoration: none;
text-transform: lowercase;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Nom de catégorie : tout en minuscule, première lettre en majuscule. */
.gpc-cat-filter__link::first-letter {
text-transform: uppercase;
}
/* PJAX : état de chargement du bloc de boucle pendant le fetch. */
[class*="gb-query-"].is-loading {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.15s ease;
}
/* Filtre des articles (page catégorie/blog) : boutons inactifs en gris clair. */
.gpc-cat-filter:not(.gpc-cat-filter--menu) .gpc-cat-filter__item:not(.is-active) .gpc-cat-filter__link {
background: #f8f9fb;
}
.gpc-cat-filter:not(.gpc-cat-filter--menu) .gpc-cat-filter__item:not(.is-active) .gpc-cat-filter__link:hover,
.gpc-cat-filter:not(.gpc-cat-filter--menu) .gpc-cat-filter__item:not(.is-active) .gpc-cat-filter__link:focus {
background: #eef1f4;
}
/* Menu des pages [category_menu] : icône devant chaque catégorie. */
.gpc-cat-filter__icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-right: 0.5em;
font-size: 1.2em;
line-height: 0;
color: #10A9B6;
}
.gpc-cat-filter__label {
display: inline-block;
vertical-align: middle;
}
/* Filtre par étiquette : libellé "Filtrer par :" + liste, solidaires à gauche.
flex:1 → le groupe occupe la largeur restante et la recherche reste à droite
(la liste de tags s'enroule à l'intérieur du groupe au lieu de pousser la recherche dessous). */
.gpc-cat-filter__filter-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
flex: 1;
min-width: 0;
}
.gpc-cat-filter__filter-label {
display: inline-flex;
align-items: center;
gap: 0.5em;
color: #182a39;
font-size: 0.95rem;
white-space: nowrap;
}
.gpc-cat-filter__filter-icon {
display: inline-flex;
align-items: center;
line-height: 0;
font-size: 1.25em;
color: #10A9B6;
position: relative;
top: -0.1em; /* nudge the icon up to sit level with the text */
}
/* Menu des pages : tous les noms en majuscules. */
.gpc-cat-filter--menu .gpc-cat-filter__label {
text-transform: uppercase;
}
/* Menu des pages : réparti sur toute la largeur (alignée sur le loop en dessous). */
.gpc-cat-filter--menu .gpc-cat-filter__list {
flex: 1; /* occupe toute la largeur de l'inner (= largeur du loop) */
gap: 0;
border-bottom: 1px solid #e2e5e9; /* ligne horizontale sous le menu */
}
/* Cellules de largeur égale, contenu centré. */
.gpc-cat-filter--menu .gpc-cat-filter__item {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* Séparateurs verticaux entre les entrées : mi-hauteur, centrés. */
.gpc-cat-filter--menu .gpc-cat-filter__item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 50%;
background: #e2e5e9;
}
/* Menu des pages : item actif souligné en teal (pas de pilule pleine).
Padding horizontal à 0 → le soulignement épouse la largeur icône + texte. */
.gpc-cat-filter--menu .gpc-cat-filter__link {
border-radius: 0;
border-bottom: 2px solid transparent;
padding-left: 0;
padding-right: 0;
padding-bottom: 0.9em;
margin-bottom: -1px; /* le soulignement actif se pose sur la ligne du bas */
}
.gpc-cat-filter--menu .gpc-cat-filter__item.is-active .gpc-cat-filter__link {
background: transparent;
color: #10A9B6;
border-bottom-color: #10A9B6;
}
/* Icône blanche quand l'entrée est active (pilule teal). */
.gpc-cat-filter__item.is-active .gpc-cat-filter__icon {
color: inherit;
}
.gpc-cat-filter__link:hover,
.gpc-cat-filter__link:focus {
color: #10A9B6;
}
/* ===== Mobile (≤768px = breakpoint burger GP) : les 2 menus passent en