/* ============================================================
   HOJO Refonte — Design system « éditorial-startup »
   Tokens + base + composants. Sections animées : voir Task 6/7.
   ============================================================ */

/* ---------- Polices self-hostées (variable, woff2) ---------- */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
	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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
	/* Couleurs — DA HOJO : bleu marine + accent ROUGE de marque + neutres chauds.
	   (Échantillonnés du logo/bannière fournis : bleu #2a5483, rouge #7d1316, navy #0c2030→#1a4879.) */
	--hj-blue:        #2a5483;   /* marque HOJO */
	--hj-blue-deep:   #16304f;   /* navy profond (fonds sombres, ~bannière) */
	--hj-blue-900:    #0e2138;   /* navy le plus profond */
	--hj-blue-700:    #21426a;
	--hj-blue-soft:   #eef2f8;   /* tint clair */
	--hj-red:         #7d1316;   /* ROUGE de marque (le point « SOLUTI•NS », la croix) */
	--hj-red-bright:  #c1272d;   /* rouge énergique (hover / glow) */
	--hj-accent:      var(--hj-red);        /* accent global = rouge de marque */
	--hj-accent-bright: var(--hj-red-bright);
	--hj-ink:         #16202b;   /* encre profonde (≠ noir pur) */
	--hj-paper:       #faf7f1;   /* ivoire chaud */
	--hj-paper-2:     #f1ebdf;   /* ivoire plus dense */
	--hj-mute:        #5f6770;   /* gris chaud (texte secondaire) */
	--hj-line:        rgba(22, 32, 43, .12);
	--hj-line-soft:   rgba(22, 32, 43, .07);
	--hj-white:       #ffffff;

	/* Surfaces sombres (sections inversées) */
	--hj-on-dark:     #eaf0f7;
	--hj-on-dark-mute:#9fb0c4;

	/* Typographie */
	--hj-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--hj-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hj-h1:    clamp(2.7rem, 6.4vw, 6rem);
	--hj-h2:    clamp(2rem, 4.2vw, 3.6rem);
	--hj-h3:    clamp(1.45rem, 2.4vw, 2.1rem);
	--hj-h4:    clamp(1.15rem, 1.6vw, 1.4rem);
	--hj-body:  clamp(1rem, 1.05vw, 1.16rem);
	--hj-lead:  clamp(1.15rem, 1.6vw, 1.5rem);
	--hj-small: .875rem;

	/* Rythme / layout */
	--hj-maxw:    1200px;
	--hj-maxw-rd: 760px;          /* largeur de lecture confortable */
	--hj-gap:     clamp(1rem, 2vw, 2rem);
	--hj-section: clamp(4.5rem, 9vw, 9rem);
	--hj-radius:  20px;
	--hj-radius-sm: 12px;
	--hj-radius-pill: 999px;

	/* Ombres / glow */
	--hj-shadow:    0 26px 60px -28px rgba(24, 50, 79, .42);
	--hj-shadow-sm: 0 10px 24px -16px rgba(24, 50, 79, .4);
	--hj-glow:      0 16px 38px -12px rgba(193, 39, 45, .45);

	/* Easing (miroir des courbes GSAP) */
	--hj-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--hj-paper);
	color: var(--hj-ink);
	font-family: var(--hj-sans);
	font-size: var(--hj-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--hj-blue); text-underline-offset: .18em; }
::selection { background: color-mix(in srgb, var(--hj-accent) 30%, transparent); }

h1, h2, h3, h4 {
	font-family: var(--hj-serif);
	font-optical-sizing: auto;
	line-height: 1.04;
	letter-spacing: -.02em;
	font-weight: 560;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: var(--hj-h1); }
h2 { font-size: var(--hj-h2); }
h3 { font-size: var(--hj-h3); }
h4 { font-size: var(--hj-h4); }
p { margin: 0 0 1.1em; max-width: 68ch; }

/* Focus accessible (clavier) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--hj-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Lien d'évitement */
.hj-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	padding: .6em 1em; background: var(--hj-blue-deep); color: #fff;
	text-decoration: none; border-radius: 0 0 8px 0;
}
.hj-skip-link:focus { left: 0; top: 0; }

