/* ============================================================
RIVA — couleurs et bases du site
Les couleurs de la maison, relevées sur les planches de la carte
et sur l'affiche : le NOIR PROFOND du fond, et le DORÉ, du sable
clair au bronze, pour tout ce qui compte. Le crème sert au texte
courant, la terracotta aux mentions à ne pas manquer.
Le doré n'est jamais un aplat sur grande surface : il éclaire des
titres, des filets, des prix. Le noir porte tout le reste.
Toutes les couleurs du site partent d'ici. Change une valeur,
elle change partout : boutons, titres, badges, écran de caisse.
Les noms de jetons sont ceux d'origine (--vert, --rouge, --jade) :
ils sont employés partout dans le code. Seules leurs VALEURS ont
changé. --vert porte donc le doré principal, --rouge la terracotta,
--jade le doré clair des confirmations.
============================================================ */
:root {
--bg: #0B0B09; /* fond général, le noir des planches */
--bg-2: #141310; /* fond des cartes et des sections */
--bg-3: #1D1B16; /* fond des champs et des vignettes */
--line: #332F26; /* traits et bordures, un brun doré très sombre */
--cream: #F4EFE3; /* texte principal, le crème du logo */
--cream-2: #D8CFBC; /* texte secondaire */
--muted: #9B8F79; /* texte discret, doré éteint */
--vert: #C9A54E; /* DORÉ, la couleur principale (boutons, prix, accents) */
--vert-2: #E0BE6B; /* doré clair, au survol */
--vert-vif: #EBCE8A;/* doré lumineux, sur les photos */
--rouge: #B85536; /* terracotta du logo */
--rouge-2: #D06B45; /* terracotta clair */
--jade: #C9A54E; /* « ouvert / validé / sur place » : doré, pas de vert */
--jade-2: #E0BE6B; /* doré clair */
--ombre: 0 2px 8px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.40);
--ombre-forte: 0 8px 20px rgba(0,0,0,0.55), 0 24px 60px rgba(0,0,0,0.55);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overflow-x: clip; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--cream); }
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
.font-display { font-family: 'Anton', 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: 0.01em; line-height: 0.92; text-transform: uppercase; }
.font-stencil { font-family: 'Anton', sans-serif; }
.font-hand { font-family: 'Caveat', cursive; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3A342A; border-radius: 10px; }
/* Reusable */
.noise {
position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: screen;
background-image: url("data:image/svg+xml;utf8,");
}
.ticker {
display: flex; gap: 3rem; animation: ticker 30s linear infinite;
white-space: nowrap; will-change: transform;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(-3deg); }
50% { transform: translateY(-8px) rotate(-3deg); }
}
.float { animation: float 4s ease-in-out infinite; }
@keyframes pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.7; }
}
.pulse-dot { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
padding: 0.95rem 1.5rem; font-weight: 700; font-size: 0.9rem;
text-transform: uppercase; letter-spacing: 0.06em;
border: 0; cursor: pointer; transition: all 0.18s ease;
border-radius: 999px; user-select: none;
}
.btn-primary { background: var(--vert); color: var(--bg); }
.btn-primary:hover { background: var(--vert-2); transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(201,165,78,0.45); }
.btn-ghost { background: transparent; color: var(--cream); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--vert); color: var(--vert); background: rgba(201,165,78,0.06); }
.btn-rouge { background: var(--rouge); color: white; }
.btn-rouge:hover { background: var(--rouge-2); }
.btn-whatsapp { background: #25D366; color: #FFF; }
.btn-whatsapp:hover { background: #2EE076; }
/* Tags / pills */
.pill {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.35rem 0.7rem; font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.pill.hot { background: rgba(184,85,54,0.10); color: var(--rouge); border-color: rgba(184,85,54,0.28); }
.pill.new { background: rgba(201,165,78,0.10); color: var(--vert); border-color: rgba(201,165,78,0.28); }
.pill.veg { background: rgba(224,190,107,0.12); color: #C9A54E; border-color: rgba(224,190,107,0.32); }
.pill.signature { background: var(--vert); color: var(--bg); border-color: var(--vert); }
/* Cards */
.menu-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
transition: all 0.25s ease;
display: flex; flex-direction: column;
position: relative;
box-shadow: var(--ombre);
}
.menu-card:hover {
border-color: var(--vert); transform: translateY(-4px);
box-shadow: var(--ombre-forte);
}
.menu-card-img {
aspect-ratio: 4/3;
background: var(--bg-3) center/cover;
position: relative;
}
/* Sticker */
.sticker {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--vert); color: var(--bg);
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px;
letter-spacing: 0.04em;
transform: rotate(-6deg);
box-shadow: 0 4px 12px rgba(0,0,0,0.28);
}
/* Star burst */
.starburst {
position: relative;
background: var(--rouge);
color: white;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
text-align: center;
width: 90px; height: 90px;
display: flex; align-items: center; justify-content: center;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* Decorative big number */
.bignum {
font-family: 'Anton', sans-serif;
font-size: clamp(8rem, 20vw, 16rem);
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 1.5px rgba(201,165,78,0.22);
}
/* Underline accent */
.souligne-vert {
background-image: linear-gradient(rgba(201,165,78,0.55), rgba(201,165,78,0.55));
background-repeat: no-repeat;
background-size: 100% 35%;
background-position: 0 88%;
padding: 0 4px;
}
/* Marquee text */
.marquee-text {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 5vw, 4rem);
text-transform: uppercase;
}
/* Quantity input */
.qty {
display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line);
border-radius: 999px; overflow: hidden;
}
.qty button {
width: 36px; height: 36px; background: transparent; color: var(--cream);
border: 0; cursor: pointer; font-size: 1.1rem; font-weight: 600;
}
.qty button:hover { background: rgba(201,165,78,0.10); color: var(--vert); }
.qty .v { min-width: 32px; text-align: center; font-weight: 700; font-size: 0.95rem; }
/* Cart drawer */
/* Le voile posé derrière une fenêtre (choix d'un plat, avis, chat).
Un vert très sombre plutôt qu'un noir franc : la page reste chaude
et la fenêtre blanche ressort mieux. */
.voile-fonce { background: rgba(23,38,15,0.58); }
.cart-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px);
z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 440px;
background: var(--bg-2); border-left: 1px solid var(--line);
box-shadow: -18px 0 50px rgba(0,0,0,0.10);
z-index: 100; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
/* Section spacing */
section { position: relative; }
/* Section divider */
.divider {
height: 1px; background: var(--line);
}
/* Map blob */
.map-bg {
background:
radial-gradient(circle at 30% 40%, rgba(224,190,107,0.16), transparent 42%),
radial-gradient(circle at 72% 72%, rgba(184,85,54,0.10), transparent 52%),
#F3F2E6;
}
/* Tag */
.tag-vert {
display: inline-block; background: var(--vert); color: #FFF;
font-family: 'Anton', sans-serif; font-size: 0.9rem; text-transform: uppercase;
letter-spacing: 0.04em; padding: 0.2rem 0.6rem; border-radius: 4px;
}
/* Glass nav */
.glass {
background: rgba(11,11,9,0.82);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border-bottom: 1px solid var(--line);
}
/* Hide scrollbar in some containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
/* Hero gradient */
.hero-vignette {
background: linear-gradient(180deg, transparent 0%, transparent 48%, rgba(11,11,9,0.55) 76%, var(--bg) 100%);
}
/* Order step indicator dots */
.step-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--line);
}
.step-dot.active { background: var(--vert); }
/* Reviews card */
.review-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 16px;
padding: 1.5rem;
box-shadow: var(--ombre);
}
/* Fancy section title */
.kicker {
display: inline-flex; align-items: center; gap: 0.6rem;
font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.18em; color: var(--rouge);
}
.kicker::before {
content: ''; width: 28px; height: 2px; background: var(--rouge);
}
/* Number sticker */
.num-badge {
width: 28px; height: 28px; border-radius: 50%;
background: var(--vert); color: #FFF;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Anton', sans-serif; font-size: 0.95rem;
}
/* Image placeholder fallback */
.img-fallback {
background: linear-gradient(135deg, #EDEFE0, #E2E7D2);
display: flex; align-items: center; justify-content: center;
color: var(--vert); font-family: 'Anton', sans-serif;
}
/* ---- Plat illustré ---------------------------------------------------
Tant qu'il n'y a pas de vraie photo, le plat porte son dessin, fabriqué
par illustrations.js d'après sa catégorie et ses ingrédients. */
.plat-illustre {
background-color: #FBF8EC;
background-repeat: no-repeat;
position: relative;
}
/* ---- Plat sans photo (filet de sécurité) -----------------------------
Tant qu'une photo n'est pas déposée dans le dossier photos\, le plat
affiche cette vignette : initiales du plat sur un fond texturé, aux
couleurs de la catégorie. Le site reste propre même sans aucune photo. */
.plat-vide {
position: relative;
display: flex; align-items: center; justify-content: center;
background-color: var(--bg-3);
background-image:
repeating-linear-gradient(135deg, rgba(0,0,0,0.022) 0 2px, transparent 2px 9px);
overflow: hidden;
}
.plat-vide::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 42%, var(--teinte, rgba(224,190,107,0.22)), transparent 62%);
}
.plat-vide .initiales {
position: relative; z-index: 1;
font-family: 'Anton', sans-serif;
font-size: clamp(1.9rem, 5.5vw, 2.9rem);
letter-spacing: 0.06em;
color: rgba(0,0,0,0.30);
line-height: 1;
}
.plat-vide .cat {
position: absolute; bottom: 10px; left: 0; right: 0; z-index: 1;
text-align: center;
font-size: 9.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.2em;
color: rgba(0,0,0,0.34);
}
/* Les plats sans photo n'ont pas besoin du voile noir prévu pour les
photos : sur une vignette claire il salit. On le remplace par une
ombre verte, qui garde le titre lisible sans assombrir la page. */
.plat-vide [class*="bg-gradient-to-t"] {
background-image: linear-gradient(to top, rgba(31,60,16,0.62), rgba(31,60,16,0.20) 48%, rgba(31,60,16,0.02) 78%) !important;
}
.plat-vide[data-t="vert"] { --teinte: rgba(224,190,107,0.26); }
.plat-vide[data-t="rouge"] { --teinte: rgba(184,85,54,0.20); }
.plat-vide[data-t="or"] { --teinte: rgba(201,165,78,0.20); }
/* ---- Le décor végétal ------------------------------------------------
Le même feuillage que sur la carte papier et sur la devanture : un
bouquet de feuilles posé dans les coins des sections, très pâle pour
qu'il reste un décor et que le fond garde son calme.
Sur une section : …
Variantes : feuillage-hg (haut gauche) · feuillage-bd (bas droite)
feuillage-fort (plus visible, pour une section vitrine) */
.feuillage { position: relative; overflow: hidden; }
.feuillage::before, .feuillage::after {
content: ''; position: absolute; pointer-events: none; z-index: 0;
width: clamp(190px, 26vw, 360px); aspect-ratio: 1;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.14;
}
.feuillage::before { top: -6%; left: -7%; transform: rotate(168deg); }
.feuillage::after { bottom: -8%; right: -7%; transform: rotate(-14deg); }
.feuillage > * { position: relative; z-index: 1; }
.feuillage-hg::after { display: none; }
.feuillage-bd::before { display: none; }
.feuillage-fort::before, .feuillage-fort::after { opacity: 0.20; }
.feuillage-rouge::after { background-image: url("data:image/svg+xml;utf8,"); opacity: 0.10; }
/* Sur un aplat doré (bandeau, encart), les feuilles passent au noir. */
.feuillage-clair::before, .feuillage-clair::after {
background-image: url("data:image/svg+xml;utf8,"); opacity: 0.16;
}
@media (max-width: 640px) {
.feuillage::before, .feuillage::after { opacity: 0.10; }
}
/* Un liseré de feuillage, comme le mur végétal au-dessus de l'enseigne. */
.bandeau-feuillage {
height: 10px;
background:
linear-gradient(90deg, var(--vert) 0%, var(--jade) 30%, var(--vert-vif) 50%, var(--jade) 70%, var(--vert) 100%);
}
/* ---- Bandeau du mode de service --------------------------------------
Rappelle en permanence au client s'il commande sur place (à sa table),
à emporter ou en livraison. Même vocabulaire que le ticket de caisse. */
.bandeau-table {
position: fixed; top: 0; left: 0; right: 0; z-index: 70;
height: 38px;
background: var(--jade); color: var(--bg);
display: flex; align-items: center; justify-content: center; gap: 0.6rem;
padding: 0 1rem;
font-size: 0.78rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.1em;
text-align: center;
}
/* Quand le bandeau est là, tout le reste descend de sa hauteur
pour que l'en-tête ne passe pas dessous. */
body.avec-table { padding-top: 38px; }
body.avec-table header { top: 38px; }
.bandeau-table button {
background: rgba(11,11,9,0.20); color: inherit; border: 0;
font: inherit; font-size: 0.7rem; letter-spacing: 0.08em;
padding: 0.2rem 0.7rem; border-radius: 999px; cursor: pointer;
}
.bandeau-table button:hover { background: rgba(11,11,9,0.34); }
.mode-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.3rem 0.75rem; border-radius: 999px;
font-size: 0.7rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.1em;
}
.mode-chip.surplace { background: var(--jade); color: #FFF; }
.mode-chip.emporter { background: var(--vert); color: #FFF; }
.mode-chip.livraison { background: var(--rouge); color: #FFF; }
/* Mobile menu */
@media (max-width: 768px) {
.mobile-hide { display: none !important; }
}
@media (min-width: 769px) {
.desktop-hide { display: none !important; }
}
/* WhatsApp float */
.wa-float {
position: fixed; bottom: 20px; right: 20px; z-index: 80;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366; color: #FFF;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(37,211,102,0.4);
cursor: pointer; transition: transform 0.2s;
}
.wa-float:hover { transform: scale(1.08); }
/* Admin styles */
.admin-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 14px;
padding: 1.2rem;
box-shadow: var(--ombre);
}
.admin-status {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.25rem 0.7rem; border-radius: 999px;
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.admin-status.new { background: rgba(201,165,78,0.12); color: var(--vert); }
.admin-status.preparing { background: rgba(198,76,58,0.12); color: var(--rouge); }
.admin-status.ready { background: rgba(224,190,107,0.16); color: #C9A54E; }
.admin-status.delivered { background: rgba(107,122,95,0.14); color: var(--muted); }
/* Print-quality on focus */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid var(--vert); outline-offset: 2px;
}
input, select, textarea {
font-family: inherit;
}
/* ============================================================
LA BORNE
Le parcours de commande : sept familles à plat, puis une colonne
à gauche et le contenu à droite. Le mouvement n'est pas décoratif —
il montre où sont parties les autres familles, pour qu'on sache
qu'on peut y revenir.
============================================================ */
.borne { background: var(--bg); padding: 5rem 0 7rem; position: relative; }
.borne-compacte { padding: 6rem 0 2rem; }
.borne-zone { max-width: 1400px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 768px) { .borne-zone { padding-inline: 32px; } }
.borne-titre { margin-bottom: 2rem; }
.borne-intro { color: var(--muted); font-size: 0.95rem; margin-top: 0.75rem; max-width: 46ch; }
/* ---------- à la une ---------- */
.a-la-une { margin-bottom: 2.5rem; }
.a-la-une-titre {
display: flex; align-items: baseline; gap: 0.75rem;
margin-bottom: 0.9rem; flex-wrap: wrap;
}
.a-la-une-detail { font-size: 0.72rem; color: var(--muted); }
.a-la-une-grille { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .a-la-une-grille { grid-template-columns: repeat(3, 1fr); } }
.une-carte {
display: flex; align-items: center; gap: 0.9rem;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: 16px; padding: 0.7rem 1rem 0.7rem 0.7rem;
cursor: pointer; text-align: left; transition: border-color .18s, transform .18s;
position: relative; overflow: hidden;
}
.une-carte:hover { border-color: var(--vert); transform: translateY(-2px); }
.une-rang {
position: absolute; top: 0; left: 0;
background: var(--vert); color: var(--bg);
font-family: 'Anton', sans-serif; font-size: 0.78rem;
width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
border-bottom-right-radius: 12px; z-index: 2;
}
.une-image {
width: 74px; height: 58px; flex: none; border-radius: 11px;
background-size: cover; background-position: center;
}
.une-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.une-nom {
font-family: 'Anton', sans-serif; font-size: 1.05rem; color: var(--cream);
text-transform: uppercase; letter-spacing: .02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.une-prix { font-family: 'Anton', sans-serif; color: var(--vert); font-size: 1rem; }
/* ---------- la grille des sept familles ---------- */
.familles-grille {
display: grid; gap: 0.9rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .familles-grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .familles-grille { grid-template-columns: repeat(4, 1fr); } }
.famille-tuile {
position: relative; overflow: hidden; cursor: pointer;
border: 1px solid var(--line); border-radius: 20px;
aspect-ratio: 4 / 3; padding: 0; background: var(--bg-2);
display: block; text-align: left;
transition: border-color .2s, transform .2s, box-shadow .2s;
animation: tuileEntree .45s cubic-bezier(.2,.7,.3,1) backwards;
animation-delay: calc(var(--rang) * 55ms);
}
.famille-tuile:hover { border-color: var(--vert); transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.famille-tuile:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
.famille-image {
position: absolute; inset: 0; background-size: cover; background-position: center;
transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.famille-tuile:hover .famille-image { transform: scale(1.05); }
.famille-voile {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(11,11,9,.94) 8%, rgba(11,11,9,.55) 48%, rgba(11,11,9,.12) 100%);
}
/* Ces règles sont VOLONTAIREMENT limitées à `.famille-tuile`.
Le même élément devient une entrée de colonne pendant le glissement :
sans cette limitation, il garderait le texte géant et le placement
absolu du grand carré en plein vol, et le trajet serait illisible. */
.famille-tuile .famille-texte {
position: absolute; inset: auto 0 0 0; padding: 1rem 1.1rem;
display: flex; flex-direction: column; gap: 1px; text-align: left;
}
.famille-tuile .famille-accroche {
font-size: 0.64rem; text-transform: uppercase; letter-spacing: .14em;
color: var(--vert); font-weight: 700;
}
.famille-tuile .famille-nom {
font-family: 'Anton', sans-serif; font-size: clamp(1.4rem, 3vw, 1.9rem);
text-transform: uppercase; color: var(--cream); line-height: 1.05; letter-spacing: .01em;
}
.famille-tuile .famille-nb { font-size: 0.72rem; color: var(--cream-2); opacity: .75; }
.famille-fond { position: absolute; inset: 0; display: block; pointer-events: none; }
/* Rangée dans la colonne, la photo devient transparente mais restait là,
invisible, par-dessus les autres familles : elle avalait les clics
(impossible de changer de famille ou de faire « Tout voir »). Rangée,
elle n'a plus aucune raison d'exister. */
.colonne-item { position: relative; }
.colonne-item .famille-fond { display: none; }
@keyframes tuileEntree {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: none; }
}
/* Le glissement vers la gauche au moment du choix */
.familles-grille.partent .famille-tuile {
transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .26s ease;
transform: translateX(-46px) scale(.95); opacity: 0;
}
.familles-grille.partent .famille-tuile.choisie {
/* Celle qu'on a touchée reste là, cerclée d'or, le temps que les autres partent. */
transform: scale(.98); opacity: 1;
border-color: var(--vert); box-shadow: 0 0 0 2px var(--vert);
}
/* ---------- famille ouverte : colonne + contenu ---------- */
.borne-ouverte { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 900px) {
.borne-ouverte { grid-template-columns: 216px minmax(0, 1fr); gap: 2rem; }
}
.colonne-familles {
display: flex; gap: 0.5rem;
overflow-x: auto; padding-bottom: 0.5rem;
scrollbar-width: none;
/* Les cases entrent une à une (Motion, borne.jsx) : la colonne elle-même
ne glisse plus, sinon les deux mouvements s'additionnaient. */
}
/* Téléphone / tablette : la bande des familles reste collée sous l'en-tête
du site (fixe, 67 px) pendant qu'on fait défiler les plats. Sans ça elle
passait SOUS l'en-tête : impossible de changer de famille ni de revenir. */
@media (max-width: 899px) {
.colonne-familles {
position: sticky; top: 67px; z-index: 30;
margin: 0 -20px; padding: 0.6rem 20px;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
}
@media (min-width: 768px) and (max-width: 899px) {
.colonne-familles { margin: 0 -32px; padding: 0.6rem 32px; }
}
#menu { scroll-margin-top: 67px; }
.colonne-familles::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
.colonne-familles {
flex-direction: column; overflow: visible; padding-bottom: 0;
position: sticky; top: 88px;
}
}
@keyframes colonneEntree {
from { opacity: 0; transform: translateX(-26px); }
to { opacity: 1; transform: none; }
}
.colonne-retour {
display: none; align-items: center; gap: 0.45rem;
background: transparent; border: 0; cursor: pointer;
color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
padding: 0.4rem 0.2rem 0.7rem;
}
.colonne-retour:hover { color: var(--vert); }
@media (min-width: 900px) { .colonne-retour { display: flex; } }
/* Sur petit écran, « Tout voir » devient la première pastille de la bande. */
@media (max-width: 899px) {
.colonne-retour {
display: flex; flex: none; white-space: nowrap;
border: 1px solid var(--line); border-radius: 12px;
padding: 0.65rem 0.9rem; color: var(--cream-2);
}
}
.colonne-item {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
background: transparent; border: 1px solid var(--line); border-radius: 12px;
color: var(--cream-2); font: inherit; cursor: pointer;
padding: 0.65rem 0.9rem; white-space: nowrap;
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: 1rem; letter-spacing: .02em;
transition: all .16s;
}
.colonne-item:hover { border-color: var(--muted); color: var(--cream); }
.colonne-item.actif { background: var(--vert); border-color: var(--vert); color: var(--bg); }
@media (min-width: 900px) { .colonne-item { width: 100%; } }
/* Le même contenu, une fois rangé dans la colonne : sur une ligne,
le nom à gauche et le compteur à droite. */
.colonne-item {
/* Rien ne doit pouvoir sortir de la case, quoi qu'il arrive à la
projection pendant l'animation. */
overflow: hidden;
}
.colonne-item .famille-texte {
display: flex; flex-direction: row; align-items: center;
justify-content: space-between; gap: 0.6rem; width: 100%;
position: static; text-align: left;
}
/* L'accroche n'a pas sa place dans la case : elle est masquée par
l'opacité, mais elle occuperait quand même de la largeur. */
.colonne-item .famille-accroche { display: none; }
.colonne-item .famille-nom {
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: 1rem; letter-spacing: .02em; line-height: 1.1;
white-space: nowrap; color: inherit;
}
.colonne-item .famille-nb {
font-family: 'Inter', sans-serif; font-size: 0.68rem;
font-weight: 700; opacity: .6; color: inherit;
}
/* ---------- contenu ---------- */
.famille-contenu { min-width: 0; } /* l'entrée en fondu est faite par Motion (borne.jsx) */
@keyframes contenuEntree {
from { opacity: 0; transform: translateX(18px); }
to { opacity: 1; transform: none; }
}
.famille-entete { margin-bottom: 1.3rem; }
.famille-titre {
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: clamp(2rem, 5vw, 3.1rem); color: var(--cream);
line-height: 1; margin: 0.3rem 0 0;
}
.famille-desc { color: var(--muted); font-size: 0.92rem; margin: 0.5rem 0 0; max-width: 56ch; }
.rubriques { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.rubrique {
background: transparent; border: 1px solid var(--line); border-radius: 999px;
color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600;
padding: 0.42rem 0.9rem; cursor: pointer; transition: all .16s;
}
.rubrique:hover { color: var(--cream); border-color: var(--muted); }
.rubrique.actif { background: var(--bg-3); border-color: var(--vert); color: var(--vert); }
.rubrique-nb { font-size: 0.68rem; opacity: .6; margin-left: 0.2rem; }
.rubrique-bloc { margin-bottom: 2.2rem; }
.rubrique-entete { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.rubrique-entete h4 {
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: 1.45rem; color: var(--cream); margin: 0; letter-spacing: .02em;
}
.rubrique-sub { font-size: 0.8rem; color: var(--muted); }
.plats-grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .plats-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .plats-grille { grid-template-columns: repeat(3, 1fr); } }
.plat-entree {
animation: platEntree .4s cubic-bezier(.2,.7,.3,1) backwards;
animation-delay: calc(var(--rang) * 35ms);
display: flex;
}
.plat-entree > * { width: 100%; }
@keyframes platEntree {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.famille-tuile, .plat-entree, .famille-contenu, .colonne-familles { animation: none; }
.familles-grille.partent .famille-tuile { transition: opacity .15s; transform: none; }
}
/* ============================================================
LE PLAT QUI SE CONSTRUIT
On coche un ingrédient, on le voit se poser. On le décoche, il s'en va.
============================================================ */
.compo {
display: grid; gap: 0.9rem;
background: var(--bg-3); border: 1px solid var(--line);
border-radius: 18px; padding: 0.9rem;
}
/* La scène prend toute la largeur : un plat dessiné en vignette de 160 px
ne se lit pas, et c'est précisément ce qu'on veut donner à voir. */
.compo-scene {
background: radial-gradient(circle at 50% 44%, #221F17, #0C0C0A);
border: 1px solid var(--line);
border-radius: 14px; padding: 0.3rem;
display: grid; place-items: center;
}
.compo-svg { width: 100%; max-width: 420px; height: auto; display: block; }
.compo-infos { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.compo-palier {
font-family: 'Anton', sans-serif; text-transform: uppercase;
font-size: 1.45rem; color: var(--vert); line-height: 1; letter-spacing: .02em;
}
.compo-mot { font-size: 0.82rem; color: var(--cream-2); line-height: 1.35; }
.compo-jauge {
height: 6px; background: var(--bg); border-radius: 999px;
overflow: hidden; margin-top: 0.15rem;
}
.compo-jauge-remplie {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--vert), var(--vert-vif));
transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.compo-liste {
display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem;
max-height: 96px; overflow-y: auto;
}
.compo-pastille {
display: inline-flex; align-items: center; gap: 0.32rem;
background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
padding: 0.16rem 0.55rem 0.16rem 0.3rem;
font-size: 0.7rem; color: var(--cream-2); white-space: nowrap;
}
.compo-point { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.compo-vide { font-size: 0.74rem; color: var(--muted); }
/* Ce que le plat portait déjà se distingue de ce qu'on vient d'ajouter. */
.compo-pastille.origine { opacity: .62; }