/* ===================================================================== app-cc — feuille de style (thème clair) Navigation horizontale à deux niveaux + contenu pleine largeur, typographie Poppins auto-hébergée. ===================================================================== */ /* ===================================================================== Polices — Poppins AUTO-HÉBERGÉE --------------------------------------------------------------------- Les fichiers vivent dans public/assets/fonts/ : AUCUNE dépendance externe (ni Google Fonts, ni CDN, ni @import distant). Une déclaration par graisse réellement fournie — 400, 500, 600, 700, 900 — et rien d'autre : aucune graisse absente n'est demandée ailleurs dans la feuille, ce qui évite toute synthèse approximative par le navigateur. font-display: swap → le texte s'affiche tout de suite avec la police de repli, puis bascule sur Poppins dès qu'elle est chargée. ===================================================================== */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-700.woff2") format("woff2"); } /* Poppins Black : graisse de la signature « Cédric. » de la barre */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-900.woff2") format("woff2"); } :root { /* Palette claire */ --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-2: #f1f5f9; /* Fond des GRANDES cartes conteneurs (.card) uniquement : blanc à 80 % d'opacité, soit exactement rgba(255, 255, 255, 0.8). Dérivé de --color-surface pour suivre la palette. Il laisse transparaître le décor de fond de l'application (.app-deco) en filigrane là où il passe derrière une carte, sans jamais toucher au CONTENU : on agit sur la couleur de fond, JAMAIS sur opacity, qui pâlirait textes et chiffres. Les sous-cartes KPI gardent leur fond gris plein (--kpi-fond). */ --fond-carte-translucide: color-mix(in srgb, var(--color-surface) 80%, transparent); --color-border: #e2e8f0; --color-border-2: #cbd5e1; --color-gris-moyen: #b9bdc3; /* gris moyen neutre : pastilles d'en-tête d'accueil */ --color-text: #0f172a; --color-muted: #64748b; --color-primary: #0284c7; --color-primary-h: #0369a1; --color-accent-soft: rgba(14, 165, 233, 0.08); --color-fdm-zebra: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); /* fond alterné bleu très clair : lignes « à faire » de Fin de mois */ --color-fdm-phare: var(--color-primary); /* Couleur de mise en valeur de la ligne Salaire net versé — changer ici */ --color-focus-ring: color-mix(in srgb, var(--color-primary) 20%, transparent); --color-danger-bg: #fef2f2; --color-danger-fg: #991b1b; /* Statuts */ --color-success: #16a34a; --color-warning: #ca8a04; --color-warning-soft: rgba(202, 138, 4, 0.08); --color-error: #dc2626; /* Qualité alimentaire (courbe unique, source SyntheseAlimentation) : couleurs partagées par les anneaux, les barres du Journal et les tuiles du Suivi. Seuils : haut > 75 %, moyen 25–75 %, bas < 25 %. Le bleu médian est une teinte propre au module. */ --color-qualite-haut: var(--color-success); --color-qualite-moyen: #00aaef; --color-qualite-bas: var(--color-error); /* Accessoires (Rapport) : gris neutre des barres et du badge, pour distinguer les ingrédients écartés du classement principal du bleu des fréquences. */ --color-accessoire: var(--color-muted); /* Point indicatif en tête des lignes « Mes ingrédients » : vert = aliment (réutilise le vert de qualité), bleu de marque = accessoire. */ --color-point-plein: var(--color-qualite-haut); --color-point-accessoire: #00aaef; /* Service renseigné (Suivi) : fond vert très léger + bordure verte douce, dérivés du vert de qualité et mélangés à la surface/bordure pour rester subtils et s'adapter au thème. Un service vide garde l'apparence neutre. */ --color-service-rempli-fond: color-mix(in srgb, var(--color-qualite-haut) 12%, var(--color-surface)); --color-service-rempli-bord: color-mix(in srgb, var(--color-qualite-haut) 45%, var(--color-border-2)); /* Palette des rubriques Alimentation (slugs gérés par l'utilisateur). Teintes distinctes, lisibles en clair comme en sombre ; seules ces variables portent des hex pour les pastilles de rubrique. */ --color-cat-indigo: #6366f1; --color-cat-bleu: #2563eb; --color-cat-vert: #16a34a; --color-cat-teal: #0d9488; --color-cat-jaune: #ca8a04; --color-cat-ambre: #d97706; --color-cat-noisette: #8a6d3b; --color-cat-rose: #e11d48; --color-cat-violet: #7c3aed; --color-cat-gris: #64748b; /* 3e série du graphique sport (minutes) : violet calme */ --color-graph-minutes: #7c6fd6; /* Module Agenda : bleu de marque (jour courant) et teintes de fond des zones. Seules ces variables portent ces hex ; aucune couleur en dur dans les règles du module. */ --color-agenda-marque: #00aaef; --color-agenda-jour-fond: #f6f6f6; /* fond gris clair des colonnes */ --color-agenda-blanc: #ffffff; /* fond des vignettes d'événement */ --color-agenda-courant-soft: color-mix(in srgb, var(--color-agenda-marque) 10%, var(--color-agenda-blanc)); /* Fond vert léger d'un événement d'agenda COCHÉ (dérivé du vert de qualité). */ --color-agenda-fait-fond: color-mix(in srgb, var(--color-qualite-haut) 14%, var(--color-agenda-blanc)); --color-agenda-fait-bord: color-mix(in srgb, var(--color-qualite-haut) 45%, var(--color-border)); /* Temps du jour scindé : Repas = vert Perso ; Travail = bleu de marque. */ --color-agenda-repas: var(--color-qualite-haut); --color-agenda-travail: var(--color-agenda-marque); /* Module « Idées de vidéo ». DEUX FAMILLES DE COULEUR, POINT : le bleu de marque #00aaef et le gris #f6f6f6, chacun avec ses déclinaisons (fonds très clairs, bordures, textes). Ni vert, ni orange, ni violet, ni multicolore. Seules ces variables portent ces valeurs : aucune couleur en dur dans les .idv-*. */ --color-idv-marque: #00aaef; /* bleu de marque */ --color-idv-bleu-texte: #0090cc; /* bleu foncé, lisible sur fond clair */ --color-idv-bleu-fond: #e6f6fd; /* bleu très clair, pastille remplie */ --color-idv-bleu-bord: #a5ddf5; /* bleu clair, pastille en contour */ --color-idv-gris: #f6f6f6; /* gris de base (fond des lignes) */ --color-idv-gris-fond: #ececec; /* gris un peu plus soutenu (pastilles) */ --color-idv-gris-bord: #dedede; /* bordure grise */ --color-idv-gris-texte: #6b6b6b; /* texte gris lisible */ /* Fond des lignes de liste */ --color-idv-fond: var(--color-idv-gris); /* STATUTS — neutre par défaut (gris doux) : c'est l'état de l'onglet Externe (à regarder / vu / à revoir), volontairement discret, et le point de départ « Idée » du pipeline de production. */ --color-idv-statut-fond: var(--color-idv-gris-fond); --color-idv-statut-bord: var(--color-idv-gris-bord); --color-idv-statut-texte: var(--color-idv-gris-texte); /* ÉCHELLE DE VERT du pipeline de PRODUCTION (Lano / Allô / Autres) : la pastille verdit à mesure que la vidéo avance vers la publication. Idée = gris (ci-dessus) → À tourner → Tournée → Montage → Publiée. TOUT est dérivé du vert de qualité du projet : aucune valeur verte en dur, et changer --color-qualite-haut suffit à retourner l'échelle entière. Le vert est RÉSERVÉ au statut : le classement reste bleu, les mots-clés gris. */ --color-idv-vert: var(--color-qualite-haut); /* Texte vert foncé commun aux trois paliers teintés. Assombri à 58 % pour rester au-dessus de 4,5:1 de contraste jusque sur le palier « Montage », le plus soutenu des trois (mesuré : 6,88 / 6,00 / 5,08:1). */ --color-idv-vert-texte: color-mix(in srgb, var(--color-idv-vert) 58%, black); /* À tourner : vert très clair */ --color-idv-statut-atourner-fond: color-mix(in srgb, var(--color-idv-vert) 12%, var(--color-surface)); --color-idv-statut-atourner-bord: color-mix(in srgb, var(--color-idv-vert) 30%, transparent); /* Tournée : vert clair */ --color-idv-statut-tournee-fond: color-mix(in srgb, var(--color-idv-vert) 24%, var(--color-surface)); --color-idv-statut-tournee-bord: color-mix(in srgb, var(--color-idv-vert) 46%, transparent); /* Montage : vert moyen, bien marqué */ --color-idv-statut-montage-fond: color-mix(in srgb, var(--color-idv-vert) 38%, var(--color-surface)); --color-idv-statut-montage-bord: color-mix(in srgb, var(--color-idv-vert) 62%, transparent); /* Publiée : vert fort, pastille pleine et texte clair. Le vert est assombri à 80 % pour que le texte blanc reste lisible (4,88:1 ; le vert brut n'était qu'à 3,30:1). */ --color-idv-statut-publiee-fond: color-mix(in srgb, var(--color-idv-vert) 80%, black); --color-idv-statut-publiee-bord: color-mix(in srgb, var(--color-idv-vert) 80%, black); --color-idv-statut-publiee-texte: var(--color-surface); /* Fond de la LIGNE ENTIÈRE d'une vidéo publiée (très léger, lisible sous le titre) et sa variante au survol. */ --color-idv-item-publie-fond: color-mix(in srgb, var(--color-idv-vert) 7%, var(--color-surface)); --color-idv-item-publie-survol: color-mix(in srgb, var(--color-idv-vert) 13%, var(--color-surface)); /* CLASSEMENT — trois déclinaisons BLEUES nettement distinctes, différenciées par le remplissage plutôt que par la teinte : RUBRIQUE : bleu PROFOND plein, texte clair ; FORMATION : bleu très clair REMPLI, texte bleu foncé ; MODULE : bleu en CONTOUR sur fond blanc. Le bleu de la rubrique est assombri à 70 % du bleu de marque pour que le texte clair y reste lisible (5,00:1 ; le bleu brut n'était qu'à 2,63:1). */ --color-idv-rubrique-fond: color-mix(in srgb, var(--color-idv-marque) 70%, black); --color-idv-rubrique-texte: var(--color-surface); --color-idv-formation-fond: var(--color-idv-bleu-fond); --color-idv-formation-texte: var(--color-idv-bleu-texte); --color-idv-module-bord: var(--color-idv-bleu-bord); --color-idv-module-texte: var(--color-idv-bleu-texte); /* MOTS-CLÉS : petites étiquettes grises. */ --color-idv-mot-fond: var(--color-idv-gris-fond); --color-idv-mot-texte: var(--color-idv-gris-texte); /* Étiquettes d'ORIGINE (résultats de recherche) : une INTENSITÉ par onglet, du bleu foncé au gris clair — jamais des teintes multicolores. */ --color-idv-lano: var(--color-idv-bleu-texte); --color-idv-allo: var(--color-idv-marque); --color-idv-autres: var(--color-idv-bleu-fond); --color-idv-externe: var(--color-idv-gris-fond); /* Tiers de membres Lano (accueil) : camaïeu de bleu (clair → foncé), teintes distinctes et lisibles en clair comme en sombre. */ --color-tier-std: color-mix(in srgb, var(--color-primary) 45%, white); /* bleu clair (base éclaircie) */ --color-tier-premium: var(--color-primary); /* bleu moyen = base de l'appli */ --color-tier-vip: color-mix(in srgb, var(--color-primary) 70%, black); /* bleu foncé (base assombrie) */ /* ================================================================= Navigation horizontale (refonte graphique, étape 1) ----------------------------------------------------------------- TROIS teintes de base, et tout le reste en dérive (color-mix) : aucune couleur n'est écrite ailleurs que dans ce bloc. ================================================================= */ /* SEUIL DE BASCULE DESKTOP → MOBILE de la navigation. Au-dessus : barre horizontale à deux niveaux, inchangée. En dessous : barre repliée (signature + avatar + burger) et panneau de menu. ⚠ DEUX ENDROITS À GARDER SYNCHRONES si vous changez cette valeur : 1. cette variable — elle est lue par /assets/js/nav.js ; 2. le `@media (max-width: 1000px)` du bloc « NAVIGATION MOBILE », en fin de section navigation (une media query CSS ne peut pas consommer une variable). Le reste en découle tout seul. */ --nav-seuil-mobile: 1000px; --nav-marque: #00aaef; /* bleu de marque */ --nav-gris: #f6f6f6; /* gris de fond neutre */ --nav-sombre: #1a1b2f; /* sombre du texte et de la signature */ --nav-blanc: #ffffff; /* fond de barre / texte sur pastille pleine */ /* Barre principale (niveau 1). Le fond de la barre reste BLANC : seuls les onglets de modules reposent sur un bandeau gris clair. */ --nav-respiration: 10px; /* air au-dessus ET au-dessous du bandeau */ /* Gabarit horizontal de la barre. Ces trois mesures placent le début des onglets de modules ; la sous-navigation s'en sert pour s'aligner dessus (cf. --nav-onglets-depart). Les redéfinir dans une media query déplace les deux ensemble. */ --nav-marge-laterale: 1.5rem; /* padding latéral de la barre */ --nav-ecart: 1.25rem; /* écart entre signature, onglets et droite */ /* Largeur RÉSERVÉE à la signature « Cédric. ». Mesurée sur la police livrée (poppins-v24-latin-900.woff2, 1000 upem) : somme des avances C+é+d+r+i+c+. = 3766/1000 em, soit 78.33px à 1.3rem (20.8px), moins l'interlettrage de -0.02em × 7 caractères (-2.91px) = 75.42px rendus. On réserve 78px : la signature occupe une largeur FERME, ce qui rend le point de départ des onglets calculable — et donc l'alignement de la sous-navigation exact par construction. Un éventuel débord irait dans l'écart de 20px, sans jamais être rogné. */ --nav-signature-largeur: 78px; /* Filet de séparation entre la barre principale et la sous-navigation : 4px d'un gris soutenu (déclinaison du gris de base), doublé d'une ombre portée discrète qui matérialise la frontière entre les deux niveaux. */ --nav-filet: 4px; --nav-filet-couleur: color-mix(in srgb, var(--nav-gris) 88%, var(--nav-sombre)); --nav-ombre: 0 2px 6px color-mix(in srgb, var(--nav-sombre) 9%, transparent); /* HAUTEUR TOTALE DE LA BARRE — DÉRIVÉE, jamais saisie à la main. Elle vaut : bandeau des onglets (l'élément le plus haut de la barre) + la respiration en haut et en bas + le filet du bas. box-sizing: border-box, donc c'est bien la hauteur EXTÉRIEURE de la barre, et donc le décalage exact auquel la sous-navigation vient se coller (top). Toucher à la respiration ou au bandeau met à jour cette valeur tout seul : plus rien à resynchroniser. */ --nav-hauteur: calc( var(--nav-onglets-hauteur) + 2 * var(--nav-respiration) + var(--nav-filet) ); --nav-fond: var(--nav-blanc); --nav-bordure: color-mix(in srgb, var(--nav-sombre) 12%, var(--nav-blanc)); --nav-texte: color-mix(in srgb, var(--nav-sombre) 52%, var(--nav-blanc)); --nav-texte-fort: var(--nav-sombre); --nav-actif: var(--nav-marque); /* pastille pleine de l'onglet actif */ --nav-actif-texte: var(--nav-blanc); --nav-pastille-rayon: 9px; /* Signature « Cédric. » : la graisse la plus lourde disponible */ --nav-signature-taille: 1.3rem; --nav-signature-graisse: 900; /* Bandeau gris des onglets de modules : EXACTEMENT le gris de base (#f6f6f6), sans déclinaison. Le padding intérieur (vertical ET latéral) est ce qui fait « respirer » la pastille bleue de l'onglet actif : elle ne touche jamais les bords du gris. */ --nav-onglets-fond: var(--nav-gris); --nav-onglets-rayon: 16px; --nav-onglets-padding-v: 10px; /* air au-dessus/au-dessous de la pastille */ --nav-onglets-padding-h: 10px; /* Padding propre à un onglet (donc à la pastille bleue de l'actif) */ --nav-onglet-padding-v: 0.35rem; --nav-onglet-padding-h: 0.7rem; /* Hauteur d'un onglet (texte 15px, interligne 1.5, padding 0.35rem) portée à 36px : léger jeu pour absorber les variations de métriques de Poppins sans que le bandeau ne déborde de la barre. */ --nav-onglet-hauteur: 36px; --nav-onglets-hauteur: calc(var(--nav-onglet-hauteur) + 2 * var(--nav-onglets-padding-v)); --nav-onglet-taille: 15px; --nav-onglet-graisse: 600; /* POINT DE DÉPART HORIZONTAL du premier onglet de modules, mesuré depuis le bord gauche de la fenêtre. C'est la référence d'alignement de la sous-navigation : marge de la barre + largeur réservée à la signature + écart + padding du bandeau gris + padding de l'onglet lui-même. Tout est dérivé, donc l'alignement suit automatiquement le moindre réglage. */ --nav-onglets-depart: calc( var(--nav-marge-laterale) + var(--nav-signature-largeur) + var(--nav-ecart) + var(--nav-onglets-padding-h) + var(--nav-onglet-padding-h) ); --nav-onglet-texte: color-mix(in srgb, var(--nav-sombre) 74%, var(--nav-blanc)); /* gris foncé */ /* Filets « | » : entre onglets, et entre les deux groupes de raccourcis */ --nav-filet-texte: color-mix(in srgb, var(--nav-sombre) 22%, var(--nav-blanc)); /* Tuiles de raccourcis : accent bleu clair (groupe principal) ou gris. Teintes exactes de la charte, déclarées ici et nulle part ailleurs. */ --nav-tuile-fond: #f1f2f4; --nav-tuile-texte: var(--nav-texte); --nav-tuile-accent-fond: #e6f5fd; --nav-tuile-accent-texte: #0090cc; --nav-tuile-taille: 26px; /* Sous-navigation (niveau 2) : souligné bleu épais, jamais de pastille. Sticky juste sous la barre principale, donc sous son z-index. Hauteur FERME pour qu'elle ne varie pas d'un pixel au défilement, et fond EXACTEMENT #f6f6f6 (le gris de base). */ /* 3.25rem : laisse assez d'air SOUS le libellé pour que le souligné de l'onglet actif tienne dans la barre — la hauteur fixe crée un conteneur de défilement, qui rognerait tout débord. Marge confortable, y compris avec les métriques de Poppins (plus hautes que celles de system-ui). */ --nav-sous-hauteur: 3.25rem; --nav-sous-fond: var(--nav-gris); --nav-sous-point: color-mix(in srgb, var(--nav-sombre) 26%, var(--nav-blanc)); --nav-sous-souligne: 3px; /* Padding latéral d'un sous-onglet : retranché du retrait de la sous-nav pour que le BORD DU LIBELLÉ tombe pile sur celui du premier onglet. */ --nav-sous-onglet-padding-h: 0.55rem; /* Air ajouté SOUS la sous-navigation, avant le contenu de la page */ --nav-sous-espace-bas: 14px; /* ================================================================= Cases « Points retirés » du Suivi alimentation ----------------------------------------------------------------- Teintes dérivées du bleu de marque et du gris de base. L'état sélectionné reprend exactement le bleu clair de la charte (#e6f5fd / #00aaef / #0090cc) ; au repos, gris neutre. ================================================================= */ --note-gap: 8px; --note-fond: var(--nav-gris); /* #f6f6f6 */ --note-bordure: color-mix(in srgb, var(--nav-sombre) 14%, var(--nav-gris)); --note-chiffre: var(--nav-sombre); /* #1a1b2f */ --note-libelle: color-mix(in srgb, var(--nav-sombre) 50%, var(--nav-blanc)); --note-actif-fond: var(--nav-tuile-accent-fond); /* #e6f5fd */ --note-actif-bordure: var(--nav-marque); /* #00aaef */ --note-actif-texte: var(--nav-tuile-accent-texte); /* #0090cc */ /* Sélecteur de période (niveau 3) : années · | · douze mois. Actif en bleu de marque, SANS soulignement — le souligné reste réservé à la sous-navigation, ce qui garde les niveaux distinguables. */ --nav-periode-taille: 0.9rem; --nav-periode-actif: var(--nav-marque); --nav-periode-graisse: 600; /* ================================================================= Cartes KPI — STYLE UNIQUE pour toute l'application ----------------------------------------------------------------- Un seul jeu de teintes, dérivé du gris de fond et du sombre du texte : aucune couleur décorative par module. La seule couleur en plus est --kpi-valeur-negatif, et elle est FONCTIONNELLE (valeur négative / alerte), jamais ornementale. ================================================================= */ --kpi-fond: var(--nav-gris); /* #f6f6f6 */ --kpi-bordure: color-mix(in srgb, var(--nav-sombre) 9%, var(--nav-gris)); --kpi-rayon: 12px; --kpi-label: #8a8f96; /* gris des libellés */ --kpi-valeur: var(--nav-sombre); /* #1a1b2f */ --kpi-sub: color-mix(in srgb, var(--nav-sombre) 45%, var(--nav-blanc)); --kpi-valeur-negatif: #c8372d; /* rouge sobre, lisible sur #f6f6f6 */ --nav-z-barre: 200; --nav-z-sous: 150; /* Modales plein écran : AU-DESSUS des deux barres sticky, sinon elles apparaîtraient derrière. Unique référence pour tout l'empilement. */ --z-modal: 300; /* Layout */ /* Gouttières de la zone de contenu. SOURCE UNIQUE : .main s'en sert pour son padding, et la sous-navigation pour les annuler (marges négatives) afin de se coller sous la barre et de couvrir toute la largeur. Les redéfinir dans une media query suffit à déplacer les deux ensemble. */ --main-gouttiere-haut: 1.5rem; --main-gouttiere-cote: 2rem; /* Écart vertical entre deux blocs de contenu — c'est le `gap` de .main, donc le rythme vertical de TOUTES les pages. SOURCE UNIQUE : un élément qui doit ANNULER cet écart pour se coller au bloc précédent (la barre d'onglets d'Idées sous la sous-nav du module) reprend la même variable en marge négative. Les deux ne peuvent donc plus diverger. */ --main-espace: 1.25rem; --radius: 10px; --gap: 1rem; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08); /* Police de toute l'application : Poppins auto-hébergée, puis repli système si les fichiers woff2 ne sont pas encore chargés. */ --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--color-text); font-family: var(--font); font-size: 16px; line-height: 1.5; } /* Fond de page porté par la SEULE racine : le navigateur propage le fond de au canevas, qui couvre donc toute la fenêtre (rendu identique à l'ancien fond posé aussi sur ). Ce point est structurant : restant transparent, le calque décoratif de l'application (.app-deco, z-index négatif) se voit par-dessus le canevas tout en restant DERRIÈRE l'intégralité du contenu. */ html { background: var(--color-bg); } /* Les contrôles de formulaire n'héritent PAS de la police par défaut : on la leur impose ici, une fois pour toutes, pour que Poppins couvre réellement toute l'interface (champs, listes, boutons, zones de texte). */ input, button, select, textarea { font-family: inherit; } h1, h2, h3 { margin: 0 0 0.5rem; font-weight: 600; color: var(--color-text); } /* Masqué à l'écran, révélé à l'impression (cf. @media print en fin de feuille) */ .print-only { display: none; } p { margin: 0.5rem 0; } .muted { color: var(--color-muted); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-h); text-decoration: underline; } /* ===================================================================== Layout authentification (page /login) ===================================================================== */ .auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .auth-container { width: 100%; max-width: 380px; padding: 1.5rem; } .login-form { background: var(--color-surface); padding: 2rem; border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--gap); } .login-title { margin: 0; color: var(--color-primary); text-align: center; letter-spacing: 0.02em; } .login-subtitle { margin: 0; text-align: center; color: var(--color-muted); font-size: 0.95rem; } /* ===================================================================== Layout application authentifiée : barre horizontale + contenu pleine largeur --------------------------------------------------------------------- La colonne latérale gauche a été supprimée : toute la navigation vit dans la barre horizontale sticky du haut (niveau 1, rendue une fois par le layout) et dans la sous-navigation des modules à onglets (niveau 2). Le contenu occupe donc toute la largeur disponible. ===================================================================== */ /* Pas de fond ici : il est porté par (cf. plus haut) afin que le calque décoratif .app-deco reste visible sous le contenu. */ .app-body { min-height: 100vh; } /* ===================================================================== Barre principale (niveau 1) — horizontale, sticky ===================================================================== */ .topbar { position: sticky; top: 0; z-index: var(--nav-z-barre); display: flex; align-items: center; gap: var(--nav-ecart); /* Hauteur FERME (et non min-height) : la sous-navigation sticky se cale dessus au pixel via top: var(--nav-hauteur). Voir le repli < 600px, où la barre passe en hauteur libre et la sous-nav cesse d'être collée. La respiration verticale et le filet sont DÉJÀ comptés dans --nav-hauteur (box-sizing: border-box) : le contenu garde sa hauteur utile au lieu d'être comprimé par le padding. */ height: var(--nav-hauteur); padding: var(--nav-respiration) var(--nav-marge-laterale); background: var(--nav-fond); /* Filet épais + ombre discrète : frontière nette avec le niveau 2. L'ombre est peinte par-dessus la sous-navigation (z-index supérieur), ce qui renforce la lecture des deux plans. */ border-bottom: var(--nav-filet) solid var(--nav-filet-couleur); box-shadow: var(--nav-ombre); } /* ----- Signature « Cédric. » : point en bleu, reste en sombre ----- */ .topbar-signature { flex-shrink: 0; /* Largeur FERME : elle rend le début des onglets calculable, et donc l'alignement de la sous-navigation exact (cf. --nav-onglets-depart). nowrap + overflow visible : un débord éventuel irait dans l'écart de la barre plutôt que d'être coupé ou de passer à la ligne. */ width: var(--nav-signature-largeur); white-space: nowrap; font-size: var(--nav-signature-taille); /* Graisse la plus lourde disponible dans la pile système (« Black ») */ font-weight: var(--nav-signature-graisse); color: var(--nav-sombre); letter-spacing: -0.02em; user-select: none; } .topbar-signature-point { color: var(--nav-marque); } /* ----- Onglets de modules ------------------------------------------- Les onglets — et EUX SEULS — reposent sur un bandeau gris clair arrondi : le reste de la barre (signature, raccourcis, avatar) demeure sur fond blanc. Le bandeau épouse la largeur des onglets, il ne s'étire pas sur toute la barre. Onglet actif = pastille bleue pleine posée sur ce bandeau. */ .topbar-onglets { display: flex; align-items: center; gap: 0; /* Padding intérieur en haut/bas ET sur les côtés : c'est lui qui donne sa marge visuelle à la pastille bleue de l'onglet actif, quelle que soit sa position dans le bandeau (premier onglet, dernier, ou au milieu). */ padding: var(--nav-onglets-padding-v) var(--nav-onglets-padding-h); border-radius: var(--nav-onglets-rayon); background: var(--nav-onglets-fond); /* Le bandeau se dimensionne sur son contenu (pas de flex: 1). Écran étroit : il peut se comprimer et défiler horizontalement, discrètement, plutôt que de déborder ou d'écraser les raccourcis de droite. */ flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topbar-onglets::-webkit-scrollbar { display: none; } /* Filet « | » intercalé entre deux libellés d'onglet */ .topbar-onglets-filet { flex-shrink: 0; padding: 0 0.1rem; color: var(--nav-filet-texte); font-size: var(--nav-onglet-taille); font-weight: 400; user-select: none; } .topbar-onglet { flex-shrink: 0; padding: var(--nav-onglet-padding-v) var(--nav-onglet-padding-h); border-radius: var(--nav-pastille-rayon); font-size: var(--nav-onglet-taille); font-weight: var(--nav-onglet-graisse); color: var(--nav-onglet-texte); background: transparent; white-space: nowrap; transition: background-color 0.15s, color 0.15s; } .topbar-onglet:hover { color: var(--nav-texte-fort); background: var(--nav-blanc); text-decoration: none; } .topbar-onglet.is-active, .topbar-onglet.is-active:hover { color: var(--nav-actif-texte); background: var(--nav-actif); } .topbar-onglet:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; } /* ----- Bloc de droite : raccourcis, filet, avatar ----- */ .topbar-droite { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; flex-shrink: 0; } .topbar-raccourcis { display: flex; align-items: center; gap: 0.3rem; } /* Filet « | » séparant les deux groupes de raccourcis (L S P A | F S O O) */ .topbar-raccourcis-filet { padding: 0 0.15rem; color: var(--nav-filet-texte); font-size: 0.95rem; user-select: none; } /* Tuile carrée arrondie à initiale. Bleu clair pour le groupe principal (avant le filet), gris pour le second groupe : la classe is-accent est posée par App\Lib\Sites d'après l'ordre de la configuration. */ .topbar-tuile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--nav-tuile-taille); height: var(--nav-tuile-taille); border-radius: 7px; background: var(--nav-tuile-fond); color: var(--nav-tuile-texte); font-size: 0.75rem; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color 0.12s, color 0.12s; } .topbar-tuile.is-accent { background: var(--nav-tuile-accent-fond); color: var(--nav-tuile-accent-texte); } .topbar-tuile:hover { background: var(--nav-tuile-accent-fond); color: var(--nav-tuile-accent-texte); text-decoration: none; } .topbar-tuile:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; } /* Infobulle CSS : nom complet du site SOUS la tuile (elle n'affiche qu'une lettre). L'attribut title assure le repli sans CSS / l'accessibilité. */ .topbar-tuile-nom { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 0.25rem 0.5rem; border-radius: 6px; background: var(--nav-sombre); color: var(--nav-blanc); font-size: 0.72rem; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; box-shadow: var(--shadow-md); z-index: 5; } .topbar-tuile:hover .topbar-tuile-nom, .topbar-tuile:focus-visible .topbar-tuile-nom { opacity: 1; visibility: visible; } /* Fin séparateur vertical entre les raccourcis et l'avatar */ .topbar-filet { width: 1px; height: 22px; background: var(--nav-bordure); flex-shrink: 0; } .topbar-compte-form { margin: 0; display: flex; } /* Avatar : cercle bleu plein à l'initiale. Porte la déconnexion (bouton de formulaire POST) : c'est la seule action de compte de l'application. */ .topbar-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: var(--nav-actif); color: var(--nav-actif-texte); font-family: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1; cursor: pointer; transition: filter 0.12s; } .topbar-avatar:hover { filter: brightness(0.93); } .topbar-avatar:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; } /* ===================================================================== Sous-navigation (niveau 2) — modules à onglets internes --------------------------------------------------------------------- Style SOBRE, volontairement distinct du niveau 1 : onglets séparés par des points « · », actif SOULIGNÉ en bleu épais. Aucune pastille ici : la pastille pleine reste le marqueur exclusif de la barre principale. STICKY : elle se colle juste SOUS la barre principale (top = hauteur exacte de celle-ci, d'où la hauteur ferme de .topbar) et reste visible au défilement. Son z-index passe SOUS celui de la barre principale et AU-DESSUS du contenu : la barre couvre la sous-nav si les deux se croisent, et le contenu défile sous les deux. Le fond opaque empêche le contenu de transparaître derrière. HAUTEUR FERME : la barre garde exactement la même taille au repos et une fois collée, elle ne « saute » donc jamais au défilement. Corollaire : pas de retour à la ligne des onglets (il ferait déborder la hauteur fixe) — sur écran étroit, la rangée défile horizontalement, comme celle du niveau 1. ===================================================================== */ .sousnav { position: sticky; top: var(--nav-hauteur); z-index: var(--nav-z-sous); display: flex; align-items: center; flex-wrap: nowrap; gap: 0.1rem; height: var(--nav-sous-hauteur); /* Marges négatives calées sur les gouttières de .main : - en HAUT, elles annulent le padding supérieur de .main, sinon la sous-nav démarrerait plus bas que la barre au repos et laisserait un trou visible entre les deux (elle ne devenait jointive qu'une fois collée). Résultat : elle touche le filet de 4px, au pixel ; - sur les CÔTÉS, elles font courir le fond opaque et le trait inférieur sur toute la largeur, gouttières comprises. */ margin: calc(-1 * var(--main-gouttiere-haut)) calc(-1 * var(--main-gouttiere-cote)) var(--nav-sous-espace-bas); /* ALIGNEMENT SUR LE NIVEAU 1 : le retrait à gauche place le bord du premier LIBELLÉ pile sous celui du premier onglet de modules. On part du point de départ de cet onglet et on retranche le padding du sous-onglet, qui décalerait sinon le texte vers la droite. Les deux valeurs viennent des mêmes variables que la barre : l'alignement reste juste même si la marge, l'écart ou les paddings changent. À droite, la gouttière habituelle du contenu. */ padding: 0 var(--main-gouttiere-cote) 0 calc(var(--nav-onglets-depart) - var(--nav-sous-onglet-padding-h)); background: var(--nav-sous-fond); border-bottom: 1px solid var(--nav-bordure); overflow-x: auto; scrollbar-width: none; } .sousnav::-webkit-scrollbar { display: none; } /* La barre d'onglets d'Idées de vidéos est masquée pendant une recherche (attribut hidden posé en JS) : display:flex ne doit pas l'emporter. */ .sousnav[hidden] { display: none; } /* ----- Module « Idées » : DEUX barres de sous-navigation empilées ----- La page « Idées de vidéos » porte deux .sousnav l'une sous l'autre : celle du MODULE (Idées de Cédric · Idées de vidéos) puis celle des ONGLETS du sous-module (Lano / Allô / Autres / Externe). Sans réglage, les deux se colleraient au même « top » au défilement et se recouvriraient. On les EMPILE donc : la barre de module reste sous la barre principale, celle des onglets se cale exactement d'une hauteur plus bas, et les deux demeurent jointives (aucun trou entre elles). L'écart du bas n'est annulé que si la barre d'onglets est bien VISIBLE : en mode recherche elle disparaît, et la barre de module retrouve son écart normal avant le contenu. DEUX écarts à neutraliser, pas un : annuler la marge basse de la première barre ne suffit pas, car .main est une colonne FLEX dont le `gap` s'insère entre TOUS ses enfants — il laissait donc une bande de fond de page entre les deux barres au repos, alors qu'elles redevenaient jointives une fois collées. D'où la marge haute NÉGATIVE, prise sur la même variable que ce gap : les deux barres se touchent au pixel, au repos comme au défilement, et l'écart entre le BLOC de sous-navigation et le contenu qui suit reste celui de tous les autres modules (gap de .main + --nav-sous-espace-bas, comme sous-nav → sélecteur de période en Comptabilité). */ .sousnav.idees-sousnav:has(+ .sousnav.idv-tabs:not([hidden])) { margin-bottom: 0; } .sousnav.idv-tabs { top: calc(var(--nav-hauteur) + var(--nav-sous-hauteur)); margin-top: calc(-1 * var(--main-espace)); } .sousnav-point { flex-shrink: 0; color: var(--nav-sous-point); font-size: 0.9rem; user-select: none; } /* flex-shrink: 0 + white-space: nowrap : en rangée non repliable à hauteur fixe, les onglets ne doivent ni se comprimer ni voir leur libellé passer à la ligne — sinon la hauteur ferme serait débordée. */ .sousnav-onglet { display: inline-flex; align-items: center; flex-shrink: 0; gap: 0.4rem; padding: 0.25rem var(--nav-sous-onglet-padding-h); border: none; background: none; font-family: inherit; font-size: 0.925rem; color: var(--nav-texte); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.15s; } .sousnav-onglet:hover { color: var(--nav-texte-fort); text-decoration: none; } .sousnav-onglet:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; border-radius: 4px; } .sousnav-onglet.is-active { color: var(--nav-texte-fort); font-weight: 500; } /* Souligné bleu épais sous le LIBELLÉ seul (un éventuel compteur reste hors du trait). Coins légèrement arrondis en haut. */ .sousnav-libelle { position: relative; } .sousnav-onglet.is-active .sousnav-libelle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: var(--nav-sous-souligne); border-radius: 2px 2px 0 0; background: var(--nav-actif); } /* Pastille de comptage (Idées de vidéo) */ .sousnav-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--nav-gris); color: var(--nav-texte); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; } .sousnav-onglet.is-active .sousnav-compte { background: var(--nav-tuile-accent-fond); color: var(--nav-tuile-accent-texte); } /* ===================================================================== Sélecteur de période (niveau 3) — App\Lib\SelecteurPeriode --------------------------------------------------------------------- Navigation temporelle unifiée, rendue par un composant unique et posée en tête de contenu, juste sous la sous-navigation : 2026 · 2025 | Jan · Fév · … · Déc Style sobre et cohérent avec la sous-nav (mêmes points « · », même échelle), mais SANS soulignement : ici l'actif est simplement en bleu de marque. Chaque niveau garde donc son marqueur — pastille pleine (barre principale), souligné (sous-navigation), bleu simple (période). ===================================================================== */ .periode { display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem 0.15rem; font-size: var(--nav-periode-taille); } /* Un groupe = les années, ou les douze mois. Il ne se coupe pas au milieu d'un libellé ; c'est la ligne entière qui se replie si la place manque. */ .periode-groupe { display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem 0.15rem; } .periode-item { padding: 0.1rem 0.3rem; border-radius: 5px; color: var(--nav-texte); text-decoration: none; white-space: nowrap; transition: color 0.15s; } .periode-item:hover { color: var(--nav-texte-fort); text-decoration: none; } .periode-item:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 1px; } /* Année ou mois actif : bleu de marque, plus gras. Aucun souligné. */ .periode-item.is-active, .periode-item.is-active:hover { color: var(--nav-periode-actif); font-weight: var(--nav-periode-graisse); } /* ----- VARIANTE SOULIGNÉE (.periode--souligne) ----- Même grammaire que ci-dessus — texte cliquable, points « · », même échelle — mais l'actif est marqué comme dans la sous-navigation : texte SOMBRE surmonté d'un souligné bleu épais, plutôt que du texte bleu. À réserver aux sélecteurs posés DANS le contenu (la ligne d'années de l'Historique), là où le marqueur bleu simple du sélecteur de tête se confondrait avec les liens voisins. Le trait reprend les variables du souligné de la sous-nav (épaisseur et bleu de marque) : les deux ne peuvent pas diverger. Le souligné ne couvre que le TEXTE, pas le padding de l'item. */ .periode--souligne { padding-bottom: 0.35rem; } .periode--souligne .periode-item.is-active, .periode--souligne .periode-item.is-active:hover { position: relative; color: var(--nav-texte-fort); font-weight: 500; } .periode--souligne .periode-item.is-active::after { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; bottom: -0.1rem; height: var(--nav-sous-souligne); border-radius: 2px 2px 0 0; background: var(--nav-actif); } /* Points de séparation entre deux items : gris clair, comme la sous-nav */ .periode-point { color: var(--nav-sous-point); user-select: none; } /* Filet « | » entre le groupe des années et celui des mois */ .periode-filet { padding: 0 0.4rem; color: var(--nav-filet-texte); user-select: none; } /* Deux niveaux de navigation temporelle empilés — le sélecteur année/mois puis le sélecteur semaine|jour (Exercices, Agenda). Posé HORS CARTE, directement sur le fond de page, comme le sélecteur seul de la Comptabilité : ni fond, ni bordure, ni ombre, ni retrait. Seul rôle de ce conteneur : garder les deux lignes serrées et n'occuper qu'un élément de .main, dont le gap fournit l'espacement au-dessus et au-dessous — le rythme vertical reste donc le même d'un module à l'autre. */ .periode-duo { display: flex; flex-direction: column; gap: 0.35rem; } /* ----- Zone principale : pleine largeur sous les barres ------------ */ .main { padding: var(--main-gouttiere-haut) var(--main-gouttiere-cote) 2.5rem; width: 100%; display: flex; flex-direction: column; gap: var(--main-espace); } /* Grande carte conteneur — la brique qui structure toutes les pages (Finances, Lano, Exercices, Alimentation, Comptabilité, Agenda, Idées, Gains…). Son fond est TRANSLUCIDE (blanc à 80 %) pour laisser deviner le décor de fond derrière elle ; bordure, arrondi et ombre sont inchangés. Le contenu de la carte reste parfaitement opaque : aucune règle d'opacity n'est posée ici ni sur un parent. */ .card { background: var(--fond-carte-translucide); padding: 1.5rem 2rem; border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } /* ===================================================================== Illustration décorative de l'application — CALQUE UNIQUE --------------------------------------------------------------------- Une seule image pour toute l'application, posée une seule fois dans le layout global (App\Lib\Deco::fond(), appelé par layouts/app.php) : elle apparaît donc automatiquement sur toutes les pages, et il n'y a qu'un point à maintenir. Plus aucune déco par rubrique. Collée dans le coin bas droit de la FENÊTRE du navigateur (position: fixed, right/bottom à 0, aucune marge), affichée à sa TAILLE RÉELLE : aucune largeur ni hauteur imposée, et max-width neutralisé pour qu'aucune règle ne la réduise. Hors flux : elle n'appartient à aucune grille et ne contraint donc aucune mise en page. Le fond de l'illustration vaut exactement --color-bg, donc le raccord est invisible : surtout aucune carte, bordure, ombre ni arrondi autour. Empilement : z-index négatif. Le calque se peint juste au-dessus du canevas (le fond de ) et DERRIÈRE absolument tout le reste — fonds de cartes, contenu, barres de navigation, modales — sans qu'aucune page n'ait à remonter quoi que ce soit. C'est pour cela que ne porte plus de fond opaque (cf. html { background } plus haut) : il masquerait le calque. Avec pointer-events: none, il ne capte jamais un clic ni une sélection. Débordement : ancré à droite: 0, il ne peut pas dépasser à droite (aucun défilement horizontal) ; un élément fixé ne crée pas non plus de défilement vertical. Ce qui sort du cadre en haut et à gauche est simplement masqué, c'est voulu : le sujet est en bas à droite et le reste se fond dans le fond de page. ===================================================================== */ .app-deco { position: fixed; right: 0; bottom: 0; z-index: -1; max-width: none; /* taille réelle : jamais réduite */ margin: 0; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; pointer-events: none; user-select: none; } /* ===================================================================== Champs de formulaire ===================================================================== */ .field { display: flex; flex-direction: column; gap: 0.35rem; } .field-label { font-size: 0.85rem; color: var(--color-muted); } input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 0.6rem 0.75rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-2); border-radius: 6px; font-size: 1rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } /* ===================================================================== Boutons ===================================================================== */ .btn { display: inline-block; padding: 0.55rem 0.95rem; border: 1px solid transparent; border-radius: 6px; font-size: 0.95rem; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-primary { background: var(--color-primary); color: #ffffff; font-weight: 600; } .btn-primary:hover { background: var(--color-primary-h); } .btn-ghost { background: transparent; color: var(--color-muted); border-color: var(--color-border-2); } .btn-ghost:hover { color: var(--color-text); border-color: var(--color-muted); background: var(--color-surface-2); } .btn-block { width: 100%; } /* ===================================================================== Alertes ===================================================================== */ .alert { padding: 0.7rem 0.9rem; border-radius: 6px; font-size: 0.9rem; } .alert-error { background: var(--color-danger-bg); color: var(--color-danger-fg); border: 1px solid #fecaca; } /* Succès : fond vert plein, texte blanc bien lisible */ .alert-success { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: color-mix(in srgb, var(--color-success) 90%, black); color: #ffffff; font-weight: 500; font-size: 0.95rem; border: 1px solid color-mix(in srgb, var(--color-success) 70%, black); border-radius: var(--radius); transition: opacity 0.4s ease; /* fondu avant retrait automatique (JS) */ } .alert-success svg { width: 18px; height: 18px; flex-shrink: 0; } /* Avertissement : fond ambre plein, texte blanc (dérivé de --color-warning) */ .alert-warning { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: color-mix(in srgb, var(--color-warning) 90%, black); color: #ffffff; font-weight: 500; font-size: 0.95rem; border: 1px solid color-mix(in srgb, var(--color-warning) 70%, black); border-radius: var(--radius); } /* ===================================================================== NAVIGATION MOBILE — burger + panneau --------------------------------------------------------------------- ÉTAT PAR DÉFAUT (= DESKTOP) : le burger et le panneau n'existent PAS. `display: none` les retire complètement du rendu et du flux, donc la barre du haut, ses onglets, ses raccourcis et son avatar sont strictement ceux d'avant, au pixel. Tout ce qui suit ne s'allume que dans la media query du bas de section. ===================================================================== */ .topbar-burger { display: none; } .navmob { display: none; } /* ===================================================================== Responsive minimal (< 900px) ===================================================================== */ @media (max-width: 900px) { /* Gouttières de contenu ET gabarit horizontal de la barre resserrés. On redéfinit les VARIABLES, pas les règles : .main (padding), .topbar (marge, écart, padding d'onglet) et .sousnav (marges négatives, retrait d'alignement) suivent toutes seules. Le collage au pixel comme l'alignement de la sous-nav sur le premier onglet restent donc vrais. */ :root { --main-gouttiere-haut: 1.25rem; --main-gouttiere-cote: 1rem; --nav-marge-laterale: 1rem; --nav-ecart: 0.75rem; --nav-onglet-padding-h: 0.55rem; } /* Barre principale compactée : la signature et les onglets se serrent, la zone d'onglets défile horizontalement (cf. .topbar-onglets) plutôt que d'écraser les raccourcis. Le bloc de droite reste sur la même ligne. La respiration verticale de 10px est conservée : sans quoi --nav-hauteur ne correspondrait plus à la hauteur réelle et le collage se décalerait. */ .topbar-onglet { font-size: 0.9rem; } .topbar-droite { gap: 0.4rem; } .main { padding-bottom: 2rem; } } /* ===================================================================== NAVIGATION MOBILE — le seul bloc qui change la navigation --------------------------------------------------------------------- SEUIL : 1000px. À régler ICI **et** dans --nav-seuil-mobile (:root), que lit /assets/js/nav.js — une media query ne peut pas consommer une variable CSS, d'où ces deux points volontairement documentés. Ce bloc remplace l'ancien repli < 600px, qui faisait passer la barre sur deux lignes (onglets en pleine largeur) et renonçait au collage de la sous-navigation. Il n'a plus lieu d'être : les onglets quittant la barre, celle-ci garde sa hauteur FERME et la sous-nav reste collée dessous, à tous les gabarits. ===================================================================== */ @media (max-width: 1000px) { /* ----- Barre repliée : signature | … | avatar + burger ----- Les onglets de modules et les raccourcis sortent de la barre : ils vivent désormais dans le panneau. Rien d'autre ne bouge — la barre garde sa hauteur, son filet et son ombre. */ .topbar-onglets { display: none; } .topbar-droite .topbar-raccourcis, .topbar-droite .topbar-filet { display: none; } .topbar-burger { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 0.15rem; border-radius: 8px; color: var(--nav-texte-fort); background: transparent; transition: background-color 0.12s, color 0.12s; } .topbar-burger:hover { background: var(--nav-gris); color: var(--nav-marque); text-decoration: none; } .topbar-burger:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; } .topbar-burger svg { width: 22px; height: 22px; } /* ----- Panneau : tiroir latéral droit sur voile sombre ----- FERMÉ = `visibility: hidden` : le panneau sort du rendu ET de l'ordre de tabulation ET de l'arbre d'accessibilité, sans qu'aucun aria-hidden n'ait à être piloté à la main. Deux sélecteurs l'ouvrent : - `.is-ouvert` posée par le script (cas normal) ; - `:target`, le REPLI SANS JS — le burger étant un lien vers #nav-mobile, le menu s'ouvre même si nav.js ne se charge pas. */ .navmob { display: block; position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; } .navmob.is-ouvert, .navmob:target { visibility: visible; } /* Voile : c'est aussi la cible du « clic en dehors » (un lien, pour que la fermeture marche également sans JS). */ .navmob-fond { position: absolute; inset: 0; background: color-mix(in srgb, var(--nav-sombre) 45%, transparent); opacity: 0; transition: opacity 0.18s ease; } .navmob.is-ouvert .navmob-fond, .navmob:target .navmob-fond { opacity: 1; } .navmob-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(19rem, 86vw); display: flex; flex-direction: column; padding: var(--nav-respiration) var(--nav-marge-laterale); background: var(--nav-fond); box-shadow: -8px 0 24px color-mix(in srgb, var(--nav-sombre) 18%, transparent); overflow-y: auto; transform: translateX(100%); transition: transform 0.18s ease; } .navmob.is-ouvert .navmob-panneau, .navmob:target .navmob-panneau { transform: translateX(0); } /* En-tête du panneau : la signature, et la croix de fermeture. */ .navmob-entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--nav-onglets-hauteur); flex-shrink: 0; } /* La signature reprend le style de la barre ; seule sa largeur ferme (calée sur le gabarit de la barre) n'a pas de sens ici. */ .navmob-entete .topbar-signature { width: auto; } .navmob-fermer { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; color: var(--nav-texte); transition: background-color 0.12s, color 0.12s; } .navmob-fermer:hover { background: var(--nav-gris); color: var(--nav-texte-fort); text-decoration: none; } .navmob-fermer:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; } .navmob-fermer svg { width: 20px; height: 20px; } /* ----- Les 8 modules, en liste verticale ----- Même règle d'onglet actif que la barre, et même marqueur : pastille bleue pleine (--nav-actif = #00aaef), pour que les deux affichages se lisent pareil. */ .navmob-liste { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.75rem; } .navmob-lien { padding: 0.7rem 0.85rem; border-radius: var(--nav-pastille-rayon); font-size: 1rem; font-weight: var(--nav-onglet-graisse); color: var(--nav-onglet-texte); transition: background-color 0.15s, color 0.15s; } .navmob-lien:hover { color: var(--nav-texte-fort); background: var(--nav-gris); text-decoration: none; } .navmob-lien.is-active, .navmob-lien.is-active:hover { color: var(--nav-actif-texte); background: var(--nav-actif); } .navmob-lien:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: 2px; } /* Filet fin de séparation avant les raccourcis. */ .navmob-filet { display: block; height: 1px; margin: 1rem 0; background: var(--nav-bordure); flex-shrink: 0; } /* ----- Raccourcis, en bas du panneau ----- Les MÊMES tuiles que la barre (même composant App\Lib\Sites, mêmes liens, même code couleur), simplement autorisées à passer à la ligne. L'infobulle survolée n'a pas de sens au doigt : on la neutralise ici, l'attribut title restant en place. */ .navmob-raccourcis { padding-bottom: 0.5rem; } .navmob-raccourcis .topbar-raccourcis { flex-wrap: wrap; gap: 0.4rem; } .navmob-raccourcis .topbar-tuile { width: 34px; height: 34px; font-size: 0.85rem; } .navmob-raccourcis .topbar-tuile-nom { display: none; } /* ----- Sous-navigations : DÉFILANTES au doigt ----- Elles défilaient déjà (overflow-x), mais sans repère visuel et avec l'ascenseur totalement masqué. On rend le défilement fluide au doigt, on redonne un ascenseur fin, et on signale le débord. FONDUS DE BORD, 100 % CSS, sans balise ni script : quatre dégradés superposés. Les deux premiers (attachement `local`) DÉFILENT avec le contenu et masquent l'ombre quand on est arrivé au bout ; les deux suivants (attachement `scroll`) restent collés aux bords et FONT l'ombre. Résultat : l'ombre droite n'apparaît que s'il reste du contenu à droite, la gauche que si l'on a déjà défilé. */ .sousnav { -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--nav-bordure) transparent; background-image: linear-gradient(to right, var(--nav-sous-fond), transparent), linear-gradient(to left, var(--nav-sous-fond), transparent), linear-gradient(to right, color-mix(in srgb, var(--nav-sombre) 14%, transparent), transparent), linear-gradient(to left, color-mix(in srgb, var(--nav-sombre) 14%, transparent), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .sousnav::-webkit-scrollbar { display: block; height: 3px; } .sousnav::-webkit-scrollbar-track { background: transparent; } .sousnav::-webkit-scrollbar-thumb { background: var(--nav-bordure); border-radius: 3px; } /* ================================================================= MENUS DÉROULANTS de la navigation (montés par nav.js) ----------------------------------------------------------------- Deux emplois, un seul habillage : la SOUS-NAVIGATION du module et la NAVIGATION TEMPORELLE (« Temps »). Le conteneur .navcol est créé par le script ; les barres d'origine sont DÉPLACÉES dedans, jamais recopiées — les règles ci-dessous ne font donc que les remettre en page verticalement. Si le script n'a pas tourné, aucun .navcol n'existe : les barres s'affichent défilantes comme ci-dessus, et rien n'est perdu. ================================================================= */ /* Bloc autonome, PLEINE LARGEUR DE SON CONTENEUR : les sélecteurs de période vivent selon les modules tantôt à la racine du contenu, tantôt dans un conteneur intermédiaire (.periode-duo en Exercices). Aucune marge négative ici, donc : le menu s'insère proprement quel que soit son hôte, au lieu de déborder de celui-ci. */ .navcol { width: 100%; margin: 0; border: 1px solid var(--nav-bordure); border-radius: 10px; background: var(--nav-sous-fond); overflow: hidden; } /* La sous-navigation ouvre la page : elle récupère l'écart qui la séparait du contenu. */ .navcol--sousnav { margin-bottom: var(--nav-sous-espace-bas); } /* ----- En-tête replié : bouton pleine largeur ----- */ .navcol-tete { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.7rem 0.85rem; border: none; background: transparent; font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--nav-texte-fort); text-align: left; cursor: pointer; } .navcol-tete:focus-visible { outline: 2px solid var(--nav-marque); outline-offset: -2px; } .navcol-icone { display: inline-flex; flex-shrink: 0; color: var(--nav-texte); } .navcol-icone svg { width: 18px; height: 18px; } /* Libellé : l'onglet actif pour une sous-nav, « Temps » pour la période. */ .navcol-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rappel discret de la période courante, poussé à droite. */ .navcol-resume { margin-left: auto; flex-shrink: 0; font-size: 0.85rem; font-weight: 400; color: var(--nav-texte); white-space: nowrap; } /* Chevron : bas au repos, retourné une fois déplié (le jeu maison n'a qu'un chevron, on le pivote — même procédé que le bloc « Ajouter un ingrédient » d'Alimentation). */ .navcol-chevron { display: inline-flex; flex-shrink: 0; margin-left: auto; color: var(--nav-texte); transition: transform 0.15s; } .navcol-resume + .navcol-chevron { margin-left: 0.4rem; } .navcol-chevron svg { width: 18px; height: 18px; display: block; } .navcol.is-ouvert .navcol-chevron { transform: rotate(180deg); } /* ----- Corps déplié ----- */ .navcol-corps { padding: 0 0.85rem 0.7rem; border-top: 1px solid var(--nav-bordure); background: var(--nav-fond); } .navcol-corps[hidden] { display: none; } /* ----- La SOUS-NAVIGATION, remise en liste verticale ----- On neutralise ici tout ce qui faisait d'elle une barre collée : position, hauteur ferme, marges négatives, fond, défilement et fondus de bord. Les onglets, eux, sont les mêmes éléments. */ .navcol .sousnav { position: static; display: flex; flex-direction: column; align-items: stretch; height: auto; margin: 0; padding: 0.35rem 0 0; background: transparent; background-image: none; border-bottom: none; overflow: visible; } .navcol .sousnav-point { display: none; } .navcol .sousnav-onglet { position: relative; justify-content: flex-start; width: 100%; padding: 0.6rem 0.75rem; border-radius: var(--nav-pastille-rayon); font-size: 0.95rem; } /* Onglet ACTIF : pastille bleue pleine (--nav-actif = #00aaef) et coche blanche dessinée en CSS, sans image ni police d'icônes. Le souligné du niveau 2, qui n'a pas de sens sur fond plein, est neutralisé. */ .navcol .sousnav-onglet.is-active { color: var(--nav-actif-texte); background: var(--nav-actif); font-weight: 600; } .navcol .sousnav-onglet.is-active .sousnav-libelle::after { display: none; } .navcol .sousnav-onglet.is-active::after { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 0.3rem; height: 0.6rem; border: solid var(--nav-blanc); border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg); } /* ----- La NAVIGATION TEMPORELLE, niveau par niveau ----- Chaque groupe (année, mois, semaine, jour) devient une section intitulée. Le titre est produit à partir de l'attribut posé par le script : aucun élément de texte n'est fabriqué, et les liens demeurent ceux des composants SelecteurPeriode / SelecteurSemaineJour. */ .navcol .periode { display: block; font-size: 0.95rem; } .navcol .periode-filet, .navcol .periode-point { display: none; } .navcol .periode-groupe { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.5rem; } .navcol .periode-groupe[data-titre]::before { content: attr(data-titre); flex-basis: 100%; padding-top: 0.55rem; color: var(--color-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Choix de période : pastilles cliquables, confortables au doigt. L'actif prend le fond bleu clair et le texte bleu de marque. */ .navcol .periode-item { padding: 0.4rem 0.7rem; border: 1px solid var(--nav-bordure); border-radius: 999px; background: var(--nav-blanc); } .navcol .periode-item.is-active { color: var(--nav-marque); background: color-mix(in srgb, var(--nav-marque) 12%, var(--nav-blanc)); border-color: color-mix(in srgb, var(--nav-marque) 40%, transparent); font-weight: 600; } } /* ===================================================================== Module Comptabilité (Finances) ===================================================================== */ /* Barre d'onglets du module */ .compta-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; } .compta-tab { padding: 0.45rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.9rem; color: var(--color-muted); background: var(--color-surface); transition: background 0.15s, color 0.15s, border-color 0.15s; } .compta-tab:hover { color: var(--color-primary); border-color: var(--color-border-2); background: var(--color-surface-2); text-decoration: none; } .compta-tab.is-active { color: var(--color-primary); background: var(--color-accent-soft); border-color: var(--color-primary); font-weight: 600; } /* Indicateurs de synthèse (budget total / minoré / minimum brut HT) */ .compta-indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); margin: 1rem 0 1.5rem; } /* ===================================================================== CARTE KPI — style UNIQUE de toute l'application (App\Lib\Kpi) --------------------------------------------------------------------- Une seule famille de classes, appliquée dans tous les modules : fond gris, libellé en petites majuscules grises, grande valeur sombre, sous-libellé optionnel. Les anciennes familles par module (.compta-indicateur, .accueil-kpi, .exo-kpi, .tdb-carte) et leurs variantes colorées (fonds bleutés, ambrés, barres d'accent) ont été supprimées : un KPI se présente désormais à l'identique partout. Seule couleur admise en plus du sombre : le rouge de --kpi-valeur-negatif, posé par App\Lib\Kpi quand la valeur est négative. C'est FONCTIONNEL, pas décoratif — voir .kpi-valeur.is-negatif. ===================================================================== */ .kpi { display: flex; flex-direction: column; min-width: 0; /* autorise la carte à rétrécir dans sa colonne */ padding: 0.9rem 1.1rem; border: 1px solid var(--kpi-bordure); border-radius: var(--kpi-rayon); background: var(--kpi-fond); } .kpi-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kpi-label); overflow-wrap: break-word; } .kpi-valeur { margin-top: 0.25rem; font-size: 22px; font-weight: 600; color: var(--kpi-valeur); font-variant-numeric: tabular-nums; } /* Alerte : valeur négative (ou seuil métier explicite). Unique dérogation chromatique, décidée côté PHP par App\Lib\Kpi::classeValeur(). */ .kpi-valeur.is-negatif { color: var(--kpi-valeur-negatif); } .kpi-sub { margin-top: 0.15rem; font-size: 0.85rem; color: var(--kpi-sub); overflow-wrap: break-word; } /* ===================================================================== CONTRÔLE SEGMENTÉ — composant RÉUTILISABLE (.segmented) --------------------------------------------------------------------- Un groupe d'options mutuellement exclusives, réunies dans un même rail gris : l'option retenue est une pastille BLEUE PLEINE, les autres restent en gris sur fond transparent. C'est le pendant « commande » de la carte KPI : une seule écriture pour toute l'application. Volontairement AGNOSTIQUE du mécanisme : les options peuvent être des (bascule par rechargement serveur, comme l'Historique de la Comptabilité) ou des