/* ==========================================================================
   JoCare — styles du site
   Maquette de référence : 1366 × 768 px.
   ========================================================================== */

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

:root {
	--green: #1e6950;
	--green-dark: #154c3a;
	--green-soft: #a4c2b8;
	--green-muted: #5f7f71;
	--green-ink: #2b5745;
	--green-tint: #eef5f1;
	--line: #d7e4dc;
	--ink: #111;
	--white: #fff;

	--font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gutter: clamp(16px, 2.5vw, 24px);
	--radius: 30px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--logo-h: clamp(56px, 6.5vw, 5.5rem);
	--header-h: calc(var(--logo-h) + 19.5px);

	interpolate-size: allow-keywords;
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Grands écrans : tout ce qui est exprimé en rem grandit doucement
   (16 px jusqu'à 1440 px de large, 19 px à 1920 px, 22 px à partir de 2400 px). */
@media (min-width: 1440px) {
	html {
		font-size: clamp(100%, calc(100% + (100vw - 90rem) * .00625), 137.5%);
	}
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--green);
}

h1,
h2,
h3 {
	line-height: 1.2;
	color: var(--green);
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 3px solid var(--green);
	outline-offset: 3px;
}

.container {
	width: min(100% - 2 * var(--gutter), 87.5rem);
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	padding: .6rem 1rem;
	color: var(--white);
	background: var(--green);
	border-radius: 8px;
}

.skip-link:focus {
	top: 1rem;
}

/* Les décors qui débordent (et leur balancement) ne créent jamais de défilement horizontal. */
.site-main {
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	overflow-x: clip;
}

/* Les pages principales occupent au moins la hauteur de l'écran, contenu centré. */
@media (min-width: 861px) and (min-height: 640px) {
	.hero,
	.coachings,
	.about,
	.contact,
	.page-404 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100vh - var(--header-h));
		min-height: calc(100svh - var(--header-h));
	}
}

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

/* Un seul format de bouton sur tout le site (accueil, coachings, FAQ, contact…). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 3.4rem;
	padding: .9rem 2rem;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--white);
	text-align: center;
	text-decoration: none;
	background: var(--green);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}

.btn:hover {
	background: var(--green-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -12px rgb(30 105 80 / .8);
}

.btn:active {
	transform: translateY(0);
}

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

.site-header {
	position: relative;
	z-index: 50;
	background: var(--white);
	border-bottom: 1.5px solid var(--green-soft);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 6px 12px;
}

.site-logo {
	flex-shrink: 0;
}

.site-logo__img {
	width: auto;
	height: var(--logo-h);
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.9vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(110px, 9.7vw, 8.25rem);
	min-height: 2.625rem;
	padding: .35rem 1.1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	border: 3px solid var(--green);
	border-radius: 999px;
	transition: background-color .25s ease, color .25s ease, transform .25s var(--ease);
}

.site-nav__list a:hover {
	color: var(--white);
	background: var(--green);
	transform: translateY(-2px);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list a[aria-current="page"] {
	color: var(--white);
	background: var(--green);
}

.nav-toggle {
	display: none;
}

@media (max-width: 1000px) {
	.nav-toggle {
		position: relative;
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		background: none;
		border: 3px solid var(--green);
		border-radius: 50%;
		cursor: pointer;
	}

	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 20px;
		height: 2.5px;
		background: var(--green);
		border-radius: 2px;
		transition: transform .3s var(--ease), opacity .2s ease;
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle__bars::before {
		top: -7px;
	}

	.nav-toggle__bars::after {
		top: 7px;
	}

	.is-open .nav-toggle__bars {
		background: transparent;
	}

	.is-open .nav-toggle__bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.is-open .nav-toggle__bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	.site-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		padding: 1.25rem var(--gutter) 1.75rem;
		background: var(--white);
		border-bottom: 1.5px solid var(--green-soft);
		box-shadow: 0 18px 30px -24px rgb(0 0 0 / .4);
		visibility: hidden;
		opacity: 0;
		translate: 0 -10px;
		transition: opacity .25s ease, translate .3s var(--ease), visibility 0s linear .3s;
	}

	.is-open .site-nav {
		visibility: visible;
		opacity: 1;
		translate: 0 0;
		transition-delay: 0s;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: center;
		gap: .75rem;
		padding: 0;
	}

	.site-nav__list a {
		min-width: 220px;
	}
}

/* ---------- Titres de page avec branches fleuries ---------- */

