/* ==========================================================================
   Jolifish Europe — feuille du site (kit Jolifish 1.15.3)
   La descente : chaque page part de la surface (ciel clair, la méduse qui
   flotte) et finit dans les abysses (bleu nuit, le néon comme une
   bioluminescence). Une seule police, Montserrat, en grands titres fins.
   Les classes visées sont celles que le moteur écrit (balisage.html).
   Seuils : 1160, 940, 720, 480 px — les mêmes que le thème.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
}

:root {
	/* Jetons du kit (surchargés par site.tokens) */
	--ink: #0b2236;
	--muted: #3f5568;
	--line: #cfe0ee;
	--paper: #ffffff;
	--soft: #eaf4fc;
	--purple: #006d66;      /* accent foncé : le thème l’emploie sous du texte blanc */
	--pink: #ff7a59;        /* corail de la méduse : accents décoratifs */
	--night: #06192b;
	--radius: 18px;
	--container: 1200px;

	/* Dérivés */
	--sky-1: #cfe8fb;
	--sky-2: #e6f2fc;
	--sky-3: #f4f9fe;
	--neon: #28fff2;        /* néon Jolifish : fond des boutons d’action */
	--teal: var(--purple);  /* le néon assombri, lisible en texte (AA) */
	--coral-ink: #b8401f;   /* le corail assombri, lisible en texte (AA) */
	--neon-hover: #8afff8;
	--shadow-1: 0 1px 2px rgba(11, 34, 54, .06), 0 10px 30px -18px rgba(11, 34, 54, .28);
	--shadow-2: 0 2px 4px rgba(11, 34, 54, .06), 0 22px 44px -22px rgba(11, 34, 54, .34);
	--radius-s: 12px;
	--radius-l: 28px;
	--font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--gutter: 40px;
	--section-y: 112px;
	--pad-card: 32px;
	--pad-l: 44px;
	--pad-xl: 64px;
	--rule: rgba(11, 34, 54, .16);      /* filets fins entre les éléments d’un index */
	--rule-dark: rgba(255, 255, 255, .16);
	--on-dark: #dce8f2;
	--on-dark-muted: #a9bfd1;
}

/* ---------------------------------------------------------------- Base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.65;
	color: var(--ink);
	background-color: var(--sky-3);
	background-image: linear-gradient(170deg, var(--sky-1) 0, var(--sky-2) 34rem, var(--sky-3) 62rem);
	background-repeat: no-repeat;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

[hidden] { display: none !important; }

img,
video,
svg { max-width: 100%; }

img { height: auto; display: block; }

a { color: var(--teal); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 500;
	color: var(--ink);
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

li,
td,
summary,
figcaption,
blockquote,
.feature-list span { text-wrap: pretty; }

strong { font-weight: 600; }

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection { background: var(--neon); color: var(--ink); }

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--gutter);
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: middle;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius-s);
	font-weight: 600;
	text-decoration: none;
}
.skip-link:hover,
.skip-link:focus { top: 16px; color: var(--paper); }

/* ---------------------------------------------------------------- Boutons */

.btn,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	padding: .8em 1.4em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.button-primary {
	background: var(--neon);
	color: var(--ink);
	border-color: var(--neon);
}
.btn-primary:hover,
.button-primary:hover { background: var(--neon-hover); border-color: var(--neon-hover); color: var(--ink); }

.btn-secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

.btn-light {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
.btn-light:hover { background: var(--soft); border-color: var(--soft); color: var(--ink); }

.btn-small { min-height: 40px; padding: .55em 1.1em; font-size: .9rem; }

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 14px;
	margin-top: 32px;
}

.text-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-weight: 600;
	color: var(--teal);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .35em;
	transition: color .2s var(--ease), text-underline-offset .2s var(--ease);
}
/* Pas de flèche décorative : le soulignement dit déjà que c’est un lien. */
.text-link .icon,
.btn .icon { display: none; }
a.text-link:hover { color: var(--ink); text-underline-offset: .22em; }

/* ---------------------------------------------------------------- En-tête */

.site-header {
	position: sticky;
	top: 0;
	z-index: 80;
	height: auto;
	padding-top: 14px;
	background: transparent;
	border-bottom: 0;
}

.header-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 72px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
	width: auto;
	height: auto;
	max-width: calc(var(--container) + 2 * var(--gutter) - 24px);
}

/* La barre se densifie dès qu’on quitte le haut de page (navigateurs récents). */
@supports (animation-timeline: scroll()) {
	.header-inner {
		animation: entete-defile linear both;
		animation-timeline: scroll(root);
		animation-range: 0 140px;
	}
}
@keyframes entete-defile {
	from { background-color: rgba(255, 255, 255, .7); }
	to { background-color: rgba(255, 255, 255, .95); box-shadow: var(--shadow-2); }
}

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	color: var(--ink);
	text-decoration: none;
}
.brand-logo { width: auto; height: 38px; }
.brand-mot { font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; }
.brand-marque { display: inline-flex; }

.main-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 auto;
	font-size: 1rem;
	font-weight: 400;
}

.nav-link,
.nav-group > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease);
}
.nav-link:hover,
.nav-group > summary:hover,
.nav-group[open] > summary { background: var(--soft); color: var(--ink); }
.nav-link[aria-current],
.nav-group > summary[aria-current] { box-shadow: inset 0 -2px 0 var(--neon); border-radius: 0; }

.nav-group { position: relative; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.chevron { width: 12px; height: 12px; stroke-width: 1.6; transition: transform .2s var(--ease); }
.nav-group[open] .chevron { transform: rotate(180deg); }

.nav-dropdown {
	border: 0;
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: 60;
	display: grid;
	gap: 2px;
	width: min(340px, 86vw);
	padding: 10px;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: var(--shadow-2);
	transform: translateX(-50%);
}
.nav-dropdown a {
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border-radius: var(--radius-s);
	font-weight: 600;
	font-size: .95rem;
	color: var(--ink);
	text-decoration: none;
}
.nav-dropdown a:hover,
.nav-dropdown a[aria-current] { background: var(--soft); }
.nav-dropdown small { font-size: .82rem; font-weight: 400; color: var(--muted); }

.mobile-only { display: none; }

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}
.header-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--soft);
	font-size: .9rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	transition: background-color .2s var(--ease);
}
.header-account svg { width: 20px; height: 20px; }
.header-account:hover { background: var(--line); color: var(--ink); }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--soft);
	color: var(--ink);
	cursor: pointer;
}

.lang-switch { position: relative; font-size: .9rem; }
.lang-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	display: grid;
	padding: 8px;
	background: var(--paper);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-2);
}
.lang-dropdown a { padding: 6px 12px; color: var(--ink); text-decoration: none; }

/* ---------------------------------------------------------------- Accueil */

/* La surface : un très grand titre fin, et la méduse qui flotte à côté, sans cadre. */
.home-intro { position: relative; padding: 72px 0 120px; overflow: clip; }

.intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, .62fr);
	align-items: center;
	gap: 24px;
}
.intro-copy { position: relative; z-index: 2; }

.intro-copy h1 {
	font-size: clamp(2.8rem, 5vw, 4.4rem);
	font-weight: 300;
	line-height: .98;
	letter-spacing: -.05em;
}

.eyebrow {
	display: block;
	margin-bottom: 16px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--teal);
}

.home-intro .lead,
.page-hero .lead {
	max-width: 56ch;
	margin-top: 32px;
	font-size: clamp(1.1rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	color: var(--muted);
}

.intro-foot {
	margin-top: 28px;
	font-size: .95rem;
	color: var(--muted);
}

/* Note sous l’introduction (partenariat Belooga, repères de l’agence). */
.hero-notes {
	max-width: 56ch;
	margin-top: 24px;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--muted);
}

.hero-notes a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* La méduse est détourée : elle flotte librement, plus grande que sa colonne. */
.media--hero {
	position: relative;
	justify-self: center;
	width: min(150%, 620px);
	margin: -110px -18% -90px -14%;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.media--hero img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ---------------------------------------------------------------- En-tête de page */

.page-hero { padding: 64px 0 72px; }

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-bottom: 28px;
	font-size: .9rem;
	color: var(--muted);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 500; }

.page-hero h1 {
	max-width: 23ch;
	font-size: clamp(2.6rem, 5.2vw, 4.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.045em;
}

.kicker {
	display: block;
	margin-bottom: 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--teal);
}

/* ---------------------------------------------------------------- Sections */