/* ---------- Layout ---------- */
.hj-container { width: 100%; max-width: var(--hj-maxw); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.6rem); }
.hj-section { padding-block: var(--hj-section); }
.hj-section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.hj-narrow { max-width: var(--hj-maxw-rd); }
.hj-center { text-align: center; margin-inline: auto; }

/* Section sombre (inversée) */
.hj-section--dark { background: var(--hj-blue-deep); color: var(--hj-on-dark); }
.hj-section--dark h1, .hj-section--dark h2, .hj-section--dark h3, .hj-section--dark h4 { color: #fff; }
.hj-section--dark p { color: var(--hj-on-dark-mute); }

/* Sur-titres / kickers */
.hj-kicker {
	display: inline-flex; align-items: center; gap: .5em;
	font-size: var(--hj-small); font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--hj-blue);
}
/* Croix médicale (motif de marque) en tête de kicker */
.hj-kicker::before { content: "+"; font-weight: 800; font-size: 1.15em; line-height: 0; color: var(--hj-red); }
.hj-section--dark .hj-kicker { color: var(--hj-accent-bright); }

.hj-lead { font-size: var(--hj-lead); line-height: 1.5; color: var(--hj-mute); max-width: 60ch; }
.hj-section--dark .hj-lead { color: var(--hj-on-dark-mute); }

/* ---------- Boutons (pill, magnétiques) ---------- */
.hj-btn {
	--bg: var(--hj-blue);
	--fg: #fff;
	display: inline-flex; align-items: center; gap: .6em;
	padding: .92em 1.7em; border-radius: var(--hj-radius-pill);
	background: var(--bg); color: var(--fg);
	font-family: var(--hj-sans); font-weight: 600; font-size: 1rem;
	line-height: 1; text-decoration: none; border: 0; cursor: pointer;
	will-change: transform;
	transition: transform .3s var(--hj-ease), box-shadow .3s var(--hj-ease), background .25s ease;
}
.hj-btn:hover { box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--bg) 65%, transparent); transform: translateY(-2px); }
.hj-btn:active { transform: translateY(0); }
.hj-btn .hj-btn__icon { transition: transform .3s var(--hj-ease); }
.hj-btn:hover .hj-btn__icon { transform: translateX(3px); }
.hj-btn--accent { --bg: var(--hj-accent); --fg: #fff; }
.hj-btn--accent:hover { background: var(--hj-accent-bright); box-shadow: var(--hj-glow); }
.hj-btn--ghost { --bg: transparent; --fg: var(--hj-ink); border: 1.5px solid var(--hj-line); }
.hj-btn--ghost:hover { border-color: var(--hj-blue); background: var(--hj-blue-soft); box-shadow: none; }
.hj-section--dark .hj-btn--ghost { --fg: #fff; border-color: rgba(255,255,255,.28); }
.hj-section--dark .hj-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* ---------- Badges / labels (HDS, offline, chiffré) ---------- */
.hj-badge {
	display: inline-flex; align-items: center; gap: .45em;
	font-size: .78rem; font-weight: 600; letter-spacing: .02em;
	padding: .42em .85em; border-radius: var(--hj-radius-pill);
	background: color-mix(in srgb, var(--hj-accent) 14%, transparent);
	color: var(--hj-blue-deep);
	border: 1px solid color-mix(in srgb, var(--hj-accent) 28%, transparent);
}
.hj-badge--blue { background: var(--hj-blue-soft); color: var(--hj-blue); border-color: color-mix(in srgb, var(--hj-blue) 22%, transparent); }
.hj-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: var(--hj-accent); }
/* Badge sur surface sombre (footer, sections inversées) */
.hj-section--dark .hj-badge, .hj-footer .hj-badge {
	background: rgba(255, 255, 255, .07); color: var(--hj-on-dark);
	border-color: rgba(255, 255, 255, .18);
}
.hj-section--dark .hj-badge__dot, .hj-footer .hj-badge__dot { background: var(--hj-red-bright); }

/* ---------- Cartes (glassy) ---------- */
.hj-card {
	position: relative; background: var(--hj-white);
	border: 1px solid var(--hj-line-soft); border-radius: var(--hj-radius);
	padding: clamp(1.5rem, 3vw, 2.4rem);
	box-shadow: var(--hj-shadow-sm);
	transition: transform .4s var(--hj-ease), box-shadow .4s var(--hj-ease);
}
.hj-card--hover:hover { transform: translateY(-6px); box-shadow: var(--hj-shadow); }
.hj-card__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px; background: var(--hj-blue-soft); color: var(--hj-blue); margin-bottom: 1rem; }
.hj-card__icon:has(img) { width: 3.6rem; height: 3.6rem; background: transparent; }
.hj-card__icon img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; }
.hj-card__media { border-radius: var(--hj-radius-sm); overflow: clip; margin-bottom: 1.2rem; aspect-ratio: 16/10; }
.hj-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hj-card h3 { margin-bottom: .35em; }
.hj-card p:last-child { margin-bottom: 0; }
.hj-section--dark .hj-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: var(--hj-on-dark); box-shadow: none; }

