/* Feuille de style de l'application. TROIS THÈMES, choisis dans les réglages et appliqués via l'attribut `data-theme` de . Chaque thème redéfinit le même jeu de variables ; aucune couleur n'est écrite en dur ailleurs dans ce fichier. Les couleurs de séries ont été validées séparément contre la surface de CHAQUE thème (bande de clarté, chroma, écart en vision des couleurs déficiente, contraste ≥ 3:1) — une couleur lisible sur fond sombre ne l'est pas forcément sur fond clair. Les couleurs de statut sont les mêmes partout : elles signifient bon / attention / grave, pas « thème de l'utilisateur ». Sur fond clair l'orange de statut descend sous 3:1 ; c'est pourquoi les bandeaux portent leur texte en couleur de texte normale et ne réservent la couleur de statut qu'à la bordure et au symbole. La couleur ne porte jamais le sens seule. --------------------------------------------------------------------- */ /* --- TERRE (défaut) : sombre, bruns et verts --------------------------- Contrastes : texte 14,7:1 sur carte, texte discret 6,1:1, liens 8,0:1. */ :root, :root[data-theme="terre"] { /* Fait peindre en sombre tout ce que le navigateur dessine lui-même : sélecteur de date, flèches des champs numériques, barres de défilement. */ color-scheme: dark; --bg: #14100c; /* brun très sombre, fond de page */ --card: #1f1811; /* brun sombre, surface des cartes */ --champ: #17120d; /* fond des champs de saisie, en retrait */ --border: #3a2e22; /* brun moyen, traits discrets */ --text: #f2eae0; /* blanc cassé chaud */ --muted: #ab9581; /* beige grisé */ /* Deux verts : le clair pour le texte (liens), le soutenu pour les aplats. Le blanc sur le vert soutenu ne donnerait que 3,4:1, d'où le texte brun foncé sur les boutons (5,6:1). */ --accent: #6fbf8f; --accent-fond: #2f9e6e; --accent-texte: #14100c; --error: #e8705a; /* Séries : vert (barres), terracotta (ligne), violet (ligne). Le couple terracotta / vert est dans la bande d'alerte en vision deutéranope : admis uniquement parce que barres et lignes ont des formes différentes. Ne pas intervertir. */ --serie-jour: #2f9e6e; --serie-aigue: #d9703f; --serie-chronique: #9085e9; } /* --- SAPIN : clair, bruns clairs et vert sapin ------------------------- Contrastes : texte 14,7:1 sur carte, texte discret 5,8:1, liens 6,3:1. */ :root[data-theme="sapin"] { color-scheme: light; --bg: #f4efe6; /* beige clair, fond de page */ --card: #fdfbf7; /* ivoire, surface des cartes */ --champ: #f7f2e9; /* champs légèrement en retrait sur la carte */ --border: #ddd2c0; /* brun clair */ --text: #2e2419; /* brun très foncé */ --muted: #6f6152; /* brun moyen */ --accent: #1a6b45; /* vert sapin, pour le texte */ --accent-fond: #235c3c; /* vert sapin soutenu, pour les aplats */ --accent-texte: #ffffff; /* 7,9:1 sur l'aplat */ --error: #b3261e; /* Mêmes trois teintes que « terre », re-graduées pour un fond clair. Ce triplet passe toutes les vérifications sans réserve. */ --serie-jour: #178a62; --serie-aigue: #c65a2c; --serie-chronique: #5a46bf; } /* --- ROSE : clair, tons roses ------------------------------------------ Contrastes : texte 14,3:1 sur carte, texte discret 5,8:1, liens 6,1:1. */ :root[data-theme="rose"] { color-scheme: light; --bg: #fdf2f5; --card: #fffafb; --champ: #fdf4f7; --border: #f0d5de; --text: #3a2028; /* prune très foncé */ --muted: #7d5a66; --accent: #b02a5b; --accent-fond: #a3255a; --accent-texte: #ffffff; /* 7,1:1 sur l'aplat */ --error: #b3261e; /* Ici le vert est écarté : rose et vert se confondent en vision deutéranope (écart 2,2 pour un seuil de 8). Rose, violet et doré passent toutes les vérifications. */ --serie-jour: #c2185b; --serie-aigue: #b8860b; --serie-chronique: #5a46bf; } /* Couleurs de statut : identiques dans tous les thèmes. */ :root { --statut-bon: #0ca30c; --statut-attention: #fab219; --statut-grave: #d03b3b; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } .shell { max-width: 34rem; margin: 0 auto; padding: 3rem 1rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; } h1 { font-size: 1.4rem; margin: 0 0 1.25rem; } .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .row h1 { margin: 0; } label { display: block; margin: 1rem 0 0.35rem; font-size: 0.9rem; font-weight: 600; } /* Tous les champs de saisie partagent la même apparence. number, date et time étaient absents de cette liste et restaient blancs, ce que le fond sombre rendait particulièrement visible. */ input[type="email"], input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], textarea, select { width: 100%; padding: 0.6rem 0.7rem; background: var(--champ); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1rem; font-family: inherit; } input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } button { margin-top: 1.5rem; padding: 0.65rem 1.1rem; background: var(--accent-fond); color: var(--accent-texte); border: 0; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; } button:hover { filter: brightness(1.1); } button.secondary { margin: 0; background: transparent; border: 1px solid var(--border); color: var(--muted); } .errors { margin: 0 0 1rem; padding: 0.75rem 0.75rem 0.75rem 2rem; border: 1px solid var(--error); border-radius: 8px; color: var(--error); background: rgba(255, 107, 107, 0.08); } .muted { color: var(--muted); font-size: 0.9rem; } .hint { color: var(--muted); font-size: 0.82rem; margin: 0.35rem 0 0; } a { color: var(--accent); } .placeholder { margin-top: 1.5rem; padding: 1rem; border: 1px dashed var(--border); border-radius: 8px; } .placeholder p { margin: 0 0 0.5rem; } .placeholder p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------- Étape 2 : navigation, journal, historique --------------------------------------------------------------- */ /* Navigation : colonne latérale sur ordinateur, barre d'onglets en bas sur téléphone. Le même balisage sert aux deux : seules les règles changent. La barre horizontale d'origine passait sur deux lignes sous 26 rem. */ .appli { min-height: 100vh; } .appli-connecte { padding-left: 15.5rem; } .lateral { position: fixed; top: 0; left: 0; bottom: 0; width: 15.5rem; padding: 1.4rem 0.9rem; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; z-index: 2; } .lateral-marque { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.4rem; font-weight: 700; text-decoration: none; color: var(--text); } .lateral-logo { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9px; background: var(--accent-fond); color: var(--accent-texte); } .lateral-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } /* 2,75 rem = 44 px : la hauteur minimale d'une cible tactile. */ .lateral-liens a { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0 0.8rem; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; } .lateral-liens a:hover { background: var(--champ); color: var(--text); } .lateral-liens .lateral-actif, .lateral-liens .lateral-actif:hover { background: var(--accent-fond); color: var(--accent-texte); font-weight: 700; } /* Le libellé court n'existe que dans la barre d'onglets. */ .onglet-libelle { display: none; } .lateral-pied { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; } .lateral-pied form { margin: 0; } .lateral-compte { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barre-compacte { display: none; } @media (max-width: 60rem) { /* La colonne devient une barre d'onglets ancrée en bas : le pouce y arrive, et la navigation ne mange plus deux lignes en haut de chaque page. */ .appli-connecte { padding-left: 0; } .lateral { top: auto; right: 0; width: auto; height: 4.5rem; padding: 0.35rem 0.25rem 0; flex-direction: row; gap: 0; border-right: 0; border-top: 1px solid var(--border); overflow: visible; } .lateral-marque, .lateral-pied, .lateral-secondaire { display: none; } .lateral-liens { flex-direction: row; flex: 1; } .lateral-liens li { flex: 1; } .lateral-liens a { flex-direction: column; justify-content: center; gap: 0.15rem; min-height: 3.5rem; padding: 0 0.15rem; border-radius: 10px; font-size: 0.62rem; text-align: center; } /* Sur un onglet, l'aplat couvrirait tout : l'état actif passe par la couleur du texte et de l'icône, doublée par aria-current. */ .lateral-liens .lateral-actif, .lateral-liens .lateral-actif:hover { background: transparent; color: var(--accent); } .lateral-libelle { display: none; } .onglet-libelle { display: block; } /* Ce que la barre d'onglets ne peut pas porter remonte en haut de l'écran. */ .barre-compacte { position: fixed; top: 0; left: 0; right: 0; height: 3.25rem; padding: 0 0.6rem; display: flex; align-items: center; gap: 0.15rem; background: var(--card); border-bottom: 1px solid var(--border); z-index: 2; } .barre-compacte .lateral-marque { display: flex; flex: 1; padding: 0; font-size: 0.95rem; } .barre-compacte form { margin: 0; } .barre-icone { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; background: none; border: 0; border-radius: 9px; color: var(--muted); cursor: pointer; } .barre-icone:hover { color: var(--text); background: var(--champ); filter: none; } } /* Bouton qui doit ressembler a un lien : utilise pour les actions en POST (deconnexion, suppression), qui ne peuvent pas etre de simples liens. */ button.lien { margin: 0; padding: 0; background: none; border: 0; color: var(--muted); font-size: 0.9rem; font-weight: 400; cursor: pointer; text-decoration: underline; } button.lien:hover { color: var(--text); filter: none; } button.lien.danger:hover { color: var(--error); } /* La colonne latérale a rendu la largeur disponible : le corps des pages larges peut enfin tenir sur deux colonnes. */ .shell-large { max-width: 64rem; } .bouton-lien { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; font-size: 0.9rem; } .bouton-lien:hover { border-color: var(--accent); } .jours { display: flex; gap: 1rem; margin-bottom: 1.25rem; font-size: 0.9rem; } /* Bandeaux d'état : le texte reste en couleur de texte normale, la couleur de statut ne colore que la bordure et le symbole. Sur fond clair, l'orange de statut tombe sous 3:1 et serait illisible en texte ; et le symbole garantit que le sens ne repose jamais sur la couleur seule. */ .succes { margin: 0 0 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--statut-bon); border-radius: 8px; color: var(--text); background: rgba(12, 163, 12, 0.10); font-size: 0.9rem; } .succes::before { content: "✓ "; color: var(--statut-bon); font-weight: 700; } textarea { resize: vertical; } /* Le sélecteur natif reste peint par le système : color-scheme (voir :root) lui fait adopter la variante sombre, sinon la liste déroulante s'ouvrirait en blanc au milieu d'une interface sombre. */ .deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Sur telephone, deux colonnes rendent les champs illisibles. */ @media (max-width: 30rem) { .deux-colonnes { grid-template-columns: 1fr; gap: 0; } } .actions { display: flex; gap: 0.75rem; margin: 1.25rem 0; flex-wrap: wrap; } .sous-titre { font-size: 1rem; margin: 1.75rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .jour { padding: 1rem 0; border-top: 1px solid var(--border); } .jour h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; } .jour h2 a { text-decoration: none; color: var(--text); } .jour h2 a:hover { color: var(--accent); } .etiquette { margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--accent-fond); color: var(--accent-texte); font-size: 0.7rem; font-weight: 600; } .mesures { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 0.6rem; padding: 0; font-size: 0.85rem; color: var(--muted); } .mesure-valeur { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .seance { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.6rem 0.75rem; margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; } .seance .muted { font-size: 0.82rem; } .note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); white-space: pre-wrap; } .liste-seances { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.9rem; } .liste-seances li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); } /* --------------------------------------------------------------- Étape 2b : musculation --------------------------------------------------------------- */ .actions-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Le formulaire de saisie d'une ligne est mis en avant : c'est l'action principale de la page, répétée une dizaine de fois par séance. */ .ligne-form { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(79, 140, 255, 0.04); } .ligne-form label:first-of-type { margin-top: 0; } .quatre-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } /* Sur téléphone, quatre colonnes rendent les champs inutilisables. */ @media (max-width: 34rem) { .quatre-colonnes { grid-template-columns: repeat(2, 1fr); } } .case { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-weight: 400; font-size: 0.9rem; } .case input { width: auto; } .groupe { padding: 0.9rem 0; border-top: 1px solid var(--border); } .groupe h2 { font-size: 0.95rem; margin: 0 0 0.35rem; } .groupe h2 a { text-decoration: none; color: var(--text); } .groupe h2 a:hover { color: var(--accent); } .groupe-resume { font-size: 0.9rem; margin-bottom: 0.3rem; } .rappel { margin: 0.3rem 0 0.5rem; font-size: 0.82rem; color: var(--muted); border-left: 2px solid var(--border); padding-left: 0.6rem; } .series { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; } .series li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; } .series form { margin: 0; margin-left: auto; } .serie-num { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--border); color: var(--muted); font-size: 0.72rem; flex-shrink: 0; } .etiquette-douce { padding: 0.05rem 0.4rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.7rem; } .suppr-seance { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); } .liste-exercices { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; } .liste-exercices li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); } .liste-exercices .muted { font-size: 0.8rem; margin-left: auto; } .tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tableau th, .tableau td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); text-align: left; } .tableau th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } .tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- Étape 3 : tableau de bord, feu HRV, graphique de charge (les couleurs sont définies par thème en tête de fichier) --------------------------------------------------------------- */ /* Plusieurs cartes empilées sur le tableau de bord. */ .shell-large .card + .card { margin-top: 1rem; } .sous-titre-nu { font-size: 1rem; margin: 0 0 1rem; } /* --- Le chiffre principal --- */ .hero { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0 1rem; flex-wrap: wrap; } .hero-chiffre { font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .hero-chiffre.zone-optimale { color: var(--statut-bon); } .hero-chiffre.zone-basse { color: var(--text); } .hero-chiffre.zone-elevee { color: var(--statut-grave); } .hero-chiffre.zone-vide { color: var(--muted); } .hero-texte { flex: 1; min-width: 14rem; } .hero-titre { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .hero-texte p { margin: 0.35rem 0 0; } .badge { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; border: 1px solid currentColor; } .badge.zone-optimale { color: var(--statut-bon); } .badge.zone-basse { color: var(--muted); } .badge.zone-elevee { color: var(--statut-grave); } .avertissement { margin: 0 0 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--statut-attention); border-radius: 8px; color: var(--text); background: rgba(250, 178, 25, 0.09); font-size: 0.85rem; } .avertissement::before { content: "▲ "; color: var(--statut-attention); } /* --- Tuiles de chiffres --- */ /* Les tuiles s'ajustent à leur contenu plutôt qu'à un nombre fixe de colonnes : « 7:12 /km » ou « 148 bpm » passaient à la ligne dans une colonne trop étroite, ce qui coupait la valeur en deux. */ .tuiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; padding: 0; margin: 1.25rem 0 0; } @media (max-width: 34rem) { .tuiles { grid-template-columns: 1fr; } } .tuiles li { padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; } .tuile-valeur { display: block; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; /* Une valeur coupée en deux lignes se lit mal : mieux vaut qu'elle réduise la largeur disponible du reste. */ white-space: nowrap; } .tuile-libelle { font-size: 0.82rem; color: var(--muted); } /* --- Feu HRV --- */ .feu { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: 8px; } .feu p { margin: 0.3rem 0 0; } .feu-symbole { font-size: 1.1rem; line-height: 1.4; } .feu-green { border-color: var(--statut-bon); } .feu-green .feu-symbole { color: var(--statut-bon); } .feu-amber { border-color: var(--statut-attention); } .feu-amber .feu-symbole { color: var(--statut-attention); } .feu-red { border-color: var(--statut-grave); } .feu-red .feu-symbole { color: var(--statut-grave); } /* --- Graphique --- */ /* Sur téléphone, réduire un graphique de 720 px de large à la largeur de l'écran rend l'axe illisible (le texte suit l'échelle du viewBox). On le laisse donc à une largeur minimale lisible et on le fait défiler horizontalement — le reste de la page, lui, ne déborde pas. */ .graphique-cadre { overflow-x: auto; /* Place pour la barre de défilement sans coller au texte qui suit. */ padding-bottom: 0.25rem; } .graphique { width: 100%; min-width: 30rem; height: auto; display: block; } /* Grille en traits pleins, à peine plus claire que la surface. */ .graphique .grille { stroke: var(--border); stroke-width: 1; } .graphique .axe { fill: var(--muted); font-size: 11px; font-family: inherit; } .graphique .barre { fill: var(--serie-jour); } /* Marques fines : 2 px, jamais de remplissage sous la courbe. */ .graphique .ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .graphique .ligne-aigue { stroke: var(--serie-aigue); } .graphique .ligne-chronique { stroke: var(--serie-chronique); } .legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding: 0; margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--muted); } .legende li { display: flex; align-items: center; gap: 0.4rem; } .pastille { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; } .pastille-jour { background: var(--serie-jour); } .pastille-aigue { background: var(--serie-aigue); } .pastille-chronique { background: var(--serie-chronique); } /* --------------------------------------------------------------- Réglages : choix du thème --------------------------------------------------------------- */ .themes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .theme-choix { display: flex; align-items: center; gap: 0.85rem; margin: 0; padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; font-weight: 400; cursor: pointer; } .theme-choix:hover { border-color: var(--accent); } /* Le thème actif est signalé par une bordure ET le bouton radio coché : jamais par la couleur seule. */ .theme-actif { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .theme-choix input { width: auto; margin: 0; flex-shrink: 0; } /* Aperçu : un carré du fond, contenant un carré de surface et une pastille d'accent — les trois couleurs qui donnent son caractère au thème. */ .theme-apercu { display: inline-flex; align-items: center; gap: 0.3rem; width: 3.4rem; height: 2.1rem; padding: 0.3rem; border: 1px solid; border-radius: 6px; flex-shrink: 0; } .theme-apercu span:first-child { flex: 1; align-self: stretch; border-radius: 3px; } .theme-apercu span:last-child { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; } .theme-texte { display: flex; flex-direction: column; } .theme-texte .muted { font-size: 0.82rem; } /* Formulaire de ressenti sur une séance importée (historique). */ .ressenti-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0; font-size: 0.82rem; } .ressenti-form label { margin: 0; font-weight: 400; } .ressenti-form .champ-court { width: 4rem; padding: 0.25rem 0.4rem; font-size: 0.85rem; } .ressenti-form button { margin: 0; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; } code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; padding: 0.1rem 0.3rem; background: var(--champ); border: 1px solid var(--border); border-radius: 4px; } /* --------------------------------------------------------------- Calendrier et fiche de séance --------------------------------------------------------------- */ .mois-nav { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; } .mois-nav a { text-decoration: none; } .mois-nav a:hover { text-decoration: underline; } /* Filet de sécurité pour les largeurs intermédiaires : sous 48 rem c'est l'agenda qui prend le relais, la grille n'y est plus affichée du tout. */ .calendrier-cadre { overflow-x: auto; margin-top: 1.25rem; } .calendrier { width: 100%; min-width: 34rem; border-collapse: collapse; table-layout: fixed; } .calendrier th { padding: 0.4rem 0.3rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); text-align: left; } .calendrier td { vertical-align: top; width: 14.28%; height: 4.6rem; padding: 0.3rem; border: 1px solid var(--border); border-radius: 6px; } /* Les jours des mois voisins restent visibles mais en retrait : les masquer tronquerait les semaines et casserait la lecture de la grille. */ .calendrier .hors-mois { opacity: 0.4; } .calendrier .aujourd-hui { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .numero-jour { display: block; font-size: 0.75rem; color: var(--muted); text-decoration: none; margin-bottom: 0.2rem; } .numero-jour:hover { color: var(--text); } .case-seance { display: block; padding: 0.15rem 0.3rem; margin-bottom: 0.15rem; border-radius: 4px; background: var(--champ); border-left: 2px solid var(--accent-fond); font-size: 0.7rem; line-height: 1.25; text-decoration: none; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .case-seance:hover { border-left-color: var(--accent); background: var(--border); } .case-duree { display: block; color: var(--muted); font-size: 0.65rem; } .sous-titre-seance { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.3rem; } /* --------------------------------------------------------------- Calendrier sur téléphone : agenda plutôt que grille --------------------------------------------------------------- */ /* Sept colonnes ne tiennent pas dans 390 px : la grille débordait horizontalement. Les mêmes séances sont donc aussi rendues en liste, et chaque largeur n'en montre qu'une des deux. */ .agenda { display: none; } @media (max-width: 48rem) { .calendrier-cadre { display: none; } .agenda { display: block; list-style: none; margin: 1.25rem 0 0; padding: 0; } .agenda li + li { border-top: 1px solid var(--border); } .agenda-jour { display: flex; gap: 0.8rem; padding: 0.65rem 0; } .agenda-date { flex-shrink: 0; width: 3.1rem; text-align: center; font-size: 0.72rem; color: var(--muted); line-height: 1.3; text-decoration: none; } .agenda-date:hover strong { color: var(--accent); } .agenda-date strong { display: block; font-size: 1.15rem; color: var(--text); } .agenda-aujourd-hui .agenda-date strong { color: var(--accent); } .agenda-seances { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .agenda-seances a { display: block; min-height: 2.75rem; padding: 0.45rem 0.6rem; background: var(--champ); border-left: 2px solid var(--accent-fond); border-radius: 6px; text-decoration: none; color: var(--text); font-size: 0.9rem; } .agenda-seances a:hover { border-left-color: var(--accent); } .agenda-duree { color: var(--muted); font-size: 0.8rem; } } /* --------------------------------------------------------------- Tableau de bord : deux colonnes dès qu'il y a la place --------------------------------------------------------------- */ /* Le graphique et l'historique tiennent la colonne large ; les indicateurs du jour, qui se lisent d'un coup d'œil, tiennent la colonne étroite. Sous 62 rem, tout se remet à la suite dans l'ordre du balisage. */ .tableau-colonnes { display: grid; gap: 1rem; align-items: start; /* La grille n'est pas une carte : la marge entre cartes ne s'applique pas. */ margin-top: 1rem; } .tableau-colonnes > div { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } /* L'espacement vient de `gap` : la marge générale ferait double emploi. */ .tableau-colonnes .card + .card { margin-top: 0; } @media (min-width: 62rem) { .tableau-colonnes { grid-template-columns: minmax(0, 1fr) 21rem; } } /* --------------------------------------------------------------- Aide repliable sous les indicateurs --------------------------------------------------------------- */ /* Discrète tant qu'elle est fermée : une ligne en texte secondaire. Le triangle natif est remplacé par l'icône, qui dit mieux « explication ». */ .aide { margin-top: 0.45rem; font-size: 0.8rem; color: var(--muted); } .aide summary { display: inline-flex; align-items: flex-start; gap: 0.35rem; cursor: pointer; list-style: none; line-height: 1.35; } .aide summary::-webkit-details-marker { display: none; } .aide summary .icone { flex-shrink: 0; margin-top: 0.1rem; } .aide summary:hover { color: var(--text); } .aide summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .aide-texte { margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--champ); border: 1px solid var(--border); border-radius: 8px; color: var(--text); line-height: 1.5; } .aide-texte p { margin: 0 0 0.5rem; } .aide-texte p:last-child { margin-bottom: 0; } /* Dans une tuile, le libellé et l'aide s'empilent. Et une aide dépliée ne doit pas étirer les tuiles voisines de la même rangée, qui resteraient vides sur toute la hauteur de l'explication. */ .tuiles li { display: flex; flex-direction: column; } .tuiles { align-items: start; } /* --------------------------------------------------------------- Tableau de bord : séances sans ressenti --------------------------------------------------------------- */ .a-completer { list-style: none; margin: 0; padding: 0; } .a-completer li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 0; } .a-completer li + li { border-top: 1px solid var(--border); } .a-completer-seance { flex: 1; min-width: 12rem; color: var(--text); text-decoration: none; } .a-completer-seance:hover { color: var(--accent); } /* Le formulaire reste sur la même ligne que la séance, aligné à droite. */ .a-completer .ressenti-form { margin: 0; } /* --------------------------------------------------------------- Recommandations --------------------------------------------------------------- */ .recommandations { list-style: none; margin: 0; padding: 0; } .recommandations li { padding: 0.75rem 0; } .recommandations li + li { border-top: 1px solid var(--border); } .recommandation-entete { margin: 0 0 0.3rem; font-size: 0.85rem; } /* pre-line : les retours à la ligne tapés dans le message sont conservés, sans qu'il faille les transformer en
— ce qui obligerait à désactiver l'échappement du texte. */ .recommandation-texte { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }