/* ============================================================ LA TIENDA de Ascensión — css/tienda.css Identité BLEUE du deuxième univers de Familia Loryna. Socle partagé : css/commun.css (variables --rouge/--brun/--creme…, navbar, boutons, sections, footer, formulaire, grilles, filet no-aos). Ce fichier : 1. redéfinit ces variables en bleu sous body.tienda-page → tous les composants partagés se recolorent automatiquement ; 2. réécrit les fonds codés en dur (non-variables) de commun.css ; 3. réimplémente, en bleu, les composants de filiation / bulles / éditoriaux qui n'existent que dans restaurant.css (NON lié ici) ; 4. fournit les composants placeholder propres de La Tienda. NB : les @font-face (Lato / Playfair) sont déclarés dans commun.css — on ne les redéclare pas. ============================================================ */ /* ============================================================ 1. PALETTE LA TIENDA (mêmes hex que maison-loryna.css) ============================================================ */ :root { --tienda-bleu-nuit: #0D2035; --tienda-bleu: #1B3A5C; --tienda-bleu-clair: #8CB5C8; --tienda-parchemin: #F7F4EF; --tienda-blanc: #FFFFFF; --tienda-or: #C8941A; } /* ============================================================ 2. RECOLORATION DES VARIABLES PARTAGÉES Redéfinies au niveau : elles cascadent sur tous les descendants (navbar, hero, sections, footer…) et priment sur le :root de commun.css. ============================================================ */ body.tienda-page { --rouge: #1B3A5C; /* accent principal → bleu */ --rouge-dark: #0D2035; /* accent foncé → bleu nuit */ --jaune: #C8941A; /* eyebrow / accent → doré */ --jaune-dark: #a87914; --creme: #F7F4EF; /* fond clair → parchemin */ --creme-dark: #EAE4DA; --brun: #0D2035; /* titres / footer / textes forts → bleu nuit */ --brun-clair: #47617C; /* texte secondaire bleuté */ --blanc: #FFFFFF; --texte: #22303C; /* corps de texte, encre bleutée */ --texte-clair: #5A6B78; --ombre: 0 2px 16px rgba(13,32,53,.13); --or-fin: #C8941A; --or-fin-light: rgba(200,148,26,.12); --transition-douce: .5s cubic-bezier(.25,.46,.45,.94); } /* ---- Fonds codés en dur (rgba rouges/bruns) de commun.css ---- Ces règles de commun.css utilisent des rgba() littéraux, que la redéfinition des variables ne peut pas atteindre. On les réécrit ici, en bleu, plutôt que de modifier commun.css (partagé avec le Restaurante). */ .tienda-page .nav-links a:hover, .tienda-page .nav-links a.active { background: rgba(27,58,92,.08); } .tienda-page .nav-mobile a:hover, .tienda-page .nav-mobile a.active { background: rgba(27,58,92,.08); } /* Pastille d'icône des cartes d'expérience : rgba rouge → bleu */ .tienda-page .service-card .icon { background: rgba(27,58,92,.10); } /* Survol : commun.css passe l'icône en blanc ET la pastille en couleur pleine (.service-card:hover .icon). La règle ci-dessus, plus tardive et de même spécificité, gardait la pastille claire : l'icône blanche disparaissait. On rétablit ici la pastille bleue pleine au survol et sur la carte dépliée. */ .tienda-page .service-card:hover .icon, .tienda-page .service-card.sp-active .icon { background: var(--rouge); color: var(--blanc); } .tienda-page .service-card:hover { box-shadow: 0 8px 30px rgba(13,32,53,.18); } .tienda-page .nav-links a[aria-current="page"] { color: var(--rouge); background: rgba(27,58,92,.10); } .tienda-page .btn-rouge:hover { box-shadow: 0 6px 20px rgba(13,32,53,.32); } /* Hero image (accueil) : voile bleu au lieu de rouge/brun */ .tienda-page .hero-overlay { background: linear-gradient(160deg, rgba(13,32,53,.58) 0%, rgba(27,58,92,.74) 100%); } /* Hero sobre (pages intérieures) : dégradé bleu + fines rayures */ .tienda-page .hero-sobre { background: linear-gradient(135deg, rgba(13,32,53,.95) 0%, rgba(27,58,92,.90) 60%, rgba(13,32,53,.96) 100%), repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(255,255,255,.028) 18px, rgba(255,255,255,.028) 19px); } /* CTA final : bloc bleu fort */ .tienda-page .cta-section { background: linear-gradient(135deg, var(--tienda-bleu-nuit) 0%, var(--tienda-bleu) 100%); } /* ============================================================ 3. FILIATION DANS LA NAVBAR (adapté de restaurant.css, bleu) ============================================================ */ .nav-logo-filiation { display: flex; align-items: center; gap: 0; flex-shrink: 0; text-decoration: none; line-height: 1; margin-left: -1rem; } .nav-filiation-parent { font-family: 'Playfair Display', serif; font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--brun-clair); text-decoration: none; white-space: nowrap; transition: color var(--transition); padding-right: .5rem; opacity: .75; } .nav-filiation-parent:hover { color: var(--rouge); opacity: 1; } /* Navbar volontairement stable : aucune animation permanente, aucun mouvement décoratif. Seules des transitions de couleur / opacité. Le bouton « Nous trouver » n'y « saute » pas au survol : le translateY et l'ombre de .btn-rouge:hover (commun.css) sont neutralisés ici, dans la navbar et le menu mobile seulement. */ .tienda-page .nav-cta .btn:hover, .tienda-page .nav-mobile .btn:hover { transform: none; box-shadow: none; } .nav-filiation-arrow { display: inline-flex; align-items: center; margin: 0 .45rem; color: var(--or-fin); font-size: .7rem; opacity: .7; transition: opacity var(--transition); flex-shrink: 0; } .nav-filiation-child { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 900; letter-spacing: .07em; color: var(--rouge); text-decoration: none; white-space: nowrap; transition: color var(--transition); } .nav-filiation-child:hover { color: var(--rouge-dark); } /* Logo de La Tienda dans la navbar, à la place du taureau du Restaurante. Le fond de navbar est --creme (#F7F4EF) : le bronze du panneau y est lisible. Aucun fond ni cadre : le PNG/WebP a un vrai canal alpha. */ .nav-bull { display: flex; align-items: center; margin-left: .7rem; flex-shrink: 0; background: none; border: none; line-height: 0; } .nav-bull img { width: 34px; height: auto; object-fit: contain; display: block; opacity: .92; transition: opacity var(--transition); } .nav-logo-filiation:hover .nav-bull img { opacity: 1; } @media (max-width: 768px) { .nav-filiation-parent { font-size: .65rem; letter-spacing: .1em; } .nav-filiation-child { font-size: 1.05rem; } .nav-bull img { width: 28px; } } @media (max-width: 380px) { .nav-filiation-parent, .nav-filiation-arrow { display: none; } } /* ============================================================ 4. SOUS-TITRES & SECTIONS ÉDITORIAUX (adapté restaurant.css) ============================================================ */ .lr-section-decorated { position: relative; overflow: hidden; } .lr-section-decorated > .container, .lr-section-decorated > section > .container { position: relative; z-index: 1; } .lr-editorial-label { font-family: 'Playfair Display', serif; font-size: .78rem; font-style: italic; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fin); display: block; margin-bottom: .4rem; opacity: .85; } .lr-section-title-decorated { position: relative; display: inline-block; } .lr-section-title-decorated::after { content: ''; position: absolute; bottom: -.35rem; left: 0; width: 40px; height: 1px; background: var(--or-fin); opacity: .5; transition: width var(--transition-douce); } .text-center .lr-section-title-decorated::after { left: 50%; transform: translateX(-50%); } .lr-section-title-decorated:hover::after { width: 80px; } .divider { color: var(--or-fin); opacity: .45; margin-bottom: 3rem; letter-spacing: .3em; } /* Respiration : sections un peu plus aérées (comme le Restaurante) */ .tienda-page section { padding: 5.5rem 2rem; } .tienda-page .section-title { font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -.01em; } /* ============================================================ 5. GRILLE DES 6 EXPÉRIENCES + BULLE (adapté restaurant.css, bleu) ============================================================ */ .tienda-page .services-grid { grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin-left: auto; margin-right: auto; align-items: start; gap: 2.2rem; } .service-card { transition: transform var(--transition-douce), box-shadow var(--transition-douce), border-color var(--transition-douce); border: 1px solid rgba(13,32,53,.06); } .service-card.sp-trigger { cursor: pointer; user-select: none; } /* État déplié. La barre bleue basse fait la jonction visuelle avec le panneau : elle doit survivre au survol. `.tienda-page .service-card:hover` (section 2) a une spécificité (0,3,0) et `box-shadow` n'est pas cumulable, donc l'état actif doit être au moins aussi spécifique — sinon la barre disparaît dès que le pointeur reste sur la carte que l'on vient de cliquer, et durablement sur tactile à cause du :hover rémanent. */ .tienda-page .service-card.sp-active, .tienda-page .service-card.sp-active:hover { box-shadow: 0 4px 0 var(--rouge), 0 8px 30px rgba(13,32,53,.16); transform: translateY(-3px); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-color: rgba(27,58,92,.16); } /* Sur tactile, le :hover reste collé après le tap : on le neutralise pour que l'apparence de la carte ne dépende que de son état réel. */ @media (hover: none) { .tienda-page .service-card:hover { transform: none; box-shadow: var(--ombre); } } .sp-hint { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); opacity: .45; transition: opacity var(--transition), gap var(--transition); } .sp-hint::after { content: '↓'; font-size: .85rem; line-height: 1; transition: transform var(--transition); display: inline-block; } .service-card:hover .sp-hint { opacity: .8; } .service-card.sp-active .sp-hint { opacity: 1; } .service-card.sp-active .sp-hint::after { transform: rotate(180deg); } .sp-panel { display: none; grid-column: 1 / -1; position: relative; background: var(--blanc); border-radius: 14px; box-shadow: 0 8px 40px rgba(13,32,53,.13), 0 0 0 1px rgba(27,58,92,.09); overflow: visible; margin-top: .25rem; } .sp-panel.sp-open { display: block; animation: spIn .32s cubic-bezier(.25,.46,.45,.94) forwards; } .sp-panel.sp-closing { animation: spOut .24s ease forwards; } @keyframes spIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes spOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } .sp-arrow { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid var(--blanc); pointer-events: none; filter: drop-shadow(0 -2px 3px rgba(13,32,53,.10)); } .sp-inner { display: flex; align-items: flex-start; gap: 2rem; padding: 1.6rem 3rem 1.6rem 2rem; position: relative; } .sp-text-block { flex: 1; min-width: 0; } .sp-titre { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--brun); margin-bottom: .55rem; line-height: 1.25; } .sp-texte { font-family: 'Lato', sans-serif; font-size: .97rem; color: var(--texte-clair); line-height: 1.8; } .sp-media { flex-shrink: 0; width: 240px; border-radius: 10px; overflow: hidden; align-self: center; background: var(--creme-dark); } /* Faute de photo réelle, le média est toujours un fallback signalé */ .sp-media-fallback { height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--brun-clair); font-size: .8rem; letter-spacing: .04em; background: repeating-linear-gradient(45deg, rgba(27,58,92,.05) 0 2px, transparent 2px 16px), linear-gradient(140deg, #EEF3FD 0%, #C8D8F0 100%); } .sp-media-fallback i { font-size: 1.6rem; opacity: .4; } /* ---- Galerie défilante du panneau (cartes Cave épicerie, Céramique…) ---- Les photos d'une carte sont rendues dans une liste masquée à l'intérieur de la carte (.sp-images) puis recopiées par js/tienda.js dans .sp-media. Fondu enchaîné automatique entre les photos, comme le diaporama du Restaurante (points, clavier et balayage restent disponibles). Les photos sont affichées entières (contain) sur fond blanc, comme les fiches produit. */ .sp-images { display: none !important; } .sp-media.has-galerie { background: var(--blanc); border: 1px solid rgba(27,58,92,.14); } .sp-galerie { position: relative; width: 100%; } .sp-galerie-piste { position: relative; width: 100%; height: 180px; } .sp-galerie-piste img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; padding: .5rem; box-sizing: border-box; opacity: 0; transition: opacity .6s ease; pointer-events: none; } .sp-galerie-piste img.sp-slide-active { opacity: 1; pointer-events: auto; } .sp-galerie-dots { display: flex; justify-content: center; gap: .4rem; padding: .45rem 0 .55rem; background: var(--blanc); } .sp-galerie-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(27,58,92,.22); cursor: pointer; transition: background var(--transition), transform var(--transition); } .sp-galerie-dot:hover { background: rgba(27,58,92,.5); } .sp-galerie-dot.is-active { background: var(--or-fin); transform: scale(1.25); } .sp-galerie-compteur { position: absolute; top: .45rem; right: .55rem; font-family: 'Lato', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--blanc); background: rgba(13,32,53,.72); border-radius: 999px; padding: .15rem .5rem; pointer-events: none; } .sp-close { position: absolute; top: .9rem; right: .9rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(13,32,53,.07); border: none; cursor: pointer; font-size: 1.1rem; color: var(--brun); display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); flex-shrink: 0; padding: 0; line-height: 1; } .sp-close:hover { background: var(--rouge); color: var(--blanc); } @media (max-width: 900px) { .tienda-page .services-grid { grid-template-columns: repeat(2, 1fr); } .sp-media { width: 200px; } .sp-inner { padding: 1.3rem 2.5rem 1.3rem 1.5rem; } } @media (max-width: 600px) { .tienda-page .services-grid { grid-template-columns: 1fr; } .sp-inner { flex-direction: column; gap: 1rem; padding: 1.2rem 2.2rem 1.2rem 1.2rem; } .sp-media { width: 100%; } .sp-media-fallback { height: 120px; } .sp-galerie-piste { height: 220px; } .sp-titre { font-size: 1rem; } .sp-texte { font-size: .9rem; } } /* ============================================================ 6. HERO — accueil + ligne eyebrow ============================================================ */ @keyframes heroLineIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } .hero-eyebrow-line { display: block; width: 32px; height: 1px; background: var(--or-fin); margin: .6rem auto 1rem; transform-origin: center; opacity: 0; animation: heroLineIn .8s ease forwards; animation-delay: .5s; } /* Mot outline en arrière-plan (composant .hero-ghost de commun.css). « ASCENSIÓN » fait 9 signes contre 6 à « Loryna » : la taille de commun.css déborderait trop et écraserait le titre. Le contour est aussi allégé, le fond bleu nuit étant plus sombre que la photo du Restaurante : à contraste égal, le trait ressortait trop et venait concurrencer la baseline dorée. Le rognage est assuré par .hero { overflow: hidden }. */ .tienda-page .hero-ghost span { font-size: clamp(3.2rem, 12vw, 10.5rem); -webkit-text-stroke: 2px rgba(255,255,255,.15); text-stroke: 2px rgba(255,255,255,.15); } /* Doré éclairci, réservé aux fonds bleu nuit des heros. Le doré d'identité (#C8941A) n'atteint que 4,44:1 sur ce fond, soit juste sous le minimum AA de 4,5:1 ; celui-ci monte à 6,1:1 sans changer la teinte. Appliqué au surtitre comme à la baseline pour qu'ils restent identiques. */ .tienda-page .hero .eyebrow, .tienda-page .hero-sobre .eyebrow, .tienda-hero-baseline { color: #E0B24A; } /* Baseline de positionnement, sous le titre du hero d'accueil */ .tienda-hero-baseline { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: .02em; margin: -.4rem 0 1.1rem; } /* Sur mobile le titre passe sur deux lignes et le hero se resserre : le mot outline vient alors se poser sur la baseline. On le remonte au-dessus du titre et on l'allège encore, pour qu'il reste un décor. */ @media (max-width: 600px) { .tienda-page .hero:not(.hero-sobre) .hero-ghost { top: 26%; } .tienda-page .hero-ghost span { font-size: clamp(2.4rem, 13vw, 4rem); -webkit-text-stroke: 1.5px rgba(255,255,255,.13); text-stroke: 1.5px rgba(255,255,255,.13); } } /* ============================================================ 7. BANDEAU IMMERSIF (comme .ambiance-strip du Restaurante) ============================================================ */ .tienda-immersive { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 4rem 2rem; color: var(--blanc); } .tienda-immersive-bg { position: absolute; inset: 0; z-index: 0; /* TODO(CLIENT) : remplacer par une photographie d'ambiance réelle */ background: radial-gradient(circle at 70% 30%, rgba(140,181,200,.18), transparent 45%), repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 24px), linear-gradient(120deg, #0D2035 0%, #1B3A5C 60%, #0D2035 100%); } .tienda-immersive-texte { position: relative; z-index: 1; max-width: 760px; font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.35; font-style: italic; text-shadow: 0 2px 18px rgba(0,0,0,.4); } /* ============================================================ 8. FILET ET LIEN ÉDITORIAUX (adapté restaurant.css) Utilisés par la section « Histoire d'Ascensión » de l'accueil. ============================================================ */ .ambiance-photo-line { width: 36px; height: 2px; background: var(--rouge); margin-bottom: 1.4rem; border-radius: 2px; opacity: .6; } .ambiance-photo-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rouge); text-decoration: none; border-bottom: 1px solid rgba(27,58,92,.3); padding-bottom: .15rem; transition: gap var(--transition), border-color var(--transition), color var(--transition); } .ambiance-photo-link:hover { gap: .9rem; color: var(--rouge-dark); border-color: var(--rouge-dark); } /* ============================================================ 9. FOOTER — SIGNATURE FILIATION (adapté restaurant.css) ============================================================ */ .footer-filiation { text-align: center; padding: 1rem 0 0; margin-top: 2rem; border-top: 1px solid rgba(200,148,26,.12); } .footer-filiation a { font-family: 'Playfair Display', serif; font-size: .78rem; font-style: italic; letter-spacing: .15em; text-transform: uppercase; color: var(--or-fin); opacity: .6; text-decoration: none; transition: opacity var(--transition); } .footer-filiation a:hover { opacity: 1; } /* ============================================================ 10. COMPOSANTS PLACEHOLDER PROPRES À LA TIENDA ============================================================ */ /* Bloc générique (carte, zone vide) — clairement volontaire */ .tienda-placeholder { border: 1px dashed rgba(27,58,92,.28); border-radius: var(--rayon); background: rgba(140,181,200,.08); padding: 2.5rem 1.5rem; text-align: center; color: var(--texte-clair); } .tienda-placeholder i { font-size: 1.6rem; color: var(--tienda-bleu-clair); margin-bottom: .6rem; display: block; } /* L'absence de photo d'une fiche produit est gérée par .tienda-produit-placeholder (section 17). */ /* ============================================================ 11. GRILLES & UTILITAIRES DE PAGES CATÉGORIES ============================================================ */ .tienda-cards-grid { display: grid; gap: 1.6rem; max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .tienda-cat-grid { display: grid; gap: 1.2rem; max-width: 900px; margin: 1.5rem auto 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .tienda-cat-chip { display: flex; align-items: center; gap: .7rem; background: var(--blanc); border: 1px solid rgba(13,32,53,.08); border-radius: var(--rayon); padding: .9rem 1.1rem; color: var(--brun); font-weight: 600; box-shadow: var(--ombre); } .tienda-cat-chip i { color: var(--tienda-bleu-clair); font-size: 1.15rem; flex-shrink: 0; } /* Variante cliquable (univers produits de l'accueil) */ a.tienda-cat-chip { text-decoration: none; transition: transform var(--transition-douce), box-shadow var(--transition-douce); } a.tienda-cat-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(13,32,53,.14); border-color: rgba(140,181,200,.55); } a.tienda-cat-chip:hover i { color: var(--rouge); } /* Bandes de sections alternées (épicerie, cave) */ .tienda-section-alt { background: var(--blanc); } .tienda-lead { max-width: 640px; margin: 0 auto 2.5rem; text-align: center; color: var(--texte-clair); font-size: 1.05rem; } /* Ancre : compense la navbar fixe (72px) au scroll */ .tienda-anchor { scroll-margin-top: 88px; } /* Adresse postale (parametres.json) : saisie sur deux lignes dans le CMS, affichée telle quelle (footer des sept pages, page Contact). */ .tienda-page [data-t="site.adresse"] { white-space: pre-line; } /* Note formulaire de démonstration (contact) */ .tienda-form-demo-note { display: flex; align-items: flex-start; gap: .6rem; background: rgba(200,148,26,.08); border: 1px solid rgba(200,148,26,.3); border-radius: var(--rayon); padding: .9rem 1.1rem; margin-bottom: 1.5rem; color: var(--texte-clair); font-size: .9rem; } .tienda-form-demo-note i { color: var(--tienda-or); margin-top: .15rem; } /* Bouton d'envoi neutralisé */ .tienda-page .btn[disabled], .tienda-page .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* ============================================================ 12. PLAQUE DU LOGO (footer) Le logo fourni est un panneau en bronze sur fond réellement transparent (vrai canal alpha). Sur le bleu nuit du footer (--brun #0D2035), le bronze chaud ressort suffisamment : aucun fond, aucun cadre, aucune ombre — il se pose directement sur le fond. Même traitement que dans la navbar : voir .nav-bull. ============================================================ */ .tienda-plaque { display: inline-flex; } .tienda-plaque img { display: block; width: 100%; height: auto; max-width: 88px; object-fit: contain; } .tienda-plaque.is-footer { margin-bottom: 1rem; } /* ============================================================ 13. HISTOIRE D'ASCENSIÓN Section éditoriale sobre : tant que les détails biographiques ne sont pas fournis, seuls le chapô et la continuité sont affichés. ============================================================ */ .tienda-histoire { background: var(--tienda-parchemin); } .tienda-histoire-layout { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; } .tienda-histoire-titre { font-family: 'Playfair Display', serif; font-size: clamp(2.1rem, 4.5vw, 3.2rem); color: var(--brun); line-height: 1.15; margin-bottom: 1.2rem; } .tienda-histoire-chapo { font-size: 1.08rem; color: var(--texte); line-height: 1.85; margin-bottom: 1.4rem; } .tienda-histoire-texte { color: var(--texte-clair); line-height: 1.85; margin-bottom: 1.2rem; } .tienda-histoire-continuite { border-left: 2px solid var(--or-fin); padding-left: 1.1rem; margin-bottom: 1.8rem; color: var(--texte-clair); font-style: italic; line-height: 1.8; } @media (max-width: 900px) { .tienda-histoire-layout { grid-template-columns: 1fr; gap: 2.2rem; } } /* ============================================================ 14. MOMENTS DE RESTAURATION (petit-déjeuner, journée) ============================================================ */ /* Flex centré plutôt que `grid auto-fit` : avec 5 cartes, auto-fit donnait 4 + 1 alignées à gauche. Ici la dernière rangée incomplète est réellement centrée, quel que soit le nombre de cartes rendues par data-t-list. */ .tienda-moments-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; max-width: 1100px; margin: 0 auto; } .tienda-moment-card { flex: 0 1 calc((100% - 2 * 1.6rem) / 3); min-width: 260px; background: var(--blanc); border: 1px solid rgba(13,32,53,.08); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 2rem 1.7rem; display: flex; flex-direction: column; } @media (max-width: 980px) { .tienda-moment-card { flex-basis: calc((100% - 1.6rem) / 2); } } @media (max-width: 640px) { .tienda-moment-card { flex-basis: 100%; min-width: 0; } } .tienda-moment-card > i { font-size: 1.7rem; color: var(--tienda-bleu-clair); margin-bottom: .9rem; } .tienda-moment-card h3 { font-family: 'Playfair Display', serif; font-size: 1.28rem; color: var(--brun); margin-bottom: .5rem; } .tienda-moment-texte { color: var(--texte-clair); font-size: .96rem; line-height: 1.75; margin-bottom: 1.1rem; } .tienda-moment-items { list-style: none; margin: 0 0 .4rem; padding: 0; } .tienda-moment-items li { position: relative; padding-left: 1.25rem; margin-bottom: .55rem; color: var(--texte); font-size: .97rem; line-height: 1.6; } .tienda-moment-items li::before { content: '\2726'; position: absolute; left: 0; top: 0; color: var(--or-fin); opacity: .6; font-size: .8rem; } .tienda-moment-items li em { display: block; font-style: normal; font-size: .86rem; color: var(--texte-clair); } .tienda-moment-note { margin-top: auto; padding-top: .8rem; font-size: .86rem; color: var(--texte-clair); font-style: italic; } /* ============================================================ 15. ÉVÉNEMENTS ============================================================ */ .tienda-evenements-liste { display: grid; gap: 1.6rem; max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .tienda-evenement-card { background: var(--blanc); border: 1px solid rgba(13,32,53,.08); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; text-align: left; } .tienda-evenement-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .tienda-evenement-corps { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; } .tienda-evenement-type { font-family: 'Lato', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tienda-bleu-clair); } .tienda-evenement-titre { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--brun); line-height: 1.3; } .tienda-evenement-quand { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .9rem; color: var(--texte-clair); } .tienda-evenement-desc { font-size: .95rem; color: var(--texte-clair); line-height: 1.7; } .tienda-evenement-pied { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .tienda-evenement-tarif { font-family: 'Playfair Display', serif; color: var(--brun); font-size: .98rem; } .tienda-evenement-statut { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; padding: .2rem .65rem; color: var(--tienda-bleu); background: rgba(140,181,200,.2); } /* ============================================================ 16. ÉTAT VIDE Affiché tant qu'aucun contenu n'est publié. C'est aussi le contenu visible sans JavaScript : il doit rester présentable seul. ============================================================ */ .tienda-empty-state { grid-column: 1 / -1; border: 1px dashed rgba(27,58,92,.25); border-radius: 14px; background: linear-gradient(160deg, rgba(247,244,239,.9) 0%, rgba(238,243,253,.9) 100%); padding: 2.6rem 1.8rem; text-align: center; } .tienda-empty-state i { font-size: 1.7rem; color: var(--tienda-bleu-clair); display: block; margin-bottom: .7rem; } .tienda-empty-state p { color: var(--texte-clair); font-size: 1rem; max-width: 480px; margin: 0 auto; } /* ============================================================ 17. PRODUITS & FOURCHETTES DE PRIX Aucun prix n'est inventé : le prix ne s'affiche que si le CMS contient une fourchette et que la case « afficher le prix » est cochée (le HTML porte alors data-t-show). ============================================================ */ .tienda-produits-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .tienda-produit-card { background: var(--blanc); border: 1px solid rgba(27,58,92,.3); border-radius: var(--rayon); overflow: hidden; /* Ombre plus présente que --ombre : la carte blanche doit se détacher du fond parchemin des pages produits. */ box-shadow: 0 4px 18px rgba(13,32,53,.10), 0 1px 3px rgba(13,32,53,.06); display: flex; flex-direction: column; transition: transform var(--transition-douce), box-shadow var(--transition-douce), border-color var(--transition-douce); } /* Survol : légère élévation, bordure affirmée, zoom discret de la photo. */ .tienda-produit-card:hover { transform: translateY(-5px); border-color: var(--tienda-bleu); box-shadow: 0 16px 36px rgba(13,32,53,.18), 0 2px 6px rgba(13,32,53,.08); } .tienda-produit-card:hover .tienda-produit-media img { transform: scale(1.05); } /* Média : photo si le CMS en fournit une, sinon placeholder graphique. Les deux occupent le même cadrage, donc les hauteurs de cartes restent cohérentes qu'un produit soit illustré ou non. La photo est affichée entière dans le cadre (contain), sur fond blanc, jamais rognée ; la marge interne absorbe le zoom de 5 % au survol. */ .tienda-produit-media { position: relative; overflow: hidden; background: var(--blanc); } .tienda-produit-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; display: block; padding: .75rem; box-sizing: border-box; transition: transform var(--transition-douce); } /* Icône + libellé « Visuel à venir », pour dire clairement que la photo manque encore. */ .tienda-produit-placeholder { width: 100%; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--tienda-bleu); text-align: center; background: repeating-linear-gradient(45deg, rgba(27,58,92,.05) 0 2px, transparent 2px 16px), linear-gradient(140deg, #EEF3FD 0%, #C8D8F0 60%, #A8C0E4 100%); } .tienda-produit-placeholder i { font-size: 1.7rem; opacity: .5; } .tienda-produit-placeholder span { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } /* Badges posés sur le média (exemple, mise en avant) */ .tienda-produit-badges { position: absolute; top: .6rem; left: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; } .tienda-produit-badge { font-family: 'Lato', sans-serif; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px; background: rgba(13,32,53,.82); color: var(--tienda-blanc); backdrop-filter: blur(2px); } .tienda-produit-badge.is-avant { background: rgba(200,148,26,.94); color: #2A1D00; } .tienda-produit-corps { padding: 1.1rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; } /* Pastille de catégorie précise (sous-catégorie saisie dans le CMS) */ .tienda-produit-categorie { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tienda-bleu); background: rgba(27,58,92,.08); border-radius: 999px; padding: .2rem .55rem; margin-bottom: .1rem; } .tienda-produit-nom { font-family: 'Playfair Display', serif; font-size: 1.08rem; color: var(--brun); line-height: 1.3; overflow-wrap: anywhere; } .tienda-produit-meta { font-size: .82rem; color: var(--texte-clair); letter-spacing: .03em; } .tienda-produit-desc { font-size: .92rem; color: var(--texte-clair); line-height: 1.65; } .tienda-prix { margin-top: auto; padding-top: .6rem; font-family: 'Playfair Display', serif; font-size: .96rem; color: var(--brun); } .tienda-prix .tienda-prix-prefixe { font-family: 'Lato', sans-serif; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-clair); margin-right: .35rem; } /* Posée par data-t-class depuis le champ CMS « Mettre en avant » */ .tienda-produit-card.is-mise-en-avant { border-color: rgba(200,148,26,.45); } /* Fiche de démonstration : volontairement en retrait */ .tienda-produit-card.is-exemple { border-style: dashed; border-color: rgba(27,58,92,.3); } /* En-tête d'une catégorie de produits */ .tienda-categorie { max-width: 1100px; margin: 0 auto 3.5rem; } .tienda-categorie:last-child { margin-bottom: 0; } .tienda-categorie-entete { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; } .tienda-categorie-entete i { color: var(--tienda-bleu-clair); font-size: 1.2rem; } .tienda-categorie-entete h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--brun); } .tienda-categorie-desc { color: var(--texte-clair); line-height: 1.75; margin-bottom: 1.4rem; max-width: 640px; } /* ============================================================ 18. CAPACITÉS D'ACCUEIL La capacité future de la terrasse est un bloc distinct, masqué par défaut : le site ne doit pas laisser croire qu'elle est disponible. ============================================================ */ .tienda-capacites { display: grid; gap: 1.2rem; max-width: 760px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .tienda-capacite { background: var(--blanc); border: 1px solid rgba(13,32,53,.08); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.6rem 1.2rem; text-align: center; } .tienda-capacite i { font-size: 1.4rem; color: var(--tienda-bleu-clair); display: block; margin-bottom: .6rem; } .tienda-capacite-nombre { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--brun); line-height: 1; display: block; } .tienda-capacite-nombre::before { content: '≈ '; font-size: 1.1rem; opacity: .55; } .tienda-capacite-label { display: block; margin-top: .4rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-clair); } .tienda-capacite.is-future { border-style: dashed; border-color: rgba(200,148,26,.45); background: rgba(200,148,26,.05); } /* ============================================================ 19. PAGE CONTACT — formulaire + coordonnées ============================================================ */ .tienda-contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; max-width: 1100px; align-items: start; } @media (max-width: 900px) { .tienda-contact-layout { grid-template-columns: 1fr; gap: 2.5rem; } } /* ============================================================ 20. ATTRIBUT hidden La règle `[hidden] { display: none }` du navigateur a la spécificité la plus faible : toute règle posant un `display` explicite (flex, grid, inline-flex…) la neutralise. Or js/tienda-content.js s'appuie sur `hidden` pour masquer les blocs dont la donnée n'est pas encore fournie (réseaux sociaux, capacité future, date d'ouverture, accès, prix…). On rétablit donc la règle avec la priorité nécessaire. ============================================================ */ .tienda-page [hidden] { display: none !important; } /* ============================================================ 21. ACCESSIBILITÉ — focus visible homogène + texte pour lecteurs d'écran ============================================================ */ /* Texte restitué à la voix mais non affiché (ex. « environ » devant une capacité d'accueil, dont le chiffre est une approximation). */ .tienda-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tienda-page a:focus-visible, .tienda-page button:focus-visible, .tienda-page input:focus-visible, .tienda-page textarea:focus-visible, .tienda-page [tabindex]:focus-visible { outline: 2px solid var(--tienda-or); outline-offset: 2px; border-radius: 4px; } /* ============================================================ 22. PRÉFÉRENCE MOUVEMENT RÉDUIT Couvre les animations propres à La Tienda (commun.css / restaurant.css n'ont pas de bloc reduced-motion). tienda.js coupe aussi AOS. ============================================================ */ @media (prefers-reduced-motion: reduce) { .hero-eyebrow-line, .hero-ghost span, .sp-panel.sp-open, .sp-panel.sp-closing { animation: none !important; } .hero-ghost span { clip-path: none !important; } /* Galerie : changement de photo instantané, sans fondu */ .sp-galerie-piste img, .sp-galerie-dot, .sp-galerie-dot.is-active { transition: none !important; } /* `scroll-behavior: smooth` est déclaré sur (commun.css) : un sélecteur `.tienda-page *` ne peut pas l'atteindre, .tienda-page étant posé sur . commun.css étant partagé avec le Restaurante, on cible l'élément défilant depuis ici. */ html:has(body.tienda-page) { scroll-behavior: auto !important; } .tienda-page .service-card, .tienda-page .service-card:hover, .tienda-page .service-card.sp-active, .tienda-page .service-card.sp-active:hover, .sp-hint, .sp-hint::after, .nav-bull img, .tienda-moment-card, .tienda-evenement-card, .tienda-produit-card, .tienda-produit-card:hover, .tienda-produit-media img, .tienda-produit-card:hover .tienda-produit-media img, a.tienda-cat-chip, a.tienda-cat-chip:hover { transform: none !important; transition: none !important; } /* La barre bleue de l'état déplié reste, elle : c'est un repère d'état, pas une animation. */ .tienda-page .service-card.sp-active, .tienda-page .service-card.sp-active:hover { box-shadow: 0 4px 0 var(--rouge), 0 8px 30px rgba(13,32,53,.16) !important; } } /* ============================================================ 23. RESPONSIVE FINAL ============================================================ */ @media (max-width: 768px) { .tienda-page section { padding: 4rem 1.25rem; } .tienda-immersive { min-height: 260px; } .tienda-evenements-liste { grid-template-columns: 1fr; } .tienda-categorie { margin-bottom: 2.6rem; } } @media (max-width: 480px) { .tienda-cards-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .tienda-produits-grid { grid-template-columns: 1fr; } .tienda-capacites { grid-template-columns: 1fr; } .tienda-plaque img { max-width: 76px; } .tienda-histoire-titre { font-size: 2rem; } }