/* =============================================================================
   ATELIERS COCCINELLES — feuille de style principale
   -----------------------------------------------------------------------------
   Écrite à la main, sans préprocesseur ni compilation : ce fichier est servi
   tel quel. L'organisation suit l'ordre de lecture d'une page.

   01. Jetons de design
   02. Réinitialisation et base
   03. Typographie
   04. Mise en page
   05. Décor (vagues, coccinelles, motifs)
   06. Boutons
   07. Bandeau d'annonce, en-tête, navigation
   08. Bandeau d'ouverture
   09. Cartes
   10. Informations pratiques et encarts
   11. Galerie, visionneuse, vidéos
   12. Documents, agenda, presse, liens
   13. Formulaires
   14. Pied de page
   15. Contenu éditorial
   16. Animations
   17. Utilitaires et impression
   ========================================================================== */

/* =============================================================================
   01. JETONS DE DESIGN
   ========================================================================== */

:root {
	/* --- Couleurs de fond --- */
	--cocc-creme: #FBF6EC;
	--cocc-creme-pale: #FDF0D5;
	--cocc-sable: #F3E9D6;
	--cocc-sable-bord: #E4D8C2;
	--cocc-blanc: #FFFDF8;

	/* --- Encres --- */
	--cocc-encre: #2B2B23;
	--cocc-encre-2: #57503F;
	--cocc-encre-3: #7C7460;

	/* --- Vert forêt : couleur primaire --- */
	--cocc-vert: #2F5D3A;
	--cocc-vert-fonce: #264B2F;
	--cocc-vert-clair: #6FA855;
	--cocc-vert-pastel: #EAF3E2;
	--cocc-vert-pastel-bord: #CBDDC0;

	/* --- Rouge coccinelle : couleur d'action --- */
	--cocc-rouge: #D93A2B;
	--cocc-rouge-btn: #C33021;
	--cocc-rouge-fonce: #A72A1E;
	--cocc-rouge-lien: #B9422F;
	--cocc-rouge-lien-survol: #8F2F20;

	/* --- Accents --- */
	--cocc-rose: #F6E3DE;
	--cocc-jaune: #F2B33D;
	--cocc-jaune-pale: #FDF0D5;
	--cocc-jaune-fonce: #7A5A0E;
	--cocc-gris-pied: #D8D2C2;

	/* --- Typographie --- */
	--cocc-titre: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
	--cocc-texte: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--cocc-t-xs: 0.8125rem;
	--cocc-t-s: 0.9375rem;
	--cocc-t-base: 1.0625rem;
	--cocc-t-m: 1.1875rem;
	--cocc-t-l: 1.4375rem;
	--cocc-t-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	--cocc-t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
	--cocc-t-3xl: clamp(2.4rem, 1.5rem + 4vw, 4.1rem);

	/* --- Rythme --- */
	--cocc-gouttiere: 1.5rem;
	--cocc-entete-h: 4.7rem;
	--cocc-largeur: 1180px;
	--cocc-largeur-texte: 44rem;
	--cocc-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

	/* --- Arrondis --- */
	--cocc-r-s: 10px;
	--cocc-r-m: 18px;
	--cocc-r-l: 28px;
	--cocc-r-xl: 40px;
	--cocc-r-bulle: 60% 40% 55% 45% / 45% 55% 45% 55%;

	/* --- Ombres --- */
	--cocc-ombre-s: 0 2px 8px rgba(43, 43, 35, 0.06);
	--cocc-ombre-m: 0 8px 24px rgba(43, 43, 35, 0.09);
	--cocc-ombre-l: 0 18px 44px rgba(43, 43, 35, 0.13);

	/* --- Transitions --- */
	--cocc-transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--cocc-rebond: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================================
   02. RÉINITIALISATION ET BASE
   ========================================================================== */

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

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

body {
	margin: 0;
	background-color: var(--cocc-creme);
	color: var(--cocc-encre);
	font-family: var(--cocc-texte);
	font-size: var(--cocc-t-base);
	line-height: 1.68;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Motif de pois discret, comme les points d'une coccinelle. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(47, 93, 58, 0.045) 0 3px, transparent 3px),
		radial-gradient(circle at 78% 62%, rgba(217, 58, 43, 0.035) 0 4px, transparent 4px),
		radial-gradient(circle at 42% 88%, rgba(242, 179, 61, 0.05) 0 3px, transparent 3px);
	background-size: 260px 260px, 340px 340px, 300px 300px;
}

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

a {
	color: var(--cocc-rouge-lien);
	text-decoration-color: rgba(185, 66, 47, 0.35);
	text-underline-offset: 3px;
	transition: color var(--cocc-transition);
}

a:hover,
a:focus-visible {
	color: var(--cocc-rouge-lien-survol);
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 3px solid var(--cocc-vert-clair);
	outline-offset: 3px;
	border-radius: 4px;
}

button {
	font: inherit;
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 2px dashed var(--cocc-sable-bord);
	margin: 2.5rem 0;
}

::selection {
	background: var(--cocc-jaune);
	color: var(--cocc-encre);
}

/* =============================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cocc-titre);
	font-weight: 700;
	line-height: 1.14;
	color: var(--cocc-vert);
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--cocc-t-3xl); font-weight: 800; }
h2 { font-size: var(--cocc-t-2xl); }
h3 { font-size: var(--cocc-t-xl); }
h4 { font-size: var(--cocc-t-l); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 800; color: var(--cocc-encre); }

small { font-size: var(--cocc-t-s); }

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--cocc-vert-pastel);
	border-left: 5px solid var(--cocc-vert-clair);
	border-radius: 0 var(--cocc-r-m) var(--cocc-r-m) 0;
	font-size: var(--cocc-t-m);
}

.cocc-surtitre {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.7rem;
	padding: 0.32rem 0.95rem 0.32rem 0.7rem;
	background: var(--cocc-vert-pastel);
	border: 2px dashed var(--cocc-vert-pastel-bord);
	border-radius: 999px;
	color: var(--cocc-vert);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.cocc-surtitre__bug {
	font-size: 1em;
	animation: cocc-wiggle 3.4s ease-in-out infinite;
}

.cocc-section-titre {
	margin-bottom: 0.45em;
}

.cocc-section-texte {
	max-width: 46rem;
	margin-inline: auto;
	color: var(--cocc-encre-2);
	font-size: var(--cocc-t-m);
}

.cocc-section-header {
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem);
}

.cocc-section-header--centre {
	text-align: center;
}

.cocc-section-header--gauche .cocc-section-texte {
	margin-inline: 0;
}

/* Trait dessiné à la main sous un mot mis en valeur. */
.cocc-souligne {
	position: relative;
	color: var(--cocc-vert);
	white-space: nowrap;
}

.cocc-souligne::after {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: 0.02em;
	height: 0.32em;
	background: var(--cocc-jaune);
	opacity: 0.55;
	border-radius: 50% 50% 45% 55% / 100% 100% 60% 60%;
	z-index: -1;
}

/* =============================================================================
   04. MISE EN PAGE
   ========================================================================== */

.cocc-contenant {
	width: min(100% - 2.5rem, var(--cocc-largeur));
	margin-inline: auto;
}

.cocc-contenant--etroit {
	width: min(100% - 2.5rem, 56rem);
	margin-inline: auto;
}

.cocc-section {
	position: relative;
	padding-block: var(--cocc-section-y);
}

.cocc-section--creme { background: var(--cocc-creme); }
.cocc-section--sable { background: var(--cocc-sable); }
.cocc-section--vert { background: var(--cocc-vert-pastel); }
.cocc-section--rose { background: var(--cocc-rose); }
.cocc-section--jaune { background: var(--cocc-jaune-pale); }
.cocc-section--blanc { background: var(--cocc-blanc); }

.cocc-section--fonce {
	background: var(--cocc-vert);
	color: var(--cocc-creme);
}

.cocc-section--fonce h1,
.cocc-section--fonce h2,
.cocc-section--fonce h3 {
	color: var(--cocc-creme);
}

.cocc-section--fonce .cocc-section-texte {
	color: var(--cocc-vert-pastel-bord);
}

.cocc-section--fonce .cocc-surtitre {
	background: rgba(251, 246, 236, 0.12);
	border-color: rgba(251, 246, 236, 0.3);
	color: var(--cocc-jaune);
}

.cocc-grille {
	display: grid;
	gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
}

.cocc-grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.cocc-grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cocc-grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.cocc-deux-colonnes {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.cocc-deux-colonnes {
		grid-template-columns: 1.05fr 0.95fr;
	}

	/* Réordonner les blocs ne réordonne pas les colonnes : il faut inverser
	   le gabarit en même temps, sinon chaque bloc hérite de la largeur
	   prévue pour l'autre. */
	.cocc-deux-colonnes--inverse {
		grid-template-columns: 0.95fr 1.05fr;
	}

	.cocc-deux-colonnes--inverse > :first-child {
		order: 2;
	}
}

/* =============================================================================
   05. DÉCOR
   ========================================================================== */

.cocc-wave {
	position: absolute;
	left: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}

.cocc-wave:not(.cocc-wave--inverse) {
	bottom: -1px;
}

.cocc-wave--inverse {
	top: -1px;
	transform: rotate(180deg);
}

.cocc-wave svg {
	width: 100%;
	height: clamp(38px, 5vw, 74px);
	display: block;
}

.cocc-wave--creme svg path { fill: var(--cocc-creme); }
.cocc-wave--sable svg path { fill: var(--cocc-sable); }
.cocc-wave--vert svg path { fill: var(--cocc-vert-pastel); }
.cocc-wave--rose svg path { fill: var(--cocc-rose); }
.cocc-wave--jaune svg path { fill: var(--cocc-jaune-pale); }
.cocc-wave--blanc svg path { fill: var(--cocc-blanc); }
.cocc-wave--fonce svg path { fill: var(--cocc-vert); }

/* --- Coccinelles décoratives --- */

.cocc-decor {
	position: absolute;
	width: 54px;
	height: auto;
	opacity: 0.85;
	pointer-events: none;
	z-index: 2;
	filter: drop-shadow(0 4px 8px rgba(43, 43, 35, 0.16));
	animation: cocc-flotte 7s ease-in-out infinite;
}

.cocc-decor--hg { top: 6%; left: 3%; }
.cocc-decor--hd { top: 9%; right: 4%; animation-delay: -1.8s; }
.cocc-decor--bg { bottom: 8%; left: 6%; animation-delay: -3.4s; }
.cocc-decor--bd { bottom: 12%; right: 5%; animation-delay: -5s; }
.cocc-decor--centre-d { top: 44%; right: 2%; animation-delay: -2.6s; }

@media (max-width: 48em) {
	.cocc-decor {
		width: 36px;
		opacity: 0.5;
	}

	/* Sur petit écran, seules les coccinelles posées dans les zones vides
	   restent : celles des angles hauts venaient mordre sur les titres. */
	.cocc-decor--centre-d,
	.cocc-decor--bd,
	.cocc-decor--hg,
	.cocc-decor--hd {
		display: none;
	}
}

/* =============================================================================
   06. BOUTONS
   ========================================================================== */

.cocc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.82rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform var(--cocc-rebond), box-shadow var(--cocc-transition), background-color var(--cocc-transition), color var(--cocc-transition);
}