.page-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: clamp(1rem, 2vw, 1.4rem) 0 clamp(.6rem, 1.2vw, 1rem);
}

.page-heading__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .005em;
}

.page-heading__deco {
	flex-shrink: 0;
	width: clamp(40px, 9.5vw, 8rem);
	margin-right: -4px;
	transform-origin: center;
	animation: jc-sway 7s ease-in-out infinite;
}

.page-heading__deco--right {
	margin: 0 0 0 -4px;
	transform: scaleX(-1);
	animation-delay: -3.5s;
}

/* ---------- Décors ---------- */

.deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.deco--sway {
	animation: jc-sway 8s ease-in-out infinite;
}

@keyframes jc-sway {
	0%,
	100% {
		rotate: -1.6deg;
	}

	50% {
		rotate: 1.6deg;
	}
}

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

.hero {
	position: relative;
	padding: clamp(1rem, 2vw, 1.25rem) 0 clamp(2rem, 4vw, 2.5rem);
}

.hero__inner {
	position: relative;
	z-index: 1;
}

/* Bouquets collés aux bords de l'écran : leurs bords coupés tombent sur le bord. */
.hero__deco--tl {
	top: 0;
	left: 0;
	width: clamp(70px, 7vw, 7.5rem);
	transform-origin: top left;
	-webkit-mask-image: linear-gradient(to right, #000 75%, transparent);
	mask-image: linear-gradient(to right, #000 75%, transparent);
}

.hero__deco--bl {
	bottom: 0;
	left: 0;
	width: clamp(60px, 6.5vw, 7rem);
	transform-origin: bottom left;
	animation-delay: -2s;
}

.hero__deco--br {
	right: 0;
	bottom: 0;
	width: clamp(100px, 13vw, 206px);
	transform-origin: bottom right;
	animation-delay: -5s;
}

.hero__heading {
	position: relative;
	z-index: 2;
	margin: 0 0 clamp(1.4rem, 2.6vw, 2.4rem);
}

.hero__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(2rem, 4.1vw, 3.2rem);
	font-weight: 700;
	text-align: center;
	animation: jc-rise .9s var(--ease) both;
}

.hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-areas:
		"text visual"
		"cta  visual";
	grid-template-columns: minmax(0, 762fr) minmax(0, 440fr);
	align-items: start;
	max-width: 75rem;
	margin-inline: auto;
}

.hero__text {
	grid-area: text;
	padding: 1.05rem 1.6rem 1.4rem;
	font-size: clamp(1.05rem, 1.62vw, 1.375rem);
	line-height: 1.55;
	color: var(--white);
	background: var(--green);
	border-radius: var(--radius);
	animation: jc-rise .9s .12s var(--ease) both;
}

.hero__visual {
	position: relative;
	grid-area: visual;
	align-self: start;
	aspect-ratio: 440 / 400;
	margin-top: -2.2rem;
}

.hero__card {
	position: absolute;
	top: 50%;
	width: 57%;
	aspect-ratio: 250 / 370;
	border-radius: 18px;
	translate: 0 -50%;
}

.hero__card--back {
	z-index: 1;
	left: 44%;
	background: var(--green);
	rotate: 15deg;
	animation: jc-deal 1.1s .45s var(--ease) both;
}

.hero__card--front {
	z-index: 2;
	left: 13%;
	overflow: hidden;
	background: var(--white);
	border: 4px solid var(--green);
	rotate: -5.5deg;
	animation: jc-pop .8s .2s var(--ease) both;
}

.hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
}

/* Photo détourée : elle peut dépasser du cadre (la main tendue). */
.hero__card--front.is-cutout {
	overflow: visible;
}

.is-cutout .hero__photo {
	position: absolute;
	bottom: 0;
	left: 0;
	width: auto;
	max-width: none;
	height: 100%;
	object-fit: contain;
	border-bottom-left-radius: 14px;
}

/* Visuel complet exporté de Canva : l'image contient déjà les cartes.
   « multiply » fait disparaître un éventuel fond blanc sur la page blanche. */
.hero__visual--image {
	aspect-ratio: auto;
	margin-top: -4.2rem;
}

.hero__visual--image .hero__photo {
	position: relative;
	z-index: 1;
	width: 108%;
	max-width: none;
	height: auto;
	margin-left: -1%;
	object-fit: contain;
	mix-blend-mode: multiply;
	animation: jc-pop .8s .2s var(--ease) both, jc-float 7s 1.2s ease-in-out infinite;
}

