/* ═══════════════════════════════════════════════════════════════════════════ MINI-SITE — Layout complet (single-minisite.php) Utilise les CSS vars --ms-primary / --ms-secondary injectées dans ═══════════════════════════════════════════════════════════════════════════ */ /* Masque systématiquement le sidepanel `.infos_blue` (timeline) dans les sections builder Formulaire sur les mini-sites. */ body.minisite .builder.form .infos_blue, body.minisite .builder.form .timeline.infos_blue { display: none !important; } /* Assombrit l'image de fond du haut_de_page_fixe sur les mini-sites pour améliorer la lisibilité du titre/texte. Le :before existant passe de 0.18 (défaut du thème) à 0.55. */ body.minisite .hdp.hdp--head:before { opacity: 0.7 !important; } body.minisite { margin: 0; padding: 0; background: #fff; color: var(--dark-blue, #00355f); /* Override des variables globales du thème par les couleurs du mini-site. Toutes les sections du builder qui utilisent --dark-blue, --blue, --light-blue, --dark-footer, --red, --gold, --azur héritent maintenant des choix ACF de ce mini-site. */ --dark-blue: var(--ms-primary); --blue: var(--ms-primary); --light-blue: var(--ms-primary); --dark-footer: var(--ms-primary); --dark-blue-55: var(--ms-primary); --red: var(--ms-secondary); --dark-red: var(--ms-secondary); --gold: var(--ms-secondary); --gold-hover: var(--ms-secondary); --azur: var(--ms-secondary); } /* Header sticky en haut ─────────────────────────────────────────────────────── */ .minisite__header { position: sticky; top: 0; left: 0; right: 0; z-index: 1000; background: var(--ms-header-bg, #fff); color: var(--ms-header-fg, #00355f); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); transition: box-shadow 0.2s ease; } .minisite__header-inner { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .minisite__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--ms-header-fg, var(--ms-primary)); font-weight: 800; font-size: 1.2rem; flex: none; } .minisite__logo img { max-height: 56px; max-width: 180px; height: auto; width: auto; object-fit: contain; display: block; } /* Toggle « Forcer le logo en blanc » (utile sur fond de header sombre) */ body.minisite--logo-white .minisite__logo img { filter: brightness(0) invert(1); } /* ═══════════════════════════════════════════════════════════════════════════ Header transparent avant scroll → couleur au scroll ═══════════════════════════════════════════════════════════════════════════ */ body.minisite--header-transparent .minisite__header { position: fixed; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; color: #fff; } /* La 1ère section passe SOUS le header transparent (pas de padding-top ajouté) */ body.minisite--header-transparent .minisite__main > article > section:first-child, body.minisite--header-transparent .minisite__main > article > .container:first-child { margin-top: 0; } body.minisite--header-transparent .minisite__header .minisite__logo, body.minisite--header-transparent .minisite__header .minisite__nav a { color: #fff; } body.minisite--header-transparent .minisite__header.is-scrolled { background: var(--ms-primary, #00355f); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25); color: #fff; } body.minisite--header-transparent .minisite__header.is-scrolled .minisite__logo, body.minisite--header-transparent .minisite__header.is-scrolled .minisite__nav a { color: #fff; } body.minisite--header-transparent .minisite__header.is-scrolled .minisite__nav a:hover, body.minisite--header-transparent .minisite__header.is-scrolled .minisite__nav a:focus { background: rgba(255, 255, 255, 0.15); color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ HDP mini-site → style identique à celui de la home de Systematic Le PHP de haut_de_page_fixe.php n'ajoute la classe `.home` que si is_home() || is_front_page() → sur un mini-site c'est faux, on rend le court `.hdp--head` (350px). Ces overrides forcent le grand format. ═══════════════════════════════════════════════════════════════════════════ */ body.minisite .hdp.hdp--head { color: #fff; padding: 150px 0; position: relative; min-height: 800px; height: 100vh; display: flex; align-items: center; } body.minisite .hdp.hdp--head > .container { align-items: center; height: 100%; } body.minisite .hdp.hdp--head .hdp__content { max-width: 100%; } @media (min-width: 992px) { body.minisite .hdp.hdp--head .hdp__content { max-width: 70%; } } body.minisite .hdp.hdp--head .hdp__content > .hdp__title { text-transform: uppercase; margin: 10px 0 30px; } body.minisite .hdp.hdp--head .hdp__content .section__btn .bouton, body.minisite .hdp.hdp--head .hdp__content .cta .bouton { background: var(--ms-secondary) !important; border-color: var(--ms-secondary) !important; } body.minisite .hdp.hdp--head .hdp__content .section__btn .bouton:hover, body.minisite .hdp.hdp--head .hdp__content .cta .bouton:hover { filter: brightness(0.9); } /* Titre H1 des pages filles */ .minisite__page-title { max-width: 1200px; margin: 80px auto 60px; padding: 0 40px; font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; line-height: 1.1; color: var(--ms-primary, #00355f); letter-spacing: -0.01em; } @media (max-width: 767px) { .minisite__page-title { margin: 50px auto 32px; padding: 0 20px; } } .minisite__logo--text { text-transform: uppercase; letter-spacing: 0.04em; } /* Nav ancres ─────────────────────────────────────────────────────────────── */ .minisite__nav ul:not([class]) li::before { display: none; } .minisite__nav ul { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0; padding: 0; justify-content: flex-end; } .minisite__nav a { display: inline-block; padding: 8px 14px; border-radius: 6px; color: var(--ms-header-fg, var(--dark-blue, #00355f)); text-decoration: none; font-weight: 600; font-size: 0.9rem; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .minisite__nav a:hover, .minisite__nav a:focus { background: var(--ms-primary); color: #fff; } /* CTAs du header (à droite du menu) ─────────────────────────────────────── */ .minisite__header-ctas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: none; margin-left: auto; } .minisite__cta { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 24px; font-weight: 700; font-size: 0.88rem; line-height: 1; text-decoration: none; white-space: nowrap; border: 2px solid transparent; transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; cursor: pointer; } .minisite__cta--primary { background: var(--ms-primary); color: #fff; } .minisite__cta--secondary { background: var(--ms-secondary); color: #fff; } .minisite__cta--outline { background: transparent; color: var(--ms-header-fg, var(--ms-primary)); border-color: currentColor; } .minisite__cta:hover { filter: brightness(0.9); } .minisite__cta--outline:hover { background: var(--ms-primary); color: #fff; border-color: var(--ms-primary); filter: none; } @media (max-width: 780px) { .minisite__header-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 20px; } .minisite__nav ul { width: 100%; overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; padding-bottom: 4px; } .minisite__nav a { white-space: nowrap; } .minisite__header-ctas { width: 100%; margin-left: 0; justify-content: flex-start; } } /* Main + Footer ─────────────────────────────────────────────────────────── */ .minisite__main { display: block; } .minisite__footer { background: var(--ms-primary); color: #fff; padding: 30px 24px; text-align: center; font-size: 0.85rem; } .minisite__footer a { color: #fff; text-decoration: underline; } /* ── Override des couleurs du builder par les vars du mini-site ───────────── */ body.minisite .bouton, body.minisite button.bouton, body.minisite input.bouton, body.minisite a.bouton { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; } body.minisite .bouton:hover, body.minisite button.bouton:hover, body.minisite input.bouton:hover, body.minisite a.bouton:hover { background: var(--ms-secondary); border-color: var(--ms-secondary); } /* Sections avec fond bleu marine → réutilise la couleur primaire mini-site */ body.minisite section.builder[data-color="#00355f"] { background: var(--ms-primary) !important; } /* Titres en couleur primaire */ body.minisite h1, body.minisite h2, body.minisite h3 { color: var(--ms-primary); } /* Sur fond sombre, on repasse en blanc */ body.minisite section.builder[data-color] h1, body.minisite section.builder[data-color] h2, body.minisite section.builder[data-color] h3 { color: #fff; }