.section { padding: var(--section-y) 0; }

.section.soft {
	background-color: var(--sky-2);
	background-image: linear-gradient(180deg, var(--sky-1), var(--sky-2) 70%);
}

.section.dark {
	background: var(--night);
	color: #e8f1f8;
}
.section.dark h2,
.section.dark h3 { color: var(--paper); }
.section.dark .section-title p { color: #c4d4e1; }
.section.dark a:not(.btn) { color: var(--paper); }

.section-title { max-width: 760px; }
.section-title h2 {
	font-size: clamp(2.2rem, 4.2vw, 3.6rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -.035em;
}
.section-title p {
	margin-top: 18px;
	font-size: 1.1rem;
	color: var(--muted);
	max-width: 56ch;
}

.section-title + .grid-2,
.section-title + .grid-3,
.section-title + .grid-4,
.section-title + .faq,
.section-title + .gallery,
.section-title + .compare-table,
.section-title + .stats-row,
.section-title + .filters,
.row-title + .grid-2,
.row-title + .grid-3,
.row-title + .grid-4 { margin-top: clamp(36px, 4vw, 52px); }

.row-title {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
}
.row-title > .text-link { margin-bottom: 6px; }

/* ---------------------------------------------------------------- Grilles et cartes */

.grid-2,
.grid-3,
.grid-4 {
	display: grid;
	gap: 56px 40px;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Pas de boîtes : un index. Chaque élément est posé sous un filet fin ;
   ceux qui ont une image sont portés par l’image. */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 28px 0 0;
	background: none;
	border-top: 1px solid var(--rule);
	border-radius: 0;
	box-shadow: none;
	color: var(--ink);
	text-decoration: none;
}
.card:has(> .card__media),
.card:has(> .post-thumb),
.post-card { padding-top: 0; border-top: 0; }
.card h3 {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.card p { max-width: 54ch; color: var(--muted); font-size: 1rem; }
.card > .text-link { margin-top: auto; padding-top: 8px; }

a.card h3 { transition: color .2s var(--ease); }
a.card:hover { color: var(--ink); }
a.card:hover h3 { color: var(--teal); }

/* Carte cliquable : le lien de pied reste aligné en bas de la carte. */
.use-card { height: 100%; }
.use-card > .text-link { margin-top: auto; padding-top: 8px; }

/* Icône et titre côte à côte */
.card:has(> .icon-badge) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	column-gap: 14px;
	row-gap: 12px;
}
.card:has(> .icon-badge) > :not(.icon-badge):not(h3) { grid-column: 1 / -1; }
.card:has(> .icon-badge) > h3 { align-self: center; }
.card:has(> .icon-badge) > .text-link { align-self: end; }

.icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--teal);
}
.icon-badge .icon { width: 24px; height: 24px; }

.tag,
.resource-kind {
	align-self: flex-start;
	font-size: .85rem;
	font-weight: 600;
	color: var(--teal);
}
.tag {
	padding: 4px 12px;
	background: var(--soft);
	border-radius: 999px;
	color: var(--ink);
}
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.card > .card__media,
.card > .post-thumb {
	margin: 0 0 10px;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--soft);
}
.card .card__media img,
.card .post-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
a.card:hover .card__media img,
a.card:hover .post-thumb img { transform: scale(1.03); }
/* Les visuels qui sont des logos restent entiers, posés sur fond blanc. */
.card .card__media img[src*="logo"] {
	object-fit: contain;
	padding: 28px;
	background: var(--paper);
}
.tag { background: rgba(255, 255, 255, .7); }

/* Étapes et chronologie */
.step-card .number {
	font-size: clamp(2.6rem, 3.6vw, 3.4rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--coral-ink);
	font-variant-numeric: tabular-nums;
}

.resource-card h3 { font-size: 1.15rem; }

.feature-card,
.feature-presentation { display: flex; flex-direction: column; gap: 12px; }
.feature-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; }

.note {
	margin-top: 28px;
	max-width: 62ch;
	padding: 18px 24px;
	border-radius: var(--radius-s);
	background: rgba(40, 255, 242, .16);
	color: var(--ink);
}

/* Filtres */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.filter {
	min-height: 42px;
	padding: 8px 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	font: inherit;
	font-size: .92rem;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"],
.filters .filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
a.filter { display: inline-flex; align-items: center; text-decoration: none; }
.filter-count { margin: 18px 0 0; font-size: .92rem; color: var(--muted); }
.filter-count + .grid-2,
.filter-count + .grid-3,
.filter-count + .grid-4 { margin-top: 20px; }
.empty { margin-top: 24px; color: var(--muted); }

/* ---------------------------------------------------------------- Deux colonnes */

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}
.split.reverse > :first-child { order: 2; }
.split .text-link { margin-top: 28px; }

.feature-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--rule);
}
.feature-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 18px;
	row-gap: 4px;
	padding: 22px 0;
	background: none;
	border-top: 1px solid var(--rule);
	border-radius: 0;
	box-shadow: none;
}
.feature-list .icon {
	grid-row: span 2;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	color: var(--teal);
}
.feature-list strong { font-size: 1.05rem; font-weight: 600; }
.feature-list span { color: var(--muted); font-size: .98rem; }

.media { margin: 0; }
.media--split img {
	width: 100%;
	max-height: 600px;
	object-fit: cover;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-1);
}
.media--split { border-radius: var(--radius-l); }
/* Les illustrations animées sont des hublots sur les abysses : un liseré clair les détache. */
.media--split img[src$="avif"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), var(--shadow-2); }

/* ---------------------------------------------------------------- Appels à l’action */

/* Les abysses : le dernier appel à l’action occupe toute la largeur et se
   fond dans le pied de page. Le néon n’apparaît que là, comme une lumière. */
.section:has(> .container > .wide-cta) {
	padding: 136px 0 112px;
	background-color: var(--night);
	background-image: linear-gradient(180deg, #0c3150 0%, var(--night) 62%);
	color: var(--on-dark);
}
.wide-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 44px 64px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--on-dark);
}
/* Les titres coupés à la main (retour à la ligne forcé) gardent leurs lignes : pas d’équilibrage. */
.page-hero h1:has(br),
.wide-cta h2:has(br) { text-wrap: pretty; }
.wide-cta h2 {
	max-width: 22ch;
	font-size: clamp(2.6rem, 5.2vw, 4.6rem);
	font-weight: 300;
	line-height: 1;
	color: var(--paper);
	letter-spacing: -.045em;
}
.wide-cta p { margin-top: 28px; max-width: 52ch; font-size: 1.12rem; color: var(--on-dark-muted); }
.wide-cta .kicker { color: var(--paper); }
.wide-cta .actions { margin-top: 0; justify-content: flex-start; }
.wide-cta .btn-primary { background: var(--neon); border-color: var(--neon); color: var(--ink); }
.wide-cta .btn-primary:hover { background: var(--paper); border-color: var(--paper); }
.wide-cta .btn-light { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .55); }
.wide-cta .btn-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.wide-cta a:focus-visible { outline-color: var(--paper); }
.wide-cta .btn-secondary { color: var(--paper); border-color: var(--paper); }

.cta-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: var(--pad-l);
	border-radius: var(--radius-l);
	background: var(--paper);
	box-shadow: var(--shadow-1);
}
.cta-inline h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; }
.cta-inline p { margin-top: 10px; color: var(--muted); max-width: 56ch; }

/* Quand la page se termine par un appel court (articles, pages du thème), il
   descend lui aussi dans les abysses. */
main > .section:last-child:has(> .container > .cta-inline) {
	padding: 112px 0 96px;
	background-color: var(--night);
	background-image: linear-gradient(180deg, #0c3150 0%, var(--night) 62%);
}
main > .section:last-child > .container > .cta-inline {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
main > .section:last-child > .container > .cta-inline h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--paper); letter-spacing: -.04em; }
main > .section:last-child > .container > .cta-inline p { color: var(--on-dark-muted); font-size: 1.08rem; }
main > .section:last-child > .container > .cta-inline a:focus-visible { outline-color: var(--paper); }

/* ---------------------------------------------------------------- FAQ */

.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary {
	position: relative;
	display: block;
	padding: 24px 52px 24px 0;
	font-size: 1.14rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background:
		linear-gradient(var(--ink), var(--ink)) center / 12px 1.6px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 1.6px 12px no-repeat,
		var(--soft);
	transition: transform .25s var(--ease);
}
.faq details[open] summary::after {
	transform: rotate(45deg);
}
.faq summary:hover { color: var(--teal); }
.faq details p {
	max-width: 60ch;
	padding: 0 52px 24px 0;
	color: var(--muted);
}

