/* ==========================================================================
   Exotique Café Touba — habillage sombre
   WooCommerce et les formulaires WordPress sont conçus pour un fond clair.
   Ce fichier les ramène dans la charte. Les composants spécifiques (carte
   produit, fiche, tunnel) seront ajoutés à leurs lots respectifs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Champs de formulaire
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.select2-container .select2-selection--single {
	background: var(--ect-noir);
	border: 1px solid var(--ect-ligne);
	border-radius: 2px;
	color: var(--ect-creme);
	font-family: var(--ect-sans);
	font-size: 14px;
	padding: 13px 16px;
	width: 100%;
	transition: border-color var(--ect-t);
}

input::placeholder,
textarea::placeholder {
	color: var(--ect-texte-mut);
}

/* Les options héritaient d'un fond transparent : dans la liste déroulante
   native, rendue sur fond blanc par le système, le texte crème devenait
   illisible. On impose donc des couleurs explicites, en complément de
   `color-scheme: dark`. */
select option,
select optgroup {
	background-color: var(--ect-noir-2);
	color: var(--ect-texte);
}

select option:checked,
select option:hover {
	background-color: var(--ect-brun);
	color: var(--ect-creme);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ect-or);
}

label {
	color: var(--ect-texte-mut);
	font-size: 12.5px;
	letter-spacing: .04em;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--ect-or);
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   2. Boutons WooCommerce
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--ect-or);
	color: var(--ect-noir);
	font-family: var(--ect-caps);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 15px 28px;
	border-radius: 2px;
	border: 1px solid transparent;
	transition: var(--ect-t);
	min-height: 44px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--ect-orange);
	color: var(--ect-noir);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(255, 140, 0, .28);
}

/* --------------------------------------------------------------------------
   3. Notices WooCommerce
   Les notices natives sont grises sur fond gris : illisibles ici.
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-top: 3px solid var(--ect-or);
	border-radius: var(--ect-r);
	color: var(--ect-texte);
	font-size: 14px;
	padding: 18px 22px;
	list-style: none;
}

.woocommerce-error {
	border-top-color: #E5484D;
}

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

/* --------------------------------------------------------------------------
   4. Tableaux (panier, commandes, Mon compte)
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	border-collapse: separate;
	border-spacing: 0;
	color: var(--ect-texte);
}

.woocommerce table.shop_table th {
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ect-or);
	border-bottom: 1px solid var(--ect-ligne);
	padding: 14px 16px;
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--ect-ligne-soft);
	padding: 16px;
}

/* --------------------------------------------------------------------------
   5. Prix
   -------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce span.amount {
	font-family: var(--ect-serif);
	color: var(--ect-creme);
}

.woocommerce .price del,
.woocommerce del span.amount {
	color: var(--ect-texte-mut);
	font-size: .8em;
}

.woocommerce .price ins {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Fil d'Ariane
   -------------------------------------------------------------------------- */
.ect-crumb,
.woocommerce .woocommerce-breadcrumb {
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--ect-texte-mut);
	padding: 22px 0;
	border-bottom: 1px solid var(--ect-ligne-soft);
	margin: 0;
}

.ect-crumb a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--ect-or);
}

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

/* Largeur commune à l'en-tête, au pied de page et aux bandeaux. */
.ect-announce__inner,
.ect-header__inner,
.ect-page-banner__inner,
.ect-foot__inner,
.ect-foot__bar {
	max-width: var(--ect-wrap);
	margin-inline: auto;
	padding-inline: var(--ect-gap);
}

.ect-announce {
	background: var(--ect-noir-2);
	border-bottom: 1px solid var(--ect-ligne);
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ect-texte-mut);
	font-weight: 500;
	padding-block: 9px;
}

.ect-announce b {
	color: var(--ect-or-clair);
	font-weight: 600;
}

.ect-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(14, 13, 11, .9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ect-ligne-soft);
	/* Transition du glissement (en-tête intelligent). transform reste sur le
	   compositeur, donc aucune répercussion sur le défilement. */
	transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
	will-change: transform;
}

/* Défilement vers le bas : l'en-tête se retire vers le haut. */
.ect-header.is-hidden {
	transform: translateY(-100%);
}

/* Page défilée : fond plus opaque et légère ombre, pour se détacher du contenu
   qui glisse dessous. */
.ect-header.is-scrolled {
	background: rgba(14, 13, 11, .96);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Un panneau ouvert (recherche, menu mobile) fige l'en-tête visible : il ne
   doit pas disparaître pendant qu'on l'utilise. */
.ect-header:has(.ect-search:not([hidden])),
.ect-header:has(.ect-nav-mobile:not([hidden])) {
	transform: none;
}

/* Respect de la préférence « mouvement réduit » : pas de glissement animé. */
@media (prefers-reduced-motion: reduce) {
	.ect-header {
		transition: none;
	}

	.ect-header.is-hidden {
		transform: none;
	}
}

.ect-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 78px;
}

/* Marque -------------------------------------------------------------- */
.ect-brand {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-align: center;
	flex-shrink: 0;
}

/* Deux classes sont nécessaires : Elementor applique `.elementor img { height:
   auto }` (spécificité 0,1,1), qui l'emporterait sur une classe seule (0,1,0)
   et laisserait le logo s'afficher à sa taille naturelle. */
.ect-brand .ect-brand__logo {
	width: auto;
	height: 54px;
	max-width: none;
}

.ect-foot__brand .ect-brand .ect-brand__logo {
	height: 76px;
}

.ect-brand__l1 {
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ect-or);
	font-weight: 600;
}

.ect-brand__l2 {
	font-family: var(--ect-script);
	font-size: 29px;
	color: var(--ect-creme);
	margin: -2px 0 -4px;
}

.ect-brand__l3 {
	font-family: var(--ect-caps);
	font-size: 9px;
	letter-spacing: .32em;
	color: var(--ect-or);
	font-weight: 600;
}

/* Navigation ---------------------------------------------------------- */
.ect-nav__list {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ect-nav__list a {
	font-size: 13px;
	letter-spacing: .05em;
	color: var(--ect-texte);
	font-weight: 500;
	position: relative;
	padding-block: 4px;
	display: block;
}

/* Soulignement animé : scaleX plutôt que width, pour rester sur le
   compositeur et ne pas déclencher de recalcul de mise en page. */
.ect-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--ect-or);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ect-t);
}