/* ---------- Bento grid (signature startup) ---------- */
.hj-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--hj-gap); }
.hj-bento > * { grid-column: span 6; }
.hj-bento > .is-wide { grid-column: span 8; }
.hj-bento > .is-third { grid-column: span 4; }
.hj-bento > .is-half { grid-column: span 6; }
.hj-bento > .is-full { grid-column: span 12; }
.hj-bento > .is-tall { grid-row: span 2; }
@media (max-width: 860px) {
	.hj-bento > * { grid-column: span 12 !important; grid-row: auto !important; }
}

/* Grille 2 colonnes générique (image + texte) */
.hj-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hj-split--media-right { direction: ltr; }
@media (max-width: 860px) { .hj-split { grid-template-columns: 1fr; } }

/* ---------- États reveal ----------
   Les états initiaux sont posés par app.js (gsap.set pour les reveals au scroll,
   timeline.from pour le héros qui lit l'opacité naturelle). Pas de masquage CSS
   ici : sinon gsap.from() lirait 0 comme état final et n'animerait jamais. */

/* Média arrondi */
.hj-media { border-radius: var(--hj-radius); overflow: clip; box-shadow: var(--hj-shadow); }
.hj-media img { width: 100%; object-fit: cover; }

/* Filets */
.hj-rule { height: 1px; background: var(--hj-line); border: 0; margin-block: var(--hj-gap); }

/* Utilitaires */
.hj-stack > * + * { margin-top: var(--hj-gap); }
.hj-cluster { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hj-mt-s { margin-top: 1rem; } .hj-mt-m { margin-top: 2rem; } .hj-mt-l { margin-top: 3.5rem; }

/* ============================================================
   Nav + barre de progression (Task 6)
   ============================================================ */
/* Overlay de transition de page (fondu navy continu) */
.hj-transition {
	position: fixed; inset: 0; z-index: 90;
	background: var(--hj-blue-deep);
	opacity: 0; visibility: hidden; pointer-events: none;
}
.hj-entering .hj-transition { opacity: 1; visibility: visible; }

.hj-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 100%;
	transform: scaleX(0); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--hj-blue), var(--hj-accent));
	z-index: 60; pointer-events: none;
}

.hj-nav {
	position: fixed; inset: 0 0 auto 0; z-index: 50;
	border-bottom: 1px solid transparent;
	transition: transform .4s var(--hj-ease), border-color .3s ease;
}
/* Fond + flou sur un calque dédié : .hj-nav ne doit PAS porter backdrop-filter
   (sinon il devient le bloc conteneur du menu mobile fixed → overlay cassé). */
.hj-nav::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: color-mix(in srgb, var(--hj-paper) 72%, transparent);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	transition: background .3s ease;
}
.hj-nav.is-scrolled::before { background: color-mix(in srgb, var(--hj-paper) 90%, transparent); }
.hj-nav.is-scrolled { border-bottom-color: var(--hj-line-soft); }
.hj-nav.is-hidden { transform: translateY(-100%); }
.hj-nav__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.5rem; justify-content: space-between; padding-block: .85rem; }

