/* =========================================================================
 * Crochet par Custom & Passionate — feuille principale
 * Esthétique artisanale, douce, épurée. Beaucoup d'espace blanc.
 * Surcharge Storefront. Variables de palette dans <style id="crochet-palette">.
 * ========================================================================= */

/* ------------------------------------------------------------------ BASE */

body {
	/* Dégradé pastel doux, fixé pour rester calme au défilement.
	   Repli en couleur unie pour les très vieux navigateurs. */
	background-color: var(--c-fond-1);
	background-image: var(--c-fond-degrade);
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 100vh;
}

body,
.site {
	color: var(--c-charbon);
	font-family: var(--police-corps);
	font-size: 20px; /* corps agrandi (était 17px) — espacements inchangés */
	line-height: 1.7;
}

/* Laisser le dégradé du corps transparaître derrière le contenu ;
   en-tête, cartes produits et footer restent blancs pour le contraste. */
.site {
	background-color: transparent;
}

body {
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.entry-title,
.product_title {
	font-family: var(--police-titre);
	color: var(--c-charbon);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

/* Les titres script sont plus grands pour rester lisibles. */
h1, .page-title, .product_title { font-size: 3.9rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.9rem; }

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover,
a:focus {
	color: var(--c-accent-fonce);
	text-decoration: underline;
}

.col-full {
	max-width: 1120px;
}

/* Air entre la barre de menu et le contenu : Storefront colle le contenu
   sous l'en-tête (le titre « À propos » touchait presque la barre). */
#content.site-content {
	padding-top: 2.4em;
}

/* ------------------------------------------------------------- BOUTONS */

button,
.button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
	background-color: var(--c-accent);
	color: var(--c-blanc);
	font-family: var(--police-corps);
	font-weight: 700;
	letter-spacing: 0.02em;
	border: none;
	border-radius: 999px;
	padding: 0.85em 2em;
	text-shadow: none;
	box-shadow: 0 2px 10px rgba(126, 92, 156, 0.25);
	transition: background-color 0.15s ease, transform 0.15s ease;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: var(--c-accent-fonce);
	color: var(--c-blanc);
	transform: translateY(-1px);
}

/* Bouton d'achat principal : bien visible. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	font-size: 1.15rem;
	padding: 1em 2.5em;
}

/* --------------------------------------------------------------- EN-TÊTE */

.site-header {
	background-color: var(--c-blanc);
	border-bottom: 1px solid var(--c-lavande-clair);
	box-shadow: 0 1px 12px rgba(126, 92, 156, 0.06);
	padding: 0.28em 0;
	position: relative;
	/* Storefront impose margin-bottom:4.235em (~85px) sur #masthead (ID), ce qui
	   creusait un énorme vide avant la bannière. On l'annule : l'air sous la
	   barre est géré par le padding-top de #content ci-dessus.
	   !important : nécessaire pour battre le sélecteur #masthead du parent. */
	margin-bottom: 0 !important;
}

/* UNE barre horizontale : logo à gauche, navigation + panier à droite. */
.site-header .col-full {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0 1.6em;
}

/* Marque à gauche. On neutralise la largeur (73,9%) et le float imposés par
   Storefront, sinon le logo occupe toute la ligne et pousse la nav dessous. */
.site-header .site-branding,
.site-header .site-logo-anchor,
.site-header .custom-logo-link {
	width: auto !important;
	margin: 0;
	text-align: left;
	float: none;
}
.site-header .site-branding {
	flex: 0 0 auto;
}
/* Nav dimensionnée sur son contenu (flex:0 0 auto → sinon elle prend une
   largeur gloutonne et pousse le panier/menu hors écran) ; margin-left:auto
   la pousse, avec le panier qui la suit, vers la droite de la barre. */
.site-header .main-navigation {
	flex: 0 0 auto;
	width: auto !important;   /* Storefront impose 73,9% ; on le neutralise. */
	margin-left: auto;
}
.site-header .crochet-cart-link { flex: 0 0 auto; }
/* Bureau (≥768px) : .primary-navigation est un bloc que Storefront étire à
   ~74% de la barre, ce qui rend la nav gloutonne (~828px) et pousse le panier
   hors écran. On le force à se dimensionner sur son contenu (les liens).
   !important car Storefront impose display/width fortement.
   Limité à ≥768px pour ne pas ré-afficher ce menu sur mobile (où Storefront le
   masque au profit du bouton « Menu »). */