@keyframes jc-float {
	50% {
		translate: 0 -7px;
	}
}

/* Bloc « Appel découverte offert » (accueil, coachings, qui suis-je). */
.cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	margin-top: clamp(1.5rem, 3vw, 2.6rem);
}

.hero__cta {
	grid-area: cta;
	animation: jc-rise .9s .35s var(--ease) both;
}

.cta__text {
	margin: 0;
	font-size: clamp(1.1rem, 1.62vw, 1.375rem);
}

.cta__action {
	position: relative;
	display: inline-flex;
}

.cta__arrows {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 4rem;
	max-width: none;
	translate: 4px -50%;
	animation: jc-nudge 1.6s ease-in-out 1.4s infinite;
	pointer-events: none;
}

@keyframes jc-nudge {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-9px);
	}
}

@keyframes jc-rise {
	from {
		opacity: 0;
		translate: 0 22px;
	}
}

@keyframes jc-pop {
	from {
		opacity: 0;
		scale: .92;
	}
}

/* La carte verte « se distribue » depuis derrière la photo. */
@keyframes jc-deal {
	from {
		rotate: -5.5deg;
		translate: -54% -50%;
	}
}

@media (max-width: 860px) {
	.hero__grid {
		grid-template-areas:
			"visual"
			"text"
			"cta";
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.hero__visual,
	.hero__visual--image {
		width: min(100%, 400px);
		margin: 0 auto;
	}

	/* L'export Canva a des marges blanches : on les rattrape. */
	.hero__visual--image {
		margin: -2rem auto -1.6rem;
	}

	.hero__card--front {
		left: 6%;
	}

	.hero__card--back {
		left: 31%;
	}

	.hero__cta {
		margin-top: .6rem;
	}

	.cta {
		padding-right: 70px;
	}

	.hero__deco--br {
		width: 110px;
	}

	/* Sur mobile, le titre porte déjà ses branches : le bouquet du coin les doublerait. */
	.hero__deco--tl {
		display: none;
	}
}

/* ---------- Coachings : cartes qui se retournent ---------- */

.coachings {
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.coachings__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	max-width: 79rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.flip {
	perspective: 1400px;
	border-radius: var(--radius);
	cursor: pointer;
	outline-offset: 6px;
}

.flip__inner {
	display: grid;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .8s var(--ease);
}

.flip__face {
	grid-area: 1 / 1;
	min-height: 24rem;
	border-radius: var(--radius);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip__face--front {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem .6rem 2.6rem;
	overflow: hidden;
	color: var(--white);
	background: var(--green);
}

/* Taille naturelle, jamais agrandie : les illustrations restent nettes. */
.flip__img {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	height: auto;
	min-height: 0;
	max-height: 18rem;
	margin: auto;
	object-fit: contain;
}

.flip__title {
	margin: 1rem 0 0;
	font-size: clamp(1.1rem, 1.62vw, 1.375rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--white);
	text-align: center;
}

/* Icône « retourner » : indique qu'il y a du texte au dos. */
.flip__hint {
	position: absolute;
	right: 14px;
	bottom: 12px;
	opacity: .75;
	transition: rotate .6s var(--ease), opacity .3s ease;
}

.flip:hover .flip__hint {
	opacity: 1;
	rotate: 180deg;
}

.coachings__hint {
	margin: -.3rem 0 1.3rem;
	font-size: 1.05rem;
	color: var(--green-muted);
	text-align: center;
}

.coachings__hint .is-touch {
	display: none;
}

.flip__face--back {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .8rem .3rem;
	color: var(--green);
	background: var(--white);
	border: 4px solid var(--green);
	transform: rotateY(180deg);
}

.flip__text {
	font-size: clamp(1rem, 1.45vw, 1.15rem);
	line-height: 1.5;
	text-align: center;
}

.flip__text p {
	margin: 0;
}

.flip__text strong {
	font-weight: 700;
}

@media (hover: hover) {
	.flip:hover .flip__inner,
	.flip:focus-visible .flip__inner {
		transform: rotateY(180deg);
	}
}

@media (hover: none) {
	.flip.is-flipped .flip__inner {
		transform: rotateY(180deg);
	}

	.coachings__hint .is-hover {
		display: none;
	}

	.coachings__hint .is-touch {
		display: inline;
	}
}

@media (max-width: 1100px) {
	.coachings__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px;
	}

	.flip {
		flex: 0 1 260px;
	}

	.flip__text {
		font-size: 1.05rem;
	}
}

@media (max-width: 600px) {
	.flip {
		flex-basis: min(100%, 340px);
	}

	.flip__face {
		min-height: 0;
	}

	.flip__img {
		max-height: 12rem;
	}
}

/* ---------- Qui suis-je ---------- */

.about {
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.about__head {
	position: relative;
}

.about__badge {
	position: absolute;
	top: 50%;
	right: 1.5%;
	margin: 0;
	padding: .55rem 1.75rem;
	font-size: clamp(1.05rem, 1.55vw, 1.3rem);
	font-weight: 800;
	color: var(--green);
	background: var(--white);
	border: 4px solid var(--ink);
	box-shadow: 2px 3px 0 var(--ink);
	translate: 0 -50%;
	overflow: hidden;
	isolation: isolate;
	animation: jc-badge 5s ease-in-out 1.8s infinite;
}

/* Reflet vert qui balaie l'encart à chaque cycle. */
.about__badge::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgb(30 105 80 / .2) 48%, rgb(30 105 80 / .08) 56%, transparent 70%);
	translate: -110% 0;
	animation: jc-badge-shine 5s ease-in-out 1.8s infinite;
}

/* « Coach certifiée » : l'encart se soulève, penche, l'ombre s'allonge, puis repos. */
@keyframes jc-badge {
	0%,
	34%,
	100% {
		transform: none;
		box-shadow: 2px 3px 0 var(--ink);
	}

	8% {
		transform: translate(-3px, -3px) rotate(-2.5deg) scale(1.05);
		box-shadow: 7px 8px 0 var(--ink);
	}

	16% {
		transform: translate(-3px, -3px) rotate(2deg) scale(1.05);
		box-shadow: 7px 8px 0 var(--ink);
	}

	24% {
		transform: translate(-2px, -2px) rotate(-1deg) scale(1.03);
		box-shadow: 5px 6px 0 var(--ink);
	}
}

@keyframes jc-badge-shine {
	0%,
	6% {
		translate: -110% 0;
	}

	30%,
	100% {
		translate: 110% 0;
	}
}

html.js .about__badge[data-reveal] {
	translate: 0 calc(-50% + 24px);
}

html.js .about__badge[data-reveal].is-visible {
	translate: 0 -50%;
}

.about__box {
	position: relative;
	margin: .4rem 0 0 4%;
	padding: .35rem 1rem 1.5rem;
	font-size: clamp(1rem, 1.42vw, 1.19rem);
	line-height: 1.63;
	color: var(--white);
	background: var(--green);
	border-radius: var(--radius);
}

.about__box::after {
	content: "";
	display: table;
	clear: both;
}

.about__photo {
	position: relative;
	float: left;
	width: clamp(150px, 16.8vw, 14.4rem);
	aspect-ratio: 1;
	margin: -5.2rem 1.8rem .6rem -2.4rem;
	/* Le texte contourne le cercle visible (border-box), pas la boîte de marge
	   décalée par les marges négatives ; l'écart laisse la place à l'arc décoratif. */
	shape-outside: circle(50%) border-box;
	shape-margin: 1.6rem;
}

.about__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--white);
	border: 4px solid var(--green);
	border-radius: 50%;
}

