/*
Theme Name: Cabine Rayée — Blocs
Description: Thème de blocs (Gutenberg) pour la boutique. Le design vient du site La Cabine Rayée ; chaque section est un groupe de blocs natifs, déplaçable et modifiable depuis l'éditeur.
Author: La Cabine Rayée
Version: 1.2.2
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: cabine-rayee-blocs
*/

/* ===========================================================================
   Feuille de style du design. Elle est reprise du site de référence et
   n'est pas retouchée à la main : la source est reference/live-theme/style.css
   et la fabrication se fait avec « node tools/build-theme.js ».
   Les classes utilisées par chaque section sont listées dans
   GUIDE-CLASSES-CSS.md.
   =========================================================================== */

:root {
	--navy: #071a67;
	--navy-deep: #031044;
	--red: #d00032;
	--red-dark: #a80028;
	--cream: #fff8e8;
	--paper: #fffdf8;
	--sand: #f1dfbd;
	--sun: #f5c84b;
	--sky: #dcecff;
	--ink: #11152b;
	--muted: #62677c;
	--line: rgba(7, 26, 103, .16);
	--shadow: 0 18px 45px rgba(3, 16, 68, .14);
	--radius: 26px;
	--radius-lg: 38px;
	--shell: min(1180px, calc(100% - 32px));
	--display: Georgia, "Times New Roman", serif;
	--body: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	overflow-x: clip;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }
.shell { width: var(--shell); margin-inline: auto; }

/* En-tête éditable dans Apparence > Éditeur > Compositions. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 253, 248, .94);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--line);
}
.site-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--red) 0 24%, var(--cream) 24% 27%, var(--navy) 27% 100%);
}
.site-header__inner {
	min-height: 84px;
	display: flex;
	align-items: center;
	gap: 30px;
}
.brand-block {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: max-content;
}
.brand-block .wp-block-image { flex: 0 0 auto; margin: 0; }
.brand-block .wp-block-image img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 12px;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1.4);
}
.brand-block:hover .wp-block-image img { transform: rotate(-8deg) translateY(-2px); }
.brand-copy { gap: 0 !important; }
.brand-title {
	margin: 0 !important;
	color: var(--red);
	font-family: var(--display);
	font-size: 22px !important;
	font-weight: 900;
	line-height: 1 !important;
	text-shadow: 1.5px 1.5px 0 var(--navy);
}
.brand-tagline {
	margin: 5px 0 0 !important;
	color: var(--navy);
	font-size: 10px !important;
	font-weight: 800;
	letter-spacing: .11em;
	line-height: 1.2;
	text-transform: uppercase;
}
.site-header .wp-block-navigation { margin-left: auto; }
.site-header .wp-block-navigation__container { gap: 8px; }
.site-header .wp-block-navigation-item__content {
	display: block;
	padding: 11px 13px;
	color: var(--navy);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	transition: background .2s, transform .2s;
}
.site-header .wp-block-navigation-item__content:hover {
	background: var(--sky);
	transform: translateY(-2px);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
	background: var(--paper);
}
.site-header .wp-block-woocommerce-mini-cart { flex: 0 0 auto; }
.site-header .wc-block-mini-cart__button {
	position: relative;
	width: 48px;
	height: 48px;
	display: grid;
	padding: 0;
	place-items: center;
	background: var(--cream);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 16px;
	box-shadow: 0 4px 0 var(--navy);
	transition: transform .16s, box-shadow .16s;
}
.site-header .wc-block-mini-cart__button:hover {
	transform: translateY(-3px);
	box-shadow: 0 7px 0 var(--navy);
}
.site-header .wc-block-mini-cart__badge {
	z-index: 3;
	background: var(--red);
	color: #fff;
	border: 2px solid var(--paper);
}

/* Accueil : chaque texte, bouton et image reste un bloc natif. */
.hero {
	position: relative;
	min-height: 665px;
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
	align-items: center;
	gap: clamp(44px, 7vw, 92px);
	padding-block: clamp(70px, 9vw, 120px) 78px;
}
.hero::before {
	content: "";
	position: absolute;
	top: 60px;
	left: -120px;
	width: 180px;
	height: 180px;
	opacity: .2;
	background: repeating-linear-gradient(0deg, var(--navy) 0 8px, transparent 8px 18px);
	border-radius: 50%;
	transform: rotate(-12deg);
}
.hero__copy { position: relative; z-index: 2; min-width: 0; }
.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px !important;
	color: var(--navy);
	font-size: 12px !important;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.eyebrow::before {
	content: "";
	width: 26px;
	height: 6px;
	flex: 0 0 auto;
	background: var(--red);
	border-radius: 999px;
	box-shadow: 0 8px 0 var(--navy);
}
.hero h1,
.section-heading h2,
.story h2 {
	margin: 0;
	color: var(--navy);
	font-family: var(--display);
	font-weight: 900;
	letter-spacing: -.045em;
	line-height: .98;
}
.hero h1 { max-width: 680px; font-size: clamp(54px, 7vw, 86px); }
.hero h1 mark {
	padding: 0;
	background: linear-gradient(transparent 78%, var(--sun) 78%);
	color: var(--red);
}
.hero__lede {
	max-width: 620px;
	margin: 26px 0 0 !important;
	color: var(--muted);
	font-size: clamp(17px, 2vw, 20px) !important;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 34px;
}
.hero__actions .wp-block-button { margin: 0; }
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 13px 22px;
	background: var(--red);
	color: #fff;
	border: 2px solid var(--navy);
	border-radius: 16px;
	box-shadow: 0 7px 0 var(--navy-deep);
	font-weight: 900;
	line-height: 1.2;
	transition: transform .16s cubic-bezier(.2, .8, .2, 1.4), box-shadow .16s, background .2s;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--red-dark);
	transform: translateY(-3px);
	box-shadow: 0 10px 0 var(--navy-deep);
}
.is-style-outline > .wp-block-button__link {
	background: var(--cream);
	color: var(--navy);
	border: 2px solid var(--navy);
	box-shadow: 0 7px 0 var(--sand);
}
.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 38px 0 0 !important;
	padding: 0;
	color: var(--navy);
	font-size: 13px;
	font-weight: 800;
	list-style: none;
}
.hero__proof li::before {
	content: "✓";
	width: 22px;
	height: 22px;
	display: inline-grid;
	margin-right: 7px;
	place-items: center;
	background: var(--sky);
	border: 2px solid currentColor;
	border-radius: 7px;
}
.hero__visual {
	position: relative;
	min-height: 480px;
	display: grid;
	place-items: center;
}
.hero__sun {
	position: absolute;
	top: 3%;
	right: 3%;
	width: min(360px, 80%);
	aspect-ratio: 1;
	background: var(--sun);
	border-radius: 45% 55% 51% 49% / 55% 44% 56% 45%;
	animation: sun-wobble 8s ease-in-out infinite alternate;
}
.hero__sun::after {
	content: "";
	position: absolute;
	inset: 20px;
	border: 3px dashed rgba(7, 26, 103, .35);
	border-radius: inherit;
}
.hero__card {
	position: relative;
	z-index: 2;
	width: min(360px, 82%);
	aspect-ratio: .83;
	display: grid;
	padding: 26px;
	place-items: end center;
	overflow: hidden;
	background: var(--cream);
	border: 4px solid var(--navy);
	border-radius: 42px;
	box-shadow: 16px 18px 0 var(--red), var(--shadow);
	transform: rotate(3deg);
}
.hero__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 34%;
	opacity: .12;
	background: repeating-linear-gradient(0deg, var(--navy) 0 9px, transparent 9px 24px);
}
.hero__card .wp-block-image { z-index: 1; margin: 0; }
.hero__card img {
	width: 100%;
	max-height: 350px;
	object-fit: contain;
	filter: drop-shadow(0 20px 18px rgba(3, 16, 68, .18));
}
.hero__badge {
	position: absolute;
	z-index: 3;
	top: 22px;
	left: -20px;
	margin: 0 !important;
	padding: 10px 20px 10px 28px;
	background: var(--red);
	color: #fff;
	border: 3px solid var(--navy);
	border-radius: 0 999px 999px 0;
	font-size: 12px !important;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: rotate(-6deg);
}
@keyframes sun-wobble {
	to { transform: rotate(9deg) scale(1.04); border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; }
}

