/* =====================================================================
   HYDRO DÉPÔT — feuille de style principale
   Mobile d'abord · aucune dépendance · mouvement respectueux (prefers-reduced-motion)
   ===================================================================== */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Jetons ---------- */
:root {
	--c-blue: #2b5fb8; --c-blue-600: #234d96; --c-blue-700: #1b3d78;
	--c-navy: #0f1c2e; --c-navy-2: #132745;
	--c-green: #7fb52a; --c-green-600: #3f6510; --c-green-100: #eaf4d9; --c-green-200: #d2e8ad; --c-green-700: #5c8f1a; /* vert vif lisible sur fond clair : 4,6:1, choix du propriétaire pour la barre du bas */
	--c-green-500: #538217; /* vert plein le plus vif qui garde un texte blanc lisible : 4,6:1 ; au-delà on passe sous le seuil */
	--c-ink: #14212b; --c-ink-2: #33424e; --c-muted: #647079;
	--c-bg: #f5f7f4; --c-surface: #ffffff; --c-surface-2: #eef2ea; --c-line: #dfe5dc; --c-line-2: #c9d2c4;
	--c-warn: #9a4b00; --c-warn-bg: #fff3e0; --c-danger: #c0392b; --c-open: #2e7a20; --c-soon: #8f5400;
	--r-xl: 28px; --r-lg: 22px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(20, 33, 43, .05), 0 6px 18px -10px rgba(20, 33, 43, .18);
	--shadow-md: 0 14px 38px -16px rgba(20, 33, 43, .28);
	--shadow-lg: 0 34px 70px -34px rgba(15, 28, 46, .5);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--container: 73.75rem; /* 1180 px à 16 px ; suit la taille de police choisie par le visiteur */ --narrow: 780px; --gutter: clamp(16px, 4vw, 32px);
	--fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
	--fs-h1: clamp(2.1rem, 1.45rem + 3.2vw, 3.7rem);
	--fs-h2: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
	--fs-h3: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
	--fs-h4: 1.125rem;
	--section: clamp(56px, 5vw + 28px, 108px);
	--header-h: 72px;
	--mobilebar-h: calc(76px + env(safe-area-inset-bottom));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scroll-padding-bottom: calc(var(--mobilebar-h) + 16px); }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: var(--fs-body); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--mobilebar-h); }
@media (min-width: 64em) { body { padding-bottom: 0; } html { scroll-padding-bottom: 0; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-radius: inherit; }
a { color: var(--c-blue); text-decoration-thickness: 1.5px; text-underline-offset: .15em; }
a:hover { color: var(--c-blue-600); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; color: inherit; overflow-wrap: anywhere; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 4px; }
/* Surfaces sombres : anneau blanc (le bleu y tombe sous 3:1). Outline seul, sans box-shadow : les boutons redéfinissent déjà box-shadow. */
.hd-hero :focus-visible, .hd-panel :focus-visible, .hd-band :focus-visible, .hd-footer :focus-visible, .hd-notice :focus-visible { outline-color: #fff; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; z-index: 1000; background: #fff; color: var(--c-ink); padding: 12px 16px; border-radius: var(--r-sm); width: auto; height: auto; clip: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.hd-icon { width: 1.25em; height: 1.25em; flex: none; }
.hd-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hd-narrow { max-width: var(--narrow); margin-inline: auto; }
.hd-muted { color: var(--c-muted); }
.hd-small { font-size: .9rem; }
.hd-mt { margin-top: 20px; }
.hd-mb { margin-bottom: 40px; }
.hd-rounded { border-radius: var(--r-xl); }
.hd-h1 { font-size: var(--fs-h1); }
.hd-h2 { font-size: var(--fs-h2); }
.hd-h3 { font-size: var(--fs-h3); font-weight: 700; }
.hd-h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; }
.hd-kicker { margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-green-600); }
.hd-kicker--light { color: var(--c-green-200); }
.hd-lead { color: var(--c-muted); font-size: 1.08em; max-width: 62ch; }
.hd-a-renseigner { display: inline; padding: 1px 6px; border-radius: 6px; font-weight: 700; background: var(--c-warn-bg); color: var(--c-warn); box-shadow: inset 0 0 0 1px currentColor; }
.hd-a-confirmer { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--c-warn-bg); color: var(--c-warn); }

/* ---------- Révélations et mouvement ----------
   Un seul système : l'attribut data-reveal, décliné en variantes de direction (left, right, zoom, mask).
   Seules opacity et transform sont animées (composées par le GPU) : aucune propriété de mise en page,
   donc aucun décalage visuel (CLS). Amplitudes réduites sur mobile, tout est neutralisé si le système
   demande moins de mouvement. Sans JavaScript (pas de classe « js »), rien n'est masqué. */
.js [data-reveal] { opacity: 0; transform: translate3d(var(--rx, 0px), var(--ry, 18px), 0) scale(var(--rs, 1)); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.js [data-reveal="left"] { --rx: -28px; --ry: 0px; }
.js [data-reveal="right"] { --rx: 28px; --ry: 0px; }
.js [data-reveal="zoom"] { --ry: 14px; --rs: .965; }
/* Masque : posé sur les enfants et non sur l'élément observé (un élément détouré à zéro ne serait jamais
   détecté à l'écran). État final largement hors cadre : les ombres portées ne sont jamais rognées. */
.js [data-reveal="mask"] { --ry: 22px; }
.js [data-reveal="mask"] > * { clip-path: inset(0 0 100% 0); transition: clip-path .85s var(--ease) calc(var(--i, 0) * 70ms); }
.js [data-reveal="mask"] > *:nth-child(2) { transition-delay: calc(var(--i, 0) * 70ms + 140ms); }
.js [data-reveal="mask"].is-visible > * { clip-path: inset(-80px -80px -80px -80px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }
/* Galerie : les tuiles sont larges, le glissement latéral est plus ample pour se voir.
   La grille est découpée (overflow-x: clip) : entre 768 et 1180 px elle touche la gouttière, et sans
   découpe le trajet de 60 px ferait apparaître une barre de défilement horizontale sur toute la page. */
@media (min-width: 768px) {
	.js .hd-gallery-grid { overflow-x: clip; }
	.js .hd-gallery-grid__item[data-reveal="left"] { --rx: -60px; }
	.js .hd-gallery-grid__item[data-reveal="right"] { --rx: 60px; }
}
/* Navigateur sans « overflow: clip » (Safari < 16) : trajet réduit sous la largeur de la gouttière. */
@supports not (overflow-x: clip) {
	@media (min-width: 768px) {
		.js .hd-gallery-grid__item[data-reveal="left"] { --rx: -24px; }
		.js .hd-gallery-grid__item[data-reveal="right"] { --rx: 24px; }
	}
}
/* Mobile : trajets plus courts, aucun déplacement latéral, cadence plus rapide. */
@media (max-width: 767px) {
	.js [data-reveal] { --rx: 0px; --ry: 12px; --rs: 1; transition-duration: .42s, .46s; transition-delay: calc(var(--i, 0) * 55ms); }
	.js [data-reveal="mask"] > * { clip-path: none; }
}

/* Entrée du bandeau de page : jouée une seule fois au premier rendu, sans JavaScript. */
@keyframes hd-rise { from { opacity: 0; transform: translate3d(0, var(--rise, 22px), 0); } to { opacity: 1; transform: none; } }
@keyframes hd-title-in { from { opacity: 0; transform: translate3d(0, 26px, 0); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-10% -10% -10% -10%); } }
@keyframes hd-media-in { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(1.035); } to { opacity: 1; transform: none; } }
.js .hd-hero__content > * { animation: hd-rise .58s var(--ease) both; }
.js .hd-hero__content > *:nth-child(1) { animation-delay: .04s; }
.js .hd-hero__content > *:nth-child(2) { animation-delay: .1s; }
.js .hd-hero__content > *:nth-child(3) { animation-delay: .16s; }
.js .hd-hero__content > *:nth-child(4) { animation-delay: .22s; }
.js .hd-hero__content > *:nth-child(5) { animation-delay: .28s; }
.js .hd-hero__content > *:nth-child(n+6) { animation-delay: .34s; }
/* Le titre monte derrière un masque ; jamais lettre par lettre, la lisibilité prime. */
.js .hd-hero__content > h1 { animation-name: hd-title-in; animation-duration: .8s; }
.js .hd-hero__media { animation: hd-media-in .85s var(--ease) .12s backwards; }
@media (max-width: 767px) { .js .hd-hero__content > * { --rise: 14px; animation-duration: .46s; } .js .hd-hero__content > h1 { animation-duration: .6s; } }