.cocc-btn:hover,
.cocc-btn:focus-visible {
	transform: translateY(-2px) rotate(-1deg);
	text-decoration: none;
}

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

.cocc-btn--primaire {
	background: var(--cocc-rouge-btn);
	color: var(--cocc-blanc);
	box-shadow: 0 4px 0 var(--cocc-rouge-fonce), var(--cocc-ombre-s);
}

.cocc-btn--primaire:hover,
.cocc-btn--primaire:focus-visible {
	background: var(--cocc-rouge-fonce);
	color: var(--cocc-blanc);
	box-shadow: 0 6px 0 #8d2318, var(--cocc-ombre-m);
}

.cocc-btn--secondaire {
	background: var(--cocc-vert);
	color: var(--cocc-creme);
	box-shadow: 0 4px 0 var(--cocc-vert-fonce), var(--cocc-ombre-s);
}

.cocc-btn--secondaire:hover,
.cocc-btn--secondaire:focus-visible {
	background: var(--cocc-vert-fonce);
	color: var(--cocc-creme);
	box-shadow: 0 6px 0 #1c3a23, var(--cocc-ombre-m);
}

.cocc-btn--fantome {
	background: transparent;
	color: var(--cocc-vert);
	border: 2px dashed var(--cocc-vert-clair);
}

.cocc-btn--fantome:hover,
.cocc-btn--fantome:focus-visible {
	background: var(--cocc-vert-pastel);
	color: var(--cocc-vert-fonce);
	border-style: solid;
}

.cocc-btn--jaune {
	background: var(--cocc-jaune);
	color: var(--cocc-encre);
	box-shadow: 0 4px 0 #C08A1F, var(--cocc-ombre-s);
}

.cocc-btn--jaune:hover,
.cocc-btn--jaune:focus-visible {
	background: #E3A42E;
	color: var(--cocc-encre);
}

.cocc-btn--petit {
	padding: 0.55rem 1.1rem;
	font-size: var(--cocc-t-s);
}

.cocc-btn--large {
	padding: 1rem 2.1rem;
	font-size: var(--cocc-t-m);
}

.cocc-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.75rem;
}

.cocc-section-header--centre .cocc-boutons {
	justify-content: center;
}

/* =============================================================================
   07. BANDEAU D'ANNONCE, EN-TÊTE, NAVIGATION
   ========================================================================== */

/*
 * Plans de superposition, du fond vers l'avant :
 *   40 sous-navigation · 44 retour en haut · 45 voile du menu
 *   46 bandeau d'annonce · 50 en-tête (et le tiroir mobile qu'il contient)
 *   100 visionneuse
 * L'en-tête porte un z-index, donc il crée un contexte d'empilement : le
 * tiroir qui vit à l'intérieur ne peut jamais passer au-dessus d'un élément
 * mieux classé que l'en-tête lui-même — le bandeau doit donc rester sous 50.
 * Il est placé juste au-dessus du voile pour que l'en-tête et le bandeau
 * restent éclairés ensemble quand le menu est ouvert.
 */
.cocc-banniere {
	position: relative;
	z-index: 46;
	background: var(--cocc-vert);
	color: var(--cocc-creme);
	text-align: center;
	font-size: var(--cocc-t-s);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cocc-banniere__contenu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	padding: 0.6rem 3rem 0.6rem 1rem;
}

.cocc-banniere__bug {
	animation: cocc-wiggle 2.6s ease-in-out infinite;
}

.cocc-banniere a {
	color: var(--cocc-jaune);
	text-decoration: underline;
	font-weight: 800;
}

.cocc-banniere a:hover,
.cocc-banniere a:focus-visible {
	color: var(--cocc-blanc);
}

.cocc-banniere__fermer {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--cocc-creme);
	font-size: 1.35rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	border-radius: 50%;
	opacity: 0.75;
}

.cocc-banniere__fermer:hover {
	opacity: 1;
	background: rgba(251, 246, 236, 0.15);
}

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

.cocc-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 246, 236, 0.93);
	border-bottom: 2px dashed var(--cocc-sable-bord);
	transition: box-shadow var(--cocc-transition), background-color var(--cocc-transition);
}

/*
 * Le flou est porté par un calque, jamais par l'en-tête lui-même.
 * Un backdrop-filter fait de l'élément un bloc conteneur : le panneau de
 * navigation mobile, en position fixe, s'ancrerait alors sur l'en-tête au
 * lieu de la fenêtre — ce qui le réduirait à la hauteur de l'en-tête et
 * ajouterait sa largeur au défilement horizontal de toute la page.
 */
.cocc-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
}

.cocc-entete.est-collee {
	box-shadow: var(--cocc-ombre-m);
	background: rgba(251, 246, 236, 0.98);
}

.cocc-entete__interieur {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-block: 0.65rem;
}

.cocc-marque {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--cocc-vert);
	flex-shrink: 0;
	min-width: 0;
}

.cocc-marque:hover {
	text-decoration: none;
}

/*
 * Le logo vient de la médiathèque et peut être servi en taille réelle.
 * Sans plafond de largeur, un visuel très haut ou très large élargit la
 * barre au-delà de la fenêtre : l'en-tête débordait de 41 px en 1280.
 */
.cocc-marque img {
	height: 58px;
	width: auto;
	max-width: 72px;
	object-fit: contain;
	flex-shrink: 0;
	transition: transform var(--cocc-rebond);
}

.cocc-marque:hover img {
	transform: rotate(-6deg) scale(1.05);
}

.cocc-marque__texte {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	min-width: 0;
}

/* De 1088 à 1400 px, la barre est à l'étroit : la ligne de description
   s'efface et le menu se resserre. La plage couvre les portables courants
   comme les écrans 1280, où six rubriques ne tenaient pas. */
@media (min-width: 68.01em) and (max-width: 87.5em) {
	.cocc-marque__sous { display: none; }
	.cocc-entete__interieur { gap: 0.9rem; }
	.cocc-nav__lien { padding-inline: 0.5rem; font-size: 0.9rem; }
	.cocc-nav__liste { gap: 0; }
}

.cocc-marque__nom {
	font-family: var(--cocc-titre);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--cocc-vert);
}

.cocc-marque__sous {
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-3);
	font-weight: 600;
}

/* --- Navigation --- */

.cocc-nav {
	margin-left: auto;
}

.cocc-nav__liste {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cocc-nav__item {
	position: relative;
}

.cocc-nav__lien {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	color: var(--cocc-encre-2);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--cocc-transition), color var(--cocc-transition);
}

.cocc-nav__lien:hover,
.cocc-nav__lien:focus-visible {
	background: var(--cocc-vert-pastel);
	color: var(--cocc-vert);
	text-decoration: none;
}

.cocc-nav__item--actif > .cocc-nav__lien {
	background: var(--cocc-vert);
	color: var(--cocc-creme);
}

.cocc-nav__toggle {
	display: none;
	background: transparent;
	border: 0;
	color: var(--cocc-encre-2);
	padding: 0.2rem 0.35rem;
}