.ticker {
	overflow: hidden;
	background: var(--red);
	color: #fff;
	border-block: 4px solid var(--navy);
	transform: rotate(-1deg) scale(1.01);
}
.ticker p {
	width: max-content;
	margin: 0;
	padding-block: 10px;
	font-family: var(--display);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: .08em;
	white-space: nowrap;
	animation: ticker 24s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }

.section { padding-block: clamp(80px, 10vw, 128px); }
.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 38px;
}
.section-heading h2 { font-size: clamp(42px, 6vw, 68px); }
.section-heading .wp-block-button__link {
	min-height: 44px;
	padding: 6px 0;
	background: transparent;
	color: var(--navy);
	border: 0;
	border-bottom: 3px solid var(--red);
	border-radius: 0;
	box-shadow: none;
}

.category-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.category-card {
	position: relative;
	min-height: 330px;
	display: flex;
	flex-direction: column;
	padding: 22px;
	overflow: hidden;
	background: var(--cream);
	border: 3px solid var(--navy);
	border-radius: var(--radius);
	box-shadow: 8px 10px 0 var(--navy);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1.3), box-shadow .25s;
}
.category-card:nth-child(2) { background: var(--sky); }
.category-card:nth-child(3) { background: #ffdbe3; }
.category-card:nth-child(4) { background: #ffefad; }
.category-card:nth-child(5) { background: #dcefff; }
.category-card:nth-child(6) { background: var(--sand); }
.category-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 12px 16px 0 var(--navy); }
.category-number {
	position: relative;
	z-index: 3;
	width: fit-content;
	margin: 0 !important;
	padding: 3px 9px;
	background: var(--paper);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 999px;
	font-size: 11px !important;
	font-weight: 900;
}
.category-card .wp-block-image {
	position: absolute;
	inset: 18px 18px 62px;
	margin: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, .5);
	border-radius: 17px;
}
.category-card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	mix-blend-mode: multiply;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.category-card:hover .wp-block-image img { transform: scale(1.05) rotate(1deg); }
.category-title {
	position: relative;
	z-index: 3;
	width: fit-content;
	margin: auto 0 0 !important;
	padding: 4px 9px;
	background: var(--paper);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 10px;
	font-family: var(--display);
	font-size: 25px !important;
	line-height: 1 !important;
}
.category-title a::after {
	content: "↗";
	position: absolute;
	right: -54px;
	bottom: -2px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--red);
	color: #fff;
	border: 2px solid var(--navy);
	border-radius: 14px;
	font-family: var(--body);
	font-size: 22px;
}