/* ---------------------------------------------------------------- Tableau comparatif */

.compare-table {
	overflow-x: auto;
	padding: 8px;
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow-1);
}
.compare-table table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 1rem;
}
.compare-table caption {
	padding: 18px 24px 0;
	text-align: left;
	font-size: .9rem;
	color: var(--muted);
	caption-side: bottom;
	padding-bottom: 18px;
}
.compare-table th,
.compare-table td {
	padding: 16px 24px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
.compare-table thead th {
	background: var(--soft);
	font-weight: 600;
}
.compare-table tbody th { font-weight: 600; width: 22%; }
.compare-table td { color: var(--muted); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }

/* ---------------------------------------------------------------- Chiffres, logos, citations */

.stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.stat strong { display: block; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 300; line-height: 1; }
.stat span { display: block; margin-top: 10px; font-weight: 600; }
.stat p { margin-top: 6px; color: var(--muted); }

.logo-band .section-title { margin-bottom: 28px; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.logo-row img { max-height: 48px; width: auto; }

.quote-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.quote-row.single { grid-template-columns: minmax(0, 760px); }
.quote { margin: 0; padding: 32px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.quote blockquote { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.quote figcaption { margin-top: 18px; display: grid; gap: 2px; }
.quote figcaption span { color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- Galerie */

.gallery { display: grid; gap: clamp(14px, 2vw, 24px); }
.gallery.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__item { margin: 0; }
.gallery .gallery__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--soft);
}
.gallery__item figcaption { margin-top: 10px; font-size: .92rem; color: var(--muted); }

/* ---------------------------------------------------------------- Vidéo, tarifs */

.video-heading { margin-bottom: 32px; }
.video-frame { width: 100%; border-radius: var(--radius-l); background: var(--night); }
.video-caption { margin-top: 12px; font-size: .92rem; color: var(--muted); }

.pricing-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.pricing-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.pricing-card.featured { box-shadow: 0 0 0 2px var(--ink), var(--shadow-2); }
.price strong { font-size: 2rem; font-weight: 500; }
.unit { margin-left: 6px; color: var(--muted); font-size: .95rem; }
.plan-desc { color: var(--muted); }
.plan-features { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-features li { display: flex; gap: 10px; }
.plan-features .icon { color: var(--teal); }
.pricing-card .btn { margin-top: auto; }

/* ---------------------------------------------------------------- Contenu long */

.article-title {
	max-width: 32ch;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	margin-bottom: 28px;
}
.section > .container > .article-body { max-width: 58ch; }
.article-body { font-size: 1.08rem; line-height: 1.75; }
.article-body > * + * { margin-top: 1.1em; }
.article-body > h3 {
	margin-top: 2.1em;
	font-size: 1.32rem;
	font-weight: 600;
	line-height: 1.3;
}
.article-body > h3 + p { margin-top: .6em; }
.article-body > ul,
.article-body > ol { padding-left: 1.3em; }
.article-body > ul > li + li,
.article-body > ol > li + li { margin-top: .5em; }
.article-body > ul > li::marker,
.article-body > ol > li::marker { color: var(--teal); font-weight: 600; }
.article-body > p a,
.article-body > ul a,
.article-body > ol a { font-weight: 500; }

/* ---------------------------------------------------------------- Formulaires */

.jolifish-form { max-width: 880px; }
.jolifish-form .section-title { margin-bottom: 32px; }
.jolifish-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}
.jolifish-form-group { display: grid; gap: 8px; min-width: 0; }
.jolifish-form-group:has(textarea),
.jolifish-form-group:has(select),
.jolifish-form-group:has(button),
.jolifish-form-group:only-child { grid-column: 1 / -1; }
.jolifish-form-group label,
.jolifish-form-option label { font-weight: 600; font-size: .95rem; }

.jolifish-form input,
.jolifish-form select,
.jolifish-form textarea,
.nf-form-cont input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-cont select,
.nf-form-cont textarea {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--paper);
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.jolifish-form textarea,
.nf-form-cont textarea { min-height: 160px; resize: vertical; }
.jolifish-form input:focus,
.jolifish-form select:focus,
.jolifish-form textarea:focus,
.nf-form-cont input:focus,
.nf-form-cont select:focus,
.nf-form-cont textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(0, 109, 102, .2);
}
.jolifish-form .btn,
.nf-form-cont input[type="submit"] { justify-self: start; }
.nf-form-cont input[type="submit"] {
	min-height: 48px;
	padding: .8em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--neon);
	font: inherit;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}
.nf-form-cont .nf-field-container { margin-bottom: 20px; }
.nf-form-cont .nf-field-label label { font-weight: 600; font-size: .95rem; }
.nf-form-cont .nf-error-msg,
.jolifish-form-error,
.notice-error { color: #b42318; font-size: .92rem; }
.nf-loading-spinner { min-height: 40px; }
.jolifish-form-consent { margin-top: 20px; font-size: .9rem; color: var(--muted); max-width: 64ch; }
.jolifish-form-done,
.notice-success { padding: 16px 20px; border-radius: var(--radius-s); background: rgba(40, 255, 242, .18); }
.notice-warning { padding: 16px 20px; border-radius: var(--radius-s); background: #fff4e5; }
.jolifish-form-trap { position: absolute; left: -9999px; }
.ninja-forms-noscript-message { color: var(--muted); }

/* Ninja Forms : la feuille du thème cible « .section .nf-form-cont … » ; on s’aligne dessus. */
.section .nf-form-cont { max-width: 880px; }
.section .nf-form-cont .nf-field-container .nf-field-label label,
.section .nf-form-cont .nf-field-container .nf-field-label .nf-label-span { font-size: .95rem; font-weight: 600; color: var(--ink); }
.section .nf-form-cont .nf-field-container .nf-field-element input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.section .nf-form-cont .nf-field-container .nf-field-element select,
.section .nf-form-cont .nf-field-container .nf-field-element textarea {
	min-height: 50px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-s);
	background: var(--paper);
	font-size: 1rem;
}
.section .nf-form-cont .nf-field-container .nf-field-element input[type="submit"],
.section .nf-form-cont .nf-field-container .nf-field-element input[type="button"],
.section .nf-form-cont .nf-field-container .nf-field-element input.btn.btn-primary {
	min-height: 52px;
	padding: .8em 1.8em;
	border: 0;
	border-radius: 999px;
	background: var(--neon);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s var(--ease);
}
.section .nf-form-cont .nf-field-container .nf-field-element input[type="submit"]:hover,
.section .nf-form-cont .nf-field-container .nf-field-element input.btn.btn-primary:hover { background: var(--neon-hover); color: var(--ink); }
.section .nf-form-cont .nf-form-fields-required { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------- Blog (liste du thème) */

.post-card { display: flex; flex-direction: column; gap: 12px; }
.post-thumb { overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--soft); }
.post-cover { margin-bottom: 40px; }
.post-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.card .post-meta { margin: -4px 0 0; font-size: .88rem; color: var(--muted); }
main nav:has(.page-numbers) { margin-top: 56px; }
main nav:has(.page-numbers) > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
}
a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
main .page-numbers[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- Article seul

   Le thème écrit l’en-tête de l’article, puis range nos sections dans
   « .article-body ». On en fait une colonne de lecture centrée, où les blocs
   (points clés, étapes, questions) deviennent des encadrés. */

.single-post .page-hero .container > *,
.single-post main > .section:has(> .container > .article-body) > .container { max-width: calc(820px + 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.single-post .page-hero .container > * { max-width: 820px; }
.single-post .page-hero { padding-bottom: 40px; }
.single-post .page-hero h1 { max-width: none; font-size: clamp(2rem, 4vw, 3.1rem); }
.single-post .page-hero a.kicker { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.page-hero .post-meta { margin-top: 18px; font-size: .92rem; color: var(--muted); }

.single-post main > .section:has(.post-cover),
.single-post main > .section:has(> .container > .article-body) { padding-top: 0; }
.single-post .post-cover { max-width: none; margin: 0 0 48px; }
.single-post .post-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-l); box-shadow: var(--shadow-1); }

.single-post main > .section > .container > .article-body { max-width: none; font-size: 1.08rem; line-height: 1.75; }
.single-post .article-body > .section { margin-top: 56px; padding: 0; background: none; }
.single-post .article-body > .section:first-child { margin-top: 0; }
.single-post .article-body > .section > .container { max-width: none; padding: 0; }
/* Les blocs restent des cartes posées dans la colonne : pas de panneau autour, pour ne pas imbriquer de cartes. */
.single-post .article-body > .section.soft { padding-top: 56px; border-top: 1px solid var(--line); }
.single-post .article-body > .section:first-child .article-body { font-size: 1.22rem; line-height: 1.65; color: var(--muted); }
.single-post .article-body .article-body { max-width: 60ch; }
.single-post .article-body .section h2,
.single-post .article-body .section h3 { margin-top: 0; }
.single-post .article-body .article-body > h3 { margin-top: 2em; }
/* Articles repris de l’ancien site : leurs intertitres sont des h2. */
.article-body > h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.article-body > h2:not(:first-child),
.single-post .article-body .article-body > h2:not(:first-child) { margin-top: 2em; }
.article-body > h2 + p, .article-body > h2 + ul { margin-top: .6em; }
.article-body > h4 { margin-top: 1.6em; font-size: 1.05rem; font-weight: 600; }
.article-body > figure img { border-radius: var(--radius-s); }
.article-body figcaption { margin-top: .5em; font-size: .9rem; color: var(--muted); }
.single-post .article-body .feature-list { padding-left: 0; }
.single-post .post-cover img[src*="logo"] { object-fit: contain; background: var(--night); }
.single-post .article-body .article-title { max-width: none; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 20px; }
.single-post .article-body .section-title h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 400; letter-spacing: -.025em; }
.single-post .article-body .section-title p { font-size: 1.02rem; }
.single-post .article-body .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.single-post .article-body .container:has(> .faq) { display: block; }
.single-post .article-body .container:has(> .faq) > .faq { margin-top: 24px; }
.single-post .article-body .grid-2,
.single-post .article-body .grid-3,
.single-post .article-body .grid-4 { gap: 16px; }
.single-post .article-body { --pad-card: 24px; }
.single-post .article-body .card p { font-size: .97rem; }
.single-post .article-body .cta-inline { box-shadow: none; background: var(--paper); border: 1.5px solid var(--line); }

.post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}
.post-share > span { margin-right: 6px; font-size: .92rem; color: var(--muted); }
.post-share a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	font-size: .92rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}
.post-share a:hover { border-color: var(--ink); }

