/* ===================================================================== Pop-up plat (app/index.php) --------------------------------------------------------------------- Reprend l'habillage des modales de la landing d'investissement (public/invest/assets/css/landing.css) : feuille qui monte du bas sur mobile, carte centree au-dela de 720px, voile flou, filet degrade en tete de feuille et croix ronde discrete. Ce qui n'est PAS repris : la palette creme/menthe. Un menu client est habille par le restaurateur, on garde donc ses variables de theme (--titre / --text / --background / --police_titre / --police_texte). Les surfaces, filets et ombres sont derives de --box_shadow_color -- le triplet rgb de --text, pose sur par js/theme.js -- et non de noir : c'est ce qui garantit des cartes lisibles aussi bien sur un theme clair que sur un theme sombre. Portee : uniquement les pop-up ouvertes par newPopPlat(), reperees par customClass { container: 'popup-plat-container', popup: 'popup-plat' }. Les autres SweetAlert de la page (toasts, pop-up de publicite) ne sont pas touchees. !important : SweetAlert2 injecte sa feuille de style depuis le JS, donc APRES les du . A specificite egale c'est elle qui gagne, et la regle qui centre la boite (`.swal2-container:not(...)x15 > .swal2-modal { margin:auto }`) est imbattable autrement. D'ou les !important sur les seules proprietes que SweetAlert2 declare lui-meme. ===================================================================== */ /* ------------------------------------------------------------------ */ /* Jetons locaux */ /* ------------------------------------------------------------------ */ .swal2-container.popup-plat-container { --pp-marge: 22px; --pp-rayon: 16px; --pp-surface: rgba(var(--box_shadow_color), 0.045); --pp-surface-forte: rgba(var(--box_shadow_color), 0.085); --pp-filet: rgba(var(--box_shadow_color), 0.17); --pp-filet-fin: rgba(var(--box_shadow_color), 0.09); --pp-ombre: 0 1px 2px rgba(var(--box_shadow_color), 0.06), 0 20px 44px -22px rgba(var(--box_shadow_color), 0.42); } /* ------------------------------------------------------------------ */ /* Voile */ /* ------------------------------------------------------------------ */ .swal2-container.popup-plat-container { padding: 0 !important; align-items: flex-end !important; justify-content: center !important; } /* Voile toujours sombre (et non derive du theme) : il doit assombrir la carte du restaurant, y compris sur un theme a texte clair. */ .swal2-container.popup-plat-container.swal2-backdrop-show, .swal2-container.popup-plat-container.swal2-noanimation { background: rgba(0, 0, 0, 0.55) !important; -webkit-backdrop-filter: blur(4px) saturate(130%); backdrop-filter: blur(4px) saturate(130%); } /* ------------------------------------------------------------------ */ /* Feuille */ /* ------------------------------------------------------------------ */ .swal2-popup.popup-plat { /* margin:0 : neutralise le `margin:auto` de SweetAlert2, qui recentrerait la feuille au milieu de l'ecran au lieu de la coller en bas. */ margin: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 92vh; border: 0 !important; border-radius: 24px 24px 0 0 !important; box-shadow: var(--pp-ombre) !important; /* Le defilement est confie a .swal2-content : l'en-tete, la croix et le filet degrade restent ainsi fixes en haut de la feuille. */ overflow: hidden !important; justify-content: flex-start !important; color: var(--text) !important; font-family: var(--police_texte) !important; font-size: 1rem !important; text-align: start !important; } /* dvh : sur iOS la barre d'URL fait varier vh, la feuille depassait. */ @supports (max-height: 92dvh) { .swal2-popup.popup-plat { max-height: 92dvh; } } /* Filet degrade en tete de feuille -- l'equivalent du liseré menthe de la landing. Il doit ressortir sur DEUX fonds a la fois : le voile sombre au-dessus et la feuille claire en dessous. D'ou les deux extremites opposees --bandeau (la couleur de marque du restaurant, souvent claire) et --titre (une couleur de texte, donc contrastee avec la feuille par construction) : quelle que soit la palette, une moitie du filet tranche. Un degrade --titre -> --text, essaye d'abord, disparaissait dans le voile sur un theme clair. */ .swal2-popup.popup-plat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--bandeau), var(--titre)); z-index: 3; } @media (min-width: 720px) { .swal2-container.popup-plat-container { --pp-marge: 32px; padding: 20px !important; align-items: center !important; } .swal2-popup.popup-plat { width: min(560px, 100%) !important; max-height: 88vh; border-radius: 20px !important; } @supports (max-height: 88dvh) { .swal2-popup.popup-plat { max-height: 88dvh; } } } /* ------------------------------------------------------------------ */ /* Ouverture / fermeture */ /* ------------------------------------------------------------------ */ /* Ces classes remplacent swal2-show / swal2-hide (cf. showClass / hideClass dans newPopPlat). Il faut de vraies @keyframes : a la fermeture SweetAlert2 attend un evenement `animationend` avant de retirer la boite du DOM, une simple transition ne le declencherait jamais et la feuille resterait affichee. */ .swal2-popup.popup-plat.popup-plat-show { animation: popupPlatSheetIn 0.34s cubic-bezier(0.2, 0.75, 0.3, 1); } .swal2-popup.popup-plat.popup-plat-hide { animation: popupPlatSheetOut 0.26s cubic-bezier(0.4, 0, 0.9, 0.35) forwards; } @keyframes popupPlatSheetIn { from { transform: translateY(100%); } to { transform: none; } } @keyframes popupPlatSheetOut { from { transform: none; } to { transform: translateY(100%); } } @media (min-width: 720px) { .swal2-popup.popup-plat.popup-plat-show { animation: popupPlatCardIn 0.3s cubic-bezier(0.2, 0.75, 0.3, 1); } .swal2-popup.popup-plat.popup-plat-hide { animation: popupPlatCardOut 0.22s ease forwards; } } @keyframes popupPlatCardIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes popupPlatCardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97); } } @media (prefers-reduced-motion: reduce) { .swal2-popup.popup-plat.popup-plat-show, .swal2-popup.popup-plat.popup-plat-hide { animation-duration: 0.01s; } } /* ------------------------------------------------------------------ */ /* Croix */ /* ------------------------------------------------------------------ */ .swal2-popup.popup-plat .swal2-close { top: 12px !important; inset-inline-end: 12px !important; inset-inline-start: auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--pp-surface-forte) !important; color: var(--text) !important; font-family: var(--police_texte) !important; font-size: 25px !important; line-height: 34px !important; z-index: 4; transition: background-color 0.16s ease, color 0.16s ease; } .swal2-popup.popup-plat .swal2-close:hover { background: rgba(var(--box_shadow_color), 0.16) !important; color: var(--titre) !important; } .swal2-popup.popup-plat .swal2-close:focus { box-shadow: 0 0 0 3px rgba(var(--box_shadow_color), 0.2) !important; } /* ------------------------------------------------------------------ */ /* En-tete : nom du plat, nom d'origine, description */ /* ------------------------------------------------------------------ */ .swal2-popup.popup-plat .swal2-header { display: block !important; padding: 0 !important; flex: 0 0 auto; position: relative; } /* Degrade de bas d'en-tete : le corps defile sous un en-tete fixe, sans lui les lignes se retrouvaient tranchees net contre le filet de separation. z-index 2 est necessaire -- .swal2-content est un item flex avec z-index:1 dans la feuille de SweetAlert2, il passerait sinon par-dessus. */ .swal2-popup.popup-plat .swal2-header::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; background: linear-gradient(to bottom, var(--background), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 2; } /* .swal2-title porte le fragment popUpPlatHeader : on l'aplatit completement, la mise en forme vit dans .popUpPlatHeader. display:block est indispensable -- SweetAlert2 pose `display:flex` en style inline sur le titre, ce qui reduirait .popUpPlatHeader a la largeur de son contenu (bordure et padding tronques sur un titre court). */ .swal2-popup.popup-plat .swal2-title { display: block !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; color: inherit !important; font-size: 1rem !important; font-weight: 400 !important; text-align: start !important; } /* Marges laterales symetriques, imposees par le centrage : une reserve pour la croix d'un seul cote decalerait optiquement tout le bloc vers la gauche. La croix est donc degagee par le haut (elle finit a 50px), d'ou le padding superieur genereux. */ .popup-plat .popUpPlatHeader { padding: 54px var(--pp-marge) 18px; border-bottom: 1px solid var(--pp-filet-fin); } /* Bloc d'en-tete centre (titre, nom d'origine, description) : text-align explicite sur chaque element, car .swal2-title et .popUpPlatHeader sont remis a `start` plus haut pour le reste du contenu. */ .popup-plat .popUpPlatHeader .popUpTitle { margin: 0; font-family: var(--police_titre); color: var(--titre); font-size: clamp(21px, 5.6vw, 26px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; text-align: center; } /* Nom d'origine (affiche seulement quand le menu est traduit). */ .popup-plat .popUpPlatHeader .platTitleFr { margin: 7px 0 0; font-family: var(--police_texte); color: var(--text); font-size: 12.5px; letter-spacing: 0.01em; opacity: 0.62; text-align: center; } .popup-plat .popUpPlatHeader .platDescription { margin: 10px 0 0; font-family: var(--police_texte); color: var(--text); /* On respecte la taille de texte choisie par le restaurateur, mais bornee : au-dela la description ecrase le titre de la feuille. */ font-size: clamp(14px, var(--text_font_size), 17px); line-height: 1.55; font-weight: 400; opacity: 0.88; text-align: center; /* L'en-tete ne defile pas : sans plafond, une description-fleuve mangerait toute la hauteur de la feuille et le corps n'aurait plus de place. */ max-height: 26vh; overflow-y: auto; } /* ------------------------------------------------------------------ */ /* Corps */ /* ------------------------------------------------------------------ */ .swal2-popup.popup-plat .swal2-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0 !important; padding: 20px var(--pp-marge) calc(24px + env(safe-area-inset-bottom)) !important; color: var(--text) !important; font-size: 1rem !important; line-height: 1.55 !important; text-align: start !important; } /* Bootstrap laisse traîner des .container / .row / .col-* dans les fragments (et le JS en ajoute a l'execution : col-4 sur les prix, col-12 sur un titre de suggestion). On les neutralise ici plutot que de courir apres dans le JS. */ .popup-plat .container, .popup-plat .row, .popup-plat [class*="col-"] { width: auto; max-width: none; margin: 0; padding: 0; flex: none; } /* gap plutot que `> * + * { margin-top }` : le JS masque une bonne partie de ces blocs (photo, 2e description, vignettes, allergenes, quantite, suggestions) avec style.display = "none", et gap ignore les enfants sans boite -- une marge de frere, non. */ .popup-plat .popUpPlatContent { display: flex; flex-direction: column; gap: 18px; } /* Photo ------------------------------------------------------------- */ /* customStyle.css impose `.photo { width: 50%; margin: auto }` depuis une dizaine de media queries (classe generique heritee du theme d'origine) : sans cette remise a plat, la photo du plat s'affiche a mi-largeur. */ .popup-plat .popUpPlatContent .photo { width: 100%; margin: 0; } .popup-plat .popUpPlatContent .platImg { display: block; width: 100%; max-width: 100%; max-height: 42vh; object-fit: cover; object-position: center; border-radius: 14px; box-shadow: 0 1px 2px rgba(var(--box_shadow_color), 0.06), 0 14px 30px -18px rgba(var(--box_shadow_color), 0.4); } /* Sur grand ecran la feuille est etroite mais haute : sans plafond en px, une photo pleine largeur mange la moitie de la carte et repousse le prix et le bouton hors du champ. object-fit: cover recadre le surplus. */ @media (min-width: 720px) { .popup-plat .popUpPlatContent .platImg { max-height: 300px; } } /* Seconde description ---------------------------------------------- */ .popup-plat .popUpPlatContent .platDescription2 { margin: 0; font-family: var(--police_texte); color: var(--text); font-size: clamp(13.5px, var(--text_font_size), 16px); line-height: 1.55; white-space: pre-wrap; opacity: 0.88; text-align: center; } /* Prix -------------------------------------------------------------- */ .popup-plat .popUpPlatContent .platPrice { margin: 0; font-family: var(--police_titre); color: var(--titre); font-size: clamp(26px, 7vw, 32px); line-height: 1; letter-spacing: -0.03em; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } /* Prix a quantites : une ligne par variante, quantite a gauche, prix a droite, plutot que l'ancienne grille de 3 colonnes. */ .popup-plat .popUpMultiPrice { display: block; border: 1px solid var(--pp-filet-fin); border-radius: var(--pp-rayon); background: var(--pp-surface); overflow: hidden; } .popup-plat .popUpMultiPrice.hidden { display: none; } .popup-plat .popUpPriceLine { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; padding: 11px 15px; text-align: start; } .popup-plat .popUpPriceLine + .popUpPriceLine { border-top: 1px solid var(--pp-filet-fin); } .popup-plat .popUpPriceQty { font-family: var(--police_texte); color: var(--text); font-size: 13.5px; opacity: 0.85; } .popup-plat .popUpPriceValue { font-family: var(--police_titre); color: var(--titre); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Vignettes (bio, vegetarien, epice, sans gluten) ------------------- */ .popup-plat .popUpPlatContent .vignetteDiv { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: flex-start; } .popup-plat .popUpPlatContent .vignette { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; border-radius: 999px; border: 1px solid var(--pp-filet); background: var(--pp-surface); color: var(--titre); font-size: 17px; cursor: pointer; transition: background-color 0.16s ease, transform 0.16s ease; } .popup-plat .popUpPlatContent .vignette:hover { background: var(--pp-surface-forte); transform: translateY(-1px); } /* Bulle d'explication d'une vignette : createPopover() la pose sur , donc hors de .popup-plat -- pas de jeton --pp-* disponible ici, et on ne touche pas a sa bordure, dont la couleur est celle de la fleche dessinee par .popover:after dans index.css. */ .popover { border-radius: 12px; box-shadow: 0 1px 2px rgba(var(--box_shadow_color), 0.08), 0 18px 34px -18px rgba(var(--box_shadow_color), 0.5); padding: 12px 14px; max-width: 230px; font-family: var(--police_texte); } .popover h5 { font-family: var(--police_titre); color: var(--titre); font-size: 13.5px; font-weight: 700; margin: 0 0 4px; } .popover p { margin: 0; font-size: 12.5px; line-height: 1.5; } /* Allergenes -------------------------------------------------------- */ .popup-plat .popUpPlatContent .allergensDiv { display: block; } .popup-plat .popUpPlatContent .allergenButton { margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font-family: var(--police_texte); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .popup-plat .popUpPlatContent .allergenButton:hover { color: var(--titre); } .popup-plat .popUpPlatContent .allergensList { margin: 12px 0 0; padding: 13px 15px; border: 1px solid var(--pp-filet-fin); border-radius: var(--pp-rayon); background: var(--pp-surface); color: var(--text); font-family: var(--police_texte); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; } /* Quantite ---------------------------------------------------------- */ .popup-plat .popUpQuantityRow { align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border: 1px solid var(--pp-filet-fin); border-radius: var(--pp-rayon); background: var(--pp-surface); } .popup-plat .popUpQuantityLabel { font-family: var(--police_texte); font-size: 13.5px; color: var(--text); } .popup-plat .popUpQuantityRow .platQuantityControl { border-radius: 999px; border-color: var(--pp-filet); } /* Bouton favoris ---------------------------------------------------- */ /* Volontairement PAS le .btn--large pleine largeur de la landing : la mettre en avant a ce point donnait un pave qui ecrasait le prix et les suggestions. Mise aux favoris = action secondaire, donc une pastille a la largeur de son texte, centree dans la feuille (align-self sur l'axe transversal du flex colonne). Mesure : ~185x45px, donc toujours au-dessus des 44px de cible tactile. */ .popup-plat .popUpPlatContent .toggleFavoriteButton { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: auto; max-width: 100%; padding: 11px 20px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--police_texte); font-size: 13.5px; font-weight: 650; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Plein : l'inversion texte/fond du theme est le seul remplissage dont le contraste est garanti (--bandeau peut etre blanc). */ .popup-plat .popUpPlatContent .addFavoriteButton { background: var(--text); color: var(--background); border-color: var(--text); box-shadow: 0 10px 26px -12px rgba(var(--box_shadow_color), 0.6); } .popup-plat .popUpPlatContent .addFavoriteButton:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(var(--box_shadow_color), 0.7); } /* Fantome : le plat est deja en favori, l'action devient secondaire. */ .popup-plat .popUpPlatContent .removeFavoriteButton { background: transparent; color: var(--text); border-color: var(--pp-filet); box-shadow: none; } .popup-plat .popUpPlatContent .removeFavoriteButton:hover { border-color: var(--text); background: var(--pp-surface); } .popup-plat .popUpPlatContent .toggleFavoriteButton:active { transform: translateY(1px); } /* Suggestions ------------------------------------------------------- */ .popup-plat .popUpPlatContent .suggestionDiv { padding-top: 12px; border-top: 1px solid var(--pp-filet-fin); } .popup-plat .popUpPlatContent > .suggestionDiv > .suggestionTitle { margin: 0 0 12px; font-family: var(--police_texte); color: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; } .popup-plat .suggestionContent { display: flex; flex-direction: column; gap: 10px; } .popup-plat .platSuggestion { display: block; margin: 0; padding: 14px 16px; border: 1px solid var(--pp-filet-fin); border-radius: 14px; background: var(--pp-surface); box-shadow: none; text-align: start; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); } .popup-plat .platSuggestion:hover { border-color: var(--pp-filet); background: var(--pp-surface-forte); transform: translateY(-1px); } .popup-plat .platSuggestion .suggestionHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .popup-plat .platSuggestion .suggestionTitle { margin: 0; font-family: var(--police_titre); color: var(--titre); font-size: 15px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; text-align: start; } .popup-plat .platSuggestion .suggestionFavoriteButtonDiv { position: static; flex: 0 0 auto; padding: 0; line-height: 1; } .popup-plat .platSuggestion .suggestionFavoriteButton { font-size: 17px; color: var(--text); cursor: pointer; } .popup-plat .platSuggestion .suggestionReason { margin: 7px 0 0; font-family: var(--police_texte); color: var(--text); font-size: 12.5px; line-height: 1.5; text-align: start; opacity: 0.82; } .popup-plat .platSuggestion .suggestionReason:empty { display: none; } .popup-plat .platSuggestion .suggestionPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; text-align: start; } .popup-plat .platSuggestion .suggestionPrice p { margin: 0; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--pp-filet-fin); background: var(--background); font-family: var(--police_titre); color: var(--titre); font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; } .popup-plat .platSuggestion .suggestionPrice p:empty { display: none; }