/* ============================================================ POLICES DU SITE — fichier centralisé Pour changer la police d'une page (titres ou corps de texte), il suffit de modifier UNIQUEMENT ce fichier, section par section. Chaque page a sa classe sur : Ce fichier charge AUSSI les polices Google Fonts lui-même (voir @import ci-dessous) : plus besoin d'ajouter une balise Google Fonts séparée sur chaque page. Si tu ajoutes une nouvelle police plus bas, pense à l'ajouter aussi dans la ligne @import pour qu'elle soit effectivement chargée. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Prata&family=Montserrat:wght@400;700&family=Acme&family=Caveat+Brush&family=Playfair+Display:wght@700&display=swap'); /* ============================================================ FOOTER PARTAGÉ (toutes les pages) Contrairement aux sections ci-dessus (préfixées body.pg-xxx), le footer est injecté à l'identique sur toutes les pages : ces règles s'appliquent donc partout, sans préfixe de page. Elles sont toutes préfixées par #main-footer (un ID) pour garantir qu'elles gagnent toujours face à une règle générique d'une page (ex: body.pg-closeup p), même si celle-ci utilise une classe : un ID est toujours plus fort qu'une classe en CSS. ============================================================ */ #main-footer { font-family: 'Montserrat', sans-serif; } /* Colonnes de liens */ #main-footer .footer-col h3 { font-size: 18px; } #main-footer .footer-col p { font-size: 14px; line-height: 1.6; } #main-footer .footer-col a { font-size: 15px; } /* Bas de page */ #main-footer .footer-bottom { font-size: 13px; } #main-footer .footer-top { font-size: 13px; } #main-footer .footer-coordonnees { font-size: 14px; } /* Carrousel d'avis Google */ #main-footer .footer-avis-title { font-size: clamp(22px, 3.5vw, 36px); } #main-footer .footer-stars { font-size: 20px; } #main-footer .footer-note { font-size: 17px; } #main-footer .footer-total { font-size: 14px; } #main-footer .footer-avatar { font-size: 18px; } #main-footer .footer-card-name { font-size: 15px; } #main-footer .footer-card-date { font-size: 12px; } #main-footer .footer-card-stars { font-size: 18px; } #main-footer .footer-card-text { font-size: 14px; line-height: 1.7; } #main-footer .footer-google-badge { font-size: 11px; } #main-footer .footer-nav-btn { font-size: 16px; } #main-footer .footer-voir-tous { font-size: 14px; } /* ============================================================ MENU (toutes les pages) Le menu est injecté à l'identique sur toutes les pages : ces règles s'appliquent partout, sans préfixe de page. Le bouton du menu (.cta) reste piloté par styles/buttons.css. ============================================================ */ #main-nav { font-size: 16px; font-family: 'Montserrat', sans-serif !important; } body.pg-closeup { font-family: 'Work Sans', sans-serif; } body.pg-closeup h1, body.pg-closeup h2 { font-family: 'Prata', serif; } /* ---- Tailles : Magie Close-Up (closeup.html) ---- */ body.pg-closeup { font-size: 20px; } body.pg-closeup h1, body.pg-closeup h2 { font-size: 58px; line-height: 70px; } body.pg-closeup h1 { font-size: 60px; line-height: 82px; } body.pg-closeup p { font-size: 20px; line-height: 32px; } body.pg-closeup li { line-height: 27px; } body.pg-closeup footer { font-size: 18px; } body.pg-closeup .section-intro p { font-size: 22px; line-height: 31px; } @media (max-width: 800px) { body.pg-closeup h1 { font-size: 42px; line-height: 74px; } body.pg-closeup h2 { font-size: 40px; line-height: 45px; } body.pg-closeup p, body.pg-closeup li { font-size: 19px; line-height: 27px; } body.pg-closeup .section-intro p { font-size: 19px; line-height: 27px; } body.pg-closeup footer { font-size: 16px; } } /* ---- Accueil (index.html) ---- */ body.pg-index { font-family: 'Montserrat', sans-serif; } body.pg-index .hero-title, body.pg-index .hero-subtitle, body.pg-index .hero-mobile-title, body.pg-index .signature { font-family: 'Acme', sans-serif; } /* ---- Tailles : Accueil (index.html) ---- */ body.pg-index { line-height: 1.6; } body.pg-index .hero-title { font-size: 53px; line-height: 54px; } body.pg-index .hero-subtitle { font-size: 26px; } body.pg-index .hero-mobile-title { font-size: 53px; line-height: 54px; } body.pg-index .hero-mobile-region { font-size: 20px; } body.pg-index .hero-mobile-phone { font-size: 24px; } body.pg-index .description-text { font-size: 20px; line-height: 26px; } body.pg-index .signature { font-size: 20px; } body.pg-index .signature p { line-height: 1.4; } body.pg-index .click-prompt { font-size: 20px; } body.pg-index .contact-info { font-size: 19px; line-height: 27px; } body.pg-index .desktop-animations-prompt { font-size: 26px; line-height: 36px; } body.pg-index .mobile-animations-text { font-size: 22px; line-height: 30px; } @media (max-width: 800px) { body.pg-index .mobile-only .description-text { font-size: 20px; line-height: 28px; } body.pg-index .description-text { font-size: 23px; line-height: 30px; } body.pg-index .click-prompt { font-size: 25px; line-height: 33px; } body.pg-index .signature { font-size: 16px; line-height: 21px; } } /* ---- Anniversaire Enfant (paae.html) ---- */ /* NB : les polices Acme/Montserrat sont chargées sur cette page mais pas utilisées : le CSS d'origine impose Segoe UI (police système) partout. Je garde ce comportement à l'identique pour ne rien changer visuellement. */ body.pg-paae { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* ---- Tailles : Anniversaire Enfant (paae.html) ---- */ body.pg-paae .hero-title { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; } body.pg-paae .description { font-size: clamp(1.1rem, 2.5vw, 1.5rem); line-height: 1.6; } body.pg-paae .reviewer-name { font-size: 1.2rem; } body.pg-paae .stars { font-size: 1.2rem; } body.pg-paae .review-text { font-size: 1.05rem; line-height: 1.7; } body.pg-paae .google-link { font-size: 0.95rem; } body.pg-paae .avis-google-label { font-size: 0.9rem; } /* ---- AbracadaShow (abracadashow.html) ---- */ body.pg-abracadashow { font-family: 'Montserrat', sans-serif; } body.pg-abracadashow .hero-title, body.pg-abracadashow .presentation-text { font-family: 'Acme', sans-serif; } body.pg-abracadashow .section-title { font-family: 'Montserrat', sans-serif; } body.pg-abracadashow .temoignage-quote { font-family: 'Caveat Brush', cursive; } /* ---- Tailles : AbracadaShow (abracadashow.html) ---- */ body.pg-abracadashow { line-height: 1.8; } body.pg-abracadashow .hero-title { font-size: 53px; line-height: 1.3; } body.pg-abracadashow .section-title { font-size: 58px; line-height: 1.3; } body.pg-abracadashow .intro-hello { font-size: 44px; line-height: 1.4; } body.pg-abracadashow .intro-text { font-size: 26px; line-height: 1.6; } body.pg-abracadashow .searching-text { font-size: 44px; line-height: 1.4; } body.pg-abracadashow .advantages-list li { font-size: 26px; line-height: 1.6; } body.pg-abracadashow .advantages-list li i { font-size: 20px; } body.pg-abracadashow .transition-title { font-size: 44px; line-height: 1.4; } body.pg-abracadashow .presentation-text { font-size: 45px; line-height: 1.4; } body.pg-abracadashow .presentation-bio { font-size: 25px; line-height: 1.6; } body.pg-abracadashow .audience-text { font-size: 26px; line-height: 1.8; } body.pg-abracadashow .levels-text { font-size: 26px; line-height: 1.8; } body.pg-abracadashow .temoignage-quote { font-size: 40px; line-height: 1.3; } body.pg-abracadashow .temoignage-author { font-size: 18px; line-height: 1.6; } body.pg-abracadashow .temoignage-role { font-size: 18px; line-height: 1.6; } body.pg-abracadashow .technical-label { font-size: 26px; line-height: 1.4; } body.pg-abracadashow .technical-value { font-size: 26px; line-height: 1.4; } body.pg-abracadashow .footer-text { font-size: 14px; line-height: 1.4; } @media (max-width: 800px) { body.pg-abracadashow .hero-title { font-size: 42px; line-height: 1.25; } body.pg-abracadashow .intro-hello { font-size: 36px; line-height: 1.35; } body.pg-abracadashow .intro-text { font-size: 22px; line-height: 1.55; } body.pg-abracadashow .searching-text { font-size: 22px; line-height: 1.35; } body.pg-abracadashow .advantages-list li { font-size: 18px; line-height: 1.5; } body.pg-abracadashow .advantages-list li i { font-size: 18px; } body.pg-abracadashow .transition-title { font-size: 24px; line-height: 1.4; } body.pg-abracadashow .presentation-text { font-size: 26px; line-height: 1.35; } body.pg-abracadashow .presentation-bio { font-size: 17px; line-height: 1.6; } body.pg-abracadashow .section-title { font-size: 28px; line-height: 1.35; } body.pg-abracadashow .audience-text, body.pg-abracadashow .levels-text { font-size: 18px; line-height: 1.6; } body.pg-abracadashow .temoignage-quote { font-size: 24px; line-height: 1.3; } body.pg-abracadashow .temoignage-author { font-size: 16px; } body.pg-abracadashow .temoignage-role { font-size: 15px; } body.pg-abracadashow .technical-label { font-size: 20px; } body.pg-abracadashow .technical-value { font-size: 18px; } body.pg-abracadashow .footer-text { font-size: 12px; line-height: 1.5; } } @media (max-width: 380px) { body.pg-abracadashow .hero-title { font-size: 22px; } body.pg-abracadashow .section-title { font-size: 22px; } body.pg-abracadashow .intro-hello, body.pg-abracadashow .searching-text { font-size: 20px; } body.pg-abracadashow .intro-text { font-size: 16px; } body.pg-abracadashow .advantages-list li { font-size: 16px; } body.pg-abracadashow .presentation-text { font-size: 22px; } body.pg-abracadashow .presentation-bio { font-size: 15px; } body.pg-abracadashow .temoignage-quote { font-size: 21px; } body.pg-abracadashow .transition-title { font-size: 20px; } } /* ---- Zones d'intervention (zones-intervention.html) ---- */ body.pg-zones { font-family: 'Montserrat', sans-serif; } body.pg-zones .hero-title { font-size: 60px; line-height: 65px; } body.pg-zones .hero-subtitle { font-size: 40px; line-height: 50px; } /* ---- Rendez-vous Close-Up (rdv-closeup.html) ---- */ /* Page "tunnel" sans menu ni footer commun (volontaire) */ body.pg-rdv-closeup { font-family: 'Work Sans', sans-serif; } body.pg-rdv-closeup h1, body.pg-rdv-closeup .card-title, body.pg-rdv-closeup .btn-cta-rdv, body.pg-rdv-closeup .ou-separateur { font-family: 'Prata', serif; } /* ---- Tailles : Rendez-vous Close-Up ---- */ body.pg-rdv-closeup h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.3; } body.pg-rdv-closeup .sous-titre { font-size: 1.05rem; } body.pg-rdv-closeup .card-title { font-size: 1.15rem; } body.pg-rdv-closeup .card p { font-size: 1.03rem; line-height: 1.78; } body.pg-rdv-closeup .encart { font-size: 1rem; line-height: 1.7; } body.pg-rdv-closeup .contexte-item { font-size: .95rem; } body.pg-rdv-closeup .btn-cta-rdv { font-size: 1.05rem; } body.pg-rdv-closeup .num { font-size: 1.35rem; } body.pg-rdv-closeup .sub { font-size: .88rem; } body.pg-rdv-closeup .checklist li { font-size: 1.02rem; line-height: 1.6; } body.pg-rdv-closeup .pill { font-size: .92rem; } body.pg-rdv-closeup .footer { font-size: .85rem; } /* ---- À propos (apropos.html) ---- */ body.pg-apropos { font-family: 'Montserrat', sans-serif; } /* ---- Tailles : À propos (apropos.html) ---- */ body.pg-apropos { font-size: 20px; } body.pg-apropos h1 { font-size: 60px; line-height: 65px; } body.pg-apropos .hero-subtitle { font-size: 40px; line-height: 50px; } body.pg-apropos h2 { font-size: 36px; line-height: 1.3; } body.pg-apropos p { font-size: 20px; line-height: 34px; } body.pg-apropos .stat-number { font-size: 48px; line-height: 1; } body.pg-apropos .stat-number-compact { font-size: 36px; } body.pg-apropos .stat-label { font-size: 14px; line-height: 1.4; } body.pg-apropos .citation { font-size: 22px; line-height: 1.6; } body.pg-apropos .citation .auteur { font-size: 16px; } body.pg-apropos .resume-table { font-size: 18px; } body.pg-apropos .philosophie-box { font-size: 22px; line-height: 1.6; } body.pg-apropos footer { font-size: 18px; } @media (max-width: 800px) { body.pg-apropos h1 { font-size: 36px; line-height: 44px; } body.pg-apropos h2 { font-size: 26px; } body.pg-apropos .stat-number { font-size: 36px; } body.pg-apropos .resume-table { font-size: 15px; } body.pg-apropos .citation { font-size: 18px; } body.pg-apropos .philosophie-box { font-size: 18px; } } /* ---- Pages SEO locales (magicien-nimes.html, magicien-montpellier.html, magicien-ales.html, magicien-avignon.html, magicien-mariage-nimes.html, magicien-mariage-montpellier.html) ---- */ body.pg-seolocal { font-family: 'Montserrat', sans-serif; } body.pg-seolocal h1, body.pg-seolocal h2, body.pg-seolocal h3, body.pg-seolocal h4, body.pg-seolocal .sl-phone, body.pg-seolocal .sl-card-label { font-family: 'Playfair Display', serif; } /* ---- Tailles : Pages SEO locales ---- */ body.pg-seolocal .sl-hero h1 { font-size: 50px; line-height: 1.1; } body.pg-seolocal .sl-sub { font-size: 21px; line-height: 1.5; } body.pg-seolocal .sl-phone { font-size: 30px; } body.pg-seolocal .sl-section h2 { font-size: 33px; } body.pg-seolocal .sl-lead { font-size: 19px; line-height: 1.7; } body.pg-seolocal .sl-text { font-size: 18px; line-height: 1.7; } body.pg-seolocal .sl-card-label { font-size: 23px; } body.pg-seolocal .sl-card-desc { font-size: 15px; line-height: 1.5; } body.pg-seolocal .sl-zones h3 { font-size: 25px; } body.pg-seolocal .sl-communes span { font-size: 14px; } body.pg-seolocal .sl-atout .sl-ico { font-size: 34px; } body.pg-seolocal .sl-atout h4 { font-size: 20px; } body.pg-seolocal .sl-atout p { font-size: 15px; line-height: 1.5; } body.pg-seolocal .sl-quote p { font-size: 18px; line-height: 1.6; } body.pg-seolocal .sl-quote .sl-quote-author { font-size: 15px; } body.pg-seolocal .sl-faq-item h4 { font-size: 18px; } body.pg-seolocal .sl-faq-item h4 span.arrow { font-size: 20px; } body.pg-seolocal .sl-faq-item p { font-size: 16px; line-height: 1.6; } body.pg-seolocal .sl-faq-answer p { font-size: 16px; line-height: 1.6; } body.pg-seolocal .sl-cta-band h2 { font-size: 31px; } body.pg-seolocal .sl-cta-band p { font-size: 18px; } @media (max-width: 800px) { body.pg-seolocal .sl-hero h1 { font-size: 38px; } body.pg-seolocal .sl-sub { font-size: 19px; } body.pg-seolocal .sl-phone { font-size: 26px; } body.pg-seolocal .sl-section h2 { font-size: 27px; } }