/* * stella-carte.css * Valeurs hex directes — aucune var() CSS (thème non accessible depuis plugin) * #003F2D basilic | #FFF3DE crème | #FF4300 spritz | #723327 terre-dk */ /* ============================================================ LISTE DES PLATS ============================================================ */ .stella-carte { display: flex; flex-direction: column; } .stella-plat { display: flex; align-items: flex-start; gap: 20px; padding: 28px 0; border-top: 1px solid rgba(0, 63, 45, 0.08); cursor: pointer; } .stella-carte > .stella-plat:first-child { border-top: none; } /* Vignette */ .stella-plat__photo { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background-color: rgba(0, 63, 45, 0.05); } .stella-plat__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .stella-plat--avec-photo:hover .stella-plat__photo img { transform: scale(1.15); } /* Infos texte */ .stella-plat__infos { flex: 1 1 auto; min-width: 0; } .stella-plat__ligne-titre { display: flex; align-items: baseline; gap: 8px; } .stella-plat__nom { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; color: #003F2D; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .stella-plat__filet { flex: 1 1 auto; min-width: 12px; border-bottom: 1.5px dotted rgba(114, 51, 39, 0.4); transform: translateY(-3px); } .stella-plat__prix { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; color: #723327; white-space: nowrap; flex-shrink: 0; } .stella-plat:hover .stella-plat__prix { color: #FF4300; } .stella-plat__composition { font-size: 14px; line-height: 1.5; color: rgba(0, 63, 45, 0.8); margin: 6px 0 0; } /* ============================================================ MODALE Structure HTML : #stella-modal.stella-modal ← fixed plein écran, flex centré .stella-modal__overlay ← fond semi-opaque, fixed inset 0 button.stella-modal__fermer ← fixed coin haut-droit, HORS boite .stella-modal__boite ← la popup, overflow:visible .stella-modal__photo-wrap ← photo carrée, overflow:hidden, coins haut ronds .stella-modal__contenu ← fond basilic, texte crème .stella-modal__allergenes-bloc ← fond crème, texte basilic, coins bas ronds Le JS déplace #stella-modal dans pour sortir du stacking context de Divi → z-index réellement efficace. ============================================================ */ /* Conteneur plein écran */ .stella-modal { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; pointer-events: auto !important; } .stella-modal[hidden] { display: none !important; } /* Fond obscurci */ .stella-modal__overlay { position: fixed !important; inset: 0 !important; z-index: 0 !important; background-color: rgba(0, 15, 10, 0.75) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Bouton × — fixed, coin haut-droit écran, z-index max */ .stella-modal__fermer { position: fixed !important; top: 16px !important; right: 16px !important; z-index: 2147483647 !important; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 2px solid #FFF3DE !important; background-color: #003F2D !important; color: #FFF3DE !important; font-size: 26px !important; font-weight: 300 !important; line-height: 1 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important; box-sizing: border-box !important; transition: background-color 0.2s ease; } .stella-modal__fermer:hover { background-color: #FF4300 !important; border-color: #FF4300 !important; } /* La boîte popup — au-dessus de l'overlay */ .stella-modal__boite { position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; width: min(460px, 92vw) !important; max-height: 88vh !important; overflow: visible !important; /* chaque enfant gère ses propres coins */ box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important; border-radius: 20px !important; } /* Photo — carrée, coins arrondis en haut uniquement */ .stella-modal__photo-wrap { width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 20px 20px 0 0 !important; background-color: #002318 !important; flex-shrink: 0 !important; } .stella-modal__photo-wrap--vide { display: none !important; } .stella-modal__photo { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Contenu texte — fond basilic plein */ .stella-modal__contenu { width: 100% !important; box-sizing: border-box !important; padding: 20px 24px !important; background-color: #003F2D !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; /* coins haut ronds uniquement si pas de photo */ border-radius: 0 !important; } /* Sans photo : coins haut ronds sur le contenu */ .stella-modal__photo-wrap--vide + .stella-modal__contenu { border-radius: 20px 20px 0 0 !important; } /* Ligne nom + filet + prix */ .stella-modal__ligne-titre { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 10px !important; flex-wrap: nowrap !important; width: 100% !important; } .stella-modal__nom { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 22px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #FFF3DE !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-shrink: 1 !important; min-width: 0 !important; } .stella-modal__filet { flex: 1 1 auto !important; min-width: 12px !important; border: none !important; border-bottom: 1.5px dotted rgba(255, 243, 222, 0.35) !important; height: 0 !important; transform: translateY(-4px) !important; } .stella-modal__prix { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 22px !important; color: #FF4300 !important; white-space: nowrap !important; flex-shrink: 0 !important; } .stella-modal__composition { font-family: 'Inter', sans-serif !important; font-size: 14px !important; line-height: 1.6 !important; color: #FFF3DE !important; margin: 0 !important; } /* Bandeau allergènes — fond crème plein, coins arrondis en bas */ .stella-modal__allergenes-bloc { width: 100% !important; box-sizing: border-box !important; padding: 10px 24px 12px !important; background-color: #FFF3DE !important; border-radius: 0 0 20px 20px !important; display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; flex-shrink: 0 !important; flex-wrap: wrap !important; } .stella-modal__allergenes-titre { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: rgba(0, 63, 45, 0.55) !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; } .stella-modal__allergenes-liste { font-family: 'Inter', sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; color: #003F2D !important; font-weight: 500 !important; margin: 0 !important; } /* ============================================================ ACCESSIBILITÉ ============================================================ */ .stella-plat:focus-visible { outline: 2px solid #FF4300; outline-offset: 3px; border-radius: 4px; } .stella-modal__fermer:focus-visible { outline: 2px solid #FFF3DE !important; outline-offset: 3px !important; } @media (prefers-reduced-motion: reduce) { .stella-plat__photo img { transition: none; } .stella-modal__boite { animation: none; } } /* ============================================================ MOBILE — bottom sheet ============================================================ */ @media (max-width: 600px) { .stella-plat { gap: 14px; padding: 20px 0; } .stella-plat__photo { flex: 0 0 60px; width: 60px; height: 60px; } .stella-modal { align-items: flex-end !important; padding: 0 !important; } .stella-modal__boite { width: 100% !important; max-height: 90vh !important; border-radius: 20px 20px 0 0 !important; } .stella-modal__photo-wrap { aspect-ratio: 4 / 3 !important; border-radius: 20px 20px 0 0 !important; } .stella-modal__allergenes-bloc { border-radius: 0 !important; } .stella-modal__contenu { padding: 16px 20px !important; } .stella-modal__allergenes-bloc { padding: 10px 20px 12px !important; } }