/*
Theme Name: Ozé La Sauce
Theme URI: https://www.ozelasauce.fr
Author: BM Services
Author URI: https://www.bm-services.com
Description: Thème FSE du site Ozé, recréé depuis Wix. Construit sur la base interne BMS FSE (blocs, conventions, habillage du menu), dont il conserve les 20 blocs personnalisés, et complété par le calage au pixel de la page d'accueil relevé sur la production.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oze-lasauce
Tags: full-site-editing, block-theme
*/

/* Base : thème interne BMS FSE. Ses surcharges génériques (menu mobile) sont
   dans bms-custom.css, chargé avant cette feuille. Tout ce qui suit est le
   calage de la page d'accueil sur la production. */


/* ==========================================================================
   Repères du gabarit d'origine (relevés sur www.ozelasauce.fr à 1440px)

   Conteneur de contenu ....... 980px centrés (bords à x=230 et x=1210)
   Hauteurs de section ........ hero 638 · tomates 850 · audace 931
                                filière 257 · italie 541 · citation 241
                                instagram 806   (total 4264px)
   Polices .................... titres : Realce Black · texte : Reenie Beanie
   ========================================================================== */

:root {
	--oze-container: 980px;
	--oze-gutter: calc((100% - var(--oze-container)) / 2);
}

/* --------------------------------------------------------------------------
   Réglages de base
   -------------------------------------------------------------------------- */

body {
	overflow-x: hidden;
}

/* Le gabarit d'origine juxtapose les sections sans espacement : on neutralise
   les marges verticales que WordPress ajoute par défaut entre les blocs. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.oze-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Scène de 980px centrée, sur laquelle les éléments sont positionnés aux
   coordonnées relevées sur le site d'origine. */
.oze-stage {
	position: relative;
	width: var(--oze-container);
	margin: 0 auto;
	height: 100%;
}

.oze-stage__item {
	position: absolute;
	margin: 0;
}

/* Réinitialise les marges des blocs WordPress placés sur la scène. */
.oze-stage p,
.oze-stage h1,
.oze-stage h2,
.oze-stage h3,
.oze-stage figure {
	margin: 0;
}

.oze-hand {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
}

.oze-display {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Hero — « Du caractère dans vos assiettes »
   Image plein cadre 1440x638, sans voile assombrissant (contrairement à la
   première version du thème, le site d'origine n'en applique aucun).
   -------------------------------------------------------------------------- */

.oze-hero.wp-block-cover {
	min-height: 638px;
	padding: 0;
	align-items: flex-start;
	justify-content: center;
}

.oze-hero .wp-block-cover__background {
	display: none; /* pas de voile : l'image d'origine est déjà contrastée */
}

.oze-hero .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center center;
}

/* Le conteneur interne du bloc « cover ».
 *
 * Deux contraintes se croisent ici :
 *   · il doit rester `position: relative` — c'est ce qui place le contenu
 *     au-dessus de la photo de fond ; le passer en `static` fait disparaître
 *     le logo et les titres derrière l'image ;
 *   · le bandeau défilant vit à l'intérieur (seul endroit où le bloc accepte
 *     ses enfants) et se cale sur le bas du hero, il faut donc que ce
 *     conteneur occupe toute la hauteur de la section.
 *
 * `align-self: stretch` répond aux deux : le conteneur garde son empilement et
 * remplit le hero, si bien que le `bottom` du bandeau vise le bon bord.
 * La largeur est reprise explicitement car WordPress la passe à `auto` en
 * présence de la classe `has-custom-content-position`.
 */
.oze-hero.wp-block-cover .wp-block-cover__inner-container,
.oze-hero.wp-block-cover.has-custom-content-position .wp-block-cover__inner-container {
	position: relative;
	align-self: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.oze-hero__logo.wp-block-image {
	display: block;
	margin: 28px auto 0;
	width: 78px;
}

.oze-hero__logo img {
	width: 78px;
	height: 63px;
	display: block;
}

.oze-hero__title {
	margin: 20px 0 0;
	font-size: 43px;
	line-height: 34.4px;
	color: #ffffff;
}

.oze-hero__subtitle {
	margin: 14px 0 0;
	font-size: 36px;
	line-height: 32.4px;
	color: #ffffff;
}

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

   Reprise à l'identique du site d'origine : fondu d'opacité seul (aucun
   déplacement), 1200ms, courbe cubic-bezier(0.445, 0.05, 0.55, 0.95), joué
   une seule fois. Seuls les textes sont concernés — les images, les pots et
   les polaroids apparaissent sans effet, comme à l'origine.

   Le masquage est conditionné à la classe `oze-js` posée sur <html> : sans
   JavaScript, rien n'est masqué. Pour animer un bloc ajouté depuis l'éditeur,
   il suffit de lui donner la classe CSS additionnelle `oze-reveal`.
   -------------------------------------------------------------------------- */