@media (min-width: 768px) {
	.site-header .main-navigation .primary-navigation {
		display: inline-block !important;
		width: auto !important;
		float: none !important;
		vertical-align: middle;
	}
	.site-header .main-navigation .primary-navigation > ul {
		display: inline-flex;
		width: auto;
	}
}

/* Filet de sécurité si un logo image WordPress était utilisé : le cadrer sur
   la hauteur de la barre (sélecteur spécifique pour battre Storefront). */
.site-header .custom-logo-link img,
.custom-logo {
	max-height: 52px;
	width: auto;
	max-width: none;
	margin: 0;
}
.site-description { display: none; }

/* ---- Logo horizontal : icône « pelote » + nom en texte ---- */
.crochet-marque-wrap {
	margin: 0;
	padding: 0;
	/* Storefront donne à ce titre (h1.site-title) un font-size énorme (~3.9em) ;
	   comme line-height:1 est relatif à CE font-size, le bloc restait haut (~62px)
	   même avec une petite icône. On neutralise le font-size hérité pour que le
	   bloc épouse la hauteur réelle du logo. */
	font-size: 1rem;
	line-height: 1;
	font-weight: inherit;
}
.crochet-marque {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
}
.crochet-marque:hover { text-decoration: none; }
.crochet-marque__icone {
	width: 50px;
	height: 50px;
	flex: 0 0 auto;
	display: block;
}
.crochet-marque__texte {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.crochet-marque__nom {
	font-family: var(--police-titre);
	font-size: 1.9rem;
	line-height: 0.9;
	color: var(--c-charbon);
}
.crochet-marque__sous {
	font-family: var(--police-corps);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--c-accent);
	margin-top: 0.25em;
}

/* Navigation minimale, alignée à droite dans la barre. */
.main-navigation {
	float: none;
	width: auto;
	margin: 0;
	background: transparent;
}
.main-navigation ul {
	display: flex;
	justify-content: flex-end;
	gap: 1.8em;
	background: transparent;
}
.main-navigation ul li { background: transparent; }
.main-navigation ul li a {
	font-family: var(--police-corps);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--c-charbon);
	text-transform: uppercase;
	padding: 0.3em 0;
}
/* Storefront impose padding:1.618em 0 (~24px haut+bas) sur les liens du menu
   via un sélecteur plus spécifique — ce sont ces liens (~75px) qui fixaient la
   hauteur de toute la barre. On force un rembourrage vertical compact.
   !important : nécessaire pour battre le sélecteur du parent. */
.site-header .main-navigation ul.menu li a {
	padding-top: 1em !important;
	padding-bottom: 1em !important;
}
.main-navigation ul li a:hover {
	color: var(--c-accent);
	text-decoration: none;
}

/* Lien panier compact, à droite de la barre (dans le flux). */
.crochet-cart-link {
	position: static;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	color: var(--c-charbon);
	font-size: 0.95rem;
}
.crochet-cart-link:hover { color: var(--c-accent); text-decoration: none; }
.crochet-cart-icon { font-size: 1.3rem; }
.crochet-cart-count {
	background: var(--c-accent);
	color: #fff;
	border-radius: 999px;
	min-width: 1.5em;
	height: 1.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	padding: 0 0.4em;
}

/* ------------------------------------------------------------ GRILLE / SHOP */

/* Sélecteur large : la grille s'applique aussi à la sortie du shortcode
   [products] (ul.products.columns-N) qui n'a pas toujours l'ancêtre .woocommerce. */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.2em;
	margin: 2em 0;
	list-style: none;
	padding: 0;
}

/* WooCommerce ajoute un clearfix ::before/::after sur ul.products. Dans un
   conteneur grid, ces pseudo-éléments occupent des cellules et décalent la
   grille — on les neutralise. */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

/* Neutralise les classes float/clear de WooCommerce (first/last/columns-N)
   qui décalent la grille sur mobile. */
ul.products li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	text-align: center;
	background: var(--c-blanc);
	border-radius: 14px;
	padding: 0.9em 0.9em 1.4em;
	box-shadow: 0 4px 18px rgba(126, 92, 156, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	position: relative;
}
ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(126, 92, 156, 0.16);
}

/* Image du produit dans la grille. */
ul.products li.product a img {
	border-radius: 10px;
	margin-bottom: 0.9em;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Nom du produit : sobre, lisible (pas en script pour la lisibilité de grille). */
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--police-corps);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--c-charbon);
	padding: 0;
	margin: 0;
}

/* On masque tout prix / bouton résiduel dans la grille (ceinture + bretelles). */
ul.products li.product .price,
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .star-rating {
	display: none !important;
}

