/* Theme Name: Leadership au féminin – Kadence Child Theme URI: https://leadershipaufeminin.fr Description: Thème enfant Kadence pour Leadership au féminin. Identité : bordeaux framboise, serif chic (Playfair Display), sans géométrique (Poppins), boutons pilule. Author: Fabrique Studio Template: kadence Version: 1.0.0 Text Domain: laf-kadence-child */ /* ========================================================= PALETTE & TOKENS (couleurs relevées sur le site d'origine) ========================================================= */ :root { --laf-primary: #BB2648; /* bordeaux framboise – accent principal */ --laf-primary-dark: #8E1C38; /* hover / états actifs */ --laf-ink: #2B2226; /* sections sombres & texte fort */ --laf-cream: #F4EFE9; /* fond clair chaleureux */ --laf-body: #3A3338; /* texte courant */ --laf-muted: #7A7079; --laf-radius: 999px; /* boutons pilule */ } /* ========================================================= TYPOGRAPHIE ========================================================= */ body, .entry-content, .content-container { font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--laf-body); font-size: 1.05rem; line-height: 1.7; } h1, h2, h3, h4, .entry-title, .wp-block-heading { font-family: "Playfair Display", Georgia, "Times New Roman", serif; color: var(--laf-ink); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } /* Échelle fluide : la partie « vw » est bornée par un socle en rem pour que le texte reste lisible sur petit écran et ne s'emballe pas sur grand écran. */ h1 { font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.7rem); } h2 { font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.85rem); } h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); } h4 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); } /* Titre de l'article/page OUVERT : grand format, mais raisonnable */ h1.entry-title { font-size: clamp(1.8rem, 1.4rem + 1.7vw, 2.6rem); } /* Les titres de section du corps sont des repères de lecture, pas des affiches : sur grand écran l'échelle fluide les faisait grossir jusqu'à rivaliser avec le titre de la page. */ .entry-content h2 { margin: 2.4rem 0 .8rem; } .entry-content h3 { margin: 1.9rem 0 .6rem; } /* ========================================================= TITRES DE CARTES (blog, archives, résultats de recherche) Ce sont des

: sans règle dédiée ils héritent d'une taille de titre de page et écrasent la mise en page. ========================================================= */ .loop-entry .entry-title, .entry-content-wrap .entry-title, h2.entry-title, h3.entry-title { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem); line-height: 1.3; letter-spacing: 0; margin: .2rem 0 .5rem; } .loop-entry .entry-title a, .entry-content-wrap .entry-title a { color: var(--laf-ink); text-decoration: none; } .loop-entry .entry-title a:hover, .entry-content-wrap .entry-title a:hover { color: var(--laf-primary); } /* méta et extraits de carte : discrets, pour laisser respirer le titre */ .loop-entry .entry-meta { font-size: .82rem; color: var(--laf-muted); } .loop-entry .entry-summary { font-size: .93rem; } .loop-entry .entry-taxonomies .category-links a { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--laf-primary); text-decoration: none; } /* mot mis en avant dans un titre (ex. « votre authenticité ») : ou */ h1 em, h2 em, h1 strong, h2 strong { color: var(--laf-primary); font-style: normal; } /* Eyebrow / titre « feutre » optionnel — à poser en classe sur un bloc titre */ .laf-marker { font-family: "Permanent Marker", "Playfair Display", cursive; color: var(--laf-primary); font-weight: 400; letter-spacing: 0.01em; } /* ========================================================= LIENS ========================================================= */ a { color: var(--laf-primary); } a:hover { color: var(--laf-primary-dark); } /* cartes d'annuaire et boutons CTA exclus : éléments d'interface, pas des liens de texte */ .entry-content a:not(.wp-block-button__link):not(.button):not(.laf-reseau-card):not(.laf-btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ========================================================= BOUTONS PILULE ========================================================= */ .wp-block-button__link, .button, button.button, input[type="submit"], .kb-button, .wp-element-button { background-color: var(--laf-primary); color: #fff; border-radius: var(--laf-radius); padding: 0.85em 2em; font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: 0.02em; border: 2px solid var(--laf-primary); transition: background-color .2s ease, border-color .2s ease, transform .15s ease; box-shadow: 0 8px 20px rgba(187, 38, 72, 0.18); } .wp-block-button__link:hover, .button:hover, input[type="submit"]:hover, .wp-element-button:hover { background-color: var(--laf-primary-dark); border-color: var(--laf-primary-dark); color: #fff; transform: translateY(-1px); } /* Variante « outline » (bouton secondaire) : classe is-style-outline */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--laf-primary); box-shadow: none; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--laf-primary); color: #fff; } /* ========================================================= SECTIONS SOMBRES (classe .laf-dark sur un bloc groupe) ========================================================= */ .laf-dark { background-color: var(--laf-ink); color: #F1EBEE; } .laf-dark h1, .laf-dark h2, .laf-dark h3, .laf-dark h4 { color: #fff; } .laf-dark a { color: #fff; text-decoration: underline; } /* Fond crème utilitaire */ .laf-cream { background-color: var(--laf-cream); } /* ========================================================= PAGE D'ACCUEIL Le hero fait office de titre : on masque le bandeau de titre que Kadence affiche par défaut au-dessus du contenu. ========================================================= */ body.home .entry-hero, body.home .entry-hero-container-inner, body.home .page-title, body.home .entry-header { display: none; } /* Le contenu de l'accueil part sous le header, sans marge parasite */ body.home .content-area, body.home .site-main { padding-top: 0; margin-top: 0; } /* ========================================================= SECTIONS PLEINE LARGEUR — confinement du contenu Dans un groupe .alignfull, les blocs enfants « alignwide » calculent une largeur négative (−32px de chaque côté) et se font rogner. On neutralise et on recentre sur une largeur lisible. ========================================================= */ /* NB1 : Gutenberg insère .wp-block-group__inner-container entre le groupe et ses enfants -> sélecteurs DESCENDANTS obligatoires (pas « > »). NB2 : Kadence pose « margin:-24px; width:calc(100% + 48px) » sur .alignwide via un CSS chargé APRÈS le thème enfant. À spécificité égale il gagne, d'où des sélecteurs à 3-4 classes ici (plutôt qu'un !important). */ .wp-block-group.alignfull .wp-block-columns.alignwide, .wp-block-group.alignfull .wp-block-heading.alignwide, .wp-block-group.alignfull .alignwide, .laf-cream .wp-block-columns.alignwide, .laf-dark .wp-block-columns.alignwide { width: auto; max-width: min(1140px, 100%); margin-left: auto; margin-right: auto; left: auto; right: auto; } /* l'inner-container ne doit pas non plus être décalé */ .laf-cream > .wp-block-group__inner-container, .laf-dark > .wp-block-group__inner-container { max-width: 1140px; margin-left: auto; margin-right: auto; } /* marge intérieure pour que le texte ne colle jamais au bord */ .laf-cream, .laf-dark { padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); } /* garde-fou global : aucune section ne provoque de scroll latéral */ body { overflow-x: hidden; } .wp-block-columns { max-width: 100%; } /* ========================================================= COMPOSANTS RESTAURÉS DEPUIS L'ANCIEN SITE .laf-btn : boutons CTA (ex-« nectar-button » de Salient) .laf-testimonial: témoignages (ex-cartes retournables « flip-box ») ========================================================= */ .entry-content a.laf-btn, a.laf-btn { display: inline-block; background: var(--laf-primary); color: #fff; border-radius: var(--laf-radius); padding: .8em 1.9em; font-weight: 600; text-decoration: none; margin: .4rem .5rem .4rem 0; box-shadow: 0 8px 20px rgba(187, 38, 72, .18); transition: background-color .2s ease, transform .15s ease; } .entry-content a.laf-btn:hover, a.laf-btn:hover { background: var(--laf-primary-dark); color: #fff; transform: translateY(-1px); } blockquote.laf-testimonial { background: var(--laf-cream); border-left: 4px solid var(--laf-primary); border-radius: 0 14px 14px 0; padding: 1.4rem 1.6rem; margin: 1.2rem 0; font-family: "Playfair Display", serif; font-style: italic; font-size: 1.08rem; color: var(--laf-ink); } blockquote.laf-testimonial::before { content: "“"; display: block; font-family: "Playfair Display", serif; font-size: 2.6rem; line-height: .6; color: var(--laf-primary); margin-bottom: .3rem; } /* Une suite de témoignages se lit en grille : empilés, huit bandes pleine largeur donnent une page qui n'en finit pas. 2 colonnes dès la tablette, 3 quand la place le permet. */ .laf-testimonials-grid { display: grid; /* 330 px de plancher : 3 colonnes sur la largeur de contenu, 2 sur tablette, 1 sur mobile. Plus étroit, les citations se hachent. */ grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2.4rem; } .laf-testimonials-grid > blockquote.laf-testimonial { margin: 0; font-size: 1rem; } /* ========================================================= CHIFFRES-CLÉS (ex-« nectar-milestone » de Salient) Le constructeur de pages les posait en colonnes ; l'export les a mis à plat, d'où cinq nombres empilés sur toute la hauteur d'un écran. ========================================================= */ .laf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem 1.4rem; background: var(--laf-cream); border-radius: 18px; padding: 2.2rem clamp(1.2rem, 3vw, 2.4rem); margin: 1.8rem 0 2.6rem; } .laf-kpi { text-align: center; } .laf-kpi__num { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1.05; color: var(--laf-primary); white-space: nowrap; } .laf-kpi__label { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.45; color: var(--laf-body); } /* ========================================================= BANDEAUX DE TITRE au feutre (images de titre du site d'origine) Ce sont des titres dessinés : à la largeur de la colonne ils écrasent tout ce qui les entoure. On les cadre à une taille de titre. ========================================================= */ .entry-content img.laf-bandeau { display: block; width: auto; max-width: min(100%, 460px); height: auto; margin: 1.6rem auto 1.2rem; /* centré, comme les titres qu'ils doublent */ } /* Les titres de section des pages institutionnelles sont centrés, comme sur le site d'origine. Les articles du blog gardent un fer à gauche : c'est de la lecture suivie, pas une page vitrine. */ body.page .entry-content > h2, body.page .entry-content > h3, body.page .entry-content > h4 { text-align: center; } /* ========================================================= SUITE D'ILLUSTRATIONS (galerie mise à plat par l'export) Huit cartes d'étapes à la file occupaient huit pleines largeurs ; en grille elles se lisent d'un coup d'œil comme la séquence qu'elles décrivent. ========================================================= */ .laf-visuels { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.4rem; align-items: start; margin: 1.8rem 0 2.6rem; } /* déclaré avec .entry-content pour passer devant le garde-fou plus bas, qui pose width:auto sur toutes les images du corps */ .entry-content .laf-visuels img { display: block; width: 100%; max-width: none; max-height: none; margin: 0; } /* Garde-fou général sur les images du corps. « width: auto » plutôt que la largeur de colonne : les visuels font 700 à 1450 px, les étirer jusqu'au bord les rendait flous pour rien. Le plafond en hauteur évite qu'un visuel presque carré occupe tout l'écran. */ .entry-content img { width: auto; height: auto; max-width: 100%; max-height: 68vh; } /* ========================================================= CITATIONS ========================================================= */ blockquote, .wp-block-quote { border-left: 4px solid var(--laf-primary); padding-left: 1.25em; font-family: "Playfair Display", serif; font-style: italic; color: var(--laf-ink); } /* ========================================================= ANNUAIRE DES RÉSEAUX (archive du CPT « reseau ») Grille de cartes propres, indépendante du layout Kadence. ========================================================= */ .laf-reseaux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; } .laf-reseau-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ECE3E6; border-radius: 18px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .laf-reseau-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(43, 34, 38, 0.12); } /* NB : ces éléments sont des (imbriqués dans un ) : sans display:block ils restent inline et ignorent aspect-ratio/height -> l'image ne s'affiche pas. */ .laf-reseau-card__thumb { display: block; aspect-ratio: 16 / 10; background: var(--laf-cream); overflow: hidden; } .laf-reseau-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Vignette de type LOGO : on affiche le logo entier (jamais recadré) sur fond neutre. Indispensable pour les logos en bannière (ex. 1200x200) que « cover » massacrerait. */ .laf-reseau-card__thumb--logo { background: #FFFFFF; } .laf-reseau-card__thumb--logo img { object-fit: contain; padding: 14%; background: #FFFFFF; } /* certains logos sont blancs sur fond transparent : damier très clair pour les révéler */ .laf-reseau-card__thumb--logo { background-image: linear-gradient(45deg, #F1EDEE 25%, transparent 25%, transparent 75%, #F1EDEE 75%), linear-gradient(45deg, #F1EDEE 25%, transparent 25%, transparent 75%, #F1EDEE 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; background-color: #FFFFFF; } .laf-reseau-card__body { display: block; padding: 1.1rem 1.25rem 1.4rem; } /* badge et titre sur des lignes distinctes (sinon les se concatènent) */ .laf-reseau-card__type { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--laf-primary); font-weight: 600; margin-bottom: .4rem; } .laf-reseau-card__title { display: block; font-family: "Playfair Display", serif; font-size: 1.15rem; color: var(--laf-ink); margin: 0; line-height: 1.25; } /* la carte est un lien : pas de soulignement hérité du contenu */ a.laf-reseau-card, .entry-content a.laf-reseau-card, a.laf-reseau-card:hover, .entry-content a.laf-reseau-card:hover { text-decoration: none; color: inherit; } /* la grille doit rester dans la largeur de lecture, même en section pleine largeur */ .wp-block-group.alignfull .laf-reseaux-grid, .wp-block-group.alignfull .laf-tax-filter, .laf-reseaux-grid { max-width: min(1140px, 100%); margin-left: auto; margin-right: auto; } /* filtres de taxonomie (chips) */ .laf-tax-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; } /* la spécificité doit battre la règle de soulignement des liens de contenu */ .laf-tax-filter a, .entry-content .laf-tax-filter a { display: inline-block; padding: .4em 1em; border-radius: var(--laf-radius); border: 1px solid #E4D8DC; color: var(--laf-ink); text-decoration: none; font-size: .9rem; } .laf-tax-filter a:hover, .laf-tax-filter a.is-active { background: var(--laf-primary); color: #fff; border-color: var(--laf-primary); } /* ========================================================= EN-TÊTE — le logo image porte déjà le nom de la marque : on masque le titre texte que Kadence affiche à côté. ========================================================= */ .site-branding .site-title, .site-branding .site-description, #main-header .site-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; /* reste lisible pour les lecteurs d'écran */ } .site-branding .custom-logo-link img { max-height: 64px; width: auto; } /* ========================================================= PIED DE PAGE — reconstruit d'après l'ancien site (logo + baseline, navigation, réseaux sociaux du client) ========================================================= */ #colophon, .site-footer, .site-footer-row-container { background-color: var(--laf-ink); color: #CDBFC5; } .site-footer a { color: #F1EBEE; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .laf-foot-title { display: block; font-family: "Playfair Display", serif; font-size: 1.05rem; color: #fff; margin-bottom: .8rem; } .laf-foot-logo { max-width: 190px; height: auto; margin-bottom: .9rem; } .laf-foot-brand p { color: #BCAAB2; font-size: .95rem; max-width: 34ch; } .laf-foot-nav ul, .laf-foot-social ul { list-style: none; margin: 0; padding: 0; } .laf-foot-nav li, .laf-foot-social li { margin: 0 0 .45rem; } .laf-foot-cta { display: inline-block; margin-top: 1.1rem; background: var(--laf-primary); color: #fff !important; border-radius: var(--laf-radius); padding: .7em 1.6em; font-weight: 600; text-decoration: none !important; transition: background-color .2s ease, transform .15s ease; } .laf-foot-cta:hover { background: var(--laf-primary-dark); transform: translateY(-1px); } /* mentions légales (menu assigné à l'emplacement « footer ») */ .site-footer .footer-navigation a { font-size: .85rem; color: #A8969E; } @media (max-width: 767px) { .laf-foot-brand, .laf-foot-nav, .laf-foot-social { text-align: left; margin-bottom: 2rem; } .laf-foot-logo { max-width: 160px; } } /* mise en page du pied de page rendu par le thème enfant */ .laf-footer { padding: 3.5rem 0 1.5rem; } .laf-footer__inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } .laf-footer__legal { max-width: 1140px; margin: 2.5rem auto 0; padding: 1.2rem 24px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .85rem; color: #A8969E; } @media (max-width: 860px) { .laf-footer__inner { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================================= Correctifs de finition — palette, traitement d'image, contraste ========================================================================= */ /* Kadence livre une palette bleue (--global-palette1:#2B6CB0). Sans cet écrasement, tout ce que le thème parent colore lui-même — boutons outline, liens, focus — sort en bleu au milieu d'une identité bordeaux. */ :root { --global-palette1: #BB2648; --global-palette2: #8E1C38; --global-palette3: #2B2226; --global-palette4: #3A3338; --global-palette7: #F4EFE9; --global-palette8: #FFFFFF; } /* Bouton fantôme : le style is-style-outline n'était pas repris du tout. */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 2px solid var(--laf-primary, #BB2648); color: var(--laf-primary, #BB2648); text-decoration: none; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--laf-primary, #BB2648); color: #FFFFFF; } /* sur fond sombre, le bordeaux ne se détache pas : on passe en crème */ .laf-dark .wp-block-button.is-style-outline > .wp-block-button__link { border-color: #F4EFE9; color: #F4EFE9; } .laf-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #F4EFE9; color: #2B2226; } /* Traitement photo de la DA d'origine : coins arrondis + ombre portée pleine et décalée. Remplace is-style-rounded, dont l'ellipse écrasait les visages. */ .laf-shot { margin: 0; } .laf-shot img { display: block; width: 100%; height: auto; border-radius: 28px; position: relative; z-index: 1; } .laf-shot { position: relative; padding: 0 18px 18px 0; } .laf-shot::after { content: ""; position: absolute; inset: 18px 0 0 18px; background: var(--laf-primary, #BB2648); border-radius: 28px; z-index: 0; } .laf-dark .laf-shot::after { background: #F4EFE9; } /* Hero : « votre authenticité » en bordeaux sur photo sombre ne passait pas. Voile dégradé côté texte + accent éclairci pour ce fond-là uniquement. */ .laf-hero .wp-block-cover__inner-container { position: relative; z-index: 2; } .laf-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,14,17,.82) 0%, rgba(20,14,17,.55) 45%, rgba(20,14,17,.15) 100%); z-index: 1; } .laf-hero h1 em, .laf-hero h1 .has-inline-color { color: #F58AA4; font-style: normal; } /* Cartes d'annuaire : trois fonds différents cohabitaient (crème, blanc, damier), ce qui donnait une grille en patchwork. Un seul fond, un seul cadrage — le logo entier, jamais recadré. */ .laf-reseau-card__thumb, .laf-reseau-card__thumb--logo { background: #FFFFFF; background-image: none; border-bottom: 1px solid rgba(43, 34, 38, 0.07); } .laf-reseau-card__thumb img, .laf-reseau-card__thumb--logo img { object-fit: contain; padding: 10%; background: #FFFFFF; } /* Les listes de liens du pied de page viennent maintenant de menus WordPress : wp_nav_menu enveloppe toujours dans un