/**
 * Sushis & Co — Refonte mobile
 * =============================================================================
 * Tout ce fichier est scopé sous 767px (breakpoint mobile d'Elementor).
 * Le desktop n'est jamais touché.
 *
 * Repères Elementor (template header = post 67) :
 *   .elementor-element-f9c3515  conteneur du header
 *   .elementor-element-1ea2dc1  logo
 *   .elementor-element-3f3bb6d  liste "La Carte / Traiteur / 06 42 17 09 39"
 *   .elementor-element-cc71350  titre "Commande en ligne ou par téléphone"
 *   .elementor-element-c800078  "Me connecter"
 *   .elementor-element-af07c9a  icône burger (ouvre le popup 1117)
 *
 * @package HelloElementorChild
 * @version 1.0.0
 */

/* -----------------------------------------------------------------------------
 * Garde desktop — À LIRE AVANT D'AJOUTER UN ÉLÉMENT
 *
 * Les deux éléments ajoutés par cette refonte (barre de commande rendue en PHP
 * dans le pied de page, barre de catégories insérée en JS sur la carte) entrent
 * dans le DOM quel que soit le format d'écran. Tout le reste du fichier étant
 * sous `@media (max-width: 767px)`, ils s'afficheraient SANS AUCUN STYLE en
 * desktop — une liste à puces brute au milieu de la page.
 *
 * Toute nouvelle classe `.sco-*` injectée doit donc être neutralisée ici, puis
 * activée dans le bloc mobile.
 * -------------------------------------------------------------------------- */

.sco-orderbar,
.sco-catnav {
	display: none;
}