.section--products {
	position: relative;
	background: var(--cream);
	border-block: 1px solid var(--line);
}
.section--products::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .06;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, var(--navy) 0 4px, transparent 4px 18px);
}
.section--products > * { position: relative; }
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 14px 14px 20px;
	float: none !important;
	background: var(--paper);
	border: 2px solid var(--navy);
	border-radius: 22px;
	box-shadow: 7px 8px 0 var(--sand);
	transition: transform .25s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-7px); }
.woocommerce ul.products li.product a img {
	aspect-ratio: .82;
	object-fit: cover;
	border-radius: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--navy);
	font-family: var(--display);
	font-size: 22px;
}
.woocommerce ul.products li.product .price {
	color: var(--red);
	font-size: 18px;
	font-weight: 900;
}

.story {
	position: relative;
	min-height: 520px;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 280px;
	margin-block: clamp(90px, 12vw, 150px);
	overflow: hidden;
	background: var(--navy);
	color: #fff;
	border: 5px solid var(--navy-deep);
	border-radius: var(--radius-lg);
	box-shadow: 14px 16px 0 var(--red);
}
.story::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .15;
	background:
		radial-gradient(circle at 15% 20%, var(--sky) 0 2px, transparent 3px),
		radial-gradient(circle at 80% 70%, var(--sky) 0 2px, transparent 3px);
	background-size: 42px 42px, 64px 64px;
}
.story__panel {
	position: relative;
	z-index: 2;
	align-self: center;
	padding: clamp(42px, 7vw, 78px);
}
.story .eyebrow { color: var(--cream); }
.story h2 { max-width: 720px; color: #fff; font-size: clamp(42px, 6vw, 68px); }
.story__text { max-width: 660px; color: #e7ebff; font-size: 18px !important; }
.story__stamp {
	position: relative;
	z-index: 3;
	width: 190px;
	height: 190px;
	display: grid;
	align-self: center;
	justify-self: center;
	padding: 20px;
	place-items: center;
	text-align: center;
	background: var(--sun);
	color: var(--navy);
	border: 4px solid var(--cream);
	outline: 4px dashed var(--sun);
	outline-offset: 7px;
	border-radius: 50%;
	transform: rotate(8deg);
}
.story__stamp p { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.story__stamp h3 { margin: 0; font-family: var(--display); font-size: 48px; line-height: .8; }

.benefits {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	padding-bottom: 100px;
}
.benefit {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	align-items: start;
	padding: 24px;
	border-top: 3px solid var(--navy);
}
.benefit-icon {
	width: 52px;
	height: 52px;
	display: grid;
	margin: 0 !important;
	place-items: center;
	background: var(--sky);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 18px;
	font-size: 22px;
	transform: rotate(-4deg);
}
.benefit h3 { margin: 0; color: var(--navy); font-size: 18px; }
.benefit-text { margin: 4px 0 0 !important; color: var(--muted); font-size: 14px !important; }

/* Pages, boutique et fiches produits. */
.content-shell { width: var(--shell); margin-inline: auto; padding-block: 80px 120px; }
.content-shell > .wp-block-post-title,
.woocommerce-products-header__title {
	color: var(--navy);
	font-family: var(--display);
	font-size: clamp(44px, 6vw, 72px);
	line-height: .98;
}
.woocommerce .quantity .qty,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
	min-height: 48px;
	padding: 8px 12px;
	background: #fff;
	border: 2px solid var(--navy);
	border-radius: 12px;
}

/* Pied de page éditable. */
.site-footer {
	position: relative;
	padding-block: 70px 36px;
	background: var(--navy-deep);
	color: #e7ebff;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 14px;
	background: repeating-linear-gradient(90deg, var(--red) 0 70px, var(--cream) 70px 100px, var(--navy) 100px 170px);
}
.site-footer__grid {
	display: grid !important;
	grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr) auto;
	gap: 40px;
	align-items: start;
}
.site-footer h2,
.site-footer h3 { margin-top: 0; color: var(--cream); font-family: var(--display); }
.site-footer .wp-block-navigation { color: #fff; }
.site-footer .wp-block-navigation__container { align-items: flex-start; }
.site-footer .wp-block-navigation-item__content { min-height: 44px; font-weight: 800; }
.footer-meta {
	margin-top: 30px !important;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 13px !important;
}

@media (max-width: 980px) {
	.site-header__inner { min-height: 76px; gap: 14px; }
	.hero { grid-template-columns: 1fr; min-height: auto; }
	.hero__copy { text-align: center; }
	.hero__copy .eyebrow, .hero__actions, .hero__proof { justify-content: center; }
	.hero h1, .hero__lede { margin-inline: auto !important; }
	.hero__visual { min-height: 440px; }
	.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.story { grid-template-columns: 1fr; }
	.story__stamp { position: absolute; right: 28px; bottom: 28px; width: 150px; height: 150px; opacity: .92; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	:root { --shell: min(100% - 22px, 1180px); }
	.site-header__inner { min-height: 70px; gap: 7px; }
	.brand-block { gap: 6px; }
	.brand-block .wp-block-image img { width: 37px; height: 37px; }
	.brand-title { font-size: 17px !important; }
	.brand-tagline { display: none; }
	.site-header .wp-block-navigation { order: 3; margin-left: auto; }
	.site-header .wp-block-navigation__responsive-container-open { display: flex; }
	.site-header .wc-block-mini-cart__button { width: 44px; height: 44px; border-radius: 14px; }
	.hero { gap: 24px; padding-block: 58px 62px; }
	.hero h1 { width: 100%; font-size: clamp(42px, 13vw, 58px); overflow-wrap: anywhere; }
	.hero__lede { font-size: 17px !important; }
	.hero__actions { flex-direction: column; }
	.hero__actions .wp-block-button,
	.hero__actions .wp-block-button__link { width: 100%; }
	.hero__visual { min-height: 380px; }
	.hero__sun { width: 290px; }
	.hero__card { width: min(300px, 78%); border-radius: 32px; box-shadow: 10px 12px 0 var(--red), var(--shadow); }
	.ticker p { font-size: 16px; }
	.section-heading { align-items: flex-start; flex-direction: column; }
	.section-heading h2, .story h2 { font-size: 44px; }
	.category-grid { grid-template-columns: 1fr; }
	.category-card { min-height: 290px; }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.woocommerce ul.products li.product { padding: 6px 6px 10px; border-width: 1.5px; border-radius: 12px; box-shadow: 3px 4px 0 var(--sand); }
	.woocommerce ul.products li.product a img { border-radius: 8px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 7px 0 2px; font-size: 14px; line-height: 1.1; }
	.woocommerce ul.products li.product .price { font-size: 13px; }
	.woocommerce ul.products li.product .button { width: 100%; min-height: 42px; margin-top: 5px; padding: 6px 3px; border-width: 1.5px; border-radius: 8px; box-shadow: 0 2px 0 var(--navy); font-size: 11px; }
	.story { min-height: 590px; margin-inline: 10px; }
	.story__panel { padding: 38px 26px 190px; }
	.story__stamp { right: 50%; bottom: 42px; transform: translateX(50%) rotate(7deg); }
	.benefits { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


/* LCR — interactions SaaS : retour immédiat, accessible et automatique pour WooCommerce. */
:where(
	.wp-block-button__link,
	.wp-element-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-components-button,
	.wc-block-mini-cart__button,
	.wc-block-cart-item__quantity button,
	.wc-block-components-drawer__close
) {
	position: relative;
	transform-origin: center;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition:
		transform 140ms cubic-bezier(.2, .8, .2, 1),
		box-shadow 140ms ease,
		filter 140ms ease,
		background-color 160ms ease,
		color 160ms ease;
}

:where(
	.wp-block-button__link,
	.wp-element-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-components-button
):hover:not(:disabled):not([aria-disabled="true"]) {
	filter: brightness(.96) saturate(1.06);
}

:where(
	.wp-block-button__link,
	.wp-element-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-components-button
):active:not(:disabled):not([aria-disabled="true"]) {
	transform: translateY(4px) scale(.985);
	box-shadow: 0 2px 0 var(--navy-deep);
	filter: brightness(.92) saturate(1.08);
	transition-duration: 55ms;
}

:where(
	.wp-block-button__link,
	.wp-element-button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wc-block-components-button,
	.wc-block-mini-cart__button,
	.wc-block-cart-item__quantity button,
	.wc-block-components-drawer__close
):focus-visible {
	outline: 3px solid var(--sun);
	outline-offset: 4px;
}

:where(
	button,
	input[type="button"],
	input[type="submit"],
	[role="button"]
):disabled,
:where(.woocommerce a.button,.wp-element-button,.wc-block-components-button)[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .58;
	filter: grayscale(.18);
	transform: none !important;
	box-shadow: none !important;
}

.woocommerce :where(.button.loading,.button.adding),
.wc-block-components-button[aria-busy="true"] {
	cursor: progress;
	transform: translateY(2px) scale(.99);
	box-shadow: 0 3px 0 var(--navy-deep);
	filter: saturate(.75);
}

.woocommerce .button.added {
	animation: lcr-button-confirm 360ms cubic-bezier(.2,.8,.2,1.35);
}

.site-header .wc-block-mini-cart__button:active {
	transform: translateY(3px) scale(.94);
	box-shadow: 0 1px 0 var(--navy);
	transition-duration: 55ms;
}

.wc-block-cart-item__quantity button:active,
.wc-block-components-drawer__close:active {
	transform: scale(.86);
	transition-duration: 55ms;
}

@keyframes lcr-button-confirm {
	0% { transform: translateY(3px) scale(.96); }
	55% { transform: translateY(-2px) scale(1.045); }
	100% { transform: translateY(0) scale(1); }
}

@media (hover: none) {
	:where(
		.wp-block-button__link,
		.wp-element-button,
		.woocommerce a.button,
		.woocommerce button.button,
		.woocommerce input.button,
		.wc-block-components-button
	):hover { filter: none; }
}

/* ---------------------------------------------------------------------------
   Ajouts du paquet « Cabine Rayée — Blocs ».

   Ce fichier n'est pas un fichier généré : c'est ici qu'on ajoute du style.
   `node tools/build-theme.js` le recopie tel quel à la fin de `theme/style.css`.

   Cinq parties :

   1. En-tête : menu mobile et tiroir du mini-panier. Le design d'origine est
      repris sauf sur un point — le flou du fond, qui cassait l'ouverture du
      menu et du panier sur téléphone (voir l'explication plus bas).
   2. Boutique : catalogue, cartes produit, fiche produit.
   3. Panier et commande.
   4. Gabarits secondaires (page, article, 404) — repris du paquet 1.1.0.
   5. Petits écrans.

   Les classes du design d'origine (hero, ticker, category-card, story,
   benefits, site-header, site-footer…) ne sont pas retouchées ici : elles
   viennent de `reference/live-theme/style.css`.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. EN-TÊTE — MENU MOBILE ET TIROIR DU MINI-PANIER
   =========================================================================== */

/*
   POURQUOI LE FLOU A ÉTÉ RETIRÉ DE L'EN-TÊTE
   ------------------------------------------
   `backdrop-filter` a un effet de bord peu connu : il fait de l'élément le
   « bloc conteneur » de tous ses descendants en `position: fixed`. Autrement
   dit, un enfant en position fixe n'est plus positionné par rapport à la
   fenêtre, mais par rapport à l'en-tête.

   Or deux éléments de l'en-tête sont justement en position fixe :

     - le volet du menu mobile (`wp-block-navigation__responsive-container`) ;
     - le tiroir du mini-panier (`wc-block-components-drawer`) et son voile.

   Résultat sur téléphone : ils s'ouvraient, mais enfermés dans la hauteur de
   l'en-tête (70 px). On ne voyait qu'un bandeau blanc en haut de l'écran — le
   tiroir du panier a un fond blanc — et aucun lien n'était atteignable.

   Le fond de l'en-tête était déjà opaque à 94 % : le flou ne servait
   quasiment à rien. On le retire, on rend le fond presque opaque pour garder
   la même tenue visuelle, et les deux panneaux reprennent toute la fenêtre.
*/
.site-header {
	background: rgba(255, 253, 248, .985);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Le volet du menu mobile couvre l'écran, sous la barre d'administration. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Un dégradé opaque recouvre le fond blanc posé par le cœur de WordPress
	   sans entrer en concurrence de spécificité avec sa règle. */
	background-image: linear-gradient(var(--cream), var(--cream));
	color: var(--navy);
	z-index: 100000;
}

/* La rayure du haut rappelle celle de l'en-tête. */
.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 12px;
	background: repeating-linear-gradient(90deg, var(--red) 0 64px, var(--cream) 64px 92px, var(--navy) 92px 156px);
}

.site-header .wp-block-navigation__responsive-close,
.site-header .wp-block-navigation__responsive-dialog {
	width: 100%;
	max-width: none;
	margin: 0;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	/* Le haut laisse la place au bouton « fermer », posé dans le coin. */
	padding: clamp(84px, 22vw, 112px) clamp(18px, 6vw, 30px) clamp(36px, 10vw, 54px);
	gap: 12px;
}

/* Les liens deviennent des pastilles pleine largeur, comme les boutons du site. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 12px;
	align-items: stretch;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	min-height: 58px;
	display: flex;
	align-items: center;
	padding: 14px 20px;
	color: var(--navy);
	background: var(--paper);
	border: 2px solid var(--navy);
	border-radius: 18px;
	box-shadow: 0 5px 0 var(--sand);
	font-family: var(--display);
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	background: var(--sky);
	transform: none;
}

/* Bouton « fermer » : rouge, en haut à droite du volet. */
.site-header .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: clamp(20px, 4.5vw, 28px);
	right: clamp(16px, 4.5vw, 26px);
	width: 46px;
	height: 46px;
	display: grid;
	padding: 0;
	place-items: center;
	color: #fff;
	background: var(--red);
	border: 2px solid var(--navy);
	border-radius: 14px;
	box-shadow: 0 4px 0 var(--navy-deep);
	z-index: 3;
}

.site-header .wp-block-navigation__responsive-container-close:hover {
	background: var(--red-dark);
}

.site-header .wp-block-navigation__responsive-container-close:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--navy-deep);
}

/* Bouton « ouvrir » (les trois traits) : même famille que le bouton panier. */
.site-header .wp-block-navigation__responsive-container-open {
	width: 46px;
	height: 46px;
	display: grid;
	padding: 0;
	place-items: center;
	color: var(--navy);
	background: var(--cream);
	border: 2px solid var(--navy);
	border-radius: 14px;
	box-shadow: 0 4px 0 var(--navy);
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--sky);
}