/* Rubrique-bascule : rendue en bouton, elle doit se lire comme un lien. */
.cocc-nav__lien--bascule {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	width: auto;
	background: transparent;
	border: 0;
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	color: var(--cocc-encre-2);
	text-align: left;
}

.cocc-nav__chevron {
	font-size: 0.7em;
	opacity: 0.75;
	transition: transform var(--cocc-transition);
}

.cocc-nav__item--bascule.est-ouvert > .cocc-nav__lien--bascule .cocc-nav__chevron {
	transform: rotate(180deg);
}


/* Bouton de fermeture propre au panneau mobile. */
.cocc-nav__fermer {
	display: none;
	position: absolute;
	top: 1rem;
	right: 1.1rem;
	width: 44px;
	height: 44px;
	background: var(--cocc-vert-pastel);
	border: 2px solid var(--cocc-vert-pastel-bord);
	border-radius: 50%;
	color: var(--cocc-vert);
	font-size: 1.4rem;
	line-height: 1;
}

.cocc-nav__fermer:hover {
	background: var(--cocc-vert);
	color: var(--cocc-creme);
}

/*
 * Sur grand écran, un chevron signale les rubriques à sous-menu — mais
 * seulement celles rendues en lien. Les bascules portent déjà le leur dans
 * leur balisage ; sans cette exclusion, le chevron apparaissait en double.
 */
@media (min-width: 68.01em) {
	.cocc-nav__item--parent:not(.cocc-nav__item--bascule) > .cocc-nav__lien::after {
		content: "▾";
		margin-left: 0.35rem;
		font-size: 0.7em;
		vertical-align: 0.15em;
		opacity: 0.75;
	}
}

.cocc-nav__sous-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 15rem;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	box-shadow: var(--cocc-ombre-l);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cocc-transition), transform var(--cocc-transition), visibility var(--cocc-transition);
	z-index: 20;
}

.cocc-nav__item--parent:hover > .cocc-nav__sous-menu,
.cocc-nav__item--parent:focus-within > .cocc-nav__sous-menu,
.cocc-nav__item--parent.est-ouvert > .cocc-nav__sous-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.cocc-nav__sous-menu .cocc-nav__lien {
	white-space: normal;
	border-radius: var(--cocc-r-s);
	padding: 0.5rem 0.7rem;
}

.cocc-entete__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

/* --- Menu mobile --- */

/* Le voile n'existe qu'en dessous du point de bascule. */
.cocc-voile { display: none; }

.cocc-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--cocc-vert-pastel);
	border: 2px solid var(--cocc-vert-pastel-bord);
	border-radius: 50%;
}

.cocc-burger span {
	display: block;
	width: 20px;
	height: 2.5px;
	margin-inline: auto;
	background: var(--cocc-vert);
	border-radius: 2px;
	transition: transform var(--cocc-transition), opacity var(--cocc-transition);
}

.cocc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.cocc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cocc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 68em) {
	.cocc-burger { display: flex; }
	.cocc-nav__fermer { display: block; }

	/*
	 * Le tiroir sort du flux : c'est donc au bloc d'actions de prendre la
	 * marge automatique, sans quoi le burger reste collé au logo au lieu
	 * d'aller se placer dans l'angle.
	 */
	.cocc-entete__actions {
		margin-left: auto;
	}

	.cocc-nav {
		position: fixed;
		inset: 0 0 0 auto;
		/* Au-dessus du bandeau d'annonce (60) : sinon le premier lien du
		   menu disparaît derrière lui. Le panneau a son propre bouton de
		   fermeture, la croix de l'en-tête n'a donc pas à rester visible. */
		z-index: 70;
		width: min(88vw, 24rem);
		max-width: 100vw;
		margin: 0;
		padding: 4.5rem 1.25rem 2.5rem;
		background: var(--cocc-creme);
		border-left: 3px dashed var(--cocc-sable-bord);
		box-shadow: var(--cocc-ombre-l);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		/* Retiré du parcours au clavier et des lecteurs d'écran tant qu'il
		   est fermé : sans cela on tabule dans un menu invisible. */
		visibility: hidden;
		transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 300ms;
	}

	.cocc-nav.est-ouvert {
		transform: translateX(0);
		visibility: visible;
	}

	.cocc-nav__liste {
		flex-direction: column;
		align-items: stretch;
		gap: 0.2rem;
	}

	.cocc-nav__item {
		border-bottom: 2px dashed var(--cocc-sable-bord);
	}

	.cocc-nav__item:last-child { border-bottom: 0; }

	.cocc-nav__lien {
		padding: 0.85rem 0.6rem;
		font-size: var(--cocc-t-m);
		border-radius: var(--cocc-r-s);
	}

	/* En panneau, la bascule occupe toute la ligne : la zone tactile
	   couvre l'intitulé entier, pas seulement le chevron. */
	.cocc-nav__lien--bascule {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: var(--cocc-t-m);
	}

	.cocc-nav__item--bascule > .cocc-nav__toggle { display: none; }

	.cocc-nav__toggle {
		display: block;
		position: absolute;
		top: 0.5rem;
		right: 0.3rem;
		font-size: 1.2rem;
		padding: 0.5rem 0.75rem;
		transition: transform var(--cocc-transition);
	}

	.cocc-nav__item--parent.est-ouvert > .cocc-nav__toggle {
		transform: rotate(180deg);
	}

	.cocc-nav__sous-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		display: none;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: var(--cocc-sable);
		border-radius: var(--cocc-r-s);
		margin-bottom: 0.6rem;
	}

	.cocc-nav__item--parent.est-ouvert > .cocc-nav__sous-menu {
		display: block;
		transform: none;
	}

	.cocc-voile {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(43, 43, 35, 0.45);
		z-index: 45;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--cocc-transition), visibility var(--cocc-transition);
	}

	.cocc-voile.est-visible {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 34em) {
	.cocc-entete__actions .cocc-btn--primaire { display: none; }
	.cocc-marque img { height: 46px; }
	.cocc-marque__sous { display: none; }

	/* L'en-tête rétrécit : la sous-navigation doit remonter d'autant. */
	:root { --cocc-entete-h: 3.85rem; }
}

/* --- Sous-navigation des pages longues --- */

.cocc-sousnav {
	position: sticky;
	top: var(--cocc-entete-h);
	z-index: 45;
	background: rgba(251, 246, 236, 0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 2px dashed var(--cocc-sable-bord);
	box-shadow: 0 4px 14px rgba(43, 43, 35, 0.05);
}

.cocc-sousnav__interieur {
	display: flex;
	gap: 0.4rem;
	padding-block: 0.55rem;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.cocc-sousnav__interieur::-webkit-scrollbar { height: 4px; }
.cocc-sousnav__interieur::-webkit-scrollbar-thumb {
	background: var(--cocc-sable-bord);
	border-radius: 4px;
}

.cocc-sousnav__lien {
	flex-shrink: 0;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	color: var(--cocc-encre-2);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--cocc-transition), color var(--cocc-transition);
}

.cocc-sousnav__lien:hover,
.cocc-sousnav__lien:focus-visible {
	background: var(--cocc-vert-pastel);
	color: var(--cocc-vert);
	text-decoration: none;
}

.cocc-sousnav__lien[aria-current="true"] {
	background: var(--cocc-vert);
	color: var(--cocc-creme);
}

/* Décale l'ancrage pour que le titre visé ne passe pas sous les deux barres. */
.cocc-a-sousnav { scroll-padding-top: 9.75rem; }

@media (max-width: 34em) {
	.cocc-a-sousnav { scroll-padding-top: 8.5rem; }
}

/* =============================================================================
   08. BANDEAU D'OUVERTURE
   ========================================================================== */

.cocc-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(5rem, 3rem + 7vw, 8.5rem);
	background:
		radial-gradient(ellipse 70% 55% at 78% 22%, rgba(234, 243, 226, 0.9), transparent 70%),
		radial-gradient(ellipse 60% 50% at 12% 78%, rgba(246, 227, 222, 0.75), transparent 70%),
		var(--cocc-creme);
}

.cocc-hero__grille {
	display: grid;
	gap: clamp(2.25rem, 1rem + 4vw, 4rem);
	align-items: center;
	grid-template-columns: 1fr;
	position: relative;
	z-index: 3;
}

@media (min-width: 62em) {
	.cocc-hero__grille {
		grid-template-columns: 1.02fr 0.98fr;
	}
}

.cocc-hero__titre {
	margin-bottom: 0.5em;
}

.cocc-hero__texte {
	max-width: 34rem;
	font-size: var(--cocc-t-m);
	color: var(--cocc-encre-2);
}

.cocc-hero__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 1.9rem 0 0;
	padding: 0;
}

.cocc-hero__puce {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 1rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: 999px;
	font-size: var(--cocc-t-s);
	font-weight: 700;
	color: var(--cocc-encre-2);
	box-shadow: var(--cocc-ombre-s);
	transition: transform var(--cocc-rebond), border-color var(--cocc-transition);
}

.cocc-hero__puce:hover {
	transform: translateY(-3px) rotate(-1.5deg);
	border-color: var(--cocc-vert-clair);
}

