/* Theme Name: SIN Habitat Theme URI: https://sin-habitat.vercel.app Author: Adam Spilmann Description: Thème bloc sur mesure pour SIN Habitat (nettoyage et remise en état après sinistre en Île-de-France). Toutes les pages sont éditables dans Gutenberg. À l'activation, le thème crée les 8 pages du site (accueil, 6 pages service, contact). Version: 1.0.2 Requires at least: 6.6 Tested up to: 6.9 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: sin-habitat Tags: block-theme, full-site-editing, custom-colors, one-column */ /* ========================================================================== SIN Habitat : feuille de style unique du thème. Le site d'origine avait 3 feuilles différentes (accueil, service, contact) : chacune est cantonnée à une classe de posée par functions.php (.sinh-accueil, .sinh-service, .sinh-contact). ========================================================================== */ /* --- Bases : neutralise ce que WordPress ajoute autour des blocs --- */ figure.wp-block-image { margin: 0; } /* le modèle d'en-tête n'a pas de boîte propre : la barre du haut défile, l'en-tête reste collé */ div.wp-block-template-part { display: contents; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0; } .wp-block-button { margin: 0; } .wp-block-button .wp-block-button__link { text-decoration: none; box-shadow: none; font-size: inherit; line-height: normal; border-radius: 0; cursor: pointer; } /* --- Images du contenu : elles remplissent leur cadre (ancien arrière-plan CSS "center/cover") --- */ .sinh-cover img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } figure.sinh-bg.sinh-bg { position: absolute; inset: 0; z-index: 0; } /* --- Formulaire --- */ .sinh-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-message { grid-column: 1 / -1; margin: 0; padding: 12px 14px; font-size: 14px; line-height: 1.5; } .form-message.is-ok { background: #e8f5ec; color: #14532d; } .form-message.is-erreur { background: #fdecec; color: #7f1d1d; } /* --- Barre d'administration WordPress : l'en-tête collé se décale --- */ .admin-bar .header-bar { top: 32px; } @media (max-width: 782px) { .admin-bar .header-bar { top: 46px; } } /* --- Paragraphes issus d'anciens /
/ : ils héritent du contexte, comme avant --- */ :where(.sinh-accueil, .sinh-service, .sinh-contact) :where(.sinh-span, .sinh-strong, .sinh-small, .sinh-lien, .sinh-texte) { font-size: inherit; line-height: inherit; color: inherit; } /* ========================================================================== Type de page : accueil (.sinh-accueil.sinh-accueil) ========================================================================== */ /* marges par défaut restaurées (Gutenberg les met à zéro) */ .sinh-accueil.sinh-accueil h1 { margin-block: 0.67em; } .sinh-accueil.sinh-accueil h2 { margin-block: 0.83em; } .sinh-accueil.sinh-accueil h3 { margin-block: 1em; } .sinh-accueil.sinh-accueil h4 { margin-block: 1.33em; } .sinh-accueil.sinh-accueil p { margin-block: 1em; } .sinh-accueil.sinh-accueil p:where(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro) { margin-block: 0; } .sinh-accueil.sinh-accueil .sinh-strong { font-weight: bolder; } .sinh-accueil.sinh-accueil .sinh-small { font-size: smaller; } .sinh-accueil.sinh-accueil em { font-style: normal; } .sinh-accueil.sinh-accueil { --navy: #071f38; --navy-2: #0d2d4d; --blue: #164b78; --red: #e63336; --ice: #edf3f7; --paper: #f8fafb; --white: #fff; --ink: #0b2138; --muted: #111820; --line: #d9e1e7; --max: 1240px; } .sinh-accueil.sinh-accueil, .sinh-accueil.sinh-accueil * { box-sizing: border-box; } html { scroll-behavior: smooth; } .sinh-accueil.sinh-accueil { margin: 0; background: #fff; color: var(--ink); font-family: "DM Sans",sans-serif; -webkit-font-smoothing: antialiased; } .sinh-accueil.sinh-accueil.menu-open { overflow: hidden; } .sinh-accueil.sinh-accueil img { display: block; max-width: 100%; } .sinh-accueil.sinh-accueil a { color: inherit; text-decoration: none; } .sinh-accueil.sinh-accueil button { font: inherit; } .sinh-accueil.sinh-accueil .container { width: min(var(--max),calc(100% - 64px)); margin: auto; } .sinh-accueil.sinh-accueil .section { padding: 108px 0; } .sinh-accueil.sinh-accueil .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--blue); font: 700 12px/1 "Manrope"; letter-spacing: .13em; text-transform: uppercase; } .sinh-accueil.sinh-accueil .eyebrow:before { content: ""; width: 28px; height: 2px; background: var(--red); } .sinh-accueil.sinh-accueil h1, .sinh-accueil.sinh-accueil h2, .sinh-accueil.sinh-accueil h3, .sinh-accueil.sinh-accueil p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { margin-top: 0; } .sinh-accueil.sinh-accueil h1, .sinh-accueil.sinh-accueil h2, .sinh-accueil.sinh-accueil h3 { font-family: "Manrope",sans-serif; } .sinh-accueil.sinh-accueil h1 { max-width: 650px; margin-bottom: 25px; font-size: clamp(40px,4.2vw,62px); line-height: 1.04; letter-spacing: -.048em; } .sinh-accueil.sinh-accueil h1 em { white-space: normal; } .sinh-accueil.sinh-accueil h2 { margin-bottom: 22px; font-size: clamp(36px,4vw,56px); line-height: 1.05; letter-spacing: -.045em; } .sinh-accueil.sinh-accueil h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.025em; } .sinh-accueil.sinh-accueil p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { font-size: 16px; line-height: 1.72; color: var(--muted); } .sinh-accueil.sinh-accueil em { position: relative; white-space: nowrap; } .sinh-accueil.sinh-accueil em:after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: var(--red); } .sinh-accueil.sinh-accueil .wp-block-button.btn .wp-block-button__link, .sinh-accueil.sinh-accueil button.btn { display: inline-flex; min-height: 54px; padding: 0 24px; align-items: center; justify-content: center; gap: 13px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: 700 13px "Manrope"; transition: .2s ease; } .sinh-accueil.sinh-accueil .wp-block-button.btn .wp-block-button__link:after, .sinh-accueil.sinh-accueil button.btn:after { content: "→"; font-size: 17px; } .sinh-accueil.sinh-accueil .wp-block-button.btn .wp-block-button__link:hover, .sinh-accueil.sinh-accueil button.btn:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); } .sinh-accueil.sinh-accueil .wp-block-button.btn.light .wp-block-button__link, .sinh-accueil.sinh-accueil button.btn.light { border-color: #fff; background: #fff; color: var(--navy); } .sinh-accueil.sinh-accueil .wp-block-button.btn.outline-light .wp-block-button__link, .sinh-accueil.sinh-accueil button.btn.outline-light { border-color: rgba(255,255,255,.52); background: transparent; color: #fff; } .sinh-accueil.sinh-accueil .wp-block-button.btn.outline-light .wp-block-button__link:hover, .sinh-accueil.sinh-accueil button.btn.outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; } .sinh-accueil.sinh-accueil .wp-block-button.btn.outline .wp-block-button__link, .sinh-accueil.sinh-accueil button.btn.outline { border-color: #b8c4ce; background: transparent; color: var(--navy); } .sinh-accueil.sinh-accueil .topbar { background: var(--navy); color: #d8e3eb; font-size: 12px; } .sinh-accueil.sinh-accueil .topbar-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; } .sinh-accueil.sinh-accueil .topbar strong { color: #fff; } .sinh-accueil.sinh-accueil .topbar-zone { display: flex; align-items: center; gap: 9px; } .sinh-accueil.sinh-accueil .topbar-zone:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); } .sinh-accueil.sinh-accueil .header-bar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(7,31,56,.09); backdrop-filter: blur(12px); } .sinh-accueil.sinh-accueil .nav { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .sinh-accueil.sinh-accueil .logo img { width: 144px; height: auto; } .sinh-accueil.sinh-accueil nav.nav-links { display: flex; align-items: center; gap: 29px; margin-left: auto; font: 600 13px "Manrope"; } .sinh-accueil.sinh-accueil nav.nav-links .wp-block-navigation-item__content { position: relative; padding: 9px 0; } .sinh-accueil.sinh-accueil nav.nav-links .wp-block-navigation-item__content:after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px; background: var(--red); transition: .2s; } .sinh-accueil.sinh-accueil nav.nav-links .wp-block-navigation-item__content:hover:after { width: 100%; } .sinh-accueil.sinh-accueil .wp-block-button.nav-cta .wp-block-button__link { min-height: 48px; padding: 0 20px; } .sinh-accueil.sinh-accueil .burger { display: none; border: 0; background: none; width: 42px; height: 42px; padding: 10px; } .sinh-accueil.sinh-accueil .burger .sinh-span { display: block; height: 2px; margin: 5px 0; background: var(--navy); } .sinh-accueil.sinh-accueil .hero { position: relative; min-height: 680px; display: grid; grid-template-columns: 54% 46%; background: var(--paper); overflow: hidden; } .sinh-accueil.sinh-accueil .hero-copy { display: flex; align-items: center; } .sinh-accueil.sinh-accueil .hero-copy-inner { width: min(680px,calc(100% - 64px)); margin-left: max(32px,calc((100vw - var(--max))/2)); padding: 75px 34px 75px 0; } .sinh-accueil.sinh-accueil .hero-copy p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 650px; margin-bottom: 34px; font-size: 17px; } .sinh-accueil.sinh-accueil .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .sinh-accueil.sinh-accueil .hero-image { position: relative; min-height: 680px; } .sinh-accueil.sinh-accueil .hero-image:after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 92px 92px; border-color: transparent transparent var(--red) transparent; opacity: .9; } .sinh-accueil.sinh-accueil .hero-note { position: absolute; left: -55px; bottom: 45px; width: 220px; padding: 25px 27px; background: var(--navy); color: #fff; box-shadow: 0 24px 50px rgba(7,31,56,.22); } .sinh-accueil.sinh-accueil .hero-note .sinh-strong { display: block; margin-bottom: 8px; font: 700 17px/1.3 "Manrope"; } .sinh-accueil.sinh-accueil .hero-note .sinh-span { font-size: 12px; line-height: 1.5; color: #cddae4; } .sinh-accueil.sinh-accueil .trustbar { background: #fff; border-bottom: 1px solid var(--line); } .sinh-accueil.sinh-accueil .trust-grid { min-height: 108px; display: grid; grid-template-columns: 1.15fr repeat(3,1fr); align-items: center; } .sinh-accueil.sinh-accueil .trust-intro { font: 700 13px/1.45 "Manrope"; color: var(--navy); padding-right: 35px; } .sinh-accueil.sinh-accueil .trust-item { display: flex; align-items: center; gap: 14px; padding: 0 26px; border-left: 1px solid var(--line); font: 600 13px/1.4 "Manrope"; } .sinh-accueil.sinh-accueil .trust-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--ice); color: var(--blue); font-size: 18px; } .sinh-accueil.sinh-accueil .intro-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 100px; align-items: center; } .sinh-accueil.sinh-accueil .intro-copy p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 530px; } .sinh-accueil.sinh-accueil .intro-copy .wp-block-button.btn .wp-block-button__link, .sinh-accueil.sinh-accueil .intro-copy button.btn { margin-top: 14px; } .sinh-accueil.sinh-accueil .intro-visual { position: relative; height: 610px; } .sinh-accueil.sinh-accueil .intro-main { position: absolute; inset: 0 16% 0 0; } .sinh-accueil.sinh-accueil .intro-small { position: absolute; right: 0; bottom: 38px; width: 42%; height: 290px; border: 10px solid #fff; } .sinh-accueil.sinh-accueil .intro-label { position: absolute; left: -42px; bottom: 45px; width: 190px; padding: 23px; background: var(--navy); color: #fff; font: 700 15px/1.45 "Manrope"; } .sinh-accueil.sinh-accueil .intro-label:before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 3px; background: var(--red); } .sinh-accueil.sinh-accueil .services { background: var(--ice); } .sinh-accueil.sinh-accueil .section-head { max-width: 800px; margin: 0 auto 50px; text-align: center; } .sinh-accueil.sinh-accueil .section-head .eyebrow { justify-content: center; } .sinh-accueil.sinh-accueil .section-head p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 760px; margin: 0 auto; } .sinh-accueil.sinh-accueil .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .sinh-accueil.sinh-accueil .service-card { position: relative; min-height: 420px; display: flex; align-items: flex-end; padding: 30px; overflow: hidden; background: var(--navy); color: #fff; } .sinh-accueil.sinh-accueil .service-card:before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(4,24,42,.94) 2%,rgba(4,24,42,.18) 70%); z-index: 1; } .sinh-accueil.sinh-accueil .service-card:after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 0 34px 34px; border-color: transparent transparent rgba(230,51,54,.92) transparent; z-index: 2; } .sinh-accueil.sinh-accueil .service-card .bg { position: absolute; inset: 0; background-position: center; background-size: cover; transition: .45s; } .sinh-accueil.sinh-accueil .service-card:hover .bg { transform: scale(1.035); } .sinh-accueil.sinh-accueil .service-content { position: relative; z-index: 3; } .sinh-accueil.sinh-accueil .service-num { display: block; margin-bottom: 54px; color: #fff; font: 600 12px "Manrope"; letter-spacing: .15em; } .sinh-accueil.sinh-accueil .service-card h3 { max-width: 270px; margin-bottom: 13px; font-size: 25px; } .sinh-accueil.sinh-accueil .service-card p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { margin: 0 0 18px; color: #d7e1e9; font-size: 14px; line-height: 1.55; } .sinh-accueil.sinh-accueil .service-link { font: 700 12px "Manrope"; text-transform: uppercase; letter-spacing: .08em; } .sinh-accueil.sinh-accueil .service-link .sinh-span { color: #ff5d5f; margin-left: 8px; } .sinh-accueil.sinh-accueil .process-grid { display: grid; grid-template-columns: 42% 58%; gap: 80px; align-items: start; } .sinh-accueil.sinh-accueil .process-copy { position: sticky; top: 150px; } .sinh-accueil.sinh-accueil .process-copy p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 470px; } .sinh-accueil.sinh-accueil .process-list { counter-reset: steps; } .sinh-accueil.sinh-accueil .step { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 24px; padding: 4px 0 38px; } .sinh-accueil.sinh-accueil .step:not(:last-child):after { content: ""; position: absolute; left: 25px; top: 51px; bottom: 5px; width: 1px; background: #cdd7df; } .sinh-accueil.sinh-accueil .step-num { position: relative; z-index: 1; width: 52px; height: 52px; border: 1px solid #b9c7d1; background: #fff; display: grid; place-items: center; color: var(--blue); font: 700 14px "Manrope"; } .sinh-accueil.sinh-accueil .step h3 { margin: 2px 0 8px; } .sinh-accueil.sinh-accueil .step p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { margin: 0; font-size: 14px; } .sinh-accueil.sinh-accueil .audiences { padding: 95px 0; background: var(--navy); color: #fff; } .sinh-accueil.sinh-accueil .audience-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; align-items: center; } .sinh-accueil.sinh-accueil .audiences .eyebrow { color: #dbe7ef; } .sinh-accueil.sinh-accueil .audiences h2 { color: #fff; } .sinh-accueil.sinh-accueil .audiences p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { color: #bdcbd6; } .sinh-accueil.sinh-accueil .audience-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); } .sinh-accueil.sinh-accueil .audience-item { min-height: 132px; padding: 27px; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); } .sinh-accueil.sinh-accueil .audience-item .sinh-strong { display: block; margin-bottom: 8px; font: 700 16px "Manrope"; } .sinh-accueil.sinh-accueil .audience-item .sinh-span { color: #aebfcb; font-size: 13px; line-height: 1.5; } .sinh-accueil.sinh-accueil .zones { text-align: center; } .sinh-accueil.sinh-accueil .zones h2 { max-width: 790px; margin-left: auto; margin-right: auto; } .sinh-accueil.sinh-accueil .zone-list { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 34px; } .sinh-accueil.sinh-accueil .zone-list .sinh-span { padding: 13px 17px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 600; } .sinh-accueil.sinh-accueil .zones .wp-block-button.btn .wp-block-button__link, .sinh-accueil.sinh-accueil .zones button.btn { margin-top: 34px; } .sinh-accueil.sinh-accueil .faq { background: var(--paper); } .sinh-accueil.sinh-accueil .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; } .sinh-accueil.sinh-accueil .faq-copy p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 420px; } .sinh-accueil.sinh-accueil .faq-list details { border-top: 1px solid var(--line); } .sinh-accueil.sinh-accueil .faq-list details:last-child { border-bottom: 1px solid var(--line); } .sinh-accueil.sinh-accueil .faq-list summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; gap: 20px; font: 700 15px "Manrope"; } .sinh-accueil.sinh-accueil .faq-list summary::-webkit-details-marker { display: none; } .sinh-accueil.sinh-accueil .faq-list summary:after { content: "+"; font-size: 22px; font-weight: 400; color: var(--blue); } .sinh-accueil.sinh-accueil .faq-list details[open] summary:after { content: "−"; } .sinh-accueil.sinh-accueil .faq-answer { padding: 0 42px 23px 4px; color: var(--muted); font-size: 14px; line-height: 1.7; } .sinh-accueil.sinh-accueil .contact { position: relative; padding: 88px 0; color: #fff; } .sinh-accueil.sinh-accueil .contact-grid { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; } .sinh-accueil.sinh-accueil .contact .eyebrow { color: #dbe7ef; } .sinh-accueil.sinh-accueil .contact h2 { max-width: 800px; margin-bottom: 15px; color: #fff; } .sinh-accueil.sinh-accueil .contact p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 700px; margin: 0; color: #c7d4de; } .sinh-accueil.sinh-accueil .contact-actions { display: flex; flex-direction: column; gap: 10px; min-width: 240px; } .sinh-accueil.sinh-accueil .contact-actions .wp-block-button.btn .wp-block-button__link, .sinh-accueil.sinh-accueil .contact-actions button.btn { width: 100%; } .sinh-accueil.sinh-accueil .contact-actions .sinh-small { text-align: center; color: #aebdca; } .sinh-accueil.sinh-accueil .contact-accent { position: absolute; left: 0; top: 0; width: 72px; height: 4px; background: var(--red); } .sinh-accueil.sinh-accueil footer.wp-block-template-part { padding: 70px 0 24px; background: #041729; color: #fff; } .sinh-accueil.sinh-accueil .footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 70px; padding-bottom: 55px; } .sinh-accueil.sinh-accueil .footer-logo { width: 155px; margin-bottom: 20px; } .sinh-accueil.sinh-accueil .footer-intro p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { max-width: 330px; color: #9fb0be; font-size: 13px; } .sinh-accueil.sinh-accueil .footer-col h4 { margin: 0 0 18px; font: 700 13px "Manrope"; } .sinh-accueil.sinh-accueil .footer-col .sinh-lien, .sinh-accueil.sinh-accueil .footer-col p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { display: block; margin: 0 0 9px; color: #aebdca; font-size: 12px; line-height: 1.65; } .sinh-accueil.sinh-accueil .footer-col .sinh-lien:hover { color: #fff; } .sinh-accueil.sinh-accueil .footer-bottom { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 25px; color: #8194a4; font-size: 11px; } .sinh-accueil.sinh-accueil .footer-bottom-links { display: flex; gap: 24px; } @media (min-width:1021px) { .sinh-accueil.sinh-accueil .container { width: min(1280px,calc(100% - 24px)); } .sinh-accueil.sinh-accueil .hero-copy-inner { width: min(700px,calc(100% - 24px)); margin-left: max(12px,calc((100vw - 1280px)/2)); padding-right: 14px; } } @media (max-width:1020px) { .sinh-accueil.sinh-accueil nav.nav-links { display: none; } .sinh-accueil.sinh-accueil .burger { display: block; } .sinh-accueil.sinh-accueil .wp-block-button.nav-cta .wp-block-button__link { margin-left: auto; } .sinh-accueil.sinh-accueil .hero { grid-template-columns: 1fr; } .sinh-accueil.sinh-accueil .hero-copy-inner { width: min(var(--max),calc(100% - 64px)); margin: auto; } .sinh-accueil.sinh-accueil .hero-image { min-height: 520px; } .sinh-accueil.sinh-accueil .hero-note { left: 32px; } .sinh-accueil.sinh-accueil .trust-grid { grid-template-columns: 1fr 1fr; } .sinh-accueil.sinh-accueil .trust-intro { padding: 22px 0; grid-column: 1/-1; } .sinh-accueil.sinh-accueil .trust-item { min-height: 76px; } .sinh-accueil.sinh-accueil .intro-grid, .sinh-accueil.sinh-accueil .process-grid, .sinh-accueil.sinh-accueil .audience-grid, .sinh-accueil.sinh-accueil .faq-grid { gap: 55px; } .sinh-accueil.sinh-accueil .service-grid { grid-template-columns: 1fr 1fr; } .sinh-accueil.sinh-accueil .footer-grid { grid-template-columns: 1fr 1fr; } .sinh-accueil.sinh-accueil nav.nav-links.active { position: fixed; display: flex; inset: 125px 0 auto; background: #fff; flex-direction: column; align-items: flex-start; padding: 30px 32px; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(7,31,56,.12); } } @media (max-width:740px) { .sinh-accueil.sinh-accueil .container { width: calc(100% - 36px); } .sinh-accueil.sinh-accueil .topbar-inner { min-height: 34px; } .sinh-accueil.sinh-accueil .topbar-inner>.sinh-span:last-child { display: none; } .sinh-accueil.sinh-accueil .nav { height: 76px; } .sinh-accueil.sinh-accueil .logo img { width: 118px; } .sinh-accueil.sinh-accueil .wp-block-button.nav-cta .wp-block-button__link { display: none; } .sinh-accueil.sinh-accueil nav.nav-links.active { top: 110px; } .sinh-accueil.sinh-accueil .section { padding: 75px 0; } .sinh-accueil.sinh-accueil h1 { font-size: 38px; line-height: 1.08; } .sinh-accueil.sinh-accueil .hero { min-height: 0; } .sinh-accueil.sinh-accueil .hero-copy-inner { width: calc(100% - 36px); padding: 62px 0; } .sinh-accueil.sinh-accueil .hero-copy p:where(:not(.breadcrumb,.burger,.eyebrow,.faq-answer,.footer-bottom-links,.intro-label,.nav-phone,.problem-note,.reason-num,.reassurance-item,.service-icon,.service-link,.service-num,.sinh-lien,.sinh-small,.sinh-span,.sinh-strong,.sinh-texte,.step-num,.topbar-zone,.trust-icon,.trust-intro)) { font-size: 15px; } .sinh-accueil.sinh-accueil .hero-actions { display: grid; } .sinh-accueil.sinh-accueil .hero-image { min-height: 400px; } .sinh-accueil.sinh-accueil .hero-note { left: 18px; bottom: 18px; width: 205px; } .sinh-accueil.sinh-accueil .trust-grid { display: block; padding: 18px 0; } .sinh-accueil.sinh-accueil .trust-intro { padding: 12px 0 20px; } .sinh-accueil.sinh-accueil .trust-item { min-height: 68px; padding: 0; border-left: 0; border-top: 1px solid var(--line); } .sinh-accueil.sinh-accueil .intro-grid, .sinh-accueil.sinh-accueil .process-grid, .sinh-accueil.sinh-accueil .audience-grid, .sinh-accueil.sinh-accueil .faq-grid, .sinh-accueil.sinh-accueil .contact-grid { grid-template-columns: 1fr; } .sinh-accueil.sinh-accueil .intro-grid { gap: 45px; } .sinh-accueil.sinh-accueil .intro-visual { height: 455px; } .sinh-accueil.sinh-accueil .intro-main { right: 10%; } .sinh-accueil.sinh-accueil .intro-small { height: 205px; } .sinh-accueil.sinh-accueil .intro-label { left: -8px; bottom: 18px; } .sinh-accueil.sinh-accueil .service-grid { grid-template-columns: 1fr; } .sinh-accueil.sinh-accueil .service-card { min-height: 390px; } .sinh-accueil.sinh-accueil .process-grid { gap: 42px; } .sinh-accueil.sinh-accueil .process-copy { position: static; } .sinh-accueil.sinh-accueil .audience-grid { gap: 38px; } .sinh-accueil.sinh-accueil .audience-list { grid-template-columns: 1fr; } .sinh-accueil.sinh-accueil .contact-grid { gap: 35px; } .sinh-accueil.sinh-accueil .contact-actions { min-width: 0; } .sinh-accueil.sinh-accueil .footer-grid { grid-template-columns: 1fr; gap: 35px; } .sinh-accueil.sinh-accueil .footer-bottom { flex-direction: column; } .sinh-accueil.sinh-accueil .footer-bottom-links { flex-wrap: wrap; gap: 10px 18px; } .sinh-accueil.sinh-accueil em { white-space: normal; } } .sinh-accueil.sinh-accueil .hero .hero-title, .sinh-accueil.sinh-accueil .section-title { margin-top: 0; margin-bottom: 22px; font-family: "Manrope",sans-serif; font-size: clamp(36px,4vw,56px); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; } .sinh-accueil.sinh-accueil .hero .hero-title { max-width: 650px; margin-bottom: 25px; font-size: clamp(40px,4.2vw,62px); line-height: 1.04; letter-spacing: -.048em; overflow-wrap: break-word; } .sinh-accueil.sinh-accueil .hero .hero-title em { white-space: normal; } .sinh-accueil.sinh-accueil .section-head .section-title { margin-bottom: 22px; } .sinh-accueil.sinh-accueil .zones .section-title { max-width: 790px; margin-left: auto; margin-right: auto; } @media (max-width:740px) { .sinh-accueil.sinh-accueil .hero .hero-title { font-size: 38px; line-height: 1.08; } } /* pop-up de contact */ .sinh-accueil.sinh-accueil .cw { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: "DM Sans",sans-serif; } .sinh-accueil.sinh-accueil .cw-toggle { position: relative; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: #071f38; color: #fff; cursor: pointer; box-shadow: 0 12px 30px rgba(2,18,32,.32); transition: background .2s,transform .2s; } .sinh-accueil.sinh-accueil .cw-toggle:hover { background: #164b78; transform: translateY(-2px); } .sinh-accueil.sinh-accueil .cw-toggle svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sinh-accueil.sinh-accueil .cw-dot { position: absolute; right: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #22c55e; border: 2.5px solid #fff; } .sinh-accueil.sinh-accueil .cw-dot:after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; border: 2px solid #22c55e; animation: cw-pulse 2s ease-out infinite; } @keyframes cw-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}} .sinh-accueil.sinh-accueil .cw-status { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #15803d; font: 700 12px "Manrope",sans-serif; } .sinh-accueil.sinh-accueil .cw-status:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } .sinh-accueil.sinh-accueil .cw-panel { position: absolute; right: 0; bottom: 76px; width: 300px; max-width: calc(100vw - 40px); padding: 24px; background: #fff; color: #0b2138; box-shadow: 0 24px 60px rgba(2,18,32,.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease; } .sinh-accueil.sinh-accueil .cw-panel:before { content: ""; position: absolute; left: 0; top: 0; width: 54px; height: 3px; background: #e63336; } .sinh-accueil.sinh-accueil .cw.open .cw-panel { opacity: 1; visibility: visible; transform: none; } .sinh-accueil.sinh-accueil .cw-panel strong { display: block; margin-bottom: 6px; font: 800 17px/1.25 "Manrope",sans-serif; color: #071f38; } .sinh-accueil.sinh-accueil .cw-panel p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: #111820; } .sinh-accueil.sinh-accueil .cw-phone { display: block; margin-bottom: 10px; font: 800 22px "Manrope",sans-serif; color: #071f38; letter-spacing: -.02em; } .sinh-accueil.sinh-accueil .cw-mail { display: block; margin-bottom: 18px; font-size: 13px; color: #164b78; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; } .sinh-accueil.sinh-accueil .cw-cta { display: flex; min-height: 46px; align-items: center; justify-content: center; background: #071f38; color: #fff; font: 700 13px "Manrope",sans-serif; transition: .2s; } .sinh-accueil.sinh-accueil .cw-cta:hover { background: #164b78; } .sinh-accueil.sinh-accueil .cw-close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; background: none; color: #071f38; font-size: 22px; line-height: 1; cursor: pointer; } @media (max-width:740px) { .sinh-accueil.sinh-accueil .cw { right: 14px; bottom: 14px; } .sinh-accueil.sinh-accueil .cw-toggle { width: 56px; height: 56px; } .sinh-accueil.sinh-accueil .cw-panel { bottom: 70px; } } @media (prefers-reduced-motion:reduce) { .sinh-accueil.sinh-accueil .cw-panel, .sinh-accueil.sinh-accueil .cw-toggle { transition: none; } .sinh-accueil.sinh-accueil .cw-dot:after { animation: none; } } /* menu de navigation : la liste native reprend la disposition de l'ancien