/* ==========================================================================
   CRÉA — Version hybride (demande cliente du 13/09/2026)

   Assemblage des deux directions retenues :
   - de la version 1 : le hero pleine largeur, texte posé sur la photo, et le
     marine comme couleur de signature ;
   - de la version 2 : la grille catalogue et les accents terracotta.

   S'y ajoutent les demandes de marque : logo agrandi et centré,
   frises berbères en séparation, arches traditionnelles sur les
   images mises en avant, alternance marine / écru / terracotta.

   La version 1 n'est jamais modifiée : tout est porté par cette feuille et
   par les gabarits de variantes/hybride/.
   ========================================================================== */

.crea-v-hybride {
	--hy-brique:       var(--crea-terra-600);   /* aplats et boutons : contraste AA */
	--hy-brique-vive:  var(--crea-terracotta);  /* filets et survols, jamais sous du texte */
	--hy-brique-fonce: #7a3a1f;                 /* survol */
	--hy-arche:        999px 999px 10px 10px;   /* fenêtre traditionnelle */

	/* Motifs relevés dans le PDF de marque CRÉA.
	   Bande de la charte (p. 16-17) : sur les fonds écru, en frise de séparation.
	   Chevrons et points amazighs (page 15) : sur les fonds marine et terracotta.
	   Redessinés en trait simple : le ruban à double contour du PDF devient
	   illisible en dessous de 30 px de haut. */
	--hy-frise-h: 28px;
	/* Losange à franges de la page 15, en trame de fond très légère. */
	--hy-losange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100' viewBox='0 0 60 100'%3E %3Cg fill='none' stroke='%23002f6c' stroke-width='1.4' stroke-linecap='round'%3E %3Cpath d='M30 8 48 50 30 92 12 50Z'/%3E %3Cg id='f'%3E%3Cpath d='M26.4 16.4 20 13.7M22.8 24.8 16.4 22.1M19.2 33.2 12.8 30.5M15.6 41.6 9.2 38.9'/%3E%3C/g%3E %3Cuse href='%23f' transform='matrix(-1 0 0 1 60 0)'/%3E %3Cuse href='%23f' transform='matrix(1 0 0 -1 0 100)'/%3E %3Cuse href='%23f' transform='matrix(-1 0 0 -1 60 100)'/%3E %3C/g%3E%3C/svg%3E");
	--hy-losange-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100' viewBox='0 0 60 100'%3E %3Cg fill='none' stroke='%23f4e3c1' stroke-width='1.4' stroke-linecap='round'%3E %3Cpath d='M30 8 48 50 30 92 12 50Z'/%3E %3Cg id='f'%3E%3Cpath d='M26.4 16.4 20 13.7M22.8 24.8 16.4 22.1M19.2 33.2 12.8 30.5M15.6 41.6 9.2 38.9'/%3E%3C/g%3E %3Cuse href='%23f' transform='matrix(-1 0 0 1 60 0)'/%3E %3Cuse href='%23f' transform='matrix(1 0 0 -1 0 100)'/%3E %3Cuse href='%23f' transform='matrix(-1 0 0 -1 60 100)'/%3E %3C/g%3E%3C/svg%3E");
	--hy-frise-arches:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='28' viewBox='0 0 480 48'%3E %3Cdefs%3E%3Cg id='u' fill='currentColor' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round'%3E %3Cpath d='M8 24 45 9V39Z' stroke-width='3'/%3E %3Cpath d='M53 9 90 24 53 39Z' stroke-width='3'/%3E %3Cpath d='M104 13l10 11-10 11M120 13l10 11-10 11M136 13l10 11-10 11' fill='none' stroke-width='6'/%3E %3Ccircle cx='162' cy='24' r='6' fill='none' stroke-width='5'/%3E %3Cpath d='M188 13l-10 11 10 11M204 13l-10 11 10 11M220 13l-10 11 10 11' fill='none' stroke-width='6'/%3E %3C/g%3E%3C/defs%3E %3Cuse href='%23u' color='%23b45f38'/%3E%3Cuse href='%23u' x='240' color='%23d9a441'/%3E%3C/svg%3E");
	--hy-frise-chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='109' height='28' viewBox='0 0 156 40'%3E %3Cg fill='none' stroke='%23d9a441' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M26 20h32'/%3E %3Ccircle cx='6' cy='20' r='2.4'/%3E%3Ccircle cx='17' cy='13' r='3.2'/%3E%3Ccircle cx='17' cy='27' r='3.2'/%3E %3Ccircle cx='67' cy='13' r='3.2'/%3E%3Ccircle cx='67' cy='27' r='3.2'/%3E%3Ccircle cx='78' cy='20' r='2.4'/%3E %3Cpath d='M94 4 114 12 94 20 114 28 94 36'/%3E %3Cpath d='M150 4 130 12 150 20 130 28 150 36'/%3E %3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Frises et trames
   -------------------------------------------------------------------------- */

.hy-frise {
	height: var(--hy-frise-h);
	background-image: var(--hy-frise-arches);
	background-repeat: repeat-x;
	background-position: center bottom;
	opacity: .55;
}
.hy-frise--claire { background-image: var(--hy-frise-chevrons); opacity: .6; }

/* Lignes de fond, très basse opacité : elles ne doivent jamais gêner la lecture. */
.hy-section--ecru { position: relative; isolation: isolate; }
.hy-section--ecru::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--hy-losange);
	background-size: 54px 90px;
	opacity: .07;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}

/* Arche : fenêtre traditionnelle, réservée aux images mises en avant. */
.hy-arche {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--crea-cream-300);
	border-radius: var(--hy-arche);
}
.hy-arche img,
.hy-arche .crea-split__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 18%;
}