.site-header .wp-block-navigation__responsive-container-open:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--navy);
}

/*
   Au-dessus de 600 px, le menu s'affiche en clair : le bouton n'a rien à faire
   là. Sans cette règle, le bouton réapparaît entre 600 et 700 px, en même
   temps que les liens (c'est le point de rupture du design d'origine).
*/
@media (min-width: 600px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Le tiroir du mini-panier : mêmes couleurs que le site, et fond clair. */
.wc-block-components-drawer {
	background: var(--paper);
}

/* ===========================================================================
   2. BOUTIQUE — CATALOGUE, CARTES PRODUIT, FICHE PRODUIT
   =========================================================================== */

/* --- Conteneurs de page ---------------------------------------------------- */

.boutique-page {
	padding-block: clamp(40px, 6vw, 76px) clamp(56px, 9vw, 110px);
}

.fiche-produit {
	padding-block: clamp(26px, 4.5vw, 50px) clamp(56px, 9vw, 104px);
}

/* Les messages de WooCommerce prennent les couleurs du site. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-noreviews,
.woocommerce p.no-comments {
	padding: 16px 20px;
	background: var(--cream);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 16px;
	box-shadow: 0 5px 0 var(--sand);
	font-weight: 800;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	color: var(--red);
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	margin-left: auto;
}

/* --- Catalogue ------------------------------------------------------------- */

.boutique-page .woocommerce-products-header {
	margin-bottom: clamp(20px, 3.5vw, 34px);
}

.boutique-page .woocommerce-products-header__title {
	margin: 0 0 .3em;
}

.boutique-page .woocommerce-products-header .term-description,
.boutique-page .woocommerce-products-header p {
	color: var(--muted);
}

.boutique-page .woocommerce-result-count,
.boutique-page .woocommerce-ordering {
	color: var(--muted);
	font-size: 14px;
	font-weight: 800;
}

.boutique-page .woocommerce-ordering select {
	font-weight: 800;
}

/* Les cartes produit : le même habillage que la sélection de l'accueil. */
.woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: 12px;
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: 10px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}

