/* * 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: 5rem; --chirripo-container-width: 88%; } /* * 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; } :focus { outline: 0px solid transparent; } video { border-radius: 10px; } /* * 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; } .wp-block-video { max-width: 80%; margin: auto; padding: var(--chirripo-space-lg, 3rem) 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.1em; font-family: var(--chirripo-font-body, sans-serif); font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; } .section-header__title { margin: 0 0 0.15em; font-family: var(--chirripo-font-display, serif); font-size: 72px; font-weight: 300; line-height: 1.1; letter-spacing: 2%; } .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); } /* * Bouton CTA "pastille" centralisé — remplace les déclarations dupliquées * qui vivaient dans chaque bloc (hero__reveal-cta, title-reveal__cta, * text-image__cta, site-footer__cta-button, section-footer-cta__link, * expertises__cta, team__cta, clients-list__load-more-button, * portfolio__load-more-button). Chacun garde sa classe spécifique pour ses * seuls écarts réels (margin-top, white-space...), en plus de .btn-pill * pour la forme commune. Marche aussi bien sur que sur