@media (max-width: 720px) {
	.single-post .article-body .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Pied de page */

.site-footer {
	margin-top: 0;
	padding: 88px 0 32px;
	background: var(--night);
	border-top: 1px solid var(--rule-dark);
	font-size: .97rem;
	color: var(--on-dark);
}
.site-footer .brand-logo { filter: brightness(0) invert(1); }
/* Après le dernier appel à l’action, le pied de page continue le même fond, sans couture. */
body:has(main > .section:last-child > .container > .wide-cta) .site-footer,
body:has(main > .section:last-child > .container > .cta-inline) .site-footer { border-top: 0; padding-top: 24px; }
.site-footer .brand { color: var(--paper); }

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
}
.footer-brand p { margin-top: 18px; max-width: 30ch; font-size: .97rem; color: var(--on-dark-muted); }
.footer-brand > a:not(.brand) {
	display: inline-block;
	margin-top: 18px;
	font-weight: 600;
	color: var(--paper);
}
.footer-col { display: grid; align-content: start; gap: 10px; }
.site-footer .footer-col h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--paper); }
.footer-col a { margin-top: 0; font-size: .97rem; color: var(--on-dark-muted); text-decoration: none; }
.footer-col a:hover { color: var(--paper); text-decoration: underline; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--rule-dark);
	font-size: .9rem;
	color: var(--on-dark-muted);
}
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { color: var(--on-dark-muted); }
.footer-bottom a:hover { color: var(--paper); }
.site-footer a:focus-visible { outline-color: var(--paper); }

/* ---------------------------------------------------------------- Prise de rendez-vous */

.demo-booking-modal {
	width: min(960px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}
.demo-booking-modal::backdrop { background: rgba(6, 25, 43, .55); }
.demo-booking-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--line);
}
.demo-booking-head h2 { font-size: 1.2rem; }
.demo-booking-close {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--soft);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}
.demo-booking-frame { display: block; width: 100%; height: min(70vh, 720px); border: 0; }
.demo-booking-footer { padding: 14px 24px; font-size: .92rem; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- Mise en page fine */

/* Cartes à icône : le lien reste aligné en bas, quelle que soit la longueur du texte. */
.card:has(> .icon-badge) { grid-template-rows: auto 1fr auto; }

/* Sous l’en-tête de page, une section sur le même fond démarre sans double marge. */
.page-hero + .section:not(.soft):not(.dark) { padding-top: 16px; }

/* Deux sections claires qui se suivent ne cumulent pas leurs marges. */
.section:not(.soft):not(.dark) + .section:not(.soft):not(.dark):not(:has(> .container > .wide-cta)):not(:last-child:has(> .container > .cta-inline)) { padding-top: 0; }

/* Titres dans une demi-colonne : un cran plus petits. */
.split .section-title h2 { font-size: clamp(2rem, 3.4vw, 3rem); }

/* Questions fréquentes : le titre à gauche, les réponses à droite. */
@media (min-width: 941px) {
	.container:has(> .faq) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		gap: 56px;
	}
	.container:has(> .faq) > .section-title { position: sticky; top: 120px; }
	.container:has(> .faq) > .section-title h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
	.single-post .article-body .container:has(> .faq) > .section-title h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
	.container:has(> .faq) > .faq { margin-top: 0; max-width: none; }
}

/* Formulaire : le titre à gauche, le formulaire dans un panneau à droite. */
.section .nf-form-cont { padding: 40px; border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--shadow-1); }
.section .nf-form-cont .nf-field-container .nf-field-element textarea { min-height: 180px; }
.section .nf-form-cont .nf-field-container .nf-field-element input[type="submit"] { background-image: none; box-shadow: none; }
@media (min-width: 941px) {
	.container:has(> .nf-form-cont) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 56px;
		align-items: start;
	}
	.container:has(> .nf-form-cont) > * { grid-column: 2; }
	.container:has(> .nf-form-cont) > .section-title { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 120px; }
}
@media (max-width: 720px) {
	.section .nf-form-cont { padding: 24px; }
}

/* Liste d’articles du thème : barre de filtres, et un visuel de marque pour les articles sans image. */
.section .container > .filters + .grid-2,
.section .container > .filters + .grid-3,
.section .container > .filters + .grid-4 { margin-top: 40px; }
.post-card:not(:has(> .post-thumb))::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	margin: 0 0 10px;
	border-radius: var(--radius-l);
	/* Une colonne d’eau : de la surface vers le fond. */
	background: linear-gradient(180deg, var(--sky-1) 0%, #8fc3e6 58%, #0d3554 100%);
}

/* La bande sombre : texte clair, accents blancs. */
.section.dark .feature-list,
.section.dark .feature-list li { border-color: var(--rule-dark); }
.section.dark .feature-list strong { color: var(--paper); }
.section.dark .feature-list span { color: #c4d4e1; }
.section.dark .feature-list .icon { color: var(--paper); }
.section.dark .text-link { color: var(--paper); }

/* ---------------------------------------------------------------- Mouvement */

/* Le thème fait apparaître chaque section (est-visible) et numérote les
   enfants des grilles (--i). La feuille anime seulement ce qu’il y a dedans,
   jamais la section elle-même, pour ne pas superposer deux mouvements.
   Tout part d’un état visible : sans le script, rien ne reste caché. */

/* 1. Les filets de l’index se dessinent de gauche à droite. Le filet est un
   pseudo-élément qu’on étire : la bordure d’origine devient transparente. */
.card:not(:has(> .card__media)):not(:has(> .post-thumb)):not(.post-card),
.feature-list li,
.faq details:first-child { border-top-color: transparent; }
.feature-list li,
.faq summary { position: relative; }
.card:not(:has(> .card__media)):not(:has(> .post-thumb)):not(.post-card)::after,
.feature-list li::after,
.faq details:first-child > summary::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--rule);
	transform-origin: 0 50%;
	pointer-events: none;
	transition: transform .35s var(--ease), background-color .3s var(--ease);
}
.faq details:first-child > summary::before { top: 0; }
.section.dark .feature-list li { border-top-color: transparent; }
.section.dark .feature-list li::after { background: var(--rule-dark); }
.section.est-visible .card:not(:has(> .card__media)):not(:has(> .post-thumb)):not(.post-card)::after,
.section.est-visible .feature-list li::after {
	animation: filet 1.1s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.section.est-visible .feature-list li:nth-child(2)::after { animation-delay: 260ms; }
.section.est-visible .feature-list li:nth-child(3)::after { animation-delay: 370ms; }
.section.est-visible .feature-list li:nth-child(n+4)::after { animation-delay: 480ms; }
.section.est-visible .faq details:first-child > summary::before { animation: filet 1.1s var(--ease) backwards .15s; }
@keyframes filet { from { transform: scaleX(0); } }

/* Au survol, le filet d’une carte-lien passe au teal et s’épaissit. */
a.card:not(:has(> .card__media)):not(:has(> .post-thumb)):hover::after { background-color: var(--teal); transform: scaleY(2); }

/* 2. Le contenu des grilles arrive l’un après l’autre. */
.section.est-visible :is(.grid-2, .grid-3, .grid-4) > * > :not(.card__media):not(.post-thumb) {
	animation: monte .8s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 110ms + 250ms);
}
@keyframes monte { from { opacity: 0; transform: translateY(18px); } }