@keyframes oze-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.oze-js .oze-reveal {
	opacity: 0;
}

.oze-js .oze-reveal.is-revealed {
	animation: oze-fade-in 1200ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}

/* Une fois le fondu terminé, l'animation est retirée. Sans ça, le navigateur
   garde l'élément sur une couche de composition et rend le texte en
   anticrénelage niveaux de gris : il paraît flou, surtout sur écran non
   retina. Le site d'origine retire lui aussi son animation une fois jouée. */
.oze-js .oze-reveal.is-done {
	opacity: 1;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.oze-js .oze-reveal {
		opacity: 1;
	}

	.oze-js .oze-reveal.is-revealed,
	.oze-js .oze-reveal.is-done {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Bandeaux défilants (marquee)
   -------------------------------------------------------------------------- */

.oze-ticker {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

/* Les répétitions sont des paragraphes : on annule leurs marges, sans quoi
   le défilement se décalerait à chaque boucle. */
.oze-ticker__item {
	margin: 0;
}

.oze-ticker__track {
	display: inline-block;
	white-space: nowrap;
	font-size: 0;
	/* Déplacement et durée sont posés par assets/js/ticker.js, qui mesure la
	   longueur réelle du motif pour que les trois bandeaux avancent à la même
	   vitesse et ne laissent jamais de vide, quelle que soit la largeur de la
	   fenêtre. Les valeurs de repli reproduisent le comportement sans
	   JavaScript : une demi-piste en 30s, calée pour 1440px. */
	animation: oze-ticker-scroll var(--oze-ticker-duration, 30s) linear infinite;
}

.oze-ticker__track > span,
.oze-ticker__track > .oze-ticker__item {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
}

/* Puce ronde rouge entre deux répétitions, comme sur le site d'origine. */
.oze-ticker__track > span::after,
.oze-ticker__track > .oze-ticker__item::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
	background: #ff0000;
}

@keyframes oze-ticker-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-1 * var(--oze-ticker-shift, 50%))); }
}

/* Sens inverse, pour la deuxième ligne de la citation. */
.oze-ticker--reverse .oze-ticker__track {
	animation-name: oze-ticker-scroll-reverse;
}

@keyframes oze-ticker-scroll-reverse {
	0% { transform: translateX(calc(-1 * var(--oze-ticker-shift, 50%))); }
	100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.oze-ticker__track {
		animation: none;
	}
}

/* Bandeau « En exclu chez Monoprix », posé en bas du hero. */
.oze-ticker--hero {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	z-index: 2;
}

.oze-ticker--hero .oze-ticker__track { margin-left: -2px; }

.oze-ticker--hero .oze-ticker__track > span,
.oze-ticker--hero .oze-ticker__track > .oze-ticker__item {
	font-size: 25px;
	line-height: 30px;
	color: #fefaf0;
	padding-right: 12px;
}

.oze-ticker--hero .oze-ticker__track > span::after,
.oze-ticker--hero .oze-ticker__track > .oze-ticker__item::after {
	width: 10px;
	height: 10px;
	margin-left: 12px;
}

/* --------------------------------------------------------------------------
   Section « 9 tomates d'industrie sur 10 sont importées »
   -------------------------------------------------------------------------- */

.oze-tomates {
	background-color: var(--wp--preset--color--sand);
	height: 850px;
}

/* Les annotations manuscrites sont légèrement inclinées sur le site
   d'origine (de -3,2° à -5,7°). L'inclinaison élargit leur boîte englobante :
   les largeurs ci-dessous sont les largeurs réelles, avant rotation, et les
   positions visent le centre relevé sur la production. */
.oze-tomates__intro {
	position: absolute;
	top: 44px;
	left: 191px;
	width: 630px;
	text-align: center;
	font-size: 36px;
	line-height: 28.8px;
	transform: rotate(-3.23deg);
	color: var(--wp--preset--color--maroon);
}

.oze-tomates__title {
	position: absolute;
	top: 127px;
	left: 50px;
	right: 0;
	text-align: center;
	font-size: 94px;
	line-height: 81px;
	color: #000000;
}

/* La grappe de tomates est inclinée sur le site d'origine : l'image mesure
   709x365 et subit une rotation de -24,73°, ce qui donne la boîte englobante
   de 797x628 que l'on mesure sur la page. */
.oze-tomates__photo {
	position: absolute;
	top: 349px;
	left: 124px;
	width: 709px;
	height: 365px;
	transform: rotate(-24.73deg);
}

