/* ==========================================================================
   Simplement Autiste — styles
   ========================================================================== */

:root {
	--cream: #f7f5f0;
	--white: #fff;
	--ink: #2a2a26;
	--green: #0e5959;
	--teal: #488b8b;
	--teal-soft: #8ab5b4;
	--teal-light: #acd4d4;
	--yellow: #ffbd59;
	--orange-soft: #ffcd82;
	--peach: #ffe3b9;
	--grey: #c8d1d9;
	--placeholder: #eef0f2;

	--font-title: "Fraunces", Georgia, serif;
	--font-body: "Garet", "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-script: "Stay With Me", "Gochi Hand", "Comic Sans MS", cursive;
	--font-footer: var(--font-body);

	--container: 1240px;
	--gutter: 32px;
	--radius-card: 44px;
	--wave: 40px;
}

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

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	margin: 0;
	line-height: 1.15;
}

.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;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 18px;
	background: var(--green);
	color: var(--white);
	border-radius: 10px;
}

.skip-link:focus {
	top: 12px;
}

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

.container--narrow {
	max-width: 1000px;
}

.section {
	position: relative;
	padding: 60px 0;
}

.section-title {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(2.1rem, 3.6vw, 3.3rem);
	color: var(--ink);
	letter-spacing: -0.01em;
	margin-bottom: 0.25em;
}

.script {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--green);
	line-height: 1.1;
}

.prose p {
	margin: 0 0 0.6em;
	text-align: justify;
	hyphens: auto;
}

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

.prose--indent {
	padding-left: clamp(0px, 5vw, 70px);
}

.prose a {
	text-underline-offset: 3px;
}

.link {
	text-underline-offset: 3px;
}

.icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	flex: none;
}

.icon svg {
	width: 100%;
	height: 100%;
}

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

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.55em 1.25em;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.btn--outline {
	border: 2px solid var(--green);
	color: var(--green);
	background: transparent;
}

.btn--outline:hover {
	background: var(--green);
	color: var(--white);
}

.btn--yellow {
	border: 0;
	background: var(--yellow);
	color: var(--white);
	font-weight: 700;
	font-size: 1.15rem;
	padding: 0.8em 2em;
}

.btn--yellow:hover {
	background: #f5ab3c;
}

.btn--don {
	white-space: nowrap;
	flex: none;
	border: 0;
	background: var(--yellow);
	color: var(--green);
	padding: 0.7em 1.3em;
}

.btn--don .icon {
	color: var(--white);
	font-size: 1.35em;
}

.btn--don:hover {
	background: #f5ab3c;
	transform: translateY(-1px);
}

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

.site-header {
	position: relative;
	z-index: 50;
	padding: 22px 0 70px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Logo : marguerite + nom et slogan du site (modifiables dans Personnaliser › Identité du site).
   Proportions reprises du logo d'origine : le texte chevauche le bord droit du cercle. */
.site-logo {
	--logo: clamp(220px, 24vw, 420px);
	flex: none;
	display: flex;
	align-items: center;
	color: var(--ink);
	text-decoration: none;
}

.site-logo__emblem {
	width: calc(var(--logo) * 0.297);
	height: auto;
	flex: none;
}

.site-logo__text {
	display: flex;
	flex-direction: column;
	gap: calc(var(--logo) * 0.03);
	margin-left: calc(var(--logo) * -0.073);
	padding-bottom: calc(var(--logo) * 0.02);
}

.site-logo__name {
	font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	font-weight: 500;
	font-size: calc(var(--logo) * 0.058);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1.1;
	white-space: nowrap;
}

.site-logo__tagline {
	font-family: var(--font-script);
	font-size: calc(var(--logo) * 0.052);
	color: var(--green);
	line-height: 1.1;
	padding-left: calc(var(--logo) * 0.1);
	white-space: nowrap;
}

.site-menu {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 40px);
}