@media (max-width: 767px) {

/* -----------------------------------------------------------------------------
 * 0. Variables
 * -------------------------------------------------------------------------- */

:root {
	--sco-header-h: 56px;        /* hauteur totale du header, liseré compris (mesurée) */
	--sco-header-border: 4px;    /* liseré rouge sous le header */
	--sco-catnav-h: 57px;        /* barre de catégories (mesurée) */
	--sco-header-total: 113px;   /* header + barre : sous quoi le contenu doit passer */
	--sco-orderbar-h: 70px;      /* barre de commande fixée en bas (mesurée) */
	--sco-red: #cb1919;          /* --e-global-color-primary */
	--sco-ink: #111;
	--sco-ink-soft: #5a5a5a;
	--sco-line: #e6e6e6;
	--sco-safe: env(safe-area-inset-bottom, 0px);
}

/* -----------------------------------------------------------------------------
 * 1. HEADER — reconstruction
 *
 * Cause du problème : les widgets du header ont des largeurs en pourcentage
 * appliquées à TOUS les breakpoints (logo 10%, "Me connecter" 9%...).
 * Sur 375px cela donne un logo de 37px et un "Me connecter" de 34px de large,
 * d'où le logo écrasé et le texte affiché en vertical.
 *
 * On repart d'une ligne simple : [ logo ] ....... [ tél ] [ burger ]
 * -------------------------------------------------------------------------- */

.elementor-67 .elementor-element.elementor-element-f9c3515 {
	--min-height: var(--sco-header-h);
	--flex-wrap-mobile: nowrap;
	--padding-left: 14px;
	--padding-right: 14px;
	--gap: 0 10px;
	--column-gap: 10px;
	/* le liseré rouge de 10px coûte trop cher en hauteur sur mobile */
	--border-bottom-width: var(--sco-header-border);
	border-bottom-width: var(--sco-header-border);
	flex-wrap: nowrap;
}

/* Logo : 10% de 375px = 37px. Le fichier fait 300x56, on lui rend sa lisibilité. */
.elementor-67 .elementor-element.elementor-element-1ea2dc1 {
	--container-widget-width: 132px;
	width: 132px;
	max-width: 132px;
	flex: 0 0 132px;
}

.elementor-67 .elementor-element.elementor-element-1ea2dc1 > .elementor-widget-container {
	padding: 0;
}

.elementor-67 .elementor-element.elementor-element-1ea2dc1 img {
	width: 132px;
	height: auto;
	display: block;
}

/* Liste "La Carte / Traiteur / téléphone" :
 * les deux premières entrées sont déjà dans le menu burger, on ne garde que
 * le téléphone — un restaurant doit rester joignable en un geste. */
.elementor-67 .elementor-element.elementor-element-3f3bb6d {
	--container-widget-width: auto;
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	margin-inline-start: auto;   /* pousse tél + burger à droite */
}

.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-items {
	margin-inline: 0;
	display: flex;
	align-items: center;
}

.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item {
	display: none;
	margin-inline: 0;
}

/* On ne garde que l'entrée dont le lien est un tel:. Robuste au réordonnancement. */
.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item:has(a[href^="tel:"]) {
	display: flex;
}

.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item:has(a[href^="tel:"]) a {
	/* cible tactile 44x44 minimum, le libellé est remplacé par l'icône seule */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item:has(a[href^="tel:"]) .elementor-icon-list-icon {
	padding: 0;
}

.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item:has(a[href^="tel:"]) .elementor-icon-list-icon svg {
	width: 20px;
	height: 20px;
}

/* le numéro écrit en toutes lettres ne tient pas : l'icône suffit */
.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item .elementor-icon-list-text {
	display: none;
}

/* Repli si :has() n'est pas supporté (Safari < 15.4) : on masque par position. */
@supports not selector(:has(a)) {
	.elementor-67 .elementor-element.elementor-element-3f3bb6d .elementor-icon-list-item:nth-child(3) {
		display: flex;
	}
}

/* Liste blanche des widgets du header mobile.
 *
 * On masque TOUT le contenu du header, puis on ne réautorise que le logo, le
 * téléphone et le burger. Le ciblage par identifiant ne suffit pas : le header
 * contient des widgets affichés sous condition, invisibles pour un visiteur
 * déconnecté. C'est le cas du widget de compte, qui affiche "Me connecter"
 * (c800078) au visiteur et le prénom de l'utilisateur une fois connecté —
 * lequel se retrouvait découpé en colonne verticale faute de largeur.
 *
 * Cette approche couvre aussi tout widget ajouté plus tard dans le header :
 * il n'apparaîtra pas sur mobile tant qu'il n'est pas ajouté ci-dessous.
 *
 * Widgets écartés à ce jour :
 *   cc71350  "Commande en ligne ou par téléphone" (3 lignes de texte)
 *   c800078  compte / "Me connecter" / prénom de l'utilisateur connecté
 * Tous deux restent accessibles depuis le menu burger ("Mon Compte").
 */
.elementor-67 .elementor-element.elementor-element-f9c3515 > .elementor-element {
	display: none;
}

.elementor-67 .elementor-element.elementor-element-f9c3515 > .elementor-element-1ea2dc1,
.elementor-67 .elementor-element.elementor-element-f9c3515 > .elementor-element-3f3bb6d,
.elementor-67 .elementor-element.elementor-element-f9c3515 > .elementor-element-af07c9a {
	display: block;
}

/* Burger : cible tactile correcte */
.elementor-67 .elementor-element.elementor-element-af07c9a {
	flex: 0 0 auto;
}

.elementor-67 .elementor-element.elementor-element-af07c9a > .elementor-widget-container {
	margin: 0;
}

.elementor-67 .elementor-element.elementor-element-af07c9a .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

/* -----------------------------------------------------------------------------
 * 2. MENU BURGER (popup Elementor 1117) — version mobile-first
 *
 * Constat mesuré sur 375px :
 *  - panneau réglé à 30vw (112px), puis 88vw en 1.0.x : une bande de page
 *    restait visible, et le contenu démarrait après 80px de marge à gauche et
 *    80px en haut, ne laissant que 190px de large aux liens ;
 *  - animation d'entrée de 1,2s : le menu paraît lent à chaque ouverture ;
 *  - "Commander", l'action principale, arrivait en 3e position en corps 16px,
 *    derrière "Carte" et "Mon Compte" en 22px ;
 *  - 966px de contenu pour 812px d'écran, la newsletter au centre.
 *
 * Réponse : plein écran, entrée en 0,25s, "Commander" en bouton en tête,
 * navigation en lignes pleine largeur, infos pratiques au second rang,
 * newsletter en bas. Tout est préfixé par l'identifiant du popup, qui
 * l'emporte sur les réglages Elementor sans passer par le back-office.
 *
 * Widgets, tous enfants du même conteneur flex (d'où `order`) :
 *   c345fb2  Commander / Service Client
 *   6934c92  Carte / Mon Compte
 *   3bb04d9  Allergènes / Menu PDF / Mentions légales / CGV
 *   422bfa5  réseaux sociaux
 *   8858fd2  titre newsletter · 7499e43 formulaire · 28064e1 consentement
 * -------------------------------------------------------------------------- */

/* Filet pour tout autre popup Elementor : jamais plus large que l'écran. */
.elementor-popup-modal .dialog-widget-content {
	max-width: 100vw !important;
}

/* Panneau plein écran, entrée rapide */
#elementor-popup-modal-1117 .dialog-widget-content {
	width: 100vw !important;
	height: 100vh;
	height: 100dvh;
	box-shadow: none;
	animation-duration: .25s !important;
}

#elementor-popup-modal-1117 .dialog-message {
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
	padding: 64px 20px calc(24px + var(--sco-safe)) !important;
	align-items: stretch;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

#elementor-popup-modal-1117 .elementor-element-055f16f {
	--padding-left: 0px;
	--padding-right: 0px;
	width: 100%;
}

