/* ============================================================ VARIABLES — modifie ces couleurs pour changer tout le thème ============================================================ */ :root { --fond: #F7F7F5; /* fond général de la page */ --papier: #FFFFFF; /* fond des étiquettes/cartes */ --encre: #16150F; /* texte principal, quasi-noir */ --encre-discrete: #6B6A62; /* texte secondaire */ --trait: #16150F; /* filets épais/fins de l'étiquette */ --trait-clair: #DEDCD3; --accent: #C6401F; /* accent unique : liens, boutons, hover */ --accent-selection: #D62828; /* cadre de la journée sélectionnée dans le planning */ --accent-aujourdhui: #2B6CB0; /* couleur de la date du jour dans le planning */ --alerte-orange: #C9781F; /* dépassement modéré d'un objectif nutritionnel */ --alerte-rouge: #B3261E; /* dépassement important d'un objectif nutritionnel */ /* couleurs fonctionnelles des macros (jamais utilisées ailleurs) */ --macro-proteines: #A83B2E; --macro-glucides: #C98A2B; --macro-lipides: #63713F; --macro-sucres: #E0B168; /* dérivé plus clair de glucides, "dont sucres" */ --macro-ags: #96A374; /* dérivé plus clair de lipides, "dont AGS" */ --macro-fibres: #8B7355; --macro-sel: #6B7A8F; --police-affichage: 'Archivo Black', sans-serif; --police-texte: 'Inter', sans-serif; --police-chiffres: 'IBM Plex Mono', monospace; --rayon: 2px; } /* ============================================================ MODE SOMBRE — activé en posant data-theme="dark" sur (voir theme.js). Toute l'interface est construite avec les variables ci-dessus, donc les surcharger suffit à tout adapter. ============================================================ */ :root[data-theme="dark"] { --fond: #17160F; --papier: #211F18; --encre: #EEEDE6; --encre-discrete: #A6A395; --trait: #EEEDE6; --trait-clair: #383627; --accent: #E2703A; --accent-selection: #E8615A; --accent-aujourdhui: #5B9BD9; --alerte-orange: #E0A044; --alerte-rouge: #E2665B; --macro-proteines: #D97A63; --macro-glucides: #E0AB55; --macro-lipides: #93A472; --macro-sucres: #EAC98A; --macro-ags: #AEBB8E; --macro-fibres: #B49B78; --macro-sel: #93A6BD; } * { box-sizing: border-box; } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--police-texte); -webkit-font-smoothing: antialiased; } .page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; } /* ============================================================ LIEN RETOUR AU PORTAIL (rarement utilisé seul désormais, le bandeau de compte ci-dessous couvre la plupart des pages) ============================================================ */ .lien-retour-site { display: inline-block; font-size: 0.85rem; color: var(--encre-discrete); text-decoration: none; margin-bottom: 24px; } .lien-retour-site:hover { color: var(--accent); } /* ============================================================ BANDEAU DE COMPTE — sticky, commun à toutes les pages. Aligne sur une seule ligne : retour au site + marque à gauche, identité de l'utilisateur + menu dans le coin à droite. ============================================================ */ .entete-site { position: sticky; top: 0; z-index: 600; background: var(--papier); border-bottom: 1px solid var(--trait-clair); margin-bottom: 32px; } .entete-site__conteneur { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .entete-site__marque { display: flex; align-items: baseline; gap: 18px; } .entete-site__logo { font-family: var(--police-chiffres); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; color: var(--encre); text-decoration: none; } .entete-site__logo:hover { color: var(--accent); } .entete-site__accueil { font-size: 0.8rem; color: var(--encre-discrete); text-decoration: none; } .entete-site__accueil:hover { color: var(--accent); } .entete-site__compte { display: flex; align-items: center; gap: 18px; font-size: 0.85rem; } .entete-site__salutation { color: var(--encre-discrete); } .entete-site__lien { color: var(--encre); text-decoration: none; font-weight: 600; } .entete-site__lien:hover { color: var(--accent); } .entete-site__lien--discret { color: var(--encre-discrete); font-weight: 500; } .entete-site__lien--discret:hover { color: var(--accent); } .entete-site__lien--principal { background: var(--accent); color: #FFFFFF; padding: 7px 14px; border-radius: var(--rayon); } .entete-site__lien--principal:hover { color: #FFFFFF; opacity: 0.9; } /* Pastille avatar : simple repère visuel de l'utilisateur connecté, plus un déclencheur de menu (tout est déployé en dessous) */ .entete-site__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--police-chiffres); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } /* Ligne 2 du bandeau : toutes les catégories déployées à plat, alignées à droite, juste sous la ligne 1 — pas de clic requis */ .entete-site__categories { border-top: 1px solid var(--trait-clair); background: var(--fond); } .entete-site__categories-conteneur { max-width: 1180px; margin: 0 auto; padding: 8px 24px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 8px; } .entete-site__categories-conteneur a { display: inline-block; padding: 5px 11px; border-radius: var(--rayon); font-size: 0.8rem; font-weight: 500; color: var(--encre-discrete); text-decoration: none; white-space: nowrap; } .entete-site__categories-conteneur a:hover { background: var(--papier); color: var(--accent); } .entete-site__categories-separateur { width: 1px; height: 16px; background: var(--trait-clair); margin: 0 4px; } @media (max-width: 640px) { .entete-site__salutation { display: none; } .entete-site__conteneur { padding: 12px 16px; } .entete-site__categories-conteneur { justify-content: flex-start; padding: 8px 16px; } } @media (max-width: 480px) { .entete-site__accueil { display: none; } } /* ============================================================ EN-TÊTE ============================================================ */ .header { margin-bottom: 32px; } .header__eyebrow { font-family: var(--police-chiffres); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; } .header__title { font-family: var(--police-affichage); font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; margin: 0 0 10px; text-transform: uppercase; letter-spacing: -0.01em; } .header__subtitle { color: var(--encre-discrete); font-size: 1rem; margin: 0; max-width: 46ch; } /* ============================================================ BARRE ADMIN ============================================================ */ .barre-admin { margin-bottom: 24px; } .bouton-admin { display: inline-block; font-family: var(--police-chiffres); font-size: 0.8rem; letter-spacing: 0.04em; text-decoration: none; color: var(--papier); background: var(--encre); padding: 10px 16px; border-radius: var(--rayon); } .bouton-admin:hover { background: var(--accent); } /* ============================================================ GRILLE DE RECETTES ============================================================ */ .grille-recettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-bottom: 56px; } .etat-vide { color: var(--encre-discrete); } .carte-recette { display: block; text-decoration: none; color: inherit; background: var(--papier); border: 1px solid var(--trait-clair); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .carte-recette:hover, .carte-recette:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22, 21, 15, 0.08); } .carte-recette:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .carte-recette__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--trait-clair); } .carte-recette__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- l'étiquette nutritionnelle sous la photo ---- */ .etiquette { padding: 16px 18px 18px; border-top: 6px solid var(--encre); /* filet épais type "Nutrition Facts" */ } .etiquette__nom { font-family: var(--police-affichage); font-size: 1rem; text-transform: uppercase; margin: 0 0 4px; line-height: 1.2; /* Hauteur minimale de 3 lignes pour aligner les cartes entre elles quand les noms sont courts, SANS jamais couper le texte : un nom plus long que 3 lignes s'affiche en entier, quitte à ce que sa carte soit un peu plus haute que les autres. */ min-height: 3.6em; } .etiquette__meta { font-size: 0.8rem; color: var(--encre-discrete); margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Réserve la hauteur d'une pastille "obligatoires" même quand aucun badge n'est affiché, pour que toutes les cartes d'une même rangée s'alignent (calories, macros...) au même niveau. Si plusieurs badges se cumulent sur une carte, le conteneur grandit simplement au-delà du minimum. */ .etiquette__badges-obligatoires { min-height: 29px; } .etiquette__badge-legumes { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--macro-lipides); background: color-mix(in srgb, var(--macro-lipides) 12%, var(--papier)); border-radius: 999px; padding: 3px 10px; margin: -6px 0 12px; } .etiquette__badge-exclusion { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--alerte-rouge); background: color-mix(in srgb, var(--alerte-rouge) 12%, var(--papier)); border-radius: 999px; padding: 3px 10px; margin: -6px 0 12px; } .etiquette__badge-privee { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--encre-discrete); background: var(--fond); border: 1px solid var(--trait-clair); border-radius: 999px; padding: 3px 10px; margin: -6px 0 12px; } .filtre-admin-privees { margin: 16px 0 0; } /* ============================================================ FICHE DETAIL D'UNE RECETTE (modale) ============================================================ */ .detail-recette__photo { margin: -28px -28px 16px; border-radius: var(--rayon) var(--rayon) 0 0; overflow: hidden; max-height: 280px; } .detail-recette__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-recette__nom { font-family: var(--police-affichage); font-size: 1.4rem; text-transform: uppercase; margin: 0 0 4px; } .detail-recette__macros { margin: 14px 0; } .detail-recette__ingredients { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .detail-recette__ingredient { display: flex; align-items: center; gap: 12px; } .detail-recette__ingredient-photo { width: 40px; height: 40px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait-clair); background: var(--fond); flex-shrink: 0; } .detail-recette__ingredient-photo--vide { display: block; border-style: dashed; } .detail-recette__ingredient-nom { flex: 1; } .detail-recette__ingredient-quantite { font-weight: 600; color: var(--encre-discrete); white-space: nowrap; flex-shrink: 0; } .detail-recette__instructions { white-space: pre-line; line-height: 1.6; } /* ============================================================ PROPOSITIONS D'INGREDIENTS ============================================================ */ .carte-proposition, .carte-proposition-admin { border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 16px; margin-bottom: 14px; } .carte-proposition__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .badge-statut { display: inline-block; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .statut-en-attente { color: var(--alerte-orange); background: color-mix(in srgb, var(--alerte-orange) 12%, var(--papier)); } .statut-approuvee { color: #2E7D32; background: color-mix(in srgb, #2E7D32 12%, var(--papier)); } .statut-rejetee { color: var(--alerte-rouge); background: color-mix(in srgb, var(--alerte-rouge) 12%, var(--papier)); } .proposition-photos { display: flex; gap: 10px; margin: 12px 0; } .proposition-photo { width: 140px; height: 140px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait-clair); } .formulaire--ligne-rejet { display: flex; gap: 8px; align-items: center; } .formulaire--ligne-rejet input[type="text"] { font-family: var(--police-texte); font-size: 0.85rem; padding: 8px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } /* Recette grisée pour l'utilisateur connecté (contient un aliment qu'il a marqué comme "à éviter" dans son profil) — reste cliquable et ajoutable, juste visuellement mise en retrait */ .carte-recette-conteneur--deconseillee .carte-recette { opacity: 0.45; filter: grayscale(0.7); transition: opacity 0.15s ease, filter 0.15s ease; } .carte-recette-conteneur--deconseillee:hover .carte-recette, .carte-recette-conteneur--deconseillee:focus-within .carte-recette { opacity: 0.8; filter: grayscale(0.3); } .etiquette__calories { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--encre); border-bottom: 4px solid var(--encre); padding: 6px 0; margin-bottom: 6px; font-family: var(--police-chiffres); } .etiquette__calories span { font-size: 0.75rem; text-transform: uppercase; } .etiquette__calories strong { font-size: 1.1rem; } .etiquette__ligne { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--trait-clair); font-family: var(--police-chiffres); font-size: 0.82rem; } .etiquette__ligne--derniere { border-bottom: none; } .etiquette__puce { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .etiquette__puce--proteines { background: var(--macro-proteines); } .etiquette__puce--glucides { background: var(--macro-glucides); } .etiquette__puce--lipides { background: var(--macro-lipides); } .etiquette__puce--sucres { background: var(--macro-sucres); } .etiquette__puce--ags { background: var(--macro-ags); } .etiquette__puce--fibres { background: var(--macro-fibres); } .etiquette__puce--sel { background: var(--macro-sel); } .etiquette__label { flex: 1; color: var(--encre-discrete); } .etiquette__valeur { font-weight: 600; } /* ============================================================ CALCULATEUR DU JOUR ============================================================ */ .calculateur { background: var(--papier); border: 1px solid var(--trait-clair); padding: 24px; } .calculateur__titre { font-family: var(--police-affichage); text-transform: uppercase; font-size: 1.2rem; margin: 0 0 4px; } .calculateur__aide { color: var(--encre-discrete); font-size: 0.85rem; margin: 0 0 18px; } .calculateur__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 20px; } .calculateur__item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; } .calculateur__total { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border-top: 2px solid var(--encre); padding-top: 16px; } .calculateur__total-item { display: flex; flex-direction: column; font-family: var(--police-chiffres); } .calculateur__total-item span { font-size: 0.72rem; text-transform: uppercase; color: var(--encre-discrete); } .calculateur__total-item strong { font-size: 1.15rem; } /* ============================================================ PIED DE PAGE ============================================================ */ .footer { margin-top: 56px; text-align: center; color: var(--encre-discrete); font-size: 0.8rem; } /* ============================================================ PAGE ETROITE (inscription / connexion) ============================================================ */ .page--etroite { max-width: 440px; } /* ============================================================ FORMULAIRES ============================================================ */ .formulaire { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .champ { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; } .champ input, .champ select { width: 100%; box-sizing: border-box; font-family: var(--police-texte); font-size: 0.95rem; padding: 10px 12px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } .champ input:focus, .champ select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .bouton-principal { font-family: var(--police-chiffres); font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--papier); background: var(--encre); border: none; padding: 13px 18px; border-radius: var(--rayon); cursor: pointer; } .bouton-principal:hover { background: var(--accent); } .lien-secondaire { margin-top: 18px; font-size: 0.85rem; color: var(--encre-discrete); } .lien-secondaire a { color: var(--accent); } .message-erreur { background: #FBEAE7; color: #8A2E1B; border: 1px solid #E7B7AC; padding: 10px 14px; font-size: 0.85rem; border-radius: var(--rayon); } .message-info { background: #EEF3E7; color: #445128; border: 1px solid #C9D6B4; padding: 10px 14px; font-size: 0.85rem; border-radius: var(--rayon); margin-bottom: 16px; } /* Message affiché directement dans une carte ingrédient (ou sous le formulaire d'ajout) après une action AJAX, sans rechargement ni déplacement du scroll. Vide et invisible par défaut ; le JavaScript lui ajoute .message-carte--erreur ou .message-carte--info et la classe .message-carte--visible pour la faire apparaître. */ .message-carte { display: none; margin-top: 12px; padding: 8px 12px; font-size: 0.82rem; border-radius: var(--rayon); transition: opacity 0.2s ease; } .message-carte--visible { display: block; } .message-carte--info { background: #EEF3E7; color: #445128; border: 1px solid #C9D6B4; } .message-carte--erreur { background: #FBEAE7; color: #8A2E1B; border: 1px solid #E7B7AC; } .carte-ingredient--en-cours-suppression { opacity: 0; transform: scale(0.98); transition: opacity 0.25s ease, transform 0.25s ease; } /* ============================================================ ESPACE ADMIN — tableau de bord ============================================================ */ .grille-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .carte-admin { display: block; text-decoration: none; color: inherit; background: var(--papier); border: 1px solid var(--trait-clair); border-top: 6px solid var(--encre); padding: 20px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .carte-admin:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22, 21, 15, 0.08); } .carte-admin h2 { font-family: var(--police-affichage); text-transform: uppercase; font-size: 1rem; margin: 0 0 6px; } .carte-admin p { font-size: 0.85rem; color: var(--encre-discrete); margin: 0; } /* ============================================================ ESPACE ADMIN — tableau des comptes ============================================================ */ .tableau-admin { width: 100%; border-collapse: collapse; background: var(--papier); font-size: 0.88rem; } .tableau-admin th, .tableau-admin td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait-clair); } .tableau-admin th { font-family: var(--police-chiffres); text-transform: uppercase; font-size: 0.72rem; color: var(--encre-discrete); border-bottom: 2px solid var(--encre); } .etiquette-role { font-family: var(--police-chiffres); font-size: 0.72rem; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } .etiquette-role--utilisateur { background: var(--trait-clair); color: var(--encre-discrete); } .etiquette-role--admin { background: var(--accent); color: var(--papier); } .formulaire-role { display: flex; gap: 6px; align-items: center; } .formulaire-role select { font-size: 0.8rem; padding: 4px 6px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); } .bouton-mini { font-family: var(--police-chiffres); font-size: 0.72rem; text-transform: uppercase; background: var(--encre); color: var(--papier); border: none; padding: 5px 10px; border-radius: var(--rayon); cursor: pointer; } .bouton-mini:hover { background: var(--accent); } .texte-discret { color: var(--encre-discrete); font-size: 0.85rem; } .bouton-mini--danger { background: var(--macro-proteines); } .bouton-mini--danger:hover { background: var(--accent); } a.bouton-mini { text-decoration: none; } /* ============================================================ BLOCS ADMIN (création / formulaire recette) ============================================================ */ .bloc-admin { background: var(--papier); border: 1px solid var(--trait-clair); padding: 22px; margin: 32px 0; } .bloc-admin__titre { font-family: var(--police-affichage); text-transform: uppercase; font-size: 1.1rem; margin: 0 0 16px; } .bloc-admin__sous-titre { font-family: var(--police-affichage); text-transform: uppercase; font-size: 0.9rem; margin: 24px 0 12px; } /* Formulaire sur une seule ligne (création rapide) */ .formulaire--ligne { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .formulaire--ligne .champ { flex: 1; min-width: 120px; } .formulaire--ligne .champ--nom { flex: 2; min-width: 160px; } .formulaire--ligne .champ--nombre { min-width: 90px; } .formulaire--ligne .bouton-principal { flex-shrink: 0; } /* ============================================================ FORMULAIRE INGRÉDIENT (ajout) — ligne principale, grille de macros symétrique, ligne de pied (image + bouton) ============================================================ */ .formulaire--ingredient .ligne-principale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .formulaire--ingredient .ligne-principale .champ--nom { flex: 2; min-width: 200px; } .formulaire--ingredient .ligne-principale .champ--unite { flex: 1; min-width: 180px; } .formulaire--ingredient .ligne-principale .champ-poids-unite { flex: 1; min-width: 180px; } .grille-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; } @media (max-width: 720px) { .grille-macros { grid-template-columns: repeat(2, 1fr); } } .ligne-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 4px; } .formulaire--ingredient .grille-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; } .formulaire--ingredient .grille-macros .champ { /* Aligne tous les champs sur leurs INPUTS (pas sur leurs libellés) : "dont acides gras saturés" prend 2 lignes alors que les autres libellés n'en prennent qu'une, ce qui décalait son champ vers le bas par rapport aux autres sans cette règle */ justify-content: flex-end; } .formulaire--ingredient .ligne-pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 4px; border-top: 1px solid var(--trait-clair); } .formulaire--ingredient .ligne-pied .champ--nom { flex: 1; min-width: 220px; } @media (max-width: 720px) { .formulaire--ingredient .grille-macros { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ LISTE DES INGRÉDIENTS — cartes (nom / macros / image+actions) remplace l'ancien tableau, illisible avec autant de colonnes ============================================================ */ .liste-ingredients { display: flex; flex-direction: column; gap: 12px; } .carte-ingredient { background: var(--papier); border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 16px 18px; } .carte-ingredient__nom { margin-bottom: 14px; } .carte-ingredient__nom input { width: 100%; max-width: 480px; font-family: var(--police-texte); font-weight: 600; font-size: 1.05rem; padding: 8px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } .carte-ingredient__nom input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .carte-ingredient__macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--trait-clair); } .carte-ingredient__macros .champ { /* Même correctif que pour le formulaire de création : aligne tous les champs sur leurs INPUTS, pas sur leurs libellés (voir plus haut) */ justify-content: flex-end; } .carte-ingredient__macros .champ span { font-family: var(--police-chiffres); text-transform: uppercase; font-size: 0.68rem; color: var(--encre-discrete); } .carte-ingredient__macros input, .carte-ingredient__macros select { width: 100%; padding: 6px 8px; font-size: 0.85rem; } .carte-ingredient__image { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; } .carte-ingredient__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .carte-ingredient__nom-champ { flex: 1; min-width: 220px; font-family: var(--police-texte); font-weight: 600; font-size: 1.05rem; padding: 8px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } .carte-ingredient__nom-champ:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .carte-ingredient__actions { display: flex; gap: 8px; flex-shrink: 0; } /* Case à cocher "Légume" (ingrédients) / "Nécessite l'ajout de légumes" (recettes) — un simple checkbox + label, réutilisé à plusieurs endroits */ .case-a-cocher { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; } .case-a-cocher input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .case-a-cocher label { cursor: pointer; } /* Variante pour un texte long (plusieurs lignes) à côté de la case, comme le consentement RGPD : contrairement à .case-a-cocher (pensée pour un libellé court sur une seule ligne, jamais coupé), ici le texte doit pouvoir revenir à la ligne sans forcer un défilement horizontal. */ .case-a-cocher--texte-long { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; white-space: normal; max-width: 100%; } .case-a-cocher--texte-long input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); cursor: pointer; } .champ--case { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; } .ligne-cases-a-cocher { display: flex; flex-wrap: wrap; gap: 8px 24px; } .formulaire--recette textarea { font-family: var(--police-texte); font-size: 0.95rem; padding: 10px 12px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); resize: vertical; } .formulaire__ligne-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .formulaire__ligne-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 480px; } .formulaire__ligne-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 640px) { .formulaire__ligne-4 { grid-template-columns: repeat(2, 1fr); } } /* Champs directement dans une cellule de tableau (admin) */ .champ-tableau { width: 100%; font-family: var(--police-texte); font-size: 0.85rem; padding: 6px 8px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); } .champ-tableau--court { width: 90px; } .tableau-admin__actions { display: flex; gap: 6px; white-space: nowrap; } /* Ajout d'un ingrédient à une recette */ .ajout-ingredient { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .ajout-ingredient select { padding: 8px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); font-family: var(--police-texte); } /* Dans la modale "Ajouter un extra" (étroite), le select doit occuper toute la largeur comme la barre de recherche juste au-dessus, sinon il paraît décalé par rapport à elle. */ #extra-selecteur-ingredient { flex-basis: 100%; width: 100%; } .ajout-ingredient input[type="number"] { width: 100px; padding: 8px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); } .ajout-ingredient #libelle-unite-a-ajouter { min-width: 46px; } /* Style de base, utilisable seule (listes admin ingrédients/recettes) ou à l'intérieur de .ajout-ingredient (recherche pour ajouter un ingrédient à une recette/un extra), qui ajoute juste la largeur pleine ligne. */ .champ-recherche-ingredient { width: 100%; padding: 8px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); font-family: var(--police-texte); box-sizing: border-box; } .ajout-ingredient .champ-recherche-ingredient { flex-basis: 100%; width: auto; } .ajout-ingredient .champ-recherche-message { flex-basis: 100%; margin: -4px 0 0; } .champ-recherche-message { margin: -4px 0 10px; } .bascule-mode-quantite { display: inline-flex; gap: 10px; font-size: 0.82rem; color: var(--encre-discrete); } .bascule-mode-quantite label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } /* Bouton "Enregistrer" qui apparaît à côté de "Retirer" dès que la quantité d'une ligne d'ingrédient a été modifiée, pour valider explicitement la saisie (voir tableau des ingrédients d'une recette). */ .bouton-valider-quantite { margin-right: 6px; } /* Aperçu des macros totales, recalculé en direct */ .apercu-macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre); padding: 14px 0; margin: 20px 0; font-family: var(--police-chiffres); } .apercu-macros div { display: flex; flex-direction: column; } .apercu-macros span { font-size: 0.72rem; text-transform: uppercase; color: var(--encre-discrete); } .apercu-macros strong { font-size: 1.1rem; } @media (max-width: 640px) { .apercu-macros--complet { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ LISTE DES RECETTES — cartes (nom / macros complètes / actions) ============================================================ */ .liste-recettes { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; } .carte-recette { background: var(--papier); border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 16px 18px; } .carte-recette__entete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .carte-recette__entete-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .carte-recette__nom { font-family: var(--police-texte); font-weight: 600; font-size: 1.1rem; margin: 0; } .carte-recette__macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--trait-clair); font-family: var(--police-chiffres); } .carte-recette__macros div { display: flex; flex-direction: column; justify-content: flex-end; } .carte-recette__macros span { font-size: 0.68rem; text-transform: uppercase; color: var(--encre-discrete); } .carte-recette__macros strong { font-size: 0.95rem; } .carte-recette__pied { display: flex; gap: 8px; } /* ============================================================ MODALE DE MODIFICATION D'UNE RECETTE ============================================================ */ .modale-fond { position: fixed; inset: 0; background: rgba(22, 21, 15, 0.88); display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 1000; overflow-y: auto; } .modale-fond.modale--ouverte { display: flex; } .modale-panneau { background: var(--papier); border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 28px; max-width: 900px; width: 100%; position: relative; margin: auto 0; } .modale-panneau--etroite { max-width: 480px; } .modale-fermer { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--fond); color: var(--encre); font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modale-fermer:hover { background: var(--accent); color: var(--papier); } /* ============================================================ FICHE RECETTE PUBLIQUE ============================================================ */ .nav-fiche { display: flex; gap: 10px; margin-bottom: 24px; } .bouton-nav { display: inline-block; text-decoration: none; font-size: 0.85rem; color: var(--encre); border: 1px solid var(--trait-clair); padding: 8px 14px; border-radius: var(--rayon); } .bouton-nav:hover { border-color: var(--accent); color: var(--accent); } .fiche-recette__photo-principale { margin-bottom: 24px; border: 1px solid var(--trait-clair); } .fiche-recette__photo-principale img { width: 100%; max-height: 420px; object-fit: cover; display: block; } .texte-instructions { line-height: 1.7; color: var(--encre); } .miniature-ingredient { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; display: block; } .galerie-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 32px 0; } .galerie-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--trait-clair); } .cellule-image { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .miniature-ingredient-admin { width: 100px; height: 100px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait-clair); flex-shrink: 0; background: var(--fond); } .miniature-ingredient-admin--vide { display: block; border-style: dashed; border-color: var(--trait-clair); } .miniature-recette-admin { width: 72px; height: 72px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait-clair); flex-shrink: 0; background: var(--fond); } .bouton-miniature { display: block; padding: 0; border: none; background: none; cursor: zoom-in; line-height: 0; } .bouton-miniature:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ VISIONNEUSE D'IMAGE PLEIN ÉCRAN ============================================================ */ .visionneuse-image { position: fixed; inset: 0; background: rgba(22, 21, 15, 0.92); display: none; align-items: center; justify-content: center; padding: 40px; z-index: 1000; cursor: zoom-out; } .visionneuse-image--ouverte { display: flex; } .visionneuse-image img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); cursor: default; } .visionneuse-image__fermer { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--papier); color: var(--encre); font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .visionneuse-image__fermer:hover { background: var(--accent); color: var(--papier); } .champ-fichier-mini { font-size: 0.75rem; max-width: 220px; } /* ============================================================ CHAMPS NUMERIQUES : suppression des flèches (spinner) ============================================================ */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; } input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 560px) { .calculateur__total { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ PAGE "MA JOURNEE" ============================================================ */ .journee-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0; flex-wrap: wrap; } .journee-nav--outils { justify-content: flex-start; margin-top: -8px; } .panneau-extras-manquants { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; background: color-mix(in srgb, var(--alerte-orange) 10%, var(--papier)); border: 1px solid var(--alerte-orange); border-radius: var(--rayon); } .panneau-extras-manquants .texte-discret { flex: 1 1 100%; margin: 0; } .journee-nav__date { display: flex; flex-direction: column; align-items: center; gap: 4px; } .journee-nav__date input[type="date"] { font-family: var(--police-texte); padding: 6px 10px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } .journee-nav__libelle { font-size: 0.85rem; color: var(--encre-discrete); display: flex; align-items: center; gap: 8px; } .etiquette-relative { background: var(--encre); color: var(--papier); font-size: 0.68rem; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; } .journee-resume { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 28px; align-items: start; } @media (max-width: 800px) { .journee-resume { grid-template-columns: 1fr; } } .journee-totaux, .journee-objectifs { background: var(--papier); border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 20px 22px; } .grille-objectifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin-top: 12px; } @media (max-width: 480px) { .grille-objectifs { grid-template-columns: 1fr; } } .objectif-item { display: flex; flex-direction: column; gap: 4px; } .objectif-item__label { font-size: 0.72rem; text-transform: uppercase; color: var(--encre-discrete); } .objectif-item__valeur { font-family: var(--police-chiffres); font-size: 1.05rem; } .objectif-item__barre { height: 6px; background: var(--trait-clair); border-radius: 999px; overflow: hidden; } .objectif-item__barre-remplissage { height: 100%; background: var(--encre); border-radius: 999px; transition: width 0.2s ease, background 0.2s ease; } /* Alertes de dépassement d'objectif nutritionnel : orange pour un dépassement modéré, rouge pour un dépassement important. Le seuil déclenchant chaque couleur varie selon le nutriment (ex. sucres et acides gras saturés passent au rouge plus vite, cf. objectifs.php) */ .objectif-item--alerte-orange .objectif-item__valeur { color: var(--alerte-orange); font-weight: 700; } .objectif-item--alerte-orange .objectif-item__barre-remplissage { background: var(--alerte-orange); } .objectif-item--alerte-rouge .objectif-item__valeur { color: var(--alerte-rouge); font-weight: 700; } .objectif-item--alerte-rouge .objectif-item__barre-remplissage { background: var(--alerte-rouge); } .journee-objectifs .formulaire { margin-top: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .journee-objectifs .bouton-mini { grid-column: 1 / -1; margin-top: 4px; } .journee-recettes { display: flex; flex-direction: column; gap: 2px; margin: 16px 0; border-top: 1px solid var(--trait-clair); } .journee-recette { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--trait-clair); cursor: pointer; } .journee-recette:hover { background: var(--fond); } .journee-recette input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--encre); } .journee-recette__nom { flex: 1; font-family: var(--police-texte); } .journee-recette__kcal { font-family: var(--police-chiffres); font-size: 0.85rem; color: var(--encre-discrete); } /* ============================================================ PLANNING DE LA SEMAINE (intégré à la page d'accueil) — grille des 7 jours toujours visible, glisser-déposer + repli au clic ============================================================ */ .planning-semaine { background: var(--papier); border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 20px 22px; margin: 20px 0 40px; } .grille-objectifs--recap { margin-bottom: 4px; } .planning-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 18px; overflow-x: auto; } @media (max-width: 900px) { .planning-jours { grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); grid-template-columns: none; } } .planning-jour { background: var(--fond); border: 1px dashed var(--trait-clair); border-radius: var(--rayon); padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .planning-jour:hover { border-color: var(--accent); } .planning-jour:focus-visible { outline: 2px solid var(--accent-selection); outline-offset: 2px; } .planning-jour--survole { background: var(--trait-clair); border-color: var(--accent); border-style: solid; } /* Journée sélectionnée (clic n'importe où sur sa case) : cadre rouge tout autour, pour repérer d'un coup d'oeil de quel jour proviennent les macros affichées dans le récapitulatif du haut */ .planning-jour--selectionnee { border-style: solid; border-width: 2px; border-color: var(--accent-selection); box-shadow: 0 0 0 1px var(--accent-selection); } .planning-jour__entete { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--police-texte); font-weight: 600; font-size: 0.82rem; } .planning-jour__date { font-family: var(--police-chiffres); font-weight: 700; color: var(--encre); font-size: 0.8rem; } /* Jour courant (aujourd'hui) : nom ET date mis en évidence dans une couleur distincte du cadre de sélection, pour bien le repérer même quand un autre jour est sélectionné */ .planning-jour--aujourdhui .planning-jour__nom, .planning-jour--aujourdhui .planning-jour__date { color: var(--accent-aujourdhui); font-weight: 800; } .planning-jour__total { font-family: var(--police-chiffres); font-size: 0.78rem; color: var(--encre-discrete); } .planning-jour__recettes { display: flex; flex-direction: column; gap: 6px; flex: 1; } .bouton-ajouter-extra { align-self: flex-start; background: none; border: 1px dashed var(--trait-clair); border-radius: var(--rayon); color: var(--encre-discrete); font-size: 0.72rem; padding: 3px 8px; cursor: pointer; } .bouton-ajouter-extra:hover { border-color: var(--accent); color: var(--accent); } .chip-recette--extra { background: color-mix(in srgb, var(--accent) 6%, var(--papier)); border-style: dashed; } .chip-recette { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--papier); border: 1px solid var(--trait-clair); border-radius: var(--rayon); padding: 5px 8px; font-size: 0.78rem; } .chip-recette__texte { min-width: 0; overflow: hidden; } .chip-recette__nom { display: block; } .chip-recette__legumes { display: block; color: var(--macro-lipides); font-size: 0.7rem; } .chip-recette__retirer { flex-shrink: 0; border: none; background: none; color: var(--encre-discrete); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px; } .chip-recette__retirer:hover { color: var(--accent); } /* ============================================================ CARTE-RECETTE GLISSABLE + SELECTEUR RAPIDE (page d'accueil) ============================================================ */ .carte-recette-conteneur { display: flex; flex-direction: column; gap: 8px; position: relative; } .carte-recette-conteneur[draggable="true"] { cursor: grab; } .carte-recette-conteneur[draggable="true"]:active { cursor: grabbing; } .carte-recette-conteneur--en-glisse { opacity: 0.4; } .boutons-carte-recette { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 6px; } .bouton-favori, .bouton-dislike { width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--trait-clair); font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transition: color 0.15s ease, transform 0.1s ease, opacity 0.15s ease; } .bouton-favori:hover, .bouton-dislike:hover { transform: scale(1.1); } .bouton-favori--actif { color: #D4A017; } .bouton-dislike { font-size: 1rem; opacity: 0.55; } .bouton-dislike:hover { opacity: 1; } .bouton-dislike--actif { opacity: 1; } .bouton-dislike:disabled { cursor: wait; transform: none; } .etiquette__badge-non-aimee { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--encre-discrete); background: var(--fond); border: 1px solid var(--trait-clair); border-radius: 999px; padding: 3px 10px; margin: -6px 0 12px; } .carte-recette-conteneur--non-aimee .carte-recette { opacity: 0.55; } .carte-recette-conteneur--non-aimee:hover .carte-recette, .carte-recette-conteneur--non-aimee:focus-within .carte-recette { opacity: 0.85; } .ajout-rapide { display: flex; gap: 6px; } .ajout-rapide select { flex: 1; min-width: 0; font-family: var(--police-texte); font-size: 0.8rem; padding: 6px 8px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } /* ============================================================ SELECTEUR DE LEGUMES (modale ouverte quand une recette "légumes obligatoires" est posée sur un jour du planning) ============================================================ */ .legumes-liste { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; margin: 14px 0; padding-right: 4px; } .legumes-liste--desactivee { opacity: 0.4; pointer-events: none; } .legume-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon); border: 1px solid transparent; } .legume-ligne:has(.legume-ligne__case:checked) { background: var(--fond); border-color: var(--trait-clair); } .legume-ligne__case { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .legume-ligne__nom { flex: 1; cursor: pointer; font-size: 0.9rem; } .legume-ligne__quantite { width: 70px; font-family: var(--police-chiffres); font-size: 0.85rem; padding: 6px 8px; border: 1px solid var(--trait-clair); border-radius: var(--rayon); background: var(--papier); color: var(--encre); } .legume-ligne__quantite:disabled { opacity: 0.4; } .legume-ligne__portion-fixe { font-family: var(--police-chiffres); font-size: 0.8rem; } /* Variante détaillée (sélecteur légumes/fruits) : la ligne principale (case + nom + quantité) est suivie d'un récapitulatif de macros qui se met à jour en direct pendant la saisie de la quantité */ .legume-ligne--detaillee { flex-direction: column; align-items: stretch; gap: 4px; } .legume-ligne__rangee { display: flex; align-items: center; gap: 10px; } .legume-ligne__macros { margin: 0 0 0 26px; font-size: 0.7rem; line-height: 1.4; color: var(--encre-discrete); } .extras-section { margin-bottom: 8px; } .extras-section .bloc-admin__sous-titre { margin-bottom: 4px; } /* ============================================================ PAGE PROFIL — profils-types, filtre de recherche, liste d'ingrédients à éviter (réutilise .legume-ligne du sélecteur de légumes/fruits, mais en