/* --------------------------------------------------------------- BADGES */

.crochet-badges {
	position: absolute;
	top: 1.2em;
	left: 1.2em;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4em;
}
.crochet-badges--single {
	position: static;
	flex-direction: row;
	margin-bottom: 0.8em;
}
.crochet-badge {
	font-family: var(--police-corps);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.4em 0.85em;
	border-radius: 999px;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(58, 55, 64, 0.12);
}
.crochet-badge--unique {
	background: var(--c-lavande);
	color: #4a3357;
}
.crochet-badge--vendu {
	background: var(--c-charbon);
	color: var(--c-blanc);
}

/* Produit vendu dans la grille : image légèrement désaturée. */
.crochet-est-vendu a img {
	filter: grayscale(35%) opacity(0.85);
}

/* ------------------------------------------------------------ PAGE PRODUIT */

.woocommerce div.product {
	margin-top: 2em;
}
.woocommerce div.product .product_title {
	font-size: 3.35rem;
	margin: 0.1em 0 0.3em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--c-accent-fonce);
	font-family: var(--police-corps);
	font-weight: 700;
	font-size: 1.8rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.25rem;
	color: var(--c-charbon-doux);
}

/* Galerie : coins arrondis, ombre douce. */
.woocommerce div.product div.images img {
	border-radius: 14px;
	box-shadow: 0 6px 22px rgba(126, 92, 156, 0.12);
}

/* Tableau des specs. */
.crochet-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	background: var(--c-blanc);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 3px 14px rgba(126, 92, 156, 0.08);
	font-size: 0.98rem;
}
.crochet-specs caption {
	caption-side: top;
	text-align: left;
	font-family: var(--police-titre);
	font-size: 1.5rem;
	color: var(--c-charbon);
	margin-bottom: 0.4em;
}
.crochet-specs th,
.crochet-specs td {
	padding: 0.8em 1.1em;
	text-align: left;
	border-bottom: 1px solid var(--c-lavande-clair);
	vertical-align: top;
}
.crochet-specs tr:last-child th,
.crochet-specs tr:last-child td { border-bottom: none; }
.crochet-specs th {
	width: 40%;
	font-weight: 700;
	color: var(--c-charbon);
	background: var(--c-rose-clair);
}
.crochet-specs td { color: var(--c-charbon-doux); }

/* Note PayPal sous le bouton d'achat. */
.crochet-note-paypal {
	margin-top: 0.9em;
	font-size: 0.92rem;
	color: var(--c-charbon-doux);
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.crochet-note-paypal::before {
	content: "🔒";
	font-size: 1rem;
}

/* Message « Vendu » sur la page produit. */
.woocommerce div.product p.stock.out-of-stock {
	background: var(--c-charbon);
	color: var(--c-blanc);
	font-family: var(--police-corps);
	font-weight: 700;
	border-radius: 999px;
	padding: 0.7em 1.4em;
	display: inline-block;
	font-size: 1.05rem;
}

/* ------------------------------------------------------------ PANIER / CHECKOUT */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--c-accent);
}
.woocommerce-message::before { color: var(--c-accent); }

.woocommerce table.shop_table {
	border-radius: 12px;
	overflow: hidden;
}

/* Encadré rassurant sur la méthode de paiement de test. */
.woocommerce .payment_method_bacs {
	border-left: 3px solid var(--c-lavande);
}

/* --------------------------------------------------------------- PAGES */

.page .entry-content,
.page-content {
	font-size: 1.05rem;
}

/* Accueil : on masque le titre de page « Accueil » (redondant, grille parlante). */
body.home .page .entry-header,
body.home .type-page > .entry-header {
	display: none;
}

/* Intro chaleureuse de l'accueil, centrée au-dessus de la grille. */
.crochet-accueil-intro {
	text-align: center;
	max-width: 640px;
	margin: 0.5em auto 2.5em;
	font-size: 1.15rem;
	color: var(--c-charbon-doux);
}

/* En-tête de la boutique (« Nos créations » + description) centré, et grille
   rapprochée. Storefront impose un énorme padding-bas (~6em) sur cet en-tête,
   c'est LUI qui creusait le grand vide avant la grille : on l'annule et on
   fixe une petite marge sous l'en-tête à la place. (La barre de tri Storefront
   est par ailleurs retirée — voir functions.php.) */