/* --------------------------------------------------------------------------
   Boutons et prix : terracotta (demande cliente)
   -------------------------------------------------------------------------- */

.crea-v-hybride .crea-btn,
.crea-v-hybride .crea-btn--gold {
	background: var(--hy-brique);
	border-color: var(--hy-brique);
	color: var(--crea-cream);
}
.crea-v-hybride .crea-btn:hover,
.crea-v-hybride .crea-btn--gold:hover {
	background: var(--hy-brique-fonce);
	border-color: var(--hy-brique-fonce);
	color: var(--crea-cream);
}

.crea-v-hybride .crea-btn--ghost {
	background: transparent;
	border-color: var(--hy-brique);
	color: var(--hy-brique);
}
.crea-v-hybride .crea-btn--ghost:hover {
	background: var(--hy-brique);
	color: var(--crea-cream);
}

.crea-v-hybride .crea-btn--light {
	background: transparent;
	border-color: rgba(255, 255, 255, .75);
	color: var(--crea-white);
}
.crea-v-hybride .crea-btn--light:hover {
	background: var(--crea-white);
	border-color: var(--crea-white);
	color: var(--crea-navy);
}

.hy-btn--creme {
	background: var(--crea-cream);
	border-color: var(--crea-cream);
	color: var(--hy-brique);
}
.crea-v-hybride .hy-btn--creme:hover {
	background: var(--crea-white);
	border-color: var(--crea-white);
	color: var(--hy-brique-fonce);
}

/* Prix : accent brique partout où ils s'affichent */
.hy-carte__prix,
.crea-v-hybride .crea-card__price,
.crea-v-hybride .crea-product__price { color: var(--hy-brique); }

.crea-v-hybride div.product form.cart .button.single_add_to_cart_button {
	background: var(--hy-brique);
	border-color: var(--hy-brique);
	color: var(--crea-cream);
}
.crea-v-hybride div.product form.cart .button.single_add_to_cart_button:hover {
	background: var(--hy-brique-fonce);
	border-color: var(--hy-brique-fonce);
}
.crea-v-hybride .woocommerce-checkout button#place_order,
.crea-v-hybride .woocommerce a.button,
.crea-v-hybride .woocommerce button.button {
	background: var(--hy-brique);
	border-color: var(--hy-brique);
	color: var(--crea-cream);
}

/* --------------------------------------------------------------------------
   En-tête : logo agrandi et centré, navigation en seconde rangée
   -------------------------------------------------------------------------- */

.hy-annonce { background: var(--crea-navy); }

.crea-v-hybride .crea-header.hy-tete {
	background: var(--crea-cream-100);
	border-bottom: 1px solid var(--crea-rule);
}
/*
 * En surimpression sur le hero, l'en-tête n'est transparent que tant qu'on
 * n'a pas défilé : « :not(.is-stuck) » est indispensable, sinon cette règle
 * l'emporte sur l'état posé et la barre reste transparente alors que le logo
 * et les liens repassent en marine — illisibles sur la photo.
 */
.crea-v-hybride .crea-header.hy-tete--survol:not(.is-stuck) {
	background: transparent;
	border-bottom-color: transparent;
}
.crea-v-hybride .crea-header.hy-tete.is-stuck {
	background: var(--crea-cream-100);
	border-bottom-color: var(--crea-rule);
	box-shadow: var(--crea-shadow-sm);
}

.hy-tete__rangee {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--crea-sp-3);
	min-height: 66px;
}
.hy-tete__cote { display: flex; align-items: center; gap: var(--crea-sp-2); }
.hy-tete__cote--fin { justify-content: flex-end; }

.hy-tete__marque {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	justify-self: center;
	text-align: center;
}
.crea-v-hybride .hy-tete__marque .crea-logo { display: block; }

/* Proportion de l'en-tête : le logo occupe environ 70 % de la hauteur de la
   bande, jamais plus. Au-delà il écrase le bouton et vient toucher le filet
   qui le sépare du menu. Pour l'ajuster, garder ce rapport entre la hauteur
   du logo et le « min-height » de la rangée (46/66, 56/78, 44/60). */
.crea-v-hybride .hy-tete__logo img {
	max-height: 46px;
	/* Rendu net : la source fait 1818 px de large, on ne l'étire jamais. */
	width: auto;
	object-fit: contain;
}

.hy-tete__cta { display: none; }

.hy-tete__nav { display: none; }