.ect-nav__list a:hover,
.ect-nav__list .current-menu-item > a,
.ect-nav__list .current_page_item > a {
	color: var(--ect-or);
}

.ect-nav__list a:hover::after,
.ect-nav__list .current-menu-item > a::after,
.ect-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

/* Outils --------------------------------------------------------------- */
.ect-tools {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.ect-tool,
.ect-cart {
	background: none;
	border: none;
	padding: 0;
	color: var(--ect-creme);
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	transition: color var(--ect-t);
}

.ect-tool:hover,
.ect-cart:hover {
	color: var(--ect-or);
}

.ect-cart {
	position: relative;
}

.ect-cart__count {
	position: absolute;
	top: -8px;
	right: -9px;
	background: var(--ect-or);
	color: var(--ect-noir);
	font-size: 9px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	padding-inline: 3px;
}

/* --------------------------------------------------------------------------
   Sélecteur de devise
   L'extension remplace le <select> par le widget « Chosen », dont la feuille
   de style impose un menu blanc et un texte gris foncé. Sur fond sombre, le
   libellé était à peine lisible et la liste ouverte totalement illisible.
   Tout est réécrit ici.
   -------------------------------------------------------------------------- */
.ect-tools .woocommerce-currency-switcher-form {
	margin: 0;
}

.ect-tools .chosen-container {
	width: auto !important;
	min-width: 92px;
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .1em;
}

.ect-tools .chosen-container-single .chosen-single {
	background: transparent;
	background-image: none;
	border: 1px solid var(--ect-ligne);
	border-radius: 2px;
	box-shadow: none;
	color: var(--ect-texte-mut);
	height: auto;
	padding: 7px 24px 7px 10px;
	line-height: 1.2;
	transition: var(--ect-t);
}

.ect-tools .chosen-container-single .chosen-single:hover,
.ect-tools .chosen-container-active .chosen-single {
	border-color: var(--ect-or);
	color: var(--ect-or);
}

.ect-tools .chosen-container-single .chosen-single span {
	color: inherit;
	margin-right: 0;
}

/* La flèche par défaut est une image-sprite claire : on la remplace par un
   chevron dessiné en CSS, qui suit la couleur du texte. */
.ect-tools .chosen-container-single .chosen-single div b {
	background: none !important;
	position: relative;
}

.ect-tools .chosen-container-single .chosen-single div b::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -4px 0 0 -4px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	color: var(--ect-texte-mut);
}

.ect-tools .chosen-container-active .chosen-single div b::after {
	color: var(--ect-or);
}

/* Menu déroulant */
.ect-tools .chosen-container .chosen-drop {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: 2px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
	margin-top: 4px;
}

.ect-tools .chosen-container .chosen-results {
	color: var(--ect-texte);
	margin: 0;
	padding: 4px;
}

.ect-tools .chosen-container .chosen-results li {
	padding: 9px 12px;
	border-radius: 2px;
	line-height: 1.3;
}

.ect-tools .chosen-container .chosen-results li.highlighted,
.ect-tools .chosen-container .chosen-results li.result-selected {
	background: rgba(244, 176, 0, .14);
	background-image: none;
	color: var(--ect-or);
}

/* Champ de recherche du widget : inutile pour trois devises. */
.ect-tools .chosen-container-single .chosen-search {
	display: none;
}

.ect-burger {
	display: none;
}

/* Sélecteur de langue -------------------------------------------------- */
.ect-lang {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .1em;
}

.ect-lang__item {
	color: var(--ect-texte-mut);
	padding: 2px 3px;
	transition: color var(--ect-t);
}

.ect-lang__item:hover,
.ect-lang__item.is-current {
	color: var(--ect-or);
}

.ect-lang__sep {
	color: var(--ect-ligne);
}

/* Panneaux dépliants ---------------------------------------------------- */
.ect-search,
.ect-nav-mobile {
	border-top: 1px solid var(--ect-ligne-soft);
	background: var(--ect-noir-2);
	padding: 18px var(--ect-gap);
}

.ect-search form {
	display: flex;
	gap: 10px;
	max-width: var(--ect-wrap);
	margin-inline: auto;
}

.ect-nav-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ect-nav-mobile__list a {
	display: block;
	padding: 13px 4px;
	border-bottom: 1px solid var(--ect-ligne-soft);
	font-size: 15px;
	color: var(--ect-creme);
}

/* ==========================================================================
   BANDEAU DE TITRE
   ========================================================================== */
.ect-page-banner {
	background:
		radial-gradient(110% 90% at 50% 0, rgba(107, 62, 30, .45), transparent 60%),
		linear-gradient(160deg, #100E0B, #0C0B09);
	border-bottom: 1px solid var(--ect-ligne);
	padding-block: 0 44px;
}

.ect-page-banner__title {
	font-size: clamp(28px, 4vw, 46px);
	margin: 18px 0 0;
}

.ect-page-banner .ect-crumb {
	border-bottom: none;
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.ect-foot {
	background: var(--ect-noir-2);
	border-top: 1px solid var(--ect-ligne);
	padding-top: 66px;
}

.ect-foot__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 46px;
}

.ect-foot__brand .ect-brand {
	align-items: flex-start;
	text-align: left;
}

.ect-foot__baseline {
	font-family: var(--ect-serif);
	font-style: italic;
	color: var(--ect-or-clair);
	margin: 14px 0 8px;
	font-size: 15px;
}

.ect-foot__pitch {
	color: var(--ect-texte-mut);
	font-size: 13.5px;
	max-width: 300px;
}

.ect-foot__title {
	font-family: var(--ect-caps);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--ect-or);
	margin: 0 0 18px;
	text-transform: uppercase;
}

.ect-foot__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ect-foot__list a {
	display: block;
	color: var(--ect-texte-mut);
	font-size: 13.5px;
	margin-bottom: 11px;
	transition: var(--ect-t);
}

.ect-foot__list a:hover {
	color: var(--ect-or);
	padding-left: 4px;
}