.woocommerce-products-header {
	text-align: center;
	/* !important : la feuille WooCommerce de Storefront se charge après la nôtre
	   et impose padding:0 0 ~6em (même spécificité), d'où le vide persistant. */
	padding-bottom: 0 !important;
	margin-bottom: 1.4em;
}
.woocommerce-products-header .page-description {
	max-width: 640px;
	margin: 0.5em auto 0;
	font-size: 1.15rem;
	color: var(--c-charbon-doux);
}
.woocommerce-products-header .page-description p:last-child {
	margin-bottom: 0;
}

.hentry .entry-header .entry-title { margin-bottom: 0.6em; }

/* ---------------------------------------------------------------- FOOTER */

.site-footer {
	background: var(--c-blanc);
	border-top: 1px solid var(--c-lavande-clair);
	color: var(--c-charbon-doux);
	font-size: 0.95rem;
	padding: 2.5em 0;
	text-align: center;
}
.site-footer a { color: var(--c-accent); }
.crochet-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
}
.crochet-footer__nom {
	font-family: var(--police-titre);
	font-size: 1.7rem;
	color: var(--c-charbon);
}
.crochet-footer__liens {
	display: flex;
	gap: 1.5em;
	flex-wrap: wrap;
	justify-content: center;
}
.crochet-footer__resp {
	font-size: 0.85rem;
	color: var(--c-charbon-doux);
}


/* =========================================================================
 * PAGE ÉQUIPE — cartes de membres
 * ========================================================================= */

.equipe-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.8em;
	margin: 2em 0;
	padding: 0;
	list-style: none;
}
.equipe-membre {
	background: var(--c-blanc);
	border: 1px solid var(--c-lavande-clair);
	border-radius: 16px;
	padding: 1.8em 1.4em;
	text-align: center;
	box-shadow: 0 2px 14px rgba(126, 92, 156, 0.06);
}
/* Avatar : cercle pastel avec les initiales (remplaçable par une vraie photo). */
.equipe-avatar {
	width: 96px;
	height: 96px;
	margin: 0 auto 1em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--police-titre);
	font-size: 2.2rem;
	color: var(--c-accent-fonce);
	background: linear-gradient(135deg, var(--c-lavande-clair), var(--c-rose-clair));
	overflow: hidden;
}
.equipe-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.equipe-membre__nom {
	font-family: var(--police-titre);
	font-size: 1.7rem;
	color: var(--c-charbon);
	margin: 0 0 0.15em;
	line-height: 1.1;
}
.equipe-membre__role {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.78rem;
	color: var(--c-accent);
	margin-bottom: 0.8em;
}
.equipe-membre__bio {
	font-size: 0.95rem;
	color: var(--c-charbon-doux);
	margin: 0;
}


/* =========================================================================
 * PAGE NOUS REJOINDRE — liens vers nos pages
 * ========================================================================= */

.rejoindre-liens {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	max-width: 460px;
	margin: 2em auto;
	padding: 0;
	list-style: none;
}
/* a.rejoindre-lien : spécificité (0,2,1) pour battre « .entry-content a »
   (soulignement des liens de contenu imposé par Storefront). */
.rejoindre-liens a.rejoindre-lien {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 1em 1.3em;
	background: var(--c-blanc);
	border: 1px solid var(--c-lavande-clair);
	border-radius: 999px;
	color: var(--c-charbon);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.rejoindre-liens a.rejoindre-lien:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
	text-decoration: none;
	color: var(--c-accent-fonce);
}
.rejoindre-lien__icone {
	font-size: 1.5rem;
	line-height: 1;
	flex: 0 0 auto;
}
.rejoindre-lien__texte { flex: 1 1 auto; }
.rejoindre-lien__note {
	display: block;
	font-weight: 400;
	font-size: 0.82rem;
	color: var(--c-charbon-doux);
}


/* ============================================================ RESPONSIVE */

/* Tablette. */
@media (max-width: 900px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4em;
	}
	h1, .page-title, .product_title { font-size: 3.2rem; }
}