/* Arc décoratif autour de la photo : vert sur le blanc, blanc sur le vert. */
.about__photo::before {
	content: "";
	position: absolute;
	inset: -14px;
	border: 3px solid transparent;
	border-top-color: var(--green);
	border-bottom-color: var(--white);
	border-radius: 50%;
	rotate: -38deg;
	animation: jc-ring 1.4s .3s var(--ease) both;
}

@keyframes jc-ring {
	from {
		rotate: -200deg;
		opacity: 0;
	}
}

.about__text {
	text-align: justify;
}

.about__text p {
	margin: 0 0 1.1em;
}

.about__text p:last-child {
	margin-bottom: 0;
}

.about__text strong {
	font-weight: 700;
}

.about__deco {
	right: 22%;
	bottom: -18px;
	width: clamp(70px, 8vw, 104px);
	rotate: -20deg;
	transform-origin: bottom center;
}

@media (max-width: 900px) {
	.about__head {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 1.8rem;
	}

	.about__badge,
	html.js .about__badge[data-reveal],
	html.js .about__badge[data-reveal].is-visible {
		position: static;
		translate: none;
	}

	/* flow-root : la marge négative de la photo la fait déborder du cadre
	   au lieu de « traverser » le cadre et de le remonter. */
	.about__box {
		display: flow-root;
		margin: 7.5rem 0 0;
		padding: 0 1.25rem 1.5rem;
	}

	.about__photo {
		float: none;
		margin: -6.5rem auto 1.25rem;
	}

	.about__text {
		text-align: left;
	}
}