.oze-tomates__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Les deux annotations manuscrites qui encadrent la grappe de tomates. */
.oze-tomates__note {
	position: absolute;
	font-size: 36px;
	line-height: 28.8px;
	color: var(--wp--preset--color--maroon);
}

.oze-tomates__note--left {
	top: 332px;
	left: 67px;
	width: 340px;
	line-height: 32.5px;
	text-align: center;
	transform: rotate(-4.08deg);
}

.oze-tomates__note--right {
	line-height: 34.3px;
	top: 606px;
	left: 594px;
	width: 300px;
	text-align: center;
	transform: rotate(-5.7deg);
}

/* Flèche « défiler vers le bas » : elle est couchée dans le fichier source et
   redressée par une rotation, comme sur le site d'origine. */
.oze-tomates__arrow {
	position: absolute;
	top: 749px;
	left: 481px;
	width: 57px;
	height: 35px;
	transform: rotate(73.82deg);
}

.oze-tomates__arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
   Section « L'audace, ça se cultive »
   -------------------------------------------------------------------------- */

.oze-audace {
	background-color: var(--wp--preset--color--maroon);
	color: #ffffff;
	height: 931px;
}

.oze-audace__title {
	position: absolute;
	top: 31px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 95px;
	line-height: 104.5px;
	color: #ffffff;
}

.oze-audace__intro {
	position: absolute;
	top: 137px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 36px;
	line-height: 39.6px;
	color: #ffffff;
}

/* Les deux mentions cerclées d'un trait rouge tracé à la main. Les deux
   cercles réutilisent le même tracé, celui de droite étant retourné à 180°
   comme sur le site d'origine. */
.oze-badge {
	position: absolute;
}

.oze-badge--left  { top: 253px; left: 28px;  width: 337px; height: 125px; }
.oze-badge--right { top: 245px; left: 596px; width: 383px; height: 142px; }

/* Le cercle est un bloc « image » : la classe porte sur la <figure>, l'image
   est à l'intérieur. On dimensionne les deux, pour rester valable quelle que
   soit la forme du balisage. */
.oze-badge__circle {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0;
}

.oze-badge__circle img {
	width: 100%;
	height: 100%;
	display: block;
}

.oze-badge--right .oze-badge__circle {
	transform: rotate(180deg);
}

.oze-badge p {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0;
	text-align: center;
	font-size: 32px;
	line-height: 41.6px;
	color: #ffffff;
}

.oze-badge--left p  { top: 25px; left: 9px; }
.oze-badge--right p { top: 33px; left: 16px; }

/* Pastille Nutri-Score, légèrement inclinée. */
.oze-nutriscore {
	position: absolute;
	top: 285px;
	left: 416px;
	width: 143px;
	height: 75px;
	transform: rotate(-7.47deg);
}

.oze-nutriscore img {
	width: 100%;
	height: auto;
	display: block;
}

/* Les trois pots. Le pot du milieu est légèrement plus bas, comme à l'origine. */
.oze-pot {
	position: absolute;
}

.oze-pot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Les pots latéraux sont inclinés sur le site d'origine ; seul celui du
   milieu est droit. Les largeurs sont celles d'avant rotation. */
.oze-pot--ail      { top: 414px; left: 17px;  width: 279px; transform: rotate(-6.86deg); }
.oze-pot--parmesan { top: 433px; left: 351px; width: 277px; }
.oze-pot--citron   { top: 426px; left: 681px; width: 269px; transform: rotate(13.14deg); }

.oze-pot__label {
	position: absolute;
	top: 764px;
	font-size: 40px;
	line-height: 34px;
	text-align: center;
}

.oze-pot__label--ail      { left: 58px;  width: 205px; color: var(--wp--preset--color--ail); }
.oze-pot__label--parmesan { left: 336px; width: 308px; color: var(--wp--preset--color--parmesan); }
.oze-pot__label--citron   { left: 664px; width: 250px; color: var(--wp--preset--color--citron); }

/* --------------------------------------------------------------------------
   Section « Acheter local c'est bien, reconstruire la filière c'est mieux »
   -------------------------------------------------------------------------- */

.oze-filiere {
	background-color: var(--wp--preset--color--sand);
	height: 257px;
}

.oze-filiere__title {
	position: absolute;
	top: 25px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 40px;
	line-height: 40px;
	color: var(--wp--preset--color--maroon);
}

.oze-filiere__text {
	position: absolute;
	top: 123px;
	left: 184px;
	width: 613px;
	text-align: center;
	font-size: 30px;
	line-height: 33px;
	color: var(--wp--preset--color--maroon);
}