/* --- Visuel du bandeau --- */

.cocc-hero__visuel {
	position: relative;
	isolation: isolate;
}

.cocc-hero__photo {
	position: relative;
	border-radius: var(--cocc-r-bulle);
	overflow: hidden;
	border: 5px solid var(--cocc-blanc);
	box-shadow: var(--cocc-ombre-l);
	aspect-ratio: 4 / 3.4;
	animation: cocc-morph 18s ease-in-out infinite;
}

.cocc-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cocc-hero__medaillon {
	position: absolute;
	bottom: -1.5rem;
	left: -1.5rem;
	width: clamp(7rem, 5rem + 8vw, 11rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid var(--cocc-blanc);
	box-shadow: var(--cocc-ombre-m);
	z-index: 2;
	animation: cocc-flotte 8s ease-in-out infinite;
}

.cocc-hero__medaillon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cocc-hero__pastille {
	position: absolute;
	top: -1rem;
	right: -0.5rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: clamp(5.2rem, 4rem + 3vw, 7rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--cocc-jaune);
	color: var(--cocc-encre);
	font-family: var(--cocc-titre);
	font-weight: 800;
	font-size: var(--cocc-t-s);
	line-height: 1.1;
	text-align: center;
	padding: 0.5rem;
	box-shadow: var(--cocc-ombre-m);
	transform: rotate(9deg);
	animation: cocc-pulse 4.5s ease-in-out infinite;
}

/*
 * Bandeau d'ouverture sur mobile : la photo passe en premier, et le bloc
 * de texte se resserre. Sur un écran de 390 px, l'empilement sur-titre +
 * titre + paragraphe + deux boutons + quatre puces repoussait la moindre
 * image hors de vue ; on ne voyait que du texte en arrivant sur le site.
 */
@media (max-width: 62em) {
	.cocc-hero__visuel { order: -1; }

	/* Le sur-titre répète le titre placé juste en dessous. */
	.cocc-hero .cocc-surtitre { display: none; }

	/* Trois visuels superposés sur 390 px : on ne garde que la photo. */
	.cocc-hero__medaillon,
	.cocc-hero__pastille { display: none; }

	.cocc-hero__photo {
		aspect-ratio: 4 / 3;
		border-width: 4px;
	}

	.cocc-hero__texte { font-size: var(--cocc-t-base); }

	.cocc-hero__puces {
		margin-top: 1.25rem;
		gap: 0.4rem;
	}

	.cocc-hero__puce {
		padding: 0.35rem 0.8rem;
		font-size: var(--cocc-t-xs);
	}

	/* Un seul bouton plein, le second en lien discret : la hiérarchie
	   d'action reste claire sans occuper deux blocs entiers. */
	.cocc-hero .cocc-boutons .cocc-btn--fantome {
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0.35rem 0;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.cocc-hero .cocc-boutons .cocc-btn--fantome:hover {
		background: transparent;
		transform: none;
	}
}

/* =============================================================================
   09. CARTES
   ========================================================================== */

.cocc-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
	overflow: hidden;
	box-shadow: var(--cocc-ombre-s);
	transition: transform var(--cocc-rebond), box-shadow var(--cocc-transition), border-color var(--cocc-transition);
}

.cocc-carte:hover,
.cocc-carte:focus-within {
	transform: translateY(-6px) rotate(-0.5deg);
	box-shadow: var(--cocc-ombre-l);
	border-color: var(--cocc-vert-clair);
}

.cocc-carte__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--cocc-vert-pastel);
}

.cocc-carte__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cocc-carte:hover .cocc-carte__media img {
	transform: scale(1.06);
}

.cocc-carte__emoji {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	background: var(--cocc-blanc);
	border-radius: 50%;
	font-size: 1.5rem;
	box-shadow: var(--cocc-ombre-s);
	z-index: 2;
}

.cocc-carte__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.5rem 1.65rem;
}

.cocc-carte__titre {
	font-size: var(--cocc-t-l);
	margin-bottom: 0.3em;
}

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

.cocc-carte__titre a:hover,
.cocc-carte__titre a:focus-visible {
	color: var(--cocc-rouge-lien);
}

.cocc-carte__accroche {
	color: var(--cocc-encre-2);
	font-size: var(--cocc-t-s);
	margin-bottom: 0.9rem;
}

.cocc-carte__texte {
	color: var(--cocc-encre-2);
	font-size: var(--cocc-t-s);
	flex: 1;
}

.cocc-carte__pied {
	margin-top: 1.15rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.cocc-carte__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--cocc-titre);
	font-weight: 700;
	font-size: var(--cocc-t-s);
	text-decoration: none;
	color: var(--cocc-rouge-lien);
}

.cocc-carte__lien .cocc-icone {
	width: 1em;
	height: 1em;
	transition: transform var(--cocc-transition);
}

.cocc-carte__lien:hover .cocc-icone {
	transform: translateX(4px);
}

/* Un liseré coloré en haut de carte, selon la formule. */
.cocc-carte--vert { border-top: 6px solid var(--cocc-vert-clair); }
.cocc-carte--rouge { border-top: 6px solid var(--cocc-rouge); }
.cocc-carte--jaune { border-top: 6px solid var(--cocc-jaune); }
.cocc-carte--rose { border-top: 6px solid #E8A99B; }

/* --- Carte détaillée d'une formule (page « Nos ateliers ») --- */

.cocc-formules {
	display: grid;
	gap: clamp(1.25rem, 0.8rem + 1.4vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.cocc-formule-carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
	overflow: hidden;
	box-shadow: var(--cocc-ombre-s);
	transition: transform var(--cocc-rebond), box-shadow var(--cocc-transition), border-color var(--cocc-transition);
}

.cocc-formule-carte:hover,
.cocc-formule-carte:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--cocc-ombre-l);
	border-color: var(--cocc-vert-clair);
}

.cocc-formule-carte--vert { border-top: 6px solid var(--cocc-vert-clair); }
.cocc-formule-carte--rouge { border-top: 6px solid var(--cocc-rouge); }
.cocc-formule-carte--jaune { border-top: 6px solid var(--cocc-jaune); }
.cocc-formule-carte--rose { border-top: 6px solid #E8A99B; }

.cocc-formule-carte__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cocc-vert-pastel);
}

.cocc-formule-carte__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cocc-formule-carte:hover .cocc-formule-carte__media img {
	transform: scale(1.05);
}

.cocc-formule-carte__emoji {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	background: var(--cocc-blanc);
	border-radius: 50%;
	font-size: 1.5rem;
	box-shadow: var(--cocc-ombre-s);
}

.cocc-formule-carte__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.6rem 1.65rem;
}

.cocc-formule-carte__titre {
	font-size: var(--cocc-t-l);
	margin-bottom: 0.2em;
}

.cocc-formule-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.cocc-formule-carte__titre a:hover,
.cocc-formule-carte__titre a:focus-visible {
	color: var(--cocc-rouge-lien);
}

.cocc-formule-carte__accroche {
	margin-bottom: 0.75rem;
	color: var(--cocc-rouge-lien);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
}

.cocc-formule-carte__texte {
	color: var(--cocc-encre-2);
	font-size: var(--cocc-t-s);
	margin-bottom: 1.1rem;
}

.cocc-formule-carte__infos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	flex: 1;
	align-content: flex-start;
}

.cocc-formule-carte__infos li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.75rem;
	background: var(--cocc-vert-pastel);
	border-radius: 999px;
	color: var(--cocc-vert-fonce);
	font-size: var(--cocc-t-xs);
	font-weight: 700;
}

.cocc-formule-carte__infos .cocc-icone {
	width: 0.95em;
	height: 0.95em;
	color: var(--cocc-vert);
}

.cocc-formule-carte__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.1rem;
	border-top: 2px dashed var(--cocc-sable-bord);
}

.cocc-formule-carte__tarif {
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-base);
	font-weight: 800;
	color: var(--cocc-vert);
}

.cocc-formule-carte__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.cocc-formule-carte__fiche {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	color: var(--cocc-rouge-lien);
	text-decoration: none;
}

.cocc-formule-carte__fiche:hover { text-decoration: underline; }
.cocc-formule-carte__fiche .cocc-icone { width: 1em; height: 1em; }

/* --- Carte membre --- */

.cocc-membre {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	align-items: start;
	grid-template-columns: 1fr;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--cocc-blanc);
	border: 2px dashed var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
}

@media (min-width: 48em) {
	.cocc-membre {
		grid-template-columns: 15rem 1fr;
	}

	/* Sans cette inversion du gabarit, la photo du membre affiché en
	   miroir hérite de la colonne large et s'affiche démesurée. */
	.cocc-membre--inverse {
		grid-template-columns: 1fr 15rem;
	}

	.cocc-membre--inverse > :first-child { order: 2; }
}

.cocc-membre__photo {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--cocc-r-bulle);
	overflow: hidden;
	border: 5px solid var(--cocc-vert-pastel);
	box-shadow: var(--cocc-ombre-m);
}

.cocc-membre__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cocc-membre__nom {
	margin-bottom: 0.15em;
}