/* La vignette « Promo ! » : jaune soleil, jamais le violet par défaut. */
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 12px;
	background: var(--sun);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 999px;
	box-shadow: 0 3px 0 var(--navy-deep);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: .02em;
}

/*
   Dans la grille du catalogue, WooCommerce place la vignette en haut à droite
   avec une marge négative (elle dépasse de la carte) et son sélecteur est plus
   précis que le précédent : on la remet à l'intérieur, dans le coin.
*/
.woocommerce ul.products li.product .onsale {
	top: 12px;
	right: 12px;
	left: auto;
	margin: 0;
}

/*
   Boutons « alt » de WooCommerce : c'est le bouton d'ajout au panier de la
   fiche produit.

   Dans WooCommerce 11, la règle qui les colorait en violet est écrite
   `.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) …`.
   Les `:where()` n'ajoutent aucune spécificité, et comme `theme.json` déclare
   des styles de bouton, la classe est présente sur le `<body>` : la règle
   violette ne s'applique donc pas. Ces boutons sont déjà rouges, par la règle
   du design (`.woocommerce a.button`, plus haut dans `style.css`).

   Ce bloc est donc un filet, pas un correctif : si une version de WooCommerce
   revient à un sélecteur nu `.woocommerce button.button.alt` (spécificité égale
   à celle du design, mais placée après dans la cascade), le violet reprendrait
   la main. Ici, les couleurs du site gagnent dans tous les cas.
*/
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	min-height: 52px;
	padding: 13px 24px;
	background: var(--red);
	color: #fff;
	border: 2px solid var(--navy);
	border-radius: 16px;
	box-shadow: 0 7px 0 var(--navy-deep);
	font-weight: 900;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--red-dark);
	color: #fff;
}