/* --------------------------------------------------------------------------
   Section « Désolé l'Italie, on reprend la main »
   -------------------------------------------------------------------------- */

.oze-italie {
	background-color: var(--wp--preset--color--maroon);
	color: #ffffff;
	height: 541px;
}

/* Le titre tient sur trois lignes à l'origine, réparties sur deux blocs de
   largeurs différentes : le second est assez étroit pour que « ON REPREND LA
   MAIN » se coupe après « REPREND ». */
.oze-italie__title,
.oze-italie__title2 {
	position: absolute;
	left: 0;
	font-size: 90px;
	line-height: 77.5px;
	color: #ffffff;
}

.oze-italie__title  { top: 86px;  width: 460px; }
.oze-italie__title2 { top: 163px; width: 359px; }

/* Paragraphe centré, qui se répartit naturellement sur trois lignes. */
.oze-italie__text {
	position: absolute;
	top: 331px;
	left: 40px;
	width: 414px;
	text-align: center;
	font-size: 36px;
	line-height: 32.4px;
	transform: rotate(-4.08deg);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Bandeau citation « Une bonne dose d'Ozé bien dosée, c'est osé. »
   -------------------------------------------------------------------------- */

.oze-citation {
	background-color: var(--wp--preset--color--sand);
	height: 241px;
	padding-top: 40px;
}

.oze-citation .oze-ticker + .oze-ticker {
	margin-top: 13px;
}

/* Pas de décalage sur la ligne inverse : la corrélation croisée de la bande
   (y 3340-3415) avec la production donne un écart optimal de 0px. Le
   `margin-left: -3px` qui figurait ici décalait le texte de 3px vers la
   gauche et faisait à lui seul 20 % d'écart sur cette bande. */

.oze-citation .oze-ticker__track > span,
.oze-citation .oze-ticker__track > .oze-ticker__item {
	font-size: 60px;
	line-height: 72px;
	color: var(--wp--preset--color--maroon);
	padding-right: 18px;
}

.oze-citation .oze-ticker__track > span::after,
.oze-citation .oze-ticker__track > .oze-ticker__item::after {
	width: 12px;
	height: 12px;
	margin-left: 30px;
}

/* --------------------------------------------------------------------------
   Galerie Instagram
   -------------------------------------------------------------------------- */

.oze-insta {
	background-color: var(--wp--preset--color--maroon);
	color: #ffffff;
	height: 806px;
}

.oze-insta__handle {
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 40px;
	line-height: 44px;
	color: #ffffff;
}

/* La galerie déborde du conteneur de 980px : on la positionne par rapport à
   la section entière, pas à la scène centrée. */
.oze-insta__gallery {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1440px;
	height: 806px;
	pointer-events: none;
}

.oze-insta__gallery .oze-polaroid {
	pointer-events: auto;
}

.oze-insta__social {
	position: absolute;
	bottom: 56px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

/* Les icônes et le logo sont des blocs « image » : la <figure> enveloppe le
   lien et l'image. On neutralise ses marges pour que l'espacement de la
   rangée reste celui relevé sur la production. */
.oze-insta__social figure {
	margin: 0;
	line-height: 0;
}

.oze-insta__social a {
	display: block;
	line-height: 0;
}

.oze-insta__social img {
	width: 39px;
	height: 39px;
	display: block;
}

/* Sélecteur volontairement aussi spécifique que celui ci-dessus : sinon le
   logo se retrouve écrasé à la taille des icônes de réseaux sociaux. */
.oze-insta__social .oze-insta__logo,
.oze-insta__social .oze-insta__logo img {
	width: 96px;
	height: 78px;
	display: block;
}

/* --------------------------------------------------------------------------
   Polaroids (galerie + section Italie)

   Attention : le cadre blanc ET le ruban adhésif font déjà partie des PNG
   fournis (fond transparent). Il ne faut donc surtout pas en redessiner en
   CSS, sous peine d'obtenir un double encadrement. On se contente de poser
   l'image à la bonne taille, au bon endroit, avec la bonne rotation.

   Les tailles ci-dessous sont les dimensions avant rotation, recalculées à
   partir des boîtes englobantes relevées sur le site d'origine (une rotation
   élargit la boîte englobante : 366x498 à 5,74° correspond à 321x468 réels).
   -------------------------------------------------------------------------- */

.oze-polaroid {
	position: absolute;
	margin: 0;
}

.oze-polaroid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.oze-polaroid--1 { top: 194px; left: 52px;   width: 321px; height: 468px; transform: rotate(5.74deg); }
.oze-polaroid--2 { top: 112px; left: 296px;  width: 310px; height: 453px; transform: rotate(-7.48deg); }
.oze-polaroid--3 { top: 179px; left: 545px;  width: 349px; height: 510px; transform: none; }
.oze-polaroid--4 { top: 104px; left: 848px;  width: 300px; height: 487px; transform: rotate(-4.01deg); }
.oze-polaroid--5 { top: 238px; left: 1096px; width: 310px; height: 453px; transform: rotate(-7.48deg); }

/* Polaroid de la section « Désolé l'Italie » : il déborde volontairement sur
   la section claire du dessus. */
.oze-italie__photo.oze-polaroid {
	top: 0;
	left: 546px;
	width: 375px;
	height: 548px;
	transform: rotate(-7.78deg);
	z-index: 3;
}

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

.oze-footer {
	background-color: var(--wp--preset--color--maroon);
	color: #ffffff;
	text-align: center;
	padding: 0 0 30px;
	font-family: var(--wp--preset--font-family--system);
	font-size: 13px;
	line-height: 1.6;
}

.oze-footer a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.oze-footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Hero : un cadrage par gabarit

   La production ne redimensionne pas sa photo, elle la **recadre** selon la
   largeur (le hero est pleine largeur mais de hauteur fixe, son rapport varie
   donc). Un recadrage fait par le navigateur à partir du fichier 1440 ne donne
   pas le même cadrage qu'un recadrage serveur à 980 : sans ce fichier dédié,
   la tablette affiche 5,9 % d'écart, dont la quasi-totalité sur le hero.

   Sous 1440px, on sert donc le cadrage 980 — celui que la production envoie
   aux tablettes, et celui vers lequel tend la fenêtre de bureau étroite.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1439px) {
	.oze-hero.wp-block-cover {
		background-image: url("assets/images/oze-hero-980.webp");
		background-image: image-set(
			url("assets/images/oze-hero-980.webp") 1x,
			url("assets/images/oze-hero-980@2x.webp") 2x
		);
		background-size: cover;
		background-position: center center;
	}

	.oze-hero .wp-block-cover__image-background {
		display: none;
	}
}

/* ==========================================================================
   TABLETTE ET MOBILE

   Le site d'origine ne se réadapte pas : il sert deux gabarits distincts,
   choisis d'après le user-agent et non d'après la largeur de la fenêtre.

     · Téléphones — <meta name="viewport" content="width=320"> : un gabarit
       mobile dédié, dessiné pour 320px, que le téléphone agrandit pour
       remplir l'écran (x1,22 sur un écran de 390px).
     · Tablettes  — <meta name="viewport" content="width=980"> : le gabarit
       desktop, simplement réduit. Il n'existe aucun design tablette.

   Le thème reproduit ces deux gabarits, mais sans figer la fenêtre : le
   mobile est mis à l’échelle en CSS via --oze-u, ce qui garde un texte
   sélectionnable et une page zoomable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablette (768px - 979px) : le gabarit desktop, réduit pour tenir dans la
   largeur, exactement comme la production (qui sert aux tablettes un
   <meta name="viewport" content="width=980">).

   La réduction se fait par paliers plutôt que par un calcul : `zoom` attend un
   nombre, et CSS ne sait pas dériver un nombre d'une largeur de fenêtre
   (`calc(100vw / 980px)` n'est pas supporté). Chaque palier est arrondi à la
   baisse pour que la scène de 980px tienne toujours, sans débordement.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 779px) { .wp-site-blocks { zoom: 0.78; } }
@media (min-width: 780px) and (max-width: 799px) { .wp-site-blocks { zoom: 0.79; } }
@media (min-width: 800px) and (max-width: 819px) { .wp-site-blocks { zoom: 0.81; } }
@media (min-width: 820px) and (max-width: 839px) { .wp-site-blocks { zoom: 0.83; } }
@media (min-width: 840px) and (max-width: 859px) { .wp-site-blocks { zoom: 0.85; } }
@media (min-width: 860px) and (max-width: 879px) { .wp-site-blocks { zoom: 0.87; } }
@media (min-width: 880px) and (max-width: 899px) { .wp-site-blocks { zoom: 0.89; } }
@media (min-width: 900px) and (max-width: 919px) { .wp-site-blocks { zoom: 0.91; } }
@media (min-width: 920px) and (max-width: 939px) { .wp-site-blocks { zoom: 0.93; } }
@media (min-width: 940px) and (max-width: 959px) { .wp-site-blocks { zoom: 0.95; } }
@media (min-width: 960px) and (max-width: 979px) { .wp-site-blocks { zoom: 0.97; } }

/* --------------------------------------------------------------------------
   Mobile (moins de 768px) : le gabarit mobile du site d'origine.

   Toutes les valeurs ci-dessous sont celles relevées sur la production à
   320px de large, exprimées en --oze-u. Sur un écran de 320px le rendu
   est identique au pixel ; au-delà, il grandit proportionnellement, comme le
   fait le téléphone sur le site d'origine.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		/* Unité de conception : un « pixel » du gabarit mobile de 320px.
		   Vaut 1px sur un écran de 320px, 1,22px sur un écran de 390px, comme
		   le fait le téléphone sur le site d'origine. Plafonnée à 480px de
		   large pour rester lisible sur les grands téléphones.

		   On multiplie une longueur par un nombre (et non l'inverse) : c'est
		   la seule forme de calcul d'échelle valide et fiable en CSS. */
		--oze-u: calc(min(100vw, 480px) / 320);
	}

	.oze-section {
		height: auto;
		padding: 0;
	}

	.oze-stage {
		width: calc(320 * var(--oze-u));
		max-width: 100%;
		height: 100%;
		padding: 0;
	}

	/* ---- Hero ---- */

	/* Le hero mobile n'est pas une réduction du desktop mais un autre cadrage
	   (portrait) de la même photo. On échange donc l'image du bloc « cover »
	   contre le fichier dédié, en arrière-plan pour éviter de toucher au
	   balisage enregistré de la page. */
	.oze-hero.wp-block-cover {
		/* !important : le bloc « cover » écrit sa hauteur en style en ligne
		   (min-height:638px), ce qui l'emporterait sur la feuille de style. */
		min-height: calc(467 * var(--oze-u)) !important;
		background-image: url("assets/images/oze-hero-mobile.webp");
		background-image: image-set(
			url("assets/images/oze-hero-mobile.webp") 1x,
			url("assets/images/oze-hero-mobile@2x.webp") 2x
		);
		background-size: cover;
		background-position: center center;
	}

	.oze-hero .wp-block-cover__image-background {
		display: none;
	}

	.oze-hero__logo.wp-block-image {
		margin-top: calc(19 * var(--oze-u));
		width: calc(55 * var(--oze-u));
	}

	.oze-hero__logo img {
		width: calc(55 * var(--oze-u));
		height: calc(45 * var(--oze-u));
	}

	.oze-hero__title {
		margin-top: calc(9 * var(--oze-u));
		width: calc(229 * var(--oze-u));
		margin-left: auto;
		margin-right: auto;
		font-size: calc(28 * var(--oze-u));
		line-height: calc(24.9 * var(--oze-u));
	}

	.oze-hero__subtitle {
		margin-top: calc(7 * var(--oze-u));
		font-size: calc(20 * var(--oze-u));
		line-height: calc(18 * var(--oze-u));
	}

	.oze-ticker--hero {
		bottom: calc(12 * var(--oze-u));
	}

	.oze-ticker--hero .oze-ticker__track > span,