.cocc-membre__fonction {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.25rem 0.85rem;
	background: var(--cocc-jaune-pale);
	border-radius: 999px;
	color: var(--cocc-jaune-fonce);
	font-size: var(--cocc-t-s);
	font-weight: 700;
}

.cocc-membre__logo {
	margin-top: 1.25rem;
	max-width: 12rem;
}

/* Sans plafond de hauteur, un logo en bannière verticale occupe tout l'espace. */
.cocc-membre__logo img {
	max-height: 4.5rem;
	width: auto;
	object-fit: contain;
}

/* =============================================================================
   10. INFORMATIONS PRATIQUES ET ENCARTS
   ========================================================================== */

.cocc-infos {
	display: grid;
	gap: 0;
	margin: 0 0 1.75rem;
	padding: 1.25rem 1.5rem;
	background: var(--cocc-vert-pastel);
	border: 2px solid var(--cocc-vert-pastel-bord);
	border-radius: var(--cocc-r-m);
}

.cocc-infos__ligne {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.5rem 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--cocc-vert-pastel-bord);
}

.cocc-infos__ligne:last-child { border-bottom: 0; }

.cocc-infos dt {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--cocc-vert);
	font-family: var(--cocc-titre);
	font-weight: 700;
	font-size: var(--cocc-t-s);
}

.cocc-infos dd {
	margin: 0;
	color: var(--cocc-encre-2);
	font-weight: 600;
}

.cocc-icone {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	flex-shrink: 0;
}

@media (max-width: 34em) {
	.cocc-infos__ligne { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Encarts --- */

.cocc-encart {
	position: relative;
	margin: 1.75rem 0;
	padding: 1.15rem 1.4rem 1.15rem 3.4rem;
	border-radius: var(--cocc-r-m);
	font-size: var(--cocc-t-s);
	line-height: 1.6;
}

.cocc-encart::before {
	position: absolute;
	top: 1.05rem;
	left: 1.15rem;
	font-size: 1.3rem;
	line-height: 1;
}

.cocc-encart--info {
	background: var(--cocc-vert-pastel);
	border: 2px solid var(--cocc-vert-pastel-bord);
	color: var(--cocc-vert-fonce);
}

.cocc-encart--info::before { content: "🌿"; }

.cocc-encart--attention {
	background: var(--cocc-jaune-pale);
	border: 2px solid var(--cocc-jaune);
	color: var(--cocc-jaune-fonce);
}

.cocc-encart--attention::before { content: "⚠️"; }

.cocc-encart--bonne {
	background: var(--cocc-rose);
	border: 2px solid #E8A99B;
	color: #8F2F20;
}

.cocc-encart--bonne::before { content: "🐞"; }

/* --- Déroulement en étapes --- */

.cocc-programme {
	list-style: none;
	margin: 1.75rem 0;
	padding: 0;
	counter-reset: cocc-etape;
}

.cocc-programme__etape {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
	padding: 0.85rem 1.15rem;
	margin-bottom: 0.6rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	transition: transform var(--cocc-transition), border-color var(--cocc-transition);
}

.cocc-programme__etape:hover {
	transform: translateX(6px);
	border-color: var(--cocc-vert-clair);
}

.cocc-programme__duree {
	display: inline-grid;
	place-items: center;
	min-width: 5.5rem;
	padding: 0.35rem 0.7rem;
	background: var(--cocc-vert);
	border-radius: 999px;
	color: var(--cocc-creme);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	text-align: center;
}

.cocc-programme__texte {
	font-weight: 600;
	color: var(--cocc-encre-2);
}

/* --- Grille tarifaire --- */

.cocc-tarifs {
	margin: 1.75rem 0;
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	overflow: hidden;
	background: var(--cocc-blanc);
}

.cocc-tarifs__titre {
	margin: 0;
	padding: 0.85rem 1.25rem;
	background: var(--cocc-vert);
	color: var(--cocc-creme);
	font-size: var(--cocc-t-base);
}

.cocc-tarifs__ligne {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px dashed var(--cocc-sable-bord);
}

.cocc-tarifs__ligne:last-child { border-bottom: 0; }

.cocc-tarifs__libelle { color: var(--cocc-encre-2); }

.cocc-tarifs__prix {
	font-family: var(--cocc-titre);
	font-weight: 800;
	color: var(--cocc-rouge-lien);
	white-space: nowrap;
}

.cocc-tarifs__note {
	padding: 0.75rem 1.25rem;
	background: var(--cocc-sable);
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-2);
}

/* =============================================================================
   11. GALERIE, VISIONNEUSE, VIDÉOS
   ========================================================================== */

.cocc-filtres {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}

.cocc-filtre {
	padding: 0.5rem 1.15rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: 999px;
	color: var(--cocc-encre-2);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	transition: all var(--cocc-transition);
}

.cocc-filtre:hover {
	border-color: var(--cocc-vert-clair);
	color: var(--cocc-vert);
	transform: translateY(-2px);
}

.cocc-filtre[aria-pressed="true"] {
	background: var(--cocc-vert);
	border-color: var(--cocc-vert);
	color: var(--cocc-creme);
}

.cocc-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

.cocc-galerie__item {
	position: relative;
	margin: 0;
	border-radius: var(--cocc-r-m);
	overflow: hidden;
	background: var(--cocc-vert-pastel);
	border: 3px solid var(--cocc-blanc);
	box-shadow: var(--cocc-ombre-s);
	aspect-ratio: 1;
	transition: transform var(--cocc-rebond), box-shadow var(--cocc-transition);
}

.cocc-galerie__item:nth-child(4n+1) { border-radius: var(--cocc-r-l) var(--cocc-r-m) var(--cocc-r-l) var(--cocc-r-m); }
.cocc-galerie__item:nth-child(4n+3) { border-radius: var(--cocc-r-m) var(--cocc-r-l) var(--cocc-r-m) var(--cocc-r-l); }

.cocc-galerie__item:hover,
.cocc-galerie__item:focus-within {
	transform: translateY(-5px) rotate(1deg) scale(1.02);
	box-shadow: var(--cocc-ombre-l);
	z-index: 2;
}

.cocc-galerie__bouton {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

.cocc-galerie__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cocc-galerie__legende {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.75rem 0.85rem 0.7rem;
	background: linear-gradient(transparent, rgba(43, 43, 35, 0.82));
	color: #fff;
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	text-align: left;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--cocc-transition), transform var(--cocc-transition);
}

.cocc-galerie__item:hover .cocc-galerie__legende,
.cocc-galerie__item:focus-within .cocc-galerie__legende {
	opacity: 1;
	transform: translateY(0);
}

.cocc-galerie__badge {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	background: var(--cocc-rouge-btn);
	border-radius: 50%;
	color: #fff;
	font-size: 0.9rem;
	z-index: 2;
	box-shadow: var(--cocc-ombre-s);
}

.cocc-galerie__item.est-masque { display: none; }

/* Masquée par la condensation, pas par un filtre. */
.cocc-galerie__item.est-cache { display: none; }

.cocc-galerie-plus {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.cocc-galerie-plus__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.5rem;
	background: var(--cocc-blanc);
	border: 2px dashed var(--cocc-sable-bord);
	border-radius: 999px;
	color: var(--cocc-vert);
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	transition: all var(--cocc-transition);
}

.cocc-galerie-plus__bouton:hover,
.cocc-galerie-plus__bouton:focus-visible {
	background: var(--cocc-vert-pastel);
	border-color: var(--cocc-vert-clair);
	border-style: solid;
	transform: translateY(-2px);
}

.cocc-galerie-plus__bouton::after {
	content: "▾";
	font-size: 0.9em;
	transition: transform var(--cocc-transition);
}

.cocc-galerie-plus__bouton[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* --- Visionneuse --- */

.cocc-visionneuse {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	place-items: center;
	background: rgba(28, 30, 25, 0.94);
	padding: clamp(1rem, 3vw, 3rem);
}

.cocc-visionneuse.est-ouverte { display: grid; }

.cocc-visionneuse__figure {
	margin: 0;
	max-width: min(96vw, 78rem);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	align-items: center;
}

.cocc-visionneuse__figure img {
	max-height: 78vh;
	width: auto;
	border-radius: var(--cocc-r-m);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cocc-visionneuse__legende {
	color: var(--cocc-creme);
	font-size: var(--cocc-t-s);
	text-align: center;
	max-width: 42rem;
}

.cocc-visionneuse__compteur {
	color: var(--cocc-gris-pied);
	font-size: var(--cocc-t-xs);
}

.cocc-visionneuse button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	background: rgba(251, 246, 236, 0.14);
	border: 2px solid rgba(251, 246, 236, 0.32);
	border-radius: 50%;
	color: var(--cocc-creme);
	font-size: 1.5rem;
	line-height: 1;
	transition: background-color var(--cocc-transition), transform var(--cocc-transition);
}

.cocc-visionneuse button:hover {
	background: rgba(251, 246, 236, 0.28);
	transform: scale(1.08);
}

.cocc-visionneuse__fermer { top: 1.25rem; right: 1.25rem; }
.cocc-visionneuse__prec { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.cocc-visionneuse__suiv { right: 1.25rem; top: 50%; transform: translateY(-50%); }

.cocc-visionneuse__prec:hover { transform: translateY(-50%) scale(1.08); }
.cocc-visionneuse__suiv:hover { transform: translateY(-50%) scale(1.08); }

/* --- Vidéo en façade --- */

.cocc-video {
	position: relative;
	margin: 1.5rem 0;
	border-radius: var(--cocc-r-m);
	overflow: hidden;
	background: var(--cocc-vert-fonce);
	border: 3px solid var(--cocc-blanc);
	box-shadow: var(--cocc-ombre-m);
}

.cocc-video__bouton {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background-color: var(--cocc-vert-fonce);
	background-size: cover;
	background-position: center;
}

.cocc-video__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(38, 75, 47, 0.25), rgba(38, 75, 47, 0.55));
	transition: background var(--cocc-transition);
}

.cocc-video__bouton:hover .cocc-video__voile {
	background: linear-gradient(rgba(38, 75, 47, 0.1), rgba(38, 75, 47, 0.4));
}

.cocc-video__play {
	position: relative;
	width: 4.75rem;
	transition: transform var(--cocc-rebond);
}

.cocc-video__bouton:hover .cocc-video__play {
	transform: scale(1.13);
}

.cocc-video__play-fond { fill: var(--cocc-rouge-btn); }
.cocc-video__play-fleche { fill: #fff; }

.cocc-video__titre {
	margin: 0;
	padding: 0.85rem 1.15rem 0.2rem;
	background: var(--cocc-blanc);
	font-family: var(--cocc-titre);
	font-weight: 700;
	color: var(--cocc-vert);
}

.cocc-video__note {
	margin: 0;
	padding: 0 1.15rem 0.85rem;
	background: var(--cocc-blanc);
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-3);
}

.cocc-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

/* =============================================================================
   12. DOCUMENTS, AGENDA, PRESSE, LIENS
   ========================================================================== */

.cocc-documents {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cocc-document {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	text-decoration: none;
	color: var(--cocc-encre);
	transition: transform var(--cocc-transition), border-color var(--cocc-transition), box-shadow var(--cocc-transition);
}

.cocc-document:hover,
.cocc-document:focus-visible {
	transform: translateY(-3px);
	border-color: var(--cocc-rouge);
	box-shadow: var(--cocc-ombre-m);
	color: var(--cocc-encre);
	text-decoration: none;
}

.cocc-document__icone {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	background: var(--cocc-rose);
	border-radius: var(--cocc-r-s);
	color: var(--cocc-rouge-fonce);
	font-family: var(--cocc-titre);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.cocc-document__corps { flex: 1; min-width: 0; }

.cocc-document__nom {
	display: block;
	font-family: var(--cocc-titre);
	font-weight: 700;
	color: var(--cocc-vert);
	line-height: 1.25;
}

.cocc-document__meta {
	display: block;
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-3);
	margin-top: 0.15rem;
}

.cocc-document__fleche {
	flex-shrink: 0;
	color: var(--cocc-rouge-lien);
	transition: transform var(--cocc-transition);
}

.cocc-document:hover .cocc-document__fleche {
	transform: translateY(3px);
}

/* --- Agenda --- */

.cocc-agenda {
	display: grid;
	gap: 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cocc-evenement {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.15rem 1.4rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	transition: transform var(--cocc-transition), border-color var(--cocc-transition);
}

.cocc-evenement:hover {
	transform: translateX(5px);
	border-color: var(--cocc-vert-clair);
}

.cocc-evenement__date {
	display: grid;
	place-items: center;
	min-width: 4.5rem;
	padding: 0.6rem 0.5rem;
	background: var(--cocc-vert-pastel);
	border-radius: var(--cocc-r-s);
	text-align: center;
	line-height: 1.05;
}

.cocc-evenement__jour {
	font-family: var(--cocc-titre);
	font-size: 1.65rem;
	font-weight: 800;
	color: var(--cocc-vert);
}

.cocc-evenement__mois {
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cocc-encre-2);
	letter-spacing: 0.04em;
}

.cocc-evenement__titre {
	margin: 0 0 0.2rem;
	font-size: var(--cocc-t-m);
}

.cocc-evenement__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-2);
}