.ect-pays {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.ect-pay {
	background: var(--ect-noir);
	border: 1px solid var(--ect-ligne);
	border-radius: 3px;
	padding: 6px 9px;
	font-size: 9px;
	letter-spacing: .05em;
	color: var(--ect-texte-mut);
	font-weight: 600;
	text-transform: uppercase;
}

.ect-foot__bar {
	border-top: 1px solid var(--ect-ligne-soft);
	padding-block: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.ect-foot__bar p {
	font-size: 12px;
	color: var(--ect-texte-mut);
	margin: 0;
}

.ect-foot__legal {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.ect-foot__legal a {
	color: var(--ect-texte-mut);
}

.ect-socials {
	display: flex;
	gap: 12px;
}

.ect-socials__dot {
	width: 32px;
	height: 32px;
	border: 1px solid var(--ect-ligne);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--ect-caps);
	font-size: 12px;
	color: var(--ect-texte-mut);
	transition: var(--ect-t);
}

.ect-socials a:hover .ect-socials__dot {
	border-color: var(--ect-or);
	color: var(--ect-or);
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */

.ect-hero__inner,
.ect-trust__inner,
.ect-story__inner,
.ect-sub__inner,
.ect-news__inner {
	max-width: var(--ect-wrap);
	margin-inline: auto;
	padding-inline: var(--ect-gap);
}

/* Signalement de contenu de démonstration (visible des admins seulement) --- */
.ect-demo-flag {
	display: block;
	margin: 0 auto 24px;
	max-width: 720px;
	background: rgba(229, 72, 77, .12);
	border: 1px dashed #E5484D;
	border-radius: 4px;
	color: #F0A0A2;
	font-size: 12px;
	letter-spacing: .04em;
	padding: 10px 14px;
	text-align: center;
}

/* Hero -------------------------------------------------------------------- */
.ect-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 82% 30%, rgba(107, 62, 30, .5), transparent 55%),
		radial-gradient(80% 70% at 15% 90%, rgba(244, 176, 0, .1), transparent 60%),
		linear-gradient(160deg, #100E0B, #1A140C 55%, #0C0B09);
}

/* Trame de points, purement décorative. */
.ect-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(243, 237, 225, .035) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: .6;
}

.ect-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 40px;
	align-items: center;
	width: 100%;
	position: relative;
	z-index: 2;
	padding-block: 64px;
}

.ect-hero__title {
	font-size: clamp(38px, 6vw, 70px);
	line-height: 1.05;
	margin: 0;
}

.ect-hero__title em {
	font-style: italic;
	color: var(--ect-or-clair);
}

.ect-hero__lead {
	color: var(--ect-texte-mut);
	font-size: 17px;
	max-width: 440px;
	margin: 22px 0 32px;
}

.ect-hero__cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.ect-hero__stage {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 440px;
}

.ect-hero__halo,
.ect-hero__ring {
	position: absolute;
	border-radius: 50%;
}

.ect-hero__halo {
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(244, 176, 0, .22), transparent 65%);
	filter: blur(6px);
}

.ect-hero__ring {
	width: 330px;
	height: 330px;
	border: 1px solid var(--ect-ligne);
}

.ect-hero__ring--2 {
	width: 390px;
	height: 390px;
	border-color: rgba(244, 176, 0, .1);
}

.ect-hero__cup {
	position: relative;
	width: 290px;
	z-index: 2;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6));
}

.ect-hero__steam {
	position: absolute;
	top: 66px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 16px;
}

.ect-hero__steam span {
	display: block;
	width: 5px;
	height: 60px;
	background: linear-gradient(to top, rgba(243, 237, 225, .5), transparent);
	border-radius: 3px;
	animation: ect-steam 3.4s ease-in-out infinite;
}

.ect-hero__steam span:nth-child(2) {
	animation-delay: .7s;
	height: 78px;
}

.ect-hero__steam span:nth-child(3) {
	animation-delay: 1.3s;
}

/* Animation sur opacity et transform uniquement : elle tourne sur le
   compositeur, sans recalcul de mise en page à chaque image. */
@keyframes ect-steam {
	0% { opacity: 0; transform: translateY(10px); }
	30% { opacity: .9; }
	100% { opacity: 0; transform: translateY(-34px) scaleX(1.6); }
}

.ect-hero__seal {
	position: absolute;
	bottom: 22px;
	right: 10px;
	z-index: 4;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--ect-noir-3), var(--ect-noir));
	border: 1px solid var(--ect-or);
	display: grid;
	place-items: center;
	text-align: center;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
	padding: 8px;
}

.ect-hero__seal b {
	font-family: var(--ect-caps);
	font-size: 9px;
	letter-spacing: .12em;
	color: var(--ect-or);
	line-height: 1.4;
	text-transform: uppercase;
	display: block;
}

.ect-hero__flag {
	font-size: 20px;
	display: block;
	margin-bottom: 2px;
}

/* Réassurance ------------------------------------------------------------- */
.ect-trust {
	background: var(--ect-noir-2);
	border-block: 1px solid var(--ect-ligne);
}

.ect-trust__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.ect-trust__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px 24px;
	border-right: 1px solid var(--ect-ligne-soft);
}

.ect-trust__item:last-child {
	border-right: none;
}

.ect-trust__item svg {
	color: var(--ect-or);
	flex-shrink: 0;
}

.ect-trust__item b {
	display: block;
	font-size: 13px;
	color: var(--ect-creme);
	font-weight: 600;
}

.ect-trust__item span {
	font-size: 11.5px;
	color: var(--ect-texte-mut);
}

/* En-tête de section ------------------------------------------------------ */
.ect-sechead {
	max-width: 640px;
	margin: 0 auto 52px;
}

.ect-sechead--center {
	text-align: center;
}

.ect-sechead--left {
	margin-inline: 0;
	text-align: left;
}

.ect-sechead__sub {
	color: var(--ect-texte-mut);
	margin-top: 8px;
}

/* Histoire ---------------------------------------------------------------- */
.ect-story {
	background: linear-gradient(180deg, var(--ect-noir), var(--ect-noir-2));
	padding-block: 88px;
}

.ect-story__inner {
	display: grid;
	/* Le visuel (première colonne) est en paysage : on lui donne un peu plus de
	   largeur que le texte pour mettre la scène en valeur. */
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
	align-items: center;
}

/* Cadre paysage 7/5, calé sur les proportions de l'image (1484×1060) : avec
   object-fit: cover, la scène complète (mosquée, personnage, sachet) s'affiche
   sans recadrage. */