.oze-ticker--hero .oze-ticker__track > .oze-ticker__item {
		font-size: calc(25 * var(--oze-u));
		line-height: calc(30 * var(--oze-u));
		padding-right: calc(12 * var(--oze-u));
	}

	.oze-ticker--hero .oze-ticker__track > span::after,
.oze-ticker--hero .oze-ticker__track > .oze-ticker__item::after {
		width: calc(10 * var(--oze-u));
		height: calc(10 * var(--oze-u));
		margin-left: calc(12 * var(--oze-u));
	}

	/* ---- Section « 9 tomates » ---- */

	.oze-tomates { height: calc(746 * var(--oze-u)); }

	/* Les annotations manuscrites sont inclinées sur mobile comme sur desktop,
	   aux mêmes angles. Les largeurs sont celles d'avant rotation. */
	.oze-tomates__intro {
		top: calc(27 * var(--oze-u));
		left: calc(46 * var(--oze-u));
		right: auto;
		width: calc(226 * var(--oze-u));
		font-size: calc(23 * var(--oze-u));
		line-height: calc(20.2 * var(--oze-u));
	}

	.oze-tomates__title {
		top: calc(99 * var(--oze-u));
		left: calc(45 * var(--oze-u));
		right: auto;
		width: calc(230 * var(--oze-u));
		font-size: calc(57 * var(--oze-u));
		line-height: calc(48.8 * var(--oze-u));
		top: calc(104 * var(--oze-u));
	}

	.oze-tomates__note {
		font-size: calc(23 * var(--oze-u));
	}

	.oze-tomates__note--left {
		top: calc(315 * var(--oze-u));
		left: calc(23 * var(--oze-u));
		width: calc(274 * var(--oze-u));
		line-height: calc(20.2 * var(--oze-u));
	}

	.oze-tomates__note--right {
		top: calc(598 * var(--oze-u));
		left: calc(8 * var(--oze-u));
		width: calc(304 * var(--oze-u));
		line-height: calc(22.7 * var(--oze-u));
	}

	.oze-tomates__photo {
		top: calc(410 * var(--oze-u));
		left: calc(12 * var(--oze-u));
		width: calc(308 * var(--oze-u));
		height: calc(157 * var(--oze-u));
	}

	.oze-tomates__arrow {
		top: calc(681 * var(--oze-u));
		left: calc(136 * var(--oze-u));
		width: calc(48 * var(--oze-u));
		height: calc(30 * var(--oze-u));
	}

	/* ---- Section « L'audace » ---- */

	.oze-audace { height: calc(1458 * var(--oze-u)); }

	.oze-audace__title {
		top: calc(49 * var(--oze-u));
		left: calc(41 * var(--oze-u));
		right: auto;
		width: calc(238 * var(--oze-u));
		font-size: calc(57 * var(--oze-u));
		line-height: calc(64.5 * var(--oze-u));
	}

	.oze-audace__intro {
		top: calc(190 * var(--oze-u));
		left: calc(21 * var(--oze-u));
		right: auto;
		width: calc(278 * var(--oze-u));
		font-size: calc(19 * var(--oze-u));
		line-height: calc(24 * var(--oze-u));
	}

	/* Les deux mentions cerclées passent l'une sous l'autre. */
	.oze-badge--left {
		top: calc(275 * var(--oze-u));
		left: calc(44 * var(--oze-u));
		width: calc(230 * var(--oze-u));
		height: calc(85 * var(--oze-u));
	}

	.oze-badge--right {
		top: calc(377 * var(--oze-u));
		left: calc(40 * var(--oze-u));
		width: calc(240 * var(--oze-u));
		height: calc(89 * var(--oze-u));
	}

	.oze-badge p {
		font-size: calc(21 * var(--oze-u));
		line-height: calc(28 * var(--oze-u));
	}

	.oze-badge--left p  { top: calc(15 * var(--oze-u)); left: 0; }
	.oze-badge--right p { top: calc(17 * var(--oze-u)); left: 0; }

	.oze-nutriscore {
		top: calc(487 * var(--oze-u));
		left: calc(105 * var(--oze-u));
		width: calc(109 * var(--oze-u));
		height: calc(57 * var(--oze-u));
	}

	/* Les trois pots s'empilent, chacun suivi de sa légende. */
	.oze-pot--ail {
		top: calc(573 * var(--oze-u));
		left: calc(63 * var(--oze-u));
		width: calc(193 * var(--oze-u));
	}

	.oze-pot--parmesan {
		top: calc(863 * var(--oze-u));
		left: calc(64 * var(--oze-u));
		width: calc(192 * var(--oze-u));
	}

	.oze-pot--citron {
		top: calc(1148 * var(--oze-u));
		left: calc(69 * var(--oze-u));
		width: calc(180 * var(--oze-u));
	}

	.oze-pot__label {
		left: 0;
		width: calc(320 * var(--oze-u));
		font-size: calc(33 * var(--oze-u));
		line-height: calc(29 * var(--oze-u));
	}

	.oze-pot__label--ail      { top: calc(779 * var(--oze-u)); }
	.oze-pot__label--parmesan { top: calc(1070 * var(--oze-u)); }
	.oze-pot__label--citron   {
		top: calc(1359 * var(--oze-u));
		font-size: calc(36 * var(--oze-u));
		line-height: calc(31 * var(--oze-u));
	}

	/* ---- Section « Filière » ---- */

	.oze-filiere { height: calc(346 * var(--oze-u)); }

	.oze-filiere__title {
		top: calc(22 * var(--oze-u));
		left: calc(30 * var(--oze-u));
		right: auto;
		width: calc(260 * var(--oze-u));
		font-size: calc(38 * var(--oze-u));
		line-height: calc(39.6 * var(--oze-u));
	}

	/* Le retour à la ligne forcé sert au gabarit desktop (deux lignes) ; sur
	   mobile le titre se répartit naturellement sur quatre lignes. */
	.oze-filiere__title br {
		display: none;
	}

	.oze-filiere__text {
		top: calc(193 * var(--oze-u));
		left: calc(21 * var(--oze-u));
		width: calc(280 * var(--oze-u));
		font-size: calc(22 * var(--oze-u));
		line-height: calc(27.2 * var(--oze-u));
		margin-top: calc(-2 * var(--oze-u));
	}

	/* ---- Section « Désolé l'Italie » ---- */

	.oze-italie { height: calc(577 * var(--oze-u)); }

	.oze-italie__title,
	.oze-italie__title2 {
		font-size: calc(57 * var(--oze-u));
		line-height: calc(46.6 * var(--oze-u));
	}

	.oze-italie__title {
		top: calc(13 * var(--oze-u));
		left: calc(22 * var(--oze-u));
		width: calc(277 * var(--oze-u));
	}

	.oze-italie__title2 {
		top: calc(61 * var(--oze-u));
		left: calc(46 * var(--oze-u));
		width: calc(228 * var(--oze-u));
		/* Centré sur mobile, aligné à gauche sur desktop, comme à l'origine. */
		text-align: center;
	}

	.oze-italie__text {
		top: calc(480 * var(--oze-u));
		left: calc(23 * var(--oze-u));
		width: calc(272 * var(--oze-u));
		font-size: calc(23 * var(--oze-u));
		line-height: calc(22.7 * var(--oze-u));
	}

	.oze-italie__photo.oze-polaroid {
		top: calc(151 * var(--oze-u));
		left: calc(48 * var(--oze-u));
		width: calc(230 * var(--oze-u));
		height: calc(336 * var(--oze-u));
	}

	/* ---- Bandeau citation ---- */

	.oze-citation {
		height: calc(171 * var(--oze-u));
		padding-top: calc(36 * var(--oze-u));
	}

	.oze-citation .oze-ticker + .oze-ticker {
		margin-top: calc(10 * var(--oze-u));
	}

	.oze-citation .oze-ticker__track > span,