.cocc-evenement__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.cocc-etiquette {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: var(--cocc-t-xs);
	font-weight: 800;
	white-space: nowrap;
}

.cocc-etiquette--ouvert { background: var(--cocc-vert-pastel); color: var(--cocc-vert-fonce); }
.cocc-etiquette--complet { background: var(--cocc-jaune-pale); color: var(--cocc-jaune-fonce); }
.cocc-etiquette--annule { background: var(--cocc-rose); color: var(--cocc-rouge-fonce); }

@media (max-width: 48em) {
	.cocc-evenement {
		grid-template-columns: auto 1fr;
	}

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

/* --- Presse --- */

.cocc-presse {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.25rem;
}

.cocc-presse__item {
	display: flex;
	flex-direction: column;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	overflow: hidden;
	transition: transform var(--cocc-rebond), box-shadow var(--cocc-transition);
}

.cocc-presse__item:hover {
	transform: translateY(-5px) rotate(-0.6deg);
	box-shadow: var(--cocc-ombre-l);
}

.cocc-presse__visuel {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cocc-sable);
}

.cocc-presse__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.cocc-presse__corps { padding: 1.15rem 1.35rem 1.4rem; }

.cocc-presse__media {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 0.2rem 0.7rem;
	background: var(--cocc-vert-pastel);
	border-radius: 999px;
	font-size: var(--cocc-t-xs);
	font-weight: 800;
	color: var(--cocc-vert);
}

.cocc-presse__titre {
	font-size: var(--cocc-t-base);
	margin-bottom: 0.25rem;
}

.cocc-presse__date {
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-3);
}

/* --- Liens et partenaires --- */

.cocc-liens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cocc-lien-carte {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
	background: var(--cocc-blanc);
	border: 2px dashed var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
	text-decoration: none;
	color: var(--cocc-encre);
	text-align: center;
	transition: transform var(--cocc-rebond), border-color var(--cocc-transition), box-shadow var(--cocc-transition);
}

.cocc-lien-carte:hover,
.cocc-lien-carte:focus-visible {
	transform: translateY(-5px);
	border-color: var(--cocc-vert-clair);
	border-style: solid;
	box-shadow: var(--cocc-ombre-m);
	color: var(--cocc-encre);
	text-decoration: none;
}

.cocc-lien-carte__logo {
	display: grid;
	place-items: center;
	height: 6.5rem;
	margin-bottom: 1rem;
}

.cocc-lien-carte__logo img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.cocc-lien-carte__nom {
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-m);
	font-weight: 700;
	color: var(--cocc-vert);
	margin-bottom: 0.2rem;
}

.cocc-lien-carte__sous {
	font-size: var(--cocc-t-s);
	color: var(--cocc-encre-2);
	flex: 1;
}

.cocc-lien-carte__url {
	margin-top: 0.9rem;
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	color: var(--cocc-rouge-lien);
	word-break: break-word;
}

/* --- Lieux --- */

.cocc-lieu {
	display: grid;
	gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	grid-template-columns: 1fr;
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
	margin-bottom: 1.5rem;
}

@media (min-width: 52em) {
	.cocc-lieu { grid-template-columns: 1fr 18rem; align-items: center; }

	/* Même correction que pour les membres : le gabarit suit l'ordre visuel. */
	.cocc-lieu--inverse { grid-template-columns: 18rem 1fr; }
	.cocc-lieu--inverse > :first-child { order: 2; }
}

.cocc-lieu__photo {
	border-radius: var(--cocc-r-m);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.cocc-lieu__photo img { width: 100%; height: 100%; object-fit: cover; }

.cocc-lieu__adresse {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
	padding: 0.3rem 0.85rem;
	background: var(--cocc-vert-pastel);
	border-radius: 999px;
	color: var(--cocc-vert);
	font-size: var(--cocc-t-s);
	font-weight: 700;
}

/* --- Coordonnées de contact --- */

.cocc-coordonnees {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.cocc-coordonnee {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.9rem 1.15rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	transition: border-color var(--cocc-transition), transform var(--cocc-transition);
}

.cocc-coordonnee:hover {
	border-color: var(--cocc-vert-clair);
	transform: translateX(4px);
}

.cocc-coordonnee__icone {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	flex-shrink: 0;
	background: var(--cocc-vert-pastel);
	border-radius: 50%;
	color: var(--cocc-vert);
}

.cocc-coordonnee__label {
	display: block;
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cocc-encre-3);
}

.cocc-coordonnee__valeur {
	font-family: var(--cocc-titre);
	font-weight: 700;
	color: var(--cocc-vert);
	font-size: var(--cocc-t-m);
}

.cocc-coordonnee__valeur a { color: inherit; text-decoration: none; }
.cocc-coordonnee__valeur a:hover { color: var(--cocc-rouge-lien); }

/* --- Réseaux sociaux --- */

.cocc-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cocc-reseaux a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--cocc-vert-pastel);
	border: 2px solid var(--cocc-vert-pastel-bord);
	border-radius: 50%;
	color: var(--cocc-vert);
	transition: transform var(--cocc-rebond), background-color var(--cocc-transition), color var(--cocc-transition);
}