.ect-story__visual {
	aspect-ratio: 7 / 5;
	border-radius: var(--ect-r);
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 25%, rgba(244, 176, 0, .18), transparent 55%),
		linear-gradient(150deg, #2b2013, #100d09);
	border: 1px solid var(--ect-ligne);
	/* Liseré or discret, cohérent avec la charte. */
	box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
	display: grid;
	place-items: center;
}

.ect-story__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ect-story__ph {
	text-align: center;
	color: var(--ect-texte-mut);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ect-story__ph-word {
	display: block;
	font-family: var(--ect-script);
	font-size: 50px;
	color: var(--ect-or);
	margin-bottom: 6px;
	text-transform: none;
	letter-spacing: 0;
}

.ect-story__text p {
	color: var(--ect-texte-mut);
	margin-bottom: 16px;
	font-size: 15.5px;
}

/* Abonnement -------------------------------------------------------------- */
.ect-sub {
	background:
		radial-gradient(90% 120% at 85% 20%, rgba(107, 62, 30, .55), transparent 60%),
		linear-gradient(120deg, var(--ect-noir-3), var(--ect-noir));
	border-block: 1px solid var(--ect-ligne);
	padding-block: 88px;
}

.ect-sub__inner {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 40px;
	align-items: center;
}

.ect-sub__lead {
	color: var(--ect-texte-mut);
	margin: 16px 0 26px;
	max-width: 460px;
}

.ect-sub__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.ect-sub__list li {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--ect-creme);
	font-size: 14.5px;
}

.ect-sub__list svg {
	color: var(--ect-or);
	flex-shrink: 0;
}

.ect-sub__card {
	background: var(--ect-noir);
	border: 1px solid var(--ect-or);
	border-radius: 8px;
	padding: 34px;
	text-align: center;
}

.ect-sub__plan {
	display: block;
	font-family: var(--ect-caps);
	letter-spacing: .2em;
	font-size: 12px;
	color: var(--ect-or);
	text-transform: uppercase;
}

.ect-sub__price {
	display: block;
	font-family: var(--ect-serif);
	font-size: 44px;
	color: var(--ect-creme);
	margin: 12px 0 2px;
}

.ect-sub__save {
	display: block;
	font-size: 12px;
	color: var(--ect-or-clair);
	margin-bottom: 22px;
	letter-spacing: .06em;
}

/* Témoignages ------------------------------------------------------------- */
.ect-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ect-review {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	padding: 30px;
	margin: 0;
}

.ect-review blockquote {
	font-family: var(--ect-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--ect-creme);
	line-height: 1.5;
	margin: 0;
	padding: 0;
	border: none;
	quotes: none;
}

.ect-review figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.ect-review__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ect-brun), var(--ect-or));
	display: grid;
	place-items: center;
	font-family: var(--ect-serif);
	color: var(--ect-noir);
	/* 600 et non 700 : la graisse 700 de Playfair n'est pas chargée, et la
	   faire synthétiser par le navigateur donnerait un rendu approximatif. */
	font-weight: 600;
	flex-shrink: 0;
}

.ect-review figcaption b {
	display: block;
	font-size: 14px;
	color: var(--ect-creme);
}

.ect-review figcaption span span {
	font-size: 11.5px;
	color: var(--ect-texte-mut);
}

/* Newsletter -------------------------------------------------------------- */
.ect-news {
	background: linear-gradient(120deg, var(--ect-brun-2), var(--ect-noir));
	border-top: 1px solid var(--ect-ligne);
	padding-block: 88px;
}

.ect-news__inner {
	text-align: center;
	max-width: 600px;
}

.ect-news__title {
	font-size: clamp(24px, 3.4vw, 38px);
	margin: 14px 0 0;
}

.ect-news__lead {
	color: var(--ect-creme-2);
	margin: 14px 0 28px;
}

.ect-news__form {
	display: flex;
	gap: 12px;
	max-width: 480px;
	margin-inline: auto;
}

.ect-news__form input[type="email"] {
	flex: 1;
	background: rgba(14, 13, 11, .6);
}

.ect-news__msg {
	border-radius: 4px;
	padding: 12px 16px;
	font-size: 13.5px;
	margin-bottom: 20px;
}

.ect-news__msg.is-ok {
	background: rgba(46, 160, 90, .15);
	color: #7BD8A0;
}

.ect-news__msg.is-ko {
	background: rgba(229, 72, 77, .15);
	color: #F0A0A2;
}

/* Pot de miel : masqué visuellement ET pour les lecteurs d'écran, mais
   toujours présent dans le DOM pour piéger les robots. */
.ect-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   BOUTIQUE
   ========================================================================== */

/* Cartes de recettes ---------------------------------------------------- */
.ect-recipes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 44px;
}

.ect-recipe {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 170px;
	padding: 24px;
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	background: linear-gradient(160deg, rgba(107, 62, 30, .35), var(--ect-noir-2));
	transition: var(--ect-t);
}

.ect-recipe:hover {
	border-color: var(--ect-or);
	transform: translateY(-4px);
}

.ect-recipe__name {
	font-family: var(--ect-serif);
	font-size: 22px;
	color: var(--ect-creme);
	font-weight: 600;
}

.ect-recipe__desc {
	font-size: 12.5px;
	color: var(--ect-texte-mut);
	margin: 4px 0 12px;
}

.ect-recipe__link {
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--ect-or);
	text-transform: uppercase;
}

/* Grille filtres | produits --------------------------------------------- */
.ect-shop {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

.ect-filters {
	position: sticky;
	top: 100px;
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	padding: 26px;
}

.ect-filters__group {
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--ect-ligne-soft);
}

.ect-filters__group:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.ect-filters__title {
	font-family: var(--ect-caps);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--ect-or);
	margin: 0 0 14px;
	text-transform: uppercase;
}

.ect-filters__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ect-filters__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 13.5px;
	color: var(--ect-texte);
	min-height: 44px;
}

/* Cases dessinées en CSS : ce sont des liens, pas des cases à cocher — le
   filtrage doit fonctionner sans JavaScript et produire des URL indexables. */
.ect-filters__box {
	width: 15px;
	height: 15px;
	border: 1px solid var(--ect-ligne);
	border-radius: 2px;
	flex-shrink: 0;
	position: relative;
	transition: var(--ect-t);
}

