/* ══════════════════════════════════════════════════════════════════ themes.css — variations visuelles par type d'établissement. site.js pose l'attribut data-theme sur d'après /api/site- settings.php (clé "theme"). Chaque bloc ne redéfinit que la typographie, les rayons et quelques touches décoratives — les couleurs restent pilotées par --gold/--brown (2 couleurs choisies par le propriétaire), injectées séparément en inline par site.js et donc toujours prioritaires sur les défauts ci-dessous. Sans attribut data-theme (avant le premier fetch), le thème "Bistrot Classique" défini dans style.css:root s'applique déjà par défaut. ══════════════════════════════════════════════════════════════════ */ /* ── Bistrot Classique (défaut — répété ici pour un retour explicite) ── */ [data-theme="bistrot"]{ --font-heading:Georgia,'Iowan Old Style','Palatino Linotype',serif; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --radius:18px;--radius-sm:10px; } /* ── Bar & Lounge ── */ [data-theme="bar_lounge"]{ --font-heading:'Bahnschrift','Arial Narrow Bold','Helvetica Neue Condensed Bold',Arial,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --radius:8px;--radius-sm:5px; } /* ── Pizzeria Italienne ── */ [data-theme="pizzeria"]{ --font-heading:Georgia,'Big Caslon','Palatino Linotype',serif; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --radius:24px;--radius-sm:13px; } /* ── Burger & Fast-food ── */ [data-theme="burger"]{ --font-heading:'Impact','Arial Narrow Bold','Haettenschweiler',Arial,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --radius:6px;--radius-sm:4px; } /* ── Sushi & Asiatique ── */ [data-theme="sushi"]{ --font-heading:'Hiragino Mincho ProN','Yu Mincho',Georgia,serif; --font-body:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif; --radius:4px;--radius-sm:3px; } /* ── Café & Brunch ── */ [data-theme="cafe"]{ --font-heading:'Snell Roundhand','Brush Script MT','Segoe Script',cursive; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --radius:20px;--radius-sm:12px; } /* ══════════════════════════════════════════════════════════════════ Motifs décoratifs du hero — surcouche générée en CSS pur (aucune image), posée sur .hero via ::before pour rester non-invasive. ══════════════════════════════════════════════════════════════════ */ [data-theme] .hero{position:relative;overflow:hidden} [data-theme] .hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5} [data-theme] .hero > *{position:relative} [data-theme="bar_lounge"] .hero::before{ background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px); } [data-theme="pizzeria"] .hero::before{ background-image:radial-gradient(rgba(255,255,255,.14) 1.5px,transparent 1.5px); background-size:22px 22px; } [data-theme="burger"] .hero::before{ background:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px); } [data-theme="sushi"] .hero::before{ background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:16px 16px; opacity:.35; } [data-theme="cafe"] .hero::before{ background-image:radial-gradient(rgba(255,255,255,.12) 2px,transparent 2px); background-size:28px 28px; } /* Même famille de motif, en beaucoup plus discret, sur les autres sections sombres (footer) pour une identité cohérente de haut en bas de page — pas seulement dans le hero. */ footer.site-footer{position:relative;overflow:hidden} footer.site-footer::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35} footer.site-footer > *{position:relative} [data-theme="bar_lounge"] footer.site-footer::before{background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 26px)} [data-theme="pizzeria"] footer.site-footer::before{background-image:radial-gradient(rgba(255,255,255,.1) 1.5px,transparent 1.5px);background-size:22px 22px} [data-theme="burger"] footer.site-footer::before{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px)} [data-theme="sushi"] footer.site-footer::before{background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:16px 16px} [data-theme="cafe"] footer.site-footer::before{background-image:radial-gradient(rgba(255,255,255,.08) 2px,transparent 2px);background-size:28px 28px} /* ══════════════════════════════════════════════════════════════════ Touches d'animation par thème — chacune signe l'ambiance du commerce. Toujours désactivées si l'utilisateur préfère moins de mouvement (règle groupée en bas de fichier). ══════════════════════════════════════════════════════════════════ */ /* Bistrot — chaleur discrète : lueur douce sur le bouton principal */ [data-theme="bistrot"] .btn-gold{animation:bistrotGlow 3.5s ease-in-out infinite} @keyframes bistrotGlow{ 0%,100%{box-shadow:0 0 0 rgba(245,200,66,0)} 50%{box-shadow:0 0 16px rgba(245,200,66,.55)} } /* Bar & Lounge — néon qui respire */ [data-theme="bar_lounge"] .hero-eyebrow,[data-theme="bar_lounge"] .section-eyebrow{animation:loungeNeon 2.6s ease-in-out infinite} @keyframes loungeNeon{ 0%,100%{opacity:.75;text-shadow:0 0 6px rgba(201,166,107,.4)} 50%{opacity:1;text-shadow:0 0 14px rgba(201,166,107,.85)} } [data-theme="bar_lounge"] .card{transition:transform .25s ease,box-shadow .25s ease} [data-theme="bar_lounge"] .card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.18)} /* Pizzeria — badge qui oscille comme sorti du four, cartes qui se dandinent */ [data-theme="pizzeria"] .hero-eyebrow,[data-theme="pizzeria"] .section-eyebrow{position:relative;padding-right:26px} [data-theme="pizzeria"] .hero-eyebrow::after,[data-theme="pizzeria"] .section-eyebrow::after{ content:'🍕';position:absolute;right:0;top:50%;font-size:14px; animation:pizzaWobble 2.2s ease-in-out infinite;transform-origin:60% 60%; } @keyframes pizzaWobble{ 0%,100%{transform:translateY(-50%) rotate(-8deg)} 50%{transform:translateY(-50%) rotate(10deg)} } [data-theme="pizzeria"] .card{transition:transform .2s ease} [data-theme="pizzeria"] .card:hover{transform:rotate(-1deg) translateY(-2px)} /* Burger — bouton "stamp", titres percutants */ [data-theme="burger"] .btn{transition:transform .12s ease} [data-theme="burger"] .btn:active{transform:scale(.93)} [data-theme="burger"] .hero h1{animation:burgerPunch .5s ease-out} @keyframes burgerPunch{ 0%{opacity:0;transform:scale(.9)} 100%{opacity:1;transform:scale(1)} } /* Sushi — minimalisme : fondu net, soulignement qui glisse */ [data-theme="sushi"] .hero h1,[data-theme="sushi"] .hero p{animation:sushiReveal .6s ease-out both} [data-theme="sushi"] .hero p{animation-delay:.1s} @keyframes sushiReveal{ 0%{opacity:0;transform:translateY(6px)} 100%{opacity:1;transform:translateY(0)} } [data-theme="sushi"] nav.main-nav a{position:relative} [data-theme="sushi"] nav.main-nav a::after{ content:'';position:absolute;left:16px;right:16px;bottom:4px;height:1px; background:var(--gold-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease; } [data-theme="sushi"] nav.main-nav a:hover::after{transform:scaleX(1)} /* Café & Brunch — petite vapeur qui monte, bouton qui rebondit */ [data-theme="cafe"] .hero-eyebrow,[data-theme="cafe"] .section-eyebrow{position:relative;padding-right:20px} [data-theme="cafe"] .hero-eyebrow::after,[data-theme="cafe"] .section-eyebrow::after{ content:'~';position:absolute;right:2px;top:-2px;font-weight:900; animation:cafeSteam 2.4s ease-in-out infinite; } @keyframes cafeSteam{ 0%{opacity:0;transform:translateY(4px)} 40%{opacity:.9} 100%{opacity:0;transform:translateY(-10px)} } [data-theme="cafe"] .btn-gold:hover{animation:cafeBounce .4s ease} @keyframes cafeBounce{ 0%,100%{transform:translateY(-1px)} 50%{transform:translateY(-5px)} } /* ══════════════════════════════════════════════════════════════════ Illustration héro — une icône SVG différente par thème (voir le markup dans public/index.html), générée en CSS/SVG pur, aucune image externe. Se teinte automatiquement via currentColor/--gold. ══════════════════════════════════════════════════════════════════ */ [data-theme] .hero > .hero-art{position:absolute;top:50%;right:-6px;transform:translateY(-50%);width:230px;height:230px;color:var(--gold-accent);opacity:.15;pointer-events:none;z-index:0} .hero-art svg{display:none;width:100%;height:100%} [data-theme="bistrot"] .hero-art svg[data-art="bistrot"]{display:block} [data-theme="bar_lounge"] .hero-art svg[data-art="bar_lounge"]{display:block} [data-theme="pizzeria"] .hero-art svg[data-art="pizzeria"]{display:block} [data-theme="burger"] .hero-art svg[data-art="burger"]{display:block} [data-theme="sushi"] .hero-art svg[data-art="sushi"]{display:block} [data-theme="cafe"] .hero-art svg[data-art="cafe"]{display:block} @media(max-width:900px){.hero-art{width:150px;height:150px;opacity:.13}} @media(max-width:640px){.hero-art{display:none}} /* ══════════════════════════════════════════════════════════════════ Section maison — un bloc de contenu propre à chaque thème sur la page d'accueil (voir #theme-feature-section dans index.html). ══════════════════════════════════════════════════════════════════ */ .theme-block{display:none} [data-theme="bistrot"] .theme-block[data-theme-block="bistrot"]{display:block} [data-theme="bar_lounge"] .theme-block[data-theme-block="bar_lounge"]{display:block} [data-theme="pizzeria"] .theme-block[data-theme-block="pizzeria"]{display:block} [data-theme="burger"] .theme-block[data-theme-block="burger"]{display:block} [data-theme="sushi"] .theme-block[data-theme-block="sushi"]{display:block} [data-theme="cafe"] .theme-block[data-theme-block="cafe"]{display:block} /* ══════════════════════════════════════════════════════════════════ Formats de hero différents selon le thème — pas qu'une question de couleurs : densité, alignement et respiration changent aussi. ══════════════════════════════════════════════════════════════════ */ [data-theme="pizzeria"] .hero,[data-theme="burger"] .hero{text-align:left} [data-theme="pizzeria"] .hero p,[data-theme="burger"] .hero p{margin:0 0 28px;max-width:560px} [data-theme="pizzeria"] .hero-actions,[data-theme="burger"] .hero-actions{justify-content:flex-start} [data-theme="burger"] .hero h1{text-transform:uppercase} [data-theme="sushi"] .hero{padding-top:96px;padding-bottom:108px} [data-theme="sushi"] .hero p{max-width:420px} [data-theme="bar_lounge"] .hero{padding-top:84px;padding-bottom:92px} [data-theme="cafe"] .hero h1{font-weight:400} /* ── Échelle typographique par thème — au-delà de la police ── */ [data-theme="bar_lounge"] .hero h1,[data-theme="bar_lounge"] .section-head h2{letter-spacing:.02em;font-weight:700} [data-theme="bar_lounge"] .hero p{letter-spacing:.01em} [data-theme="burger"] .hero h1{font-size:clamp(34px,7vw,58px);letter-spacing:-.01em} [data-theme="burger"] .section-head h2{text-transform:uppercase;letter-spacing:-.01em} [data-theme="sushi"] .hero h1{font-weight:400;letter-spacing:.02em} [data-theme="sushi"] .section-head h2{font-weight:400;letter-spacing:.03em} [data-theme="sushi"] .section-eyebrow,[data-theme="sushi"] .hero-eyebrow{letter-spacing:.4em} [data-theme="cafe"] .section-head h2{font-weight:400} [data-theme="pizzeria"] .hero h1,[data-theme="pizzeria"] .section-head h2{letter-spacing:-.02em} @media(max-width:640px){ [data-theme="pizzeria"] .hero,[data-theme="burger"] .hero{text-align:center} [data-theme="pizzeria"] .hero p,[data-theme="burger"] .hero p{margin:0 auto 28px} [data-theme="pizzeria"] .hero-actions,[data-theme="burger"] .hero-actions{justify-content:center} [data-theme="sushi"] .hero{padding-top:56px;padding-bottom:64px} } /* ══════════════════════════════════════════════════════════════════ Formes de boutons par thème — pas qu'une couleur : la silhouette change (pilule, anguleux, fantôme minimal, panneau ferme...). ══════════════════════════════════════════════════════════════════ */ [data-theme="bistrot"] { --btn-radius:30px; --btn-border-w:0; --btn-text-transform:none; } [data-theme="bar_lounge"] { --btn-radius:2px; --btn-border-w:1px; --btn-text-transform:uppercase; } [data-theme="pizzeria"] { --btn-radius:18px; --btn-border-w:0; --btn-text-transform:none; } [data-theme="burger"] { --btn-radius:4px; --btn-border-w:3px; --btn-text-transform:uppercase; } [data-theme="sushi"] { --btn-radius:0px; --btn-border-w:1px; --btn-text-transform:none; } [data-theme="cafe"] { --btn-radius:999px;--btn-border-w:0; --btn-text-transform:none; } [data-theme="bar_lounge"] .btn-gold{border-color:var(--gold);letter-spacing:.08em} [data-theme="burger"] .btn-gold{border-color:var(--brown);box-shadow:3px 3px 0 var(--brown)} [data-theme="burger"] .btn-gold:hover{box-shadow:1px 1px 0 var(--brown);transform:translate(2px,2px)} [data-theme="sushi"] .btn-gold{background:transparent;color:var(--brown);border-color:var(--brown)} [data-theme="sushi"] .btn-gold:hover{background:var(--brown);color:var(--gold-accent)} /* ══════════════════════════════════════════════════════════════════ Formes de cartes par thème — bordures/ombres signature au-delà du simple rayon (déjà piloté par --radius). ══════════════════════════════════════════════════════════════════ */ [data-theme="bar_lounge"] .card{border-top:3px solid var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.08)} [data-theme="pizzeria"] .card{border-top:5px solid var(--gold)} [data-theme="burger"] .card{border:2px solid var(--brown);border-bottom-width:6px;box-shadow:none} [data-theme="sushi"] .card{box-shadow:none;border:1px solid var(--border)} [data-theme="cafe"] .card{border:1.5px dashed var(--border)} /* ══════════════════════════════════════════════════════════════════ La Carte — mode grille (pizzeria/burger/café) vs mode liste (les autres) : voir carte.html, qui choisit la structure au rendu selon le thème actif (GRID_THEMES). Le CSS ne fait qu'habiller les deux. ══════════════════════════════════════════════════════════════════ */ .menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:8px} .menu-item-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:8px} .menu-item-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .menu-item-card .menu-item-name{font-size:15px} .menu-item-card .menu-item-price{font-size:16px} [data-theme="bar_lounge"] .menu-item-card{border-top:3px solid var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.08)} [data-theme="pizzeria"] .menu-item-card{border-top:5px solid var(--gold)} [data-theme="burger"] .menu-item-card{border:2px solid var(--brown);border-bottom-width:6px;box-shadow:none} [data-theme="sushi"] .menu-item-card{box-shadow:none;border:1px solid var(--border)} [data-theme="cafe"] .menu-item-card{border:1.5px dashed var(--border)} @media(max-width:640px){.menu-grid{grid-template-columns:1fr}} /* ══════════════════════════════════════════════════════════════════ Galerie — proportions différentes par thème. ══════════════════════════════════════════════════════════════════ */ [data-theme="sushi"] .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px} [data-theme="sushi"] .gallery-item{border-radius:0} [data-theme="burger"] .gallery-item{aspect-ratio:4/3;border:2px solid var(--brown)} [data-theme="pizzeria"] .gallery-item{border-radius:32px} [data-theme="cafe"] .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px} /* ══════════════════════════════════════════════════════════════════ Nouveaux modules (avis clients, newsletter, aperçu galerie) — la plupart héritent déjà des styles .card/.btn/.gallery-item par thème définis plus haut ; ce bloc ajoute les touches propres à ces modules. ══════════════════════════════════════════════════════════════════ */ /* Étoiles des avis — scintillement discret au fil de la lecture */ .reveal[class*="card"] div[style*="letter-spacing:2px"]{display:inline-block} [data-theme="bistrot"] #avis-clients-section .card.in-view div[style*="letter-spacing:2px"], [data-theme="pizzeria"] #avis-clients-section .card.in-view div[style*="letter-spacing:2px"], [data-theme="cafe"] #avis-clients-section .card.in-view div[style*="letter-spacing:2px"]{ animation:starTwinkle .5s ease-out both; } @keyframes starTwinkle{ 0%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.15)} 100%{opacity:1;transform:scale(1)} } /* Newsletter — focus d'input propre à chaque thème */ #newsletter-form input:focus{outline:none} [data-theme="bar_lounge"] #newsletter-form input:focus{box-shadow:0 0 0 3px rgba(201,166,107,.35);border-color:var(--gold)} [data-theme="burger"] #newsletter-form input:focus{box-shadow:3px 3px 0 var(--gold);border-color:var(--brown)} [data-theme="sushi"] #newsletter-form input{border-width:0 0 1.5px 0;border-radius:0;padding-left:2px} [data-theme="sushi"] #newsletter-form input:focus{box-shadow:none;border-color:var(--gold-accent)} [data-theme="cafe"] #newsletter-form input:focus{box-shadow:0 0 0 4px rgba(217,160,102,.25)} [data-theme="pizzeria"] #newsletter-form input:focus{transform:scale(1.02);transition:transform .15s ease} /* Aperçu galerie — interaction au survol propre à chaque thème (en plus des formes déjà définies plus haut pour .gallery-item) */ [data-theme="pizzeria"] #galerie-apercu-grid .gallery-item:hover{transform:rotate(-2deg)} [data-theme="pizzeria"] #galerie-apercu-grid .gallery-item{transition:transform .2s ease} [data-theme="burger"] #galerie-apercu-grid .gallery-item:hover img{transform:scale(1.12)} [data-theme="sushi"] #galerie-apercu-grid .gallery-item img{transition:opacity .3s ease,transform .3s ease} [data-theme="sushi"] #galerie-apercu-grid .gallery-item:hover img{opacity:.85;transform:scale(1.02)} [data-theme="cafe"] #galerie-apercu-grid .gallery-item:hover img{filter:brightness(1.08) saturate(1.1)} @media(prefers-reduced-motion:reduce){ #avis-clients-section .card div[style*="letter-spacing:2px"]{animation:none!important} [data-theme="pizzeria"] #newsletter-form input:focus{transform:none!important} [data-theme="pizzeria"] #galerie-apercu-grid .gallery-item:hover{transform:none!important} [data-theme="bistrot"] .btn-gold, [data-theme="bar_lounge"] .hero-eyebrow,[data-theme="bar_lounge"] .section-eyebrow, [data-theme="pizzeria"] .hero-eyebrow::after,[data-theme="pizzeria"] .section-eyebrow::after, [data-theme="burger"] .hero h1, [data-theme="sushi"] .hero h1, [data-theme="sushi"] .hero p, [data-theme="cafe"] .hero-eyebrow::after,[data-theme="cafe"] .section-eyebrow::after, [data-theme="cafe"] .btn-gold:hover{ animation:none!important; } [data-theme="bar_lounge"] .card, [data-theme="pizzeria"] .card{ transition:none!important; } }