.main-nav .menu {
	display: flex;
	gap: clamp(18px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	color: var(--green);
	font-size: 1.12rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a {
	color: var(--yellow);
}

.burger {
	display: none;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 14px;
	background: var(--orange-soft);
	cursor: pointer;
	position: relative;
}

.burger__bars,
.burger__bars::before,
.burger__bars::after {
	position: absolute;
	left: 50%;
	width: 28px;
	height: 3px;
	margin-left: -14px;
	border-radius: 3px;
	background: var(--white);
	transition: transform 0.25s, opacity 0.2s;
}

.burger__bars {
	top: 50%;
	margin-top: -1.5px;
}

.burger__bars::before,
.burger__bars::after {
	content: "";
	left: 0;
	margin-left: 0;
}

.burger__bars::before {
	top: -9px;
}

.burger__bars::after {
	top: 9px;
}

.burger[aria-expanded="true"] .burger__bars {
	background: transparent;
}

.burger[aria-expanded="true"] .burger__bars::before {
	transform: translateY(9px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bars::after {
	transform: translateY(-9px) rotate(-45deg);
}

/* ---------- Bandes de couleur à bords ondulés ---------- */

.band {
	--band: var(--teal-light);
	position: relative;
	background: var(--band);
	margin: var(--wave) 0;
	padding: 60px 0;
}

.band--teal {
	--band: var(--teal-light);
}

.band--peach {
	--band: var(--peach);
}

.band--orange {
	--band: var(--orange-soft);
}

.band::before,
.band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--wave);
	background: var(--band);
	-webkit-mask: url("../img/wave.svg") center / 100% 100% no-repeat;
	mask: url("../img/wave.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

.band::before {
	top: calc(1px - var(--wave));
}

.band::after {
	bottom: calc(1px - var(--wave));
	transform: scale(-1, -1);
}

/* ---------- Bandeau d'introduction ---------- */

.hero {
	margin-top: 0;
	padding: 50px 0 70px;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.hero__text .section-title {
	margin-left: -6px;
}

.hero__media {
	display: flex;
	justify-content: center;
}

.hero__img {
	width: 100%;
	max-width: 500px;
}

.hero__daisy {
	display: none;
}

.hero__cta {
	margin-top: 1.5em;
}

.deco--hero {
	left: 3%;
	/* pied de la fleur posé sur le bord ondulé du bandeau (la vague descend d'environ 35px à cet endroit) */
	bottom: calc(7px - var(--wave));
	width: clamp(110px, 11vw, 160px);
	z-index: 2;
}

/* ---------- Titre posé sur une tache ---------- */

.title-blob {
	position: relative;
	display: inline-block;
	z-index: 0;
	padding: 40px 50px 36px 30px;
	/* sur grand écran, le titre se cale près du bord gauche de la page comme sur la maquette */
	margin: 0 0 24px min(-30px, calc((var(--container) - 100vw) / 2 - var(--gutter) + 50px));
}

.title-blob::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20px;
	bottom: -26px;
	left: -40px;
	right: -40px;
	background: url("../img/titre-blob-orange.png") left center / contain no-repeat;
}

/* Tache orange : dimensionnée sur la largeur du titre (le dessin a des fleurs au-dessus),
   le centre du titre tombe au niveau de la tache (~65 % de la hauteur de l'image). */
.title-blob--orange::before {
	top: 50%;
	bottom: auto;
	left: -45px;
	right: auto;
	width: calc(100% + 20px);
	aspect-ratio: 900 / 769;
	transform: translateY(-63%);
	background-size: 100% 100%;
}

.title-blob--teal::before {
	background-image: url("../img/titre-blob-teal.png");
	/* dimensionnée sur la largeur du titre, plus large que lui (~450 px pour « Nos ateliers » en 1440) */
	top: 50%;
	bottom: auto;
	left: -60px;
	right: auto;
	width: calc(100% + 110px);
	aspect-ratio: 800 / 416;
	transform: translateY(-50%);
	background-size: 100% 100%;
}

/* Page L'équipe : images fournies (tache + contour), le titre centré dans le contour */
.title-blob--bureau,
.title-blob--benevole {
	/* texte décalé pour tomber au centre du contour */
	padding: 0 0 0 45px;
	margin-bottom: 40px;
}

.title-blob--bureau::before,
.title-blob--benevole::before {
	top: 50%;
	bottom: auto;
	right: auto;
	background-size: 100% 100%;
}

.title-blob--bureau::before {
	left: -70px;
	width: calc(100% + 160px);
	aspect-ratio: 855 / 900;
	transform: translateY(-50%);
	background-image: url("../img/titre-blob-bureau.png");
}

.title-blob--benevole::before {
	left: -60px;
	width: calc(100% + 130px);
	aspect-ratio: 900 / 614;
	transform: translateY(-48%);
	background-image: url("../img/titre-blob-benevoles.png");
}

/* ---------- Cartes ---------- */

.grid {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--radius-card);
	padding: 28px 34px 32px;
	color: var(--green);
}

.card__media {
	position: relative;
}

.card__media img,
.card__placeholder {
	width: 100%;
	aspect-ratio: 2.2;
	object-fit: cover;
	border-radius: 22px;
}

.card__placeholder {
	display: block;
	background: var(--placeholder) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5' fill='none' stroke='%23939aa3' stroke-width='1.2'/%3E%3Cpath d='m4 18 5.5-6 3.5 4 2.5-2.5L20 18z' fill='%23939aa3'/%3E%3Ccircle cx='16' cy='9' r='1.6' fill='%23939aa3'/%3E%3C/svg%3E") center / 40% no-repeat;
}

.card__title {
	font-size: clamp(2.2rem, 2.9vw, 2.9rem);
	margin: 0.45em 0 0.25em;
	padding-left: 12px;
}

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

.card__text {
	font-size: 0.95rem;
	line-height: 1.55;
}

.card__text p {
	margin: 0;
	text-align: justify;
	hyphens: auto;
}

.card__note {
	margin-top: 0.6em !important;
	font-size: 0.78rem;
	text-align: left !important;
}

.card__footer {
	margin-top: auto;
	padding-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.card__footer--end {
	justify-content: flex-end;
}

.card__date {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.92rem;
	color: var(--teal);
}

.card__date .icon {
	font-size: 1.2em;
}

/* ---------- Étiquettes ---------- */

.tag {
	display: inline-block;
	padding: 0.4em 1.15em;
	border-radius: 999px;
	background: var(--teal);
	color: var(--white);
	font-size: 0.9rem;
	line-height: 1.2;
}

.tag--presse {
	background: var(--yellow);
}

.tag--big {
	font-size: clamp(1.2rem, 2vw, 1.75rem);
	padding: 0.3em 0.75em;
	border-radius: 22px;
}

.card__tag {
	position: absolute;
	z-index: 2;
	top: -6px;
	left: -16px;
}

/* ---------- Encadré « Une question ? » / « Vous souhaitez vous inscrire ? » ---------- */
/* image fournie (tache + contour + titre + trait), bouton posé en bas à droite de la tache */

.cta-blob {
	position: relative;
	width: min(100%, 420px);
}

.cta-blob__img {
	width: 100%;
}

.cta-blob .btn {
	position: absolute;
	right: 12%;
	bottom: 20%;
	background: var(--orange-soft);
}

.cta-blob .btn:hover {
	background: var(--green);
}

.cta-blob--wide {
	width: min(100%, 560px);
}

.cta-blob--wide .btn {
	right: 14%;
	/* même hauteur que le bouton de « Une question ? » à côté */
	bottom: 24%;
}

/* ---------- Bande griffonnée (Infos pratiques, Envie de nous rejoindre) ---------- */

/* Fond : tache jaune irrégulière + contour griffonné qui la déborde à droite (assets/img/infos-blob.svg).
   La tache jaune occupe ~78 % de la largeur, le contenu reste dedans. */
.scribble-band {
	position: relative;
	z-index: 0;
	max-width: 1300px;
	margin: 30px auto;
	padding: 70px 14% 85px 80px;
	color: var(--green);
}

.scribble-band::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: url("../img/infos-blob.svg") center / 100% 100% no-repeat;
}
.scribble-band__title {
	font-size: clamp(2.6rem, 4vw, 3.4rem);
	margin-bottom: 0.3em;
}

.scribble-band__deco {
	position: absolute;
	/* le croisement des tiges (à 26 % de la largeur et 74 % de la hauteur de l'image 238x400)
	   est posé sur la pointe droite du contour noir (98,6 % de large, 38 % de haut du bandeau) */
	right: auto;
	left: calc(98.6% - 0.26 * 115px);
	top: calc(38% - 0.74 * 115px * 400 / 238);
	width: 115px;
	pointer-events: none;
}

.infos__cols {
	display: grid;
	grid-template-columns: repeat(3, auto);
	/* colonnes centrées sur la page */
	justify-content: center;
	gap: 20px 90px;
}

.infos .scribble-band {
	padding-right: 80px;
}

.infos__cols h3 {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.4em;
}

.infos__cols p {
	margin: 0;
	line-height: 1.75;
}

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

.infos__cols a.link {
	text-decoration: underline;
}

.scribble-band__body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-left: 100px;
}

.scribble-band__body .btn {
	white-space: nowrap;
}

.scribble-band__body .prose p {
	text-align: left;
	font-size: 0.98rem;
}

/* ==========================================================================
   Page Association
   ========================================================================== */

/* Proportions relevées sur la maquette (en % de la largeur de l'écran) :
   image 0–36 %, texte 26–70 % (le titre chevauche la tache orange), valeurs 77,5–94,7 %. */
.histoire {
	padding: 0 0 1vw;
}

.histoire__inner {
	display: grid;
	grid-template-columns: 26% 10% 34% 7.5% 17.2% 5.3%;
	align-items: start;
}

.histoire__media {
	grid-column: 1 / 3;
	grid-row: 1;
	/* déborde sur le bandeau bleu du dessus */
	margin-top: -4.5vw;
}

.histoire__img {
	width: 100%;
}

.histoire__text {
	grid-column: 2 / 4;
	grid-row: 1;
	position: relative;
	z-index: 1;
	padding-top: 1vw;
}

.valeurs {
	grid-column: 5 / 6;
	grid-row: 1;
	margin-top: 1.4vw;
}

.valeurs__img {
	width: 100%;
}

.equipe-teaser__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding-left: calc(var(--gutter) + 120px);
}

/* Bandeau compact comme sur la maquette, avec une grande courbe en bas qui descend vers le centre. */
.equipe-teaser {
	margin: 30px 0 calc(3.5vw + 10px);
	/* centre le contenu dans toute la zone pêche, courbe du bas comprise */
	padding: 1.6vw 0 0;
}

.equipe-teaser::after {
	height: 3.5vw;
	bottom: calc(1px - 3.5vw);
	transform: none;
	-webkit-mask-image: url("../img/wave-equipe-bottom.svg");
	mask-image: url("../img/wave-equipe-bottom.svg");
}

.equipe-teaser__cta {
	margin: 1.4em 0 0;
	text-align: right;
}

.equipe-teaser__img {
	width: 100%;
	max-width: 440px;
	margin-left: auto;
}

.equipe-teaser__img--mobile {
	display: none;
}

.deco--equipe {
	left: 2%;
	top: 60px;
	width: 140px;
}

/* Mesures relevées sur la maquette (base 1440 px, converties en vw pour suivre la largeur d'écran). */
.partenaires {
	position: relative;
	min-height: 28.5vw;
	margin-bottom: -60px;
	padding: 4.4vw 0 3vw;
	overflow: hidden;
	background: url("../img/partenaires-bg.svg") center top / 100% auto no-repeat;
}

.partenaires__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: max-content minmax(0, 40.3vw);
	justify-content: start;
	gap: 6vw;
	align-items: start;
	padding-left: 15.1vw;
}