/* Profondeur au défilement (≥ 900 px) : le script n'écrit que --py et --ps, le rendu reste en CSS.
   L'image se déplace dans son cadre — elle est volontairement plus haute que lui — et le fond dérive moins vite. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.js .hd-hero__media[data-parallax] .hd-hero__img { position: absolute; inset: -6% 0 auto 0; height: 112%; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1)); transform-origin: 50% 45%; }
	.js .hd-hero__bg[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js [data-reveal] { opacity: 1; transform: none; transition: none; }
	.js [data-reveal="mask"] > * { clip-path: none; transition: none; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
	.js .hd-hero__content > h1 { clip-path: none; }
	[data-parallax], .js .hd-hero__media[data-parallax] .hd-hero__img { transform: none !important; }
	.hd-badge__dot::after { display: none !important; }
}

/* ---------- Bandeau d'information ---------- */
.hd-notice { background: var(--c-navy); color: #fff; font-size: .92rem; }
.hd-notice--info { background: var(--c-green-600); }
.hd-notice__inner { display: flex; align-items: center; gap: 10px; padding-block: 9px; color: inherit; text-decoration: none; }
.hd-notice__inner .hd-icon:last-child { margin-left: auto; }
a.hd-notice__inner:hover { text-decoration: underline; }

/* ---------- En-tête ---------- */
.hd-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s, background .3s; }
.hd-header.is-scrolled { border-color: var(--c-line); box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, .95); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
/* Compactage par transform uniquement : la hauteur de l'en-tête ne bouge pas, le contenu ne saute pas. */
.hd-brandbar { transition: transform .35s var(--ease); transform-origin: left center; }
@media (min-width: 64em) { .hd-header.is-scrolled .hd-brandbar { transform: scale(.94); } }
.hd-header__inner { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
/* Enseigne : logo, nom, et dessous le statut « Ouvert / Fermé » (toutes largeurs). Grille partagée avec le lien du logo
   (subgrid) : le statut s'aligne sur le nom quelle que soit la forme du logo, sans entrer dans le lien. */
.hd-brandbar { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
@supports (grid-template-columns: subgrid) {
	.hd-brandbar { display: grid; grid-template-columns: auto minmax(0, auto); grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; }
	.hd-brandbar .hd-logo { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
	.hd-brandbar .hd-logo__plate { grid-column: 1; grid-row: 1 / -1; }
	.hd-brandbar .hd-logo__text { grid-column: 2; grid-row: 1; align-self: end; line-height: 1.15; }
	.hd-brandbar .hd-header__status { grid-column: 2; grid-row: 2; align-self: start; position: relative; z-index: 1; }
	.hd-brandbar .hd-logo { gap: normal; } /* sous-grille : reprend les écarts de .hd-brandbar */
	.hd-brandbar:not(:has(.hd-logo__plate)) { column-gap: 0; }
	.hd-brandbar:not(:has(.hd-logo__text)) .hd-header__status { grid-row: 1 / -1; align-self: center; }
	.hd-brandbar .hd-logo:focus-visible { outline: none; }
	.hd-brandbar .hd-logo:focus-visible .hd-logo__plate { outline: 3px solid var(--c-blue); outline-offset: 2px; }
	.hd-brandbar .hd-logo:focus-visible .hd-logo__text { text-decoration: underline 2px; text-underline-offset: 4px; }
	@media (max-width: 400px) { .hd-brandbar { column-gap: 8px; } }
}
.hd-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); font-weight: 800; letter-spacing: -.01em; font-size: 1.1rem; }
/* Le logo ne se rétracte que sous 1024 px (où le nom peut céder la place au bouton menu) ; en desktop il reste entier. */
@media (max-width: 63.99em) { .hd-logo { min-width: 0; } .hd-logo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } }
.hd-logo__text { white-space: nowrap; }
/* Logo du propriétaire affiché tel quel sur son fond blanc d'origine (pastille), en-tête clair comme pied de page sombre. */
.hd-logo__plate { display: inline-flex; align-items: center; justify-content: center; flex: none; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--c-line); overflow: hidden; }
.hd-logo__plate--square { width: 46px; height: 46px; }
.hd-logo__plate--square .hd-logo__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hd-logo__plate--wide { height: 48px; padding: 5px 10px; }
.hd-logo__plate--wide .hd-logo__img { display: block; height: 100%; width: auto; max-width: min(220px, 100%); object-fit: contain; }
@media (max-width: 400px) { .hd-logo { font-size: .98rem; gap: 8px; } .hd-logo__plate--square { width: 40px; height: 40px; border-radius: 10px; } .hd-logo__plate--wide { height: 42px; } }
@media (max-width: 479px) { .hd-logo__plate--wide { max-width: 56vw; } }
.hd-logo--footer { color: #fff; }
.hd-logo--footer .hd-logo__plate { box-shadow: none; }
.hd-nav { display: none; margin-inline: auto; }
/* Menu « priorité » (avec le script) : le menu reste affiché à toutes les largeurs et garde autant de liens que la place
   le permet ; quand ça se resserre, le dernier lien du menu disparaît en premier (main.js, fitNav). Le menu complet reste
   dans le tiroir (bouton ☰, affiché sous 1200 px). Marge intérieure compensée : l'anneau de focus n'est pas rogné. */
.js .hd-nav { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; margin: -8px 0; padding: 8px 4px; }
.js .hd-nav__list { justify-content: center; }
.hd-nav__list > li[hidden] { display: none !important; }
.js .hd-nav.is-empty { display: none; }
/* Un lien retiré faute de place : le bouton ☰ s'affiche, quelle que soit la largeur (aucun lien inaccessible). */
.hd-header.has-more .hd-burger { display: inline-flex; }
.hd-nav__list, .hd-drawer__list, .hd-footer__links { list-style: none; margin: 0; padding: 0; }
.hd-nav__list { display: flex; gap: 2px; }
.hd-nav__link { display: inline-block; white-space: nowrap; padding: 10px; border-radius: var(--r-md); color: var(--c-ink-2); text-decoration: none; font-weight: 600; font-size: .96rem; transition: background .2s, color .2s; }
.hd-nav__link:hover { background: var(--c-surface-2); color: var(--c-ink); }
.current-menu-item > .hd-nav__link, .current_page_parent > .hd-nav__link, .current-page-ancestor > .hd-nav__link { background: var(--c-green-100); color: var(--c-green-600); }
.hd-header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hd-header__status { display: flex; min-width: 0; max-width: 9.5rem; } /* ≥ « · ouvre mercredi à 10h20 » ; un message plus long est abrégé (texte complet dans le bandeau de fermeture) */
/* Itinéraire et « Shop en ligne » : dans l'en-tête dès 1024 px ; en dessous, dans la barre d'actions du bas. */
.hd-header .hd-header__cta, .hd-header .hd-header__shop { display: none; } /* spécificité > .hd-btn, déclaré plus bas */
.hd-header__shop { gap: 8px; white-space: nowrap; }
/* Itinéraire et Shop en ligne : même taille (demande du propriétaire), quelle que soit la longueur du libellé. */
.hd-header .hd-header__cta, .hd-header .hd-header__shop { min-height: 2.625rem; min-width: 9.25rem; padding-block: 0; padding-inline: 10px; justify-content: center; }
.hd-header__shop .hd-icon { width: 20px; height: 20px; flex: none; }
.hd-header__shop-text { display: grid; line-height: 1.05; text-align: left; }
.hd-header__shop-brand { font-size: .62rem; font-weight: 700; letter-spacing: .09em; opacity: .88; }
.hd-header__shop-label { font-size: .86rem; font-weight: 800; }
.hd-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: #fff; color: var(--c-ink); cursor: pointer; }
.hd-burger .hd-icon { width: 22px; height: 22px; }
.hd-burger__close { display: none; }
.hd-burger[aria-expanded="true"] .hd-burger__open { display: none; }
.hd-burger[aria-expanded="true"] .hd-burger__close { display: block; }
/* Seuils en em (64em = 1024 px, 75em = 1200 px à 16 px) : avec une police agrandie par le visiteur, l'en-tête bascule plus tôt au lieu de déborder. */
@media (min-width: 64em) { .hd-header .hd-header__cta, .hd-header .hd-header__shop { display: inline-flex; } }
/* Menu principal à partir de 1200 px (en dessous : bouton menu) ; liens resserrés pour laisser la place aux deux boutons. */
@media (min-width: 75em) { .hd-nav { display: block; } .hd-burger { display: none; } .hd-header__inner { gap: 14px; } }
.hd-drawer { background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-md); max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
.hd-drawer__inner { padding-block: 12px 24px; display: grid; gap: 18px; }
.hd-drawer__list li a { display: block; padding: 12px 6px; font-size: 1.15rem; font-weight: 700; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); border-radius: 0; transition: background .15s; }
/* Retour au toucher : léger fond, sans délai ni déplacement. */
.hd-drawer__list li a:active { background: var(--c-surface-2); }
@keyframes hd-drawer-in { from { opacity: 0; transform: translate3d(0, -12px, 0); } to { opacity: 1; transform: none; } }
/* Ouverture animée ; la fermeture reste instantanée (l'attribut hidden revient sans transition). */
.js .hd-drawer:not([hidden]) { animation: hd-drawer-in .26s var(--ease) both; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li, .js .hd-drawer:not([hidden]) .hd-drawer__status, .js .hd-drawer:not([hidden]) .hd-drawer__ctas { --rise: 10px; animation: hd-rise .3s var(--ease) both; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li:nth-child(1) { animation-delay: .06s; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li:nth-child(2) { animation-delay: .1s; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li:nth-child(3) { animation-delay: .14s; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li:nth-child(4) { animation-delay: .18s; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li:nth-child(5) { animation-delay: .22s; }
.js .hd-drawer:not([hidden]) .hd-drawer__list > li:nth-child(n+6) { animation-delay: .26s; }
.js .hd-drawer:not([hidden]) .hd-drawer__status { animation-delay: .28s; }
.js .hd-drawer:not([hidden]) .hd-drawer__ctas { animation-delay: .32s; }
.hd-drawer__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hd-drawer__ctas .hd-cta-group { display: contents; }
.hd-drawer-open body { overflow: hidden; }

/* ---------- Badge Ouvert / Fermé ---------- */
.hd-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; font-weight: 700; font-size: .92rem; line-height: 1.2; }
.hd-badge__label, .hd-badge__detail { overflow-wrap: anywhere; }
/* Statut de l'en-tête (sous le nom) : compact ; un message de fermeture long est abrégé (texte complet dans le bandeau
   et le pied de page), la précision passe à la ligne si elle ne tient pas. */
/* Grille à deux lignes (point + libellé, puis précision sous le point) : largeur = ligne la plus longue, et non
   la somme des deux lignes comme avec un flex qui passe à la ligne. */
.hd-header__status .hd-badge { display: inline-grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 6px; row-gap: 0; align-items: center; font-size: .78rem; line-height: 1.25; } /* colonne du point à sa taille ; la ligne du dessous élargit seulement la colonne du texte */
.hd-header__status .hd-badge__dot { width: 8px; height: 8px; }
.hd-header__status .hd-badge__label { max-width: min(22ch, 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* point + libellé toujours sur une ligne */
/* Halo du point « Ouvert » resserré : à côté du logo, le halo standard déborderait sur la pastille. */
.hd-header__status .hd-badge--open .hd-badge__dot::after { animation-name: hd-halo-sm; }
@keyframes hd-halo-sm { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
/* Toujours deux lignes (« ● Ouvert » puis « · ferme à 19h00 ») : largeur stable quel que soit l'état, rien d'abrégé pour les états courants. */
.hd-header__status .hd-badge__detail { grid-column: 1 / -1; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-header__status .hd-badge__detail::before { margin-right: 4px; }
.hd-badge--pill { padding: 8px 14px 8px 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
.hd-badge__dot { --dot: var(--c-muted); position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); transition: background .45s var(--ease); }
.hd-badge__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--dot); opacity: 0; }
.hd-badge__detail { font-weight: 500; color: var(--c-muted); }
.hd-badge__detail:empty { display: none; }
.hd-badge__detail::before { content: '·'; margin-right: 6px; }
.hd-badge--open .hd-badge__dot, .hd-badge--closing-soon .hd-badge__dot { --dot: var(--c-open); }
/* Ouvert : halo lent et discret. Fermé : aucun mouvement, l'état reste calme. */
.hd-badge--open .hd-badge__dot::after { animation: hd-halo 2.8s var(--ease) infinite; }
.hd-footer .hd-badge__dot::after, .hd-band .hd-badge__dot::after { animation: none; }
.hd-badge--closing-soon .hd-badge__dot { --dot: var(--c-soon); }
.hd-badge--closed .hd-badge__dot, .hd-badge--closed-exception .hd-badge__dot { --dot: var(--c-danger); }
.hd-badge--open .hd-badge__label { color: var(--c-open); }
.hd-badge--closing-soon .hd-badge__label { color: var(--c-soon); }
.hd-badge--closed .hd-badge__label, .hd-badge--closed-exception .hd-badge__label { color: var(--c-danger); }
@keyframes hd-halo { 0% { transform: scale(1); opacity: .55; } 65% { transform: scale(2.7); opacity: 0; } 100% { transform: scale(2.7); opacity: 0; } }
.hd-hero .hd-badge--pill, .hd-band .hd-badge, .hd-footer .hd-badge, .hd-notice .hd-badge { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
.hd-hero .hd-badge__detail, .hd-band .hd-badge__detail, .hd-footer .hd-badge__detail { color: rgba(255, 255, 255, .75); }
.hd-hero .hd-badge--open .hd-badge__label, .hd-band .hd-badge--open .hd-badge__label, .hd-footer .hd-badge--open .hd-badge__label { color: #b9e88c; }
.hd-hero .hd-badge--closed .hd-badge__label, .hd-hero .hd-badge--closed-exception .hd-badge__label, .hd-band .hd-badge--closed .hd-badge__label, .hd-footer .hd-badge--closed .hd-badge__label, .hd-band .hd-badge--closed-exception .hd-badge__label, .hd-footer .hd-badge--closed-exception .hd-badge__label { color: #ffb4a8; }
.hd-hero .hd-badge--closing-soon .hd-badge__label, .hd-band .hd-badge--closing-soon .hd-badge__label, .hd-footer .hd-badge--closing-soon .hd-badge__label { color: #ffd28a; }
.hd-hero .hd-badge--closing-soon .hd-badge__dot, .hd-band .hd-badge--closing-soon .hd-badge__dot, .hd-footer .hd-badge--closing-soon .hd-badge__dot { --dot: #ffd28a; }
.hd-hero .hd-badge--open .hd-badge__dot, .hd-band .hd-badge--open .hd-badge__dot, .hd-footer .hd-badge--open .hd-badge__dot { --dot: #8fc73a; }

/* ---------- Boutons ---------- */
.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 20px; border-radius: var(--r-md); font-weight: 700; font-size: .98rem; line-height: 1.15; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .2s, color .2s, border-color .2s; }
.hd-btn .hd-icon { width: 20px; height: 20px; }
.hd-btn .hd-icon { transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
	.hd-btn:hover { transform: translateY(-2px); }
	/* L'icône de chaque appel à l'action bouge de 1 à 3 px : le bouton reste cliquable instantanément. */
	[data-hd-cta="itineraire"]:hover .hd-icon:first-child { transform: translateY(-2px) scale(1.06); }
	[data-hd-cta="appeler"]:hover .hd-icon:first-child { transform: rotate(-9deg) scale(1.06); }
	[data-hd-cta="horaires"]:hover .hd-icon:first-child { transform: rotate(14deg); }
	[data-hd-cta="ecrire"]:hover .hd-icon:first-child, [data-hd-cta="absolugrow"]:hover .hd-icon:first-child { transform: translate3d(2px, -1px, 0); }
	[data-hd-cta="avis"]:hover .hd-icon:first-child { transform: rotate(-14deg) scale(1.1); }
	[data-hd-cta="lien"]:hover .hd-icon { transform: translateX(3px); }
}
.hd-btn:active { transform: translateY(0); }
.hd-btn:active .hd-icon { transform: none; }
.hd-btn--sm { padding: 9px 14px; font-size: .9rem; border-radius: var(--r-sm); }
.hd-btn--primary { background: var(--c-blue); color: #fff; box-shadow: 0 8px 20px -10px rgba(43, 95, 184, .7); }
.hd-btn--primary:hover { background: var(--c-blue-600); color: #fff; box-shadow: 0 12px 26px -10px rgba(43, 95, 184, .75); }
.hd-btn--secondary { background: #fff; color: var(--c-ink); border-color: var(--c-line-2); box-shadow: var(--shadow-sm); }
.hd-btn--secondary:hover { border-color: var(--c-ink-2); color: var(--c-ink); }
.hd-btn--outline { background: transparent; color: var(--c-blue); border-color: var(--c-blue); }
.hd-btn--outline:hover { background: var(--c-blue); color: #fff; }
.hd-btn--ghost { background: transparent; color: inherit; padding-inline: 12px; }
.hd-btn--ghost:hover { background: rgba(20, 33, 43, .06); }
.hd-btn--light { background: #fff; color: var(--c-blue-700); box-shadow: var(--shadow-sm); }
.hd-btn--light:hover { color: var(--c-blue); }
.hd-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
/* Vert plein, texte blanc : le vert profond de la charte (le vert clair ne laisse pas un texte blanc lisible). */
/* Bleu → vert de la charte, texte blanc : le dégradé finit sur le vert profond, lisible sous du blanc. */
.hd-btn--duo { color: #fff; border-color: rgba(255, 255, 255, .22); background: linear-gradient(120deg, var(--c-blue) 0%, var(--c-blue-600) 45%, var(--c-green-600) 100%); box-shadow: 0 8px 20px -10px rgba(43, 95, 184, .8); }
.hd-btn--duo:hover { color: #fff; background: linear-gradient(120deg, var(--c-blue-600) 0%, var(--c-blue-700) 45%, #4b7a13 100%); box-shadow: 0 12px 26px -10px rgba(63, 101, 16, .8); }
.hd-btn--green { background: var(--c-green-600); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: 0 8px 20px -10px rgba(63, 101, 16, .8); }
.hd-btn--green:hover { background: #4b7a13; color: #fff; box-shadow: 0 12px 26px -10px rgba(63, 101, 16, .8); }
/* Vert clair de la ligne « aujourd'hui » et du statut « Ouvert » : même repère visuel pour le bouton Appeler. */
/* Bouton « Commander sur ABSOLU GROW » du bandeau d'accueil : vert plein le plus vif qui garde un texte blanc
   lisible, plus le halo du bouton Itinéraire — c'est le halo qui attire l'œil, pas la teinte. Au survol le fond
   fonce (le contraste monte) et le halo s'élargit. */
.hd-btn--commande { background: var(--c-green-500); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 30px rgba(83, 130, 23, .55); }
.hd-btn--commande:hover { background: #4b7614; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 34px rgba(83, 130, 23, .72); }
.hd-btn--soft-green { background: var(--c-green-100); color: var(--c-green-600); border-color: var(--c-green-200); box-shadow: var(--shadow-sm); }
.hd-btn--soft-green:hover { background: var(--c-green-200); color: var(--c-green-600); border-color: var(--c-green-600); }
.hd-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hd-hero .hd-btn--secondary, .hd-hero .hd-btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.hd-hero .hd-btn--secondary:hover, .hd-hero .hd-btn--ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .5); }
.hd-hero .hd-btn--primary { background: var(--c-green); color: var(--c-navy); box-shadow: 0 10px 26px -12px rgba(127, 181, 42, .9); }
.hd-hero .hd-btn--primary:hover { background: #8fc73a; color: var(--c-navy); }
.hd-cta-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hd-section__more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }

/* ---------- Bandeau de page (hero) ---------- */
.hd-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 45%, var(--c-blue-700) 100%); padding-block: clamp(40px, 6vw, 96px) clamp(48px, 7vw, 104px); }
@media (min-width: 640px) { .hd-hero { border-radius: 0 0 var(--r-xl) var(--r-xl); } }
.hd-hero--compact { padding-block: clamp(32px, 4vw, 64px) clamp(36px, 5vw, 72px); }
.hd-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hd-hero__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hd-hero__blob--a { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -12vw; top: -18vw; background: radial-gradient(circle at 40% 40%, rgba(127, 181, 42, .8), rgba(127, 181, 42, 0) 70%); }
.hd-hero__blob--b { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; left: -14vw; bottom: -22vw; background: radial-gradient(circle at 50% 50%, rgba(43, 95, 184, .9), rgba(43, 95, 184, 0) 70%); }
.hd-hero__inner { position: relative; display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .hd-hero--image .hd-hero__inner { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.hd-hero__content { max-width: 640px; container-type: inline-size; }
/* Titre en lignes : chaque ligne tient dans la colonne (100cqi = largeur de la colonne ; --hd-title-em = longueur de la
   plus longue ligne, calculée par hd_hero) ; jamais plus grand que la taille normale, jamais sous 1,5 rem. */
.hd-hero .hd-h1--lines { font-size: clamp(1.35rem, 100cqi / var(--hd-title-em, 12), var(--fs-h1)); }
.hd-hero__text { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: rgba(255, 255, 255, .84); max-width: 56ch; }
.hd-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 22px; }
.hd-hero__addr { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); font-size: .95rem; }
.hd-hero__media { position: relative; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; overflow: hidden; transform: translate3d(0, 0, 0); }
.hd-hero__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: none; }
.hd-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Titre du bandeau en enseigne néon : halo bleu-vert discret sur le titre ; les mots en <strong> sont les tubes
   « allumés » (vert clair, contour fin, halo vif). Allumage joué une fois au chargement (deux clignotements,
   puis fixe) ; sous « mouvement réduit », l'état allumé s'affiche directement. */
.hd-hero .hd-h1 { text-shadow: 0 0 22px rgba(43, 95, 184, .55); }
.hd-hero .hd-h1 strong { font-weight: inherit; color: #eaffd0; -webkit-text-stroke: .6px rgba(185, 232, 140, .85); text-shadow: 0 0 6px rgba(255, 255, 255, .6), 0 0 14px rgba(127, 181, 42, .95), 0 0 34px rgba(43, 95, 184, .85); animation: hd-neon-on 1.3s steps(1, end) .35s both; }
@keyframes hd-neon-on { 0%, 16% { opacity: .35; text-shadow: none; } 20%, 30% { opacity: 1; } 34% { opacity: .45; text-shadow: none; } 40%, 100% { opacity: 1; } }
.hd-hero .hd-hero__ag { margin-left: 4px; }
.hd-crumbs { font-size: .88rem; margin-bottom: 14px; }
.hd-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; color: rgba(255, 255, 255, .7); }
.hd-crumbs li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.hd-crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.hd-crumbs a:hover { color: #fff; text-decoration: underline; }
.hd-aisle { display: inline-block; padding: 5px 11px; border-radius: var(--r-sm); background: var(--c-green); color: var(--c-navy); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.hd-aisle--sm { font-size: .68rem; padding: 3px 9px; margin-bottom: 10px; }

/* ---------- Sections ---------- */
.hd-section { padding-block: var(--section); }
.hd-section--alt { background: var(--c-surface); }
/* Profondeur : la bande claire se détache du fond par un arrondi et une ombre très douce. */
@media (min-width: 640px) { .hd-section--alt { border-radius: var(--r-xl); box-shadow: 0 1px 0 rgba(20, 33, 43, .04), 0 24px 48px -44px rgba(20, 33, 43, .45); } }
.hd-section--atouts { padding-top: clamp(28px, 3vw, 48px); }
.hd-section--intro { padding-top: 0; }
.hd-section--band { padding-bottom: clamp(56px, 5vw + 28px, 108px); }
.hd-section__head { max-width: 760px; margin-bottom: clamp(28px, 3vw, 44px); }
.hd-section__head--center { margin-inline: auto; text-align: center; }
.hd-section__head .hd-lead { margin-top: 10px; }
.hd-prose { font-size: 1.05rem; }
.hd-prose h2 { font-size: var(--fs-h3); margin-top: 1.6em; font-weight: 700; }
.hd-prose h3 { font-size: 1.15rem; margin-top: 1.4em; font-weight: 700; }
.hd-prose ul li, .hd-prose ol li { margin-bottom: .35em; }
.hd-prose img { border-radius: var(--r-lg); }
.hd-prose .wp-block-button__link { display: inline-flex; padding: 12px 20px; border-radius: var(--r-md); background: var(--c-blue); color: #fff; text-decoration: none; font-weight: 700; }
.hd-prose table { width: 100%; border-collapse: collapse; }
.hd-prose td, .hd-prose th { padding: 8px 10px; border-bottom: 1px solid var(--c-line); text-align: left; }

/* ---------- Grilles et cartes ---------- */
.hd-grid { display: grid; gap: 20px; }
@media (min-width: 680px) { .hd-grid--2, .hd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Contour des cartes, homogène sur tout le site : fin liseré en dégradé bleu → vert (teintes claires de la charte,
   rappel des cartes de chiffres), qui se renforce au survol des cartes cliquables. La couleur de bordure unie reste
   en repli si le dégradé sur la bordure n'est pas pris en charge. */
:root { --edge-a: #809fd4; --edge-b: #9fc75f; --edge-w: 1.5px; } /* bleu et vert de la charte, éclaircis de 40 et 25 % */
.hd-card { position: relative; background: var(--c-surface); border: var(--edge-w) solid var(--c-line-2); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.hd-section--alt .hd-card { background: linear-gradient(var(--c-bg), var(--c-bg)) padding-box, linear-gradient(135deg, var(--edge-a), var(--edge-b)) border-box; }
@media (hover: hover) and (pointer: fine) { a.hd-card:hover, .hd-card--link:hover { --edge-a: var(--c-blue); --edge-b: var(--c-green); } }
a.hd-card, .hd-card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.hd-card, .hd-card--link { --ring: rgba(43, 95, 184, 0); }
a.hd-card::after, .hd-card--link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--ring); transition: box-shadow .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
	a.hd-card:hover, .hd-card--link:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; --ring: rgba(43, 95, 184, .32); }
}
@media (hover: none) { a.hd-card:active, .hd-card--link:active { transform: scale(.99); } }
.hd-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: var(--c-green-100); color: var(--c-blue-700); margin-bottom: 16px; }
.hd-card__icon .hd-icon { width: 24px; height: 24px; }
.hd-card--icon p { color: var(--c-ink-2); }
/* Cartes à icône compactes : icône à gauche du titre (au lieu d'au-dessus), marges et texte resserrés.
   Le texte passe sous l'ensemble et occupe toute la largeur. Même rendu partout (accueil, magasin, services,
   horaires, rayons). */
.hd-card--icon { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; padding: 20px 22px; }
.hd-card--icon > .hd-card__icon { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
.hd-card--icon > .hd-card__icon .hd-icon { width: 20px; height: 20px; }
.hd-card--icon > h2, .hd-card--icon > h3 { margin: 0; font-size: 1.06rem; line-height: 1.25; }
.hd-card--icon > :not(.hd-card__icon):not(h2):not(h3) { grid-column: 1 / -1; margin-top: 10px; }
.hd-card--icon > p ~ p { margin-top: 6px; }
.hd-card--icon p, .hd-card--icon li { font-size: .95rem; line-height: 1.55; }
.hd-card--icon .hd-a-confirmer { margin-left: 6px; }
.hd-grid:has(> .hd-card--icon) { gap: 16px; }
.hd-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: var(--c-blue); font-weight: 700; text-decoration: none; }
.hd-card__more .hd-icon { transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { a.hd-card:hover .hd-card__more .hd-icon, .hd-card--link:hover .hd-card__more .hd-icon { transform: translateX(5px); } }
.hd-card--rayon { padding: 0; overflow: hidden; }
.hd-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface-2); overflow: hidden; border-radius: 0; }
.hd-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) { a.hd-card:hover .hd-card__media img { transform: scale(1.06); } }
.hd-card__media--portrait { aspect-ratio: 3 / 4; border-radius: var(--r-md); }
.hd-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-muted); }
.hd-card__ph .hd-icon { width: 34px; height: 34px; }
.hd-card--rayon .hd-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.hd-card--rayon .hd-h3 { margin-bottom: .3em; }
.hd-card--rayon p { color: var(--c-ink-2); margin-bottom: 8px; }
.hd-card--person { padding: 14px; }
.hd-card--person .hd-card__body { padding: 14px 6px 4px; }
.hd-card--route .hd-card__duration { font-weight: 700; color: var(--c-blue-700); }
.hd-card--note { display: flex; gap: 20px; align-items: flex-start; }
.hd-card--note .hd-card__icon { margin-bottom: 0; flex: none; }
.hd-card--hours .hd-hours { margin-top: 8px; }
.hd-ph { display: grid; place-items: center; min-height: 260px; background: var(--c-surface-2); color: var(--c-muted); }

/* ---------- Deux colonnes ---------- */
.hd-split { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .hd-split { grid-template-columns: 1.1fr .9fr; gap: 56px; } .hd-split--wide { grid-template-columns: 1fr 1fr; } }
.hd-split__media img { width: 100%; box-shadow: var(--shadow-md); }
.hd-split__media--stack { display: grid; gap: 18px; }
.hd-split__ctas { margin-top: 22px; }

/* ---------- Listes, pastilles, étapes ---------- */
.hd-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.hd-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--c-surface); border: var(--edge-w) solid var(--c-line-2); border-radius: var(--r-md); }
.hd-list .hd-icon { color: var(--c-green-600); margin-top: 2px; }
.hd-ol { padding-left: 1.3em; margin: 0; }
.hd-ol li { margin-bottom: .5em; color: var(--c-ink-2); }
.hd-chips { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.hd-chip { padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-surface-2); border: 1px solid var(--c-line); font-weight: 600; font-size: .93rem; }
.hd-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: none; }
@media (min-width: 680px) { .hd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hd-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hd-steps__cell { display: flex; flex-direction: column; gap: 12px; }
.hd-steps__item { flex: 1; background: var(--c-surface); border: var(--edge-w) solid var(--c-line-2); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.hd-section--alt .hd-steps__item { background: var(--c-bg); }
/* Numéros : du bleu au vert selon le rang (--step-t de 0 à 1, posé par le gabarit) ; vert en repli sans color-mix. */
.hd-steps__num { display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--c-green-600); line-height: 1; margin-bottom: 10px; }
@supports (color: color-mix(in oklab, red, blue)) { .hd-steps__num { color: color-mix(in oklab, var(--c-blue) calc((1 - var(--step-t, 1)) * 100%), var(--c-green-600)); } }
.hd-steps__cta .hd-btn { width: 100%; }
.hd-steps__item p { color: var(--c-ink-2); }
.hd-dl { margin: 0; border-top: 1px solid var(--c-line); }
.hd-dl__row { display: grid; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
@media (min-width: 600px) { .hd-dl__row { grid-template-columns: 1fr 1.4fr; } }
.hd-dl dt { color: var(--c-muted); font-weight: 600; margin: 0; }
.hd-dl dd { margin: 0; font-weight: 600; }

/* ---------- Horaires ---------- */
.hd-hours__status { margin-bottom: 14px; }
.hd-hours__table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.hd-hours__table th, .hd-hours__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-line); }
.hd-hours__table td { text-align: right; font-weight: 600; color: var(--c-ink-2); }
.hd-hours__table th { font-weight: 600; color: var(--c-ink); }
.hd-hours__table tr.is-today th, .hd-hours__table tr.is-today td { background: var(--c-green-100); color: var(--c-green-600); }
.hd-hours__table tr.is-today th { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.hd-hours__table tr.is-today td { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.hd-hours__table .hd-hours__today { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid currentColor; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.hd-hours__closures { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); background: var(--c-warn-bg); color: var(--c-warn); }
.hd-hours__closures h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 1rem; }
.hd-hours__closures ul { margin: 0; padding-left: 1.1em; }
.hd-footer__hours { list-style: none; padding: 0; margin: 0 0 12px; font-size: .88rem; }
.hd-footer__hours li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hd-footer__hours li span:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Statistiques, chronologie, marques ---------- */
.hd-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.hd-stat { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; text-align: center; }
/* Liseré « néon », rappel de l'enseigne lumineuse : une couleur de la charte par carte (bleu, vert, dégradé bleu → vert),
   fin liseré en dégradé et halo extérieur qui respire lentement, plus vif au survol ou une fois la carte retournée.
   Le halo est un pseudo-élément dont seule l'opacité est animée (composé par le GPU) ; figé sous « mouvement réduit ». */
.hd-stat { --neon: var(--c-blue); --neon2: var(--c-blue); position: relative; isolation: isolate; border: 1.5px solid transparent; background: linear-gradient(var(--c-surface), var(--c-surface)) padding-box, linear-gradient(135deg, var(--neon), var(--neon2)) border-box; }
.hd-stat:nth-child(2) { --neon: var(--c-green); --neon2: var(--c-green); }
.hd-stat:nth-child(3) { --neon: var(--c-blue); --neon2: var(--c-green); }
.hd-stat:nth-child(4) { --neon: var(--c-green); --neon2: var(--c-blue); }
.hd-stat::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1; box-shadow: -6px 0 26px -6px var(--neon), 6px 0 26px -6px var(--neon2); opacity: .32; animation: hd-neon 4.4s ease-in-out infinite; }
.hd-stat:nth-child(2)::after { animation-delay: -1.5s; }
.hd-stat:nth-child(3)::after { animation-delay: -3s; }
@keyframes hd-neon { 0%, 100% { opacity: .22; } 50% { opacity: .5; } }
.hd-stat--flip.is-flipped::after { opacity: .85; animation: none; }
@media (hover: hover) and (pointer: fine) { .hd-stat--flip:hover::after { opacity: .85; animation: none; } }
@media (max-width: 479px) { .hd-stat::after { box-shadow: -4px 0 18px -6px var(--neon), 4px 0 18px -6px var(--neon2); } }
@media (prefers-reduced-motion: reduce) { .hd-stat::after { animation: none; opacity: .4; } }
.hd-stat__value { display: block; font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--c-blue); line-height: 1; }
.hd-stat__label { display: block; margin-top: 8px; color: var(--c-muted); font-weight: 600; }
/* Carte retournable : le dos porte un message. Survol à la souris, clic ou toucher (état épinglé), clavier ; Échap referme.
   Rotation 3D sur transform uniquement ; sous « mouvement réduit », simple fondu entre les deux faces. */
.hd-stat--flip { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; text-align: center; cursor: pointer; width: 100%; padding: 0; perspective: 900px; transition: border-color .3s, box-shadow .3s; }
.hd-stat__inner { display: grid; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.hd-stat__face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border-radius: var(--r-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hd-stat__front { position: relative; }
.hd-stat__back { transform: rotateY(180deg); background: var(--c-blue); color: #fff; font-weight: 600; font-size: .98rem; line-height: 1.45; }
.hd-stat__hint { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-green-100); color: var(--c-green-600); transition: transform .3s var(--ease); }
.hd-stat__hint .hd-icon { width: 14px; height: 14px; }
.hd-stat--flip.is-flipped { border-color: transparent; box-shadow: var(--shadow-md); }
.hd-stat--flip.is-flipped .hd-stat__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
	.hd-stat--flip:hover { border-color: transparent; box-shadow: var(--shadow-md); }
	.hd-stat--flip:hover .hd-stat__inner { transform: rotateY(180deg); }
}
@media (max-width: 479px) { .hd-stat__face { padding: 18px 14px; } .hd-stat__back { font-size: .9rem; line-height: 1.4; } }
@media (prefers-reduced-motion: reduce) {
	.hd-stat__inner { transform: none !important; transform-style: flat; }
	.hd-stat__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
	.hd-stat__back { transform: none; opacity: 0; }
	.hd-stat--flip.is-flipped .hd-stat__back { opacity: 1; }
	.hd-stat--flip.is-flipped .hd-stat__front { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
	.hd-stat--flip:hover .hd-stat__back { opacity: 1; }
	.hd-stat--flip:hover .hd-stat__front { opacity: 0; }
}
.hd-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.hd-timeline::before { content: ''; position: absolute; left: 44px; top: 8px; bottom: 8px; width: 2px; background: var(--c-line-2); }
.hd-timeline__item { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 10px 0 24px; }
.hd-timeline__year { position: relative; z-index: 1; align-self: start; justify-self: center; padding: 6px 10px; border-radius: var(--r-pill); background: var(--c-blue); color: #fff; font-weight: 800; font-size: .85rem; }
/* Marques : cartes cliquables (logo sur plaque blanche ou monogramme, nom, une phrase) ; « Voir plus de marques » est un
   <details> natif : la seconde liste s'ouvre sur place, sans script ni changement de page. */
.hd-brands { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 900px) { .hd-brands { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.hd-brand { position: relative; display: flex; flex-direction: column; text-align: center; padding: 12px 12px 16px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hd-brand__logo { position: relative; aspect-ratio: 3 / 2; display: grid; place-items: center; margin-bottom: 10px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--c-line); }
/* Plaque de hauteur constante : le logo est posé en absolu et contenu dans la plaque, quelle que soit sa forme. */
.hd-brand__logo img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
/* Sans logo : la plaque blanche porte le nom seul (décision propriétaire), composé par le site. */
.hd-brand__logo--text { position: static; padding: 10px 12px; } /* static : le lien étendu (::before) se cale sur la carte entière, pas sur la plaque */
.hd-brand .hd-brand__logo--text .hd-h4 { margin: 0; font-size: clamp(.95rem, .5vw + .78rem, 1.15rem); line-height: 1.15; } /* plus spécifique que .hd-brand .hd-h4 */
.hd-brand__tag { align-self: center; margin: 0 0 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-green-100); color: var(--c-green-600); font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.hd-brand .hd-h4 { font-size: 1rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.hd-brand .hd-h4 a { color: inherit; text-decoration: none; }
.hd-brand__desc { margin: 0; font-size: .84rem; line-height: 1.35; color: var(--c-muted); }
.hd-brands__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.hd-brands__head .hd-h3 { margin: 0; }
.hd-brands__count { padding: 4px 11px; border-radius: var(--r-pill); background: var(--c-green-100); color: var(--c-green-600); font-size: .85rem; font-weight: 700; }
.hd-brands__lead { margin: 0 0 18px; color: var(--c-muted); font-size: .95rem; }
.hd-brands-more { margin-top: 32px; }
.hd-brands-more > summary { list-style: none; display: inline-flex; cursor: pointer; }
.hd-brands-more > summary::-webkit-details-marker { display: none; }
.hd-brands-more > summary::marker { content: ''; }
.hd-brands-more > summary .hd-icon { transition: transform .3s var(--ease); }
.hd-brands-more[open] > summary .hd-icon { transform: rotate(180deg); }
.hd-brands-more > summary .hd-more__close, .hd-brands-more[open] > summary .hd-more__open { display: none; }
.hd-brands-more[open] > summary .hd-more__close { display: inline; }
.hd-brands-more__body { margin-top: 28px; }
/* Pastille-lien (marques d'un rayon) : l'ancre remplit toute la pastille, au-dessus du lien étendu de la carte. */
.hd-chip:has(> a) { padding: 0; }
.hd-chip > a { position: relative; z-index: 2; display: block; padding: 8px 14px; border-radius: inherit; color: inherit; text-decoration: none; }
.hd-chip > a:hover { color: var(--c-blue); }
@media (hover: hover) and (pointer: fine) {
	.hd-brand:has(.hd-stretch):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
	.hd-brand:has(.hd-stretch):hover .hd-h4 a { color: var(--c-blue); }
}

/* Accueil : mur de logos « Les marques que l'on vous propose » (tuiles blanches, 3 → 4 → 6 colonnes). */
.hd-logos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .hd-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hd-logos { gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hd-logos__link { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 10px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); color: var(--c-ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hd-logos__link img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.hd-logos__name { font-weight: 700; font-size: clamp(.85rem, .4vw + .75rem, 1.05rem); line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
a.hd-logos__link:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	a.hd-logos__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

/* ---------- Panneau, bloc ABSOLU GROW, bande, avis ---------- */
.hd-panel { position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: linear-gradient(135deg, var(--c-blue-700), var(--c-blue)); color: #fff; box-shadow: var(--shadow-md); }
@media (min-width: 900px) { .hd-panel { grid-template-columns: 1fr auto; } }
.hd-panel .hd-kicker { color: var(--c-green-200); }
.hd-panel p { color: rgba(255, 255, 255, .88); }
.hd-panel__icon { display: none; color: rgba(255, 255, 255, .18); }
.hd-panel__icon .hd-icon { width: 160px; height: 160px; }
@media (min-width: 900px) { .hd-panel__icon { display: block; } }
.hd-panel .hd-btn--primary { background: #fff; color: var(--c-blue-700); box-shadow: none; }
.hd-panel .hd-btn--primary:hover { background: var(--c-green-100); }
.hd-panel .hd-btn--outline, .hd-panel .hd-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.hd-panel .hd-btn--outline:hover { background: rgba(255, 255, 255, .12); }
.hd-panel__phone { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 16px; }
.hd-panel__phone a { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 800; color: #fff; text-decoration: none; }
/* Combiné vert : le téléphone est l'action la plus utile du bloc. La mention reste factuelle (un 04 n'est pas un numéro gratuit). */
.hd-panel__phone .hd-icon { color: var(--c-green); }
.hd-panel__phone-note { color: var(--c-green-200); font-size: .8rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
/* Bloc ABSOLU GROW : fond blanc cassé vert d'eau (dégradé doux, de la teinte vert clair de la charte vers le blanc),
   liseré vert et lueur verte discrète : il se détache des sections sans casser la palette bleu / vert du site. */
.hd-ag { display: grid; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(120deg, #e4f1d3 0%, #f2f8ea 55%, #fbfdf7 100%); border: 1.5px solid #b2d37f; box-shadow: 0 0 0 4px rgba(127, 181, 42, .10), 0 14px 34px -22px rgba(63, 101, 16, .45); }
.hd-ag__icon--logo { border-color: #b2d37f; box-shadow: 0 6px 16px -10px rgba(63, 101, 16, .5); }
@media (min-width: 760px) { .hd-ag { grid-template-columns: auto 1fr auto; } }
.hd-ag__icon { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--c-blue); align-items: center; justify-content: center; border: 1px solid var(--c-line); }
/* Emblème + flèche : « d'ici, vers la boutique ». La flèche pointe vers le texte et le bouton ; elle glisse au survol du bloc. */
.hd-ag__icon--logo { width: auto; gap: 6px; padding: 5px 10px 5px 6px; justify-self: start; }
.hd-ag__logo { width: 36px; height: 36px; object-fit: contain; border-radius: 0; }
.hd-ag__arrow { color: var(--c-green-600); transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hd-ag:hover .hd-ag__arrow { transform: translateX(4px); } }
.hd-ag__body h3 { margin-bottom: 4px; }
.hd-ag__body p { margin: 0; color: var(--c-ink-2); }
.hd-band { position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-xl); background: linear-gradient(120deg, var(--c-navy), var(--c-navy-2) 60%, var(--c-blue-700)); color: #fff; box-shadow: var(--shadow-lg); }
.hd-band::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(127, 181, 42, .55), rgba(127, 181, 42, 0) 70%); filter: blur(30px); pointer-events: none; }
@media (min-width: 900px) { .hd-band { grid-template-columns: 1.2fr 1fr; } }
.hd-band__addr { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); margin-bottom: 8px; }
.hd-band__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hd-band__ctas .hd-cta-group { display: contents; }
.hd-band .hd-btn--secondary { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.hd-band .hd-btn--ghost { color: #fff; }
.hd-reviews { margin-top: 20px; display: grid; gap: 16px; align-items: center; padding: 22px 26px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
@media (min-width: 760px) { .hd-reviews { grid-template-columns: auto 1fr auto; } }
.hd-reviews__icon { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; background: var(--c-warn-bg); color: var(--c-soon); align-items: center; justify-content: center; }
.hd-reviews h3 { margin-bottom: 2px; }
.hd-reviews p { margin: 0; color: var(--c-ink-2); }

/* ---------- FAQ ---------- */
.hd-faq { display: grid; gap: 10px; }
.hd-faq__item { background: var(--c-surface); border: var(--edge-w) solid var(--c-line-2); border-radius: var(--r-md); padding: 0 20px; }
.hd-faq__item[open] { border-color: var(--c-line-2); box-shadow: var(--shadow-sm); }
.hd-faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; font-weight: 700; }
.hd-faq__item summary::-webkit-details-marker { display: none; }
.hd-faq__item summary .hd-icon { color: var(--c-blue); transition: transform .3s var(--ease); }
.hd-faq__item[open] summary .hd-icon { transform: rotate(180deg); }
.hd-faq__a { padding: 0 0 18px; color: var(--c-ink-2); }

/* ---------- Galerie et carte ---------- */
.hd-gallery-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .hd-gallery-grid { grid-template-columns: repeat(3, 1fr); } .hd-gallery-grid--4, .hd-gallery-grid--5 { grid-template-columns: repeat(4, 1fr); } .hd-gallery-grid--5 .hd-gallery-grid__item:first-child { grid-column: span 2; grid-row: span 2; } }
.hd-gallery-grid__item { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-surface-2); }
.hd-gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hd-gallery-grid__item:hover img { transform: scale(1.05); } }
.hd-map { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-line); min-height: 300px; }
.hd-map__static { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.hd-map__static svg { width: 100%; height: 100%; min-height: 300px; display: block; }
/* Vue aérienne : image fixe (fichier du site), repère au centre — le magasin est au centre de l'image — et mention de la source. */
.hd-map__photo { position: absolute; inset: 0; }
.hd-map__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-blue); color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 10px 22px -10px rgba(20, 33, 43, .6); }
.hd-map__credit { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .88); color: var(--c-ink-2); font-size: .68rem; font-weight: 600; }
@media (max-width: 639px) { .hd-map__photo { position: relative; aspect-ratio: 16 / 10; inset: auto; } }
.hd-map__card { background: #fff; padding: 14px 16px; border-top: 1px solid var(--c-line); }
@media (min-width: 640px) { .hd-map { min-height: 420px; } .hd-map__static, .hd-map__static svg { position: absolute; inset: 0; height: 100%; } .hd-map__card { position: absolute; left: 18px; top: 18px; max-width: 320px; border-radius: var(--r-lg); border: 1px solid var(--c-line); box-shadow: var(--shadow-md); } }
.hd-map__title { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--c-blue-700); }
.hd-map__card p { margin-bottom: 6px; font-size: .95rem; }
.hd-map__card .hd-btn { margin-top: 2px; }

/* ---------- Pied de page ---------- */
.hd-footer { margin-top: 0; background: var(--c-navy); color: rgba(255, 255, 255, .82); padding-block: clamp(40px, 5vw, 72px) 28px; }
.hd-footer a { color: #fff; }
.hd-footer .hd-btn--light { color: var(--c-blue-700); }
.hd-footer .hd-btn--light:hover { color: var(--c-blue); }
.hd-footer__grid { display: grid; gap: 32px; }
@media (min-width: 640px) { .hd-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .hd-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } }
.hd-footer__title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-green-200); margin: 0 0 14px; }
.hd-footer__baseline { margin-top: 14px; max-width: 30ch; }
.hd-footer__addr { font-style: normal; line-height: 1.7; margin-bottom: 12px; }
.hd-footer__links li a { display: inline-block; padding: 4px 0; text-decoration: none; }
.hd-footer__links li a:hover { text-decoration: underline; }
/* Page en cours dans le pied de page : la pastille déborde de 12 px à gauche (marge négative) pour que le mot
   reste aligné sur les autres liens, avec de l'air autour du texte. */
.hd-footer__links .current-menu-item > a, .hd-footer__links .current_page_parent > a, .hd-footer__links .current-page-ancestor > a { padding: 5px 14px; margin: 1px 0 1px -14px; border-radius: var(--r-pill); }
.hd-footer__ag { margin-top: 12px; font-size: .95rem; }
.hd-footer__ag a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hd-footer__ag a:hover { text-decoration: underline; }
.hd-footer__status { font-size: .92rem; }
/* Réseaux sociaux : pastilles rondes aux couleurs officielles, logo blanc. 44 px = cible tactile confortable.
   Le liseré clair détache les marques sombres (X, TikTok) du pied de page bleu nuit. */
.hd-social { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hd-social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; }
.hd-social__logo { display: block; }
.hd-social__link--instagram { background: radial-gradient(circle at 28% 106%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 92%); border-color: transparent; }
.hd-social__link--facebook { background: #1877f2; border-color: transparent; }
.hd-social__link--x, .hd-social__link--tiktok { background: #000; border-color: rgba(255, 255, 255, .45); }
.hd-social__link--youtube { background: #ff0000; border-color: transparent; }
.hd-social__link--linkedin { background: #0a66c2; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
	.hd-social__link:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8); }
}
.hd-social__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hd-footer__legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.hd-footer__legal p { margin: 0; }
.hd-footer__legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.hd-footer__legal-links a { color: rgba(255, 255, 255, .75); }

/* ---------- Barre mobile fixe ---------- */
.hd-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--c-line); box-shadow: 0 -10px 30px -18px rgba(20, 33, 43, .35); }
@media (min-width: 64em) { .hd-mobilebar { display: none; } } /* même seuil que les boutons de l'en-tête */
/* Barre du bas et barres du navigateur : position fixed + bottom 0, enfant direct de <body> (sans ancêtre transformé).
   Safari iOS (15 à 26), Chrome, Firefox et Samsung Internet la placent eux-mêmes au-dessus de leur barre d'adresse et
   la font redescendre quand elle se replie. Aucun script de compensation : il ne servirait pas et les bugs de
   visualViewport d'iOS 26 le feraient sautiller (recherche du 22/09/2026). Ne pas passer en sticky ni l'envelopper. */
.hd-btn--bar { flex-direction: column; gap: 3px; padding: 8px 4px; border-radius: var(--r-md); font-size: .74rem; font-weight: 700; color: var(--c-blue-700); background: transparent; box-shadow: none; line-height: 1.1; text-align: center; }
.hd-btn--bar > span:not(.screen-reader-text) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-btn--bar .hd-icon { width: 22px; height: 22px; }
.hd-btn--bar:hover { transform: none; background: var(--c-surface-2); }
.hd-mobilebar .hd-btn--bar:first-child { background: var(--c-blue); color: #fff; }
.hd-mobilebar .hd-btn--bar:first-child:hover { background: var(--c-blue-600); }
/* Lecture de la barre : bleu plein = y aller (Itinéraire), vert = agir (Appeler),
   bleu nuit = s'informer (Horaires). Vert vif mais lisible : le vert néon de la charte tombe à 2,5:1 sur blanc.
   La boutique en ligne, elle, a son propre bouton « enseigne » (texte blanc sur vert nuit). */
.hd-mobilebar .hd-btn--bar[data-hd-cta="appeler"] { color: var(--c-green-700); }

/* Bouton « enseigne » de la boutique en ligne (tiroir du menu et barre mobile) : vert nuit, halo néon
   à l'intérieur, nom de l'enseigne au-dessus du libellé. Il se distingue ainsi des actions « magasin ». */
.hd-btn--enseigne {
	position: relative;
	flex-direction: column;
	gap: 1px;
	background: linear-gradient(170deg, #24501a 0%, #122c0b 100%);
	color: #fff;
	border-color: transparent;
	text-shadow: 0 0 6px rgba(255, 255, 255, .45);
}
.hd-btn--enseigne:hover { background: linear-gradient(170deg, #2b5e1f 0%, #16370e 100%); color: #fff; }
.hd-btn__brand { font-size: .62rem; font-weight: 700; letter-spacing: .09em; color: #fff; }
.hd-btn__label { font-size: .9rem; font-weight: 800; }
/* Le halo s'allume comme un néon : deux éclats blancs sur fond vert, en 3,7 s, une seule fois à
   l'ouverture de la page. Seul le halo du pseudo-élément change : le texte, lui, reste blanc et
   immobile. Sous « mouvement réduit », la règle générale coupe l'animation (halo vert, fixe). */
.hd-btn--enseigne::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1.5px rgba(127, 181, 42, .9), inset 0 0 18px rgba(127, 181, 42, .5);
	animation: hd-neon-allume 3.7s steps(1, end) .4s both;
}
@keyframes hd-neon-allume {
	0%, 20% { box-shadow: inset 0 0 0 1.5px rgba(127, 181, 42, .9), inset 0 0 18px rgba(127, 181, 42, .5); }
	21%, 40% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), inset 0 0 22px rgba(255, 255, 255, .55); }
	41%, 60% { box-shadow: inset 0 0 0 1.5px rgba(127, 181, 42, .9), inset 0 0 18px rgba(127, 181, 42, .5); }
	61%, 80% { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), inset 0 0 22px rgba(255, 255, 255, .55); }
	81%, 100% { box-shadow: inset 0 0 0 1.5px rgba(127, 181, 42, .9), inset 0 0 18px rgba(127, 181, 42, .5); }
}
/* Tiroir : le bouton occupe toute la largeur, sous les actions du magasin. */
.hd-drawer__shop { width: 100%; }
/* Barre mobile : mêmes couleurs, textes au format de la barre. */
.hd-mobilebar .hd-btn--enseigne { padding-inline: 8px; }
.hd-mobilebar .hd-btn__brand { font-size: .58rem; letter-spacing: .08em; }
.hd-mobilebar .hd-btn__label { font-size: .68rem; }

/* ---------- Impression ---------- */
@media print { .hd-header, .hd-mobilebar, .hd-notice, .hd-band, .hd-ag, .hd-btn { display: none !important; } body { padding: 0; background: #fff; } .hd-hero { color: #000; background: none; } }

/* Contour dégradé commun (déclaré en dernier : prime sur le fond uni de chaque composant). */
.hd-card, .hd-steps__item, .hd-faq__item, .hd-brand, .hd-logos__link, .hd-list li { border: var(--edge-w) solid var(--c-line-2); background: linear-gradient(var(--c-surface), var(--c-surface)) padding-box, linear-gradient(135deg, var(--edge-a), var(--edge-b)) border-box; }

/* Cartes « pour aller plus loin » (div.hd-card--link avec un lien en bas) : le lien devient un bandeau bleu nuit
   au pied de la carte, surmonté d'un tube néon bleu et d'une lueur qui remonte dans la carte. Plus vif au survol. */
.hd-card--link { overflow: hidden; }
.hd-card--link > a.hd-card__more { display: flex; align-items: center; gap: 8px; margin: auto -26px -26px; margin-top: auto; padding: 16px 26px; color: #fff; font-weight: 700; text-decoration: none;
  background: linear-gradient(180deg, var(--c-blue-700) 0%, var(--c-navy-2) 55%, var(--c-navy) 100%);
  box-shadow: 0 -2px 0 #6b9cf0, 0 -3px 12px rgba(107, 156, 240, .75), 0 -26px 44px -18px rgba(43, 95, 184, .55); transition: box-shadow .35s var(--ease); }
.hd-card--link > a.hd-card__more .hd-icon { color: #b9e88c; }
.hd-card--link > a.hd-card__more:focus-visible { outline-color: #fff; outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
	.hd-card--link:hover > a.hd-card__more { box-shadow: 0 -2px 0 #8db4ff, 0 -3px 16px rgba(141, 180, 255, .95), 0 -34px 56px -18px rgba(43, 95, 184, .75); }
}

/* Une carte, un clic : dans une carte qui n'a qu'une action, la zone cliquable de son lien (classe hd-stretch)
   s'étend à toute la carte. Le lien reste le seul élément focalisable : clavier et lecteurs d'écran inchangés.
   Un bouton étendu ne bouge plus au survol (sinon sa zone se réduirait sous le pointeur) : c'est la carte qui se soulève. */
.hd-ag { position: relative; }
.hd-stretch::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.hd-btn.hd-stretch:hover, .hd-btn.hd-stretch:active { transform: none; }
.hd-stretch:focus-visible { outline: none; }
.hd-stretch:focus-visible::before { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.hd-card:has(.hd-stretch), .hd-ag:has(.hd-stretch) { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
	.hd-card:not(.hd-card--link):has(.hd-stretch):hover, .hd-ag:has(.hd-stretch):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}


/* Carte « équipe au comptoir » (page Le magasin) : contour bleu mat façon océan (dégradé de bleus profonds, sans
   brillance), fond qui bleuit doucement vers le bas, et une petite lumière bleue posée au pied de la carte qui
   l'éclaire de l'intérieur. Toute la carte mène aux horaires ; le bouton ABSOLU GROW passe au-dessus (z-index 2). */
.hd-card.hd-card--ocean { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 18px; align-items: start; padding: 26px 28px 30px; overflow: hidden; border: 1.5px solid #24598a;
  background: radial-gradient(ellipse 60% 60% at 50% 122%, rgba(64, 140, 220, .38), rgba(64, 140, 220, 0) 72%) padding-box, linear-gradient(180deg, #ffffff 0%, #f4f8fd 50%, #e3eef9 100%) padding-box, linear-gradient(140deg, #1b3d78 0%, #245f8e 50%, #2d7aa3 100%) border-box;
  box-shadow: 0 20px 44px -26px rgba(27, 61, 120, .6); }
.hd-card--ocean::before { content: ''; position: absolute; left: 32%; right: 32%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #7ab2ff; box-shadow: 0 0 12px 2px rgba(122, 178, 255, .85), 0 0 46px 12px rgba(64, 140, 220, .35); pointer-events: none; transition: box-shadow .35s var(--ease), left .35s var(--ease), right .35s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hd-card--ocean:hover::before { left: 22%; right: 22%; box-shadow: 0 0 16px 3px rgba(122, 178, 255, .95), 0 0 60px 16px rgba(64, 140, 220, .45); } }
.hd-card--ocean > .hd-card__icon { margin: 0; background: #e2edf9; color: var(--c-blue-700); }
.hd-ocean__body > p:first-child { margin-bottom: 12px; color: var(--c-ink-2); }
.hd-ocean__body strong { color: var(--c-ink); }
.hd-ocean__hours { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid rgba(36, 89, 138, .18); }
.hd-ocean__hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 8px 0; border-bottom: 1px solid rgba(36, 89, 138, .18); font-size: .95rem; }
.hd-ocean__days { font-weight: 700; color: var(--c-ink); }
.hd-ocean__time { color: var(--c-blue-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-ocean__hours li.is-closed .hd-ocean__time { color: var(--c-muted); font-weight: 500; }
.hd-ocean__status { margin: 0 0 16px; }
/* Les deux actions occupent toute la largeur de la carte et sont centrées (demande du propriétaire). */
.hd-ocean__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 4px; text-align: center; }
.hd-ocean__more { display: inline-flex; align-items: center; gap: 6px; color: var(--c-blue-700); font-weight: 700; text-decoration: none; }
.hd-ocean__more .hd-icon { transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hd-card--ocean:hover .hd-ocean__more .hd-icon { transform: translateX(4px); } }
.hd-ocean__ag { position: relative; z-index: 2; }
@media (max-width: 479px) { .hd-card.hd-card--ocean { grid-template-columns: 1fr; gap: 12px; padding: 22px 20px 26px; } .hd-ocean__more { display: inline; } .hd-ocean__more .hd-icon { vertical-align: -5px; margin-left: 4px; } }