/* Clémentine Mailhac chrome: what the header, menu panel and footer still need from CSS. Their colours, type, spacing, radius
   and shadows are block attributes and style variations in the parts (tools/build-site.py), so the Site Editor shows
   and edits them. Kept here: the sticky part wrapper, the phone header, the menu link animation, the menu panel rows,
   the header over the hero. Token variables only (raw values: 0, 1px hairlines, media-query breakpoints). */

/* ---------- page frame ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- header ---------- */
/* The part wrapper would limit sticky to its own height: let its children sit directly in .wp-site-blocks. */
.wp-block-template-part:has(> .cm-header-wrap) { display: contents; }
.cm-header-wrap { z-index: var(--wp--custom--z--sticky); transition: background-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease; }
/* the switch from transparent to white is a slow fade, links and the button follow (owner 2026-11-04) */
.cm-header-wrap :is(a, .wp-block-button__link, .wp-block-navigation__responsive-container-open) { transition: color 0.6s ease, border-color 0.6s ease, background-color 0.6s ease; }
.cm-header-wrap .cm-logo a { transition: background-color 0.6s ease; }
/* the brand group is one link: the title link stretches over the badge */
.cm-brand { position: relative; flex: none; }
.cm-brand .wp-block-site-title { margin: 0; }
.cm-brand .wp-block-site-title a::after { content: ""; position: absolute; inset: 0; }
.cm-header-cta { flex: none; margin: 0; }

/* navigation: inline from 1024px, the menu panel below (core switches at 600px, so move the switch) */
.cm-nav { margin-right: auto; margin-left: var(--wp--preset--spacing--50); }
.cm-nav .wp-block-navigation-item__content { position: relative; padding: var(--wp--preset--spacing--30) 0; }
.cm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: var(--wp--preset--spacing--20); height: var(--wp--custom--border--strong); border-radius: var(--wp--custom--radius--badge); background: var(--wp--preset--color--accent-1); transition: right var(--wp--custom--transition--base); }
.cm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover::after,
.cm-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.cm-nav .wp-block-navigation__responsive-container-open { display: none; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); align-items: center; justify-content: center; border-radius: var(--wp--custom--radius--icon-button); color: currentColor; background: transparent; border: 0; padding: 0; cursor: pointer; }
.cm-nav .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--accent-5); }
.cm-nav .wp-block-navigation__responsive-container-open svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }
@media (max-width: 1023px) {
	.cm-nav { order: 3; margin: 0; }
	.cm-header-cta { margin-left: auto; }
	.cm-nav .wp-block-navigation__responsive-container-open { display: flex !important; }
	.cm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (min-width: 1024px) {
	.cm-header { min-height: var(--wp--custom--layout--header-height) !important; }
}

/* centered: logo in the middle and the button on the right, the menu on its own row below (from 1024px) */
@media (min-width: 1024px) {
	.cm-header.cm-header--centered { display: grid !important; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand cta" "nav nav nav"; align-items: center; row-gap: var(--wp--preset--spacing--20); padding-block: var(--wp--preset--spacing--30); }
	.cm-header--centered .cm-brand { grid-area: brand; }
	.cm-header--centered .cm-header-cta { grid-area: cta; justify-self: end; }
	.cm-header--centered .cm-nav { grid-area: nav; justify-self: center; margin: 0; }
}

/* over the hero (content.json layout.header.over_hero): transparent while the page sits at the top of a hero that runs
   under the header (.cm-hero--under-header), solid once it scrolls (assets/js/header-scroll.js sets body.cm-is-scrolled).
   Only with JavaScript (html.cm-js, printed in the head), so without it the header stays solid. */
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header) .cm-header-wrap--over-hero { background-color: transparent !important; }
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header.cm-hero--tone-dark) .cm-header-wrap--over-hero { color: var(--wp--preset--color--on-accent); }
body.cm-is-scrolled .cm-header-wrap { box-shadow: 0 1px 0 var(--wp--preset--color--accent-6); }
/* the open menu panel must not inherit the transparent header's colours */
.cm-header-wrap:has(.wp-block-navigation__responsive-container.is-menu-open) { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast); }

/* ---------- menu panel (navigation overlay; the panel's look is in the part) ---------- */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--overlay); padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > * { display: block; height: auto; }
.cm-drawer { width: 100%; max-width: var(--wp--custom--layout--drawer); margin-left: auto; box-sizing: border-box; }
/* core's overlay rule sets display:block on the panel's children: keep the head a row */
.cm-drawer__head { display: flex !important; }
.cm-drawer .wp-block-navigation-overlay-close { display: inline-grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--icon-button); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); cursor: pointer; padding: 0; position: static; }
.cm-drawer .wp-block-navigation-overlay-close:hover { background: var(--wp--preset--color--accent-5); }
.cm-drawer .wp-block-navigation-overlay-close svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); fill: currentColor; }
.cm-drawer__nav .wp-block-navigation__container { display: grid; width: 100%; gap: 0; }
.cm-drawer__nav .wp-block-navigation-item { display: block; border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6); }
.cm-drawer__nav .wp-block-navigation-item:last-child { border-bottom: 0; }
.cm-drawer__nav .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; min-height: var(--wp--custom--control--min); padding: var(--wp--preset--spacing--20) 0; }
.cm-drawer__nav .wp-block-navigation-item__content::after { content: ""; width: var(--wp--custom--icon--sm); height: var(--wp--custom--icon--sm); flex: none; background: var(--wp--preset--color--accent-4); -webkit-mask: url(../icons/wp/caret-right.svg) center / contain no-repeat; mask: url(../icons/wp/caret-right.svg) center / contain no-repeat; transition: transform var(--wp--custom--transition--fast); }
.cm-drawer__nav .wp-block-navigation-item__content:hover::after { transform: translateX(3px); background: var(--wp--preset--color--contrast); }
.cm-drawer__contact a { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }

