/** * item #332 (18e vague, retour Chloé) — "Admin prestataire : modernise * l'espace en terme de design" : même traitement que l'espace client * (item #326, 17e vague — ombres légères, coins arrondis, transitions, * états au survol/focus) mais appliqué ici aux briques COMMUNES à toutes * les pages du dashboard prestataire (.tpd-card, .tpd-btn, les champs de * formulaire, .tpd-stat-card, les lignes rendez-vous/prestations, le menu * de la sidebar) plutôt que de reprendre une à une chacune des ~25 pages * (view-*.php) qui les réutilisent — ces briques étant partagées, le * même bloc de règles suffit à moderniser l'ensemble du dashboard d'un * coup, de façon cohérente. Pas de changement de structure HTML/de * palette : uniquement de la profondeur (ombres), de la douceur * (transitions) et des états interactifs plus lisibles. */ :root { /* Aligned to the "Mon profil" mockup so every page in the prestataire admin shares one visual language, not two that merely resemble each other. */ --tpd-ink: #111111; --tpd-paper: #FFFFFF; --tpd-sand: #FAF8F5; --tpd-line: #E7DBC6; --tpd-muted: #6F6A62; --tpd-accent: #A08D6B; --tpd-danger: #B3554A; --tpd-radius: 14px; /* item #332 (18e vague) — ombre légère partagée par .tpd-card et .tpd-stat-card (repos), plus une variante un peu plus marquée pour le survol/focus des éléments interactifs. */ --tpd-shadow: 0 1px 2px rgba(17,17,17,0.04), 0 2px 8px rgba(17,17,17,0.04); --tpd-shadow-hover: 0 4px 14px rgba(17,17,17,0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--tpd-sand); color: var(--tpd-ink); font-family: 'Work Sans', Arial, sans-serif; font-size: 15px; line-height: 1.5; } h1, h2, h3 { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 600; margin: 0; } .tpd-shell { display: flex; min-height: 100vh; } /* Sidebar */ .tpd-sidebar { width: 240px; flex-shrink: 0; /* item #133 — "couleur du bandeau du menu" (Réglages > Apparence), independent from --tpd-ink (which stays the main text color used all over the rest of the dashboard) — see TPD_Profile::menu_color() and shell.php's inline override. Falls back to --tpd-ink, unchanged, when no custom menu color has been set. */ background: var(--tpd-sidebar-bg, var(--tpd-ink)); color: var(--tpd-paper); display: flex; flex-direction: column; /* item 4 (27e vague, retour Chloé) — "réduit un peu la taille de la barre du haut sur tous les appareils" : padding vertical réduit de 28px à 20px (28px → 20px ci-dessous ; voir aussi le margin-bottom de .tpd-sidebar-bar juste plus bas, et l'équivalent mobile dans le @media 900px, mêmes proportions). */ padding: 20px 20px; position: sticky; top: 0; height: 100vh; overflow: hidden; /* only .tpd-nav scrolls — brand and footer always stay put */ } /* item #316 (15e vague, retour Chloé) — la cloche de notifications vit à côté du logo/nom (voir .tpd-bell-wrap plus bas) : .tpd-sidebar-bar n'avait jusqu'ici de règle flex que dans le @media mobile (elle n'avait besoin de rien d'autre, une seule .tpd-brand dedans) — sur desktop c'était un simple bloc, .tpd-brand y prenait toute la largeur. Règle de base ajoutée pour que brand + cloche + (hamburger, masqué sur desktop) restent sur une ligne à toutes les tailles d'écran ; margin-bottom déplacé de .tpd-brand (seul usage de cette classe dans tout le plugin, voir shell.php) vers ce conteneur pour garder le même espacement avant .tpd-nav qu'avant. */ /* item 4 (27e vague, retour Chloé) — margin-bottom réduit de 40px à 26px, même logique que le padding de .tpd-sidebar ci-dessus : cette règle n'est pas redéfinie dans le @media mobile (voir juste plus bas), donc la réduction s'applique déjà "sur tous les appareils" sans rien dupliquer. */ .tpd-sidebar-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 26px; } /* item #324 (17e vague, retour Chloé) — "sur mobile la cloche doit être placée à côté de l'icône du menu" : regroupe la cloche et le hamburger mobile en un seul enfant flex de .tpd-sidebar-bar (voir shell.php), pour que le space-between ci-dessus s'applique seulement entre le nom de l'activité et ce groupe — plus jamais un espace égal entre les 3, qui isolait la cloche au milieu de la barre au lieu de la coller au hamburger. */ .tpd-sidebar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .tpd-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; } .tpd-brand-mark { color: var(--tpd-accent); font-size: 18px; } .tpd-brand-icon { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; flex-shrink: 0; vertical-align: middle; } /* item #132 — Chloé : "favicon sur /mon-espace dans le menu à mettre en blanc côté prestataires". Le fond de la barre latérale est sombre (--tpd-ink, voir .tpd-sidebar) ; filter: brightness(0) invert(1) transforme n'importe quelle icône (même en couleur) en silhouette blanche pour rester visible dessus. Uniquement dans la barre latérale — sur les pages Inscription/Connexion (fond clair), l'icône garde ses couleurs d'origine. */ .tpd-sidebar .tpd-brand-icon { filter: brightness(0) invert(1); } /* item #316 (15e vague, retour Chloé) — même traitement que .tpd-loyalty-card-brand (item #299, même souci) : un nom d'activité un peu long ne doit pas pousser la cloche/le hamburger hors de la barre maintenant que .tpd-brand a min-width:0 (voir plus haut). */ .tpd-brand-name { font-family: 'Bodoni Moda', Georgia, serif; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpd-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; /* item #115 — Chloé : "dans le menu je veux pas qu'on vois le curseur pour descendre" — la barre de défilement du navigateur restait visible en permanence sur la sidebar sombre. Le menu défile toujours (overflow-y: auto ci-dessus, inchangé), seule la barre elle-même est masquée. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* anciens Edge/IE */ } .tpd-nav::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome/Safari/Edge */ .tpd-nav-item { color: rgba(255,255,255,0.75); text-decoration: none; padding: 11px 14px; border-radius: 6px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; /* item #332 (18e vague) — transition douce plutôt qu'un changement de fond instantané au survol/à l'activation. */ transition: background 0.15s ease, color 0.15s ease; } .tpd-nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .tpd-nav-item.is-active { background: rgba(255,255,255,0.1); color: #fff; font-weight: 600; } /* item #108 — "Messages" unread count, as a real badge instead of the old plain "(3)" text appended to the label — ".tpd-nav-item" is already flex/space-between, so this just needs to look like one; matches .tpd-thread-unread-badge inside the message list itself. */ .tpd-nav-badge { background: var(--tpd-danger); color: #fff; border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 600; flex-shrink: 0; } /* retour Chloé — "le badge de notification doit être rouge à côté du feature Avis au lieu de par exemple Avis (1)" : même pastille que .tpd-nav-badge juste au-dessus (même couleur, var(--tpd-danger)), mais un simple point sans chiffre — voir $tpd_nav_dot_keys dans class-tpd-router.php / shell.php. Même esprit que .tpd-bottom-nav-dot plus bas (barre mobile), en inline plutôt qu'en position:absolute puisqu'ici elle vit dans la même ligne flex que le reste du lien. */ .tpd-nav-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tpd-danger); flex-shrink: 0; } .tpd-nav-external { opacity: 0.5; font-size: 12px; } /** * item #316 (15e vague, retour Chloé) — cloche de notifications, voir * shell.php + TPD_Notifications + dashboard.js pour le toggle du panneau. * .tpd-bell-wrap est positionné (relative) pour que .tpd-bell-panel * s'ancre dessous en absolute ; flex-shrink:0 pour ne jamais se faire * écraser par un nom d'activité long (voir .tpd-brand min-width:0 plus * haut). */ .tpd-bell-wrap { position: relative; flex-shrink: 0; } .tpd-bell-btn { position: relative; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s ease; /* item #332 (18e vague) */ } .tpd-bell-btn:hover { background: rgba(255,255,255,0.16); } .tpd-bell-badge { position: absolute; top: -3px; right: -3px; background: var(--tpd-danger); color: #fff; border-radius: 20px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /** * item #317 (16e vague, retour Chloé) — "la cloche [...] n'affiche pas * l'ensemble du panneau [...] c'est coupé je vois pas tout" (photo 2) : * .tpd-bell-panel était en position:absolute, ancré via .tpd-bell-wrap * (position:relative). Le vrai problème n'était pas sa largeur/position en * elles-mêmes, mais que .tpd-sidebar (son ancêtre) a overflow:hidden (voir * plus haut, "seul .tpd-nav défile") — hidden coupe TOUT descendant qui * déborde de sa boîte, y compris un absolute qui s'étend hors de la * sidebar, ce qui tronquait le panneau dès qu'il dépassait la largeur ou la * hauteur de la sidebar (systématique sur mobile, la sidebar étant étroite). * Passé en position:fixed — non affecté par l'overflow:hidden d'un ancêtre * (sidebar n'a ni transform ni filter, donc ne crée pas de "containing * block" pour fixed) — et positionné dynamiquement par dashboard.js * (top/left calculés depuis la position réelle du bouton cloche, resserrés * pour ne jamais sortir de l'écran) plutôt qu'en CSS pur, puisque fixed ne * peut plus s'ancrer à .tpd-bell-wrap via top:100%. */ /** * 61e vague, retour Chloé — "Dans les notifications retire le ? je ne sais * pas à quoi ça correspond" : capture d'écran montrant la bulle d'aide "?" * de la Statistiques sous-jacente (TPD_Stats::help_icon(), voir son * docblock) visible AU-DESSUS du panneau de notifications ouvert par * dessus. Le panneau est en position:fixed avec z-index:500 — déjà plus * élevé que le z-index:20 de ces bulles d'aide — mais un ancêtre quelque * part dans la page crée visiblement son propre contexte d'empilement qui * déjoue cette comparaison simple. Plutôt que de retracer toute la chaîne * (fragile, déjà documentée comme source de bugs similaires au 30e vague), * z-index du panneau et du petit menu "⋮" par notification remontés à un * palier nettement supérieur à tout le reste de l'interface (même ordre de * grandeur que .tpd-modal-overlay, z-index:1000 plus bas) — garantit que * plus rien ne peut jamais s'afficher par-dessus, quelle que soit la cause * exacte du contexte d'empilement en cause. */ .tpd-bell-panel { position: fixed; width: 320px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; background: #fff; color: var(--tpd-ink); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); z-index: 1600; padding: 8px; } .tpd-bell-panel-header { font-weight: 600; font-size: 14px; padding: 8px 10px 10px; } .tpd-bell-empty { padding: 6px 10px 12px; font-size: 13px; color: #888; margin: 0; } .tpd-bell-item { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--tpd-ink); } a.tpd-bell-item:hover { background: var(--tpd-paper, #FBF9F6); } .tpd-bell-item-label { font-size: 13.5px; font-weight: 500; } .tpd-bell-item-body { font-size: 12.5px; color: #777; } .tpd-bell-item-tag { align-self: flex-start; background: var(--tpd-accent); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 20px; padding: 2px 8px; margin-bottom: 2px; } .tpd-bell-dismiss { display: block; text-align: center; font-size: 12.5px; color: var(--tpd-accent); text-decoration: underline; padding: 10px; margin-top: 4px; border-top: 1px solid #eee; } /** * item #7/#8 (22e vague, retour Chloé) — refonte façon monespacesante.fr : * point coloré = non lu, menu "⋮" (Supprimer/Marquer comme non lu) — voir * TPD_Notification_Log et le rendu dans shell.php. */ .tpd-bell-item-event { flex-direction: row; align-items: flex-start; gap: 8px; padding: 8px 6px 8px 10px; } .tpd-bell-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tpd-accent); flex-shrink: 0; margin-top: 6px; } .tpd-bell-dot.is-read { background: transparent; } .tpd-bell-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--tpd-ink); padding: 2px 4px; border-radius: 6px; } .tpd-bell-item-content:hover { background: var(--tpd-paper, #FBF9F6); } .tpd-bell-item-time { font-size: 11px; color: #999; } .tpd-bell-menu-wrap { position: relative; flex-shrink: 0; } .tpd-bell-menu-toggle { background: none; border: none; cursor: pointer; color: #999; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 6px; } .tpd-bell-menu-toggle:hover { color: var(--tpd-ink); background: var(--tpd-paper, #FBF9F6); } /* 61e vague — même correctif que .tpd-bell-panel juste au-dessus (voir son docblock) : le menu "⋮" d'une notification vit À L'INTÉRIEUR du panneau, donc doit rester au-dessus de tout lui aussi. */ .tpd-bell-menu { position: absolute; right: 0; top: 100%; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); min-width: 180px; z-index: 1601; padding: 4px; } .tpd-bell-menu[hidden] { display: none; } .tpd-bell-menu a { display: block; padding: 8px 10px; font-size: 12.5px; color: var(--tpd-ink); text-decoration: none; border-radius: 6px; white-space: nowrap; } .tpd-bell-menu a:hover { background: var(--tpd-paper, #FBF9F6); } .tpd-bell-menu a.tpd-bell-menu-danger { color: #9A3B3B; } /* Même pastille que .tpd-nav-badge, juste une couleur différente (accent au lieu de danger/rouge) pour qu'une alerte "Nouveau" (annonce produit, pas grave) ne se confonde jamais visuellement avec un vrai compteur "à traiter" (message non lu, ticket en attente). */ .tpd-nav-badge-new { background: var(--tpd-accent); } .tpd-sidebar-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; } .tpd-logout { color: rgba(255,255,255,0.6); font-size: 13px; text-decoration: none; } .tpd-logout:hover { color: #fff; } /* item #116 — Chloé : "le bouton + ajouter une option doit être beige" — c'était un contour en pointillés transparent, maintenant rempli de la couleur beige/accent de la marque (var(--tpd-accent)) au repos, pas seulement au survol. */ .tpd-add-option-cta { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--tpd-accent); border-radius: 8px; padding: 9px 14px; background: var(--tpd-accent); color: var(--tpd-ink); font-size: 13px; font-weight: 600; text-decoration: none; } /* item #133 — bug signalé par Chloé : ces couleurs de survol étaient une teinte fixe (#8D7A5C, un dérivé assombri de l'ancien --tpd-accent par défaut) au lieu de suivre --tpd-accent — donc dès qu'une prestataire personnalisait sa couleur de CTA (Réglages > Apparence), le survol du bouton "+ Ajouter une option" retombait toujours sur l'ancienne couleur d'origine au lieu de rester cohérent avec la sienne. filter: brightness() assombrit LA couleur réellement affichée (var(--tpd-accent), quelle qu'elle soit) au lieu de coder une teinte en dur. */ .tpd-add-option-cta:hover, .tpd-add-option-cta.is-active { filter: brightness(0.88); color: var(--tpd-ink); } /* Main content */ /** * 30e vague, retour Chloé — "Statistiques : la page n'est pas responsive * car je vois que l'on peut swipe vers la droite" : confirmé en mesurant * document.documentElement.scrollWidth dans un navigateur headless — sur * mobile, cette page à elle seule dépassait la largeur de l'écran d'environ * 200px, alors que RIEN ne débordait visuellement. Coupable identifié : * .tpd-stats-help-tip (l'infobulle des bulles d'aide "?", très nombreuses * sur cet écran — 5 KPI + 6 titres de carte), qui reste `position:absolute; * width:max-content; max-width:240px` et centrée par `transform: * translateX(-50%)` MÊME quand elle est invisible (opacity:0; * visibility:hidden — jamais display:none) : dès que la bulle "?" est près * du bord droit d'un écran étroit, cette boîte invisible dépasse quand même * du viewport et agrandit la zone défilable de la page, d'où le swipe vers * une zone vide. overflow-x:hidden ici (jamais sur html/body, qui * casserait le position:sticky de .tpd-sidebar sur desktop — .tpd-main * n'a lui-même aucun contenu en sticky) neutralise ce débordement fantôme, * quelle que soit sa source, sans rien changer au rendu visible : tout ce * qui doit rester visible tient déjà dans la largeur de l'écran grâce aux * précédents audits responsive (28e/29e vagues). */ .tpd-main { flex: 1; padding: 40px 48px; max-width: 1100px; overflow-x: hidden; } /* item #190 (5e lot, retour Chloé) — "agrandir les blocs graphiques Rendez-vous/Revenu dans le temps en largeur pour éviter que les dates soient trop collées" : les 2 graphiques temporels étaient déjà en pleine largeur de .tpd-main (item #172) mais .tpd-main lui-même plafonnait à 1100px, ce qui reste étroit avec jusqu'à 5 repères de date + jusqu'à ~90 points sur une plage personnalisée longue. On élargit SEULEMENT la page Statistiques (.tpd-stats-report présent) plutôt que .tpd-main partout, pour ne pas changer la largeur des autres écrans de Mon Espace. */ .tpd-main:has(.tpd-stats-report) { max-width: 1360px; } /** * 30e vague, retour Chloé — "Calendrier : pour le format mois est-ce * possible d'agrandir le calendrier ?" Même technique que juste au-dessus * pour Statistiques (item #190) : on élargit .tpd-main UNIQUEMENT quand la * grille du mois (.tpd-month-grid) est présente, jamais les vues Semaine/ * Jour (pas demandées ici) ni le reste de Mon Espace. Les cellules du mois * elles-mêmes sont aussi agrandies juste plus bas (.tpd-month-cell) pour * que ce surplus de largeur profite vraiment à la lisibilité des rendez- * vous du jour, pas seulement à des marges vides. */ .tpd-main:has(.tpd-month-grid) { max-width: 1440px; } .tpd-page-header { margin-bottom: 28px; } /* item 5 (28e vague, retour Chloé) — "les textes d'explications sont écrits avec une majuscule à chaque début de mot [...] écris toutes ces descriptions normalement" : le texte source (voir view-qr.php et les ~8 autres vues qui utilisent .tpd-page-subtitle) était déjà en casse de phrase normale — c'est "text-transform: capitalize" ci-dessous qui forçait visuellement une majuscule sur CHAQUE mot ("Générez Un QR Code Pour..."), sans qu'aucun texte source n'ait jamais été écrit ainsi. Retiré : la casse affichée est maintenant exactement celle du texte source, sur toutes les pages qui utilisent cette classe. */ .tpd-page-subtitle { color: var(--tpd-muted); margin: 4px 0 0; } /* 37e vague, retour Chloé — page Formations : espace avant les onglets "Ajouter une formation"/"Inscriptions" qui suivent (voir view-trainings.php) ; classe dédiée pour rester scopé à cette page. */ .tpd-page-subtitle-spaced { margin-bottom: 16px; } .tpd-notice { background: #E4F2E4; color: #2E6B2E; padding: 10px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 20px; display: inline-block; } .tpd-notice-error { background: #F7E6E3; color: var(--tpd-danger); } /* item #235 (9e vague, retour Chloé) — variante "avertissement" (ambre), distincte du succès (vert) et de l'erreur (rouge) : utilisée par view-travel-fee.php pour signaler une option activée mais mal configurée, pas une erreur de soumission. */ .tpd-notice-warning { background: #FBF0DD; color: #8A5A00; } /* Stat cards */ .tpd-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; } .tpd-stat-card { background: var(--tpd-paper); border: 1px solid var(--tpd-line); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 4px; /* item #332 (18e vague) — légère ombre de repos (au lieu d'un simple contour plat) pour donner un peu de profondeur aux chiffres-clés du tableau de bord, cohérent avec .tpd-card ci-dessous. */ box-shadow: var(--tpd-shadow); transition: box-shadow 0.15s ease; } .tpd-stat-card:hover { box-shadow: var(--tpd-shadow-hover); } .tpd-stat-card.is-alert { border-color: var(--tpd-accent); } .tpd-stat-value { font-family: 'Bodoni Moda', Georgia, serif; font-size: 30px; } .tpd-stat-label { font-size: 13px; color: var(--tpd-muted); } /* Sections */ .tpd-section { margin-bottom: 40px; } .tpd-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; } .tpd-link { color: var(--tpd-accent); text-decoration: none; font-size: 14px; } .tpd-empty-note { color: var(--tpd-muted); font-size: 14px; } /* item #213 (7e vague) — petit texte d'aide sous un champ de formulaire, ex. "De"/"À" de Suppléments (voir templates/view-surcharges.php). */ .tpd-field-hint { color: var(--tpd-muted); font-size: 12.5px; margin: -6px 0 12px; line-height: 1.4; } /* Appointment rows (dashboard) */ .tpd-appt-list, .tpd-appt-table { display: flex; flex-direction: column; gap: 8px; } .tpd-appt-row, .tpd-appt-table-row { background: var(--tpd-paper); border: 1px solid var(--tpd-line); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; /* item #332 (18e vague) — même traitement "carte" léger que .tpd-card/ .tpd-stat-card, pour que les listes (rendez-vous, clients fidèles) ne détonnent pas visuellement à côté du reste du dashboard. */ box-shadow: var(--tpd-shadow); transition: box-shadow 0.15s ease, border-color 0.15s ease; } .tpd-appt-row:hover, .tpd-appt-table-row:hover { border-color: var(--tpd-accent); box-shadow: var(--tpd-shadow-hover); } .tpd-appt-time { font-weight: 600; width: 50px; flex-shrink: 0; } /** * item #312 (15e vague, retour Chloé) — "fidélité (les textes se * chevauchent)" : .tpd-appt-row sert aussi aux lignes "Meilleurs clients * fidèles" (nom du client + badge "N visites" + bouton "Récompense * utilisée"), et repasse déjà correctement à la ligne sur mobile (item * #294). Mais .tpd-appt-main — contrairement à son équivalent * .tpd-service-main (Prestations, "min-width: 0" déjà en place) — n'avait * pas cette protection : un nom client un peu long forçait sa propre * largeur de contenu minimale plutôt que de pouvoir rétrécir/passer à la * ligne comme prévu, repoussant le badge/bouton hors de la carte fidélité * sur un écran étroit. Alignée sur .tpd-service-main pour la même raison. */ .tpd-appt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tpd-appt-meta { font-size: 13px; color: var(--tpd-muted); } .tpd-appt-table-date { display: flex; flex-direction: column; align-items: center; width: 54px; flex-shrink: 0; } .tpd-appt-table-day { font-size: 12px; color: var(--tpd-muted); } .tpd-appt-table-hour { font-weight: 600; } /** * 30e vague, retour Chloé — "le nom des prestations dans les blocs * doivent être sur la même ligne (sur mobile)" : sans min-width:0, ce * flex item (comme .tpd-appt-main avant sa propre correction, item #312, * 15e vague — voir plus haut) ne pouvait pas rétrécir sous sa largeur de * contenu minimale, et le nom de la prestation retombait sur 2-3 lignes * en poussant/écrasant les badges et boutons d'action voisins. * * 31e vague, retour Chloé — "le nom des prestations n'est plus totalement * visible dans les blocs, il est tronqué (sur mobile), il ne faut pas que * ce soit tronqué" : le traitement "un seul titre, tronqué avec ellipsis" * ci-dessus (repris de .tpd-service-main/strong, page Prestations) cachait * une partie du nom, ce qui n'était pas ce qu'elle voulait — retiré. * min-width:0 reste (nécessaire pour que le bloc puisse rétrécir sans * pousser ses voisins) mais le titre peut de nouveau s'enrouler sur * plusieurs lignes ; overflow-wrap:anywhere (même pattern que * .tpd-table-row .tpd-appt-meta plus haut) évite qu'un mot/nombre très * long à lui seul ne déborde horizontalement. */ .tpd-appt-table-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tpd-appt-table-main > strong { display: block; max-width: 100%; overflow-wrap: anywhere; } .tpd-appt-actions { display: flex; gap: 6px; } .tpd-appt-actions form { display: inline; } /* v1.9.2 — Chloé: "…" row menu (Détails / Modifier / Effacer) on Rendez-vous. Small dependency-free dropdown — dashboard.js toggles `.is-open` on click and closes on outside click / Escape. */ .tpd-row-menu { position: relative; flex-shrink: 0; } .tpd-row-menu-toggle { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--tpd-muted); padding: 4px 8px; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; /* item #332 (18e vague) */ } .tpd-row-menu-toggle:hover { background: var(--tpd-sand); color: var(--tpd-ink); } .tpd-row-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--tpd-paper); border: 1px solid var(--tpd-line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); min-width: 160px; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .tpd-row-menu:not(.is-open) .tpd-row-menu-list { display: none; } .tpd-row-menu-list a, .tpd-row-menu-list button { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--tpd-ink); text-decoration: none; padding: 8px 10px; border-radius: 6px; } .tpd-row-menu-list a:hover, .tpd-row-menu-list button:hover { background: var(--tpd-sand); } .tpd-row-menu-list .tpd-row-menu-danger { color: var(--tpd-danger); } /* item (87e vague, retour Chloé, capture à l'appui) — "centre le texte du badge acompte remboursé" : .tpd-badge (un ) restait display:inline par défaut — un simple text-align:center n'y aurait rien changé, un élément inline ne définit pas son propre contexte d'alignement pour ses lignes, qui suivent le text-align du bloc englobant (ici la cellule du tableau Rendez-vous, alignée à gauche). Passé en inline-block : invisible sur un badge qui tient sur une seule ligne (ex. "Confirmé"), mais centre enfin les deux lignes d'un libellé plus long qui passe à la ligne dans une colonne étroite (ex. "Acompte Remboursé", jusque-là aligné à gauche). */ .tpd-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; text-transform: capitalize; text-align: center; background: var(--tpd-sand); color: var(--tpd-muted); } .tpd-badge-pending { background: #FDF0D5; color: #8A6D1D; } .tpd-badge-confirmed { background: #E4F2E4; color: #2E6B2E; } .tpd-badge-cancelled { background: #F6DEDE; color: #9A3B3B; } .tpd-badge-completed { background: #E4E4E4; color: #444; } /* v1.9.5 — Chloé (item #83) : "redimensionne la balise places" (Formations) — .tpd-badge donne déjà la bonne taille compacte, ces deux modificateurs n'ajoutent qu'un rappel visuel "complet". */ .tpd-badge-seats { text-transform: none; margin-left: 4px; } .tpd-badge-seats-full { background: #F6DEDE; color: #9A3B3B; } /* item #114 — badge "Principal" (Équipe). */ .tpd-badge-primary { text-transform: none; background: var(--tpd-accent); color: #fff; margin-left: 4px; } /* Quick actions */ .tpd-quick-actions { display: flex; gap: 12px; flex-wrap: wrap; } .tpd-quick-action { background: var(--tpd-paper); border: 1px solid var(--tpd-line); border-radius: 8px; padding: 14px 18px; text-decoration: none; color: var(--tpd-ink); font-size: 14px; box-shadow: var(--tpd-shadow); /* item #332 (18e vague) */ transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tpd-quick-action:hover { border-color: var(--tpd-accent); box-shadow: var(--tpd-shadow-hover); } /* Filter bar */ .tpd-filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; } .tpd-filter-bar label { font-size: 13px; color: var(--tpd-muted); display: flex; align-items: center; gap: 6px; } /* 30e vague, retour Chloé — "Du"/"Au" (Rendez-vous, Paiements) regroupés dans ce conteneur (voir les templates) : un seul item flex pour .tpd-filter-bar, qui passe donc à la ligne EN BLOC sur mobile plutôt que de laisser "Du" et "Au" se séparer chacun sur sa propre ligne — voir l'ajustement de largeur dans le @media (max-width: 900px) plus bas. */ .tpd-filter-date-range { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Même habillage que les champs des cartes (.tpd-card input/select/textarea) — avant ce correctif, select n'était pas listé ici : les dropdowns des filtres (Rendez-vous, Calendrier, Paiements) gardaient l'apparence native du navigateur pendant que tous les autres champs avaient déjà le style carte. */ .tpd-filter-bar input, .tpd-filter-bar select { border: 1px solid var(--tpd-line); border-radius: 6px; padding: 7px 10px; font: inherit; color: var(--tpd-ink); background: var(--tpd-paper); } .tpd-filter-bar select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F6A62' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } /* Two-column layout (services) */ .tpd-two-col { display: flex; gap: 28px; align-items: flex-start; } /* * Bug report Chloé (54e vague) — "les blocs de formations sont mal * positionnés" sur Mon Espace > Formations (panneau "Modifier la * formation" à droite) : c'est la même famille de bug déjà réparée * ailleurs dans ce fichier (item #165, ".tpd-field-row label", * ".tpd-phone-field input"...) mais jamais appliquée ICI, au niveau * racine de ".tpd-two-col" — ".tpd-col-main" (flex:2) n'avait pas de * "min-width: 0". Sans ça, un enfant flex garde pour minimum sa largeur * de CONTENU (min-content) au lieu de 0 : dès que la liste de gauche * contient une ligne assez chargée (ex. formation avec plusieurs badges * "0/5 places" + "Paiement en 4x (PayPal)" + "CPF" + "Qualiopi" sur une * seule ligne, .tpd-appt-meta étant en white-space:nowrap), ce * min-content dépasse la part que ".tpd-col-main" devrait normalement * occuper — ".tpd-col-main" refuse alors de rétrécir, et pousse * ".tpd-col-side" (le panneau de droite, lui borné à 300px min) hors du * cadre visible de ".tpd-main" (qui a overflow-x:hidden, voir plus haut) * : le panneau "Modifier la formation" se retrouve coupé au milieu de * son contenu, exactement le symptôme décrit. Le nouveau badge "Paiement * en 4x (PayPal)" ajouté au 53e vague (plus long que l'ancien texte * Alma) a fait déborder ce seuil, ce qui explique pourquoi ce bug est * apparu maintenant. "min-width: 0" ici (reproduit et vérifié avec un * rendu réel de la page à plusieurs largeurs d'écran) laisse * ".tpd-col-main" rétrécir normalement — sa propre liste sait déjà gérer * l'espace restreint via l'ellipsis (.tpd-service-main/.tpd-appt-meta, * plus haut) — et ".tpd-col-side" retrouve enfin sa juste part de * largeur au lieu d'être repoussé hors champ. */ .tpd-col-main { flex: 2; min-width: 0; } .tpd-col-side { flex: 1; min-width: 300px; } /* Nouvelle demande de Chloé : glisser-déposer scopé par catégorie — un sous-bloc par catégorie (+ "Sans catégorie"), voir view-services.php. */ #tpd-service-order-wrapper { display: flex; flex-direction: column; gap: 22px; } .tpd-service-category-heading { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--tpd-muted); text-transform: uppercase; letter-spacing: 0.03em; } .tpd-service-list { display: flex; flex-direction: column; gap: 8px; } .tpd-service-row { background: var(--tpd-paper); border: 1px solid var(--tpd-line); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tpd-ink); min-width: 0; max-width: 100%; box-sizing: border-box; /* item #332 (18e vague) — transition douce ; le survol lui-même (border-color) existait déjà juste en dessous. */ transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tpd-service-row:hover { border-color: var(--tpd-accent); box-shadow: var(--tpd-shadow-hover); } .tpd-service-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .tpd-service-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .tpd-service-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .tpd-service-main .tpd-appt-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .tpd-service-price { font-weight: 600; flex-shrink: 0; white-space: nowrap; } /* Prestations: drag handle wrapper, categories, radio groups, color palette */ .tpd-service-row-wrap { display: flex; align-items: center; gap: 6px; } .tpd-service-row-wrap .tpd-service-row { flex: 1; } .tpd-service-row-wrap.is-dragging { opacity: 0.4; } .tpd-service-row-wrap .tpd-order-handle { cursor: grab; color: var(--tpd-muted); flex-shrink: 0; } .tpd-service-row-wrap > form { flex-shrink: 0; } .tpd-category-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .tpd-category-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tpd-sand); border-radius: 20px; padding: 6px 12px; font-size: 13px; } .tpd-category-chip.is-dragging { opacity: 0.4; } .tpd-category-chip .tpd-order-handle { cursor: grab; } .tpd-category-chip form { display: inline; } /* v1.9.2 — Chloé: catégorie-filter chips on Clients (tpd_cat). Same chip look, but as clickable filter links rather than a static tag list. */ .tpd-category-chip-link { color: var(--tpd-ink); text-decoration: none; cursor: pointer; border: 1px solid transparent; } .tpd-category-chip-link:hover { border-color: var(--tpd-accent); } .tpd-category-chip-link.is-active { background: var(--tpd-accent); color: #fff; } .tpd-chip-remove { background: none; border: none; cursor: pointer; color: var(--tpd-muted); font-size: 14px; line-height: 1; padding: 0; } /* v1.9.1 — Chloé: the "+ Ajouter" category button could end up squeezed almost out of view next to its text input on a narrow screen (same overflow trap as `.tpd-field-row` in the booking widget: the input had no minimum width of its own, so it happily shrank to make room, but only up to a point before the row simply ran wider than its card and pushed the button toward — or past — the edge). `flex-wrap` plus a sane input floor let the button drop to its own line instead. */ /* v1.9.2 — Chloé: "la balise nouvelle catégorie est trop grande". Root cause: `.tpd-card form { flex-direction: column }` (further down this file) is MORE specific than plain `.tpd-inline-form` (class+element vs. just a class) and this form always lives inside a `.tpd-card`, so it always won — flipping the form to a column flex container. With the main axis now vertical, the input's `flex: 1 1 160px` applied its 160px flex-basis to HEIGHT instead of width, rendering a 160px-tall box instead of a normal text field. `.tpd-card .tpd-inline-form` below is specific enough to actually beat `.tpd-card form` and keep this one form row-direction regardless of where it's nested. */ .tpd-inline-form, .tpd-card .tpd-inline-form { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .tpd-inline-form input { flex: 1 1 160px; min-width: 160px; height: auto; border: 1px solid var(--tpd-line); border-radius: 6px; padding: 8px 10px; font: inherit; } .tpd-radio-label { font-size: 13px; color: var(--tpd-muted); display: block; margin: 4px 0 6px; } .tpd-radio-group { display: flex; gap: 16px; margin-bottom: 4px; } .tpd-radio-option { display: flex; align-items: center; gap: 6px; font-size: 14px; } .tpd-color-palette { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .tpd-color-swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: block; } .tpd-color-swatch input[type="radio"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .tpd-color-swatch.is-selected { outline: 2px solid var(--tpd-ink); outline-offset: 2px; } .tpd-color-swatch-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); display: flex; align-items: center; justify-content: center; } .tpd-color-swatch-custom input[type="color"] { width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; padding: 0; cursor: pointer; position: static; opacity: 1; } .tpd-card { background: var(--tpd-paper); border: 1px solid var(--tpd-line); border-radius: var(--tpd-radius); padding: 26px; /* item #332 (18e vague) — ombre légère de repos, cohérente avec .tpd-stat-card/.tpd-appt-row ci-dessus — pas de survol ici : une ".tpd-card" n'est pas elle-même cliquable (seul son contenu l'est). */ box-shadow: var(--tpd-shadow); } .tpd-card h3 { font-size: 17px; margin-bottom: 16px; } /* * item #12 (22e vague, retour Chloé) — "chevron pour replier/déplier les * réglages" (Programme fidélité, voir view-loyalty.php).
/ * natif : le triangle natif du navigateur est masqué (list-style:none + * ::-webkit-details-marker) au profit d'un chevron dessiné en CSS * (::after, rotation 90° quand [open]), même principe que .tzb-espace-details * côté espace client (item #308) mais avec un chevron plutôt qu'un "▸"/"▾" * texte, plus cohérent avec le reste de l'iconographie de Mon Espace. */ .tpd-collapse { cursor: default; } .tpd-collapse-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; } .tpd-collapse-summary::-webkit-details-marker { display: none; } .tpd-collapse-summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--tpd-muted); border-bottom: 2px solid var(--tpd-muted); transform: rotate(45deg); transition: transform .15s ease; flex-shrink: 0; margin-left: 12px; } .tpd-collapse[open] .tpd-collapse-summary { margin-bottom: 16px; } .tpd-collapse[open] .tpd-collapse-summary::after { transform: rotate(-135deg); } .tpd-collapse-summary h3 { margin-bottom: 0 !important; } .tpd-collapse-body { display: flex; flex-direction: column; gap: 12px; } .tpd-card form { display: flex; flex-direction: column; gap: 12px; } /** * 48e vague, retour Chloé — "rends le bloc de paramètres design et lisible * côté prestataires" : regroupe visuellement les longs formulaires (ex. * Mon Espace > Formations) en sections nommées plutôt qu'une pile plate de * champs — chaque section garde le même style de champ que ".tpd-card" * ci-dessus, seul un séparateur + un petit titre les distinguent. */ .tpd-form-section { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--tpd-line); } .tpd-form-section:first-child { padding-top: 0; border-top: none; } .tpd-form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tpd-accent); margin: 0; } .tpd-card label { font-size: 13px; color: var(--tpd-muted); display: flex; flex-direction: column; gap: 4px; } .tpd-card input, .tpd-card select, .tpd-card textarea { border: 1px solid var(--tpd-line); border-radius: 6px; padding: 9px 12px; font: inherit; color: var(--tpd-ink); background: var(--tpd-paper); /* item #332 (18e vague) — un focus visible (anneau ton sur ton avec --tpd-accent) au lieu du simple contour bleu par défaut du navigateur, comme déjà fait côté espace client (item #326). */ transition: border-color 0.15s ease, box-shadow 0.15s ease; /* 68e vague, retour Chloé — "la balise [mot de passe] n'est pas de la même taille que la balise identifiant ou e-mail" : Safari (desktop ET iOS) applique par défaut un habillage natif différent aux champs input[type=password] qu'aux autres champs texte (léger changement de gabarit/hauteur), invisible sur Chrome — d'où le décalage constaté uniquement par Chloé (utilisatrice iPhone). -webkit-appearance:none neutralise cet habillage natif pour que TOUS les champs de ce bloc (identifiant, e-mail, mot de passe) suivent exactement les mêmes règles ci-dessus, sans exception de navigateur. */ -webkit-appearance: none; appearance: none; } .tpd-card input:focus, .tpd-card select:focus, .tpd-card textarea:focus { outline: none; border-color: var(--tpd-accent); box-shadow: 0 0 0 3px rgba(160,141,107,0.18); } .tpd-card select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F6A62' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; } /* item #128 — Chloé: "la couleur doit être visible" — .tpd-card input's 9px/12px padding + var(--tpd-paper) background above (needed for text/ number/etc. fields) leaves an almost no room to paint its own native swatch, and paints over what little shows through with the card's paper background — every plain color picker in the dashboard (Mes couleurs, Personnaliser un bloc, Fidélité, prestation sur mesure) looked like a blank box instead of a color swatch. Zero padding + no forced background restores the browser's native swatch; a fixed size keeps it from collapsing to almost nothing while still lining up with the other fields in a .tpd-field-row. */ .tpd-card input[type="color"] { padding: 0; background: none; width: 46px; height: 38px; cursor: pointer; } /** * 76e vague, retour Chloé — "quand les prestations sont sélectionnées il * ne voit pas que c'est coché [...] c'est pareil dans l'ajout et * modification de prestation pour la tarification et la sélection de * thème" (3 captures : case "Les plus populaires" de Bloc Prestations, * "Prix fixe"/"Sur devis" de Tarification, cartes Thème). Les trois sont * de simples / natifs, * descendants d'un .tpd-card — ils héritaient donc malgré eux de la règle * ".tpd-card input { [...] appearance:none; -webkit-appearance:none; }" * juste au-dessus (ajoutée au 68e lot pour une tout autre raison : la * hauteur du champ mot de passe sur Safari, voir son docblock). Sur une * case à cocher/un bouton radio, appearance:none supprime le rendu natif * (coche/point) SANS qu'aucune règle ne le redessine ensuite — contrairement * aux champs texte/mot de passe, où seul l'habillage (bordure/fond) change. * Résultat : une case dont l'état change bel et bien (voir .is-selected sur * .tpd-theme-card, ou la valeur cochée réellement enregistrée pour les 2 * autres) mais qui a l'air strictement identique cochée ou non — d'où le * "je ne vois pas que c'est coché" de Chloé. * * Correctif volontairement CIBLÉ sur ces 3 contrôles précis (sélecteurs * dédiés .tpd-featured-service-checkbox / .tpd-pricing-mode / .tpd-theme-card * input) plutôt qu'un ".tpd-card input[type=checkbox]/[type=radio]" général : * .tpd-card héberge aussi .tpd-toggle-switch (interrupteurs), .tpd-color-swatch * et .tpd-header-layout-option, qui masquent eux aussi leur natif * (appearance:none + opacity:0 + position:absolute) mais dessinent LEUR * PROPRE indicateur personnalisé à côté — une règle générale par attribut de * type aurait une spécificité plus forte que ces ".classe input" existants * et aurait cassé ces interrupteurs/pastilles en leur rendant leur case * native visible par-dessus l'indicateur personnalisé. Même principe que le * correctif input[type="color"] juste au-dessus (sortir un type précis de la * règle générale), mais par sélecteur dédié pour ne toucher QUE les 3 * contrôles concernés. * * Correctif (suite), retour Chloé — "je veux des checkboxes des vrai cases * à cocher pour ces deux parties" (captures : toujours cassé sur "Les plus * populaires" et Tarification, mais plus sur Thème). Cause : erreur de * spécificité CSS ci-dessous à la première passe — ".tpd-featured-service-checkbox" * et ".tpd-pricing-mode" seules (une classe = spécificité 0,1,0) sont en * réalité MOINS spécifiques que ".tpd-card input" (classe+élément = 0,1,1, * voir plus haut), qui continuait donc à l'emporter et à leur appliquer * appearance:none malgré cette règle. Seul ".tpd-theme-card input[type=radio]" * (0,2,1, plus spécifique) avait réellement pris effet — d'où la correction * partielle. Les deux sélecteurs corrigés ci-dessous en les faisant pointer * sur l'élément lui-même (input.classe = classe+élément = 0,1,1 * *descendant de* .tpd-card répété = 0,2,1) pour l'emporter sans ambiguïté, * quel que soit l'ordre des règles dans ce fichier. accent-color ajouté en * plus : une case/un bouton radio natif sans lui reste correct mais minuscule * et gris très discret sur la plupart des navigateurs — accent-color les * dessine dans la couleur de la marque (--tpd-accent) une fois cochés, pour * un rendu qui se voit clairement comme "une vraie case à cocher". */ /** * 77e vague, retour Chloé — "j'ai le même soucis avec cette partie dans * formations repère si d'autres pages sont concernées" (capture : "Ces * frais sont..." de Formations > Frais supplémentaires). Passage en revue * de TOUTES les cases à cocher/boutons radio natifs du dashboard (tous les * fichiers templates/view-*.php) pour ne plus avoir à corriger ça page par * page à chaque signalement : * - Déjà protégés, PAS concernés : tous les .tpd-toggle-row/.tpd-toggle-switch * (interrupteurs à bascule), .tpd-day-checkbox (sélecteurs de jours/équipe * en "pastilles" — jours de la semaine, équipe assignée à une prestation/ * formation), .tpd-color-swatch, .tpd-palette-swatch-input et * .tpd-star-rating — ces 6 composants cachent déjà eux-mêmes leur * natif (opacity:0/position:absolute) et dessinent LEUR PROPRE indicateur * (fond, pastille, étoile...) : aucun rapport avec le bug ci-dessus. * - RÉELLEMENT concernés (mêmes symptômes, même cause que .tpd-pricing-mode/ * .tpd-featured-service-checkbox/.tpd-theme-card ci-dessus) et corrigés * ici : "Ces frais sont..." (Formations, signalé par Chloé — nouvelle * classe .tpd-visible-radio, voir view-trainings.php), "Seul(e)"/"À * plusieurs" (Prestations > réservation groupée — .tpd-booking-mode, * oublié lors du premier correctif alors qu'il partage EXACTEMENT le même * balisage .tpd-radio-option que .tpd-pricing-mode juste à côté dans le * même formulaire), "Emplacement de la photo" (Mon site > À propos — * nouvelle classe .tpd-visible-radio, voir view-minisite.php) et "Retirer * la photo" (Fidélité — nouvelle classe .tpd-visible-checkbox, voir * view-loyalty.php). */ .tpd-card input.tpd-featured-service-checkbox, .tpd-card input.tpd-pricing-mode, .tpd-card input.tpd-booking-mode, .tpd-card input.tpd-visible-radio, .tpd-card input.tpd-visible-checkbox, .tpd-theme-card input[type="radio"] { appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; border: none; padding: 0; background: none; border-radius: 0; width: 18px; height: 18px; accent-color: var(--tpd-accent); cursor: pointer; flex-shrink: 0; } .tpd-card textarea { min-height: 60px; resize: vertical; } .tpd-field-row { display: flex; gap: 12px; } /* item #165 (retour Chloé) — "les balises fin date et heures et places [...] sortent du bloc" : le fix #124/#127 ci-dessous (flex-wrap sur .tpd-field-row-inline) supposait que le navigateur descend le min-content de ce flex-wrap imbriqué jusqu'au label parent — un comportement de dimensionnement de flexbox imbriqué qui varie trop d'un navigateur à l'autre pour qu'on puisse compter dessus. "min-width: 0" ici force le label (et donc tout ce qu'il contient) à accepter de rétrécir sous la largeur de la carte plutôt que de déborder — le fix standard et fiable pour un enfant flex trop large ; le flex-wrap imbriqué ne sert plus alors qu'à décider OÙ l'heure repasse sous la date. */ .tpd-field-row label { flex: 1; min-width: 0; } /* item #124/#127 — date + heure côte à côte À L'INTÉRIEUR d'une étiquette (Formations > Début/Fin), pas empilées comme le reste d'un ".tpd-card label" (flex column). Un natif refuse de rétrécir sous ~110-130px selon le navigateur (le contenu interne — segments jour/mois/année, icône — a un plancher que "min-width: 0" ne peut pas forcer) : dans la colonne étroite ".tpd-col-side" (min-width: 300px, moins le padding de la carte), les deux forcés côte à côte pouvaient dépasser le cadre de la carte (item #127 : "des balises sortent du cadre"). flex-wrap laisse l'heure repasser sous la date dès que la place manque, plutôt que de déborder — cette classe reste volontairement séparée de ".tpd-field-row" : elle ne repasse jamais en COLONNE via la media query plus bas (Début/Fin, eux, en ont besoin), elle s'adapte seule via ce wrap. */ .tpd-field-row-inline { display: flex; flex-wrap: wrap; gap: 8px; } .tpd-field-row-inline input { flex: 1 1 110px; min-width: 0; } .tpd-form-note { font-size: 12px; color: var(--tpd-muted); margin-top: 14px; } .tpd-form-note a { color: var(--tpd-accent); } /** * item #313 (15e vague, retour Chloé) — "Bloc ajout/modification de * prestations [...] mets les titres en gras (nom, catégorie, description…)". * Scopé à ".tpd-service-form" (nouvelle classe posée sur le
du * bloc ajout/modification de view-services.php) plutôt qu'à ".tpd-card * label" directement : cette dernière est partagée par TOUS les * formulaires du dashboard (Fidélité, Suppléments, Codes promo, Équipe, * Formations…), que Chloé n'a pas demandé à changer — un ".tpd-card * label { font-weight }" global aurait alourdi visuellement des pages non * concernées par ce retour. */ .tpd-service-form label, .tpd-service-form .tpd-radio-label { font-weight: 700; } /* item #313 — la plupart des champs vivent DANS leur