/* 3. Les grands titres montent derrière une ligne de flottaison. */
.section.est-visible .section-title h2,
.section.est-visible .wide-cta h2 { animation: emerge 1s var(--ease) backwards; }
@keyframes emerge { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(0 0 -20% 0); } }

/* 4. Les images se dévoilent comme un rideau d’eau qui descend. */
.section.est-visible .card > .card__media,
.section.est-visible .card > .post-thumb,
.section.est-visible .media--split,
.section.est-visible .gallery__item img {
	animation: rideau 1.2s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 120ms + 100ms);
}
@keyframes rideau { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Dans son cadre, la photo glisse plus lentement que la page : on regarde à travers un hublot. */
@supports (animation-timeline: view()) {
	.card > .card__media img:not([src*="logo"]),
	.card > .post-thumb img {
		animation: hublot linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}
	@keyframes hublot { from { transform: scale(1.14) translateY(-5%); } to { transform: scale(1.14) translateY(5%); } }
	a.card:hover .card__media img:not([src*="logo"]),
	a.card:hover .post-thumb img { scale: 1.03; transition: scale .6s var(--ease); }
}

/* 5. La surface : des rais de lumière ondulent au-dessus de la méduse. */
.home-intro::before {
	content: "";
	position: absolute;
	top: -10%;
	right: -6%;
	width: 58%;
	height: 120%;
	pointer-events: none;
	/* Cinq rais, de largeurs inégales, comme la lumière filtrée par la surface. */
	background:
		linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, .38) 13%, transparent 15.5%),
		linear-gradient(100deg, transparent 29%, rgba(255, 255, 255, .26) 30%, transparent 31.2%),
		linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .42) 46%, transparent 49%),
		linear-gradient(100deg, transparent 63%, rgba(255, 255, 255, .22) 64%, transparent 65%),
		linear-gradient(100deg, transparent 78%, rgba(255, 255, 255, .34) 79.5%, transparent 82%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
	transform-origin: 50% 0;
	animation: rais 14s ease-in-out infinite alternate;
}
@keyframes rais {
	from { transform: skewX(-6deg) translateX(-2%); opacity: .55; }
	to { transform: skewX(5deg) translateX(3%); opacity: 1; }
}
/* La neige marine, en particules fines, monte lentement autour de la méduse. */
.home-intro { isolation: isolate; }
.home-intro::before { z-index: -1; }
.home-intro::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	pointer-events: none;
	color: rgba(70, 150, 205, .38);
	box-shadow: 79vw 32vh, 87vw 45vh, 90vw 88vh, 93vw 94vh, 81vw 67vh, 41vw 59vh, 89vw 31vh, 81vw 6vh, 97vw 20vh, 47vw 47vh, 70vw 31vh, 64vw 69vh, 46vw 73vh, 55vw 1vh, 86vw 27vh, 66vw 35vh, 51vw 98vh, 64vw 20vh, 79vw 132vh, 87vw 145vh, 90vw 188vh, 93vw 194vh, 81vw 167vh, 41vw 159vh, 89vw 131vh, 81vw 106vh, 97vw 120vh, 47vw 147vh, 70vw 131vh, 64vw 169vh, 46vw 173vh, 55vw 101vh, 86vw 127vh, 66vw 135vh, 51vw 198vh, 64vw 120vh;
	animation: neige-surface 34s linear infinite;
}
@keyframes neige-surface { to { transform: translateY(-100vh); } }
/* La méduse remonte et s’efface quand on quitte la surface. */
@supports (animation-timeline: scroll()) {
	.media--hero {
		animation: remonte linear both;
		animation-timeline: scroll(root);
		animation-range: 0 90vh;
	}
}
@keyframes remonte { to { transform: translateY(-22%); opacity: .25; } }

/* 6. Les abysses : neige marine qui monte lentement, bouton néon qui pulse. */
.section:has(> .container > .wide-cta),
main > .section:last-child:has(> .container > .cta-inline) { position: relative; overflow: hidden; isolation: isolate; }
.section:has(> .container > .wide-cta)::before,
.section:has(> .container > .wide-cta)::after,
main > .section:last-child:has(> .container > .cta-inline)::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	pointer-events: none;
	color: rgba(150, 230, 255, .55);
	box-shadow:
		59vw 71vh, 61vw 57vh, 67vw 75vh, 26vw 23vh, 67vw 60vh, 82vw 78vh, 25vw 12vh, 59vw 38vh, 20vw 11vh, 70vw 5vh, 78vw 50vh, 59vw 78vh, 85vw 20vh, 81vw 1vh, 69vw 8vh, 9vw 4vh, 59vw 151vh, 61vw 137vh, 67vw 155vh, 26vw 103vh, 67vw 140vh, 82vw 158vh, 25vw 92vh, 59vw 118vh, 20vw 91vh, 70vw 85vh, 78vw 130vh, 59vw 158vh, 85vw 100vh, 81vw 81vh, 69vw 88vh, 9vw 84vh;
	animation: neige 26s linear infinite;
}
.section:has(> .container > .wide-cta)::after {
	width: 3px;
	height: 3px;
	color: rgba(40, 255, 242, .45);
	box-shadow: 26vw 30vh, 78vw 3vh, 61vw 41vh, 58vw 75vh, 27vw 66vh, 31vw 37vh, 65vw 0vh, 86vw 10vh, 26vw 110vh, 78vw 83vh, 61vw 121vh, 58vw 155vh, 27vw 146vh, 31vw 117vh, 65vw 80vh, 86vw 90vh;
	animation-duration: 38s;
}
@keyframes neige { from { transform: translateY(0); } to { transform: translateY(-80vh); } }

.wide-cta .btn-primary,
main > .section:last-child > .container > .cta-inline .btn-primary { position: relative; }
.wide-cta .btn-primary::after,
main > .section:last-child > .container > .cta-inline .btn-primary::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	border: 1.5px solid var(--neon);
	border-radius: inherit;
	pointer-events: none;
	animation: pouls 3.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pouls {
	0% { transform: scale(1); opacity: .9; }
	70%, 100% { transform: scale(1.18, 1.5); opacity: 0; }
}

/* 7. La jauge de profondeur : un compteur à rouleau qui égrène les mètres
   pendant la descente (0 à 200 m, par paliers de 5 m). La bande de chiffres
   glisse dans une fenêtre d’une ligne ; le défilement la pilote. Seuls des
   transform et clip-path sont animés : ça tourne partout où le défilement
   peut piloter une animation. */
