/* ═══════════════════════════════════════════════════════════════ LDNR — Design tokens : couleurs + typographie Chargé en premier sur toutes les pages. Le toggle JS bascule data-theme="light" sur . ═══════════════════════════════════════════════════════════════ */ /* ── Mode sombre (défaut) ── */ :root { /* Typographie */ --font-ui: 'Space Grotesk', system-ui, sans-serif; /* nav, labels, boutons */ --font-display: 'Instrument Serif', Georgia, serif; /* titres, accents */ /* Fond & surfaces */ --color-bg: #050508; --color-surface: #0d0c15; /* Texte */ --color-text: #ffffff; --color-text-muted: #cdcdce; /* opaque : equivaut a rgba(255,255,255,.8) sur --color-bg. Doit rester opaque, sinon l'aurora (blobs colores animes, z-index -2, injectee sur toutes les pages) transparait a travers les glyphes et teinte le texte secondaire. */ /* Accents */ --color-accent: #00c2ff; --color-accent-2: #9b30ff; /* Nav */ --color-nav-tint: rgba(255, 255, 255, 0.06); --color-nav-border: rgba(255, 255, 255, 0.10); --color-nav-hover: rgba(255, 255, 255, 0.12); --color-nav-text: rgba(255, 255, 255, 0.85); /* Toggle thème */ --color-toggle-bg: rgba(255, 255, 255, 0.08); --color-toggle-border: rgba(255, 255, 255, 0.20); } /* ── Mode clair ── */ [data-theme="light"] { --color-bg: #eef2fb; --color-surface: #dde5f5; --color-text: #050508; --color-text-muted: #343439; /* opaque : equivaut a rgba(5,5,8,.8) sur --color-bg. Voir note en dark. */ --color-accent: #0099cc; --color-accent-2: #7a1fd4; --color-nav-tint: rgba(255, 255, 255, 0.45); --color-nav-border: rgba(0, 0, 0, 0.10); --color-nav-hover: rgba(0, 0, 0, 0.07); --color-nav-text: rgba(5, 5, 8, 0.85); --color-toggle-bg: rgba(0, 0, 0, 0.06); --color-toggle-border:rgba(0, 0, 0, 0.15); } /* ═══════════════════════════════════════════════════════════════ Styles globaux — body, typographie, Gutenberg ═══════════════════════════════════════════════════════════════ */ /* Fond + couleur de base — s'applique aussi aux blocs Gutenberg */ body, body .entry-content, body .wp-block-post-content, body .wp-block-group, body p, body li, body span, body a { color: var(--color-text); } /* Le thème parent émet un « a:hover, a:focus { color: } » global qui repasse tous les liens en bleu au survol. Sa spécificité (0,1,1) bat le « body a » ci-dessus (0,0,2) : une règle :hover dédiée est donc nécessaire. « body a:hover » vaut (0,1,2), ce qui suffit à battre le thème parent tout en restant SOUS n'importe quelle règle de composant du thème enfant, par exemple « .fiche-crumbs a:hover » (0,2,1) — les survols voulus continuent donc de fonctionner. Surtout pas de !important ici : il les écraserait tous. */ body a:hover, body a:focus { color: var(--color-text); } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); transition: background-color 0.4s ease, color 0.4s ease; } /* Titres H1–H5 : Space Grotesk bold */ body h1, body h2, body h3, body h4, body h5 { color: var(--color-text); font-family: var(--font-ui); font-weight: 700; } /* H6 : sur-titre — petit, espacé, atténué */ body h6 { color: var(--color-text-muted); font-family: var(--font-ui); font-size: 0.70rem; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; } /* Accent italic : dans un titre → Instrument Serif italic cyan Usage Gutenberg : sélectionner le mot → Ctrl+I. Fonctionne aussi via la classe .accent sur n'importe quel élément. */ h1 em, h2 em, h3 em, h4 em, h5 em, .accent { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--color-accent); word-break: normal; overflow-wrap: normal; } /* ── Classes couleur Gutenberg (palette theme.json) ── Gutenberg ajoute has-[slug]-color quand tu choisis une couleur dans l'éditeur */ .has-accent-color, .has-accent-color * { color: var(--color-accent) !important; } .has-accent-2-color, .has-accent-2-color * { color: var(--color-accent-2) !important; } .has-text-color { color: var(--color-text) !important; } .has-text-muted-color { color: var(--color-text-muted) !important; } .has-background-color { background-color: var(--color-bg) !important; } .has-surface-color { background-color: var(--color-surface) !important; } /* ── Overrides Kadence — global ── */ /* Hero/titre de page généré automatiquement par Kadence — masqué sur tout le site */ .entry-hero.page-hero-section { display: none !important; } /* Fond blanc Kadence sur le conteneur de page — on laisse le fond du site s'exprimer */ .content-bg { background: transparent !important; } /* ── Overrides Kadence — accueil ── */ /* .single-content h* impose margin: 1.5em 0 .5em — on annule sur la home */ body.home .single-content h1, body.home .single-content h2, body.home .single-content h3 { margin: 0; } /* ═══════════════════════════════════════════════════════════════ Typographie responsive — tailles réduites sur mobile ═══════════════════════════════════════════════════════════════ */ /* Kadence columns — pleine largeur sur mobile */ @media (max-width: 768px) { .kt-inside-inner-col, .kt-row-column-wrap > .wp-block-kadence-column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* Tablet : 768px et moins */ @media (max-width: 768px) { body h1, body .wp-block-heading h1, body .entry-content h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; } body h2, body .wp-block-heading h2, body .entry-content h2 { font-size: clamp(1.5rem, 6.5vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; } body h3, body .entry-content h3 { font-size: clamp(1.2rem, 5vw, 1.75rem); line-height: 1.15; } body h4, body .entry-content h4 { font-size: clamp(1rem, 4vw, 1.35rem); } body p, body .entry-content p { font-size: clamp(0.95rem, 3.5vw, 1rem); line-height: 1.6; } } /* Mobile strict : 480px et moins */ @media (max-width: 480px) { body h1, body .wp-block-heading h1, body .entry-content h1 { font-size: clamp(1.75rem, 9vw, 2.5rem); } body h2, body .wp-block-heading h2, body .entry-content h2 { font-size: clamp(1.35rem, 7vw, 2rem); } } /* ═══════════════════════════════════════════════════════════════ Composants réutilisables — disponibles sur tout le site (à combiner avec le système Liquid Glass : voir liquid-glass.css pour l'effet verre — .lg .lg--pill / .lg--card / .lg--bar…) ═══════════════════════════════════════════════════════════════ */ /* ── Titre de hero — italique = couleur d'accent + police manuscrite ── Utilise --fiche-accent si défini (fiches formation), sinon retombe sur la couleur d'accent générale du site. */ .hero__title { font-family: var(--font-ui); font-size: clamp(3rem, 5.5vw, 5.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: var(--color-text); } .hero__title-accent, .hero__title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--fiche-accent, var(--color-accent)); } /* ── Pill — à combiner avec "lg lg--pill" pour l'effet verre. Exemple : Wifi haut débit */ .pill-label { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; color: var(--color-text); white-space: nowrap; } /* ── Carte "grille en fond" — à combiner avec "lg lg--card" pour le fond en verre (le glass/blur/bordure/ombre vient de .lg, cette classe n'ajoute QUE le motif de grille en filigrane, repris de .cta-card dans la maquette (LDNR-handoff) et de .fiche-cert-card des fiches formation — même recette (masque radial coin haut-droit qui s'estompe). Usage :
…
Implémentation en VRAI élément enfant (.grid-card__grid), pas en ::before : combinée avec "lg", .lg utilise déjà son propre ::before (reflet spéculaire) ET ::after (bordure dégradée) sur ce même élément — un élément n'a qu'un seul ::before/::after possible chacun, donc un ::before ici entrerait en collision et écraserait/serait écrasé par celui de .lg. Un masque appliqué directement sur .grid-card poserait le même problème (il s'appliquerait aussi au reflet/à la bordure de .lg). L'élément enfant réel évite tout conflit : il est injecté automatiquement par grid-card/grid-card.js dans chaque .grid-card trouvé sur la page — rien à ajouter en HTML côté Gutenberg. */ .grid-card { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3.75rem); } .grid-card > .grid-card__grid { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(65% 110% at 100% 0%, #000 40%, transparent 80%); -webkit-mask-image: radial-gradient(65% 110% at 100% 0%, #000 40%, transparent 80%); opacity: 0.85; pointer-events: none; } /* Le contenu (texte, formulaire…) doit rester au-dessus de la grille */ .grid-card > * { position: relative; z-index: 1; } /* ── Lien discret — à utiliser via Gutenberg (Avancé → Classe(s) CSS additionnelle(s)) : "link-quiet" sur un lien, un bloc ou un paragraphe. Couleur = texte normal (suit le thème dark/light), sans soulignement, taille légèrement réduite. */ .link-quiet, .link-quiet a { color: var(--color-text); text-decoration: none; font-size: 0.9em; } /* ── Grille de cartes — à mettre sur un bloc Groupe qui enrobe plusieurs cartes (ex : "grid-card lg lg--card lg--blur-subtle") pour les répartir en grille responsive. Mêmes seuils que .ldnr-stats-grid (stats/stats.css) — cohérent avec le reste du site. Usage Gutenberg : bloc Groupe → Avancé → Classe(s) CSS additionnelle(s) → "card-grid", puis mets tes cartes à l'intérieur du groupe. */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } } /* ── Cartes de même hauteur dans une Rangée/Colonnes — à mettre sur le bloc Colonnes (Rangée) qui enrobe des colonnes contenant chacune une carte (ex : "grid-card lg lg--card lg--blur-subtle"). Sans ça, une colonne WP est bien étirée à la hauteur de la ligne, mais son enfant (la carte) ne remplit pas cet espace — un enfant en display:block n'hérite pas de l'étirement flex de son parent, il faut lui dire explicitement de prendre toute la place (flex:1) une fois la colonne elle-même passée en flex. Résultat : toutes les cartes s'alignent sur la hauteur de la plus haute, quel que soit leur contenu. Usage Gutenberg : bloc Colonnes → Avancé → Classe(s) CSS additionnelle(s) → "equal-cards". */ .equal-cards .wp-block-column { display: flex; } .equal-cards .wp-block-column > * { flex: 1; } /* ── Image "bandeau" — plafonne la hauteur SANS déformer l'image (object-fit: cover recadre comme un vrai crop : l'image remplit la hauteur, l'excédent en largeur est simplement coupé sur les côtés). Usage Gutenberg : bloc Image (classique OU "Image mise en avant") → Avancé → Classe(s) CSS additionnelle(s) → "img-banner". Hauteur par défaut 35vh, ajustable en surchargeant la variable en style inline : style="--banner-h: 25vh" IMPORTANT : Gutenberg pose la classe additionnelle sur le
qui enrobe l'image, jamais sur le lui-même — or object-fit/ object-position n'ont d'effet QUE sur le (ce sont des propriétés pour "élément remplacé", un
n'en est pas un). D'où le double sélecteur ci-dessous : "img.img-banner" couvre le cas où la classe est posée directement sur un , ".img-banner img" couvre le cas normal (classe sur le
/bloc, on cible son descendant). Les variables --banner-h/--obj-pos sont héritées par le depuis son ancêtre porteur de la classe, donc ça fonctionne dans les deux cas. POURQUOI !important SUR height : le bloc "Image mise en avant" écrit style="width:100%;height:100%;object-fit:cover" EN INLINE sur le dès que son attribut aspectRatio est défini — et remettre le contrôle "Ratio d'aspect" sur "taille d'origine" dans l'éditeur ne supprime pas l'attribut, il lui donne la valeur "auto" (non vide), donc WordPress continue d'injecter ces styles. Un style inline bat toujours une feuille externe, quelle que soit la spécificité : sans !important, height:100% écrase notre --banner-h et l'image reprend sa taille naturelle. !important est ici légitime — piloter la hauteur est précisément le rôle de cette classe. Il ne gêne pas la surcharge par --banner-h : la variable est lue à l'intérieur de la déclaration. */ img.img-banner, .img-banner img { display: block; width: 100%; height: var(--banner-h, 35vh) !important; object-fit: cover; /* object-position pilote quelle partie de l'image reste visible une fois recadrée par object-fit:cover — "center" par défaut (le comportement que tu avais). Combine avec .img-pos-top / .img-pos-bottom ci-dessous pour cadrer vers le haut ou le bas plutôt que le centre. */ object-position: var(--obj-pos, center); } .img-pos-top { --obj-pos: top; } .img-pos-bottom { --obj-pos: bottom; } /* ── Glow en bas — à combiner avec "img-banner" (ou seule, sur n'importe quelle image). box-shadow décalé vers le bas (offset Y positif, pas de décalage X) : le flou déborde essentiellement sous l'image plutôt que tout autour. Couleur = accent du thème, suit dark/light automatiquement. Usage Gutenberg : classe additionnelle "img-glow-bottom". */ .img-glow-bottom { box-shadow: 0 25px 50px -15px color-mix(in srgb, var(--color-accent) 55%, transparent); } /* ── Image ronde + glow — reprend .fiche-hero__circle des fiches formation (cercle bordé, halo lumineux en 3 couches). Usage Gutenberg : sur un bloc Image → Avancé → Classe(s) CSS additionnelle(s) → "glow-circle". Suit --fiche-accent si défini (sur une fiche formation), sinon retombe sur l'accent global du thème — donc fonctionne aussi hors des fiches. aspect-ratio force un cadrage carré (donc un cercle net) même si l'image d'origine n'est pas carrée. */ .glow-circle { display: block; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; object-fit: cover; border: 1.5px solid color-mix(in srgb, var(--fiche-accent, var(--color-accent)) 45%, transparent); background: color-mix(in srgb, var(--fiche-accent, var(--color-accent)) 4%, var(--color-bg)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--fiche-accent, var(--color-accent)) 4%, transparent), 0 0 50px color-mix(in srgb, var(--fiche-accent, var(--color-accent)) 22%, transparent), 0 0 120px color-mix(in srgb, var(--fiche-accent, var(--color-accent)) 10%, transparent); } /* ── Glow qui respire (image transparente) — utilise filter:drop-shadow() plutôt que box-shadow : contrairement à box-shadow (rectangle), le glow suit le contour réel des pixels non-transparents du PNG/SVG. L'animation fait varier flou + opacité en boucle douce. Couleur = accent du thème, suit dark/light automatiquement (via --color-accent). Usage Gutenberg : bloc Image → Avancé → Classe(s) CSS additionnelle(s) → "glow-breathe". */ .glow-breathe { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-accent) 55%, transparent)); animation: ldnr-glow-breathe 2s ease-in-out infinite; } @keyframes ldnr-glow-breathe { 0%, 100% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent)); } 50% { filter: drop-shadow(0 0 32px color-mix(in srgb, var(--color-accent) 65%, transparent)); } } @media (prefers-reduced-motion: reduce) { .glow-breathe { animation: none; } } /* ── Liste à icônes accent — teinte les icônes du bloc natif Kadence "Liste à icônes" (wp-block-kadence-iconlist) avec l'accent du thème. Les SVG Kadence utilisent stroke="currentColor" : définir `color` sur le wrapper de l'icône suffit, pas besoin de cibler le SVG lui-même. Suit --fiche-accent si défini (sur une fiche formation), sinon retombe sur l'accent global du thème. Usage Gutenberg : bloc "Liste à icônes" → Avancé → Classe(s) CSS additionnelle(s) → "icon-list-accent". */ .icon-list-accent .kb-svg-icon-wrap { color: var(--fiche-accent, var(--color-accent)); } /* ── Boutons Gutenberg — style global du bloc "Bouton" ────────── Ajouter les classes "lg lg--pill" (+ éventuellement lg--blur-strong) dans l'onglet Avancé du bloc pour l'effet liquid glass : le fond, la bordure et les reflets sont alors gérés par liquid-glass.css, chargé après ce fichier (il prend le dessus automatiquement). */ .wp-block-button__link { font-family: var(--font-ui); font-weight: 500; font-size: 0.95rem; padding: 0.8rem 1.8rem; border-radius: 999px; background: var(--color-accent); color: var(--color-bg); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--color-accent) 45%, transparent); } /* Variante "outline" du bloc bouton (bouton secondaire) */ .is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--color-nav-border); color: var(--color-text); } .is-style-outline .wp-block-button__link:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); box-shadow: none; }