.partenaires__logos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, max(90px, 8.9vw));
	gap: 0.6vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* tache orange derrière les logos */
.partenaires__logos::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0.15vw -4vw -0.5vw -0.5vw;
	border-radius: 38% 52% 50% 42% / 40% 48% 52% 50%;
	background: var(--orange-soft);
}

.partenaires__logos img,
.partenaires__name {
	width: max(90px, 8.9vw);
	height: max(90px, 8.9vw);
	object-fit: contain;
	border-radius: 18px;
	background: var(--white);
}

.partenaires__link {
	display: block;
	border-radius: 18px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.partenaires__link:hover,
.partenaires__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(14, 89, 89, 0.22);
}

.partenaires__name {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--green);
}

.partenaires__text {
	padding-top: 2.3vw;
}

/* le texte suit la largeur d'écran, comme les formes autour */
.partenaires__text .section-title {
	font-size: max(2.1rem, 3.3vw);
}

.partenaires__text .prose {
	font-size: max(1rem, 1.2vw);
}

.deco--partenaires {
	right: 3.5vw;
	top: 7.6vw;
	width: 13.5vw;
	z-index: 1;
}

/* ==========================================================================
   Page Ateliers
   ========================================================================== */

.programme__calendar {
	max-width: 880px;
	margin: 10px auto 0;
	position: relative;
	z-index: 1;
}

.programme__empty {
	padding: 40px;
	text-align: center;
	background: var(--white);
	border-radius: 30px;
	color: var(--green);
}

/* Calendrier (Hydrogen Calendar Embeds / FullCalendar) aux couleurs du site */
.programme__calendar .fc {
	--fc-border-color: #d9dcd3;
	--fc-button-bg-color: var(--green);
	--fc-button-border-color: var(--green);
	--fc-button-hover-bg-color: var(--teal);
	--fc-button-hover-border-color: var(--teal);
	--fc-button-active-bg-color: var(--teal);
	--fc-button-active-border-color: var(--teal);
	--fc-today-bg-color: var(--peach);
	--fc-event-bg-color: var(--teal);
	--fc-event-border-color: var(--teal);
	--fc-list-event-hover-bg-color: var(--peach);
	--fc-neutral-bg-color: var(--teal-light);
	--fc-page-bg-color: var(--white);
	background: var(--white);
	border-radius: 30px;
	padding: 24px 28px 28px;
	color: var(--green);
	font-family: var(--font-body);
}

.programme__calendar .fc .fc-toolbar-title {
	font-family: var(--font-title);
	font-weight: 700;
	color: var(--ink);
	text-transform: capitalize;
}

.programme__calendar .fc .fc-button {
	border-radius: 999px;
	font-family: var(--font-body);
	text-transform: capitalize;
	box-shadow: none !important;
}

.programme__calendar .fc .fc-list-day-cushion {
	background: var(--teal-light);
	font-weight: 700;
	text-transform: capitalize;
}

.programme__calendar .fc a {
	color: var(--green);
	text-decoration: none;
}

.programme__calendar .fc .fc-list-day-side-text {
	display: none;
}

.programme__calendar .fc .fc-list-event-dot {
	border-color: var(--yellow);
}
.programme {
	/* le titre « Notre programme » chevauche le bas du bandeau bleu, comme sur la maquette */
	margin-top: -120px;
	z-index: 1;
}

.deco--programme {
	right: 6%;
	bottom: 0;
	width: 130px;
}

.ateliers {
	padding-top: 20px;
}

.grid--ateliers {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	/* cartes plus larges que le conteneur, comme sur la maquette */
	margin: 0 -40px;
}

.grid--ateliers > :last-child:nth-child(3n + 1) {
	grid-column: 2;
}

.infos {
	padding: 90px 0 40px;
}

/* ==========================================================================
   Fiche atelier
   ========================================================================== */

.atelier-hero {
	padding-bottom: 160px;
}

.atelier-hero .prose p {
	text-align: justify;
}

.blob-photo {
	position: relative;
	width: min(100%, 380px);
	margin: 0 auto;
}

.blob-photo::before,
.blob-photo::after {
	content: "";
	position: absolute;
	z-index: 0;
}

.blob-photo::before {
	left: -24%;
	top: 6%;
	width: 55%;
	height: 60%;
	background: var(--teal);
	border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
}

.blob-photo::after {
	right: -20%;
	top: -6%;
	width: 75%;
	height: 82%;
	background: var(--peach);
	border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
}

.blob-photo__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 1.05;
	object-fit: cover;
	border-radius: 58% 42% 55% 45% / 52% 55% 45% 48%;
}

.blob-photo__img--empty {
	background: var(--placeholder) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5' fill='none' stroke='%23939aa3' stroke-width='1.2'/%3E%3Cpath d='m4 18 5.5-6 3.5 4 2.5-2.5L20 18z' fill='%23939aa3'/%3E%3Ccircle cx='16' cy='9' r='1.6' fill='%23939aa3'/%3E%3C/svg%3E") center / 38% no-repeat;
}

.atelier-infos {
	margin-top: -170px;
	z-index: 2;
	padding-top: 0;
}

.infos-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 auto;
	max-width: 1200px;
	padding: 80px 60px;
	/* tache bleue aux bords irréguliers (assets/img/infos-atelier-blob.svg) */
	background: url("../img/infos-atelier-blob.svg") center / 100% 100% no-repeat;
}

.infos-grid__item {
	padding: 30px 20px;
	text-align: center;
	border-right: 1px solid rgba(14, 89, 89, 0.45);
}

.infos-grid__item:nth-child(3n) {
	border-right: 0;
}

.infos-grid__item:nth-child(-n + 3) {
	border-bottom: 1px solid rgba(14, 89, 89, 0.45);
}