@supports (animation-timeline: scroll()) {
	body::before,
	body::after {
		position: fixed;
		z-index: 70;
		left: 24px;
		pointer-events: none;
	}
	/* la pastille */
	body::before {
		content: "";
		bottom: 24px;
		width: 104px;
		height: 38px;
		border-radius: 999px;
		/* Une méduse miniature : une ombrelle et trois filaments, qui battent. */
		background:
			radial-gradient(circle at 50% 100%, var(--teal) 0 5.5px, transparent 6px) 11px 9px / 13px 7px no-repeat,
			linear-gradient(var(--teal), var(--teal)) 13px 17px / 1.5px 9px no-repeat,
			linear-gradient(var(--teal), var(--teal)) 17px 17px / 1.5px 12px no-repeat,
			linear-gradient(var(--teal), var(--teal)) 21px 17px / 1.5px 9px no-repeat,
			rgba(255, 255, 255, .86);
		animation: battement 1.8s cubic-bezier(.3, 0, .2, 1) infinite;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: var(--shadow-1);
	}
	/* la bande de chiffres */
	body::after {
		content: "−0\00a0m\A −5\00a0m\A −10\00a0m\A −15\00a0m\A −20\00a0m\A −25\00a0m\A −30\00a0m\A −35\00a0m\A −40\00a0m\A −45\00a0m\A −50\00a0m\A −55\00a0m\A −60\00a0m\A −65\00a0m\A −70\00a0m\A −75\00a0m\A −80\00a0m\A −85\00a0m\A −90\00a0m\A −95\00a0m\A −100\00a0m\A −105\00a0m\A −110\00a0m\A −115\00a0m\A −120\00a0m\A −125\00a0m\A −130\00a0m\A −135\00a0m\A −140\00a0m\A −145\00a0m\A −150\00a0m\A −155\00a0m\A −160\00a0m\A −165\00a0m\A −170\00a0m\A −175\00a0m\A −180\00a0m\A −185\00a0m\A −190\00a0m\A −195\00a0m\A −200\00a0m";
		top: calc(100% - 24px - 29px);
		padding-left: 32px;
		white-space: pre;
		font: 600 .85rem/20px var(--font);
		font-variant-numeric: tabular-nums;
		color: var(--ink);
		clip-path: inset(0 0 800px 0);
		animation: compteur steps(41, jump-none) both;
		animation-timeline: scroll(root);
	}
	@keyframes battement {
		0%, 100% { background-size: 13px 7px, 1.5px 9px, 1.5px 12px, 1.5px 9px, auto; background-position: 11px 9px, 13px 17px, 17px 17px, 21px 17px, 0 0; }
		25% { background-size: 10px 8px, 1.5px 8px, 1.5px 10px, 1.5px 8px, auto; background-position: 12.5px 7px, 14px 15px, 17px 15px, 20px 15px, 0 0; }
	}
	@keyframes compteur {
		from { transform: translateY(0); clip-path: inset(0 0 800px 0); }
		to { transform: translateY(-800px); clip-path: inset(800px 0 0 0); }
	}
}

/* 8. La ligne de flottaison : là où la lumière rejoint les abysses, le bord ondule. */
.section:has(> .container > .wide-cta),
main > .section:last-child:has(> .container > .cta-inline) {
	-webkit-mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='36' viewBox='0 0 600 36'%3E%3Cpath d='M0 18C100 2 200 2 300 18S500 34 600 18V36H0Z'/%3E%3C/svg%3E") 0 0 / 600px 36px repeat-x,
		linear-gradient(#000, #000) 0 35px / 100% 100% no-repeat;
	mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='36' viewBox='0 0 600 36'%3E%3Cpath d='M0 18C100 2 200 2 300 18S500 34 600 18V36H0Z'/%3E%3C/svg%3E") 0 0 / 600px 36px repeat-x,
		linear-gradient(#000, #000) 0 35px / 100% 100% no-repeat;
	animation: houle 9s linear infinite;
	margin-top: -36px;
}
@keyframes houle { to { -webkit-mask-position: 600px 0, 0 35px; mask-position: 600px 0, 0 35px; } }

/* 9. Vrai ou faux : les questions deviennent des cartes qu’on retourne. */
.section.quiz .container:has(> .faq) { display: block; }
.section.quiz .container > .section-title { position: static; max-width: 760px; }
.section.quiz .container > .faq {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	max-width: none;
	margin-top: 48px;
	perspective: 1200px;
}
.section.quiz .faq details,
.section.quiz .faq details:first-child {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 250px;
	padding: 28px 28px 24px;
	border: 1px solid var(--rule-dark);
	border-radius: var(--radius-l);
	background: rgba(255, 255, 255, .04);
	transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.section.quiz .faq > details { grid-column: span 2; }
/* Quatre cartes : deux par ligne. Cinq : trois, puis deux plus larges. */
.section.quiz .faq:has(> details:nth-child(4):last-child) > details,
.section.quiz .faq > details:nth-child(4):nth-last-child(2),
.section.quiz .faq > details:nth-child(5):last-child { grid-column: span 3; }
@media (max-width: 720px) {
	.section.quiz .container > .faq { grid-template-columns: minmax(0, 1fr); }
	.section.quiz .faq > details { grid-column: auto !important; min-height: 0; }
}
@media (max-width: 720px) {
	body::before { left: 12px; bottom: 12px; width: 92px; height: 34px; }
	body::after { left: 12px; top: calc(100% - 12px - 27px); padding-left: 28px; font-size: .78rem; }
}
.section.quiz .faq details:hover { border-color: rgba(255, 255, 255, .4); transform: translateY(-3px); }
.section.quiz .faq details:first-child > summary::before { display: none; }
.section.quiz .faq summary {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 0;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--paper);
}
.section.quiz .faq summary:hover { color: var(--paper); }
/* Le pictogramme de retournement, en bas de la carte */
.section.quiz .faq summary::after {
	position: static;
	align-self: flex-end;
	width: 44px;
	height: 44px;
	margin: 0;
	background:
		linear-gradient(var(--ink), var(--ink)) center / 14px 1.8px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 1.8px 14px no-repeat,
		var(--neon);
}
.section.quiz .faq details[open] {
	border-color: var(--neon);
	background: rgba(40, 255, 242, .07);
	animation: retourne .7s var(--ease);
}
.section.quiz .faq details[open] summary { flex: 0; gap: 16px; font-size: 1rem; color: var(--on-dark-muted); }
.section.quiz .faq details[open] summary::after { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; }
.section.quiz .faq details[open] summary { padding-right: 48px; }
.section.quiz .faq details p {
	max-width: none;
	margin-top: 18px;
	padding: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--on-dark);
}
.section.quiz .faq details p strong {
	display: block;
	margin-bottom: 8px;
	font-size: 2.4rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--paper);
}
@keyframes retourne {
	from { transform: rotateY(-180deg); opacity: .4; }
	55% { opacity: 1; }
	to { transform: rotateY(0); }
}
.section.quiz .faq details[open] > :not(summary) { animation: ouvre .5s var(--ease) .25s backwards; }

/* 11. Changer de page, c’est plonger : l’en-tête reste en place, l’ancienne
   page s’enfonce et s’estompe, la nouvelle remonte. Transitions natives
   entre pages (Chrome, Edge, Safari récents) ; ailleurs, rien ne change. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: entete; }
::view-transition-old(root) { animation: .38s cubic-bezier(.4, 0, 1, 1) both page-sombre; }
::view-transition-new(root) { animation: .62s var(--ease) .08s both page-remonte; }
@keyframes page-sombre { to { opacity: 0; transform: translateY(-28px) scale(.985); } }
@keyframes page-remonte { from { opacity: 0; transform: translateY(44px); } }

/* 12. Dans les abysses, le texte s’allume à mesure qu’on le lit : la
   lumière descend ligne après ligne. */
@supports (animation-timeline: view()) {
	.section.dark .section-title p,
	.wide-cta p {
		-webkit-mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, .3) 58%);
		mask-image: linear-gradient(180deg, #000 42%, rgba(0, 0, 0, .3) 58%);
		-webkit-mask-size: 100% 300%;
		mask-size: 100% 300%;
		animation: allume linear both;
		animation-timeline: view();
		animation-range: entry 30% cover 55%;
	}
	@keyframes allume {
		from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
		to { -webkit-mask-position: 0 0; mask-position: 0 0; }
	}
}

/* 13. Au survol d’une expertise, son pictogramme fait trois brasses. */
.card:hover > .icon-badge .icon { animation: nage .9s ease-in-out; }
@keyframes nage {
	0%, 100% { transform: none; }
	30% { transform: translateX(4px) rotate(-10deg); }
	60% { transform: translateX(-2px) rotate(6deg); }
}

/* 14. Dans les zones sombres, le pointeur devient une bulle. Les liens et les
   boutons gardent la main habituelle. */