.ect-filters__opt.is-active .ect-filters__box {
	background: var(--ect-or);
	border-color: var(--ect-or);
}

.ect-filters__opt.is-active .ect-filters__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--ect-noir);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ect-filters__opt:hover,
.ect-filters__opt.is-active {
	color: var(--ect-or);
}

.ect-filters__count {
	margin-left: auto;
	font-size: 11px;
	color: var(--ect-texte-mut);
}

.ect-filters__reset {
	margin-top: 22px;
	width: 100%;
}

/* Barre de tri ----------------------------------------------------------- */
.woocommerce .woocommerce-result-count {
	font-size: 13px;
	color: var(--ect-texte-mut);
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	padding: 10px 14px;
	font-size: 13px;
}

/* Grille et cartes ------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	overflow: hidden;
	padding: 0;
	transition: var(--ect-t);
	position: relative;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-6px);
	border-color: var(--ect-or);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}

/* Vignette carrée plutôt qu'en 4/5 : les packshots sont au format portrait
   2:3, un cadre 4/5 produisait des cartes de 778 px de haut. Le carré, avec
   `contain`, montre le sachet en entier dans un encombrement raisonnable. */
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background:
		radial-gradient(circle at 50% 35%, rgba(244, 176, 0, .12), transparent 60%),
		linear-gradient(150deg, #241C12, #100F0B);
	border-bottom: 1px solid var(--ect-ligne-soft);
	margin: 0;
	padding: 20px;
	width: 100%;
}

.woocommerce ul.products li.product .ect-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--ect-brun);
	color: var(--ect-creme);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 2px;
	font-weight: 600;
}

.woocommerce ul.products li.product .ect-badge.is-best,
.woocommerce ul.products li.product .ect-badge.is-sale {
	background: var(--ect-or);
	color: var(--ect-noir);
}

.woocommerce ul.products li.product .ect-card__eyebrow,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ect-card__excerpt,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
	margin-inline: 22px;
}

.woocommerce ul.products li.product .ect-card__eyebrow {
	margin-top: 22px;
	font-size: 10.5px;
	letter-spacing: .14em;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ect-serif);
	font-size: 20px;
	color: var(--ect-creme);
	padding: 0;
	margin-top: 6px;
	margin-bottom: 8px;
}

.woocommerce ul.products li.product .ect-card__excerpt {
	font-size: 13px;
	color: var(--ect-texte-mut);
	margin-bottom: 12px;
	flex: 1;
}

.woocommerce ul.products li.product .price {
	font-family: var(--ect-serif);
	font-size: 21px;
	color: var(--ect-creme);
	margin-bottom: 14px;
}

.woocommerce ul.products li.product .button {
	margin-bottom: 22px;
	text-align: center;
}

/* ==========================================================================
   FICHE PRODUIT
   ========================================================================== */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
	padding-block: 56px;
}

/* Indispensable : un élément de grille a `min-width: auto` par défaut, donc il
   refuse de descendre sous la largeur minimale de son contenu. La galerie
   WooCommerce impose une largeur intrinsèque élevée, et la colonne débordait
   de près de 100 px sur mobile — le bouton d'achat était rogné, masqué par
   `overflow-x: hidden`. */
.woocommerce div.product > * {
	min-width: 0;
}

/* La galerie porte aussi la classe `images`, ciblée par WooCommerce avec une
   spécificité supérieure (`.woocommerce div.product div.images`) : il faut
   reprendre ce sélecteur, sinon la position collante est ignorée. */
.woocommerce div.product div.images.woocommerce-product-gallery {
	position: sticky;
	top: 100px;
	width: 100% !important;
	float: none !important;
	margin: 0;
}

/* Même logique que les vignettes : le packshot portrait donnait une image de
   788 px de haut. Le cadre carré la ramène à la largeur de la colonne, et le
   sachet reste entièrement visible grâce à `contain`. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	background:
		radial-gradient(circle at 50% 38%, rgba(244, 176, 0, .12), transparent 60%),
		linear-gradient(150deg, #241C12, #100F0B);
	padding: 28px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
}

.woocommerce div.product div.summary {
	width: 100% !important;
	float: none !important;
	margin: 0;
}

.woocommerce div.product .product_title {
	font-size: clamp(28px, 3.4vw, 40px);
	margin: 10px 0 12px;
}

.woocommerce div.product p.price {
	font-family: var(--ect-serif);
	font-size: 32px;
	color: var(--ect-creme);
	margin-bottom: 18px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--ect-texte-mut);
	font-size: 15px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ect-ligne-soft);
	margin-bottom: 24px;
}

/* Sélecteurs de variation ------------------------------------------------ */
.woocommerce div.product table.variations {
	border: none;
	margin-bottom: 18px;
}

.woocommerce div.product table.variations th,
.woocommerce div.product table.variations td {
	border: none;
	padding: 6px 0;
	display: block;
	width: 100%;
}

.woocommerce div.product table.variations th label {
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--ect-or);
	text-transform: uppercase;
}

/* WooCommerce force `background: initial` sur ces menus avec une spécificité
   élevée : le champ restait transparent alors que tous les autres champs du
   site sont sur fond noir. */
.woocommerce div.product form.cart .variations select {
	background: var(--ect-noir);
	border: 1px solid var(--ect-ligne);
	border-radius: 2px;
	color: var(--ect-creme);
	padding: 13px 16px;
	min-height: 44px;
}

.woocommerce div.product form.cart .variations select:focus {
	border-color: var(--ect-or);
	outline: none;
}

/* Lien « Effacer » sous les sélecteurs. */
.woocommerce div.product form.cart .reset_variations {
	color: var(--ect-texte-mut);
	font-size: 12.5px;
	text-decoration: underline;
}

.woocommerce div.product form.cart .reset_variations:hover {
	color: var(--ect-or);
}

.woocommerce div.product .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ect-ligne);
	border-radius: 3px;
	margin-right: 12px;
}

.woocommerce div.product .quantity input.qty {
	width: 56px;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--ect-serif);
	font-size: 16px;
	padding: 14px 0;
}

/* Réassurance ------------------------------------------------------------ */
.ect-assurance {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ect-assurance li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--ect-texte-mut);
}

.ect-assurance svg {
	color: var(--ect-or);
	flex-shrink: 0;
}