#elementor-popup-modal-1117 .elementor-element-055f16f > .e-con-inner {
	max-width: 100%;
	padding: 0;
	gap: 0;
}

#elementor-popup-modal-1117 .elementor-widget {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Croix de fermeture : en haut à droite, atteignable au pouce */
#elementor-popup-modal-1117 .dialog-close-button {
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

/* Ordre de lecture : agir, naviguer, s'informer, suivre, s'abonner */
#elementor-popup-modal-1117 .elementor-element-c345fb2 { order: 1; }
#elementor-popup-modal-1117 .elementor-element-6934c92 { order: 2; }
#elementor-popup-modal-1117 .elementor-element-3bb04d9 { order: 3; margin-top: 20px; }
#elementor-popup-modal-1117 .elementor-element-422bfa5 { order: 4; margin-top: 16px; }
#elementor-popup-modal-1117 .elementor-element-8858fd2 { order: 5; margin-top: 24px; }
#elementor-popup-modal-1117 .elementor-element-7499e43 { order: 6; }
#elementor-popup-modal-1117 .elementor-element-28064e1 { order: 7; }

/* Listes : espacements Elementor neutralisés, chaque entrée devient une ligne */
#elementor-popup-modal-1117 .elementor-icon-list-items {
	margin: 0 !important;
	padding: 0;
}

#elementor-popup-modal-1117 .elementor-icon-list-item {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--sco-line);
}

#elementor-popup-modal-1117 .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	color: var(--sco-ink);
	font-size: 18px !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

#elementor-popup-modal-1117 .elementor-icon-list-item > a .elementor-icon-list-text {
	font-size: inherit !important;
	font-weight: inherit;
	color: inherit;
}

#elementor-popup-modal-1117 .elementor-icon-list-item > a::after {
	content: "\203A";   /* chevron › */
	margin-left: 12px;
	font-size: 22px;
	font-weight: 400;
	color: #b5b5b5;
}

/* "Commander" : bouton principal. Ciblé par sa destination (/shop/) plutôt
 * que par sa position, pour résister à un réordonnancement dans Elementor. */
#elementor-popup-modal-1117 .elementor-element-c345fb2 .elementor-icon-list-item:has(> a[href*="/shop/"]) {
	margin-bottom: 8px !important;
	border-bottom: none;
}

#elementor-popup-modal-1117 .elementor-element-c345fb2 a[href*="/shop/"] {
	justify-content: center;
	border-radius: 10px;
	background: var(--sco-red);
	color: #fff;
	font-weight: 700;
}