@media (min-width: 1000px) {
	.hy-tete__rangee { min-height: 78px; }
	.crea-v-hybride .hy-tete__logo img { max-height: 56px; }
	.hy-tete .crea-burger { display: none; }

	.hy-tete__cta {
		display: inline-flex;
		min-height: 42px;
		padding: .7rem 1.25rem;
		font-size: var(--crea-fs-micro);
	}

	/* Disposition par défaut : logo centré, menu sur une seconde rangée.
	   Le menu vit désormais dans la grille de la rangée, on le replace donc
	   explicitement sur une ligne à lui. */
	.hy-tete__cote                  { grid-column: 1; grid-row: 1; }
	.hy-tete__marque                { grid-column: 2; grid-row: 1; }
	.hy-tete__cote--fin             { grid-column: 3; grid-row: 1; }
	.hy-tete__nav                   { grid-column: 1 / -1; grid-row: 2; }

	.hy-tete__nav { display: block; border-top: 1px solid var(--crea-rule); }
	.crea-header--overlay:not(.is-stuck) .hy-tete__nav { border-top-color: rgba(244, 227, 193, .28); }
	.crea-v-hybride .hy-tete__nav ul { justify-content: center; gap: clamp(1.5rem, 3vw, 3rem); }
	.crea-v-hybride .hy-tete__nav a { padding-block: .55rem; }

	/* Catalogue et fiches produit (demande de la cliente) : tout sur une ligne,
	   logo calé à gauche. La colonne de gauche ne sert plus à équilibrer le
	   centrage, elle rejoint les actions. */
	.woocommerce-shop .hy-tete__rangee,
	.single-product .hy-tete__rangee    { grid-template-columns: auto 1fr auto auto; }

	.woocommerce-shop .hy-tete__marque,
	.single-product .hy-tete__marque    { grid-column: 1; justify-self: start; text-align: left; }

	.woocommerce-shop .hy-tete__nav,
	.single-product .hy-tete__nav       { grid-column: 2; grid-row: 1; border-top: 0; }

	/* La cellule de gauche ne porte plus que le sélecteur de langue sur
	   ordinateur : elle passe à droite, avant le panier. */
	.woocommerce-shop .hy-tete__cote,
	.single-product .hy-tete__cote      { grid-column: 3; grid-row: 1; justify-content: flex-end; }

	.woocommerce-shop .hy-tete__cote--fin,
	.single-product .hy-tete__cote--fin { grid-column: 4; }

	.crea-v-hybride.woocommerce-shop .hy-tete__nav ul,
	.crea-v-hybride.single-product .hy-tete__nav ul { justify-content: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }

	.crea-v-hybride.woocommerce-shop .hy-tete__nav a,
	.crea-v-hybride.single-product .hy-tete__nav a  { padding-block: .35rem; }
	.crea-v-hybride .hy-tete__nav a::after { bottom: -1px; height: 2px; background: var(--hy-brique-vive); }

	.hy-tete.is-stuck .hy-tete__rangee { min-height: 60px; }
	.crea-v-hybride .hy-tete.is-stuck .hy-tete__logo img { max-height: 44px; }
}

/* --------------------------------------------------------------------------
   Hero : photographie pleine largeur, texte posé dessus (version 1)
   -------------------------------------------------------------------------- */

.hy-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 84svh;
	padding-top: var(--crea-header-h);
	overflow: hidden;
	isolation: isolate;
	background: var(--crea-navy-900);
	color: var(--crea-white);
}
@media (min-width: 1000px) { .hy-hero { min-height: 94svh; } }

.hy-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hy-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}
.hy-hero__media .crea-hero__placeholder { height: 100%; }

/* Vidéo de fond : l'affiche reste dessous jusqu'à la première image lue. */
.hy-hero__media picture { display: block; height: 100%; }
.hy-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .8s var(--crea-ease);
}
.hy-hero__video.is-playing { opacity: 1; }

/* Vidéo tournée dans un intérieur blanc : voile plus dense qu'avec la photo,
   sinon la navigation et le sous-titre du logo disparaissent sur le mur. */
.hy-hero--video .hy-hero__voile {
	background: linear-gradient(
		to bottom,
		rgba(0, 28, 64, .8) 0%,
		rgba(0, 28, 64, .42) 22%,
		rgba(0, 28, 64, .46) 45%,
		rgba(0, 28, 64, .84) 74%,
		rgba(0, 28, 64, .94) 100%
	);
}
@media (min-width: 900px) {
	.hy-hero--video .hy-hero__voile {
		background:
			radial-gradient(80% 120% at 0% 66%, rgba(0, 28, 64, .92) 0%, rgba(0, 28, 64, .72) 34%, rgba(0, 28, 64, .36) 60%, rgba(0, 28, 64, 0) 82%),
			linear-gradient(to bottom, rgba(0, 28, 64, .82) 0%, rgba(0, 28, 64, .4) 20%, rgba(0, 28, 64, .2) 46%, rgba(0, 28, 64, .42) 100%);
	}
}
.hy-hero--video .hy-hero__media img,
.hy-hero--video .hy-hero__video { object-position: 50% 30%; }
@media (min-width: 900px) {
	.hy-hero--video .hy-hero__media img,
	.hy-hero--video .hy-hero__video { object-position: 50% 45%; }
}

.hy-hero__pause {
	position: absolute;
	right: var(--crea-gutter);
	bottom: calc(var(--hy-frise-h) + var(--crea-sp-4));
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(244, 227, 193, .55);
	border-radius: 50%;
	background: rgba(0, 28, 64, .45);
	color: var(--crea-cream);
	cursor: pointer;
	transition: background var(--crea-dur) var(--crea-ease), border-color var(--crea-dur) var(--crea-ease);
}
.hy-hero__pause:hover { background: rgba(0, 28, 64, .75); border-color: var(--crea-cream); }
.hy-hero__pause:focus-visible { outline: 2px solid var(--crea-gold); outline-offset: 3px; }
.hy-hero__pause-icone--lecture,
.hy-hero__pause.is-paused .hy-hero__pause-icone--pause { display: none; }
.hy-hero__pause.is-paused .hy-hero__pause-icone--lecture { display: block; }

.hy-hero__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(0, 28, 64, .58) 0%,
		rgba(0, 28, 64, .26) 16%,
		rgba(0, 28, 64, .34) 42%,
		rgba(0, 28, 64, .72) 72%,
		rgba(0, 28, 64, .88) 100%
	);
}
@media (min-width: 900px) {
	.hy-hero__voile {
		background:
			radial-gradient(76% 116% at 0% 62%, rgba(0, 28, 64, .9) 0%, rgba(0, 28, 64, .62) 32%, rgba(0, 28, 64, .28) 56%, rgba(0, 28, 64, 0) 78%),
			linear-gradient(to bottom, rgba(0, 28, 64, .5) 0%, rgba(0, 28, 64, .1) 16%, rgba(0, 28, 64, 0) 34%, rgba(0, 28, 64, .28) 100%);
	}
}