.section.dark,
.section:has(> .container > .wide-cta),
main > .section:last-child:has(> .container > .cta-inline),
.site-footer {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='9' fill='rgba(40,255,242,.12)' stroke='%2328fff2' stroke-width='1.5'/%3E%3Ccircle cx='10.5' cy='10.5' r='2.2' fill='%23ffffff' fill-opacity='.85'/%3E%3C/svg%3E") 14 14, auto;
}
.section.dark :is(a, button, summary),
.site-footer a,
.wide-cta a { cursor: pointer; }

/* 10. Les réponses s’ouvrent en glissant. */
.faq details[open] > :not(summary) { animation: ouvre .45s var(--ease); }
@keyframes ouvre { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	/* La méduse est une image animée : sans mouvement, on la retire. */
	.media--hero { display: none; }
	.intro-grid { grid-template-columns: minmax(0, 1fr); }
	/* les illustrations animées aussi : le texte à côté dit la même chose */
	.media--split:has(> img[src$="avif"]) { display: none; }
	.split:has(> .media--split > img[src$="avif"]) { grid-template-columns: minmax(0, 1fr); }
	/* la jauge vit du défilement : sans animation, on la retire */
	body::before,
	body::after { display: none; }
	@view-transition { navigation: none; }
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------- Paliers */

@media (max-width: 1160px) {
	:root { --section-y: 104px; }
	.main-nav { gap: 0; }
	.nav-link,
	.nav-group > summary { padding-left: 10px; padding-right: 10px; }
	.header-account { display: none; }
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
	:root { --gutter: 32px; --section-y: 96px; --pad-xl: 48px; }
	.home-intro { padding: 56px 0 72px; }
	.page-hero { padding: 48px 0 44px; }
	.nav-toggle { display: inline-flex; }
	.header-actions { margin-left: auto; }
	.site-header .main-nav {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding: 12px;
		background: var(--paper);
		border-radius: var(--radius);
		border-bottom: 0;
		box-shadow: var(--shadow-2);
		font-size: 1rem;
	}
	.nav-open .site-header .main-nav { display: flex; }
	.site-header .nav-toggle { display: inline-flex; padding: 0; border: 0; }
	.nav-link,
	.nav-group > summary {
		justify-content: space-between;
		width: 100%;
		padding: 12px 14px;
		border-radius: var(--radius-s);
		font-size: 1rem;
	}
	.nav-link[aria-current],
	.nav-group > summary[aria-current] { box-shadow: none; background: var(--soft); }
	.nav-dropdown {
		position: static;
		width: auto;
		padding: 4px 0 8px 8px;
		box-shadow: none;
		transform: none;
	}
	.mobile-only { display: flex; }

	.intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); }
	.split { grid-template-columns: minmax(0, 1fr); }
	.split.reverse > :first-child { order: 0; }
	.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gallery.gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wide-cta { grid-template-columns: minmax(0, 1fr); }
	.wide-cta .actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
	:root { --gutter: 24px; --section-y: 80px; --pad-card: 26px; --pad-l: 32px; --pad-xl: 36px; }
	.site-footer { padding: 64px 0 28px; }
	body { font-size: 1rem; }
	.intro-grid { grid-template-columns: minmax(0, 1fr); }
	.intro-copy h1 { letter-spacing: -.04em; }
	.media--hero { order: -1; justify-self: end; width: min(56%, 230px); margin: -24px -8px -40px 0; }
	.wide-cta .actions { justify-content: flex-start; }
	.section:has(> .container > .wide-cta) { padding: 96px 0 80px; }
	.grid-2,
	.grid-3,
	.grid-4 { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.jolifish-form-row { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faq summary { font-size: 1.02rem; }
	.faq details p { padding-right: 0; }
}

@media (max-width: 480px) {
	:root { --gutter: 20px; --section-y: 64px; --pad-card: 24px; --pad-l: 26px; --pad-xl: 28px; }
	.home-intro { padding: 32px 0 56px; }
	.page-hero { padding: 36px 0 36px; }
	.site-header { padding-top: 8px; }
	.header-inner { gap: 12px; min-height: 64px; }
	.brand-logo { height: 30px; }
	.header-register { padding: .5em .9em; font-size: .85rem; }
	.nav-toggle { width: 42px; height: 42px; }
	.gallery.gallery-3 { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- 15. Diagnostic formation IA
   Module sur mesure « diagnostic-ia » (page Formation IA) : le quiz de l’ancien site, affiché par le
   mu-plugin jolifish-diagnostic-ia.php. Une question à la fois, une jauge de profondeur pour le score. */
.diagnostic [hidden] { display: none !important; }
.diagnostic__cadre {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: var(--pad-xl) var(--pad-xl) var(--pad-l);
	border: 1px solid var(--rule-dark);
	border-radius: var(--radius-l);
	scroll-margin-top: 110px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(40, 255, 242, .11), transparent 58%),
		radial-gradient(90% 70% at 0% 100%, rgba(255, 122, 89, .07), transparent 60%),
		rgba(255, 255, 255, .03);
	overflow: hidden;
}
.diagnostic__barre { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, .08); }
.diagnostic__barre span {
	display: block;
	width: calc(var(--avance, 0) * 100%);
	height: 100%;
	background: var(--neon);
	box-shadow: 0 0 18px rgba(40, 255, 242, .6);
	transition: width .5s var(--ease);
}
.diagnostic .kicker { color: var(--neon); }
.diagnostic__intro h2 {
	font-size: clamp(2.2rem, 4.2vw, 3.6rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -.035em;
}
.diagnostic__lead { margin-top: 18px; max-width: 56ch; font-size: 1.1rem; color: var(--on-dark); }
.diagnostic__infos { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; padding: 0; list-style: none; }
.diagnostic__infos li {
	padding: .45em 1em;
	border: 1px solid var(--rule-dark);
	border-radius: 999px;
	font-size: .92rem;
	color: var(--on-dark-muted);
}
.diagnostic__infos strong { font-weight: 600; color: var(--paper); }
.diagnostic__commencer { display: none; }
.diagnostic--actif .diagnostic__commencer { display: inline-flex; }
.diagnostic__sans-js { color: var(--on-dark); }
.diagnostic__signature { margin-top: 28px; font-size: .85rem; color: var(--on-dark-muted); }

.diagnostic__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--on-dark-muted); }
.diagnostic__theme { padding: .35em .9em; border-radius: 999px; background: rgba(40, 255, 242, .12); font-weight: 600; color: var(--neon); }
.diagnostic__question {
	margin-top: 28px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
	outline: none;
}
.diagnostic__pourquoi { margin-top: 12px; font-size: .98rem; color: var(--on-dark-muted); }
.diagnostic__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.diagnostic__option {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 68px;
	padding: 16px 20px;
	border: 1px solid var(--rule-dark);
	border-radius: var(--radius-s);
	background: rgba(255, 255, 255, .04);
	font: inherit;
	font-size: 1rem;
	line-height: 1.35;
	text-align: left;
	color: var(--paper);
	cursor: pointer;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.diagnostic__option:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.diagnostic__option:focus-visible,
.diagnostic__retour:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.diagnostic__option[aria-pressed="true"] { border-color: var(--neon); background: rgba(40, 255, 242, .1); }
.diagnostic__repere {
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.diagnostic__option[aria-pressed="true"] .diagnostic__repere {
	border-color: var(--neon);
	background: radial-gradient(circle, var(--neon) 0 42%, transparent 48%);
	box-shadow: 0 0 12px rgba(40, 255, 242, .5);
}
.diagnostic__bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: .92rem; color: var(--on-dark-muted); }
.diagnostic__retour { padding: .5em 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--paper); cursor: pointer; }
.diagnostic__retour:disabled { opacity: .35; cursor: default; }