/* Mobile — cible 375px. */
@media (max-width: 600px) {
	body, .site { font-size: 18px; }

	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1em;
	}
	ul.products li.product {
		padding: 0.6em 0.6em 1em;
		border-radius: 12px;
	}
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.95rem;
	}

	.crochet-badges { top: 0.9em; left: 0.9em; }
	.crochet-badge { font-size: 0.62rem; padding: 0.35em 0.6em; }

	/* Barre horizontale conservée : logo à gauche, « Menu » + panier à droite.
	   L'espace est serré à 375px : on réduit le logo à l'icône + « Crochet »
	   (sous-titre masqué) et le panier à son icône (libellé masqué). */
	.site-header { padding: 0.35em 0; }
	.site-header .col-full { gap: 0.4em 0.7em; flex-wrap: nowrap; }
	.crochet-marque__icone { width: 42px; height: 42px; }
	.crochet-marque__nom { font-size: 1.55rem; }
	.crochet-marque__sous { display: none; }
	.crochet-cart-link .crochet-cart-label { display: none; }
	.crochet-cart-icon { font-size: 1.5rem; }

	/* Bouton « Menu » compact, dans la barre. Le menu déroulé lui-même est mis
	   en forme dans le bloc @media (max-width: 767px) plus bas (breakpoint de
	   Storefront pour l'affichage du bouton « Menu »). */
	button.menu-toggle { margin: 0; }

	/* Page produit : image puis infos, pleine largeur. */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100% !important;
		float: none !important;
		margin-bottom: 1.5em;
	}
	.woocommerce div.product .product_title { font-size: 2.5rem; }
	.woocommerce div.product p.price,
	.woocommerce div.product span.price { font-size: 1.8rem; }

	.crochet-specs th { width: 45%; }

	.crochet-footer__liens { flex-direction: column; gap: 0.5em; }
}

/* Menu mobile (< 768px = breakpoint de Storefront pour le bouton « Menu »).
   Au clic sur « Menu », Storefront affiche le menu dans un .handheld-navigation ;
   on le déploie en panneau pleine largeur sous la barre. */
@media (max-width: 767px) {
	/* Le panneau s'ancre sous la barre, sur toute la largeur de l'écran. */
	.site-header .main-navigation .handheld-navigation {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		background: var(--c-blanc);
		border-top: 1px solid var(--c-lavande-clair);
		box-shadow: 0 10px 16px rgba(126, 92, 156, 0.10);
		padding: 0.3em 0 0.6em;
		z-index: 60;
	}
	.site-header .main-navigation .handheld-navigation ul {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 0 1.2em;
	}
	.site-header .main-navigation .handheld-navigation ul li a {
		display: block;
		text-align: center;
		font-size: 1.05rem;
		padding: 0.85em 0;
		border-bottom: 1px solid var(--c-lavande-clair);
	}
	.site-header .main-navigation .handheld-navigation ul li:last-child a { border-bottom: 0; }
}

/* Très petits écrans seulement (< iPhone SE) : une seule colonne. À 375px on
   garde 2 colonnes pour permettre de parcourir le catalogue d'un coup d'œil. */
@media (max-width: 340px) {
	ul.products {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------- BANNIÈRE MARCHÉ */
/* Bandeau « Prochain marché » : carte pastel surmontée d'une guirlande
   de fanions, centrée au-dessus du titre « Nos créations ». */
.crochet-marche {
	position: relative;
	max-width: 760px;
	margin: 0.5rem auto 2.6rem;
	padding: 2.9rem 1.5rem 1.7rem;
	background: linear-gradient(160deg, #ffffff 0%, #fbf4fb 100%);
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(88, 60, 120, 0.14);
	text-align: center;
	overflow: hidden;
}

/* Guirlande de fanions pastel, répétée sur toute la largeur. */
.crochet-marche__guirlande {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='42' viewBox='0 0 120 42'%3E%3Cline x1='0' y1='6' x2='120' y2='6' stroke='%23b9a3c9' stroke-width='2'/%3E%3Cpolygon points='2%2C6 30%2C6 16%2C34' fill='%23d0b0da'/%3E%3Cpolygon points='32%2C6 60%2C6 46%2C34' fill='%23e7c4d6'/%3E%3Cpolygon points='62%2C6 90%2C6 76%2C34' fill='%238fd0c8'/%3E%3Cpolygon points='92%2C6 120%2C6 106%2C34' fill='%23a8c4ef'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: auto 34px;
}

.crochet-marche__sur {
	margin: 0.3rem 0 0.4rem;
	font-family: var(--police-corps);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--c-accent);
}

.crochet-marche__nom {
	margin: 0;
	font-family: var(--police-titre);
	font-size: 3rem;
	line-height: 1.1;
	color: var(--c-charbon);
}

.crochet-marche__meta {
	margin: 0.6rem 0 0;
	font-family: var(--police-corps);
	font-size: 1.3rem;
	color: var(--c-charbon-doux);
}

@media (max-width: 600px) {
	.crochet-marche {
		margin-bottom: 1.9rem;
		padding: 2.5rem 1.1rem 1.4rem;
	}
	.crochet-marche__nom {
		font-size: 2.2rem;
	}
	.crochet-marche__meta {
		font-size: 1.1rem;
	}
}