/* Onglets ---------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	border-top: 1px solid var(--ect-ligne-soft);
	margin-top: 14px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--ect-ligne-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: none;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 20px 26px;
	color: var(--ect-texte-mut);
	font-family: var(--ect-caps);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ect-or);
	border-bottom-color: var(--ect-or);
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding-block: 36px;
	max-width: 820px;
	color: var(--ect-texte-mut);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 22px;
	margin-bottom: 14px;
}

.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 18px;
	margin: 24px 0 10px;
}

.woocommerce div.product .woocommerce-tabs .panel li {
	margin-bottom: 6px;
}

/* Produits associés ------------------------------------------------------ */
.woocommerce div.product .related {
	grid-column: 1 / -1;
	margin-top: 40px;
}

.woocommerce div.product .related > h2 {
	font-size: clamp(24px, 3vw, 34px);
	text-align: center;
	margin-bottom: 36px;
}

.woocommerce div.product .related ul.products {
	grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   PAGES ÉDITORIALES
   ========================================================================== */

.ect-title--sm {
	font-size: clamp(26px, 3.4vw, 40px);
}

/* Bloc texte + visuel ----------------------------------------------------- */
.ect-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* On inverse par l'ordre de grille plutôt que par `direction: rtl` : le sens
   de lecture du texte reste intact pour les lecteurs d'écran. */
.ect-split--image-droite .ect-split__visual {
	order: 2;
}

.ect-split__visual {
	aspect-ratio: 4 / 5;
	border-radius: var(--ect-r);
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 25%, rgba(244, 176, 0, .18), transparent 55%),
		linear-gradient(150deg, #2b2013, #100d09);
	border: 1px solid var(--ect-ligne);
	display: grid;
	place-items: center;
}

.ect-split__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ect-split__text p {
	color: var(--ect-texte-mut);
	font-size: 15.5px;
	margin-bottom: 14px;
}

/* Valeurs ----------------------------------------------------------------- */
.ect-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.ect-value {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	padding: 30px 24px;
	text-align: center;
	transition: var(--ect-t);
}

.ect-value:hover {
	border-color: var(--ect-or);
	transform: translateY(-5px);
}

.ect-value svg {
	color: var(--ect-or);
	margin-bottom: 16px;
}

.ect-value h3 {
	font-size: 19px;
	margin-bottom: 8px;
}

.ect-value p {
	font-size: 13px;
	color: var(--ect-texte-mut);
	margin: 0;
}

/* Étapes ------------------------------------------------------------------ */
.ect-timeline {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
}

.ect-timeline::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--ect-ligne);
}

.ect-timeline__item {
	position: relative;
	padding: 0 0 40px 64px;
}

.ect-timeline__item:last-child {
	padding-bottom: 0;
}

.ect-timeline__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ect-or);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--ect-serif);
	color: var(--ect-or);
	background: var(--ect-noir);
	font-size: 15px;
}

.ect-timeline__item h3 {
	font-size: 20px;
	margin-bottom: 6px;
}

.ect-timeline__item p {
	color: var(--ect-texte-mut);
	font-size: 14.5px;
	margin: 0;
}

/* Appel à l'action -------------------------------------------------------- */
.ect-cta {
	text-align: center;
	background:
		radial-gradient(90% 120% at 50% 0, rgba(107, 62, 30, .45), transparent 60%),
		var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	padding: 56px 28px;
}

.ect-cta p {
	color: var(--ect-texte-mut);
	margin: 12px 0 26px;
}

/* ==========================================================================
   PAGES LÉGALES
   ========================================================================== */
.ect-legal h2 {
	font-size: 21px;
	margin: 36px 0 10px;
}

.ect-legal h2:first-of-type {
	margin-top: 0;
}

.ect-legal p,
.ect-legal li {
	color: var(--ect-texte-mut);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 10px;
}

.ect-legal ul,
.ect-legal ol {
	padding-left: 22px;
	margin-bottom: 14px;
}

.ect-legal a {
	color: var(--ect-or);
	text-decoration: underline;
}

.ect-legal__note {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-left: 3px solid var(--ect-or);
	border-radius: 4px;
	padding: 16px 20px;
	font-size: 13.5px;
	margin-bottom: 28px;
}

.ect-legal__date {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ect-texte-mut);
	margin-bottom: 32px;
}

/* Mentions à compléter : volontairement voyantes. Une trame juridique publiée
   avec des trous invisibles est un risque ; ici, impossible de passer à côté. */
.ect-todo {
	background: rgba(229, 72, 77, .16);
	border-bottom: 1px dashed #E5484D;
	color: #F0A0A2;
	padding: 1px 5px;
	border-radius: 2px;
	font-style: italic;
	white-space: nowrap;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.ect-faq {
	max-width: 820px;
	margin-inline: auto;
}

.ect-faq__group + .ect-faq__group {
	margin-top: 44px;
}

.ect-faq__theme {
	font-family: var(--ect-caps);
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--ect-or);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.ect-faq__item {
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	background: var(--ect-noir-2);
	margin-bottom: 12px;
	transition: border-color var(--ect-t);
}

.ect-faq__item[open],
.ect-faq__item:hover {
	border-color: var(--ect-or);
}

.ect-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	font-family: var(--ect-serif);
	font-size: 17px;
	color: var(--ect-creme);
	list-style: none;
	min-height: 44px;
}

.ect-faq__item summary::-webkit-details-marker {
	display: none;
}

.ect-faq__chevron {
	width: 10px;
	height: 10px;
	border-right: 1px solid var(--ect-or);
	border-bottom: 1px solid var(--ect-or);
	transform: rotate(45deg);
	transition: transform var(--ect-t);
	flex-shrink: 0;
}

.ect-faq__item[open] .ect-faq__chevron {
	transform: rotate(-135deg);
}

.ect-faq__answer {
	padding: 0 24px 22px;
	color: var(--ect-texte-mut);
	font-size: 14.5px;
}

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

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ect-contact {
	display: grid;
	grid-template-columns: 1.4fr .9fr;
	gap: 48px;
	align-items: start;
}

.ect-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ect-field {
	margin: 0 0 18px;
}

.ect-field label {
	display: block;
	margin-bottom: 6px;
}

.ect-consent {
	font-size: 13px;
	color: var(--ect-texte-mut);
	margin-bottom: 22px;
}

.ect-consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.5;
}