.cocc-reseaux a:hover,
.cocc-reseaux a:focus-visible {
	background: var(--cocc-vert);
	border-color: var(--cocc-vert);
	color: var(--cocc-creme);
	transform: translateY(-3px) rotate(-8deg);
}

.cocc-reseaux--clair a {
	background: rgba(251, 246, 236, 0.1);
	border-color: rgba(251, 246, 236, 0.25);
	color: var(--cocc-creme);
}

.cocc-reseaux--clair a:hover,
.cocc-reseaux--clair a:focus-visible {
	background: var(--cocc-jaune);
	border-color: var(--cocc-jaune);
	color: var(--cocc-encre);
}

/* =============================================================================
   13. FORMULAIRES
   ========================================================================== */

.cocc-form-wrap {
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--cocc-blanc);
	border: 3px dashed var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
}

.cocc-form-titre { margin-bottom: 0.3em; }

.cocc-form-texte {
	color: var(--cocc-encre-2);
	margin-bottom: 1.5rem;
}

.cocc-form__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.15rem;
}

.cocc-form__champ--large { grid-column: 1 / -1; }

.cocc-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--cocc-titre);
	font-size: var(--cocc-t-s);
	font-weight: 700;
	color: var(--cocc-vert);
}

.cocc-form input[type="text"],
.cocc-form input[type="email"],
.cocc-form input[type="tel"],
.cocc-form input[type="number"],
.cocc-form textarea {
	width: 100%;
	padding: 0.7rem 0.95rem;
	background: var(--cocc-creme);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-s);
	font-family: inherit;
	font-size: var(--cocc-t-base);
	color: var(--cocc-encre);
	transition: border-color var(--cocc-transition), background-color var(--cocc-transition), box-shadow var(--cocc-transition);
}

.cocc-form input:focus,
.cocc-form textarea:focus {
	outline: none;
	background: var(--cocc-blanc);
	border-color: var(--cocc-vert-clair);
	box-shadow: 0 0 0 4px rgba(111, 168, 85, 0.18);
}

.cocc-form textarea { resize: vertical; min-height: 7rem; }

.cocc-form__requis { color: var(--cocc-rouge); }

.cocc-form__aide,
.cocc-form__legende,
.cocc-form__rgpd {
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-3);
	margin: 0.4rem 0 0;
}

.cocc-form__legende { margin-top: 1rem; }

.cocc-form__rgpd {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--cocc-vert-pastel);
	border-radius: var(--cocc-r-s);
	color: var(--cocc-vert-fonce);
}

.cocc-form__erreur {
	margin: 0.35rem 0 0;
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	color: var(--cocc-rouge-fonce);
}

.cocc-form__champ--erreur input,
.cocc-form__champ--erreur textarea {
	border-color: var(--cocc-rouge);
	background: #FDF2F0;
}

.cocc-form__envoi { margin-top: 1.5rem; }

/* Champ piège : hors écran, invisible mais atteignable par les robots. */
.cocc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cocc-alerte {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--cocc-r-m);
	font-weight: 600;
}

.cocc-alerte p { margin: 0; }

.cocc-alerte--succes {
	background: var(--cocc-vert-pastel);
	border: 2px solid var(--cocc-vert-clair);
	color: var(--cocc-vert-fonce);
}

.cocc-alerte--succes span { font-size: 1.4rem; animation: cocc-wiggle 2s ease-in-out infinite; }

.cocc-alerte--erreur {
	background: var(--cocc-rose);
	border: 2px solid var(--cocc-rouge);
	color: var(--cocc-rouge-fonce);
}

/* =============================================================================
   14. PIED DE PAGE
   ========================================================================== */

.cocc-pied {
	position: relative;
	background: var(--cocc-encre);
	color: var(--cocc-gris-pied);
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
	margin-top: 0;
}

.cocc-pied a {
	color: var(--cocc-gris-pied);
	text-decoration: none;
}

.cocc-pied a:hover,
.cocc-pied a:focus-visible {
	color: var(--cocc-jaune);
	text-decoration: underline;
}

.cocc-pied__grille {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	padding-bottom: 2.5rem;
}

.cocc-pied__marque img {
	height: 76px;
	width: auto;
	margin-bottom: 1rem;
}

.cocc-pied__texte {
	font-size: var(--cocc-t-s);
	color: #A8A290;
	max-width: 22rem;
}

.cocc-pied__titre {
	margin: 0 0 1rem;
	color: var(--cocc-jaune);
	font-size: var(--cocc-t-base);
	font-family: var(--cocc-titre);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.cocc-pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: var(--cocc-t-s);
}

.cocc-pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.35rem;
	border-top: 1px solid rgba(216, 210, 194, 0.16);
	font-size: var(--cocc-t-xs);
	color: #8C8676;
}

.cocc-pied__credit {
	display: inline-block;
	margin-left: 0.5rem;
	padding-left: 0.65rem;
	border-left: 1px solid rgba(216, 210, 194, 0.28);
	color: #8C8676;
}

.cocc-pied__credit a {
	color: #8C8676;
}

.cocc-pied__credit a:hover,
.cocc-pied__credit a:focus-visible {
	color: var(--cocc-jaune);
}

@media (max-width: 34em) {
	.cocc-pied__credit {
		display: block;
		margin: 0.4rem 0 0;
		padding-left: 0;
		border-left: 0;
	}
}

.cocc-pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Bouton de retour en haut --- */

.cocc-haut {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 45;
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	background: var(--cocc-rouge-btn);
	border: 3px solid var(--cocc-blanc);
	border-radius: 50%;
	color: #fff;
	box-shadow: var(--cocc-ombre-m);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity var(--cocc-transition), transform var(--cocc-rebond), visibility var(--cocc-transition), background-color var(--cocc-transition);
}

.cocc-haut.est-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cocc-haut:hover {
	background: var(--cocc-rouge-fonce);
	transform: translateY(-3px) scale(1.06);
}

.cocc-haut .cocc-icone {
	width: 1.4rem;
	height: 1.4rem;
	transform: rotate(-90deg);
}

/* =============================================================================
   15. CONTENU ÉDITORIAL
   ========================================================================== */

.cocc-prose {
	max-width: var(--cocc-largeur-texte);
	color: var(--cocc-encre-2);
	font-size: var(--cocc-t-m);
}

.cocc-prose--large { max-width: none; }

.cocc-prose > *:first-child { margin-top: 0; }
.cocc-prose > *:last-child { margin-bottom: 0; }

.cocc-prose h2 { margin-top: 2.25em; font-size: var(--cocc-t-xl); }
.cocc-prose h3 { margin-top: 1.9em; font-size: var(--cocc-t-l); }
.cocc-prose h4 { margin-top: 1.6em; font-size: var(--cocc-t-m); color: var(--cocc-encre); }

.cocc-prose ul,
.cocc-prose ol {
	margin: 0 0 1.3em;
	padding-left: 0;
	list-style: none;
}

.cocc-prose ol { counter-reset: cocc-liste; }

.cocc-prose ul > li,
.cocc-prose ol > li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.6em;
}

.cocc-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: 0.62em;
	width: 0.6rem;
	height: 0.6rem;
	background: var(--cocc-rouge);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--cocc-rose);
}

.cocc-prose ol > li::before {
	counter-increment: cocc-liste;
	content: counter(cocc-liste);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	background: var(--cocc-vert);
	border-radius: 50%;
	color: var(--cocc-creme);
	font-family: var(--cocc-titre);
	font-size: 0.8rem;
	font-weight: 800;
}

.cocc-prose img {
	border-radius: var(--cocc-r-m);
	box-shadow: var(--cocc-ombre-s);
	margin-block: 1.5rem;
}

.cocc-prose table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.5rem;
	font-size: var(--cocc-t-s);
}

.cocc-prose th,
.cocc-prose td {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--cocc-sable-bord);
	text-align: left;
}

.cocc-prose th {
	background: var(--cocc-vert-pastel);
	color: var(--cocc-vert);
	font-family: var(--cocc-titre);
}

/* --- Liste à puces en colonnes (les buts) --- */

.cocc-buts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cocc-but {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.95rem 1.15rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	font-size: var(--cocc-t-s);
	color: var(--cocc-encre-2);
	transition: transform var(--cocc-transition), border-color var(--cocc-transition);
}

.cocc-but:hover {
	transform: translateY(-3px);
	border-color: var(--cocc-vert-clair);
}