.hy-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(3.5rem, 2rem + 7vw, 7rem);
}
.hy-hero__contenu { max-width: 40rem; }

.hy-hero__surtitre { color: var(--crea-gold); }
.hy-hero__titre,
.hy-hero__chapo,
.hy-hero__surtitre { text-shadow: 0 1px 24px rgba(0, 20, 46, .55), 0 1px 3px rgba(0, 20, 46, .35); }

.hy-hero__titre {
	margin-bottom: var(--crea-sp-5);
	color: var(--crea-white);
	font-size: var(--crea-fs-display);
	line-height: var(--crea-lh-display);
}
.hy-hero__chapo {
	max-width: 34rem;
	margin-bottom: var(--crea-sp-6);
	color: rgba(255, 255, 255, .9);
	font-size: 1.0625rem;
	line-height: 1.7;
}
.hy-hero__actions { display: flex; flex-wrap: wrap; gap: var(--crea-sp-4); }

.hy-hero__frise { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

/* --------------------------------------------------------------------------
   Sections et titres communs
   -------------------------------------------------------------------------- */

.hy-section { padding-block: var(--crea-section-y); }
.hy-section--ecru { background: var(--crea-cream-300); }

.hy-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--crea-sp-4);
	margin-bottom: var(--crea-sp-6);
}
.hy-titre { margin: 0; font-size: var(--crea-fs-h2); }

.hy-lien {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	color: var(--hy-brique);
	font-size: var(--crea-fs-small);
	font-weight: 600;
	text-decoration: none;
}
.hy-lien:hover { color: var(--crea-navy); }
.hy-lien svg { transition: transform var(--crea-dur-fast) var(--crea-ease); }
.hy-lien:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Grille catalogue : trois colonnes dès le mobile (demande cliente, façon
   Instagram), texte minimal
   -------------------------------------------------------------------------- */

.crea-v-hybride ul.products,
.crea-v-hybride .crea-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--crea-sp-5) var(--crea-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.crea-v-hybride ul.products::before,
.crea-v-hybride ul.products::after { content: none; display: none; }
@media (min-width: 720px) {
	.crea-v-hybride ul.products,
	.crea-v-hybride .crea-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--crea-sp-7) var(--crea-sp-5); }
}

.crea-v-hybride ul.products li.hy-carte,
.hy-carte {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

.hy-carte__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--crea-cream-300);
	border-radius: var(--crea-radius);
}
.hy-carte__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--crea-ease), opacity var(--crea-dur) var(--crea-ease);
}
.hy-carte__img--survol { opacity: 0; }
.hy-carte:hover .hy-carte__img { transform: scale(1.04); }
.hy-carte:hover .hy-carte__media--bascule .hy-carte__img--survol { opacity: 1; }

.hy-carte__corps { padding-top: var(--crea-sp-3); }
.hy-carte__titre {
	margin: 0 0 .25rem;
	font-family: var(--crea-font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	/* Deux lignes au plus : les cartes restent alignées sur trois colonnes. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hy-carte__titre a { color: var(--crea-navy); text-decoration: none; }
.hy-carte__titre a:hover { color: var(--hy-brique); }
@media (min-width: 720px) { .hy-carte__titre { font-size: 1rem; } }

.hy-carte__prix { margin: 0; font-size: .8125rem; font-weight: 600; }
@media (min-width: 720px) { .hy-carte__prix { font-size: .95rem; } }
.hy-carte__prix del { margin-right: .35rem; color: var(--crea-text-muted); font-weight: 400; }
.hy-carte__prix ins { text-decoration: none; }


.hy-grille__pied { margin-top: var(--crea-sp-7); text-align: center; }

/* --------------------------------------------------------------------------
   Temps fort : aplat terracotta, image en arche
   -------------------------------------------------------------------------- */

/*
 * Aplat en brique soutenue plutôt qu'en terracotta vif : le texte courant en
 * crème y passe le seuil AA (5,3:1 contre 3,9:1), sans quitter la teinte.
 */
.hy-tempsfort {
	position: relative;
	padding-block: calc(var(--crea-section-y) * .85);
	background: var(--hy-brique);
	color: var(--crea-cream);
}
.hy-tempsfort::before,
.hy-tempsfort::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--hy-frise-h);
	background-image: var(--hy-frise-chevrons);
	background-repeat: repeat-x;
	opacity: .55;
}
.hy-tempsfort::before { top: 0; }
.hy-tempsfort::after { bottom: 0; transform: scaleY(-1); }

.hy-tempsfort__grille {
	display: grid;
	gap: var(--crea-sp-7);
	align-items: center;
}
@media (min-width: 900px) {
	.hy-tempsfort__grille { grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 5vw, 5rem); }
}

.hy-tempsfort .crea-eyebrow { color: var(--crea-gold-200); }
.hy-tempsfort .hy-titre { margin-bottom: var(--crea-sp-4); color: var(--crea-cream); }
.hy-tempsfort p {
	max-width: 32rem;
	margin-bottom: var(--crea-sp-6);
	color: rgba(244, 227, 193, .92);
}
.hy-tempsfort__photo { justify-self: center; width: min(100%, 26rem); background: rgba(0, 28, 64, .18); }

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

