→ sections contraintes à --wp--style--global--wide-size (≈1200px)
PLUS padding latéral global PLUS padding vertical xx-large
Fix non-destructif : on neutralise les contraintes parasites sur
`` et `.entry-content` des pages Spoke, pour que les sections
reprennent exactement le comportement full-width de la home. Les
sections elles-mêmes gardent leur padding interne (--section-gap*)
et leurs `.container` limitent la largeur du contenu comme sur home.
Pourquoi CSS plutôt qu'override le template FSE : plus résistant
aux updates d'Ollie parent, rollback instantané si besoin, zéro
impact sur la home.
──────────────────────────────────────────────────────────── */
body:not(.home) main.wp-block-group,
body:not(.home) main.site-main {
/* Retire alignwide max-width + padding inline xx-large imposés par Ollie */
max-width: none !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
body:not(.home) main > .entry-content,
body:not(.home) main > .entry-content.wp-block-post-content {
/* Retire alignwide max-width + has-global-padding latéral */
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
}
/* Hero des pages intérieures */
.page-hero {
padding: calc(var(--space-7, 80px) + 60px) 0 var(--space-6, 56px);
background: linear-gradient(180deg, rgba(226,61,91,0.04) 0%, rgba(255,255,255,0) 100%);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
top: -80px; right: -80px;
width: 360px; height: 360px;
background: radial-gradient(circle at center, rgba(226,61,91,0.10), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__title {
font-size: clamp(38px, 6vw, 64px) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
margin: 12px 0 18px !important;
max-width: 820px;
}
.page-hero__title em {
font-style: normal;
color: #e23d5b;
display: inline;
}
.page-hero__sub {
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.55;
color: var(--color-text-muted, #555);
max-width: 680px;
margin: 0 0 28px;
}
[data-theme="dark"] .page-hero {
background: linear-gradient(180deg, rgba(226,61,91,0.08) 0%, rgba(255,255,255,0) 100%);
}
[data-theme="dark"] .page-hero__sub { color: rgba(255,255,255,0.72); }
/* Variante "entreprise" en teinte bleue discrète */
.page-hero--entreprises::before {
background: radial-gradient(circle at center, rgba(10,108,201,0.10), transparent 70%);
}
/* Steps parcours (Le dispositif) */
.dispositif-steps.wp-block-columns {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
margin-top: var(--space-5, 32px);
}
@media (max-width: 900px) {
.dispositif-steps.wp-block-columns { grid-template-columns: 1fr !important; }
}
.dispositif-step.wp-block-column {
background: var(--color-surface, #fff);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
padding: 28px 24px !important;
position: relative;
overflow: hidden;
flex: initial !important;
}
.dispositif-step::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, #e23d5b, #ff7849);
}
.dispositif-step__num {
font-size: 40px;
font-weight: 700;
color: #e23d5b;
margin: 0 0 8px;
line-height: 1;
letter-spacing: -0.02em;
}
.dispositif-step__title {
font-size: 20px;
font-weight: 600;
margin: 0 0 10px;
line-height: 1.3;
}
.dispositif-step__desc {
font-size: 14.5px;
line-height: 1.6;
color: var(--color-text-muted, #555);
margin: 0;
}
[data-theme="dark"] .dispositif-step.wp-block-column {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .dispositif-step__desc { color: rgba(255,255,255,0.65); }
/* Parcours list (Candidats + Entreprises) */
.parcours-list {
list-style: none !important;
padding: 0 !important;
margin: var(--space-5, 32px) 0 0 !important;
max-width: 820px;
display: flex;
flex-direction: column;
gap: 14px;
}
.parcours-list li {
position: relative;
padding: 16px 20px 16px 52px !important;
background: var(--color-surface, #fff);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 10px;
font-size: 15px;
line-height: 1.55;
color: var(--color-text, #1a1a1a);
counter-increment: parcours;
}
.parcours-list {
counter-reset: parcours;
}
.parcours-list li::before {
content: counter(parcours);
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 26px; height: 26px;
background: #e23d5b;
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.parcours-list li strong {
color: #e23d5b;
font-weight: 600;
}
[data-theme="dark"] .parcours-list li {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.9);
}
/* Contact cards (Contact) */
.contact-grid.wp-block-columns {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
margin-top: var(--space-5, 32px);
}
@media (max-width: 820px) {
.contact-grid.wp-block-columns { grid-template-columns: 1fr !important; }
}
/* v10.17.36 — Refonte contact-card : cohérent avec .feature-card du site.
Ancien style (barre rouge top + border 1px grise) retiré.
Nouveau : icône pastille rose pâle, hover lift, border primary .22 subtle. */
.contact-cards-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(16px, 2vw, 24px);
margin: 0;
}
.contact-card {
flex: 1 1 240px;
max-width: 320px;
background: var(--surface-card-bg, rgba(255,255,255,.96));
border: 0.5px solid rgba(227, 0, 67, .22);
border-radius: var(--radius-lg, 16px);
padding: clamp(24px, 3vw, 32px) !important;
text-align: center;
position: relative;
transition: transform .35s ease, border-color .3s ease, box-shadow .35s ease;
}
.contact-card:hover {
transform: translateY(-3px);
border-color: rgba(227, 0, 67, .42);
box-shadow: 0 10px 32px rgba(227, 0, 67, .12);
}
/* v10.17.37 — contact-card utilise maintenant le bloc .feature-icon
(rendu par labernik-geiq56/icon variant=feature). On ajuste juste
le centrage horizontal (flex-column centered pour la card). */
.contact-card .feature-icon {
margin: 0 auto 14px;
width: 48px;
height: 48px;
border-radius: 50%;
}
.contact-card .feature-icon svg {
width: 22px;
height: 22px;
}
.contact-card:hover .feature-icon {
transform: scale(1.08) rotate(0deg);
}
.contact-card__title {
font-family: var(--font-display) !important;
font-size: 1.1rem !important;
font-weight: 400 !important;
color: var(--color-neutral-900, #1a171b) !important;
margin: 0 0 8px !important;
letter-spacing: -0.01em;
}
.contact-card__value {
font-size: .9375rem !important;
line-height: 1.55 !important;
color: var(--color-neutral-600, #4b575f) !important;
margin: 0 !important;
word-break: break-word;
}
[data-theme="dark"] .contact-card {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .contact-card:hover {
border-color: rgba(255,255,255,.15);
}
[data-theme="dark"] .contact-card__title { color: #f0eef1 !important; }
[data-theme="dark"] .contact-card__value { color: rgba(255,255,255,.65) !important; }
@media (max-width: 640px) {
.contact-card { flex-basis: 100%; max-width: 100%; }
}
.contact-card p strong { color: var(--color-text, #1a1a1a); font-weight: 600; }
[data-theme="dark"] .contact-card.wp-block-column {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .contact-card p { color: rgba(255,255,255,0.72); }
[data-theme="dark"] .contact-card p strong { color: rgba(255,255,255,0.95); }
/* v7.7 — Éléments internes des contact-cards (BEM-like) */
.contact-card__eyebrow {
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-primary, #e30043) !important;
margin: 0 0 10px !important;
}
.contact-card--btp .contact-card__eyebrow { color: #e05c00 !important; }
.contact-card--multi .contact-card__eyebrow { color: #2e9e6e !important; }
.contact-card__title {
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
margin: 0 0 12px !important;
}
.contact-card__sub {
font-size: 15px !important;
line-height: 1.55 !important;
color: var(--color-neutral-600, #4b575f) !important;
margin: 0 0 18px !important;
}
.contact-card__meta {
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--color-neutral-900, #1a171b) !important;
margin: 0 0 18px !important;
padding-top: 14px;
border-top: 1px solid rgba(0,0,0,0.07);
}
[data-theme="dark"] .contact-card__meta {
color: rgba(255,255,255,0.9) !important;
border-top-color: rgba(255,255,255,0.1);
}
.contact-card .wp-block-buttons {
margin-top: auto;
}
.contact-card .wp-block-button__link {
width: 100%;
text-align: center;
}
/* Accent couleur des boutons par carte */
.contact-card--btp .wp-block-button.is-style-fill .wp-block-button__link {
background-color: #e05c00 !important;
border-color: #e05c00 !important;
}
.contact-card--multi .wp-block-button.is-style-fill .wp-block-button__link {
background-color: #2e9e6e !important;
border-color: #2e9e6e !important;
}
/* Ligne de repli sous les cartes */
.contact-general {
margin-top: var(--space-4, 28px) !important;
font-size: 14.5px;
color: var(--color-neutral-600, #4b575f);
}
.contact-general a {
color: var(--color-primary, #e30043);
text-decoration: underline;
text-underline-offset: 3px;
}
/* CTA final sur pages Spoke */
.section--cta-final {
background: linear-gradient(135deg, rgba(226,61,91,0.04), rgba(10,108,201,0.04));
padding: var(--section-gap) 0;
text-align: center;
}
.section--cta-final .section-title { margin-bottom: 14px; }
.section--cta-final .section-sub { max-width: 560px; margin: 0 auto 28px; }
.section--cta-final .wp-block-buttons { justify-content: center !important; }
[data-theme="dark"] .section--cta-final {
background: linear-gradient(135deg, rgba(226,61,91,0.08), rgba(10,108,201,0.08));
}
/* Actus archive + jobs section : padding cohérent */
.section--actus-archive,
.section--jobs,
.section--contact,
.section--switcher,
.section--partners {
padding: var(--section-gap) 0;
}
/* =========================================================================
v6.1 — Pages Spoke (contenu PDF client)
========================================================================= */
/* Hero léger pour les pages intérieures */
.hero-spoke {
background: linear-gradient(180deg, rgba(226,61,91,0.03), transparent 70%);
border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.hero-spoke__title {
font-size: clamp(36px, 5vw, 56px) !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
margin: 0 0 18px !important;
}
.hero-spoke__lead {
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
max-width: 720px;
color: var(--color-text-muted, #555);
}
[data-theme="dark"] .hero-spoke__lead { color: rgba(255,255,255,0.72); }
/* Bandes section alternées */
.section-band { background: var(--color-bg, #fff); }
.section-band--alt { background: var(--color-bg-soft, #fafafa); }
[data-theme="dark"] .section-band { background: var(--color-bg, #0f0f10); }
[data-theme="dark"] .section-band--alt { background: rgba(255,255,255,0.025); }
/* Procédure (liste ordonnée stylisée) */
.procedure-list {
list-style: none;
counter-reset: step;
padding: 0;
max-width: 800px;
margin: 0 auto;
}
.procedure-list li {
counter-increment: step;
position: relative;
padding: 18px 18px 18px 68px;
margin: 0 0 12px;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 12px;
background: var(--color-bg, #fff);
line-height: 1.55;
}
.procedure-list li::before {
content: counter(step);
position: absolute;
top: 50%; left: 18px;
transform: translateY(-50%);
width: 36px; height: 36px;
border-radius: 50%;
background: #e23d5b;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
[data-theme="dark"] .procedure-list li {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
}
/* FAQ collapsibles (details/summary) */
.faq-item {
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 12px;
margin: 0 0 10px;
background: var(--color-bg, #fff);
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item[open] { border-color: rgba(226,61,91,0.4); }
.faq-item summary {
padding: 16px 22px;
cursor: pointer;
list-style: none;
position: relative;
padding-right: 56px;
font-weight: 500;
line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(226,61,91,0.1);
color: #e23d5b;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.faq-item[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.faq-item p {
padding: 0 22px 20px;
margin: 0;
color: var(--color-text-muted, #555);
line-height: 1.65;
}
[data-theme="dark"] .faq-item {
background: rgba(255,255,255,0.025);
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .faq-item p { color: rgba(255,255,255,0.72); }
/* Témoignages — variante couleur */
.temoignage--btp { border-left: 4px solid #e05c00; padding-left: 24px; }
.temoignage--multi { border-left: 4px solid #2e9e6e; padding-left: 24px; }
.temoignage cite {
display: block;
margin-top: 14px;
font-style: normal;
font-weight: 600;
color: var(--color-text, #1a1a1a);
font-size: 14px;
}
[data-theme="dark"] .temoignage cite { color: rgba(255,255,255,0.9); }
/* CTA band (bas de page Spoke) */
.cta-band {
background: linear-gradient(135deg, rgba(226,61,91,0.04), rgba(10,108,201,0.04));
text-align: center;
}
.cta-band h2 { margin-bottom: 24px !important; }
[data-theme="dark"] .cta-band {
background: linear-gradient(135deg, rgba(226,61,91,0.08), rgba(10,108,201,0.08));
}
/* =========================================================================
v7.0 — UNIFICATION HERO SPOKE
Règles déplacées vers un seul bloc « Hero Spoke consolidated » plus bas.
Principe : .section--hero-spoke hérite TOUT de .hero__* (base ligne ~485).
Seules les différences réelles (padding-section, max-width interne) restent.
Voir /docs/BONNES-PRATIQUES.md pour les règles de modification/extension.
========================================================================= */
/* v7.1 — Hero Spoke : padding en UNE SEULE couche, sur la section.
Avant : .section--hero-spoke (140) + .hero__content (72) = 212 px de vide
au-dessus du eyebrow. Racine des "bandes fantômes" signalées.
Après : .section--hero-spoke porte tout, .hero__content ne sert plus qu'à
contraindre la largeur max (1080 px). Tokens dans global.css. */
.site-main .section--hero-spoke {
padding-top: var(--section-gap-hero) !important;
padding-bottom: var(--section-gap-sm) !important;
position: relative;
}
.site-main .section--hero-spoke .hero__content {
max-width: 1080px;
padding-block: 0;
}
.site-main .section--hero-spoke .hero__actions.wp-block-buttons {
margin-top: 28px;
}
/* splitReveal JS (header.js) wrap chaque mot en , ce qui casse
background-clip: text sur le → texte invisible. On garde l'italique
rouge franc, comme sur la homepage via reduced-motion. */
.section--hero-spoke .hero__title em {
font-style: italic;
color: var(--color-primary);
background: none;
-webkit-text-fill-color: currentColor;
animation: none;
}
[data-theme="dark"] .section--hero-spoke .hero__subtitle { color: rgba(255, 255, 255, 0.72); }
/* Badge numéroté pour les étapes de procédure (remplace .feature-icon) */
.feature-icon--step {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #e23d5b, #c72e48) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(226,61,91,0.25);
}
.feature-icon--step .feature-icon__num {
color: #fff;
font-weight: 700;
font-size: 18px;
letter-spacing: 0;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.feature-card:hover .feature-icon--step {
transform: scale(1.08) rotate(-4deg);
transition: transform 0.25s ease;
}
/* FAQ — enrober l'ensemble pour qu'il respire dans la section */
.section .faq-wrap { max-width: 820px; margin: 0 auto; }
.section--alt .faq-item { background: #fff; }
[data-theme="dark"] .section--alt .faq-item { background: rgba(255,255,255,0.04); }
/* Témoignages — harmoniser avec .testimonial / .testimonial__quote pour que
le look matche la homepage quand on tombe dans les pages Spoke */
.testimonials-grid .testimonial .testimonial__quote p { margin: 0 0 16px; }
.testimonials-grid .testimonial .testimonial__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Bloc "admins" — grille 3 colonnes compactes, membres simples.
Matche à la fois :
- l'ancien markup Gutenberg (wp:columns → .admins-grid.wp-block-columns)
- le markup du shortcode [geiq56_admins] → simple .admins-grid */
.admins-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-4, 20px) !important;
margin-top: var(--space-4, 24px) !important;
}
.admins-grid--bureau {
margin-bottom: var(--space-5, 36px) !important;
}
.admins-grid .wp-block-column { padding: 0 !important; }
.admins-grid .admin-card {
padding: 16px 18px;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 12px;
background: var(--color-bg, #fff);
display: flex;
flex-direction: column;
gap: 2px;
}
.admins-grid .admin-card--bureau {
border-color: rgba(226, 61, 91, 0.22);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admins-grid .admin-card__role {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary, #e23d5b);
margin: 0 0 4px;
}
.admins-grid .admin-card__name {
font-weight: 600;
font-size: 1rem;
margin: 0;
color: var(--color-text, #1a1a1a);
}
.admins-grid .admin-card__company {
font-size: 0.875rem;
color: var(--color-neutral-600, #666);
margin: 2px 0 0;
}
.admins-grid .admin-card__company:empty { display: none; }
[data-theme="dark"] .admins-grid .admin-card {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .admins-grid .admin-card__name { color: #f0eef1; }
[data-theme="dark"] .admins-grid .admin-card__company { color: rgba(255,255,255,0.55); }
@media (max-width: 900px) { .admins-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .admins-grid { grid-template-columns: 1fr !important; } }
/* =========================================================================
v6.2 — HARMONISATION PAGES SPOKE AVEC HOMEPAGE
Largeur pleine, spotlight, glass cohérent, animations fade-in.
========================================================================= */
/* ── Pleine largeur extérieure + container interne à 1280px ───────────── */
.site-main .section--hero-spoke,
.site-main .section--why,
.site-main .section--process,
.site-main .section--testimonials,
.site-main .section--faq,
.site-main .section--stats,
.site-main .section--admins,
.site-main .section--adhesion,
.site-main .section--cta-final,
.site-main .section--actus-archive,
.site-main .section--jobs,
.site-main .section--contact,
.site-main .section--dispositif-schema,
.site-main .section--dispositif-intro,
.site-main .section--trio {
max-width: 100% !important;
width: 100% !important;
margin-inline: 0 !important;
padding-inline: var(--section-gutter) !important;
padding-block: var(--section-gap);
position: relative;
isolation: isolate;
overflow: hidden;
}
/* section--alt retiré volontairement : c'est une classe partagée avec la
homepage (section--alt, section--actus). Les sections Spoke qui combinent
(ex: "section--alt section--process") sont déjà captées via .section--process. */
/* Tous les enfants directs (hors glow-canvas) centrés dans un max-width */
.site-main .section--hero-spoke > *:not(.glow-canvas),
.site-main .section--why > *:not(.glow-canvas),
.site-main .section--process > *:not(.glow-canvas),
.site-main .section--testimonials > *:not(.glow-canvas),
.site-main .section--faq > *:not(.glow-canvas),
.site-main .section--stats > *:not(.glow-canvas),
.site-main .section--admins > *:not(.glow-canvas),
.site-main .section--adhesion > *:not(.glow-canvas),
.site-main .section--cta-final > *:not(.glow-canvas),
.site-main .section--actus-archive > *:not(.glow-canvas),
.site-main .section--jobs > *:not(.glow-canvas),
.site-main .section--contact > *:not(.glow-canvas),
.site-main .section--dispositif-schema > *:not(.glow-canvas),
.site-main .section--dispositif-intro > *:not(.glow-canvas),
.site-main .section--trio > *:not(.glow-canvas) {
max-width: 1280px;
margin-inline: auto;
position: relative;
z-index: 1;
}
/* Section trio (dispositif) : mêmes règles que les autres sections centrées */
.section--trio { text-align: center; }
.section--trio .features-grid { text-align: left; }
.section--trio .section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(227,0,67,0.16);
background: rgba(227,0,67,0.04);
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary, #e30043);
font-weight: 600;
margin: 0 auto 16px;
}
.section--trio .section-title {
font-family: var(--font-display, "Instrument Serif"), serif !important;
font-weight: 400 !important;
letter-spacing: -0.02em;
line-height: 1.08 !important;
margin: 0 auto 14px !important;
max-width: 920px;
}
.section--trio .section-sub {
max-width: 640px;
margin: 0 auto clamp(32px, 4vw, 56px);
color: var(--color-text-muted, #555);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.55;
}
.section--trio .feature-card {
background: rgba(255, 255, 255, 0.78) !important;
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(26, 23, 27, 0.08);
border-radius: 16px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section--trio .feature-card:hover {
transform: translateY(-3px);
border-color: rgba(227, 0, 67, 0.25);
box-shadow: 0 12px 32px rgba(26,23,27,.08),
0 0 0 1px rgba(227, 0, 67, 0.12);
}
[data-theme="dark"] .section--trio .feature-card {
background: rgba(35, 32, 38, 0.65) !important;
border-color: rgba(255,255,255,0.08);
}
/* Fade-in */
.section--trio .section-eyebrow,
.section--trio .section-title,
.section--trio .section-sub,
.section--trio .features-grid {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.section--trio .features-grid.is-inview > * {
animation: geiq-spoke-card-in .55s cubic-bezier(.2,.7,.2,1) both;
}
.section--trio .features-grid.is-inview > *:nth-child(2) { animation-delay: .08s; }
.section--trio .features-grid.is-inview > *:nth-child(3) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
.section--trio .section-eyebrow,
.section--trio .section-title,
.section--trio .section-sub,
.section--trio .features-grid { opacity: 1; transform: none; transition: none; }
.section--trio .features-grid.is-inview > * { animation: none; }
}
@media (max-width: 720px) {
.site-main .section--trio { padding-inline: 18px !important; padding-block: 48px; }
}
/* =========================================================================
v6.3.1 — Consolidation Spoke SCOPÉE (body:not(.home))
--------------------------------------------------------------------------
La homepage partage des classes (section--actus, section--alt, feature-card,
testimonial, actu-card, job-card). Toutes les règles ci-dessous sont
scopées par `body:not(.home)` pour n'impacter QUE les pages Spoke.
La homepage garde ses styles d'origine intacts.
========================================================================= */
/* ── 1. Fallback largeur si une page reste en is-layout-constrained ─── */
body:not(.home) .site-main [class*="section--"].is-layout-constrained
> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 1280px;
}
/* ── 2. Boutons Spoke (fill + outline) ──────────────────────────────── */
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link {
background: var(--color-primary);
color: #fff;
border: 2px solid var(--color-primary);
border-radius: var(--radius-md, 10px);
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
position: relative;
overflow: hidden;
box-shadow: 0 6px 18px rgba(227, 0, 67, 0.18);
transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(227, 0, 67, 0.30);
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .5s ease;
pointer-events: none;
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link:hover::after {
transform: translateX(120%);
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
color: var(--color-neutral-900);
border: 2px solid var(--color-neutral-300, #c4cdd4);
border-radius: var(--radius-md, 10px);
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1;
text-decoration: none;
transition: background .2s, border-color .2s, transform .2s, color .2s;
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-outline > .wp-block-button__link:hover {
background: rgba(227, 0, 67, 0.04);
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-2px);
}
[data-theme="dark"] body:not(.home) [class*="section--"] .wp-block-button.is-style-outline > .wp-block-button__link {
color: #f0eef1;
border-color: rgba(255, 255, 255, 0.18);
}
body:not(.home) [class*="section--"] .wp-block-buttons { gap: 14px; flex-wrap: wrap; }
/* v7.0 : règles Hero Spoke consolidées en haut du fichier (voir ligne ~3870).
Plus de duplication ici. */
/* ── 4. Bande alternée (Spoke uniquement) ───────────────────────────── */
body:not(.home) .section--alt { background: var(--color-bg-soft, #fafafa); }
[data-theme="dark"] body:not(.home) .section--alt { background: rgba(255, 255, 255, 0.025); }
/* v6.3.5 : le CTA final Spoke bascule en gris doux pour restaurer
l'alternance blanc/gris après le bloc "Trois temps" sur /le-dispositif/.
Sur la homepage il reste en gradient rose-bleu subtil (voir ligne 3701)
— le sélecteur body:not(.home) protège cette règle d'être appliquée là. */
body:not(.home) .section--cta-final {
background:
linear-gradient(135deg, rgba(226, 61, 91, .035), rgba(10, 108, 201, .035)),
var(--color-bg-soft, #fafafa);
}
[data-theme="dark"] body:not(.home) .section--cta-final {
background:
linear-gradient(135deg, rgba(226, 61, 91, .08), rgba(10, 108, 201, .08)),
rgba(255, 255, 255, .025);
}
/* ── 5. Titres de sections Spoke (hors hero) ────────────────────────── */
/* Pastille eyebrow neutre + dot rouge animé (clone du style homepage).
v7.0 : on N'APPLIQUE PLUS au .hero__eyebrow — celui-ci hérite de la base
.hero__eyebrow (ligne ~510) qui est DÉJÀ centrée et animée correctement. */
body:not(.home) [class*="section--"] .section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
font-weight: var(--fw-medium, 500);
color: var(--color-neutral-500);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-full);
padding: 6px 16px;
margin: 0 auto var(--space-4, 16px);
background: var(--color-neutral-50);
text-transform: none;
letter-spacing: 0;
}
body:not(.home) [class*="section--"] .section-eyebrow::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 8px rgba(227, 0, 67, .7);
animation: blink 2.5s ease-in-out infinite;
flex-shrink: 0;
}
/* Titre de section (H2) — taille homepage */
body:not(.home) [class*="section--"] .section-title {
font-family: var(--font-display);
font-weight: var(--fw-regular, 400);
font-size: clamp(2rem, 4.5vw, 3rem);
color: var(--color-neutral-900);
letter-spacing: -0.02em;
line-height: var(--lh-display, 1.1);
margin: 0 auto 14px;
max-width: 920px;
text-align: center;
}
body:not(.home) [class*="section--"] .section-title em {
font-style: italic;
color: var(--color-primary);
background: none;
-webkit-text-fill-color: currentColor;
animation: none;
}
/* Garde-fou : certains thèmes parents ajoutent has-text-align-left.
On force le centrage sur les sections non-hero. */
body:not(.home) [class*="section--"]:not(.section--hero-spoke) > .section-title,
body:not(.home) [class*="section--"]:not(.section--hero-spoke) .wp-block-heading.section-title,
body:not(.home) [class*="section--"]:not(.section--hero-spoke) .section-eyebrow,
body:not(.home) [class*="section--"]:not(.section--hero-spoke) .section-sub {
text-align: center !important;
}
@media (prefers-reduced-motion: reduce) {
body:not(.home) [class*="section--"] .section-eyebrow::before { animation: none; }
}
body:not(.home) [class*="section--"] .section-sub {
max-width: 640px;
margin: 0 auto clamp(32px, 4vw, 56px);
color: var(--color-text-muted, var(--color-neutral-500));
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.55;
}
body:not(.home) :is(.section--why, .section--process, .section--testimonials,
.section--faq, .section--stats, .section--admins, .section--adhesion,
.section--cta-final, .section--actus-archive, .section--jobs,
.section--dispositif-intro, .section--dispositif-schema,
.section--dispositif-switcher, .section--trio) {
text-align: center;
}
body:not(.home) :is(.section--why .features-grid, .section--trio .features-grid,
.section--testimonials .testimonials-grid, .section--admins .admins-grid,
.section--actus-archive .actus-grid, .section--jobs .jobs-grid) {
text-align: left;
}
/* ── 6. Cards glass (Spoke uniquement) ──────────────────────────────── */
/* v6.3.5 : .feature-card est RETIRÉ de cette règle glass — il reprend désormais
le style homepage (radial gradient + icon animé + tilt 3D) pour rester cohérent
avec la home. Voir bloc dédié plus bas (« Feature cards style homepage »). */
body:not(.home) :is(.testimonial, .testimonial-card, .admin-card,
.job-card, .contact-card, .actu-card, .stats-band .stat-item,
.procedure-list li, .faq-item) {
background: rgba(255, 255, 255, 0.78);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(26, 23, 27, 0.08);
border-radius: 16px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-theme="dark"] body:not(.home) :is(.testimonial, .testimonial-card,
.admin-card, .job-card, .contact-card, .actu-card,
.stats-band .stat-item, .procedure-list li, .faq-item) {
background: rgba(35, 32, 38, 0.65);
border-color: rgba(255, 255, 255, 0.08);
}
body:not(.home) :is(.testimonial, .admin-card, .job-card, .actu-card):hover {
transform: translateY(-3px);
border-color: rgba(227, 0, 67, 0.25);
box-shadow: 0 12px 32px rgba(26, 23, 27, .08), 0 0 0 1px rgba(227, 0, 67, 0.12);
}
/* ── 6bis. Feature cards — parité visuelle avec la homepage ──────────
v6.3.5 — Julien a remonté que les feature-cards des pages Spoke étaient
"trop rectangles", sans l'effet radial + icône animée + tilt 3D de la home.
On re-applique ici le style homepage (voir ligne ~708) pour le scope Spoke,
en gardant assez de spécificité pour l'emporter sur l'ancien glass. */
body:not(.home) .feature-card,
body:not(.home) .feature-card.wp-block-column {
position: relative;
/* !important pour battre l'ancienne règle flat ligne 2446 (déjà !important).
On recolle ici au style homepage : radial gradient réactif à la souris,
border 1.5px neutral, radius XL, padding généreux pour un effet carré. */
background:
radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), rgba(227, 0, 67, .07) 0%, transparent 100%),
var(--color-neutral-0, #fff) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1.5px solid var(--color-neutral-200, #e5e7eb) !important;
border-radius: var(--radius-xl, 24px) !important;
padding: var(--space-5, 32px) var(--space-4, 24px) !important;
transition: border-color .2s, box-shadow .2s,
transform .22s cubic-bezier(.4, 0, .2, 1), background .05s !important;
will-change: transform;
overflow: visible !important;
}
body:not(.home) .feature-card:hover,
body:not(.home) .feature-card.wp-block-column:hover {
border-color: rgba(227, 0, 67, .25) !important;
box-shadow: 0 6px 28px rgba(227, 0, 67, .08),
0 2px 8px rgba(26, 23, 27, .06) !important;
transform: translateY(-5px);
}
/* Icon wrapper — carré rouge soft, pulse au hover */
body:not(.home) .feature-card .feature-card__icon {
width: 40px; height: 40px;
margin-bottom: var(--space-3, 12px);
font-size: 1.25rem;
background: rgba(227, 0, 67, .08);
border-radius: var(--radius-sm, 8px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
transition: background .2s, transform .22s;
}
body:not(.home) .feature-card:hover .feature-card__icon {
background: rgba(227, 0, 67, .14);
transform: scale(1.1) rotate(-3deg);
}
/* Titre : Instrument Serif, léger — parité homepage */
body:not(.home) .feature-card .feature-card__title,
body:not(.home) .feature-card .wp-block-heading.feature-card__title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 400;
color: var(--color-neutral-900);
margin-bottom: var(--space-2, 8px);
line-height: 1.3;
}
body:not(.home) .feature-card .feature-card__desc {
font-size: .9375rem;
color: var(--color-neutral-600, #6b7280);
line-height: 1.6;
margin: 0;
}
[data-theme="dark"] body:not(.home) .feature-card,
[data-theme="dark"] body:not(.home) .feature-card.wp-block-column {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .08);
}
body:not(.home) .procedure-list li:hover {
transform: translateX(4px);
border-color: rgba(227, 0, 67, 0.25);
box-shadow: 0 8px 24px rgba(26, 23, 27, .08);
}
body:not(.home) .faq-item[open] {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(227, 0, 67, 0.4);
}
[data-theme="dark"] body:not(.home) .faq-item[open] { background: rgba(35, 32, 38, 0.85); }
/* ── 7. Grilles responsives ─────────────────────────────────────────── */
/* v6.3.5 : on étend max-width de 1040 → 1280px pour retrouver la pleine largeur
sous le bloc "Trois temps, une même méthode" (Julien : "on retrouve encore
les petites largeurs après ce bloc"). Les cards feature se répartissent
alors proprement sur la full width et conservent leur forme carrée. */
body:not(.home) :is(.section--why, .section--trio) .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-3, 24px);
max-width: 1280px;
margin: 40px auto 0;
}
body:not(.home) .section--testimonials .testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 40px;
}
body:not(.home) .section--admins .admins-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin-top: 32px;
}
body:not(.home) .section--stats .stats-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
max-width: 1100px;
margin: 32px auto 0;
}
body:not(.home) .section--process .procedure-list {
max-width: 900px;
margin: 40px auto 0;
}
body:not(.home) .section--faq .faq-wrap {
max-width: 820px;
margin: 32px auto 0;
text-align: left;
}
@media (max-width: 900px) {
body:not(.home) :is(.section--why, .section--trio) .features-grid,
body:not(.home) .section--admins .admins-grid,
body:not(.home) .section--stats .stats-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
body:not(.home) :is(.section--why, .section--trio) .features-grid,
body:not(.home) .section--admins .admins-grid,
body:not(.home) .section--stats .stats-band,
body:not(.home) .section--testimonials .testimonials-grid { grid-template-columns: 1fr; }
}
/* ── 8. Internals des cards ─────────────────────────────────────────── */
/* v6.3.5 : on conserve display:flex pour la structure interne (icon → titre → desc),
mais on laisse le padding/border-radius au bloc §6bis "Feature cards style homepage"
pour ne pas écraser la forme carrée voulue. */
body:not(.home) .feature-card { display: flex; flex-direction: column; gap: 12px; }
body:not(.home) :is(.testimonial, .testimonial-card) { padding: 28px 26px; }
body:not(.home) .testimonial__quote {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 20px;
color: var(--color-neutral-900);
}
body:not(.home) .testimonial__name { font-weight: 600; color: var(--color-neutral-900); }
body:not(.home) .testimonial__role { font-size: 0.875rem; color: var(--color-neutral-500, #6b7280); }
[data-theme="dark"] body:not(.home) :is(.testimonial__quote, .testimonial__name) { color: #f0eef1; }
body:not(.home) .admin-card { padding: 22px 20px; }
body:not(.home) .admin-card__role {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary);
margin-bottom: 8px;
}
body:not(.home) .stats-band .stat-item { padding: 28px 20px; text-align: center; }
body:not(.home) .stats-band__val {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 3.5rem);
line-height: 1;
color: var(--color-neutral-900);
margin: 0;
}
body:not(.home) .stats-band__label {
font-size: 0.875rem;
color: var(--color-neutral-500, #6b7280);
margin-top: 8px;
}
[data-theme="dark"] body:not(.home) .stats-band__val { color: #f0eef1; }
/* ── 9. Fade-in Spoke v6.2 — SUPPRIMÉ EN v10.17.7 ──────────────────────
Le pattern legacy "body:not(.home) [class*='section--'] :is(…) { opacity:0 }
puis JS pose .is-inview via IO hardcodé" est abandonné. Il forçait
toutes les sections Spoke à être invisibles par défaut et comptait
sur un JS avec liste hardcodée de sélecteurs — chaque nouvelle section
créait un bug silencieux (texte invisible jusqu'à mise à jour du JS).
À la place, toutes les pages utilisent maintenant le MÊME squelette
que la home : sections visibles par défaut, rythme zebra auto
(:nth-of-type), animations d'entrée réservées aux éléments "stars"
(metric-card staggered, icônes de hub qui pulsent, etc.).
Plus futureproof, plus cohérent entre home et pages intérieures. */
/* ============================================================
v10.17.16 — Schéma « Parcours GEIQ » — TIMELINE VERTICALE
────────────────────────────────────────────────────────────
Refonte complète. On abandonne la timeline horizontale
(problèmes d'alignement résistants à 4 approches CSS différentes)
pour une timeline verticale Apple/Stripe-style :
- Une ligne verticale qui descend
- Pastilles numérotées accrochées à la ligne
- Contenu à droite de chaque pastille
- Pastille méta en bout de ligne à droite
Avantages :
- Robuste à n'importe quelle longueur de texte (plus de grille
à 5 colonnes à maintenir alignée).
- Mobile-ready gratuit (pattern déjà adapté à la largeur).
- Sens de lecture naturel = sens du temps (parcours).
- Plus scalable : 5 ou 7 étapes, aucune différence.
Structure rendue par [geiq56_parcours] :
. Seul notre CSS explicite dicte le rythme vertical ensuite.
═══════════════════════════════════════════════════════════════════ */
/* 1) Assassinat de la variable block-gap partout dans le main */
.site-main .is-layout-flow,
.site-main .wp-block-group-is-layout-flow,
.site-main .wp-block-group.is-layout-flow,
.site-main [class*="section--"],
.site-main .wp-block-group.section,
.site-main .wp-block-group.container,
.site-main .wp-block-group.hero {
--wp--style--block-gap: 0 !important;
}
/* 2) Kill absolu des margins injectés par Gutenberg entre siblings */
.site-main .is-layout-flow > * + *,
.site-main .wp-block-group-is-layout-flow > * + *,
.site-main .wp-block-group.is-layout-flow > * + *,
.site-main .wp-block-group.is-layout-flow > *,
.site-main [class*="section--"] > *,
.site-main .wp-block-group.section > *,
.site-main .wp-block-group.container > * {
margin-block-start: 0 !important;
margin-top: 0 !important;
}
/* 3) Rythme vertical REPRIS sous notre contrôle, uniquement là où c'est
nécessaire pour la lisibilité. Valeurs sobres, pas de gros vides. */
/* a. Entre le head d'une section (eyebrow+title) et le contenu principal */
.site-main .section .container > .section-header,
.site-main .section .container > .section-head,
.site-main .section .container > .jobs-section-header,
.site-main .section .container > .partners-section-header,
.site-main .section .container > .features-section-header,
.site-main .section .container > .testimonials-section-header,
.site-main .section .container > .actus-section-header,
.site-main .section .container > [class$="-section-header"],
.site-main [class*="section--"] .container > .section-header,
.site-main [class*="section--"] .container > .section-head,
.site-main [class*="section--"] .container > [class$="-section-header"] {
margin-bottom: clamp(20px, 2.4vw, 36px) !important;
}
/* b. Avant un CTA de fin de section */
.site-main .section .container > .wp-block-buttons,
.site-main .section .container > [class$="section-foot"],
.site-main .section .container > [class*="section-foot"],
.site-main [class*="section--"] .container > .wp-block-buttons,
.site-main [class*="section--"] .container > [class*="section-foot"] {
margin-top: clamp(20px, 2.5vw, 36px) !important;
}
/* c. À l'intérieur du head (eyebrow → title) : petit filet pour que
le titre ne colle pas à l'eyebrow (h2 a des margins navigateur qu'on
vient d'écraser à 0). */
.site-main .jobs-section-header > .section-title,
.site-main .partners-section-header > .section-title,
.site-main .features-section-header > .section-title,
.site-main .testimonials-section-header > .section-title,
.site-main .actus-section-header > .section-title,
.site-main [class*="-section-header"] > .section-title,
.site-main .section-header > .section-title,
.site-main .section-head > .section-title {
margin-top: clamp(6px, 0.8vw, 12px) !important;
}
/* ═══════════════════════════════════════════════════════════════════
v7.2.4 — Footer fix propre
───────────────────────────────────────────────────────────────────
Problèmes réglés d'un coup :
1. Double
-
N
…
…