/* ---------- Contact ---------- */

.contact {
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.contact__subtitle {
	margin: -.4rem 0 1rem;
	font-size: clamp(1.25rem, 1.95vw, 1.65rem);
	font-weight: 800;
	color: var(--green);
	text-align: center;
}

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 915fr) minmax(0, 342fr);
	gap: 2.5rem;
	align-items: center;
}

.contact-form {
	padding: .9rem .75rem 1rem;
	background: var(--white);
	border: 1px solid #e3ebe6;
	border-radius: 14px;
}

.contact-form__intro {
	margin: 0 0 .9rem;
	font-size: 1.15rem;
	color: #4a6a5c;
	text-align: center;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.25rem;
}

.field {
	margin: 0 0 .35rem;
}

.field label {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 700;
	color: var(--green-ink);
}

.field input,
.field textarea {
	display: block;
	width: 100%;
	padding: .45rem .7rem;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 7px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.field input {
	height: 2.4rem;
}

.field textarea {
	height: 6.25rem;
	min-height: 80px;
	resize: vertical;
}

.field input:focus,
.field textarea:focus {
	border-color: var(--green);
	outline: none;
	box-shadow: 0 0 0 3px rgb(30 105 80 / .15);
}

.field [aria-invalid="true"] {
	border-color: #b3261e;
}

.field__error {
	display: block;
	margin-top: .2rem;
	font-size: .9rem;
	color: #b3261e;
}

.contact-form__trap {
	position: absolute;
	left: -9999px;
}

.contact-form__status {
	margin: .8rem 0 0;
	padding: .7rem 1rem;
	font-weight: 600;
	text-align: center;
	border-radius: 10px;
}

.contact-form__status[data-state="ok"] {
	color: var(--green-ink);
	background: var(--green-tint);
}

.contact-form__status[data-state="erreur"] {
	color: #8c1d18;
	background: #fbeceb;
}

.contact-form__submit {
	margin: 1rem 0 0;
	text-align: center;
}

.contact-form__submit .btn[disabled] {
	opacity: .6;
	pointer-events: none;
}

.contact-form__legal {
	margin: .6rem 0 0;
	font-size: .8rem;
	color: var(--green-muted);
	text-align: center;
}

.contact__aside {
	padding: 1.1rem 1rem .4rem;
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--green-muted);
	text-align: center;
	border: 1px solid #e3ebe6;
	border-radius: 6px;
}

.contact__aside-title {
	margin-bottom: 1.4rem;
}

.contact__aside p {
	margin-bottom: 1.4rem;
}