.hy-bandeau {
	position: relative;
	padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem) calc(clamp(2.25rem, 1.5rem + 3vw, 4rem) + var(--hy-frise-h));
	background: var(--crea-cream-300);
	text-align: center;
}
.hy-bandeau .hy-frise { position: absolute; left: 0; right: 0; bottom: 0; }
.crea-v-hybride .hy-bandeau .crea-breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }

.hy-bandeau__titre {
	margin: var(--crea-sp-3) 0 0;
	color: var(--crea-navy);
	font-size: var(--crea-fs-h1);
	line-height: 1.05;
}
.hy-bandeau__chapo { max-width: 40rem; margin: var(--crea-sp-4) auto 0; color: var(--crea-text-muted); }

.hy-puces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--crea-sp-2);
	margin-block: var(--crea-sp-6) var(--crea-sp-4);
}
.hy-puce {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 42px;
	padding: .4rem 1.05rem;
	background: var(--crea-cream-050);
	border: 1px solid var(--crea-rule);
	border-radius: 999px;
	color: var(--crea-navy);
	font-size: var(--crea-fs-small);
	text-decoration: none;
	transition: background var(--crea-dur-fast) var(--crea-ease), border-color var(--crea-dur-fast) var(--crea-ease), color var(--crea-dur-fast) var(--crea-ease);
}
.hy-puce:hover { border-color: var(--hy-brique); color: var(--hy-brique); }
.hy-puce span { color: var(--crea-text-muted); font-size: var(--crea-fs-micro); }
.hy-puce.is-active { background: var(--hy-brique); border-color: var(--hy-brique); color: var(--crea-cream); }
.hy-puce.is-active span { color: rgba(244, 227, 193, .82); }

.crea-v-hybride .hy-outils { border-bottom: 1px solid var(--crea-rule); }
.crea-v-hybride .crea-filter-toggle:hover { border-color: var(--hy-brique); color: var(--hy-brique); }
.crea-v-hybride .crea-filter-list a:hover,
.crea-v-hybride .crea-filter-list .is-active > a { color: var(--hy-brique); }

.hy-vide { padding-block: var(--crea-sp-8); }

/* --------------------------------------------------------------------------
   Pages intérieures (gabarits de la version 1, habillés en hybride)
   -------------------------------------------------------------------------- */

/* Trame de fond : le losange à franges du PDF, à la place du losange générique. */
.crea-v-hybride .crea-motif::before { background-image: var(--hy-losange); background-size: 54px 90px; opacity: .07; }
.crea-v-hybride .crea-motif--clair::before { background-image: var(--hy-losange-clair); opacity: .12; }
.crea-v-hybride .crea-motif--discret::before { opacity: .05; }

.crea-v-hybride .crea-page-hero { position: relative; }
.crea-v-hybride .crea-page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--hy-frise-h);
	background-image: var(--hy-frise-chevrons);
	background-repeat: repeat-x;
	opacity: .55;
}
.crea-v-hybride .crea-page-header {
	position: relative;
	background: var(--crea-cream-300);
	border-bottom: 0;
	padding-bottom: calc(var(--crea-sp-6) + var(--hy-frise-h));
}
.crea-v-hybride .crea-page-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--hy-frise-h);
	background-image: var(--hy-frise-arches);
	background-repeat: repeat-x;
	opacity: .55;
}

.crea-v-hybride .crea-section--cream { background: var(--crea-cream-300); }

/* Images mises en avant : arches */
.crea-v-hybride .crea-split__media,
.crea-v-hybride .crea-manifeste__media img,
.crea-v-hybride .crea-manifeste__media .crea-split__placeholder {
	overflow: hidden;
	border-radius: var(--hy-arche);
}
.crea-v-hybride .crea-split__media::after { display: none; }
.crea-v-hybride .crea-manifeste__media::before { display: none; }

/* Bandeau d'appel : promotionnel, donc terracotta */
.crea-v-hybride .crea-cta-band {
	position: relative;
	background: var(--hy-brique);
	color: var(--crea-cream);
}
.crea-v-hybride .crea-cta-band::before,
.crea-v-hybride .crea-cta-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--hy-frise-h);
	background-image: var(--hy-frise-chevrons);
	background-repeat: repeat-x;
	opacity: .55;
}
.crea-v-hybride .crea-cta-band::before { top: 0; }
.crea-v-hybride .crea-cta-band::after { bottom: 0; transform: scaleY(-1); }
.crea-v-hybride .crea-cta-band .crea-eyebrow { color: var(--crea-gold-200); }
.crea-v-hybride .crea-cta-band p { color: rgba(244, 227, 193, .92); }
.crea-v-hybride .crea-cta-band .crea-btn {
	background: var(--crea-cream);
	border-color: var(--crea-cream);
	color: var(--hy-brique);
}
.crea-v-hybride .crea-cta-band .crea-btn:hover {
	background: var(--crea-white);
	border-color: var(--crea-white);
	color: var(--hy-brique-fonce);
}

/* --------------------------------------------------------------------------
   Bande de la charte (PDF de marque, p.16-17) : triangles, chevrons et
   œillet, terracotta puis or, sur fond crème. Posée en haut et en bas des
   sections qui n'ont pas déjà de frise : là où deux fonds clairs se suivent,
   ou pour encadrer une prise de parole de la maison.
   -------------------------------------------------------------------------- */