.infos-grid dt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.infos-grid dt img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.infos-grid dt .script {
	font-size: 2.5rem;
}

.infos-grid dd {
	margin: 0.9em 0 0;
	color: var(--green);
	font-size: 1.1rem;
	line-height: 1.6;
}

.atelier-cta__inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

/* ==========================================================================
   Page L'équipe
   ========================================================================== */

.membres {
	padding: 30px 0 50px;
}

/* les cartes du bureau passent au-dessus du dessin de « Les bénévoles » qui remonte */
.membres--bureau {
	position: relative;
	z-index: 2;
}

.membres--benevole {
	position: relative;
	z-index: 1;
}

.grid--bureau {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
	max-width: 1160px;
	margin: 0 auto;
}

.grid--benevole {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.grid--benevole > :nth-child(n + 5) {
	/* 2e rangée centrée comme sur la maquette */
	grid-column: auto;
}

.card--membre {
	align-items: center;
	text-align: center;
	padding: 24px 26px 30px;
}

.membre__photo {
	position: relative;
	width: min(78%, 250px);
	aspect-ratio: 1;
	margin: 10px auto 14px;
}

.membre__photo::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -6% -10% -12% -9%;
	background: var(--peach);
	border-radius: 45% 55% 60% 40% / 40% 45% 55% 60%;
}

.card--benevole .membre__photo {
	/* la tache autour de la photo déborde de ~12 % vers le bas : on laisse de l'air avant le nom */
	margin-bottom: 42px;
}

.card--benevole .membre__photo::before {
	background: var(--teal-soft);
	border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%;
}

.membre__photo img,
.membre__photo .icon {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	overflow: hidden;
}

.membre__role-top {
	position: relative;
	z-index: 2;
	margin: 0 0 -0.1em;
	font-size: 1.9rem;
	align-self: flex-start;
	padding-left: 8%;
}

.membre__name {
	color: var(--teal);
	font-size: clamp(2.1rem, 3vw, 2.9rem);
}

.membre__role {
	margin: 0.4em 0 0;
	font-size: 0.95rem;
	line-height: 1.35;
}

.membre__desc {
	margin-top: 1.1em;
	font-size: 0.88rem;
	line-height: 1.5;
}

.membre__desc p {
	text-align: justify;
}

.carousel-dots {
	display: none;
}

.equipe-fin {
	padding-top: 40px;
}

.merci {
	text-align: center;
	color: var(--ink);
	font-size: 2.8rem;
	margin: 0 0 60px;
}

.merci::after {
	content: "";
	display: block;
	width: 170px;
	height: 26px;
	margin: 8px auto 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 26'%3E%3Cpath d='M2 16c20-7 40-7 60 0M108 16c20-7 40-7 60 0' fill='none' stroke='%232a2a26' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M78 7c-4-6-13-2-10 5 2 4 10 10 10 10s8-6 10-10c3-7-6-11-10-5z' fill='%232a2a26'/%3E%3Cpath d='M92 7c-4-6-13-2-10 5 2 4 10 10 10 10s8-6 10-10c3-7-6-11-10-5z' fill='none' stroke='%232a2a26' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Page Adhérer
   ========================================================================== */

.etapes {
	padding-top: 90px;
	/* le titre et sa tache remontent sur le bas du bandeau bleu, comme sur la maquette */
	margin-top: 0;
	z-index: 1;
}

.etapes::after {
	/* image fournie « comment adhérer (fin) » : tache orange collée au bord droit */
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: -6vw;
	width: 26vw;
	aspect-ratio: 900 / 648;
	background: url("../img/blob-adherer-fin.png") right bottom / 100% 100% no-repeat;
}

/* image fournie « comment adhérer » : tache orange + contour + bouquet qui remonte dans le bandeau */
.title-blob--adherer {
	/* décale le texte pour le centrer dans le contour noir de l'image */
	padding: 0 0 0 55px;
	margin-top: 0;
	margin-bottom: 40px;
}

.title-blob--adherer::before {
	top: 50%;
	bottom: auto;
	left: -190px;
	right: auto;
	width: calc(100% + 205px);
	aspect-ratio: 1000 / 752;
	transform: translateY(-54%);
	background: url("../img/titre-blob-adherer.png") center / 100% 100% no-repeat;
}

.grid--etapes {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 60px;
	padding: 0 70px;
}

.card--etape {
	padding: 22px 34px 26px;
}

.etape__icon {
	width: 120px;
	height: auto;
	margin: 0 auto 14px;
}

.etape__title {
	font-family: var(--font-body);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.6em;
}

.etape__text {
	font-size: 0.95rem;
}

.etape__cta {
	margin-top: auto;
	padding-top: 20px;
	text-align: center;
}

/* Fonds = images fournies (Page 4 - Adhérer) : tache pêche avec fleurs, tache bleue avec contour.
   Positions relevées sur la maquette (base 1440 px, en vw). */
.adherer-infos {
	padding: 3vw 0 4vw;
	/* passe au-dessus de la tache orange de « Comment adhérer » qui déborde vers le bas */
	position: relative;
	z-index: 2;
}

.adherer-infos__inner.container {
	display: grid;
	grid-template-columns: 52vw 36vw;
	gap: 5.5vw;
	align-items: start;
	max-width: none;
	padding: 0 0 0 2.1vw;
}

.modalites {
	position: relative;
	aspect-ratio: 1300 / 800;
	background: url("../img/blob-modalites.png") center / 100% 100% no-repeat;
	padding: 2.4vw 6vw 2vw 2.4vw;
	color: var(--green);
}

.modalites__title {
	font-size: clamp(2.4rem, 3.6vw, 3.9rem);
	margin: 0 0 0.35em;
}

.tarifs {
	width: min(37vw, 100%);
	margin-left: 5.1vw;
	border-collapse: collapse;
	font-size: max(0.95rem, 1.1vw);
	text-align: center;
}

.tarifs th,
.tarifs td {
	border: 2px solid var(--ink);
	padding: 0.3em 0.6em;
}

.tarifs th {
	background: var(--teal);
	color: var(--white);
	font-weight: 700;
}

.modalites__note {
	font-size: max(0.9rem, 1vw);
	margin: 1.2em 0 0 2.4vw;
	max-width: 30vw;
}

.diagnostic {
	position: relative;
	aspect-ratio: 1000 / 871;
	background: url("../img/blob-diagnostic.png") center / 100% 100% no-repeat;
	padding: 3.4vw 4.6vw 3vw 4vw;
	color: var(--green);
}

.diagnostic__title {
	text-align: center;
	/* Stay With Me a de petits caractères : taille élevée pour égaler la maquette */
	font-size: clamp(2.2rem, 3.5vw, 4rem);
	line-height: 1.05;
	margin: 0 auto 0.5em;
}

.diagnostic__body {
	display: flex;
	align-items: center;
	gap: 1.6vw;
}

.diagnostic__icon {
	width: 10vw;
	flex: none;
}

.diagnostic .prose p {
	font-size: max(0.95rem, 1.1vw);
	line-height: 1.5;
}

/* ==========================================================================
   Page Contact
   ========================================================================== */

.hero--contact {
	padding-bottom: 140px;
}

.contact {
	margin-top: -250px;
	z-index: 2;
	padding-top: 0;
}

.contact__inner.container {
	display: grid;
	/* maquette : formulaire ~59 % de large, coordonnées collées au bord droit de l'écran */
	grid-template-columns: 59vw minmax(0, 1fr);
	gap: 5vw;
	align-items: start;
	max-width: none;
	padding: 0 0 0 4.2vw;
}

.contact-form {
	position: relative;
	/* image fournie : tache pêche avec feuillages (les deux du bas encadrent le bouton d'envoi) */
	background: url("../img/blob-ecrivez.png") center / 100% 100% no-repeat;
	padding: 44px 56px 46px;
	color: var(--green);
}

.contact-form__title {
	font-size: clamp(2.8rem, 3.9vw, 3.6rem);
	margin-left: -8px;
}

.contact-form__intro {
	margin: 0.8em 0 1.6em;
	font-size: 0.95rem;
}

.coordonnees {
	position: relative;
	margin-top: 280px;
	background: url("../img/blob-coordonnees.png") center / 100% 100% no-repeat;
	padding: 40px 40px 46px;
	color: var(--green);
}

.coordonnees__title {
	text-align: center;
	font-size: clamp(3rem, 4.2vw, 4rem);
	margin-bottom: 0.7em;
}

.coordonnees__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 22px;
}