/* ---------- footer (colours, spacing and type are in the part) ---------- */
.cm-footer a { text-decoration: none; }
.cm-footer a:hover { text-decoration: underline; }
.cm-footer .wp-block-column { min-width: 0; }
.cm-footer .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); }
.cm-footer__bottom > * { margin: 0; }
.cm-footer__bottom .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--on-accent); }
/* social logos stay core brand marks: 44px round targets that invert on hover */
.cm-footer .wp-block-social-links { gap: var(--wp--preset--spacing--20); }
.cm-footer .wp-block-social-links .wp-social-link { background: transparent !important; color: var(--wp--preset--color--on-accent) !important; border-radius: var(--wp--custom--radius--icon-button); }
.cm-footer .wp-block-social-links .wp-social-link a { display: grid; place-items: center; width: var(--wp--custom--control--min); height: var(--wp--custom--control--min); padding: 0; color: inherit; }
.cm-footer .wp-block-social-links .wp-social-link a:hover,
.cm-footer .wp-block-social-links .wp-social-link a:focus-visible { background: var(--wp--preset--color--on-accent); color: var(--wp--preset--color--accent-3) !important; text-decoration: none; border-radius: var(--wp--custom--radius--icon-button); }
.cm-footer .wp-block-social-links .wp-social-link a:hover svg,
.cm-footer .wp-block-social-links .wp-social-link a:focus-visible svg { fill: var(--wp--preset--color--accent-3); }
.cm-footer .wp-block-social-links svg { width: var(--wp--custom--icon--md); height: var(--wp--custom--icon--md); }

/* ---------- Clémentine Mailhac: logo, menu, header over the hero, footer ---------- */
.cm-logo { margin: 0; flex: none; line-height: 0; }
.cm-logo a { display: inline-block; background: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
.cm-logo img { height: 18.667px; width: auto; display: block; }
@media (min-width: 1024px) { .cm-logo img { height: 24px; } }
.cm-nav { margin-inline: auto; }
.cm-nav .wp-block-navigation-item__content::after { background: var(--wp--preset--color--signature) !important; height: 1px !important; }
.cm-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; border: 0 !important; box-shadow: var(--wp--preset--shadow--lg); padding: var(--wp--preset--spacing--20) 0; min-width: 14rem !important; }
.cm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important; }
.cm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.cm-header-cta .wp-block-button__link { min-height: var(--wp--custom--control--min) !important; }
/* over the hero: white menu and an outline white button */
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header) .cm-header-wrap--over-hero .cm-header-cta .wp-block-button__link { color: var(--wp--preset--color--on-accent); border-color: var(--wp--preset--color--on-accent); }
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header) .cm-header-wrap--over-hero .cm-header-cta .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header) .cm-header-wrap--over-hero :where(a, button):focus-visible { outline-color: var(--wp--preset--color--focus-inverse); }
.cm-drawer .cm-logo a { padding: 0; }
.cm-drawer__nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { position: static !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important; box-shadow: none !important; padding-left: var(--wp--preset--spacing--40) !important; }

/* footer */
.cm-footer-label { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-small); }
.cm-footer-logo { margin: 0; }
.cm-footer-logo img { width: 140px; height: auto; }
.cm-footer p { margin: 0; }
.cm-footer-ext a { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: 36px; }
.cm-footer-ext a::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: var(--wp--custom--icon-url--arrow-right) center / contain no-repeat; mask: var(--wp--custom--icon-url--arrow-right) center / contain no-repeat; transform: rotate(-45deg); }
.cm-footer__bottom { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-accent) 15%, transparent); font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase; }
.cm-footer-legal { font-size: var(--wp--preset--font-size--x-small); }

/* logo: black on white, white over a hero photo without the white box (owner 2026-11-10) */
.cm-header-wrap .cm-logo a { transition: background-color 0.6s ease; background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; }
.cm-header-wrap .cm-logo img { transition: opacity 0.6s ease; }
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header) .cm-header-wrap--over-hero .cm-logo a { background-color: transparent; background-image: url("/wp-content/uploads/2026/11/logo-clementine-mailhac-blanc.png"); }
html.cm-js body:not(.cm-is-scrolled):has(.cm-hero--under-header) .cm-header-wrap--over-hero .cm-logo img { opacity: 0; }

/* black logo straight on the header, no white box (owner 2026-11-10) */
.cm-header-wrap .cm-logo a, .cm-drawer .cm-logo a { background-color: transparent !important; }