.crea-v-hybride {
	--hy-bande: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='32' viewBox='0 0 480 48'%3E%3Cdefs%3E%3Cg id='u' fill='currentColor' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 24 45 9V39Z' stroke-width='3'/%3E%3Cpath d='M53 9 90 24 53 39Z' stroke-width='3'/%3E%3Cpath d='M104 13l10 11-10 11M120 13l10 11-10 11M136 13l10 11-10 11' fill='none' stroke-width='6'/%3E%3Ccircle cx='162' cy='24' r='6' fill='none' stroke-width='5'/%3E%3Cpath d='M188 13l-10 11 10 11M204 13l-10 11 10 11M220 13l-10 11 10 11' fill='none' stroke-width='6'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23u' color='%23b45f38'/%3E%3Cuse href='%23u' x='240' color='%23d9a441'/%3E%3C/svg%3E");
	--hy-bande-h: 44px;
}

/*
 * La bande occupe la bordure : le rembourrage de la section ne bouge pas, et
 * la trame .crea-motif (posée sur la boîte de rembourrage) ne la recouvre pas.
 * Préfixe .crea-v-hybride : sans lui, le raccourci « background » de
 * .crea-section--cream (plus haut) effaçait la bande.
 */
.crea-v-hybride .hy-bande,
.crea-v-hybride.home .crea-section--cream.crea-motif--fondu {
	border-block: var(--hy-bande-h) solid transparent;
	background-image:
		var(--hy-bande),
		var(--hy-bande),
		linear-gradient(var(--crea-cream), var(--crea-cream)),
		linear-gradient(var(--crea-cream), var(--crea-cream));
	background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
	background-position: center 6px, center calc(100% - 6px), top, bottom;
	background-size: auto 32px, auto 32px, 100% var(--hy-bande-h), 100% var(--hy-bande-h);
	background-origin: border-box;
}

/*
 * Catalogue : la même bande, tournée d'un quart de tour, court le long des deux
 * bords de la page. Seulement quand l'écran laisse des marges assez larges
 * pour la porter sans toucher la colonne de filtres ni la grille.
 */
.crea-v-hybride {
	--hy-bande-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='320' viewBox='0 0 48 480'%3E%3Cdefs%3E%3Cg id='u' fill='currentColor' stroke='currentColor' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 24 45 9V39Z' stroke-width='3'/%3E%3Cpath d='M53 9 90 24 53 39Z' stroke-width='3'/%3E%3Cpath d='M104 13l10 11-10 11M120 13l10 11-10 11M136 13l10 11-10 11' fill='none' stroke-width='6'/%3E%3Ccircle cx='162' cy='24' r='6' fill='none' stroke-width='5'/%3E%3Cpath d='M188 13l-10 11 10 11M204 13l-10 11 10 11M220 13l-10 11 10 11' fill='none' stroke-width='6'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(48 0) rotate(90)'%3E%3Cuse href='%23u' color='%23b45f38'/%3E%3Cuse href='%23u' x='240' color='%23d9a441'/%3E%3C/g%3E%3C/svg%3E");
}
/*
 * Conteneur de 1320 px : à partir de 1440 px, 64 px au moins séparent la bande
 * du contenu. Posée sur l'enveloppe de la page, pas sur le bloc boutique :
 * la marge au-dessus des familles et le bandeau de réassurance (hors du <main>)
 * laissaient deux trous. Annonce, en-tête, bandeau écru et pied de page ont
 * leur propre fond et la recouvrent ; elle court sans coupure entre les deux.
 * Même bande sur les côtés de la section vidéo « Dans l'atelier » (portfolio),
 * repérée par sa vidéo : le gabarit est partagé avec la version 1.
 */
@media (min-width: 1440px) {
	.crea-v-hybride.post-type-archive-product .crea-site,
	.crea-v-hybride.tax-product_cat .crea-site,
	.crea-v-hybride.tax-product_tag .crea-site,
	.crea-v-hybride .crea-section--cream:has([data-crea-video]) {
		background-image:
			var(--hy-bande-v),
			var(--hy-bande-v),
			linear-gradient(var(--crea-cream), var(--crea-cream)),
			linear-gradient(var(--crea-cream), var(--crea-cream));
		background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
		background-position: 6px top, calc(100% - 6px) top, left top, right top;
		background-size: 32px auto, 32px auto, var(--hy-bande-h) 100%, var(--hy-bande-h) 100%;
	}
}

/* Accueil : le logo crème au-dessus du surtitre du hero */
.hy-hero__logo {
	display: block;
	width: clamp(11rem, 6.5rem + 12vw, 19rem);
	height: auto;
	margin-bottom: var(--crea-sp-5);
	filter: drop-shadow(0 2px 18px rgba(0, 20, 46, .45));
}

/* Portfolio : le logo tient lieu de titre */
.hy-folio-titre { line-height: 0; }
.hy-folio-logo {
	display: block;
	width: clamp(12rem, 6rem + 16vw, 22rem);
	height: auto;
	margin-top: var(--crea-sp-3);
}

/*
 * À propos : en-tête centré sous une arche tracée à l'or, les repères posés
 * sur sa base. Le portfolio garde la mise en page en deux colonnes : les deux
 * pages ne se ressemblent plus.
 */
