/* ========================================================================== Thème & Tokens — sobre par défaut Pour changer de thème : (voir presets plus bas) ========================================================================== */ :root { /* Couleurs de base */ --bg: #f8fafc; /* page */ --surface: #ffffff; /* cartes / panneaux */ --fg: #0f172a; /* texte principal */ --muted: #6b7280; /* texte secondaire */ --border: rgba(15, 23, 42, .08); --border-strong: rgba(15, 23, 42, .14); /* Accents sobres */ --primary: #1f2937; /* gris foncé */ --accent: #334155; /* bleu-gris pour éléments neutres */ /* Titres sections */ --week-title: #0f5132; /* vert très sobre */ --section-title: #243b53; /* bleu sombre */ /* Badges (mensuels) */ --badge-bg: #eef2ff; /* lavande très clair */ --badge-fg: #3730a3; /* indigo sombre */ /* Ombres & rayons */ --radius: 12px; --shadow-sm: 0 1px 0 rgba(16, 24, 40, .04); --shadow-md: 0 4px 12px rgba(16, 24, 40, .06); /* Typo & spacing */ --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; --fs-100: 0.75rem; --fs-200: 0.875rem; --fs-300: 1rem; --fs-400: 1.125rem; --fs-500: 1.25rem; --space-2: .25rem; --space-4: .5rem; --space-6: .75rem; --space-8: 1rem; --space-10: 1.25rem; --space-12: 1.5rem; } /* ========================================================================== Presets de thème (activer avec data-theme="ocean" | "forest" | "dark") ========================================================================== */ /* Presets de thème */ :root[data-theme="ocean"], html[data-theme="ocean"], body[data-theme="ocean"] { --primary: #0f172a; --accent: #155e75; --week-title: #0e7490; --section-title: #0c4a6e; --badge-bg: #e0f2fe; --badge-fg: #075985; } :root[data-theme="forest"], html[data-theme="forest"], body[data-theme="forest"] { --primary: #1c1917; --accent: #166534; --week-title: #14532d; --section-title: #064e3b; --badge-bg: #ecfdf5; --badge-fg: #065f46; } :root[data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"] { --bg: #0b1020; --surface: #0f172a; --fg: #e5e7eb; --muted: #9ca3af; --border: rgba(148, 163, 184, .18); --border-strong: rgba(148, 163, 184, .26); --primary: #e5e7eb; --accent: #64748b; --week-title: #34d399; --section-title: #93c5fd; --badge-bg: #1f2937; --badge-fg: #c7d2fe; --shadow-sm: 0 1px 0 rgba(0, 0, 0, .25); --shadow-md: 0 8px 24px rgba(0, 0, 0, .35); } /* ========================================================================== Reset minimal & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* ========================================================================== Layout généraux (optionnels) ========================================================================== */ .container { width: min(100%, 980px); margin-inline: auto; padding-inline: var(--space-8); padding-block: var(--space-10); } .section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-10); } /* ========================================================================== Titres de section & de semaine ========================================================================== */ .section-title { display: flex; align-items: center; gap: .6rem; margin: var(--space-10) 0 var(--space-8); font-size: var(--fs-600); font-weight: 700; letter-spacing: .02em; color: var(--section-title); text-transform: uppercase; } .section-title .rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--section-title) 30%, transparent), transparent); } /* Titre de semaine */ .week-title { display: flex; align-items: center; gap: .6rem; margin: var(--space-10) 0 var(--space-6); font-weight: 700; font-size: var(--fs-600); line-height: 1.2; color: var(--week-title); text-transform: uppercase; } .week-title::before { content: "📅"; font-size: var(--fs-300); } .week-title .rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--week-title) 30%, transparent), transparent); } /* ========================================================================== Cartes plats ========================================================================== */ .dish { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding: var(--space-6) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease, background-color .15s ease; margin-bottom: var(--space-6); } .dish:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .dish strong { font-weight: 600; color: var(--primary); } .dish .muted { color: var(--muted); font-size: var(--fs-200); margin-top: .15rem; } /* Badge sous-catégorie (mensuels) */ .badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: var(--fs-100); font-weight: 700; letter-spacing: .02em; background: var(--badge-bg); color: var(--badge-fg); vertical-align: middle; margin-left: .4rem; } /* En-têtes de sous-catégorie mensuelle */ .subcat-header { display: flex; align-items: center; gap: .6rem; margin: var(--space-10) 0 var(--space-6); font-weight: 800; font-size: var(--fs-600); text-transform: uppercase; letter-spacing: .02em; color: var(--primary); } .subcat-header .rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 25%, transparent), transparent); } .subcat-header[data-subcat="entree"] { color: color-mix(in oklab, var(--primary) 85%, #1f2937); } .subcat-header[data-subcat="plat"] { color: color-mix(in oklab, var(--primary) 85%, #0f172a); } .subcat-header[data-subcat="dessert"] { color: color-mix(in oklab, var(--primary) 85%, #7c2d12); } .subcat-header[data-subcat="dessert"] .rule { background: linear-gradient(90deg, color-mix(in oklab, #7c2d12 30%, transparent), transparent); } /* Intro au-dessus du formulaire (paragraphe + boutons) */ .intro { margin-bottom: 1.25rem; } .intro__text { margin: 0 0 .5rem 0; color: var(--muted); font-size: var(--fs-600); } .intro__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; /* une seule ligne si l’espace le permet */ overflow: auto; /* évite le retour à la ligne forcé si just-in-case */ padding-bottom: .25rem; /* un petit espace si scrollbar tactile */ } /* Sur petits écrans, autoriser le retour à la ligne proprement */ @media (max-width: 480px) { .intro__actions { flex-wrap: wrap; row-gap: .5rem; } } /* Icône pour section mensuelle */ .section-title.section-monthly .icon { font-size: 1.1rem; line-height: 1; margin-right: .25rem; } /* Plus d’espace entre blocs */ .spacer-lg { height: 2rem; } /* Différenciation des titres de plats hebdo vs mensuels */ .dish-title { font-weight: 700; } .dish--weekly .dish-title { color: var(--primary); } .dish--monthly .dish-title { color: color-mix(in oklab, var(--section-title) 80%, #000); } /* ========================================================================== Formulaires & Boutons ========================================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--fg); padding: .55rem .65rem; box-shadow: var(--shadow-sm) inset; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } input[type="number"] { max-width: 80px; text-align: right; } input:focus, textarea:focus, select:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } label { display: inline-block; margin-bottom: .35rem; font-size: var(--fs-600); color: var(--primary); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--primary); cursor: pointer; transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; user-select: none; } .btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--primary); color: #fff; border-color: transparent; } .btn.primary:hover { box-shadow: var(--shadow-md); } .btn.secondary { background: color-mix(in oklab, var(--accent) 8%, var(--surface)); color: var(--primary); } /* ========================================================================== Table (récapitulatif) ========================================================================== */ table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } thead th { text-align: left; padding: .75rem; font-weight: 700; font-size: var(--fs-350); color: var(--primary); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); border-bottom: 1px solid var(--border); } tbody td { padding: .65rem .75rem; border-top: 1px solid var(--border); font-size: var(--fs-350); color: var(--fg); } tfoot td { padding: .75rem; font-weight: 700; border-top: 1px solid var(--border-strong); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); } /* ========================================================================== Alertes & Notes ========================================================================== */ .note { padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in oklab, #fde68a 20%, var(--surface)); color: #713f12; font-size: var(--fs-600); } .muted { color: var(--muted); } /* ========================================================================== Utilitaires ========================================================================== */ .stack-sm > * + * { margin-top: var(--space-4); } .stack-md > * + * { margin-top: var(--space-6); } .stack-lg > * + * { margin-top: var(--space-10); } .inline-gap-sm { display: inline-flex; gap: var(--space-4); align-items: center; } .inline-gap-md { display: inline-flex; gap: var(--space-6); align-items: center; } .hidden { display: none !important; } /* Steps (si tu toggles via JS with hidden=true) */ .step[hidden] { display: none !important; } /* Cache le titre "Vos coordonnées" quand on est en mode confirmation */ #step-customer.is-confirmation #customer-title { display: none !important; } input:invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); } .qty-cell { display: flex; align-items: center; gap: .5rem; } .qty-cell .btn { padding: .3rem .6rem; line-height: 1; } /* marge entre blocs de résumé */ #summary-table h3 { margin: 1.25rem 0 .5rem; } #summary-table .week-title { margin-top: .25rem; } #summary-totals { margin-top: 1rem; width: 100%; } #summary-totals tfoot td { text-align: right; } #summary-totals tfoot tr td:first-child { text-align: left; } .muted { color: var(--muted); font-size: var(--fs-400); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 640px) { .container { padding-inline: var(--space-6); } .dish { flex-direction: column; align-items: stretch; } input[type="number"] { max-width: 100%; text-align: left; } }