.woocommerce ul.products li.product .star-rating {
	margin: 6px 0;
	color: var(--sun);
}

/* Pagination du catalogue. */
.woocommerce-pagination {
	margin-top: clamp(28px, 5vw, 46px);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination ul.page-numbers a.page-numbers,
.woocommerce-pagination ul.page-numbers span.page-numbers {
	display: grid;
	min-width: 48px;
	min-height: 48px;
	padding: 6px 14px;
	place-items: center;
	background: var(--paper);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 14px;
	font-weight: 900;
	transition: transform .16s, box-shadow .16s, background .2s;
}

.woocommerce-pagination ul.page-numbers a.page-numbers:hover {
	background: var(--sky);
	transform: translateY(-2px);
}

.woocommerce-pagination ul.page-numbers span.page-numbers.current {
	background: var(--navy);
	color: #fff;
}

/* --- Fiche produit --------------------------------------------------------- */

.fiche-produit .woocommerce-breadcrumb {
	margin: 0 0 clamp(18px, 3vw, 30px);
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.fiche-produit .woocommerce-breadcrumb a {
	color: var(--navy);
	text-decoration: underline;
}

/*
   Deux colonnes (galerie / informations) sans les flottants de WooCommerce :
   la grille suit la même logique que le bandeau d'ouverture de l'accueil.
*/
.fiche-produit div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(26px, 4.5vw, 58px);
	align-items: start;
}

.fiche-produit div.product div.images,
.fiche-produit div.product .woocommerce-product-gallery {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.fiche-produit div.product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.fiche-produit div.product .woocommerce-product-gallery__wrapper {
	overflow: hidden;
	background: var(--cream);
	border: 2px solid var(--navy);
	border-radius: var(--radius);
	box-shadow: 9px 10px 0 var(--sand);
}

.fiche-produit div.product .woocommerce-product-gallery__image img {
	border-radius: 0;
}

.fiche-produit div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
}

.fiche-produit div.product .flex-control-thumbs li {
	width: auto;
	margin: 0;
}

.fiche-produit div.product .flex-control-thumbs img {
	opacity: .62;
	border: 2px solid var(--navy);
	border-radius: 12px;
	transition: opacity .2s, transform .2s;
}

.fiche-produit div.product .flex-control-thumbs img:hover,
.fiche-produit div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	transform: translateY(-2px);
}

.fiche-produit div.product .product_title {
	margin: 0 0 .3em;
	font-size: clamp(34px, 5vw, 54px);
}

.fiche-produit div.product p.price,
.fiche-produit div.product span.price {
	margin: 0 0 .55em;
	color: var(--red);
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 900;
}

.fiche-produit div.product p.price del {
	color: var(--muted);
	font-size: .68em;
	font-weight: 800;
}

.fiche-produit div.product p.price ins {
	text-decoration: none;
}