.hy-apropos-hero { text-align: center; }
.hy-apropos-hero__arche {
	max-width: 48rem;
	margin-inline: auto;
	padding: clamp(4.5rem, 3rem + 5vw, 6.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
	border: 1px solid rgba(217, 164, 65, .5);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
}
.hy-apropos-hero__arche .crea-colonne { margin-bottom: var(--crea-sp-4); }
.hy-apropos-hero h1 { max-width: 14ch; margin-inline: auto; }
.hy-apropos-hero__chapo {
	max-width: 34rem;
	margin: var(--crea-sp-5) auto 0;
	color: rgba(244, 227, 193, .84);
	font-size: 1.0625rem;
	line-height: 1.8;
}
.hy-apropos-hero__reperes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 48rem;
	margin: 0 auto;
	padding: 0;
	border-top: 1px solid rgba(217, 164, 65, .5);
}
.hy-apropos-hero__reperes > div { padding: var(--crea-sp-5) var(--crea-sp-2) 0; }
.hy-apropos-hero__reperes > div + div { border-left: 1px solid rgba(244, 227, 193, .16); }
.hy-apropos-hero__reperes dt {
	color: rgba(244, 227, 193, .62);
	font-size: var(--crea-fs-micro);
	letter-spacing: var(--crea-ls-eyebrow);
	text-transform: uppercase;
}
.hy-apropos-hero__reperes dd {
	margin: .45rem 0 0;
	color: var(--crea-gold);
	font-family: var(--crea-font-display);
	font-size: clamp(1.4rem, 1rem + 1.4vw, 1.85rem);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Carrousels (demande cliente : ceux de la version 2)
   Défilement horizontal natif et aimantation en CSS : le doigt fonctionne
   sans script. crea.js (data-crea-carrousel) ne gère que les flèches, qui
   disparaissent aux extrémités. Accueil (univers) et fiche portfolio.
   -------------------------------------------------------------------------- */

.crea-v-hybride {
	--hy-rayon: 24px;
	--hy-ombre: 0 22px 44px -28px rgba(0, 28, 64, .32);
}

.hy-carrousel { position: relative; }

.hy-carrousel__piste {
	display: grid;
	grid-auto-columns: minmax(15rem, 76%);
	grid-auto-flow: column;
	gap: var(--crea-sp-4);
	margin: 0;
	padding: 0 0 var(--crea-sp-2);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hy-carrousel__piste::-webkit-scrollbar { display: none; }
@media (min-width: 720px)  { .hy-carrousel__piste { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (min-width: 1100px) { .hy-carrousel__piste { grid-auto-columns: calc((100% - 3rem) / 4); } }

.hy-tuile { margin: 0; scroll-snap-align: start; }
.hy-tuile a {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--crea-cream-300);
	border-radius: var(--hy-rayon);
	text-decoration: none;
}
.hy-tuile img,
.hy-tuile .crea-split__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: 50% 18%;
	transition: transform 1s var(--crea-ease);
}
.hy-tuile a::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 28, 64, .74) 0%, rgba(0, 28, 64, .2) 42%, rgba(0, 28, 64, 0) 64%);
}
.hy-tuile a:hover img { transform: scale(1.05); }

.hy-tuile__texte {
	position: absolute;
	left: var(--crea-sp-5);
	right: 4.5rem;
	bottom: var(--crea-sp-5);
	z-index: 1;
}
.hy-tuile__texte strong {
	display: block;
	color: var(--crea-cream);
	font-family: var(--crea-font-display);
	/* Taille bornée : « contemporaine » se coupait en plein mot sur tablette. */
	font-size: clamp(1.2rem, .9rem + .9vw, var(--crea-fs-h3));
	font-weight: 400;
	line-height: 1.15;
	overflow-wrap: normal;
	hyphens: none;
}
.hy-tuile__texte span {
	display: block;
	margin-top: .25rem;
	color: rgba(244, 227, 193, .9);
	font-size: var(--crea-fs-micro);
	letter-spacing: .06em;
}
.hy-tuile__bouton {
	position: absolute;
	right: var(--crea-sp-4);
	bottom: var(--crea-sp-5);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: var(--crea-cream-050);
	border-radius: 50%;
	color: var(--crea-navy);
	transition: transform var(--crea-dur-fast) var(--crea-ease);
}
.hy-tuile a:hover .hy-tuile__bouton { transform: translateX(3px); }

.hy-vue { margin: 0; overflow: hidden; border-radius: var(--hy-rayon); scroll-snap-align: start; }
.hy-vue img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.hy-carrousel__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var(--crea-cream-050);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--hy-ombre);
	color: var(--hy-brique);
	cursor: pointer;
	transform: translateY(-50%);
}
.hy-carrousel__fleche--prec { left: -12px; }
.hy-carrousel__fleche--suiv { right: -12px; }
.hy-carrousel__fleche:hover { background: var(--crea-navy); color: var(--crea-cream); }
.hy-carrousel__fleche:focus-visible { outline: 2px solid var(--crea-gold); outline-offset: 3px; }
.hy-carrousel__fleche[hidden] { display: none; }
@media (max-width: 719px) { .hy-carrousel__fleche { display: none; } }