#elementor-popup-modal-1117 .elementor-element-c345fb2 a[href*="/shop/"]::after {
	content: none;
}

/* Infos pratiques : second rang, plus discret */
#elementor-popup-modal-1117 .elementor-element-3bb04d9 .elementor-icon-list-item {
	border-bottom: none;
}

#elementor-popup-modal-1117 .elementor-element-3bb04d9 .elementor-icon-list-item > a {
	min-height: 44px;
	font-size: 15px !important;
	font-weight: 400;
	color: var(--sco-ink-soft);
}

#elementor-popup-modal-1117 .elementor-element-3bb04d9 .elementor-icon-list-item > a::after {
	content: none;
}

/* Réseaux sociaux centrés */
#elementor-popup-modal-1117 .elementor-element-422bfa5 .elementor-widget-container {
	text-align: center;
}

/* Newsletter compacte, champs et bouton pleine largeur */
#elementor-popup-modal-1117 .elementor-element-8858fd2 .elementor-heading-title {
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 600;
}

#elementor-popup-modal-1117 .elementor-element-7499e43 .elementor-field-group {
	width: 100% !important;
	max-width: 100%;
	flex: 1 1 100%;
	margin-bottom: 8px;
}

#elementor-popup-modal-1117 .elementor-element-7499e43 input[type="email"],
#elementor-popup-modal-1117 .elementor-element-7499e43 button[type="submit"] {
	width: 100%;
	min-height: 48px;
}

#elementor-popup-modal-1117 .elementor-element-28064e1,
#elementor-popup-modal-1117 .elementor-element-28064e1 p {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--sco-ink-soft);
}

/* -----------------------------------------------------------------------------
 * 3. CARTE — barre de navigation par catégorie
 *
 * La page carte empile 32 shortcodes Orderable indépendants (un par
 * sous-catégorie), pour ~49 000px de hauteur au total. La liste de catégories
 * d'Elementor qui sert de sommaire défile avec la page et disparaît dès le
 * premier écran : passé ce point, plus aucun moyen de circuler.
 *
 * La barre est construite par assets/js/mobile-nav.js à partir des ancres
 * `#category-<slug>` déjà présentes sur chaque bloc.
 * -------------------------------------------------------------------------- */

/* `position: fixed` et non `sticky` : sticky ne colle que dans les limites de
 * son parent, ce qui l'expose à toute la structure Elementor au-dessus (un
 * conteneur trop court, un `overflow` ou un `transform` ajouté plus tard
 * suffisent à la faire décrocher). Le header étant lui-même `fixed` et de
 * hauteur connue, `fixed` rend la barre indépendante de tout ce qui l'entoure.
 * La hauteur qu'elle occupe est rendue au flux par `.sco-has-catnav`. */
.sco-catnav {
	display: block;   /* lève la garde desktop en tête de fichier */
	position: fixed;
	top: var(--sco-header-h);
	left: 0;
	right: 0;
	/* Jamais plus large que l'écran. En 1.0.3, la barre prenait la largeur de
	 * ses 32 onglets (3 837px) : la page débordait, le navigateur élargissait
	 * sa zone de référence, et la popin produit — calée sur 100% de cette
	 * zone — sortait de l'écran avec ses boutons Fermer et Ajouter. */
	width: auto;
	max-width: 100vw;
	z-index: 990;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border-bottom: 1px solid var(--sco-line);
}

/* Compense la barre, qui est hors du flux. */
.sco-has-catnav {
	padding-top: var(--sco-catnav-h);
}

/* Indique que la liste continue vers la droite. */
.sco-catnav::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	width: 28px;
	height: 40px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%);
	pointer-events: none;
}

.sco-catnav__list {
	display: flex;
	min-width: 0;      /* le défilement reste interne à la liste */
	max-width: 100%;
	gap: 8px;
	margin: 0;
	padding: 0 14px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sco-catnav__list::-webkit-scrollbar {
	display: none;
}

.sco-catnav__item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: center;
}

.sco-catnav__link {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 20px;
	background: #f1f1f1;
	color: var(--sco-ink);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background 150ms ease-out, color 150ms ease-out;
}