.coordonnees__list li {
	display: flex;
	align-items: center;
	gap: 18px;
}

.coordonnees__list strong {
	display: block;
	font-weight: 700;
}

.coordonnees__list div > a,
.coordonnees__list div > span {
	color: var(--green);
	text-decoration: none;
	display: block;
	line-height: 1.5;
}

.coordonnees__list .coordonnees__note {
	color: var(--teal);
}

.coordonnees__icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--green);
	color: var(--white) !important;
}

.coordonnees__icon .icon {
	font-size: 30px;
}

.coordonnees__trait {
	border: 0;
	height: 12px;
	width: 85%;
	margin: 34px auto 24px;
	background: url("../img/trait-coordonnees.png") center / 100% 100% no-repeat;
}

.coordonnees__reseaux {
	font-weight: 700;
	font-size: 1rem;
	margin: 0 100px 0 0;
}

.socials {
	display: flex;
	align-items: center;
	gap: 26px;
}

.socials a {
	/* sinon les icônes prennent la couleur verte des liens (invisibles sur le pied de page) */
	color: inherit;
	display: inline-flex;
	text-decoration: none;
	transition: color 0.2s;
}

.socials a:hover,
.socials a:focus-visible {
	color: var(--yellow);
}

.socials--contact {
	margin-top: 16px;
	color: var(--green);
}

.socials--contact .icon {
	font-size: 40px;
}

.coordonnees__deco {
	position: absolute;
	right: 22px;
	bottom: 22px;
	width: 76px;
}

/* --- Contact Form 7 --- */

.wpcf7 form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.sa-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 1.5px solid var(--teal);
	border-radius: 14px;
	background: var(--cream);
	color: var(--green);
	font: inherit;
	font-size: 0.98rem;
}

.wpcf7 textarea {
	min-height: 170px;
	resize: vertical;
}

.wpcf7 ::placeholder {
	color: #6c9897;
}

.sa-form__accept {
	font-size: 0.98rem;
}

.sa-form__accept label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.sa-form__accept input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: var(--green);
	margin: 0;
}

.sa-form__accept .wpcf7-list-item {
	margin: 0;
}

.sa-form__submit {
	position: relative;
	text-align: center;
	padding: 10px 0;
}

/* feuillages déjà présents dans l'image de fond du formulaire */
.contact-form .sa-form__submit::before,
.contact-form .sa-form__submit::after {
	display: none;
}

.sa-form__submit::before,
.sa-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 130px;
	height: 70px;
	margin-top: -30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 70'%3E%3Cg fill='none' stroke='%232a2a26' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M128 60C95 60 55 40 22 8'/%3E%3Cpath d='M40 25c-14-2-26 2-34 8 13 4 24 1 34-8zM58 38c-12-6-25-6-34-2 12 7 24 7 34 2zM78 48c-12-7-24-8-34-5 11 8 23 9 34 5zM98 55c-11-6-23-8-32-6 10 7 22 9 32 6zM34 18C30 8 22 2 12 0c1 10 9 16 22 18zM52 32c-2-11-9-19-18-22 0 11 7 18 18 22zM72 44c-3-11-10-18-19-21 0 11 8 18 19 21z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.sa-form__submit::before {
	left: calc(50% - 280px);
}

.sa-form__submit::after {
	right: calc(50% - 280px);
	transform: scaleX(-1);
}

.wpcf7 input[type="submit"] {
	position: relative;
	z-index: 1;
	padding: 0.95em 3.6em;
	border: 0;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--green);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s;
}

.wpcf7 input[type="submit"]:disabled {
	/* Contact Form 7 bloque l'envoi tant que la case de consentement n'est pas cochée */
	opacity: 0.55;
	cursor: not-allowed;
}

.wpcf7 input[type="submit"]:not(:disabled):hover {
	background: #f5ab3c;
}

.wpcf7 .wpcf7-spinner {
	position: absolute;
	margin: 14px 0 0 12px;
}

.wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 0.85rem;
	color: #b3261e;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 0.8em 1.1em;
	border-radius: 14px;
	font-size: 0.95rem;
}

/* ==========================================================================
   Actualités
   ========================================================================== */

.news {
	padding-top: 40px;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	margin: 0 0 56px -20px;
}

.filter {
	display: inline-block;
	padding: 0.5em 1.1em;
	border: 1.5px solid var(--green);
	border-radius: 999px;
	background: var(--grey);
	color: var(--green);
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.filter:hover,
.filter.is-active {
	background: var(--green);
	color: var(--white);
}

.grid--news {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 70px 84px;
	padding: 0 50px;
}

.card--post {
	padding: 24px 38px 34px;
}

.card--post .card__title {
	font-size: clamp(2.3rem, 3.1vw, 3.2rem);
	padding-left: 30px;
}

.news__question {
	display: flex;
	justify-content: flex-end;
	margin: 50px 0 20px;
}

.news__empty {
	text-align: center;
	color: var(--green);
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px 22px;
	flex-wrap: wrap;
	margin-top: 10px;
	color: var(--green);
	font-size: 0.95rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 56px;
	color: var(--green);
	text-decoration: none;
}

.pagination .page-numbers.current {
	width: 56px;
	background: url("../img/marguerite.png") center / contain no-repeat;
	color: var(--ink);
	font-weight: 600;
	font-size: 0.85rem;
}

.pagination .prev {
	margin-right: 20px;
}

.pagination .next {
	margin-left: 20px;
}

/* --- Article --- */

.article {
	padding-top: 0;
}

.article__back {
	margin: 0 0 22px;
	font-size: 0.92rem;
}

.article__back a {
	text-decoration: none;
}

.article__head {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-top: 10px;
}

.article__title {
	font-size: clamp(2.6rem, 4.4vw, 3.6rem);
	margin: 1em 0 0.3em 30px;
}

.article__date {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 1.4em;
	color: var(--teal);
	font-size: 0.92rem;
}

.article__intro .prose {
	color: var(--green);
	font-size: 0.98rem;
}

.article__poster img {
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	border-radius: 28px;
}

.article__content {
	margin-top: 40px;
	color: var(--green);
}

.article__content .wp-block-gallery,
.article__content .gallery {
	gap: 12px;
}

.article__content figure img {
	border-radius: 6px;
}

.article__paper {
	position: relative;
	background: var(--white);
	border-radius: 30px;
	padding: 34px 30px 30px;
	margin-top: 40px;
}

.article__tag {
	position: absolute;
	top: -30px;
	left: 30px;
}

.article__scan {
	width: 100%;
	border-radius: 10px;
}

.article--presse .article__content:empty {
	display: none;
}

.article__external {
	text-align: center;
	margin: 40px 0 0;
}

/* --- Page simple --- */

.page-simple {
	padding-top: 10px;
}

.page-simple__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.2rem);
	text-align: center;
	margin-bottom: 1em;
}