.ect-consent input {
	margin-top: 3px;
	flex-shrink: 0;
}

.ect-consent a {
	color: var(--ect-or);
	text-decoration: underline;
}

.ect-contact-infos {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	padding: 30px;
	position: sticky;
	top: 100px;
}

.ect-contact-infos__title {
	font-size: 22px;
	margin-bottom: 20px;
}

.ect-contact-infos ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ect-contact-infos li > span:first-child {
	display: block;
	font-family: var(--ect-caps);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ect-or);
	margin-bottom: 4px;
}

.ect-contact-infos a {
	color: var(--ect-creme);
}

.ect-contact-infos a:hover {
	color: var(--ect-or);
}

.ect-contact-infos address {
	font-style: normal;
	color: var(--ect-texte);
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.ect-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.ect-post {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: var(--ect-t);
}

.ect-post:hover {
	transform: translateY(-6px);
	border-color: var(--ect-or);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}

.ect-post__thumb {
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(circle at 50% 35%, rgba(244, 176, 0, .12), transparent 60%),
		linear-gradient(150deg, #241C12, #100F0B);
	border-bottom: 1px solid var(--ect-ligne-soft);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.ect-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ect-post__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ect-post__meta {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ect-or);
	font-weight: 600;
}

.ect-post__title {
	font-size: 20px;
	margin: 8px 0 10px;
}

.ect-post__excerpt {
	font-size: 13.5px;
	color: var(--ect-texte-mut);
	flex: 1;
	margin: 0 0 14px;
}

.ect-post__more {
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ect-or);
}

/* Article ----------------------------------------------------------------- */
.ect-article {
	max-width: 760px;
	margin-inline: auto;
}

.ect-article p,
.ect-article li {
	color: var(--ect-texte-mut);
	font-size: 16px;
	line-height: 1.75;
	margin-bottom: 16px;
}

.ect-article h2 {
	font-size: 28px;
	margin: 40px 0 14px;
}

.ect-article h3 {
	font-size: 21px;
	margin: 30px 0 10px;
}

.ect-article blockquote {
	border-left: 2px solid var(--ect-or);
	padding-left: 22px;
	margin: 28px 0;
	font-family: var(--ect-serif);
	font-style: italic;
	color: var(--ect-creme);
}

.ect-article img {
	border-radius: var(--ect-r);
	margin-block: 24px;
}

/* ==========================================================================
   TUNNEL DE COMMANDE
   ========================================================================== */

/* Barre d'étapes ---------------------------------------------------------- */
.ect-stepper {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	flex-wrap: wrap;
}

.ect-stepper__step {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 200px;
	padding: 14px 18px;
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	background: var(--ect-noir-2);
	font-family: var(--ect-caps);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ect-texte-mut);
}

.ect-stepper__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--ect-ligne);
	display: grid;
	place-items: center;
	font-family: var(--ect-serif);
	font-size: 13px;
	flex-shrink: 0;
}

.ect-stepper__step.is-current {
	border-color: var(--ect-or);
	color: var(--ect-or);
}

.ect-stepper__step.is-current .ect-stepper__num {
	background: var(--ect-or);
	border-color: var(--ect-or);
	color: var(--ect-noir);
}

.ect-stepper__step.is-done {
	color: var(--ect-creme);
}

.ect-stepper__step.is-done .ect-stepper__num {
	border-color: var(--ect-or);
	color: var(--ect-or);
}

/* Panier ------------------------------------------------------------------ */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
}

.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .ect-stepper {
	grid-column: 1 / -1;
}

.woocommerce-cart form.woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	width: 100%;
	float: none;
	position: sticky;
	top: 100px;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	float: none;
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	padding: 28px;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 22px;
	margin-bottom: 18px;
}

.woocommerce table.cart img {
	width: 72px;
	border-radius: 4px;
	border: 1px solid var(--ect-ligne);
	background: linear-gradient(150deg, #241C12, #100F0B);
}

.woocommerce .coupon input[type="text"] {
	max-width: 220px;
}

/* Paiement ---------------------------------------------------------------- */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
}

.woocommerce-checkout #customer_details {
	grid-column: 1;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	grid-column: 2;
}

.woocommerce-checkout #order_review {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	padding: 24px;
	position: sticky;
	top: 100px;
}

.woocommerce-checkout #order_review_heading {
	font-size: 22px;
	margin-bottom: 14px;
}

.woocommerce form .form-row {
	padding: 0;
	margin-bottom: 16px;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--ect-ligne-soft);
	padding: 0 0 16px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	padding: 14px;
	margin-bottom: 10px;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--ect-noir);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: 4px;
	color: var(--ect-texte-mut);
	font-size: 13px;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 18px 0 0;
}

.woocommerce #payment #place_order {
	width: 100%;
	min-height: 54px;
}

/* Réassurance paiement ---------------------------------------------------- */
.ect-paylogos {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 18px;
}

.ect-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 11.5px;
	color: var(--ect-texte-mut);
	margin-top: 12px;
	text-align: center;
}

.ect-secure svg {
	color: var(--ect-or);
	flex-shrink: 0;
}

/* Confirmation ------------------------------------------------------------ */
.ect-thanks {
	text-align: center;
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	padding: 44px 28px;
	margin-bottom: 36px;
}

.ect-thanks__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(46, 160, 90, .15);
	color: #5CCF8A;
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
}

.ect-thanks h2 {
	font-size: clamp(24px, 3vw, 32px);
	margin-bottom: 10px;
}

.ect-thanks p {
	color: var(--ect-texte-mut);
	margin: 0;
}

.ect-thanks__contact {
	margin-top: 10px;
}

.ect-thanks__contact a {
	color: var(--ect-or);
}

/* Espace client ----------------------------------------------------------- */
.ect-login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid var(--ect-ligne);
	border-radius: var(--ect-r);
	overflow: hidden;
}

.ect-login__aside {
	background:
		radial-gradient(90% 120% at 20% 20%, rgba(107, 62, 30, .55), transparent 60%),
		linear-gradient(140deg, var(--ect-noir-3), var(--ect-noir));
	padding: 44px 36px;
}

.ect-login__aside h2 {
	font-size: 26px;
	margin: 14px 0 20px;
}

.ect-login__aside ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ect-login__aside li {
	color: var(--ect-texte-mut);
	font-size: 14px;
	padding-left: 22px;
	position: relative;
}

