/* ===================================================================================================================== Pinch · version 58 · le thème sombre officiel (l'ambiance validée de la version 56 : nuit violette, jaune doré). Chargé par public/index.html APRÈS tous les autres styles : Le mode clair ne change pas. En mode sombre (bouton lune, ou réglage de l'appareil), ces jetons remplacent les couleurs du site ; le sas et le questionnaire (css/onboarding.css) les utilisent toujours, quel que soit le mode. ===================================================================================================================== */ /* ---------- 1. les jetons (toujours définis : le sas et le questionnaire sont sombres dans les deux modes) ---------- */ :root{ --fd-page:#0c0a18; /* fond de page, haut */ --fd-page-2:#121020; /* fond de page, bas (et bandeaux de contenu) */ --fd-bg:linear-gradient(180deg,var(--fd-page) 0%,var(--fd-page-2) 100%); --fd-card:#181628; /* cartes, champs, boutons secondaires */ --fd-line:#26233d; /* bordures, piste des barres de progression */ --fd-accent:#ffc837; /* jaune doré : boutons d'action, sélection, progression */ --fd-on-accent:#000000; /* texte posé sur le jaune (gras) */ --fd-title:#ffffff; /* titres et texte principal */ --fd-label:#9e9cb8; /* libellés, sous-titres, notes */ --fd-placeholder:#6c6987; --fd-glow:radial-gradient(120% 70% at 85% -10%,rgba(92,74,222,.26),transparent 60%),radial-gradient(90% 60% at -10% 110%,rgba(255,200,55,.07),transparent 60%); } /* ---------- 2. le mode sombre du site : les variables historiques prennent les jetons ---------- */ /* (même sélecteur que le mode sombre d'index.html, chargé après : ces valeurs l'emportent, navigateurs récents ou non) */ :root[data-theme="dark"]{ --carbon:var(--fd-title); /* l'encre */ --paper:var(--fd-card); /* les cartes et les boutons */ --sky:var(--fd-page); /* le fond */ --concrete:var(--fd-line); --mist:#1f1c33; --sun:var(--fd-accent); --edge:var(--fd-line); /* version 58 : les bordures (les îlots clairs gardent un trait noir) */ --label:var(--fd-label); --pop:#ffffff; --mint-deep:var(--fd-page-2); --lav-deep:var(--fd-page-2); color-scheme:dark; } :root[data-theme="dark"] body{background:var(--fd-bg) var(--fd-page);background-attachment:scroll;color:var(--fd-title)} /* les bandeaux : en-têtes de page sur le fond nuit (avec la lueur violette), bandeaux de contenu un cran plus clairs */ :root[data-theme="dark"] .band{background:var(--fd-page-2)} :root[data-theme="dark"] .band.view-top,:root[data-theme="dark"] .band.hero{background:var(--fd-glow),var(--fd-page)} :root[data-theme="dark"] :is(.bg-mint,.bg-lav,.bg-sky,.bg-concrete,.bg-sun,.words,.fin,.trend,.feat,.how,.sim):not(.view-top){background:var(--fd-page-2)} :root[data-theme="dark"] .bg-paper{background:var(--fd-page-2)} :root[data-theme="dark"] .panel,:root[data-theme="dark"] .field{background:var(--fd-card)} :root[data-theme="dark"] .mq,:root[data-theme="dark"] .foot{background:#07060f;color:var(--fd-title)} :root[data-theme="dark"] :is(.field,.linkform input)::placeholder{color:var(--fd-placeholder)} /* les libellés et sous-titres (sans priorité ajoutée : la couleur propre d'un composant reste prioritaire) */ :where(:root[data-theme="dark"]) :where(.lede,.tagline,.note,.flabel,.fl,.consent-n,.g-note,.mc-legal,.ph-in .lede){color:var(--label)} /* les boutons d'action : jaune doré, texte noir gras (page courante et bouton activé aussi) ; version 59 : les filtres et options sélectionnés passent en blanc (section 6 plus bas) */ :root[data-theme="dark"] :is(.btn-fill,.btn[aria-current="page"],.btn[aria-pressed="true"]){ background:var(--fd-accent);color:var(--fd-on-accent);border-color:var(--fd-accent);font-weight:700;--blob:#ffe08a} :root[data-theme="dark"] .btn-fill:focus-visible{color:var(--fd-on-accent)} :root[data-theme="dark"] :is(.btn-fill,.btn[aria-pressed="true"]) svg{color:var(--fd-on-accent)} @media (hover:hover){ :root[data-theme="dark"] .btn-fill:hover{background:#ffd35f} } :root[data-theme="dark"] :is(.btn,.pick,.field,.linkform input):focus-visible{outline-color:var(--fd-accent)} /* le tube qui traverse les en-têtes : un ruban violet nuit avec un reflet doré (le texte reste lisible par-dessus) */ :root[data-theme="dark"] .t-out{stroke:#30295a} :root[data-theme="dark"] .t-body{stroke:#1e1840} :root[data-theme="dark"] .t-hi{stroke:rgba(255,200,55,.55)} /* ===================================================================================================================== 6. Version 59 : contours blancs sur les éléments interactifs (mode sombre seulement) 1. pilules de navigation et boutons du header · 2. filtres et options · 3. cartes de recettes et du Duo Éco 4. barres de défilement discrètes. Les îlots clairs (tickets jaunes, cartes Premium…) redéfinissent ces jetons en noir (index.html) : tout y reste lisible. ===================================================================================================================== */ :root{ --fd-stroke-nav:rgba(255,255,255,.25); /* navigation, header, boutons contour */ --fd-stroke-chip:rgba(255,255,255,.2); /* filtres et options, au repos */ --fd-stroke-card:rgba(255,255,255,.15); /* cartes de recettes, cartes du Duo Éco */ --fd-stroke-hover:rgba(255,255,255,.4); /* cartes, au survol */ --fd-stroke-on:#ffffff; /* survol, focus, sélection */ --fd-chip-bg:rgba(255,255,255,.04); --fd-chip-bg-hover:rgba(255,255,255,.1); --fd-chip-on:#ffffff; /* filtre sélectionné : fond blanc… */ --fd-chip-on-ink:#0c0a18; /* …texte nuit */ --fd-btn-blob:rgba(255,255,255,.1); /* survol des boutons contour : fond un peu plus clair */ } /* 6.1 pilules de navigation et boutons du header (et tous les boutons contour) */ :root[data-theme="dark"] :is(.btn,.theme,.logo,.plus){border-color:var(--fd-stroke-nav)} :root[data-theme="dark"] .btn:not(.btn-fill){--blob:var(--fd-btn-blob)} /* plus de pastille colorée sous un texte blanc */ @media (hover:hover){ :root[data-theme="dark"] :is(.btn,.theme,.logo,.plus):hover{border-color:var(--fd-stroke-on)} } :root[data-theme="dark"] :is(.btn,.theme,.logo,.plus):focus-visible, :root[data-theme="dark"] :is(.btn[aria-current="page"],.acct-btn[aria-expanded="true"],.plus[aria-expanded="true"]){border-color:var(--fd-stroke-on)} /* page courante : jaune doré (section 5), --blob doré au survol */ :root[data-theme="dark"] :is(.btn-fill,.btn[aria-current="page"],.btn[aria-pressed="true"]){--blob:#ffe08a} :root[data-theme="dark"] .btn-fill{border-color:var(--fd-accent)} /* 6.2 filtres et options (catégories, « Classer », objectifs, activité, rayons, fonds de placard…) */ :root[data-theme="dark"] .pick{border-color:var(--fd-stroke-chip);background:var(--fd-chip-bg);color:var(--carbon)} @media (hover:hover){ :root[data-theme="dark"] .pick:hover{border-color:var(--fd-stroke-on);background:var(--fd-chip-bg-hover)} } :root[data-theme="dark"] :is(.pick[aria-pressed="true"],input:checked+.pick), :root[data-theme="dark"] :is(.pick[aria-pressed="true"],input:checked+.pick):hover{ --carbon:var(--fd-chip-on-ink);border-color:var(--fd-chip-on);background:var(--fd-chip-on);color:var(--fd-chip-on-ink)} /* 6.3 cartes de recettes (accueil, Tendances, favoris, listes) et cartes du Duo Éco */ :root[data-theme="dark"] :is(.trc,.tcard,.vc-in,.lcard,.zg-it,.de-band,.ticket.duo,.dayw){border-color:var(--fd-stroke-card)} :root[data-theme="dark"] .slot{border-color:var(--fd-stroke-card)} /* cases du Meal Prep (pointillés gardés) */ :root[data-theme="dark"] :is(.trc,.tcard,.lcard,.zg-it,.dayw){transition:border-color .2s ease,translate .2s ease,rotate .2s ease,background-color .2s ease} :root[data-theme="dark"] .vc-in{transition:transform .25s ease-out,border-color .2s ease,translate .2s ease} @media (hover:hover){ /* « translate » (et non « transform ») : l'inclinaison 3D des cartes favorites reste intacte */ :root[data-theme="dark"] :is(.trc,.tcard,.lcard,.zg-it,.dayw):hover, :root[data-theme="dark"] .vcard:hover .vc-in{border-color:var(--fd-stroke-hover);translate:0 -2px} :root[data-theme="dark"] .tcard:hover{rotate:0deg;background:var(--paper);--bg:var(--paper)} /* la carte reste sombre */ :root[data-theme="dark"] .slot:hover{border-color:var(--fd-stroke-hover)} } @media (prefers-reduced-motion:reduce){ :root[data-theme="dark"] :is(.trc,.tcard,.lcard,.zg-it,.dayw):hover,:root[data-theme="dark"] .vcard:hover .vc-in{translate:none} } /* 6.4 barres de défilement : fines et discrètes (tout le site), la rangée « Tendances du moment » comprise */ :root[data-theme="dark"]{scrollbar-color:rgba(255,255,255,.18) transparent} :root[data-theme="dark"] .trend-row{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent} :root[data-theme="dark"] .trend-row::-webkit-scrollbar{height:6px} /* Safari */ :root[data-theme="dark"] .trend-row::-webkit-scrollbar-track{background:transparent} :root[data-theme="dark"] .trend-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}