.page-simple .prose {
	font-size: 0.98rem;
}

.page-simple .prose h2,
.page-simple .prose h3 {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	margin: 1.6em 0 0.3em;
}

.page-simple .prose p {
	text-align: left;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
	position: relative;
	margin-top: 120px;
	padding: 40px 0 30px;
	background: var(--green);
	color: var(--white);
}

.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -59px;
	height: 60px;
	background: var(--green);
	-webkit-mask: url("../img/wave.svg") center / 100% 100% no-repeat;
	mask: url("../img/wave.svg") center / 100% 100% no-repeat;
	transform: scaleX(-1);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) auto;
	gap: 40px 70px;
	align-items: center;
}

.site-footer__logo img {
	width: 185px;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 46px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-footer);
}

.footer-menu > li > a {
	display: block;
	margin-bottom: 0.7em;
	color: var(--white);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}

.footer-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu .sub-menu a {
	display: inline-block;
	padding: 0.15em 0;
	color: var(--white);
	text-decoration: none;
	font-size: 0.88rem;
}

.footer-menu a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__actions {
	display: flex;
	align-items: center;
	gap: 30px;
}

.btn--don-footer {
	display: none;
}

.socials--footer {
	color: var(--white);
}

.socials--footer .icon {
	font-size: 80px;
}

.site-footer__legal {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 0;
	margin-top: 40px;
	font-size: 0.9rem;
}

.site-footer__legal a {
	color: var(--white);
	text-decoration: none;
}

.site-footer__legal a:hover {
	text-decoration: underline;
}

.site-footer__legal .sep {
	margin: 0 1.6em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.equipe-teaser__inner {
		padding-left: calc(var(--gutter) + 80px);
	}

	.grid--news,
	.grid--etapes {
		padding: 0;
		gap: 40px;
	}
}