.ect-login__aside li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ect-or);
}

.ect-login__main {
	padding: 44px 36px;
	background: var(--ect-noir-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 14px;
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	font-size: 13.5px;
	color: var(--ect-texte-mut);
	border-radius: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(244, 176, 0, .1);
	color: var(--ect-or);
}

/* ==========================================================================
   RESPONSIVE — conception mobile d'abord vérifiée à 375 / 768 / 1024 / 1440
   ========================================================================== */
@media (max-width: 1024px) {
	.ect-nav {
		display: none;
	}

	.ect-burger {
		display: inline-flex;
	}

	.ect-foot__inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	/* La colonne de filtres passe au-dessus de la grille produits : garder
	   une sidebar collante sur tablette la rendrait plus haute que l'écran. */
	.ect-shop {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ect-filters {
		position: static;
	}

	.ect-filters__group {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 24px;
		align-items: center;
	}

	.ect-filters__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 20px;
	}

	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.woocommerce div.product div.images.woocommerce-product-gallery {
		position: static;
	}

	.ect-trust__inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.ect-trust__item:nth-child(2n) {
		border-right: none;
	}

	.ect-trust__item:nth-child(-n+2) {
		border-bottom: 1px solid var(--ect-ligne-soft);
	}

	.ect-sub__inner {
		grid-template-columns: 1fr;
	}

	.ect-reviews__grid {
		grid-template-columns: 1fr;
	}

	/* Le récapitulatif passe sous le formulaire : sur tablette, une colonne
	   de 380 px collante mange trop de largeur utile. */
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce-cart form.woocommerce-cart-form,
	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
	}

	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout #order_review {
		position: static;
	}

	.ect-login {
		grid-template-columns: 1fr;
	}

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

	/* Sur une colonne, le visuel repasse toujours au-dessus du texte :
	   l'alternance gauche/droite n'a plus de sens. */
	.ect-split--image-droite .ect-split__visual {
		order: 0;
	}

	.ect-values {
		grid-template-columns: repeat(2, 1fr);
	}

	.ect-contact {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ect-contact-infos {
		position: static;
	}

	.ect-posts {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	:root {
		--ect-gap: 20px;
	}

	.ect-header__inner {
		min-height: 66px;
	}

	.ect-brand .ect-brand__logo {
		height: 42px;
	}

	.ect-foot__brand .ect-brand .ect-brand__logo {
		height: 64px;
	}

	.ect-tools {
		gap: 14px;
	}

	.ect-announce {
		font-size: 10px;
		letter-spacing: .1em;
	}

	.ect-foot__inner {
		grid-template-columns: 1fr;
	}

	.ect-foot__bar {
		flex-direction: column;
		text-align: center;
	}

	.ect-search form {
		flex-direction: column;
	}

	.ect-recipes {
		grid-template-columns: 1fr;
	}

	/* 2 colonnes plutôt qu'une seule : on garde une densité de catalogue
	   lisible sans réduire les vignettes à des timbres-poste. */
	.woocommerce ul.products,
	.woocommerce div.product .related ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.woocommerce ul.products li.product .ect-card__eyebrow,
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .ect-card__excerpt,
	.woocommerce ul.products li.product .price,
	.woocommerce ul.products li.product .button {
		margin-inline: 14px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 16px;
	}

	.woocommerce ul.products li.product .ect-card__excerpt {
		display: none;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 16px;
		white-space: nowrap;
	}

	/* Le hero passe en colonne, visuel sous le texte : sur mobile, le message
	   doit arriver avant l'illustration. */
	.ect-hero__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-block: 44px;
	}

	.ect-hero {
		min-height: 0;
	}

	.ect-hero__stage {
		min-height: 300px;
	}

	.ect-hero__cup {
		width: 210px;
	}

	.ect-hero__halo,
	.ect-hero__ring--2 {
		width: 260px;
		height: 260px;
	}

	.ect-hero__ring {
		width: 224px;
		height: 224px;
	}

	.ect-hero__seal {
		width: 78px;
		height: 78px;
		right: 0;
		bottom: 0;
	}

	.ect-hero__cta .ect-btn {
		flex: 1 1 100%;
	}

	.ect-trust__inner {
		grid-template-columns: 1fr;
	}

	.ect-trust__item {
		border-right: none;
		border-bottom: 1px solid var(--ect-ligne-soft);
		padding: 18px 0;
	}

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

	.ect-story,
	.ect-sub,
	.ect-news {
		padding-block: 56px;
	}

	.ect-news__form {
		flex-direction: column;
	}

	.ect-stepper__step {
		flex-basis: 100%;
		padding: 11px 14px;
		font-size: 10px;
	}

	.ect-login__aside,
	.ect-login__main {
		padding: 28px 20px;
	}

	/* Le tableau du panier devient illisible en dessous de 600 px : on le
	   laisse défiler dans son propre conteneur plutôt que d'écraser les
	   colonnes ou de déborder la page. */
	.woocommerce-cart .woocommerce-cart-form {
		overflow-x: auto;
	}

	.woocommerce table.cart img {
		width: 52px;
	}

	.ect-values {
		grid-template-columns: 1fr;
	}

	.ect-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ect-posts {
		grid-template-columns: 1fr;
	}

	.ect-timeline__item {
		padding-left: 52px;
		padding-bottom: 30px;
	}

	.ect-faq__item summary {
		padding: 16px 18px;
		font-size: 15.5px;
	}

	.ect-faq__answer {
		padding: 0 18px 18px;
	}
}

/* --------------------------------------------------------------------------
   7. Toast « ajouté au panier »
   -------------------------------------------------------------------------- */
.ect-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%) translateY(140px);
	background: var(--ect-or);
	color: var(--ect-noir);
	font-family: var(--ect-caps);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 15px 26px;
	border-radius: 3px;
	z-index: 9999;
	transition: transform .4s ease;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
	pointer-events: none;
}

.ect-toast.is-visible {
	transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   8. Retour en haut de page
   -------------------------------------------------------------------------- */
.ect-totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne);
	border-radius: 50%;
	color: var(--ect-or);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: var(--ect-t);
	z-index: 90;
	cursor: pointer;
}

.ect-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ect-totop:hover {
	background: var(--ect-or);
	color: var(--ect-noir);
}