.sco-catnav__link.is-active {
	background: var(--sco-red);
	color: #fff;
}

.sco-catnav__link:hover,
.sco-catnav__link:focus {
	text-decoration: none;
	color: var(--sco-ink);
}

.sco-catnav__link.is-active:hover,
.sco-catnav__link.is-active:focus {
	color: #fff;
}

/* Décalage d'ancrage : le titre de catégorie doit arriver sous le header ET
 * sous la barre, pas dessous. Vaut aussi pour un lien entrant #category-xxx. */
.orderable-main__group[id] {
	scroll-margin-top: var(--sco-header-total);
}

/* Le sommaire de catégories d'Elementor (colonne de gauche en desktop) fait
 * 639px de haut sur mobile et fait doublon avec la barre collée, qui mène aux
 * mêmes 32 destinations. Retirer cette règle pour le réafficher. */
.elementor-183 .elementor-element.elementor-element-0ddd9c7 {
	display: none;
}

/* -----------------------------------------------------------------------------
 * 4. CARTE — cartes produit
 *
 * Le CSS personnalisé de la page carte (Elementor, page 183) applique
 * `background-color: #c5c5c5` aux cartes, alors que le titre produit est en
 * blanc : contraste de 1,7:1, là où 4,5:1 est le minimum lisible. La photo
 * n'occupant que la vignette de gauche, le titre se retrouve bien sur cet
 * aplat gris et non sur l'image.
 *
 * Correction à la source possible côté Elementor (page carte > CSS
 * personnalisé) ; on la neutralise ici pour le mobile.
 * -------------------------------------------------------------------------- */

.orderable-products-list__item .orderable-product {
	background: #fff;
	border: 1px solid var(--sco-line);
	border-radius: 10px;
	padding: 12px;
	align-items: center;
	gap: 12px;
}

.orderable-products-list__item {
	margin-bottom: 10px;
	padding-bottom: 0;
	border-bottom: none;
}

/* Titre lisible. Corrige le blanc sur gris. */
.orderable-product__title,
.orderable-products-list__item .orderable-product__title {
	color: var(--sco-ink) !important;
	font-size: 16px;
	line-height: 1.25;
	font-weight: 700;
	text-transform: none;
	margin: 0 0 4px !important;
}

.orderable-product__description {
	color: var(--sco-ink-soft);
	font-size: 14px;
	line-height: 1.35;
}

.orderable-product__content {
	padding: 0 !important;
}

.orderable-product__actions {
	padding: 8px 0 0 !important;
}

.orderable-product__actions-price .amount {
	font-size: 17px;
	color: var(--sco-ink);
}

/* Bouton "Ajouter" : cible tactile 44px */
.orderable-product__actions-button .orderable-button {
	height: 44px;
	line-height: 40px;
	padding: 0 20px !important;
	font-weight: 600;
}

/* Filet : si un produit était publié sans photo, on récupère la largeur de la
 * vignette plutôt que de laisser un bloc vide. */
.orderable-products-list__item .orderable-product__hero:not(:has(img)) {
	display: none;
}

/* Vignette carrée, recadrée au centre. */
.orderable-products-list__item .orderable-product__hero {
	max-width: 84px;
	min-width: 84px;
	border-radius: 8px;
	align-self: center;
}

.orderable-products-list__item .orderable-product__hero img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: 100% !important;
}

/* -----------------------------------------------------------------------------
 * 5. BARRE DE COMMANDE (bas d'écran)
 *
 * Rendue par inc/class-sco-mobile-orderbar.php.
 * Elle est toujours présente dans le DOM (état vide inclus) pour que le
 * rafraîchissement AJAX de WooCommerce puisse la remplacer.
 * -------------------------------------------------------------------------- */

.sco-orderbar {
	display: flex;    /* lève la garde desktop en tête de fichier */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	align-items: stretch;
	gap: 10px;
	padding: 10px 14px calc(10px + var(--sco-safe));
	background: #fff;
	border-top: 1px solid var(--sco-line);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}

