/* Le site vitrine de Pasto. BLANC, ET DE LA COULEUR PAR PANNEAUX. Le papier sable de l'app faisait un site terne, et se confondait avec l'app elle-même. Le fond est maintenant blanc ; chaque partie a un grand panneau de la couleur d'un rayon (légumes, laitiers, miel, prune), et sur ce panneau flottent des morceaux d'interface de l'app — une rangée de liste, un jour du semainier, une note — recréés en HTML. Ils se traduisent, restent nets à toutes les tailles, et montrent l'app sans l'enfermer dans un cadre de téléphone. DEUX LANGUES DANS LA PAGE. Chaque texte existe en `data-l="fr"` et `data-l="en"` ; seul celui de la langue de s'affiche. Mêmes polices et même bleu d'action que l'app : on la reconnaît en cliquant « Essayer ». */ :root { --blanc: #ffffff; --fond: #ffffff; --gris: #f5f3ef; --ink: #1f1b18; --ink-soft: #625a53; --line: #ece7e0; --accent: #2a4470; --accent-fonce: #1f3457; --nuit: #16263f; --etiquette: #f6c945; --danger: #c2371f; --vert: #2f7d32; --vert-pale: #dff0dc; --bleu: #1d5fb0; --ciel: #dce9fb; --miel: #8a6100; --miel-pale: #fbecc4; --prune: #8e3f8a; --prune-pale: #f3def1; --note-a: #2d6b45; --note-b: #5b8a2e; --note-c: #b88400; --note-d: #c8611f; --f-titre: "Bricolage Grotesque", system-ui, sans-serif; --f-texte: "Figtree", system-ui, sans-serif; --gouttiere: clamp(16px, 5vw, 48px); --largeur: 1200px; color-scheme: light; } html[lang="en"] [data-l="fr"], html:not([lang="en"]) [data-l="en"] { display: none !important; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fond); color: var(--ink); font: 500 17px/1.55 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-fonce); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } svg { width: 1em; height: 1em; flex: none; } h1, h2, h3 { font-family: var(--f-titre); font-stretch: 88%; font-weight: 800; letter-spacing: -0.028em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(44px, 7vw, 88px); line-height: 0.95; } h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; } h3 { font-size: 28px; line-height: 1.1; } p { margin: 0; text-wrap: pretty; } .chapo { font-size: clamp(18px, 1.9vw, 22px); color: var(--ink-soft); max-width: 34em; } .evitement { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--blanc); padding: 10px 14px; border-radius: 12px; } .evitement:focus { top: 12px; } /* ---------- boutons ---------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: 16px; background: var(--accent); color: #fff; font: 700 17px var(--f-texte); text-decoration: none; cursor: pointer; transition: background-color .15s; } .bouton:hover { background: var(--accent-fonce); } .bouton:active { transform: translateY(1px); } .bouton.clair { background: var(--gris); color: var(--ink); } .bouton.clair:hover { background: #ebe6de; } .bouton.petit { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 12px; } .actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- l'en-tête ---------- */ .entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px var(--gouttiere); background: rgba(255, 255, 255, .94); } .marque { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .marque img { width: 40px; height: 40px; border-radius: 11px; } .marque span { font-family: var(--f-titre); font-stretch: 88%; font-weight: 800; font-size: 28px; letter-spacing: -0.03em; } .nav { display: flex; align-items: center; gap: 14px; margin-left: auto; } .nav > a:not(.bouton) { color: var(--ink-soft); text-decoration: none; font-weight: 650; } .nav > a:not(.bouton):hover { color: var(--ink); } .langues { display: flex; padding: 3px; border-radius: 10px; background: var(--gris); } .langues button { min-width: 38px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font: 750 13px var(--f-texte); color: var(--ink-soft); cursor: pointer; } html[lang="fr"] .langues [data-langue="fr"], html[lang="en"] .langues [data-langue="en"] { background: var(--blanc); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); } @media (max-width: 560px) { .nav-offres { display: none; } .marque span { font-size: 24px; } .nav { gap: 8px; } } main > section { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding-inline: var(--gouttiere); } /* ---------- les morceaux d'interface ---------- Ils reprennent les formes de l'app — carte blanche arrondie, bande de rayon, case à cocher, pastille de note — sans chercher à en être la copie exacte : ce sont des citations, pas des captures. */ .ui { background: var(--blanc); border-radius: 18px; box-shadow: 0 1px 2px rgba(31, 27, 24, .06), 0 18px 40px -18px rgba(31, 27, 24, .35); color: var(--ink); } .carte { padding: 14px 16px; } .pastille { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; } .pastille svg { font-size: 18px; color: var(--accent); } .presence i { width: 10px; height: 10px; border-radius: 50%; background: #3f8f5a; box-shadow: 0 0 0 4px #dff0dc; } .pastille.action { background: var(--accent); color: #fff; } .pastille.action svg { color: var(--etiquette); } .ui-rayon { font-family: var(--f-titre); font-stretch: 88%; font-weight: 800; font-size: 19px; color: var(--r); margin-bottom: 4px; } .liste { border-left: 6px solid var(--r); } .ui-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; font-size: 16px; } .ui-ligne + .ui-ligne { border-top: 1px solid var(--line); } .ui-ligne em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--ink-soft); } .ui-case { order: 3; margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--r); color: #fff; } .ui-case svg { font-size: 16px; } .ui-ligne.fait { color: var(--ink-soft); } .ui-ligne.fait > span[data-l] { text-decoration: line-through; text-decoration-thickness: 2px; } .ui-ligne.fait .ui-case { background: var(--r); } .ui-tete { order: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t); font-size: 15px; } .note { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; font: 800 14px var(--f-texte); color: #fff; } .n-a { background: var(--note-a); } .n-b { background: var(--note-b); } .n-c { background: var(--note-c); } .note.grande { width: 60px; height: 60px; border-radius: 16px; font-size: 32px; font-family: var(--f-titre); } .note-geante { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px; font: 800 56px/1 var(--f-titre); color: #fff; background: var(--note-a); } .ui-plat { display: flex; align-items: center; gap: 10px; font-weight: 700; } .ui-petit { font-size: 13px; font-weight: 650; color: var(--ink-soft); } .ui-titre { font-weight: 800; font-size: 17px; } /* ---------- les scènes : un panneau de couleur, des morceaux posés ---------- */ .scene { position: relative; min-height: 460px; border-radius: 32px; overflow: hidden; isolation: isolate; } .scene > .ui, .scene > .vue > .ui { position: absolute; } .scene-bleue { background: var(--accent); } .scene-verte { background: var(--vert-pale); } .scene-ciel { background: var(--ciel); } .scene-miel { background: var(--miel-pale); } .scene-prune { background: var(--prune-pale); } /* Un grand rond de la couleur soutenue du panneau, en arrière-plan : la seule forme décorative de la page. */ .scene::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; bottom: -30%; background: rgba(255, 255, 255, .08); } .scene-verte::before { background: rgba(47, 125, 50, .10); } .scene-ciel::before { background: rgba(29, 95, 176, .10); } .scene-miel::before { background: rgba(246, 201, 69, .45); } .scene-prune::before { background: rgba(142, 63, 138, .10); } /* L'accroche */ .scene-bleue .liste { width: min(300px, 62%); left: 8%; top: 14%; transform: rotate(-3deg); } .scene-bleue .presence { right: 7%; top: 5%; transform: rotate(2deg); } .scene-bleue .jour { width: min(290px, 60%); right: 7%; top: 52%; transform: rotate(2.5deg); } .scene-bleue .ajout { left: 8%; bottom: 8%; transform: rotate(-2deg); } .scene-bleue .note-geante { right: 12%; top: 22%; transform: rotate(8deg); } /* En famille */ .scene-verte .large { width: min(360px, 76%); left: 7%; top: 10%; transform: rotate(-2deg); } .scene-verte .etroite { width: min(250px, 56%); right: 6%; bottom: 20%; transform: rotate(3deg); } .scene-verte .presence { left: 6%; bottom: 6%; } /* Semainier */ .semaine { width: min(360px, 78%); left: 8%; top: 8%; padding: 8px 16px; transform: rotate(-1.5deg); } .ui-jour { display: grid; grid-template-columns: 48px 1fr; align-items: center; padding: 10px 0; } .ui-jour + .ui-jour { border-top: 1px solid var(--line); } .ui-jour > b { font-size: 13px; color: var(--bleu); } .scene-ciel .puces { right: 6%; top: 64%; transform: rotate(2deg); } .scene-ciel .action { left: 10%; bottom: 7%; } .puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; max-width: 70%; } .puce { padding: 7px 12px; border-radius: 999px; background: var(--gris); font-size: 14px; font-weight: 700; color: var(--ink-soft); } .puce.on { background: var(--ink); color: #fff; } /* Garde-manger */ .recettes { width: min(400px, 82%); left: 7%; top: 12%; padding: 6px 14px; transform: rotate(-1.5deg); } .ui-recette { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 750; } .ui-recette + .ui-recette { border-top: 1px solid var(--line); } .ui-recette > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ui-recette small { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .ui-recette i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; } .ui-recette .fav { color: #d9a100; background: #fff6d6; } .ui-recette .fav.off { color: #c9c1b6; background: var(--gris); } .ui-recette .plus { color: #fff; background: var(--accent); } .scene-miel .puces { right: 6%; bottom: 9%; transform: rotate(2.5deg); } .a-tester { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #fff0c2; color: var(--miel) !important; } /* ---------- mise en page des parties ---------- */ .accroche, .bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .accroche { padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 104px); } .accroche-texte { display: flex; flex-direction: column; gap: 24px; } .accroche .scene { min-height: 520px; } .supports { color: var(--ink-soft); font-size: 15px; font-weight: 600; } .bloc { padding-block: clamp(40px, 6vw, 80px); } .bloc-texte { display: flex; flex-direction: column; gap: 18px; } .bloc-texte > p { color: var(--ink-soft); font-size: 19px; max-width: 32em; } .bloc.inverse .bloc-texte { order: 2; } #famille h2 { color: var(--vert); } #semainier h2 { color: var(--bleu); } #garde-manger h2 { color: var(--miel); } #fiche h2 { color: var(--prune); } .coches { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; } .coches li { position: relative; padding-left: 36px; font-weight: 650; } .coches li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 8px; background: var(--vert); } .coches li::after { content: ""; position: absolute; left: 8.5px; top: 5px; width: 7px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } @media (max-width: 880px) { .accroche, .bloc { grid-template-columns: 1fr; } .bloc.inverse .bloc-texte { order: 0; } .scene, .accroche .scene { min-height: 420px; border-radius: 24px; } } /* SUR TÉLÉPHONE, LES MORCEAUX S'EMPILENT. Posés librement, ils se chevauchaient sur 390 px : une rangée de liste passait sous une autre carte, et on ne lisait plus ni l'une ni l'autre. Sous 700 px, la scène devient une colonne ; chaque morceau garde sa légère inclinaison et s'aligne tantôt à gauche, tantôt à droite, pour que ça reste une composition et pas une pile. */ @media (max-width: 700px) { .scene, .accroche .scene { min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px 18px; } .scene > .ui, .scene > .vue > .ui { position: relative; inset: auto !important; width: auto !important; max-width: 100%; } .scene > :nth-child(odd), .vue > :nth-child(odd) { align-self: flex-start; } .scene > :nth-child(even), .vue > :nth-child(even) { align-self: flex-end; } .scene > .vue { position: static; display: flex; flex-direction: column; gap: 14px; } .scene .carte { min-width: 78%; } .cuisine, .variantes { transform: rotate(-1.5deg) !important; min-width: 100% !important; } .scene-bleue .note-geante { display: none; } .pastille { white-space: normal; font-size: 14px; padding: 9px 14px; } .ui-ligne { font-size: 15px; padding: 7px 0; } .puces { max-width: 100%; } } /* ---------- écrire une recette ---------- */ .ecrire { padding-block: clamp(56px, 8vw, 104px); background: var(--nuit); color: #f4f6fb; border-radius: 36px; } main > section.ecrire { margin: clamp(16px, 3vw, 40px) 12px; } @media (min-width: 1320px) { main > section.ecrire { margin-inline: auto; } } .ecrire h2 { color: var(--etiquette); max-width: 14em; } .ecrire .chapo { color: #c5cedd; margin-top: 18px; } .sources { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sources li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); } .sources svg { grid-row: span 2; width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--s); color: var(--nuit); } .sources b { font-size: 18px; } .sources li > span { color: #aab5c8; font-size: 15px; } @media (max-width: 960px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .sources { grid-template-columns: 1fr; } } /* ---------- la fiche : un rail et des vues ---------- */ .fiche-choix { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .fiche-choix button { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 16px; border: 0; border-left: 4px solid transparent; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; } .fiche-choix button b { font-size: 18px; } .fiche-choix button > span { color: var(--ink-soft); font-size: 15px; } .fiche-choix button:hover { background: var(--gris); } .fiche-choix button[aria-selected="true"] { background: var(--prune-pale); border-left-color: var(--prune); } .vue { position: absolute; inset: 0; } .note-carte { display: flex; align-items: center; gap: 14px; width: min(360px, 82%); left: 8%; top: 14%; transform: rotate(-2deg); } .jauges { width: min(300px, 70%); right: 7%; bottom: 14%; transform: rotate(2deg); display: grid; gap: 10px; } .jauges p { display: grid; grid-template-columns: 1fr 100px; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; } .jauges i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--note-a) var(--v), var(--gris) var(--v)); } .jauges i.haut { background: linear-gradient(90deg, var(--note-d) var(--v), var(--gris) var(--v)); } .echange { width: min(360px, 84%); display: grid; gap: 6px; } .echange:nth-child(1) { left: 7%; top: 8%; transform: rotate(-2deg); } .echange:nth-child(2) { right: 6%; top: 42%; transform: rotate(1.5deg); } .ui-bouton { justify-self: start; margin-top: 4px; padding: 7px 14px; border-radius: 10px; background: var(--prune); color: #fff; font-weight: 750; font-size: 14px; } .progres { left: 9%; bottom: 7%; gap: 10px; font-size: 20px; } .cuisine { width: min(380px, 84%); left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1.5deg); padding: 20px; display: grid; gap: 12px; } .barre { height: 6px; border-radius: 99px; background: var(--gris); overflow: hidden; } .barre i { display: block; width: var(--v); height: 100%; background: var(--accent); } .ui-etape { font-size: 21px; font-weight: 600; line-height: 1.35; } .ui-minuteur { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 750; font-variant-numeric: tabular-nums; } .variantes { width: min(360px, 84%); left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(1.5deg); display: grid; gap: 8px; } .ui-variante { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--gris); font-weight: 700; } .scene-prune .recettes { top: 16%; } .scene-prune .action { right: 8%; bottom: 12%; } /* ---------- les offres ---------- */ .offres { padding-block: clamp(56px, 8vw, 110px); } .offres .chapo { margin-top: 16px; } .etiquettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(28px, 4vw, 48px); align-items: start; max-width: 900px; } @media (max-width: 760px) { .etiquettes { grid-template-columns: 1fr; max-width: 520px; } } .etiquette { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px 28px; background: var(--gris); border-radius: 24px; } .etiquette::before { content: ""; position: absolute; top: 14px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--fond); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); } .etiquette.choisie { background: var(--etiquette); } .prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .prix b { font: 800 64px/1 var(--f-titre); font-stretch: 88%; letter-spacing: -0.03em; } .prix > span { font-weight: 750; } .prix-suite { margin-top: -6px; font-weight: 750; } .etiquette ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .etiquette li { padding-left: 18px; position: relative; } .etiquette li::before { content: ""; position: absolute; left: 0; top: .66em; width: 8px; height: 2px; background: currentColor; } .etiquette .bouton { margin-top: 8px; } .etiquette .bouton.clair { background: var(--blanc); } .etiquette.choisie .bouton { background: var(--ink); } .etiquette.choisie .bouton:hover { background: #000; } .lien-mois { align-self: center; font-weight: 750; color: var(--ink); } .pastille-lancement { position: absolute; top: -14px; right: 20px; padding: 6px 14px; border-radius: 999px; background: var(--danger); color: #fff; font-weight: 800; font-size: 14px; transform: rotate(4deg); } .limites { padding: 12px 14px; background: var(--blanc); border-radius: 14px; font-size: 15px; } .limites b { display: block; margin-bottom: 2px; } .limites p { color: var(--ink-soft); } .paiement { margin-top: 24px; color: var(--ink-soft); font-size: 15px; max-width: 44em; } /* ---------- l'Alsace, la fin ---------- */ .alsace { padding-block: clamp(40px, 6vw, 80px); display: grid; gap: 18px; } .alsace h2 { max-width: 16em; } .alsace p { color: var(--ink-soft); font-size: clamp(18px, 1.9vw, 21px); max-width: 40em; } .fin { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 120px); } .pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 24px var(--gouttiere) calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; } .pied nav { display: flex; gap: 18px; } /* ---------- la promesse ---------- */ .promesse { padding-block: clamp(40px, 6vw, 80px); display: grid; gap: 24px; } .promesse h2 { max-width: 18em; } .promesse-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .promesse-points li { background: var(--gris); border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; align-content: start; } .promesse-points b { font-family: var(--f-titre); font-stretch: 88%; font-size: 22px; color: var(--ink); } .promesse-points span { color: var(--ink-soft); } .promesse-lien { color: var(--ink-soft); } .pied nav { flex-wrap: wrap; } /* ---------- les pages légales ---------- */ main.legal { max-width: calc(46em + 2 * var(--gouttiere)); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gouttiere) clamp(48px, 7vw, 96px); } main.legal h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 8px; text-wrap: balance; } main.legal h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 36px 0 10px; } main.legal p, main.legal li { color: var(--ink-soft); max-width: 44em; } main.legal ul { padding-left: 1.2em; display: grid; gap: 8px; } .legal-maj { font-size: 15px; margin-bottom: 20px; } .legal-promesse { background: var(--gris); border-radius: 18px; padding: 16px 20px; margin-top: 24px; } .legal-promesse p { color: var(--ink); margin: 0; font-weight: 600; } /* Ce qui reste à remplir se voit : le déploiement refuse de partir tant qu'il en reste (tools/publish.mjs). */ .a-completer, .a-verifier { background: var(--miel-pale); color: var(--miel); font-weight: 700; border-radius: 6px; padding: 0 4px; }