/* Portfolio : filtres et liens en brique */
.crea-v-hybride .crea-filters a.is-active {
	background: var(--hy-brique);
	border-color: var(--hy-brique);
	color: var(--crea-cream);
}
.crea-v-hybride .crea-link { color: var(--hy-brique); }
.crea-v-hybride .crea-link:hover { color: var(--crea-navy); }
.crea-v-hybride .crea-piece__meta { color: var(--hy-brique); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.hy-pied { position: relative; padding-top: var(--hy-frise-h); }
.hy-pied .hy-frise { position: absolute; left: 0; right: 0; top: 0; }

.crea-v-hybride .hy-pied__logo img { max-height: 96px; }
.hy-pied__bouton { margin-top: var(--crea-sp-4); }
.crea-v-hybride .hy-pied .crea-social a:hover {
	background: var(--hy-brique-vive);
	border-color: var(--hy-brique-vive);
	color: var(--crea-cream);
}

/* Montants insécables : « 6 000 DA » se coupait entre le 6 et les milliers
   dans les colonnes étroites (total du panier, récapitulatif de commande).
   Le séparateur de milliers est une espace ordinaire, que le navigateur peut
   utiliser comme point de retour à la ligne. */
.crea-v-hybride .woocommerce-Price-amount,
.crea-v-hybride .order-total .amount,
.crea-v-hybride .hy-carte__prix,
.crea-v-hybride .price {
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Panier : rendre le retrait d'un article visible
 * ------------------------------------------------------------------
 * Blocksy n'affiche qu'une petite corbeille sans libellé, que les
 * clientes ne repèrent pas. On en fait un bouton pastille avec le mot
 * « Retirer ». Le texte est en dur : le site est monolingue.
 */
.crea-v-hybride .woocommerce-cart-form td.product-remove { width: auto; white-space: nowrap; }

/* Le bloc mobile porte aussi la classe « product-remove » : il doit, lui,
   pouvoir passer à la ligne, sinon quantité + prix + bouton débordent. */
.crea-v-hybride .woocommerce-cart-form .product-mobile-actions.product-remove {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	white-space: normal;
}
.crea-v-hybride .woocommerce-cart-form a.remove { white-space: nowrap; }

.crea-v-hybride .woocommerce-cart-form .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: auto;
	height: auto;
	padding: .5rem .85rem;
	border: 1px solid var(--hy-brique);
	border-radius: 999px;
	background: transparent;
	color: var(--hy-brique-fonce);
	font-size: var(--crea-fs-micro);
	letter-spacing: .04em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}
.crea-v-hybride .woocommerce-cart-form .product-remove a.remove::after { content: "Retirer"; }
.crea-v-hybride .woocommerce-cart-form .product-remove a.remove .ct-icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}
.crea-v-hybride .woocommerce-cart-form .product-remove a.remove:hover,
.crea-v-hybride .woocommerce-cart-form .product-remove a.remove:focus-visible {
	background: var(--hy-brique);
	border-color: var(--hy-brique);
	color: var(--crea-cream);
}

/* Sur mobile, la ligne du panier n'a plus assez de place une fois le bouton
   « Retirer » libellé : la colonne de la vignette tombait à 24 px et l'image
   ne se chargeait plus. On lui réserve sa largeur. */
@media (max-width: 999px) {
	.crea-v-hybride .woocommerce-cart-form .product-thumbnail {
		width: 84px;
		min-width: 84px;
	}
	.crea-v-hybride .woocommerce-cart-form .product-thumbnail img {
		width: 72px;
		height: auto;
	}
	.crea-v-hybride .woocommerce-cart-form .product-mobile-actions.product-remove {
		margin-top: .6rem;
	}
}

/* --------------------------------------------------------------------------
   Horaires de la boutique : un tableau sobre, pas une liste à puces
   -------------------------------------------------------------------------- */

.crea-horaires {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--crea-fs-small, .9rem);
}
.crea-horaires th,
.crea-horaires td {
	padding: .35rem 0;
	text-align: left;
	font-weight: 400;
	vertical-align: top;
	border-bottom: 1px solid var(--crea-rule);
}
.crea-horaires tr:last-child th,
.crea-horaires tr:last-child td { border-bottom: 0; }
.crea-horaires td { text-align: right; white-space: nowrap; color: var(--crea-text); }

/* --------------------------------------------------------------------------
   Sélecteur de langue et lecture de droite à gauche (version 3 seulement)
   -------------------------------------------------------------------------- */

.hy-langues {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid currentColor;
	border-radius: 999px;
	opacity: .85;
}
.hy-langues__choix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	min-height: 26px;
	padding: 0 .45rem;
	border-radius: 999px;
	font-size: .72rem;
	letter-spacing: .06em;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}
.hy-langues__choix.is-active {
	background: var(--hy-brique);
	color: var(--crea-cream);
}
.hy-langues__choix:not(.is-active):hover { text-decoration: underline; }

/* L'alphabet latin de la charte n'a pas de glyphes arabes : sans cette pile,
   le navigateur choisit seul et la page change de couleur typographique. */
.crea-ar,
.crea-ar .crea-btn,
.crea-ar input,
.crea-ar textarea,
.crea-ar select {
	font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic Typesetting", sans-serif;
}
.crea-ar h1,
.crea-ar h2,
.crea-ar h3,
.crea-ar .hy-titre,
.crea-ar .crea-eyebrow {
	font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
	letter-spacing: 0;
}

[dir="rtl"] body,
[dir="rtl"] .crea-page-hero__inner,
[dir="rtl"] .hy-hero__contenu,
[dir="rtl"] .crea-prose { text-align: right; }

[dir="rtl"] ul,
[dir="rtl"] ol { padding-right: 1.2em; padding-left: 0; }

[dir="rtl"] .crea-horaires th,
[dir="rtl"] .crea-horaires td { text-align: right; }
[dir="rtl"] .crea-horaires td { text-align: left; }

/* Les montants et les numéros restent lus de gauche à droite : « 3 800 DA »
   inversé donnerait « DA 008 3 ». */
[dir="rtl"] .woocommerce-Price-amount,
[dir="rtl"] .hy-carte__prix,
[dir="rtl"] .price,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .order-total .amount {
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
}

/* Les flèches des boutons et du carrousel pointent dans le sens de lecture. */
[dir="rtl"] .hy-lien svg,
[dir="rtl"] .crea-btn svg,
[dir="rtl"] .hy-tuile__bouton svg { transform: scaleX(-1); }

/* Bandeau d'annonce un peu plus bas, en version 3 seulement : l'en-tête ayant
   été resserré, la barre marine paraissait épaisse au-dessus de lui.
   La feuille partagée layout.css n'est pas touchée : les versions 1 et 2
   gardent leur bandeau. */
.crea-v-hybride .crea-topbar p { padding-block: .45rem; }