/* Logo (image de marque) */
.hj-logo { height: 34px; width: auto; display: block; }
.hj-logo--footer { height: 46px; }
@media (max-width: 600px) { .hj-logo { height: 30px; } }

/* Wordmark (fallback texte si pas de logo) */
.hj-nav__brand { display: inline-flex; align-items: baseline; gap: .4em; text-decoration: none; color: var(--hj-ink); }
.hj-wordmark { font-family: var(--hj-serif); font-weight: 600; font-size: 1.55rem; letter-spacing: -.01em; line-height: 1; color: var(--hj-blue); }
.hj-wordmark__dot { color: var(--hj-accent); }
.hj-wordmark__sub { font-family: var(--hj-sans); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hj-mute); }
.hj-wordmark--light { color: #fff; font-size: 1.8rem; }

/* Menu */
.hj-menu { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.hj-menu a { position: relative; text-decoration: none; color: var(--hj-ink); font-weight: 500; padding-block: .3em; }
.hj-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--hj-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--hj-ease); }
.hj-menu a:hover::after, .hj-menu .current-menu-item > a::after { transform: scaleX(1); }
.hj-menu .current-menu-item > a { color: var(--hj-blue); }

.hj-nav__cta { padding: .7em 1.3em; }

/* Burger (mobile) */
.hj-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.hj-burger span { width: 24px; height: 2px; background: var(--hj-ink); border-radius: 2px; transition: transform .3s var(--hj-ease), opacity .2s ease; }

@media (max-width: 860px) {
	.hj-nav__cta { display: none; }
	.hj-burger { display: inline-flex; position: relative; z-index: 60; }

	/* Menu plein écran déroulant */
	.hj-nav__menu {
		position: fixed; inset: 0; z-index: 55;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		background: color-mix(in srgb, var(--hj-paper) 98%, transparent);
		backdrop-filter: blur(8px);
		opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
	}
	.hj-menu { flex-direction: column; gap: 1.6rem; text-align: center; }
	.hj-menu a { font-family: var(--hj-serif); font-size: 1.8rem; }
	.hj-menu-open .hj-nav__menu { opacity: 1; visibility: visible; }
	.hj-menu-open { overflow: hidden; }
	/* Menu ouvert : neutraliser l'auto-hide (transform créerait un bloc conteneur). */
	.hj-menu-open .hj-nav.is-hidden { transform: none; }
	.hj-menu-open .hj-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.hj-menu-open .hj-burger span:nth-child(2) { opacity: 0; }
	.hj-menu-open .hj-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   Footer éditorial (Task 6)
   ============================================================ */
.hj-footer { background: var(--hj-blue-deep); color: var(--hj-on-dark); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.hj-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .hj-footer__grid { grid-template-columns: 1fr; } }
.hj-footer h3 { color: #fff; font-family: var(--hj-sans); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.hj-footer p { color: var(--hj-on-dark-mute); }
.hj-footer__brand p { max-width: 34ch; }
.hj-footer__hds { margin-top: 1.2rem; }
.hj-footer__menu, .hj-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hj-footer__menu a, .hj-footer__contact a { color: var(--hj-on-dark); text-decoration: none; transition: color .2s ease; }
.hj-footer__menu a:hover, .hj-footer__contact a:hover { color: var(--hj-accent-bright); }
.hj-footer__contact li { color: var(--hj-on-dark-mute); }
.hj-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--hj-small); color: var(--hj-on-dark-mute); }
.hj-footer__legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hj-footer__legal-links a { color: var(--hj-on-dark-mute); text-decoration: none; }
.hj-footer__legal-links a:hover { color: #fff; }

/* ============================================================
   Sections animées (Task 7) — hero, reveal, counters, hscroll,
   partenaires, cta
   ============================================================ */

/* En-tête de section */
.hj-section__head { max-width: 720px; }
.hj-section__head.hj-center { margin-inline: auto; }

/* ---------- Hero ---------- */
.hj-hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding-block: clamp(7rem, 12vh, 10rem) var(--hj-section); overflow: clip; }
.hj-hero__inner { position: relative; z-index: 1; width: 100%; }
.hj-hero--split .hj-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hj-hero--center { text-align: center; }
.hj-hero--center .hj-hero__inner { max-width: 900px; margin-inline: auto; }
.hj-hero--center .hj-lead { margin-inline: auto; }
.hj-hero--center .hj-cluster { justify-content: center; }
/* Hero compact (pages courtes : Contact) — pas de plein écran */
.hj-hero--compact { min-height: auto; padding-block: clamp(7rem, 13vh, 9.5rem) clamp(2rem, 4vw, 3.5rem); }
.hj-hero--compact .hj-hero__scroll { display: none; }
.hj-hero__title { font-size: var(--hj-h1); margin-bottom: .35em; }
.hj-hero__title .hj-line { overflow: hidden; padding-bottom: .08em; }
.hj-hero__lead { margin-block: 1.2rem 1.6rem; }
.hj-hero__cta { margin-top: 1.8rem; }
.hj-hero__media { aspect-ratio: 4/5; }
@media (max-width: 860px) {
	.hj-hero--split .hj-hero__inner { grid-template-columns: 1fr; }
	.hj-hero__media { order: -1; aspect-ratio: 16/11; max-height: 42vh; }
}