.fiche-produit div.product .woocommerce-product-details__short-description {
	color: var(--muted);
	font-size: 17px;
}

.fiche-produit div.product .woocommerce-product-details__short-description p {
	margin: 0 0 1em;
}

/* Choix des variantes (taille, couleur…). */
.fiche-produit div.product .variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
}

.fiche-produit div.product .variations th,
.fiche-produit div.product .variations td {
	padding: 6px 0;
	background: none;
	border: 0;
	text-align: left;
}

.fiche-produit div.product .variations label {
	color: var(--navy);
	font-weight: 900;
}

.fiche-produit div.product .reset_variations {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
}

/* Bouton « Ajouter au panier ». */
.fiche-produit div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 0 0 22px;
}

.fiche-produit div.product form.cart .quantity {
	float: none;
	margin: 0;
}

.fiche-produit div.product form.cart .quantity .qty {
	width: 96px;
	text-align: center;
	font-weight: 900;
}

.fiche-produit div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 54px;
}

.fiche-produit div.product .stock {
	margin: 0 0 .6em;
	font-weight: 800;
}

.fiche-produit div.product .stock.in-stock {
	color: #1a7f4b;
}

.fiche-produit div.product .stock.out-of-stock {
	color: var(--red);
}

.fiche-produit div.product .product_meta {
	margin-top: 18px;
	padding-top: 16px;
	color: var(--muted);
	border-top: 1px solid var(--line);
	font-size: 13px;
	font-weight: 800;
}

.fiche-produit div.product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.fiche-produit div.product .product_meta a {
	color: var(--navy);
}

/* Onglets Description / Avis. */
.fiche-produit div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	clear: both;
	margin-top: clamp(30px, 5vw, 56px);
}

.fiche-produit div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.fiche-produit div.product .woocommerce-tabs ul.tabs::before,
.fiche-produit div.product .woocommerce-tabs ul.tabs li::before,
.fiche-produit div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.fiche-produit div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.fiche-produit div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 20px;
	background: var(--cream);
	color: var(--navy);
	border: 2px solid var(--navy);
	border-radius: 999px;
	font-weight: 900;
}

.fiche-produit div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--navy);
	color: #fff;
}

.fiche-produit div.product .woocommerce-Tabs-panel {
	padding: clamp(20px, 3vw, 32px);
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.fiche-produit div.product .woocommerce-Tabs-panel h2 {
	margin-top: 0;
	font-size: clamp(24px, 3vw, 32px);
}

/* Produits similaires et ventes complémentaires. */
.fiche-produit div.product .related.products,
.fiche-produit div.product .upsells.products {
	grid-column: 1 / -1;
	margin-top: clamp(34px, 6vw, 66px);
}

.fiche-produit div.product .related.products > h2,
.fiche-produit div.product .upsells.products > h2 {
	margin-bottom: .6em;
	font-size: clamp(28px, 4vw, 42px);
}

/* Avis clients. */
.fiche-produit div.product .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fiche-produit div.product .commentlist li {
	margin-bottom: 18px;
	padding: clamp(16px, 2.4vw, 22px);
	background: var(--cream);
	border: 2px solid var(--line);
	border-radius: 18px;
}

/* ===========================================================================
   3. PANIER ET COMMANDE
   =========================================================================== */

.page-panier,
.page-commander {
	padding-block: clamp(34px, 5vw, 64px) clamp(56px, 9vw, 104px);
}

.page-panier__titre,
.page-commander__titre {
	margin: 0 0 clamp(20px, 3vw, 34px);
}

/* WooCommerce limite le titre du panier à 1 000 px : on garde la même largeur
   que le reste du site (le sélecteur reprend celui de l'extension pour passer
   devant, puisqu'à spécificité égale c'est le thème qui gagne). */
.woocommerce-cart .page-panier__titre,
.woocommerce-checkout .page-commander__titre {
	max-width: none;
}

/* Bande de réassurance sous le panier : mêmes cartes que l'accueil, sans la
   grande respiration qui sépare les sections de la page d'accueil. */
.page-panier .panier-aide {
	margin-top: clamp(30px, 5vw, 54px);
	padding-bottom: 0;
}

/* Le panier et le récapitulatif se présentent comme des cartes du site. */
.page-panier .wc-block-cart-items {
	padding: clamp(14px, 2.4vw, 22px);
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.page-panier .wc-block-cart-items__row {
	border-top: 1px solid var(--line);
}

.page-panier .wc-block-cart-items__row:first-child {
	border-top: 0;
}

.page-panier .wc-block-cart-item__image img {
	border: 2px solid var(--navy);
	border-radius: 14px;
}

.page-panier .wc-block-components-product-name,
.page-commander .wc-block-components-product-name {
	color: var(--navy);
	font-weight: 900;
}

.page-panier .wc-block-components-totals-item,
.page-commander .wc-block-components-totals-item {
	font-weight: 800;
}

.page-panier .wc-block-components-totals-item__value {
	color: var(--red);
	font-weight: 900;
}

.page-panier .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 22px;
}

/* Boutons d'action du panier et de la commande. */
:where(.page-panier, .page-commander) .wc-block-components-button:not(.is-link) {
	background-color: var(--red);
	color: #fff;
	border: 2px solid var(--navy);
	border-radius: 16px;
	box-shadow: 0 7px 0 var(--navy-deep);
	font-weight: 900;
}

:where(.page-panier, .page-commander) .wc-block-components-button:not(.is-link):hover:not(:disabled) {
	background-color: var(--red-dark);
	transform: translateY(-3px);
	box-shadow: 0 10px 0 var(--navy-deep);
}

:where(.page-panier, .page-commander) .wc-block-components-button:not(.is-link):active:not(:disabled) {
	transform: translateY(4px);
	box-shadow: 0 2px 0 var(--navy-deep);
}

:where(.page-panier, .page-commander) .wc-block-cart__submit-button,
:where(.page-panier, .page-commander) .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 54px;
}