.diagnostic__verdict { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 40px; align-items: center; }
.diagnostic__jauge { position: relative; width: 168px; aspect-ratio: 1; }
.diagnostic__jauge svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.diagnostic__piste,
.diagnostic__arc { fill: none; stroke-width: 10; }
.diagnostic__piste { stroke: rgba(255, 255, 255, .1); }
.diagnostic__arc {
	stroke: var(--niveau, var(--neon));
	stroke-linecap: round;
	stroke-dasharray: 100px;
	stroke-dashoffset: calc((1 - var(--part, 0)) * 100px);
	filter: drop-shadow(0 0 8px var(--niveau, var(--neon)));
	transition: stroke-dashoffset 1.1s var(--ease);
}
.diagnostic__nombre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
.diagnostic__score { font-size: 3.4rem; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; color: var(--paper); }
.diagnostic__nombre span { margin-top: 6px; font-size: .82rem; color: var(--on-dark-muted); }
.diagnostic__badge {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .35em .9em;
	border: 1px solid var(--niveau, var(--neon));
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--paper);
}
.diagnostic__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--niveau, var(--neon)); box-shadow: 0 0 10px var(--niveau, var(--neon)); }
.diagnostic__titre { margin-top: 14px; font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; outline: none; }
.diagnostic__desc { margin-top: 12px; color: var(--on-dark); }
.diagnostic__contenu { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--rule-dark); }
.diagnostic__contenu h4 { font-size: 1.05rem; font-weight: 600; color: var(--paper); }
.diagnostic__programme { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: programme; }
.diagnostic__programme li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: baseline; color: var(--on-dark); counter-increment: programme; }
.diagnostic__programme li::before { content: counter(programme, decimal-leading-zero); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--niveau, var(--neon)); }
.diagnostic__repart { margin-top: 24px; padding: 18px 22px; border-radius: var(--radius-s); background: rgba(255, 255, 255, .05); color: var(--on-dark); }
.diagnostic__repart strong { display: block; margin-bottom: 4px; color: var(--paper); }
.diagnostic__signal { margin-top: 20px; padding: 18px 22px; border: 1px solid rgba(255, 122, 89, .55); border-radius: var(--radius-s); background: rgba(255, 122, 89, .08); }
.diagnostic__signal strong { color: var(--paper); }
.diagnostic__signal p { margin-top: 4px; color: var(--on-dark); }
.diagnostic__fin { margin-top: 36px; }
.diagnostic__appel { max-width: 60ch; color: var(--on-dark); }
.diagnostic__fin .actions { margin-top: 20px; }
.diagnostic__refaire { border-color: rgba(255, 255, 255, .55); background: transparent; color: var(--paper); }
.diagnostic__refaire:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }

/* Chaque étape remonte doucement en entrant, comme le reste de la descente. */
.diagnostic__intro,
.diagnostic__quiz,
.diagnostic__resultat { animation: remonte-diag .5s var(--ease) both; }
.diagnostic__options .diagnostic__option { animation: remonte-diag .45s var(--ease) both; }
.diagnostic__options .diagnostic__option:nth-child(2) { animation-delay: .05s; }
.diagnostic__options .diagnostic__option:nth-child(3) { animation-delay: .1s; }
.diagnostic__options .diagnostic__option:nth-child(4) { animation-delay: .15s; }
@keyframes remonte-diag { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 720px) {
	.diagnostic__cadre { padding: 40px 22px 28px; }
	.diagnostic__options { grid-template-columns: minmax(0, 1fr); }
	.diagnostic__option { min-height: 58px; }
	.diagnostic__verdict { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.diagnostic__jauge { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
	.diagnostic__intro,
	.diagnostic__quiz,
	.diagnostic__resultat,
	.diagnostic__options .diagnostic__option { animation: none; }
	.diagnostic__barre span,
	.diagnostic__arc,
	.diagnostic__option { transition: none; }
}

/* ---------------------------------------------------------------- 16. Formulaire de contact Planitron
   Le code de Planitron (CRM) arrive avec son propre style, bleu, en classes pl- : ces règles, plus précises,
   lui donnent l’allure du site sans toucher au code généré. */
.contact-planitron__cadre { max-width: 880px; }
.contact-planitron .section-title { margin-bottom: 32px; }
.contact-planitron__carte {
	padding: var(--pad-l);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper);
	box-shadow: var(--shadow-1);
}
.contact-planitron .pl-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	max-width: none;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
}
.contact-planitron .pl-form > * { grid-column: 1 / -1; }
.contact-planitron .pl-form > .pl-field:has(input[name="firstname"]),
.contact-planitron .pl-form > .pl-field:has(input[name="lastname"]),
.contact-planitron .pl-form > .pl-field:has(input[name="email"]),
.contact-planitron .pl-form > .pl-field:has(input[name="company"]) { grid-column: auto; }
.contact-planitron .pl-field { margin-bottom: 20px; }
.contact-planitron .pl-label { margin-bottom: 8px; font-size: .95rem; font-weight: 600; }
.contact-planitron .pl-text { margin: 4px 0 8px; font-size: .95rem; font-weight: 600; color: var(--ink); }
.contact-planitron .pl-req { color: var(--teal); }
.contact-planitron .pl-input {
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	font: inherit;
	color: var(--ink);
}
.contact-planitron textarea.pl-input { min-height: 140px; resize: vertical; }
.contact-planitron .pl-input::placeholder { color: #5b7083; }
.contact-planitron .pl-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.contact-planitron .pl-submit {
	justify-self: start;
	width: auto;
	min-height: 48px;
	margin-top: 4px;
	padding: .8em 1.6em;
	border-radius: 999px;
	background: var(--neon);
	color: var(--ink);
	font-weight: 600;
	transition: background-color .2s var(--ease);
}
.contact-planitron .pl-submit:hover { filter: none; background: var(--neon-hover); }
.contact-planitron .pl-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact-planitron .pl-note { margin-top: 16px; border-radius: var(--radius-s); font-size: .95rem; }
.contact-planitron__rgpd { margin-top: 20px; font-size: .88rem; color: var(--muted); }
.contact-planitron__rgpd a { color: var(--teal); }
@media (max-width: 720px) {
	.contact-planitron__carte { padding: 24px 20px; }
	.contact-planitron .pl-form { grid-template-columns: minmax(0, 1fr); }
	.contact-planitron .pl-form > .pl-field { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- 17. Prise de rendez-vous (cal.jolifish.fr)
   Le calendrier vient du code d’intégration Mycal, posé par l’extension jolifish-site : en section sur
   /contact/#rendez-vous, et dans une fenêtre (.jf-rdv) ouverte par les boutons « Prendre rendez-vous ». */
.rendez-vous__cadre { max-width: 1040px; }
.rendez-vous .section-title { margin-bottom: 32px; }
.rendez-vous__agenda {
	min-height: 640px;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}
.rendez-vous__agenda iframe { display: block; width: 100%; border: 0; }
#rendez-vous { scroll-margin-top: 110px; }

.jf-rdv {
	width: min(1040px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-l);
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}
.jf-rdv[open] { display: flex; flex-direction: column; }
.jf-rdv::backdrop { background: rgba(6, 25, 43, .55); }
.jf-rdv__haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px 14px 24px;
	border-bottom: 1px solid var(--line);
}
.jf-rdv__haut h2 { margin: 0; font-size: 1.2rem; }
.jf-rdv__fermer {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--soft);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}
.jf-rdv__fermer:hover { background: var(--line); }
.jf-rdv__fermer:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.jf-rdv__corps { min-height: 400px; overflow-y: auto; overscroll-behavior: contain; }
.jf-rdv__corps iframe { display: block; width: 100%; border: 0; }
.jf-rdv-ouvert { overflow: hidden; }
@media (max-width: 720px) {
	.jf-rdv { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
	.jf-rdv__corps { flex: 1; }
	.rendez-vous__agenda { border-radius: var(--radius-s); }
}

/* ---------------------------------------------------------------- 18. Page Contact : deux formulaires
   Demande commerciale et support technique (Ninja Forms), posés par l’extension jolifish-site. Le sélecteur
   est un jeu d’onglets accessible ; les champs gardent le style Ninja Forms du thème. */
.contact-formulaires__cadre { max-width: 880px; }
.contact-formulaires .section-title { margin-bottom: 28px; }
.contact-formulaires__choix {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--soft);
}
.contact-formulaires__onglet {
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.contact-formulaires__onglet:hover { color: var(--ink); }
.contact-formulaires__onglet[aria-selected="true"] {
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-1);
}
.contact-formulaires__onglet:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.contact-formulaires__carte {
	padding: var(--pad-l);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	background: var(--paper);
	box-shadow: var(--shadow-1);
}
.contact-formulaires__panneau[hidden] { display: none; }
.contact-formulaires__aide { margin: 0 0 24px; max-width: 62ch; color: var(--muted); }
.contact-formulaires__rgpd { margin-top: 16px; font-size: .9rem; color: var(--muted); }
#demande-commerciale, #support-technique, #formulaire { scroll-margin-top: 110px; }
@media (max-width: 720px) {
	.contact-formulaires__choix { display: flex; flex-wrap: nowrap; }
	.contact-formulaires__onglet { flex: 1 1 0; padding: 10px 6px; font-size: .88rem; }
	.contact-formulaires__carte { padding: 24px 20px; }
}