/* Aurora (glow maîtrisé bleu + rouge) */
.hj-hero__aurora, .hj-cta__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hj-hero__aurora::before, .hj-hero__aurora::after,
.hj-cta__aurora::before, .hj-cta__aurora::after {
	content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
}
.hj-hero__aurora::before { width: 46vw; height: 46vw; top: -14%; right: -8%; background: radial-gradient(circle, color-mix(in srgb, var(--hj-blue) 55%, transparent), transparent 68%); }
.hj-hero__aurora::after  { width: 32vw; height: 32vw; bottom: -12%; left: -6%; background: radial-gradient(circle, color-mix(in srgb, var(--hj-red) 40%, transparent), transparent 70%); opacity: .35; }

/* Indicateur de scroll */
.hj-hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: 24px; height: 38px; border: 2px solid var(--hj-line); border-radius: 14px; display: grid; place-items: start center; padding-top: 6px; z-index: 1; }
.hj-hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--hj-blue); animation: hj-scroll 1.6s var(--hj-ease) infinite; }
@keyframes hj-scroll { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0; } }

/* Reduced-motion : couper les animations CSS pures (non pilotées par GSAP). */
@media (prefers-reduced-motion: reduce) {
	.hj-hero__scroll span { animation: none; opacity: 1; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Counters ---------- */
.hj-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.hj-counter__num { display: block; font-family: var(--hj-serif); font-weight: 600; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: #fff; }
.hj-section:not(.hj-section--dark) .hj-counter__num { color: var(--hj-blue); }
.hj-counter__label { display: block; margin-top: .6rem; font-size: .95rem; color: var(--hj-on-dark-mute); }
.hj-section:not(.hj-section--dark) .hj-counter__label { color: var(--hj-mute); }

/* ---------- Scroll horizontal ---------- */
.hj-hscroll { padding-block: var(--hj-section); overflow: hidden; }
.hj-hscroll__head { max-width: 720px; margin-bottom: 2.5rem; }
.hj-track { display: flex; gap: clamp(1.2rem, 2.5vw, 2rem); padding-inline: clamp(1.2rem, 4vw, 2.6rem); }
.hj-hcard { flex: 0 0 min(82vw, 420px); background: var(--hj-white); border: 1px solid var(--hj-line-soft); border-radius: var(--hj-radius); overflow: clip; box-shadow: var(--hj-shadow-sm); display: flex; flex-direction: column; }
.hj-hcard__media { aspect-ratio: 4/3; }
.hj-hcard__body { padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem; }
.hj-hcard__num { font-family: var(--hj-serif); font-size: 1.4rem; color: var(--hj-red); }
.hj-hcard__body h3 { margin: 0; }
.hj-hcard__body p { margin: 0; }
@media (max-width: 860px) {
	/* Dégradé : pile verticale (pas de pin sur mobile) */
	.hj-track { flex-direction: column; align-items: stretch; }
	.hj-hcard { flex: 1 1 auto; width: 100%; }
}

/* ---------- Partenaires (marquee) ---------- */
.hj-partners__title { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hj-mute); margin-bottom: 2rem; }
.hj-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hj-marquee__track { display: flex; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; align-items: center; }
/* Boîte fixe par logo → tailles harmonisées malgré des aspects très différents */
.hj-partner { flex: 0 0 auto; width: 160px; height: 62px; display: grid; place-items: center; }
.hj-partner__img { max-width: 140px !important; max-height: 50px !important; width: auto !important; height: auto !important; object-fit: contain !important; aspect-ratio: auto !important; filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: filter .3s ease, opacity .3s ease; }
.hj-partner:hover .hj-partner__img { filter: grayscale(0); opacity: 1; }

/* ---------- Formulaire (Contact Form 7) ---------- */
.hj-form .wpcf7-form { display: grid; gap: 1.1rem; }
.hj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .hj-form-row { grid-template-columns: 1fr; } }
.hj-form label { display: grid; gap: .4rem; font-weight: 500; font-size: .92rem; color: var(--hj-ink); }
.hj-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%; padding: .85em 1em; font: inherit; color: var(--hj-ink);
	background: var(--hj-white); border: 1.5px solid var(--hj-line);
	border-radius: var(--hj-radius-sm); transition: border-color .2s ease, box-shadow .2s ease;
}
.hj-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.hj-form .wpcf7-form-control:focus { outline: none; border-color: var(--hj-blue); box-shadow: 0 0 0 3px var(--hj-blue-soft); }
.hj-form .wpcf7-submit {
	justify-self: start; margin-top: .4rem; padding: .92em 1.8em;
	background: var(--hj-accent); color: #fff; font-weight: 600; font-size: 1rem;
	border: 0; border-radius: var(--hj-radius-pill); cursor: pointer;
	transition: background .25s ease, box-shadow .3s var(--hj-ease), transform .25s ease;
}
.hj-form .wpcf7-submit:hover { background: var(--hj-accent-bright); box-shadow: var(--hj-glow); transform: translateY(-2px); }
.hj-form .wpcf7-not-valid-tip { color: var(--hj-red-bright); font-size: .82rem; font-weight: 500; }
.hj-form .wpcf7-response-output { margin: .5rem 0 0; padding: .8em 1em; border-radius: var(--hj-radius-sm); font-size: .9rem; border-width: 1.5px; }
.hj-form-missing { color: var(--hj-mute); font-style: italic; }
.hj-section--dark .hj-form label { color: var(--hj-on-dark); }
.hj-section--dark .hj-form .wpcf7-form-control:not(.wpcf7-submit) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }

/* ---------- CTA final ---------- */
.hj-cta { position: relative; background: var(--hj-blue-deep); color: var(--hj-on-dark); overflow: clip; border-radius: 0; }
.hj-cta__inner { position: relative; z-index: 1; max-width: 760px; }
.hj-cta h2 { color: #fff; }
.hj-cta .hj-lead { color: var(--hj-on-dark-mute); }
.hj-cta .hj-kicker { color: var(--hj-accent-bright); justify-content: center; }
/* Bouton ghost lisible sur le fond sombre du CTA */
.hj-cta .hj-btn--ghost { --fg: #fff; border-color: rgba(255, 255, 255, .3); }
.hj-cta .hj-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; box-shadow: none; }
.hj-cta__aurora::before { content: ""; position: absolute; width: 50vw; height: 50vw; top: -30%; left: 50%; transform: translateX(-50%); border-radius: 50%; filter: blur(80px); opacity: .4; background: radial-gradient(circle, color-mix(in srgb, var(--hj-red) 45%, transparent), transparent 70%); }