.cocc-but__puce {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1rem;
	background: var(--cocc-rouge);
	border-radius: 50%;
	position: relative;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.cocc-but__puce::before,
.cocc-but__puce::after {
	content: "";
	position: absolute;
	width: 0.28rem;
	height: 0.28rem;
	background: var(--cocc-encre);
	border-radius: 50%;
}

.cocc-but__puce::before { top: 0.35rem; left: 0.3rem; }
.cocc-but__puce::after { top: 0.72rem; left: 0.72rem; }

/* --- Valeurs --- */

.cocc-valeur {
	padding: clamp(1.35rem, 1rem + 1.5vw, 2rem);
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
	height: 100%;
	transition: transform var(--cocc-rebond), box-shadow var(--cocc-transition);
}

.cocc-valeur:hover {
	transform: translateY(-5px) rotate(-0.5deg);
	box-shadow: var(--cocc-ombre-m);
}

.cocc-valeur__emoji {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	margin-bottom: 1rem;
	background: var(--cocc-vert-pastel);
	border-radius: 50%;
	font-size: 1.7rem;
}

.cocc-valeur__titre { font-size: var(--cocc-t-l); margin-bottom: 0.4em; }

.cocc-valeur__texte { color: var(--cocc-encre-2); font-size: var(--cocc-t-s); }

.cocc-valeur__liste {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.cocc-valeur__liste li {
	padding: 0.25rem 0.7rem;
	background: var(--cocc-vert-pastel);
	border-radius: 999px;
	font-size: var(--cocc-t-xs);
	font-weight: 700;
	color: var(--cocc-vert);
}

/* --- Objectifs --- */

.cocc-objectif {
	position: relative;
	padding: 1.4rem 1.6rem 1.4rem 4.25rem;
	margin-bottom: 1rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: var(--cocc-r-m);
	counter-increment: cocc-objectif;
	transition: transform var(--cocc-transition), border-color var(--cocc-transition);
}

.cocc-objectifs { counter-reset: cocc-objectif; }

.cocc-objectif::before {
	content: counter(cocc-objectif, decimal-leading-zero);
	position: absolute;
	left: 1.3rem;
	top: 1.35rem;
	font-family: var(--cocc-titre);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--cocc-vert-pastel-bord);
}

.cocc-objectif:hover {
	transform: translateX(5px);
	border-color: var(--cocc-vert-clair);
}

.cocc-objectif__titre { font-size: var(--cocc-t-m); margin-bottom: 0.35em; }
.cocc-objectif__texte { color: var(--cocc-encre-2); font-size: var(--cocc-t-s); margin: 0; }

/* --- En-tête de page intérieure --- */

.cocc-entete-page {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 6rem);
	background:
		radial-gradient(ellipse 60% 70% at 85% 15%, rgba(234, 243, 226, 0.85), transparent 70%),
		var(--cocc-sable);
	text-align: center;
}

.cocc-entete-page__contenu { position: relative; z-index: 3; }

.cocc-entete-page__titre { margin-bottom: 0.25em; }

.cocc-entete-page__texte {
	max-width: 46rem;
	margin-inline: auto;
	color: var(--cocc-encre-2);
	font-size: var(--cocc-t-m);
}

.cocc-fil {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
	font-size: var(--cocc-t-xs);
	color: var(--cocc-encre-3);
}

.cocc-fil a { color: var(--cocc-encre-2); text-decoration: none; }
.cocc-fil a:hover { color: var(--cocc-rouge-lien); text-decoration: underline; }

/* --- Affiches --- */

.cocc-affiches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem;
	margin-block: 2rem;
}

.cocc-affiche {
	margin: 0;
	border: 3px solid var(--cocc-blanc);
	border-radius: var(--cocc-r-m);
	overflow: hidden;
	box-shadow: var(--cocc-ombre-m);
	background: var(--cocc-blanc);
	transition: transform var(--cocc-rebond);
}

.cocc-affiche:hover { transform: scale(1.02) rotate(-0.5deg); }

.cocc-affiche button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

/* =============================================================================
   16. ANIMATIONS
   ========================================================================== */

@keyframes cocc-flotte {
	0%, 100% { transform: translateY(0) rotate(-7deg); }
	50% { transform: translateY(-14px) rotate(6deg); }
}

@keyframes cocc-wiggle {
	0%, 100% { transform: rotate(-9deg); }
	50% { transform: rotate(9deg); }
}

@keyframes cocc-pulse {
	0%, 100% { transform: rotate(9deg) scale(1); }
	50% { transform: rotate(9deg) scale(1.06); }
}

@keyframes cocc-morph {
	0%, 100% { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
	33% { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; }
	66% { border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%; }
}

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

.cocc-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cocc-reveal.est-visible {
	opacity: 1;
	transform: translateY(0);
}

.cocc-reveal[data-delai="1"] { transition-delay: 90ms; }
.cocc-reveal[data-delai="2"] { transition-delay: 180ms; }
.cocc-reveal[data-delai="3"] { transition-delay: 270ms; }
.cocc-reveal[data-delai="4"] { transition-delay: 360ms; }
.cocc-reveal[data-delai="5"] { transition-delay: 450ms; }

/* --- Respect du réglage système --- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.cocc-reveal {
		opacity: 1;
		transform: none;
	}
}

/* =============================================================================
   16 bis. CONFORT TACTILE ET PETITS ÉCRANS
   -----------------------------------------------------------------------------
   Toute cible tactile vise 44 px de haut, seuil au-delà duquel un doigt
   n'a plus à viser. Les éléments décoratifs cèdent la place au contenu.
   ========================================================================== */

@media (max-width: 48em) {

	/* --- Cibles tactiles --- */
	.cocc-filtre {
		min-height: 44px;
		padding-block: 0.6rem;
	}

	.cocc-sousnav__lien {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.cocc-banniere__fermer {
		width: 40px;
		height: 40px;
	}

	.cocc-reseaux a {
		width: 44px;
		height: 44px;
	}

	.cocc-pied__liste {
		gap: 0.75rem;
	}

	/* --- Boutons pleine largeur : plus faciles à viser, plus nets --- */
	.cocc-hero .cocc-boutons,
	.cocc-section--fonce .cocc-boutons {
		flex-direction: column;
		align-items: stretch;
	}

	.cocc-hero .cocc-boutons .cocc-btn,
	.cocc-section--fonce .cocc-boutons .cocc-btn {
		width: 100%;
	}

	/* --- Le bandeau d'annonce ne doit pas manger l'écran --- */
	.cocc-banniere {
		font-size: var(--cocc-t-xs);
	}

	.cocc-banniere__contenu {
		padding: 0.5rem 2.6rem 0.5rem 0.9rem;
		gap: 0.35rem;
	}

	/* --- Cartes et grilles --- */
	.cocc-formule-carte__pied {
		align-items: flex-start;
	}

	.cocc-formule-carte__actions {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}

	.cocc-visionneuse__prec { left: 0.5rem; }
	.cocc-visionneuse__suiv { right: 0.5rem; }
	.cocc-visionneuse__fermer { top: 0.75rem; right: 0.75rem; }

	.cocc-haut {
		right: 0.85rem;
		bottom: 0.85rem;
	}
}

@media (max-width: 34em) {
	/* Le tableau des tarifs passe en deux lignes plutôt que de s'écraser. */
	.cocc-tarifs__ligne {
		flex-direction: column;
		gap: 0.15rem;
	}

	.cocc-programme__etape {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.cocc-programme__duree {
		justify-self: start;
	}

	.cocc-pied__bas {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =============================================================================
   17. UTILITAIRES ET IMPRESSION
   ========================================================================== */

.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;
}

.cocc-saut-contenu {
	position: absolute;
	left: 50%;
	top: -100px;
	transform: translateX(-50%);
	z-index: 200;
	padding: 0.75rem 1.5rem;
	background: var(--cocc-vert);
	color: var(--cocc-creme);
	border-radius: 0 0 var(--cocc-r-m) var(--cocc-r-m);
	font-family: var(--cocc-titre);
	font-weight: 700;
	text-decoration: none;
	transition: top var(--cocc-transition);
}

.cocc-saut-contenu:focus {
	top: 0;
	color: var(--cocc-creme);
}

.cocc-centre { text-align: center; }
.cocc-mt-0 { margin-top: 0; }
.cocc-mb-0 { margin-bottom: 0; }

.cocc-vide {
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--cocc-sable);
	border: 2px dashed var(--cocc-sable-bord);
	border-radius: var(--cocc-r-l);
	color: var(--cocc-encre-2);
}

.cocc-vide__bug {
	display: block;
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	animation: cocc-wiggle 3s ease-in-out infinite;
}

/* --- Pagination --- */

.cocc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 3rem;
}

.cocc-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.7rem;
	height: 2.7rem;
	padding-inline: 0.7rem;
	background: var(--cocc-blanc);
	border: 2px solid var(--cocc-sable-bord);
	border-radius: 999px;
	color: var(--cocc-encre-2);
	font-family: var(--cocc-titre);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--cocc-transition);
}

.cocc-pagination .page-numbers:hover {
	border-color: var(--cocc-vert-clair);
	color: var(--cocc-vert);
	transform: translateY(-2px);
}

.cocc-pagination .page-numbers.current {
	background: var(--cocc-vert);
	border-color: var(--cocc-vert);
	color: var(--cocc-creme);
}

@media print {
	.cocc-entete,
	.cocc-banniere,
	.cocc-pied,
	.cocc-haut,
	.cocc-promeneuse,
	.cocc-decor,
	.cocc-wave,
	.cocc-form-wrap,
	.cocc-filtres {
		display: none !important;
	}

	body { background: #fff; color: #000; }
	body::before { display: none; }
	.cocc-section { padding-block: 1rem; }
	a { color: #000; text-decoration: underline; }
}