@media (max-width: 1100px) {
	/* Menu burger */
	.burger {
		display: block;
	}

	.site-header {
		padding-bottom: 40px;
	}

	.site-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin-top: -30px;
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 26px var(--gutter) 34px;
		background: var(--cream);
		box-shadow: 0 18px 30px rgba(14, 89, 89, 0.12);
		display: none;
	}

	.site-menu.is-open {
		display: flex;
	}

	.main-nav .menu {
		flex-direction: column;
		gap: 4px;
	}

	.main-nav a {
		display: block;
		padding: 10px 0;
		font-size: 1.3rem;
		border-bottom: 1px solid rgba(14, 89, 89, 0.12);
	}

	.site-menu .btn--don {
		align-self: flex-start;
		font-size: 1.1rem;
	}

	.site-footer__inner {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.site-footer__actions {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

@media (max-width: 900px) {
	:root {
		--gutter: 20px;
		--radius-card: 32px;
	}

	body {
		font-size: 16.5px;
	}

	/* titres un peu plus grands sur mobile */
	.section-title {
		font-size: 2.4rem;
	}

	.title-blob {
		white-space: nowrap;
	}

	.scribble-band__title,
	.contact-form__title,
	.coordonnees__title,
	.modalites__title,
	.diagnostic__title {
		font-size: 2.6rem;
	}

	/* laisse la place à la vague du bandeau (qui remonte de --wave) sous le logo */
	.site-header {
		padding: 16px 0 calc(var(--wave) + 22px);
	}

	.deco {
		display: none;
	}

	/* Bandeaux : une colonne, image masquée (cf. maquette mobile) */
	.hero {
		padding: 30px 0 34px;
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.hero__media {
		display: none;
	}

	.hero__daisy {
		display: block;
		position: relative;
		z-index: 1;
		width: 70px;
		margin: 26px auto -10px;
	}

	.atelier-hero .hero__media {
		display: flex;
		margin-bottom: -140px;
	}

	.atelier-hero .hero__daisy {
		display: none;
	}

	.atelier-hero {
		padding-bottom: 60px;
	}

	.atelier-infos {
		margin-top: 0;
		padding-top: 100px;
	}

	.prose--indent {
		padding-left: 6%;
	}

	.histoire {
		margin-top: -22px;
		padding: 0 0 30px;
	}

	.histoire__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding: 0 var(--gutter);
	}

	.histoire__media {
		display: none;
	}

	/* maquette mobile : tache orange derrière « Notre histoire », collée au bord gauche */
	.histoire__text .section-title {
		position: relative;
		z-index: 0;
	}

	.histoire__text .section-title::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: calc(-2 * var(--gutter));
		bottom: -22px;
		width: 230px;
		aspect-ratio: 250 / 165;
		background: url("../img/titre-blob-adherer-mobile.svg") left bottom / 100% 100% no-repeat;
	}

	.histoire__text,
	.valeurs {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0;
		padding-top: 0;
	}

	/* comme sur la maquette mobile : pas de bloc « Nos valeurs » */
	.valeurs {
		display: none;
	}

	.equipe-teaser__inner {
		grid-template-columns: 1fr;
		padding-left: var(--gutter);
		/* titre, texte et bouton remontés juste sous la photo */
		gap: 18px;
	}

	.equipe-teaser {
		margin-top: 90px;
		padding-top: 0;
	}

	/* pas de vague pêche au-dessus : la photo forme elle-même le haut du bloc */
	.equipe-teaser::before {
		display: none;
	}

	/* l'image remonte au-dessus du haut ondulé du bandeau pêche : on ne voit pas le fond dépasser */
	.equipe-teaser__media {
		order: -1;
		position: relative;
		z-index: 1;
		/* le haut transparent de l'image (~28,5 % de sa hauteur) dépasse au-dessus du bloc : la photo commence pile au bord du fond pêche */
		margin: -20.5vw calc(-1 * var(--gutter)) 0;
	}

	.equipe-teaser__img {
		max-width: none;
	}

	.equipe-teaser__img--desktop {
		display: none;
	}

	.equipe-teaser__img--mobile {
		display: block;
	}

	.partenaires {
		min-height: 0;
		margin-bottom: 0;
		padding: 60px 0;
		background-size: 200% auto;
		background-position: 0 0;
	}

	.partenaires__text {
		padding-top: 0;
	}

	.partenaires__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 0 var(--gutter);
	}

	.partenaires__logos {
		order: 2;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
	}

	.partenaires__logos::before {
		display: none;
	}

	.partenaires__logos img,
	.partenaires__name {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}

	.title-blob {
		padding: 30px 30px 26px 16px;
		margin-left: -10px;
		margin-right: 0;
	}

	.programme,
	.etapes {
		margin-top: 0;
	}

	/* mobile : « Les bénévoles » sur la tache orange fournie, collée au bord gauche (sans contour) */
	.title-blob--benevole {
		margin-bottom: 4px;
		padding-left: 0;
		margin-left: 0;
		white-space: nowrap;
	}

	.title-blob--benevole::before {
		left: calc(-1 * var(--gutter));
		width: 270px;
		aspect-ratio: 600 / 661;
		transform: translateY(-50%);
		background-image: url("../img/titre-blob-benevoles-mobile.png");
	}

	/* mobile : « Le bureau » sur la tache bleue fournie, collée au bord gauche (sans contour) */
	.title-blob--bureau {
		display: block;
		width: fit-content;
		margin-top: -85px;
		padding-left: 0;
		margin-left: 0;
		white-space: nowrap;
	}

	.title-blob--bureau::before {
		left: calc(-1 * var(--gutter));
		width: 230px;
		aspect-ratio: 600 / 683;
		transform: translateY(-50%);
		background-image: url("../img/titre-blob-bureau-mobile.png");
	}

	/* mobile : taches fournies, collées au bord gauche, orange pour « Notre programme », bleue pour « Nos ateliers » */
	.programme .title-blob--orange,
	.ateliers .title-blob--teal {
		padding: 0;
		margin: 30px 0 34px;
	}

	.programme .title-blob--orange::before,
	.ateliers .title-blob--teal::before {
		top: 50%;
		bottom: auto;
		right: auto;
		left: calc(-1 * var(--gutter));
		background: url("../img/titre-blob-programme-mobile.svg") left center / 100% 100% no-repeat;
		aspect-ratio: auto;
	}

	/* orange : la grosse bosse remonte à gauche, le titre passe sur la partie étroite et le lobe de droite */
	.programme .title-blob--orange::before {
		width: 270px;
		height: 218px;
		transform: translateY(-62%);
	}

	/* à cheval sur le bas du bandeau bleu « Envie de participer ? » */
	.programme {
		position: relative;
		z-index: 2;
	}

	.programme .title-blob--orange {
		display: block;
		width: fit-content;
		margin-top: -90px;
	}

	.ateliers .title-blob--teal::before {
		background-image: url("../img/titre-blob-ateliers-mobile.png");
		width: 280px;
		height: 168px;
		transform: translateY(-52%);
	}

	.programme__calendar .fc {
		padding: 16px 10px 18px;
		border-radius: 22px;
		font-size: 0.9rem;
	}

	.programme__calendar .fc .fc-list-event-time {
		white-space: normal;
		width: 5.5em;
	}

	.programme__calendar .fc .fc-list-event-graphic {
		padding-left: 4px;
		padding-right: 4px;
	}

	.programme__calendar .fc .fc-toolbar-title {
		font-size: 1.3rem;
	}

	/* mobile (maquette) : simple tache orange collée au bord gauche, pas de contour ni de bouquet */
	.title-blob--adherer {
		padding-left: 0;
		margin-left: 0;
	}

	.title-blob--adherer::before {
		left: calc(-1 * var(--gutter));
		top: auto;
		bottom: -62px;
		width: 330px;
		aspect-ratio: 700 / 484;
		transform: none;
		background: url("../img/titre-blob-adherer-mobile.png") left bottom / 100% 100% no-repeat;
	}

	.etapes {
		margin-top: -32px;
		padding-top: 10px;
	}

	.grid--ateliers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		padding: 0;
		margin: 0;
	}

	.grid--ateliers > :last-child:nth-child(3n + 1) {
		grid-column: auto;
	}

	.card--atelier {
		padding: 22px 18px 26px;
	}

	.card--atelier .card__title {
		text-align: center;
		padding-left: 0;
	}

	.card--atelier .card__footer {
		justify-content: center;
	}

	/* Mobile (maquette) : bande jaune pleine largeur au pinceau + contour qui la déborde,
	   bouquet à droite dont les tiges finissent sur le contour (assets/img/infos-blob-mobile.svg) */
	.scribble-band {
		margin: 20px calc(-1 * var(--gutter));
		padding: 26% 30px 26% 26px;
		max-width: none;
	}

	.scribble-band::before {
		inset: 0;
		background-image: url("../img/infos-blob-mobile.svg");
	}

	.scribble-band__deco {
		display: block;
		left: auto;
		right: 4%;
		top: auto;
		bottom: 11%;
		width: 26%;
		max-width: 120px;
	}

	.infos .scribble-band {
		padding-right: 30px;
	}

	.scribble-band__body {
		align-items: center;
		padding-right: 28%;
	}

	.scribble-band__body .prose {
		align-self: flex-start;
	}

	.infos__cols {
		grid-template-columns: repeat(2, auto);
		padding-left: 40px;
		gap: 22px 40px;
	}

	.infos__cols > :last-child {
		grid-column: 1 / -1;
	}

	.scribble-band__body {
		flex-direction: column;
		padding-left: 20px;
	}

	.infos-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 60px 22px;
	}

	.infos-grid__item,
	.infos-grid__item:nth-child(3n),
	.infos-grid__item:nth-child(-n + 3) {
		border: 0;
		padding: 22px 10px;
	}

	.infos-grid__item:nth-child(odd) {
		border-right: 1px solid rgba(14, 89, 89, 0.45);
	}

	.infos-grid dt {
		flex-direction: column;
		gap: 8px;
	}

	.infos-grid dt .script {
		font-size: 1.95rem;
	}

	.infos-grid dd {
		font-size: 0.98rem;
	}

	.atelier-cta__inner {
		flex-direction: column;
	}

	/* le bouton reste dans la tache jaune quand l'encadré est petit */
	/* même taille de bouton pour les deux encadrés */
	.cta-blob .btn {
		font-size: 0.85rem;
		padding: 0.45em 1em;
	}

	.cta-blob--wide .btn {
		bottom: 27%;
		right: 16%;
	}

	/* Équipe : carrousels */
	.js-carousel {
		position: relative;
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin: 0 calc(-1 * var(--gutter));
		padding: 6px var(--gutter) 10px;
		scroll-padding: 0 var(--gutter);
	}

	/* le glissement horizontal est géré en JS (une carte à la fois), le défilement vertical de la page reste natif */
	.js-carousel {
		touch-action: pan-y;
		cursor: grab;
		user-select: none;
	}

	.js-carousel.is-dragging {
		scroll-snap-type: none;
		scroll-behavior: auto;
		cursor: grabbing;
	}

	.js-carousel img {
		-webkit-user-drag: none;
		pointer-events: none;
	}

	.js-carousel::-webkit-scrollbar {
		display: none;
	}

	.js-carousel > * {
		flex: 0 0 76%;
		scroll-snap-align: center;
	}

	/* une carte bien visible à la fois, la suivante dépasse un peu pour inviter à faire défiler */
	.grid--benevole.js-carousel > * {
		flex-basis: 70%;
	}

	.card--benevole {
		padding: 22px 18px 26px;
	}

	.card--benevole .membre__name {
		font-size: 2.2rem;
	}

	.card--benevole .membre__role {
		font-size: 0.95rem;
	}

	.carousel-dots {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 22px;
	}

	.carousel-dots button {
		width: 22px;
		height: 22px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #d9dde2;
		cursor: pointer;
	}

	.carousel-dots button.is-active {
		background: var(--yellow);
	}

	.merci {
		font-size: 2.1rem;
	}

	.grid--etapes {
		grid-template-columns: 1fr;
		gap: 26px;
		max-width: 460px;
		margin: 0 auto;
	}

	/* fin de « Comment adhérer » : tache fournie collée au bord droit, derrière la dernière carte */
	.etapes::after {
		bottom: -50px;
		width: 300px;
		aspect-ratio: 700 / 508;
		background-image: url("../img/blob-adherer-fin-mobile.png");
	}

	.adherer-infos__inner.container {
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 0 var(--gutter);
	}

	.modalites {
		aspect-ratio: auto;
	}

	.tarifs {
		width: 100%;
		margin-left: 0;
		font-size: 0.92rem;
	}

	.modalites__note {
		margin-left: 0;
		max-width: none;
	}


	.diagnostic {
		order: -1;
		margin-top: 0;
	}

	.diagnostic__body {
		gap: 14px;
	}

	.modalites {
		padding: 40px 34px 60px 26px;
	}

	/* maquette mobile : tache aux proportions de l'image (pas étirée), contour qui sort à droite,
	   illustration à gauche et texte à droite */
	.diagnostic {
		aspect-ratio: 1000 / 871;
		margin-right: calc(-1 * var(--gutter));
		padding: 11% 12% 6% 6%;
	}

	/* même taille que « Les modalités » sur mobile */
	.diagnostic .diagnostic__title,
	.modalites .modalites__title {
		font-size: 2.3rem;
		margin-bottom: 0.4em;
		padding-right: 8%;
	}

	.diagnostic__body {
		gap: 12px;
	}

	.diagnostic__icon {
		width: 34%;
	}

	.diagnostic .prose p {
		font-size: 0.82rem;
		line-height: 1.45;
	}

	.modalites__title {
		margin-left: 0;
		text-align: center;
	}

	.tarifs {
		margin: 0 auto;
	}

	.hero--contact {
		padding-bottom: 34px;
	}

	.contact {
		margin-top: 0;
		padding-top: 0;
	}

	.contact__inner.container {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 0 var(--gutter);
	}

	/* mobile : image fournie, découpée en haut (bord ondulé) + bas (bord ondulé et feuillages autour du bouton),
	   le milieu est rempli de la même couleur pour s'adapter à la hauteur du formulaire */
	.contact-form {
		position: relative;
		z-index: 1;
		margin: -70px calc(-1 * var(--gutter)) 0;
		padding: 80px 22px 30px;
		border-radius: 0;
		background:
			url("../img/blob-ecrivez-m-top.png") center top / 100% auto no-repeat,
			url("../img/blob-ecrivez-m-bottom.png") center bottom / 100% auto no-repeat,
			linear-gradient(#fee3b8, #fee3b8) center 40px / 100% calc(100% - 80px) no-repeat;
	}

	.contact-form .sa-form__submit::before,
	.contact-form .sa-form__submit::after {
		display: none;
	}

	.contact-form .sa-form__submit {
		padding: 14px 0 10px;
	}

	.wpcf7 input[type="submit"] {
		padding: 0.75em 1.1em;
		font-size: 0.92rem;
	}

	.sa-form__row {
		grid-template-columns: 1fr;
	}

	/* mobile : image fournie (carré bleu aux bords irréguliers), avec une marge de chaque côté comme la maquette */
	.coordonnees {
		margin: 0;
		padding: 40px 22px 46px 24px;
		background-image: url("../img/blob-coordonnees-mobile.png");
	}

	.coordonnees__title {
		font-size: 2.9rem;
		margin-bottom: 0.6em;
	}

	.coordonnees__list {
		font-size: 0.9rem;
	}

	.coordonnees__list li {
		gap: 14px;
	}

	.coordonnees__icon {
		width: 48px;
		height: 48px;
	}

	.coordonnees__list div {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.coordonnees__reseaux {
		margin-right: 0;
	}

	.coordonnees__deco {
		display: none;
	}

	.filters {
		margin-left: 0;
		gap: 12px;
	}

	.grid--news {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.card--post {
		padding: 20px 22px 26px;
	}

	.card__tag {
		left: -8px;
	}

	.news__question {
		justify-content: center;
	}

	.article__head {
		grid-template-columns: 1fr;
	}

	.article__title {
		margin: 0.6em 0 0.3em;
		text-align: center;
	}

	.article__poster img {
		margin: 0 auto;
	}

	.article__paper {
		padding: 30px 14px 14px;
	}

	/* Pied de page mobile : don + réseaux */
	.site-footer {
		margin-top: 80px;
		padding-top: 30px;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.site-footer__logo,
	.footer-nav {
		display: none;
	}

	.btn--don-footer {
		display: inline-flex;
		font-size: 1.25rem;
		padding: 0.7em 1.5em;
	}

	.socials--footer .icon {
		font-size: 50px;
	}

	.btn--don-footer {
		white-space: nowrap;
	}

	.site-footer__actions {
		flex-wrap: wrap;
	}

	.site-footer__legal {
		margin-top: 30px;
		font-size: 0.95rem;
	}

	.site-footer__legal span:first-child {
		flex-basis: 100%;
		text-align: center;
	}

	.site-footer__legal a {
		text-decoration: underline;
	}

	.site-footer__legal .sep:nth-of-type(2) {
		display: none;
	}

	.site-footer__legal .sep {
		margin: 0 0.9em;
	}

	.modalites__deco {
		display: none;
	}
}

@media (max-width: 480px) {
	.prose--indent {
		padding-left: 8%;
	}

	.card--atelier .card__text {
		font-size: 0.88rem;
	}

	.card--atelier {
		padding: 18px 12px 22px;
	}

	.card--atelier .btn {
		font-size: 0.82rem;
		padding: 0.5em 0.8em;
		white-space: nowrap;
	}

	/* comme la maquette mobile : Quand ? / Où ? côte à côte, Besoin d'infos dessous */
	.infos__cols {
		grid-template-columns: auto auto;
		justify-content: start;
		gap: 18px 22px;
		padding-left: 6px;
		font-size: 0.88rem;
	}

	.infos__cols > :nth-child(2) p {
		white-space: nowrap;
	}

	.infos .scribble-band {
		padding-bottom: 24%;
	}

	/* sur mobile le bouquet cachait le texte des infos pratiques */
	.infos .scribble-band__deco {
		display: none;
	}

	.site-footer__legal {
		font-size: 0.85rem;
	}

	.site-footer__actions {
		gap: 20px;
	}
}

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

	* {
		transition: none !important;
	}
}