/* Header — nouveau design "refonte sémantique" (moltow-08-2026).
Porté depuis includes/header-content2 (source canonique du markup) et
css/header-styles.css. La source double chaque règle en `#moltow-header
header > ...` (injection JS fetch, mécanisme jamais utilisé côté Astro)
ET `body > header > ...` (header déjà présent dans le HTML) — seul le
second jeu de sélecteurs est repris ici, le header étant rendu directement
en enfant de par Header.astro. Nécessite tokens.css (chargé avant). */
[data-cta] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
padding: 0.85rem 1.5rem;
border-radius: 999px;
transition: 0.2s;
border: 1.5px solid transparent;
font-family: var(--font-system);
}
[data-cta='primary'] {
background: var(--terra);
color: #fff;
}
[data-cta='primary']:hover {
background: var(--terra-dark);
transform: translateY(-1px);
}
[data-cta='ghost'] {
border-color: var(--terra);
color: var(--ink);
}
[data-cta='ghost']:hover {
border-color: var(--terra);
color: var(--terra);
}
/* Liens sans équivalent live sur beta pour l'instant (pages à construire) */
.lien-a-creer {
color: #d9534f !important;
}
.lien-a-creer::after {
content: ' •';
font-size: 0.7em;
}
body > aside[role='note'] {
background: var(--ink);
color: #f5ede5;
font-size: 0.76rem;
letter-spacing: 0.06em;
text-align: center;
padding: 0.4rem 1rem;
font-family: var(--font-system);
}
body > aside[role='note'] b {
color: #fff;
}
body > header:has(> nav) {
position: sticky;
top: 0;
z-index: 2000;
background: var(--header-bg);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(1rem, 2vw, 2rem);
padding: 0.55rem clamp(1.2rem, 3vw, 2.6rem);
font-family: var(--font-system);
}
/* Logo en masque CSS plutôt qu'![]()
: la couleur devient un vrai
background-color piloté par --terra (token.css), theme-able depuis un
futur back-office de couleurs — un 
ne peut pas
hériter les variables CSS de la page (document externe isolé), un fill
codé en dur dans le SVG ne l'aurait pas été non plus. */
body > header > a[rel='home'] .logo-mark {
display: block;
height: 30px;
width: 126px;
background-color: var(--terra);
-webkit-mask: url(/images/Logo-desktop.svg) no-repeat left center / contain;
mask: url(/images/Logo-desktop.svg) no-repeat left center / contain;
}
body > header > a[rel='home'] > b {
color: var(--terra);
font-weight: 900;
}
body > header > nav {
justify-self: center;
}
body > header > nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: clamp(0.9rem, 1.8vw, 1.8rem);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ink-soft);
}
body > header > nav > ul > li {
position: relative;
}
body > header > nav > ul > li > a {
display: inline-block;
white-space: nowrap;
padding: 0.95rem 0;
/* Couleur explicite (et pas seulement héritée) : sur les pages encore sur
l'ancien bundle app.css (ex. /conditions-generales-de-vente), la règle
générique `a{color:#484fe3}` teintait la nav principale en bleu. */
color: var(--ink-soft);
background: linear-gradient(var(--terra), var(--terra)) left bottom / 0 2px no-repeat;
transition: background-size 0.25s, color 0.2s;
}
body > header > nav > ul > li:has(> ul) > a::after {
content: none;
}
body > header > nav > ul > li:has(> ul):hover > a::after {
color: var(--terra);
rotate: 180deg;
display: inline-block;
}
body > header > nav > ul > li > a:hover,
body > header > nav > ul > li:focus-within > a {
color: var(--terra);
background-size: 100% 2px;
}
body > header > nav > ul > li > ul {
visibility: hidden;
opacity: 0;
transform: translateY(12px);
transition: 0.25s ease;
position: absolute;
inset-inline-start: -1.2rem;
inset-block-start: 100%;
min-width: 16rem;
list-style: none;
margin: 0;
padding: 1.2rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 30px 70px rgba(23, 24, 74, 0.22), 0 2px 8px rgba(23, 24, 74, 0.08);
display: grid;
gap: 0.1rem;
text-transform: none;
letter-spacing: 0;
font-size: 0.95rem;
}
body > header > nav > ul > li:hover > ul,
body > header > nav > ul > li:focus-within > ul {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
body > header > nav > ul > li > ul::before {
content: '';
position: absolute;
inset-block-start: -6px;
inset-inline-start: 2.2rem;
width: 12px;
height: 12px;
background: var(--card);
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
rotate: 45deg;
}
body > header > nav > ul > li:first-child > ul,
body > header > nav > ul > li:nth-child(2) > ul,
body > header > nav > ul > li:nth-child(5) > ul {
display: block;
columns: 2;
column-gap: 2.6rem;
padding: 1.3rem 1.5rem 1.4rem;
}
body > header > nav > ul > li:first-child > ul {
min-width: 40rem;
}
body > header > nav > ul > li:nth-child(2) > ul {
min-width: 37rem;
}
body > header > nav > ul > li:nth-child(5) {
position: static;
}
body > header > nav > ul > li:nth-child(5) > ul {
min-width: 0;
width: 100%;
inset-inline: 0;
border-inline: 0;
border-top: 1px solid var(--line);
border-radius: 0 0 18px 18px;
columns: 3;
column-gap: 3.4rem;
column-rule: 1px solid var(--line);
padding: 1.7rem max(2.6rem, calc((100% - 1180px) / 2)) 2.1rem;
box-shadow: 0 34px 70px rgba(23, 24, 74, 0.16);
}
body > header > nav > ul > li:nth-child(5) > ul::before {
display: none;
}
body > header > nav > ul > li:first-child > ul > li,
body > header > nav > ul > li:nth-child(2) > ul > li,
body > header > nav > ul > li:nth-child(5) > ul > li {
break-inside: avoid;
}
body > header > nav > ul > li:first-child > ul > li:nth-child(9),
body > header > nav > ul > li:nth-child(2) > ul > li:nth-child(7),
body > header > nav > ul > li:nth-child(5) > ul > li:nth-child(9),
body > header > nav > ul > li:nth-child(5) > ul > li:nth-child(16) {
break-before: column;
margin-top: 0;
}
body > header > nav > ul > li > ul a {
display: block;
padding: 0.55rem 0.9rem;
border-radius: 10px;
font-weight: 500;
color: var(--ink-soft);
transition: 0.15s;
white-space: nowrap;
}
body > header > nav > ul > li > ul a::after {
content: '→';
float: inline-end;
opacity: 0;
translate: -6px 0;
transition: 0.18s;
color: var(--terra);
}
body > header > nav > ul > li > ul a:hover {
background: var(--terra-soft);
color: var(--terra-dark);
}
body > header > nav > ul > li > ul a:hover::after {
opacity: 1;
translate: 0 0;
}
body > header > nav > ul > li > ul > li[role='separator'] {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra);
padding: 0.4rem 0.9rem 0.55rem;
margin-bottom: 0.35rem;
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
body > header > nav > ul > li > ul > li ~ li[role='separator'] {
margin-top: 0.9rem;
}
body > header > menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.84rem;
white-space: nowrap;
}
body > header > menu img {
width: 22px;
height: 22px;
display: block;
transition: 0.15s;
filter: sepia(1) saturate(1.35) hue-rotate(330deg) brightness(0.68);
}
body > header > menu a:hover img {
opacity: 0.65;
}
body > header > menu > li:first-child a {
color: var(--ink-soft);
border-bottom: 1px solid var(--line);
padding-bottom: 0.15rem;
}
body > header > menu > li:first-child a:hover {
color: var(--terra);
border-color: var(--terra);
}
body > header > menu a[data-cta='primary'] {
padding: 0.85rem 1.6rem;
font-size: 0.84rem;
letter-spacing: 0.03em;
box-shadow: 0 8px 20px color-mix(in srgb, var(--terra) 30%, transparent);
}
@media (max-width: 78rem) {
body > header > menu > li:first-child {
display: none;
}
}
@media (max-width: 70rem) {
body > header > nav {
display: none;
}
body > header {
grid-template-columns: auto 1fr;
}
}
/* ===== Menu mobile (tiroir) — porté depuis includes/header-content2 ===== */
#nav-burger {
display: none;
background: none;
border: 0;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: var(--ink);
padding: 0.35rem 0.55rem;
border-radius: 10px;
}
#nav-overlay {
display: none;
}
@media (max-width: 960px) {
body > header {
grid-template-columns: auto 1fr auto auto;
gap: 0.6rem;
}
#nav-burger {
display: block;
justify-self: end;
order: 5;
}
body > header > a[rel='home'] .logo-mark {
height: 38px !important;
width: 160px !important;
}
body > header > menu {
display: flex;
align-items: center;
gap: 1.1rem;
margin: 0;
padding: 0;
list-style: none;
justify-self: end;
}
body > header > menu a[data-cta='primary'] {
display: none;
}
body > header > menu img {
width: 26px;
height: 26px;
}
.topbar-hours {
display: none;
}
body.nav-open #nav-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(16, 17, 36, 0.45);
z-index: 2400;
}
body.nav-open > header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 3000 !important;
}
body:not(.nav-open) > header > nav {
display: none !important;
}
body.nav-open > header > nav {
display: block !important;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: min(86vw, 24rem);
z-index: 2500;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
padding: 4.2rem 1.3rem 2.5rem;
box-shadow: -18px 0 50px rgba(69, 48, 34, 0.25);
-webkit-overflow-scrolling: touch;
animation: navSlide 0.25s ease;
}
@keyframes navSlide {
from {
transform: translateX(30%);
opacity: 0.4;
}
to {
transform: none;
opacity: 1;
}
}
body.nav-open #nav-burger {
position: fixed;
top: 0.8rem;
right: 0.9rem;
z-index: 2600;
background: #f2f3fa;
}
body.nav-open {
overflow: hidden;
}
body.nav-open > header > nav > ul {
display: block;
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
list-style: none;
margin: 0;
padding: 0;
}
body.nav-open > header > nav > ul > li {
position: static;
border-bottom: 1px solid var(--line);
}
body.nav-open > header > nav > ul > li > a {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 1.02rem;
padding: 0.78rem 0.2rem;
background: none;
white-space: normal;
}
body.nav-open > header > nav > ul > li:has(> ul) > a::after {
content: '▾';
font-size: 0.85rem;
color: var(--terra);
transition: transform 0.2s;
}
body.nav-open > header > nav > ul > li.open > a::after {
transform: rotate(180deg);
}
body.nav-open > header > nav > ul > li > ul {
display: none !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: static !important;
columns: 1 !important;
min-width: 0 !important;
width: auto !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0.1rem 0 0.7rem 0.7rem !important;
margin: 0;
list-style: none;
}
body.nav-open > header > nav > ul > li.open > ul {
display: block !important;
}
body.nav-open > header > nav > ul > li > ul::before {
display: none !important;
}
body.nav-open > header > nav li[role='separator'] {
font-weight: 800;
color: var(--terra);
font-size: 0.86rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 2.4rem 0 0.45rem !important;
padding: 0;
border: 0 !important;
background: none !important;
break-before: auto !important;
}
body.nav-open > header > nav li[role='separator']:first-child {
margin-top: 0.4rem;
}
body.nav-open > header > nav > ul > li > ul li {
border: 0 !important;
margin: 0;
}
body.nav-open > header > nav > ul > li.open {
background: #f8f9ff;
border-radius: 12px;
padding-inline: 0.6rem;
}
body.nav-open > header > nav > ul > li.open > a {
color: var(--terra);
}
body.nav-open > header > nav > ul > li > ul a {
display: block;
padding: 0.28rem 0.1rem;
font-size: 0.94rem;
line-height: 1.35;
white-space: normal;
color: var(--ink-soft);
border-radius: 8px;
}
body.nav-open > header > nav::after {
content: '';
display: block;
height: 0.5rem;
}
body > header a[href='/rappel'] {
display: none;
}
#cta-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2300;
display: flex;
gap: 0.55rem;
padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px rgba(69, 48, 34, 0.08);
transform: translateY(110%);
transition: transform 0.25s ease;
font-family: var(--font-system);
}
#cta-bar.cta-visible {
transform: none;
}
#cta-bar a {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.78rem 0.5rem;
border-radius: 999px;
font-weight: 800;
font-size: 0.92rem;
white-space: nowrap;
text-decoration: none;
}
#cta-bar .cta-rdv {
background: var(--terra);
color: #fff;
}
#cta-bar .cta-tel {
border: 1.5px solid var(--terra);
color: var(--terra);
}
body.has-cta-bar {
padding-bottom: 4.6rem !important;
}
body.nav-open #cta-bar {
display: none;
}
}
@media (min-width: 960.1px) {
#cta-bar {
display: none;
}
}
/* Cohérence avec body.hide-header (page-base.css ne cible que ) */
body.hide-header aside[role='note'],
body.hide-header #cta-bar {
display: none !important;
}