/* Theme Name: Smart BPJEPS Child Theme URI: https://www.smart-bpjeps.com Description: Thème enfant sur-mesure de Smart BPJEPS (parent : GeneratePress). Construit from scratch avec le design system Smart BPJEPS. Author: Marion Template: generatepress Version: 1.0.0 Text Domain: smart-bpjeps-child */ /* ========================================================= DESIGN SYSTEM SMART BPJEPS — tokens (palette, typographie, espacements — source : MEMOIRE-DEV-SQUARESPACE) ========================================================= */ :root { /* Palette violette */ --sbpj-accent: #7A2F8F; /* violet principal */ --sbpj-accent-mid: #4C1D73; /* violet moyen */ --sbpj-accent-deep: #1B0A3D; /* violet profond */ --sbpj-accent-soft: #ede8fc; /* fond violet clair */ --sbpj-accent-border:#e8e0fc; /* Neutres / texte */ --sbpj-text: #0f172a; --sbpj-text-soft: rgba(15, 23, 42, 0.62); --sbpj-text-subtle: rgba(15, 23, 42, 0.42); --sbpj-border: rgba(15, 23, 42, 0.08); --sbpj-bg: #ffffff; --sbpj-brand-bg: #faf8ff; /* fond clair sections */ /* Sémantiques */ --sbpj-green: #16a34a; --sbpj-orange: #ea580c; /* MAPST */ --sbpj-red: #dc2626; --sbpj-gold: #d4af37; /* Dégradé CTA signature */ --sbpj-grad-cta: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); /* ---- BRAND KIT plateforme (source : SaaS-SmartRoom/01-Documents/BRAND-KIT.md) ---- Valeurs EXACTES de l'app, adoptées pour unifier site + plateforme. Go-forward : les pages migrent progressivement vers ces tokens. */ --sbpj-brand: #4C1D73; /* violet PRIMAIRE (identité) */ --sbpj-brand-mid: #7A2F8F; /* violet moyen (halos) */ --sbpj-brand-dark: #1B0A3D; /* violet profond (fins de dégradé, titres) */ --sbpj-grad: linear-gradient(135deg, #3d1560 0%, #4c1d73 50%, #1b0a3d 100%); /* dégradé signature de l'app (plus profond) */ --sbpj-grad-amber: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); /* action gamifiée */ --sbpj-hollow: #f4f2fa; /* zones creuses : chips inactives, pastilles emoji */ --sbpj-border-k: #ece8f5; /* bordures teintées violet (1 px) */ --sbpj-muted: #6b6585; /* texte secondaire teinté violet */ --sbpj-ink: #0f0a1e; /* texte principal teinté violet */ --sbpj-emerald: #10b981; /* succès / acquis */ --sbpj-amber: #f59e0b; /* étoiles d'avis, XP */ /* Typographie — pile de polices SYSTÈME (native de chaque OS, 0 téléchargement) */ --sbpj-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; /* Espacements & radius */ --sbpj-radius-card: 16px; --sbpj-radius-btn: 14px; --sbpj-content-max: 1200px; /* largeur commune : contenu = navbar = footer */ /* ---- SYSTÈME D'ESPACEMENT (cohérence entre TOUTES les pages) ---- Source unique de vérité : chaque page/section réutilise ces tokens pour garder un rythme identique d'une page à l'autre. */ --sbpj-section-pad-y: clamp(32px, 4.5vw, 52px); /* padding haut/bas d'une section */ --sbpj-section-pad-y-first: clamp(48px, 6vw, 76px); /* padding-top de la 1re section (le hero full-bleed n'a pas de padding-bottom) */ --sbpj-gutter: 20px; /* gouttière horizontale */ --sbpj-hero-border: 4px solid #d1d5db; /* ligne de démarcation sous le hero (uniforme sur toutes les pages) */ --sbpj-hero-min-h: clamp(800px, 94vh, 980px); /* hauteur mini du hero (uniforme) : plancher relevé à 800 pour que le héros le plus chargé (UC) rentre partout → hauteur identique sur tous les écrans */ /* Transition */ --sbpj-ease: cubic-bezier(.4, 0, .2, 1); } /* ========================================================= BASE ========================================================= */ body { font-family: var(--sbpj-font); color: var(--sbpj-text); background-color: #ffffff; /* fond de page blanc pur */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hyphens: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--sbpj-font); color: var(--sbpj-accent-deep); letter-spacing: -0.02em; } a { color: var(--sbpj-accent); } /* Défilement fluide pour les ancres internes (désactivé si l'utilisateur préfère moins d'animations). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Hero commun à toutes les pages (classe partagée « sbpj-hero ») : ligne de démarcation en bas + dégradé sombre en haut (fond de la navbar, plus foncé tout en haut, s'éclaircit puis disparaît). */ .sbpj-hero { position: relative; border-bottom: var(--sbpj-hero-border); } /* Filet gris uniforme sous TOUS les héros violets, y compris ceux en dégradé étoilé qui n'ont pas la classe .sbpj-hero (fiches, livre, oral, à-propos, Marion, blog, catégorie). Demande Marion 19/07. */ .sbpj-starry--hero, .bl-hero, .ap-hero { border-bottom: var(--sbpj-hero-border); } /* Hauteur de héros UNIFORME sur tout le site (référence = héros fiches). 8 héros l'appliquaient déjà via --sbpj-hero-min-h ; on l'étend aux autres. Flex colonne + centrage vertical (les enfants gardent leur pleine largeur). Marion 19/07. */ /* HAUTEUR DE HÉROS IDENTIQUE partout (réf = héros fiches). Ce qui variait, c'était le PADDING (UC 208/128, quiz 150/80… vs fiches 140/72) : avec un padding normalisé + contenu centré, tous les héros retombent exactement sur la même hauteur (--sbpj-hero-min-h). On garde min-height (pas de hauteur fixe) pour ne PAS rogner les héros dont le contenu grandit (ex. quiz interactif). Les héros d'ARTICLES (.sp-hero) sont volontairement EXCLUS (spécifiques, plus grands). */ .sbpj-hero, .sbpj-starry--hero:not(.sp-hero), .sbpj-partenaire-hero, .sbpj-formation-hero, .ap-hero, .bl-hero { min-height: var(--sbpj-hero-min-h) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding-top: 100px !important; padding-bottom: 64px !important; } @media (max-width: 768px) { .sbpj-hero, .sbpj-starry--hero:not(.sp-hero), .sbpj-partenaire-hero, .sbpj-formation-hero, .ap-hero, .bl-hero { height: auto !important; min-height: 0 !important; padding-top: 104px !important; padding-bottom: 56px !important; } } .sbpj-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: clamp(160px, 26vh, 300px); background: linear-gradient(to bottom, rgba(27, 10, 61, .78) 0%, rgba(27, 10, 61, 0) 100%); pointer-events: none; } /* Les composants de page (hero, cartes, CTA, etc.) sont ajoutés au fur et à mesure, page par page, dans /assets/css/{slug}.css chargés conditionnellement. */ /* ========================================================= ACCESSIBILITÉ — lien d'évitement ========================================================= */ .sbpj-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--sbpj-accent-deep); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0; } .sbpj-skip-link:focus { left: 0; color: #fff; } /* ========================================================= HEADER (global — présent sur toutes les pages) ========================================================= */ .sbpj-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--sbpj-border); } .sbpj-header__inner { max-width: var(--sbpj-content-max); margin-inline: auto; padding: .8rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sbpj-header__brand { font-weight: 900; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--sbpj-accent-deep); text-decoration: none; white-space: nowrap; } .sbpj-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem); } .sbpj-header__link { color: var(--sbpj-text); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .4rem 0; border-bottom: 2px solid transparent; transition: color .15s var(--sbpj-ease), border-color .15s var(--sbpj-ease); white-space: nowrap; } .sbpj-header__link:hover, .sbpj-header__link[aria-current="page"] { color: var(--sbpj-accent); border-color: var(--sbpj-accent); } /* Burger (masqué en desktop) */ .sbpj-header__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--sbpj-border); border-radius: 10px; cursor: pointer; } .sbpj-header__toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--sbpj-accent-deep); transition: transform .2s var(--sbpj-ease), opacity .2s var(--sbpj-ease); } .sbpj-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sbpj-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .sbpj-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { .sbpj-header__toggle { display: flex; } .sbpj-header__nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--sbpj-border); max-height: 0; overflow: hidden; transition: max-height .28s var(--sbpj-ease); } .sbpj-header__nav.is-open { max-height: 80vh; } .sbpj-header__menu { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(1rem, 3vw, 2rem) 1rem; } .sbpj-header__item { border-bottom: 1px solid var(--sbpj-border); } .sbpj-header__link { display: block; padding: .9rem 0; border-bottom: none; } } /* --------------------------------------------------------- Navbar TRANSPARENTE superposée au hero (pages à hero sombre). Le body porte « sbpj-has-hero » ; l'image du hero passe sous la navbar, le texte devient blanc. Au scroll → fond violet solide (texte reste blanc). --------------------------------------------------------- */ .sbpj-has-hero .sbpj-header { position: absolute; /* posée sur le hero, elle défile avec la page et disparaît au scroll */ left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: none; } .sbpj-has-hero .sbpj-header__brand { color: #ffffff; } .sbpj-has-hero .sbpj-header__link { color: rgba(255, 255, 255, .92); } .sbpj-has-hero .sbpj-header__link:hover, .sbpj-has-hero .sbpj-header__link[aria-current="page"] { color: #ffffff; border-color: #ffffff; } .sbpj-has-hero .sbpj-header__toggle { border-color: rgba(255, 255, 255, .45); } .sbpj-has-hero .sbpj-header__toggle span { background: #ffffff; } /* Décale la navbar (absolue) sous la barre d'admin WordPress quand elle est présente (utilisateur connecté). Les visiteurs n'ont pas cette barre. */ .admin-bar.sbpj-has-hero .sbpj-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar.sbpj-has-hero .sbpj-header { top: 46px; } } /* Mobile : le menu déroulant reste un panneau blanc → liens en foncé. */ @media (max-width: 860px) { .sbpj-has-hero .sbpj-header__link { color: var(--sbpj-text); } } /* ========================================================= FOOTER (global) ========================================================= */ .sbpj-footer { background: #ffffff; color: var(--sbpj-muted); margin-top: 4rem; } .sbpj-footer__inner { max-width: var(--sbpj-content-max); margin-inline: auto; border-top: 1px solid var(--sbpj-border-k); /* ligne du haut « coupée » comme celle du bas (demande Marion 17/07) */ padding: clamp(3rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: 1.5fr 2.5fr; gap: clamp(2rem, 5vw, 4.5rem); } .sbpj-footer__logo { font-weight: 900; font-size: 1.4rem; color: var(--sbpj-ink); margin: 0 0 1.1rem; letter-spacing: -0.02em; } .sbpj-footer__logo img { max-height: 54px; width: auto; display: block; } .sbpj-footer__baseline { line-height: 1.6; margin: 0 0 1.2rem; max-width: 40ch; color: var(--sbpj-muted); font-size: .92rem; } .sbpj-footer__trustbar { } .sbpj-footer__trust { list-style: none; max-width: var(--sbpj-content-max); margin-inline: auto; padding: 1.15rem clamp(1rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.4rem; } .sbpj-footer__trust li { font-size: .82rem; font-weight: 600; color: var(--sbpj-ink); display: inline-flex; align-items: center; gap: .38rem; } .sbpj-footer__stars { color: #f59e0b; letter-spacing: 1px; } .sbpj-footer__contact { display: inline-block; color: var(--sbpj-brand); font-weight: 700; text-decoration: none; font-size: .92rem; } .sbpj-footer__contact:hover { color: var(--sbpj-brand-dark); text-decoration: underline; } .sbpj-footer__address { margin: .55rem 0 0; font-size: .82rem; color: #9691a8; font-style: normal; line-height: 1.5; } .sbpj-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; } .sbpj-footer__col-title { color: var(--sbpj-ink); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 1rem; } .sbpj-footer__list { list-style: none; margin: 0; padding: 0; } .sbpj-footer__list li { margin: 0 0 .6rem; } .sbpj-footer__list a { color: var(--sbpj-muted); text-decoration: none; font-size: .9rem; transition: color .15s var(--sbpj-ease); } .sbpj-footer__list a:hover { color: var(--sbpj-brand); } .sbpj-footer__bottom { border-top: 1px solid var(--sbpj-border-k); max-width: var(--sbpj-content-max); margin-inline: auto; padding: 1.3rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; } .sbpj-footer__bottom p { margin: 0; font-size: .82rem; color: #9691a8; } .sbpj-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; } .sbpj-footer__legal a { color: var(--sbpj-muted); text-decoration: none; font-size: .82rem; transition: color .15s var(--sbpj-ease); } .sbpj-footer__legal a:hover { color: var(--sbpj-brand); } .sbpj-footer__legal-off { color: #c9c5d6; font-size: .82rem; cursor: default; user-select: none; } /* légal désactivé (gris clair, non cliquable) */ @media (max-width: 860px) { .sbpj-footer__inner { grid-template-columns: 1fr; gap: 2.4rem; } } @media (max-width: 560px) { .sbpj-footer__cols { grid-template-columns: 1fr 1fr; } .sbpj-footer__bottom { flex-direction: column; text-align: center; justify-content: center; } .sbpj-footer__legal { justify-content: center; } .sbpj-footer__trust { justify-content: center; gap: .7rem 1.4rem; } } /* ========================================================= BRAND KIT plateforme — composants réutilisables (additif) Source : SaaS-SmartRoom/01-Documents/BRAND-KIT.md §10. Classes GÉNÉRIQUES (préfixe court) pour unifier site + app. NB : le panneau violet étoilé du kit est nommé .sbpj-panel (et non .sbpj-hero, déjà pris par le wrapper de héros full-bleed). ========================================================= */ /* Fond de page « app » : blanc + halos violets subtils */ .sbpj-page-bg { background: radial-gradient(1100px 560px at 12% -8%, rgba(122, 47, 143, .07), transparent 60%), radial-gradient(950px 520px at 98% 2%, rgba(76, 29, 115, .05), transparent 55%), var(--sbpj-bg); background-attachment: fixed; } /* Boutons */ .sbpj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sbpj-grad); color: #fff; font-family: var(--sbpj-font); font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 12px; border: 0; text-decoration: none; cursor: pointer; transition: opacity .2s ease, transform .2s ease; } .sbpj-btn:hover { opacity: .9; transform: translateY(-2px); color: #fff; } .sbpj-btn--outline { background: #fff; color: var(--sbpj-brand); border: 2px solid var(--sbpj-brand); } .sbpj-btn--outline:hover { background: rgba(76, 29, 115, .05); color: var(--sbpj-brand); } .sbpj-btn--inverse { background: #fff; color: var(--sbpj-brand); } .sbpj-btn--inverse:hover { background: #fffbeb; color: var(--sbpj-brand); } .sbpj-btn--amber { background: var(--sbpj-grad-amber); } /* Carte standard (ombre premium de l'app) */ .sbpj-card { background: var(--sbpj-surface, #fff); border: 1px solid var(--sbpj-border-k); border-radius: 16px; box-shadow: 0 1px 2px rgba(27, 10, 61, .04), 0 10px 30px -14px rgba(27, 10, 61, .18); } .sbpj-card--hover { transition: transform .2s ease, box-shadow .2s ease; } .sbpj-card--hover:hover { transform: translateY(-2px); } /* Panneau violet étoilé (bandeaux, en-têtes de section) */ .sbpj-panel { position: relative; overflow: hidden; background: var(--sbpj-grad); color: #fff; border-radius: 16px; padding: 40px 24px; } .sbpj-panel::before, .sbpj-panel::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .10); pointer-events: none; } .sbpj-panel::before { width: 224px; height: 224px; left: -64px; top: 64px; } .sbpj-panel::after { width: 288px; height: 288px; right: -80px; bottom: -80px; background: rgba(255, 255, 255, .07); } .sbpj-panel__star { position: absolute; color: rgba(255, 255, 255, .7); pointer-events: none; user-select: none; } /* Chips / badges */ .sbpj-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 5px 12px; font-size: 12px; font-weight: 700; } .sbpj-chip--fire { background: #ffedd5; color: #c2410c; } .sbpj-chip--xp { background: #fffbeb; color: #b45309; } .sbpj-chip--free { background: #10b981; color: #fff; } .sbpj-chip--done { background: #ecfdf5; color: #059669; } .sbpj-chip--onviolet { background: rgba(255, 255, 255, .15); color: #fff; } .sbpj-chip--price { background: rgba(255, 255, 255, .9); color: var(--sbpj-brand); font-weight: 900; } /* Barre de progression signature (remplissage émeraude) */ .sbpj-progress { height: 8px; border-radius: 9999px; background: var(--sbpj-hollow); overflow: hidden; } .sbpj-progress__fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #34d399, #10b981); transition: width .7s ease; } /* Titre de section avec pastille emoji */ .sbpj-kh2 { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--sbpj-ink); } .sbpj-kh2__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sbpj-hollow); font-size: 14px; } /* ========================================================= PAGE /à-propos (bio auteur) — 16/07/2026 ========================================================= */ .sbpj-apropos { max-width: 760px; margin: 0 auto; } .sbpj-apropos__hero { display: flex; gap: 28px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; } .sbpj-apropos__photo { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 30px rgba(27,10,61,.18); flex-shrink: 0; } .sbpj-apropos__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--sbpj-accent, #7A2F8F); margin: 0 0 6px; } .sbpj-apropos__h2 { font-size: 1.9rem; font-weight: 900; margin: 0 0 6px; line-height: 1.1; color: var(--sbpj-text, #0f172a); } .sbpj-apropos__role { font-weight: 600; color: rgba(15,23,42,.62); margin: 0; } .sbpj-apropos p { line-height: 1.75; margin: 0 0 1.1rem; } .sbpj-apropos__sign { color: rgba(15,23,42,.7); } @media (max-width: 560px) { .sbpj-apropos__hero { justify-content: center; text-align: center; } } /* ═════════════════════════════════════════════════════════════════ UNIFORMISATION GLOBALE (17/07/2026) — règles communes à TOUTES les pages ═════════════════════════════════════════════════════════════════ */ /* 1) Survol des CTA : GeneratePress repasse les liens en sombre au hover. → sur tous les boutons violets/sombres du site, le texte RESTE blanc. */ .sbpj-home-cta__btn-primary:hover, .sbpj-home-cta__btn-primary:focus, .sbpj-livre-buy__cta:hover, .sbpj-livre-buy__cta:focus, .sbpj-livre-hero__btn--primary:hover, .sbpj-livre-hero__btn--primary:focus, .sbpj-livre-hero__btn--outline:hover, .sbpj-livre-hero__btn--outline:focus, .sbpj-livre-reco__cta:hover, .sbpj-livre-reco__cta:focus, .sbpj-oral-hero__cta:hover, .sbpj-oral-hero__cta:focus, .sbpj-oral-reco__cta:hover, .sbpj-oral-reco__cta:focus, .sbpj-oral-cta__btn:hover, .sbpj-oral-cta__btn:focus, .sbpj-qhub-exam__cta:hover, .sbpj-qhub-exam__cta:focus, .sbpj-qhub-hero__btn--primary:hover, .sbpj-qhub-hero__btn--primary:focus, .sbpj-qhub-smartcta__cta:hover, .sbpj-qhub-smartcta__cta:focus, .sbpj-quiz-next-btn:hover, .sbpj-quiz-next-btn:focus, .sbpj-quiz-smartroom-btn:hover, .sbpj-quiz-smartroom-btn:focus, .sbpj-quiz-welcome-btn:hover, .sbpj-quiz-welcome-btn:focus, .sbpj-tep-cta__btn:hover, .sbpj-tep-cta__btn:focus, .sbpj-tep-hero__cta:hover, .sbpj-tep-hero__cta:focus, .sbpj-tep-prog__cta:hover, .sbpj-tep-prog__cta:focus, .sbpj-ville-hero__cta:hover, .sbpj-ville-hero__cta:focus, .sbpj-ville-cta__cta:hover, .sbpj-ville-cta__cta:focus, .sbpj-ville-ann__maps-btn:hover, .sbpj-ville-ann__maps-btn:focus, .sbpj-ville-mention__cta-btn:hover, .sbpj-ville-mention__cta-btn:focus, .sbpj-ville-prep__cta-btn:hover, .sbpj-ville-prep__cta-btn:focus, .partenaire-stats__cta:hover, .partenaire-stats__cta:focus { color: #ffffff !important; } /* 2) FAQ : GeneratePress applique son style de bouton (fond gris/sombre) au survol des questions