/* Sur la carte, proposer "Commander en ligne" alors qu'on y est déjà n'a pas de
 * sens : on masque l'état vide. Dès qu'un produit est ajouté, le fragment
 * WooCommerce remplace la barre par l'état rempli, qui lui s'affiche. */
body.woocommerce-shop .sco-orderbar--empty,
body.post-type-archive-product .sco-orderbar--empty,
body.tax-product_cat .sco-orderbar--empty {
	display: none;
}

/* Bouton gauche : ouvre le tiroir panier d'Orderable */
.sco-orderbar__cart {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 48px;
	padding: 6px 14px;
	border: 1px solid var(--sco-line);
	border-radius: 10px;
	background: #fff;
	color: var(--sco-ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.sco-orderbar__count {
	font-size: 12px;
	line-height: 1.1;
	color: var(--sco-ink-soft);
}

.sco-orderbar__total {
	font-size: 16px;
	line-height: 1.1;
	font-weight: 700;
}

/* Bouton droit : action principale */
.sco-orderbar__cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--sco-red);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sco-orderbar__cta:hover,
.sco-orderbar__cta:focus,
.sco-orderbar__cta:active {
	color: #fff;
	text-decoration: none;
}

/* Panier vide : un seul bouton, pleine largeur */
.sco-orderbar--empty .sco-orderbar__cart {
	display: none;
}

.sco-orderbar--empty .sco-orderbar__cta {
	flex: 1 1 auto;
}

/* Réserve la place de la barre pour que le dernier produit ne se retrouve pas
 * caché dessous. Le :has() suit l'état réel de la barre, y compris après un
 * remplacement de fragment (panier vide -> panier rempli sur la page carte). */
body:has(.sco-orderbar) {
	padding-bottom: var(--sco-orderbar-space, calc(var(--sco-orderbar-h) + var(--sco-safe)));
}

/* Seul cas où la barre est masquée : état vide sur la carte. */
body.woocommerce-shop:has(.sco-orderbar--empty),
body.post-type-archive-product:has(.sco-orderbar--empty),
body.tax-product_cat:has(.sco-orderbar--empty) {
	--sco-orderbar-space: 0px;
}

/* Repli pour les navigateurs sans :has() (Safari < 15.4) : la hauteur est
 * réservée dès que la barre est rendue, quitte à laisser un peu de blanc en
 * bas de la carte quand le panier est vide. */
@supports not selector(:has(a)) {
	body.sco-has-orderbar {
		padding-bottom: calc(var(--sco-orderbar-h) + var(--sco-safe));
	}
}

/* Aucun z-index imposé au tiroir d'Orderable (popin produit et panier) : il
 * est nativement à 999999, au-dessus de tout le reste — header 999, barres
 * 990-998, panier du header 1000, barre d'admin WordPress 99999. La 1.0.3
 * l'abaissait à 999 : il passait sous le panier du header, et la barre d'admin
 * masquait son bouton Fermer. */

/* -----------------------------------------------------------------------------
 * 6. Panier dans le header
 *
 * On réutilise le panier flottant d'Orderable plutôt que d'en écrire un autre :
 * il porte déjà le compteur, sa mise à jour AJAX (fragments WooCommerce) et
 * l'ouverture du tiroir panier. Le CSS personnalisé du header le plaçait en dur
 * à top:10px / right:80px, dans une cible de 57x24px qui chevauchait le header.
 *
 * On le repositionne à sa place dans la ligne du header, entre le téléphone et
 * le burger, en cible tactile de 44px :
 *
 *      [ logo ] .......... [ panier ] [ tél ] [ burger ]
 * -------------------------------------------------------------------------- */

.orderable-floating-cart,
.orderable-floating-cart--tl,
.orderable-floating-cart--tr {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: fixed;
	/* centré sur les 52px de header hors liseré */
	top: 4px;
	left: auto;
	/* Positions mesurées dans le header : burger 14→58, téléphone 68→112,
	 * séparés par le gap de 10px du conteneur. Le panier prend le cran suivant.
	 * À revoir si le gap ou l'ordre des widgets du header change. */
	right: 122px;
	width: 44px;
	height: 44px;
	margin: 0;
	z-index: 1000;
}

.orderable-floating-cart__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.orderable-floating-cart__button svg {
	width: 26px;
	height: 26px;
}

/* Compteur en pastille sur l'icône. */
.orderable-floating-cart__count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--sco-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* -----------------------------------------------------------------------------
 * 7. Slider d'accueil
 *
 * Les titres sont en blanc directement sur la photo, sans voile : illisibles
 * dès que l'image est claire.
 * -------------------------------------------------------------------------- */

.elementor-slides .swiper-slide-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

.elementor-slides .swiper-slide-contents {
	position: relative;
	z-index: 2;
}

.elementor-slides .elementor-slide-heading {
	font-size: 30px;
	line-height: 1.1;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.elementor-slides .elementor-slide-description {
	font-size: 15px;
	line-height: 1.4;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.elementor-slides .elementor-slide-button {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

/* -----------------------------------------------------------------------------
 * 8. Confort général
 * -------------------------------------------------------------------------- */

/* Empêche iOS de zoomer à la mise au point d'un champ (< 16px déclenche le zoom). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	font-size: 16px;
}

/* Tunnel de commande : boutons pleine largeur et confortables. */
.woocommerce #payment #place_order,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .button {
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 9. POPIN PRODUIT — accompagnements (plugin sushi-accompaniments)
 *
 * Dans la popin, chaque ligne d'accompagnement ne laissait que 52px au texte :
 * retrait de 20px de chaque côté, vignette 50px + 16px d'écart, sélecteur de
 * quantité de 128px. "Sauce salée — inclus selon commande" s'affichait un mot
 * par ligne. On rend la largeur au texte sans descendre les boutons +/− sous
 * 40px. Scopé au tiroir Orderable : la page produit classique n'est pas touchée.
 * -------------------------------------------------------------------------- */

.orderable-drawer .sushi-acc-container {
	padding-left: 0;
	padding-right: 0;
}

.orderable-drawer .sushi-acc-item {
	gap: 10px;
	padding: 12px 0;
}

.orderable-drawer .sushi-acc-item-left {
	gap: 10px;
}

.orderable-drawer .sushi-acc-item-image {
	width: 40px;
	height: 40px;
}

.orderable-drawer .sushi-acc-item-name {
	font-size: 15px;
	line-height: 1.25;
}

.orderable-drawer .sushi-acc-item-meta {
	font-size: 13px;
	line-height: 1.3;
}

.orderable-drawer .sushi-acc-item-right,
.orderable-drawer .sushi-acc-quantity-selector {
	flex-shrink: 0;
}

.orderable-drawer .sushi-acc-quantity-selector {
	gap: 4px;
	padding: 0;
}

.orderable-drawer .sushi-acc-qty-btn {
	width: 40px;
	height: 40px;
}

/* Popin produit : visuel à 150px de haut. Orderable l'affiche en mode
 * "image recadrée", figé à 72px, ce qui réduit la photo à un bandeau. */
.orderable-drawer .orderable-product--image-cropped .orderable-product__hero {
	height: 150px;
}

/* -----------------------------------------------------------------------------
 * 10. ACCUEIL — listes de produits masquées sur mobile
 *
 * Les deux listes Orderable de l'accueil (plateaux, plats chauds) pèsent à elles
 * seules près de 5 500px. Sur téléphone, cette succession de produits ajoutables
 * un par un était jugée confuse : la carte est là pour ça. On garde les sliders
 * et leurs boutons, qui mènent aux bonnes catégories.
 *
 * Deux écritures : par identifiant Elementor (certaine aujourd'hui) et par
 * contenu (robuste si une liste est ajoutée ou déplacée plus tard).
 * -------------------------------------------------------------------------- */

body.home .elementor-element-c048bda,
body.home .elementor-element-e4d8884 {
	display: none;
}

body.home .elementor-widget-shortcode:has(.orderable-products-list) {
	display: none;
}

} /* fin @media (max-width: 767px) */