.oze-citation .oze-ticker__track > .oze-ticker__item {
		font-size: calc(37 * var(--oze-u));
		line-height: calc(44.4 * var(--oze-u));
		padding-right: calc(11 * var(--oze-u));
	}

	.oze-citation .oze-ticker__track > span::after,
.oze-citation .oze-ticker__track > .oze-ticker__item::after {
		width: calc(7 * var(--oze-u));
		height: calc(7 * var(--oze-u));
		margin-left: calc(18 * var(--oze-u));
	}

	/* ---- Galerie Instagram ---- */

	.oze-insta { height: calc(1146 * var(--oze-u)); }

	.oze-insta__handle {
		top: calc(29 * var(--oze-u));
		font-size: calc(24 * var(--oze-u));
		line-height: calc(26.4 * var(--oze-u));
	}

	.oze-insta__gallery {
		width: calc(320 * var(--oze-u));
		height: calc(1146 * var(--oze-u));
	}

	/* Le site d'origine n'affiche que quatre polaroids sur mobile. */
	.oze-polaroid--1 { display: none; }

	.oze-polaroid--4 {
		top: calc(70 * var(--oze-u));
		left: calc(-10 * var(--oze-u));
		width: calc(210 * var(--oze-u));
		height: calc(341 * var(--oze-u));
		transform: rotate(-4.01deg);
	}

	.oze-polaroid--2 {
		top: calc(140 * var(--oze-u));
		left: calc(125 * var(--oze-u));
		width: calc(231 * var(--oze-u));
		height: calc(336 * var(--oze-u));
		transform: rotate(10.54deg);
	}

	.oze-polaroid--5 {
		top: calc(377 * var(--oze-u));
		left: calc(-7 * var(--oze-u));
		width: calc(230 * var(--oze-u));
		height: calc(336 * var(--oze-u));
		transform: rotate(-7.48deg);
	}

	.oze-polaroid--3 {
		top: calc(637 * var(--oze-u));
		left: calc(60 * var(--oze-u));
		width: calc(230 * var(--oze-u));
		height: calc(336 * var(--oze-u));
		transform: rotate(10.87deg);
	}

	.oze-insta__social {
		bottom: auto;
		top: calc(1021 * var(--oze-u));
		gap: calc(56 * var(--oze-u));
	}

	.oze-insta__social img {
		width: calc(39 * var(--oze-u));
		height: calc(39 * var(--oze-u));
	}

	.oze-insta__social .oze-insta__logo {
		width: calc(62 * var(--oze-u));
		height: calc(50 * var(--oze-u));
	}
}

/* --------------------------------------------------------------------------
   Styles de blocs proposés dans l'éditeur

   Ils réutilisent les classes utilitaires du thème plutôt que de redéfinir les
   valeurs : ce que le client choisit dans l'éditeur rend donc exactement comme
   les sections calibrées.
   -------------------------------------------------------------------------- */

.is-style-display {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	text-transform: uppercase;
}

.is-style-manuscrit {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
}

.is-style-section-sable {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--maroon);
}

.is-style-section-bordeaux {
	background-color: var(--wp--preset--color--maroon);
	color: #ffffff;
}