/* * Défilement fluide plutôt qu'instantané pour tout scroll déclenché par le * navigateur (navigation au clavier avec Tab notamment) : sans ça, passer * le focus d'un élément à un autre très éloigné dans la page (ex. du hero * à la première card Projets) saute instantanément par-dessus les sections * intermédiaires (texte d'intro, effet de reveal du hero au scroll), qui * ne sont alors jamais vues par un utilisateur au clavier. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Polices locales (installées via la Bibliothèque de polices WordPress, fichiers dans wp-content/uploads/fonts/). Déclarées ici directement plutôt que de dépendre de theme.json, car nos blocs ACF ne passent pas par le système de typographie natif de Gutenberg. */ @font-face { font-family: 'Barlow'; src: url('/wp-content/uploads/fonts/Barlow-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/wp-content/uploads/fonts/Barlow-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/wp-content/uploads/fonts/Barlow-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/wp-content/uploads/fonts/Barlow-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/wp-content/uploads/fonts/Barlow-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/wp-content/uploads/fonts/Barlow-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'PP Fragment'; src: url('/wp-content/uploads/fonts/PPFragment-SerifLight.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } :root { --chirripo-color-bg: #0D0D0D; --chirripo-color-text: #f5f5f5; --chirripo-color-text-muted: #9a9a9a; --chirripo-color-accent: #B6B6FB; --chirripo-font-display: 'PP Fragment', Georgia, 'Times New Roman', serif; --chirripo-font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --chirripo-space-sm: 0.75rem; --chirripo-space-md: 1.5rem; --chirripo-space-lg: 3rem; --chirripo-space-xl: 6rem; --chirripo-container-width: 80%; } /* * Fond de page : évite un blanc pur (fond par défaut du thème parent) à * côté du gris cassé (#f5f5f5) utilisé par les blocs en fond clair — visible * notamment là où un bloc a un fond transparent (ex : le Carrousel * d'images, dont le fond opaque masquait sinon la zone de chevauchement * avec le bloc précédent). */ /* Spécificité html+body : le style global de WP (thème parent, injecté après ce fichier) pose déjà "body { background: var(--wp--preset...) }" — à spécificité égale, le dernier dans le DOM l'emporterait sinon. */ html body { background-color: #f5f5f5; } /* * Le thème parent (Twenty Twenty-Five) pose un font-weight: 300 sur le * . ``/`` utilisent le mot-clé relatif `bolder`, qui ne * remonte alors qu'à 400 (quasi invisible) au lieu d'un vrai gras : on * force donc le poids explicitement plutôt que de dépendre du contexte. */ strong, b { font-weight: 700; } /* * Titre présent pour la hiérarchie de titres (SEO/accessibilité) mais sans * équivalent visuel voulu dans le design — invisible à l'écran, lu par les * lecteurs d'écran et les outils d'audit. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Réglage fond sombre / clair, commun à tous les blocs de section. * Chaque bloc pose la classe correspondante sur sa racine (via * chirripo_bg_class()) ; comme tout le CSS des blocs consomme déjà * --chirripo-color-bg / -text / -text-muted, ce simple changement de * variables retheme le bloc entier sans toucher à son CSS propre. */ .has-bg-dark { --chirripo-color-bg: #0D0D0D; --chirripo-color-text: #f5f5f5; --chirripo-color-text-muted: #9a9a9a; } .has-bg-light { --chirripo-color-bg: #f5f5f5; --chirripo-color-text: #0D0D0D; --chirripo-color-text-muted: #6a6a6a; } /* * Le thème (theme.json) impose un margin-block-start de 1.2rem à chaque * bloc de premier niveau (via une règle :where(), donc de spécificité * nulle). Nos blocs de section gèrent déjà leur propre espacement en * padding : cet écart en plus est un artefact, pas un espacement voulu. */ .entry-content.is-layout-constrained > * { margin-block-start: 0; } /* * Même artefact, un niveau au-dessus cette fois : le thème pose aussi un * écart de 1.2rem entre les enfants directs de .wp-site-blocks (header, * main, footer). On ne touche pas à margin-block-end (0, déjà correct). */ .wp-site-blocks > * { margin-block-start: 0; } /* * En-tête de section partagé (chirripo_render_section_header()) et lien * de pied de bloc (chirripo_render_section_footer_cta()), utilisés par * plusieurs blocs (projets, carrousel de logos...). */ .section-header { max-width: 640px; margin: 0 auto var(--chirripo-space-lg, 3rem); text-align: center; } /* * Pré-titre / titre / sous-titre : classes partagées par tous les blocs * de section (Intro, CTA, Expertises, Équipe, Footer, Grille de projets, * Projets-Home, Carrousel de logos...). Chaque bloc n'a plus à redéclarer * la police / taille / interlignage / graisse : uniquement sa propre * classe pour la couleur (et d'éventuelles variations de contenu, comme * les majuscules d'Expertises), quand elle diffère de la couleur héritée * de la section. */ .section-header__label { margin: 0 0 0.5em; font-family: var(--chirripo-font-body, sans-serif); font-size: 28px; font-weight: 400; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; } .section-header__title { margin: 0 0 0.15em; font-family: var(--chirripo-font-display, serif); font-size: 64px; font-weight: 300; line-height: 1.2; letter-spacing: 0; } @media (max-width: 600px) { .section-header__label { font-size: 1.1rem; } .section-header__title { font-size: 2.5rem; } } .section-header__subtitle { margin: 0; font-family: var(--chirripo-font-body, sans-serif); font-size: 16px; font-weight: 300; line-height: 1.5; } .section-footer-cta { text-align: center; margin-top: var(--chirripo-space-lg, 3rem); } .section-footer-cta__link { display: inline-block; padding: 0.7em 1.6em; border-radius: 999px; background: var(--chirripo-color-accent, #B6B6FB); color: #111; text-decoration: none; font-family: var(--chirripo-font-body, sans-serif); font-size: 16px; font-weight: 500; text-transform: uppercase; } /* * Survol des boutons CTA (pastille violette) : couleur pleine selon le * fond de la section plutôt qu'un simple fondu en opacité. Sur fond * sombre → pastille lavande claire, texte noir ; sur fond clair → pastille * noire, texte clair. Règle partagée par tous les boutons CTA du site * (chacun garde son propre déclencheur, seule la couleur au survol change * ici et gagne sur le opacity/transition local par spécificité). */ .has-bg-dark .hero__reveal-cta:hover, .has-bg-dark .title-reveal__cta:hover, .has-bg-dark .text-image__cta:hover, .has-bg-dark .site-footer__cta-button:hover, .has-bg-dark .section-footer-cta__link:hover, .has-bg-dark .clients-list__load-more-button:hover, .section-footer-cta__link:hover { background: #CFDAFC; color: #0D0D0D; opacity: 1; } .has-bg-light .hero__reveal-cta:hover, .has-bg-light .title-reveal__cta:hover, .has-bg-light .text-image__cta:hover, .has-bg-light .site-footer__cta-button:hover, .has-bg-light .section-footer-cta__link:hover, .has-bg-light .clients-list__load-more-button:hover { background: #0D0D0D; color: #F5F5F5; opacity: 1; } /* Portfolio : template PHP classique, pas de classe has-bg-* — le contexte (clair) est fixe, donc réglé directement plutôt que scopé. */ .portfolio__load-more-button:hover { background: #0D0D0D; color: #F5F5F5; opacity: 1; }