/* Le panier vide et le message d'attente restent lisibles. */
.page-panier .wp-block-woocommerce-empty-cart-block,
.page-panier .wc-block-cart__empty-cart__title {
	color: var(--navy);
}

/*
   Panier « classique » : sans effet tant que la page Panier contient le bloc
   Panier — le cas par défaut, et ce que fait WooCommerce 11. Ces règles ne
   servent que si la page Panier est remplacée par le raccourci
   `[woocommerce_cart]`, ce qui reste possible depuis Pages → Panier.

   À savoir pour la suite : le corps de la page panier ne porte PAS la classe
   `woocommerce` (WooCommerce ne l'ajoute que sur la boutique et les fiches
   produit — voir `wc_body_class()`). Toute règle visant le panier doit donc
   être préfixée `.page-panier` (ou `.woocommerce-cart`), jamais `.woocommerce`.
*/
.page-panier .woocommerce-cart-form,
.page-panier .cart_totals {
	margin-bottom: 28px;
	padding: clamp(16px, 2.6vw, 26px);
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.page-panier .woocommerce-cart-form table.shop_table,
.page-panier .cart_totals table.shop_table {
	border: 0;
}

.page-panier .woocommerce-cart-form table.shop_table th,
.page-panier .cart_totals table.shop_table th {
	color: var(--navy);
	border-bottom: 2px solid var(--line);
}

.page-panier .woocommerce-cart-form table.shop_table td,
.page-panier .cart_totals table.shop_table td {
	border-top: 1px solid var(--line);
}

.page-panier .cart_totals h2 {
	margin-top: 0;
	font-size: clamp(24px, 3vw, 32px);
}

.page-panier .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

/* ===========================================================================
   4. GABARITS SECONDAIRES (page, article, 404)
   =========================================================================== */

.page-main {
	padding-block: clamp(38px, 6vw, 76px) clamp(48px, 8vw, 92px);
}

.page-main .wp-block-post-title {
	margin-block: 0 .6em;
}

.carte-article {
	padding: clamp(18px, 2.5vw, 26px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream);
	box-shadow: var(--shadow);
}

.carte-article + .carte-article {
	margin-top: 1.5rem;
}

.carte-article .wp-block-post-title {
	margin-block: 0 .35em;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.carte-article .wp-block-post-date {
	color: var(--muted);
	font-size: var(--wp--preset--font-size--small, .8125rem);
}

.page-main .wp-block-search__input {
	min-height: 48px;
}

/* ===========================================================================
   5. PETITS ÉCRANS
   =========================================================================== */

@media (max-width: 980px) {
	.fiche-produit div.product {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.fiche-produit div.product .product_title {
		font-size: clamp(30px, 9vw, 42px);
	}

	.boutique-page .woocommerce-result-count,
	.boutique-page .woocommerce-ordering {
		float: none;
	}
}

@media (max-width: 480px) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 19px;
	}
}

/* Ajustements avant ouverture : galerie et petits écrans */
.fiche-produit div.product{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fiche-produit div.product>*,.woocommerce-product-gallery,.summary{min-width:0;max-width:100%}
.fiche-produit div.product .woocommerce-product-gallery{width:100%!important;float:none!important}
.fiche-produit div.product .summary{width:100%!important;float:none!important}
.woocommerce-product-gallery img{max-width:100%;height:auto}
@media(max-width:980px){.fiche-produit div.product{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.woocommerce-MyAccount-navigation,.woocommerce-MyAccount-content{float:none!important;width:100%!important}.woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:8px;padding:0}.woocommerce-MyAccount-navigation li{list-style:none}.woocommerce-MyAccount-navigation a{display:block;padding:10px}.woocommerce table.shop_table{max-width:100%}.woocommerce .woocommerce-MyAccount-content{overflow-wrap:anywhere}.woocommerce-account .woocommerce-MyAccount-content table{display:block;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.single-product main div.product{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
.single-product main div.product>div{min-width:0;max-width:100%;width:100%!important}
.single-product .woocommerce-tabs,.single-product .related{grid-column:1/-1}
.single-product main div.product .woocommerce-product-gallery__wrapper{margin:0}
@media(max-width:980px){.single-product main div.product{grid-template-columns:minmax(0,1fr)}}

/* Passage des rayures à chaque nouvelle page : aucun blocage de navigation. */
body::after{content:"";position:fixed;inset:0;z-index:999999;pointer-events:none;background:repeating-linear-gradient(0deg,#071a67 0 30px,#fff8e8 30px 60px,#d00032 60px 67px,#fff8e8 67px 97px);transform:translateX(105%);animation:lcr-rayures-passage .65s cubic-bezier(.65,0,.35,1) both}
@keyframes lcr-rayures-passage{0%{transform:translateX(-105%)}45%{transform:translateX(0)}100%{transform:translateX(105%)}}
@media(prefers-reduced-motion:reduce){body::after{display:none!important}}