.contact__aside a {
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact__aside a:hover {
	color: var(--green);
	text-decoration: underline;
}

@media (max-width: 860px) {
	.contact__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.contact-form {
		padding: 1rem;
	}

	.contact-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

}

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

.faq {
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.faq__intro {
	max-width: 47.5rem;
	margin: 0 auto 1.6rem;
	font-size: 1.15rem;
	color: var(--green-ink);
	text-align: center;
}

.faq__list {
	display: grid;
	gap: 14px;
	max-width: 56rem;
	margin: 0 auto;
}

.faq__item {
	overflow: hidden;
	background: var(--white);
	border: 3px solid var(--green);
	border-radius: 24px;
	transition: background-color .3s ease;
}

.faq__item[open] {
	background: var(--green-tint);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.4rem;
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	font-weight: 700;
	color: var(--green);
	list-style: none;
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: var(--green);
	border-radius: 50%;
	transition: rotate .35s var(--ease);
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2.5px;
	background: var(--white);
	border-radius: 2px;
	translate: -50% -50%;
}

.faq__icon::after {
	rotate: 90deg;
	transition: rotate .35s var(--ease);
}

.faq__item[open] .faq__icon {
	rotate: 180deg;
}

.faq__item[open] .faq__icon::after {
	rotate: 0deg;
}

/* Ouverture animée là où le navigateur le permet. */
.faq__item::details-content {
	height: 0;
	overflow: clip;
	transition: height .4s var(--ease), content-visibility .4s allow-discrete;
}

.faq__item[open]::details-content {
	height: auto;
}

.faq__answer {
	padding: 0 1.4rem 1.2rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ink);
}

.faq__answer p,
.faq__answer ul {
	margin: 0 0 .8em;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

/* Listes (tarifs…) : la petite carte JoCare en guise de puce. */
.faq__answer ul {
	padding: 0;
	list-style: none;
}

.faq__answer li {
	position: relative;
	padding-left: 1.9em;
}

.faq__answer li + li {
	margin-top: .25em;
}

.faq__answer li::before {
	content: "";
	position: absolute;
	top: .15em;
	left: 0;
	width: 1.3em;
	height: 1.3em;
	background: url("../img/puce-jocare.png") center / contain no-repeat;
}

/* Renvois (« * Les séances… ») : paragraphe tout en italique, plus discret. */
.faq__answer p:has(> em:only-child) {
	margin-bottom: .6em;
	font-size: .85em;
	line-height: 1.5;
	color: var(--green-muted);
}

.faq__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem 1rem;
	margin: 2rem 0 0;
	font-size: 1.1rem;
	color: var(--green-ink);
}

/* ---------- Pages simples (mentions légales…) ---------- */

.page-simple {
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.page-simple .page-heading__title {
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
}

.entry-content {
	max-width: 51rem;
	margin: 0 auto;
}

.entry-content h2 {
	margin: 2rem 0 .6rem;
	font-size: 1.4rem;
}

.entry-content h3 {
	margin: 1.5rem 0 .5rem;
	font-size: 1.15rem;
}

/* ---------- Page introuvable (404) ---------- */

.page-404 {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}

.page-404__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	max-width: 70rem;
	margin-inline: auto;
}

.page-404__grid--solo {
	grid-template-columns: minmax(0, 46rem);
	justify-content: center;
}

.page-404__text {
	text-align: center;
}

.page-404__code {
	margin: 0 0 -.15em;
	font-size: clamp(5rem, 13vw, 9.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--green-tint);
	-webkit-text-stroke: 2px var(--green-soft);
	letter-spacing: .04em;
}

.page-404 .page-heading {
	margin-top: 0;
}

.page-404 .page-heading__title {
	font-size: clamp(1.6rem, 3.2vw, 2.5rem);
}

.page-404__lead {
	max-width: 34rem;
	margin: 0 auto 1.4rem;
	font-size: 1.15rem;
}

.page-404__more {
	margin: 1.8rem 0 .8rem;
	color: var(--green-muted);
}

/* Raccourcis : mêmes pilules que le menu. */
.page-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-404__links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.625rem;
	padding: .35rem 1.2rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	border: 3px solid var(--green);
	border-radius: 999px;
	transition: background-color .25s ease, color .25s ease, transform .25s var(--ease);
}

.page-404__links a:hover {
	color: var(--white);
	background: var(--green);
	transform: translateY(-2px);
}

.page-404__img {
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
	animation: jc-float 7s ease-in-out infinite;
}

@media (max-width: 860px) {
	.page-404__grid {
		grid-template-columns: 1fr;
		gap: .5rem;
	}

	.page-404__visual {
		order: -1;
		width: min(70%, 280px);
		margin: 0 auto -1rem;
	}
}

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

.site-footer {
	margin-top: 1rem;
	font-size: .9rem;
	color: var(--green-muted);
	border-top: 1.5px solid var(--green-soft);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: 1.4rem;
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--green);
	text-decoration: underline;
}

.site-footer__brand strong {
	color: var(--green);
}

.site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 760px) {
	.site-footer__inner {
		flex-direction: column;
		text-align: center;
	}

	.site-footer__contact,
	.site-footer__list {
		justify-content: center;
	}
}

/* ---------- Apparition au défilement ---------- */

html.js [data-reveal] {
	opacity: 0;
	translate: 0 24px;
	transition: opacity .7s ease, translate .8s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

html.js [data-reveal].is-visible {
	opacity: 1;
	translate: 0 0;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	html.js [data-reveal] {
		opacity: 1;
		translate: none;
	}
}