/* Espace cabinet — chargé APRÈS styles.css, dont il réutilise les variables de charte et les composants (.bouton, .carte, .message, .aide…). Seule la mise en page change : le véto travaille au clavier sur un grand écran, pas au pouce sur un téléphone. Navigation latérale permanente plutôt que barre basse, et formulaires plus denses. */ /* styles.css passe le en grille 230px/1fr au-delà de 1024 px pour la mise en page desktop de l'espace client — et depuis la « coquille d'application », il fige aussi sa hauteur (height: 100vh + overflow: hidden, seule la zone de contenu défile). L'espace cabinet gère lui-même ses colonnes via .application : on annule la grille ET le gel de hauteur, sans quoi la page véto ne défile plus — le bas devient inaccessible. */ body.veto { display: block; /* Pas de barre de navigation basse ici — mais en plein écran, la barre d'accueil de l'iPhone mangerait la dernière ligne de la page. */ padding-bottom: var(--zone-sure-bas); height: auto; overflow: visible; } .application { display: flex; width: 100%; min-height: 100vh; } /* --- Panneau répertoire (facultatif, lié au champ téléphone) --- */ .ligne-libelle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .lien-repertoire { border: 0; background: transparent; padding: 4px 0; font-family: inherit; font-size: 13px; color: var(--olive-fonce); text-decoration: underline; cursor: pointer; } .panneau-repertoire { margin-top: 10px; padding: 12px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit, 10px); } .panneau-repertoire input[type='search'] { width: 100%; box-sizing: border-box; margin-bottom: 10px; } .liste-repertoire { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .ligne-repertoire { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; text-align: left; cursor: pointer; } .ligne-repertoire:hover { background: var(--olive-clair); } /* --- Suggestions de clients --- La liste flotte AU-DESSUS du reste du formulaire : posée dans le flux, elle pousserait les champs à chaque frappe. */ .champ-suggestions { position: relative; } .suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit, 10px); box-shadow: 0 8px 24px rgba(44, 44, 44, 0.12); max-height: 260px; overflow-y: auto; } .suggestion { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .suggestion:hover, .suggestion.surligne { background: var(--olive-clair); } .suggestion-nom { font-weight: 500; font-size: 14px; } .suggestion-detail { font-size: 13px; color: var(--texte-doux); } /* La liste des documents déposés : une ligne par fichier, empilées. */ .fichiers-liste { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; } /* Fichier choisi + catégorie côte à côte, alignés au centre de la zone. */ .fichier-ligne { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .fichier-ligne .fichier-choisi { margin: 0; } .categorie-rapide { padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--carte); color: var(--texte); font-family: inherit; font-size: 13px; cursor: pointer; } /* Volet I : le titre libre d'un fichier, dans la même veine que la catégorie */ .titre-rapide { padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--carte); color: var(--texte); font-family: inherit; font-size: 13px; min-width: 160px; } /* La croix qui retire le fichier choisi : cible de 24px minimum, visible sans crier. */ .fichier-retirer { border: 0; background: transparent; color: var(--olive-fonce); font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .fichier-retirer:hover { background: rgba(74, 87, 56, 0.15); } /* --- Barre latérale --- */ .barre-laterale { width: 240px; flex-shrink: 0; background: var(--carte); border-right: 1px solid var(--bordure); /* Colonne de gauche : en paysage sur un téléphone, c'est elle qui touche l'encoche. Le haut la concerne aussi, la colonne montant jusqu'au bord. */ padding: calc(24px + var(--zone-sure-haut)) 16px 24px calc(16px + var(--zone-sure-gauche)); display: flex; flex-direction: column; gap: 24px; } .marque-nom { margin: 0; font-size: 17px; font-weight: 600; color: var(--olive-fonce); } .marque-cabinet { margin: 4px 0 0; font-size: 13px; color: var(--texte-doux); } .navigation-laterale { display: flex; flex-direction: column; gap: 4px; /* Elle occupe toute la hauteur libre pour que « Réglages », qui vit désormais dedans, puisse se laisser tomber au bas de la colonne. Le commutateur, lui, reste épinglé sous elle par `.pied-laterale`. */ flex: 1; } /* « Réglages » est un onglet, mais il ne se lit pas comme les six autres : il ne s'utilise presque jamais. Il descend donc au bas de la colonne, là où il était avant de rejoindre cette barre — et il y garde sa largeur de contenu, `align-self` empêchant l'étirement que le mode colonne applique par défaut. La marge négative vaut EXACTEMENT l'écart de colonne de la barre (24 px), et c'est sa raison d'être : ce bouton étant passé de l'autre côté de cet écart, il faut le lui rendre pour qu'il retrouve les 8 px qui le séparaient du commutateur. Ce n'est pas un bricolage, c'est ce qui CONSERVE l'écran d'avant — vérifié position par position, au pixel. */ .onglet-reglages { margin-top: auto; margin-bottom: -24px; align-self: flex-start; } .onglet { appearance: none; border: 0; background: transparent; text-align: left; font: inherit; color: var(--texte); padding: 10px 12px; border-radius: var(--rayon-petit); cursor: pointer; min-height: 44px; } .onglet:hover { background: var(--fond); } .onglet.actif { background: var(--olive-clair); color: var(--olive-fonce); font-weight: 600; } .pied-laterale { margin-top: auto; } /* --- Zone de contenu --- */ .contenu-veto { flex: 1; padding: 32px calc(32px + var(--zone-sure-droite)) 32px 32px; max-width: 720px; } .contenu-veto h1 { margin-top: 0; } .contenu-veto label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 14px; } .contenu-veto input, .contenu-veto select { width: 100%; padding: 10px 12px; font: inherit; min-height: 44px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: var(--carte); color: var(--texte); } .contenu-veto input:focus, .contenu-veto select:focus { outline: 2px solid var(--olive); outline-offset: 1px; } /* --- Zone de dépôt de fichier --- */ .zone-depot { border: 2px dashed var(--bordure); border-radius: var(--rayon); padding: 32px 20px; text-align: center; background: var(--carte); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .zone-depot:hover, .zone-depot:focus-visible, .zone-depot.survol { border-color: var(--olive); background: var(--olive-clair); } .zone-depot-titre { margin: 0 0 4px; font-weight: 600; } .fichier-choisi { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px; background: var(--olive-clair); color: var(--olive-fonce); border-radius: 999px; font-size: 14px; } /* --- Options repliables --- */ .options { margin-top: 20px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 12px 16px; background: var(--carte); } .options summary { cursor: pointer; font-weight: 600; font-size: 14px; } /* --- Répertoire clients --- */ .liste-clients { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .liste-clients li { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .client-nom { margin: 0; font-weight: 600; } .client-detail { margin: 2px 0 0; font-size: 13px; color: var(--texte-doux); } /* --- État d'un envoi (volet K) : lisible d'un coup d'œil, ligne par ligne --- */ .badge-envoi { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; } .badge-annulable { background: #f3e3d3; /* terracotta pâle : la fenêtre de rattrapage est ouverte */ color: #7c5a36; } .badge-definitif { background: #e8ebe3; /* olive pâle : remis, le carnet du client en dispose */ color: #4a5738; } .badge-signale { background: #f6dcda; /* rouge doux : le destinataire dit « pas mon animal » */ color: #8a3d33; } /* --- Déplacement / modification en ligne (rendez-vous et traitements) --- Le formulaire s'ouvre SOUS la ligne concernée : le véto corrige là où il regarde, sans changer d'écran. */ .liste-clients li.ligne-modifiable { flex-wrap: wrap; } .ligne-edition { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--bordure); } .ligne-edition input, .ligne-edition select { margin: 0; width: auto; flex: 1 1 140px; } .ligne-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* --- Écran de configuration : avertissement clé d'API --- */ .avertissement { background: var(--statut-bientot-fond); color: var(--statut-bientot-texte); border-radius: var(--rayon-petit); padding: 12px 16px; font-size: 14px; margin: 16px 0; } /* --- Récapitulatif d'envoi --- */ .recapitulatif { margin: 16px 0 24px; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14px; } .recapitulatif dt { color: var(--texte-doux); } .recapitulatif dd { margin: 0; font-weight: 600; } /* --- Écrans étroits : la latérale repasse au-dessus du contenu --- */ @media (max-width: 800px) { .application { flex-direction: column; } /* La colonne devient un bandeau de DEUX rangées. Rangée 1 : l'identité du cabinet à gauche, « Réglages » et le commutateur à droite — le schéma de l'en-tête du carnet, et la place universelle des réglages. Rangée 2 : les onglets, sur TOUTE la largeur. DÉFAUT CORRIGÉ LE 11 AOÛT, et il était en production. Les trois blocs se partageaient la même rangée : `.navigation-laterale` recevait 111 px pour 921 px d'onglets (mesuré en 375 px), pendant que « Réglages » et le commutateur en occupaient 220. La navigation principale tenait donc dans une fenêtre trois fois plus étroite que les commandes secondaires — en pratique, un ASV sur son téléphone ne pouvait plus changer d'onglet, et « Dossiers partagés », avant-dernier, était le premier à disparaître. L'ORDRE FAIT TOUT ICI : en `wrap`, les éléments remplissent les lignes dans l'ordre d'affichage. Sans `order`, la navigation en pleine largeur renverrait le pied à une TROISIÈME rangée, et le bandeau mangerait un cinquième de l'écran à demeure. */ .barre-laterale { width: 100%; border-right: 0; border-bottom: 1px solid var(--bordure); /* Devenue le BANDEAU DU HAUT, c'est elle qui reçoit l'encoche dans l'application — le rôle que tient l'en-tête dans le carnet. */ padding: calc(16px + var(--zone-sure-haut)) calc(16px + var(--zone-sure-droite)) 16px calc(16px + var(--zone-sure-gauche)); flex-flow: row wrap; align-items: center; gap: 12px; } .marque { order: 1; /* `flex-basis: 0` et non `auto`, et ce détail décide de tout : en `wrap`, une ligne se remplit d'après la taille NATURELLE de chaque élément, et seulement ENSUITE ses occupants rétrécissent. Avec `auto`, la marque pesait sa largeur de contenu, la somme dépassait l'écran, et le commutateur partait à la ligne suivante. Avec 0, elle ne pèse rien au moment du découpage, puis prend tout ce qui reste. `min-width: 0` pour la même raison à l'échelle du texte : sans lui, un nom de cabinet long refuse de rétrécir et pousse le commutateur dehors. */ flex: 1 1 0; min-width: 0; } /* Le logo porte déjà la marque, et il reste cliquable. Le nom du CABINET, lui, est l'information utile — on est au comptoir, on veut savoir au nom de qui on envoie. Même arbitrage qu'au carnet, où « VetoDossier » s'efface sous 480 px. */ .marque-nom { display: none; } .marque-cabinet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rangée 1, à droite : le commutateur, comme au carnet. */ .pied-laterale { order: 2; margin-top: 0; flex: 0 0 auto; } .navigation-laterale { order: 3; /* LA RANGÉE ENTIÈRE — c'est tout l'objet du correctif. `100%` fait aussi office de retour à la ligne : aucun élément ne peut la rejoindre. */ flex: 1 1 100%; flex-direction: row; overflow-x: auto; gap: 8px; } /* Les épinglages du mode colonne n'ont plus de sens couché : sans cette remise à zéro, la marge négative décalerait la rangée d'onglets vers le haut et « Réglages » se collerait au bord gauche au lieu de suivre les autres. */ .onglet-reglages { margin-top: 0; margin-bottom: 0; align-self: auto; } .onglet { white-space: nowrap; flex-shrink: 0; } .contenu-veto { padding: 20px calc(16px + var(--zone-sure-droite)) 20px calc(16px + var(--zone-sure-gauche)); max-width: none; } } /* --- Logo dans la barre latérale --- */ /* La marque et le nom du cabinet forment un bloc : le logo à gauche, les deux lignes de texte à droite. Le véto doit voir d'un coup d'œil sous quelle identité il envoie — c'est la ligne du dessous qui compte pour lui. */ .marque { display: flex; align-items: center; gap: 11px; } .marque-logo { display: block; flex-shrink: 0; border-radius: 7px; } /* La zone de dépôt de la file « à rattacher » (dossier partagé, étape 5) : une cible de glisser-déposer se reconnaît à son pointillé — et s'allume quand un fichier la survole, sinon on lâche à côté sans le savoir. */ .zone-depot { border: 2px dashed var(--bordure); border-radius: 8px; padding: 18px; margin: 0 0 12px; background: var(--fond); transition: border-color 0.15s ease, background 0.15s ease; } .zone-depot.survol { border-color: var(--accent); background: #faf3ec; } /* Le QR de salle d'attente réutilise la charte du QR d'urgence côté client. */ .urgence-qr svg { max-width: 260px; height: auto; display: block; } /* --------------------------------------------------------------------------- Le commutateur d'espace dans la barre latérale (application installable, étape 1). Il remplace le lien « ← Espace client » qui vivait ici : même geste qu'au carnet, pour que passer d'un espace à l'autre s'apprenne une seule fois. --------------------------------------------------------------------------- */ .commutateur-lateral { display: block; margin-top: 8px; } .commutateur-lateral .commutateur-bouton { width: 100%; justify-content: space-between; } /* Le commutateur est en bas de la barre latérale : son menu s'ouvre vers le HAUT, sinon il sortirait sous le pli de l'écran. */ .commutateur-lateral .commutateur-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 0; } @media (max-width: 800px) { /* Sous 800 px la barre latérale passe EN HAUT de l'écran et s'étale en ligne : le menu doit alors redescendre, à l'inverse du cas bureau. */ .commutateur-lateral { margin-top: 0; } /* PLUS DE RÈGLE `.pied-laterale` ICI, et c'est volontaire. Elle alignait « Réglages » et le commutateur côte à côte ; depuis le 11 août, le pied ne porte plus QUE le commutateur — « Réglages » a rejoint la barre d'onglets. La règle n'a donc plus d'objet, et la remettre serait doublement fâcheux : elle vient APRÈS dans le fichier, donc elle gagnerait en silence sur la mise en page ci-dessus. */ .commutateur-lateral .commutateur-menu { top: calc(100% + 6px); bottom: auto; min-width: 190px; /* `left: auto` EST INDISPENSABLE, et son absence était un défaut : la règle du grand écran pose `left: 0; right: 0` pour étirer le menu à la largeur de la colonne (240 px). Sur un téléphone, le bouton ne fait que 122 px, et le `min-width` ci-dessus faisait alors grandir le menu VERS LA DROITE depuis son bord gauche — jusqu'à 427 px sur un écran de 375, ce qui sortait le menu de l'écran ET faisait défiler la page en travers. Ancré à droite, il s'ouvre vers l'intérieur. */ left: auto; right: 0; } } /* --------------------------------------------------------------------------- L'animal de l'envoi : choisi, jamais deviné (10 août 2026) La liste vit HORS du repli « Préciser l'animal » : enfermée dedans, elle n'était pas vue, et le véto retapait les noms à la main — d'où les doublons. --------------------------------------------------------------------------- */ .animaux-connus { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--bordure); border-left: 3px solid var(--accent); border-radius: var(--rayon-petit, 10px); background: var(--carte); } .animaux-connus-titre { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--olive-fonce); } .animaux-connus .aide { margin-bottom: 0; } /* Le rapprochement proposé — jamais appliqué seul. Le ton reste celui d'une question, pas d'un avertissement : neuf fois sur dix le véto a raison. */ .suggestion-nom { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--rayon-petit, 10px); background: var(--olive-clair); color: var(--olive-fonce); font-size: 14px; line-height: 1.5; } /* Le doublon rendu visible sur l'écran de confirmation. Terracotta et non rouge : il ne s'est rien passé de grave, mais il faut le lire. */ .avertissement-dossier { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: var(--rayon-petit, 10px); background: var(--carte); font-size: 14px; line-height: 1.5; } /* --- Le sélecteur de clinique (11 août 2026) --- Il n'apparaît que pour les personnes rattachées à plusieurs cliniques. Une ligne à lui, jamais glissé dans la rangée des onglets : c'est là que les sept onglets s'étaient retrouvés à 111 px de large, et on ne recommence pas. Masqué, [hidden] le sort du flux : zéro effet pour tous les autres. */ .selecteur-cabinet { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .selecteur-cabinet-libelle { font-size: 13px; color: var(--texte-doux); } .selecteur-cabinet select { min-height: 44px; font-size: 15px; padding: 8px 10px; font-family: inherit; color: var(--texte); background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); max-width: 100%; } /* Tant qu'aucune clinique n'est désignée, les vues ne s'affichent pas : un écran d'envoi visible mais inopérant est une promesse qu'on ne tient pas. */ .vue-en-attente-de-cabinet { display: none !important; } @media (max-width: 800px) { /* Sa propre rangée, comme la marque — surtout pas celle des onglets. */ .selecteur-cabinet { flex-basis: 100%; } } /* Un envoi retiré du carnet : la clinique garde la trace de son acte, mais la ligne doit se lire comme un souvenir, pas comme un envoi vivant. Atténuée, sans geste possible — il n'y a plus rien à annuler. */ .envoi-retire { opacity: 0.72; } /* --------------------------------------------------------------------------- La proposition d'installer l'application de bureau (12 août 2026). LISERÉ OLIVE, PAS TERRACOTTA : le terracotta est réservé à ce qui avertit ou réclame une action. Ceci ne réclame rien — c'est une offre, et elle doit se lire comme telle. La distinction est une signature du produit, pas un détail de couleur. MASQUÉE SUR LES APPAREILS TACTILES : un .dmg ne s'installe pas sur un iPhone, et le trafic mobile domine. La classe `appareil-tactile` est posée sur par app-veto.js depuis navigator.maxTouchPoints — jamais depuis une media query `hover`/`pointer`, qui se trompe sur un iPad muni de son clavier (piège consigné au §6). Conséquence assumée : un portable Windows à écran tactile, qui pourrait pourtant l'installer, ne la verra pas. Il lui reste les Réglages et la page /veterinaires. --------------------------------------------------------------------------- */ .proposition-bureau { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--bordure); border-left: 3px solid var(--olive); border-radius: 10px; background: var(--carte); } .proposition-bureau-titre { margin: 0 0 4px; font-weight: 600; } .proposition-bureau-gestes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; } /* Les liens de téléchargement portent la classe des boutons : sans cela, ils se soulignent comme du texte et perdent leur hauteur de 44 px. */ .proposition-bureau-gestes a { text-decoration: none; } html.appareil-tactile .proposition-bureau { display: none; } /* La croix « Fermer » posée DANS le bandeau d'échec d'envoi (13 août 2026) : sans marge, elle colle au dernier mot du message. */ .message .fichier-retirer { margin-left: 8px; vertical-align: middle; }