/* Fiche ticket (Ticket/edit.html.twig) : colonne de gauche en cartes simples (client, suivi, note
interne), fil de messages pleine largeur, zone de réponse repliée puis dépliée et collante au
défilement, activité en petites lignes grises. Jetons du thème central. */
@layer components {
/* Page : colonne de gauche à largeur fixe, fil à droite (empilés sous 1280 px). 340 px, puis 360 px dès
1536 px de large (le 1920 px de la version validée donnait 360 px). */
[data-stamina-turbo-region] .ticket-page { --ticket-side: 340px; }
@media (min-width: 1280px) { [data-stamina-turbo-region] .ticket-page { grid-template-columns: var(--ticket-side) minmax(0, 1fr); } }
@media (min-width: 1536px) { [data-stamina-turbo-region] .ticket-page { --ticket-side: 360px; } }
/* ---------- Colonne de gauche : cartes simples (Ticket/toolbar.html.twig) ----------
Qui écrit, le suivi, la note interne : une carte chacun, peu d'éléments, pas de cadres
intérieurs. Les réglages s'éditent en place et s'enregistrent au changement. */
/* L'espacement entre cartes vient du socle (marge d'empilement des cartes d'un formulaire). */
[data-stamina-turbo-region] .ticket-side { display: flex; flex-direction: column; }
/* Titre et outil (Changer, Équipe) restent sur une ligne, même sur une carte étroite. */
[data-stamina-turbo-region] .ticket-card > .card-head { flex-wrap: nowrap; }
[data-stamina-turbo-region] .ticket-card > .card-head .disclosure-title { flex-basis: 0; }
/* Le contenu de la carte sert d'ancre au widget masqué d'un champ en place (menu, recherche). */
[data-stamina-turbo-region] .ticket-card > .card-body { position: relative; }
[data-stamina-turbo-region] .ticket-client { position: relative; }
/* Nom du client en titre de carte : lien discret vers la fiche, tronqué si trop long. */
[data-stamina-turbo-region] .ticket-card__name { color: inherit; &:hover { color: var(--color-accent); } }
[data-stamina-turbo-region] .ticket-card__hint { display: inline-flex; align-items: center; gap: .375rem; color: var(--color-muted); font-size: .78125rem }
/* Adresse e-mail copiable au clic : discrète, soulignée au survol. */
[data-stamina-turbo-region] .ticket-copy {
max-width: 100%;
padding: 0;
border: 0;
background: none;
color: var(--color-muted);
font-size: inherit;
cursor: pointer;
}
[data-stamina-turbo-region] .ticket-copy:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* ---------- Fil : zone de réponse puis messages, tous frères (les flux Turbo insèrent les
nouveaux éléments juste après la zone de réponse) ---------- */
[data-stamina-turbo-region] .ticket-thread { position: relative; display: flex; flex-direction: column; gap: .875rem; }
/* Repère invisible posé par le contrôleur de réponse en tête du fil, observé pour savoir si la zone est collée. */
[data-stamina-turbo-region] .ticket-thread__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
[data-stamina-turbo-region] .ticket-thread > turbo-frame#stamina-ticket-message-add { display: block; margin-bottom: .375rem; }
/* Collante au défilement, sur grand écran seulement. Une fois collée (is-stuck, posée par le
contrôleur), un bandeau couleur de page masque les cartes qui défilent au-dessus d'elle ; il
s'arrête à mi-hauteur de la carte pour que les messages passent sous la carte flottante. */
@media (min-width: 1024px) {
[data-stamina-turbo-region] .ticket-thread > turbo-frame#stamina-ticket-message-add {
position: sticky;
top: 1.25rem;
z-index: 20;
}
[data-stamina-turbo-region] .ticket-thread > turbo-frame#stamina-ticket-message-add.is-stuck::before {
content: "";
position: absolute;
z-index: -1;
left: -.75rem;
right: -.75rem;
top: -1.25rem;
bottom: 50%;
background: var(--color-canvas);
pointer-events: none;
}
[data-stamina-turbo-region] .ticket-thread > turbo-frame#stamina-ticket-message-add.is-stuck .ticket-reply {
box-shadow: 0 12px 32px -12px rgb(29 21 49 / .28), var(--shadow-card);
}
[data-stamina-turbo-region] .ticket-thread > turbo-frame#stamina-ticket-message-add.is-stuck .ticket-reply.is-open {
box-shadow: 0 12px 32px -12px rgb(29 21 49 / .28), var(--shadow-card);
}
}
/* ---------- Zone de réponse : repliée, s'agrandit en douceur au clic ----------
Astuce grid-template-rows 0fr → 1fr : la hauteur s'anime sans la connaître à l'avance.
La barre repliée s'efface, puis les blocs de l'éditeur apparaissent l'un après l'autre. */
[data-stamina-turbo-region] .ticket-reply {
--ticket-ease: cubic-bezier(.2, .8, .2, 1);
position: relative;
margin-bottom: 0;
transition: box-shadow .3s var(--ticket-ease);
}
/* Ouverte : la carte se soulève (ombre portée), sans liseré de couleur. */
[data-stamina-turbo-region] .ticket-reply.is-open { box-shadow: 0 10px 30px -12px rgb(29 21 49 / .22), var(--shadow-card); }
/* Barre repliée et zone dépliée occupent la MÊME cellule : la barre s'estompe pendant que la zone grandit et que
ses blocs apparaissent (fondu enchaîné, la hauteur suit le plus haut des deux : aucun trou, « Répondre » ne
disparaît jamais avant que le contenu arrive). */
[data-stamina-turbo-region] .ticket-reply { display: grid; }
/* Un fichier survole la page : la réponse s'entoure pour montrer qu'on peut l'y lâcher. */
[data-stamina-turbo-region] .ticket-reply.is-file-drop-target { outline: 2px solid var(--color-accent); outline-offset: 2px; }
[data-stamina-turbo-region] .ticket-reply > :is(.ticket-reply__fold, .ticket-reply__open) { grid-area: 1 / 1; min-width: 0; }
[data-stamina-turbo-region] .ticket-reply__fold { transition: opacity .3s ease .08s, visibility 0s; }
[data-stamina-turbo-region] .ticket-reply__fold > div { overflow: hidden; border-radius: inherit; }
[data-stamina-turbo-region] .ticket-reply.is-open .ticket-reply__fold { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s .22s; }
/* Ligne repliée : avatar et barre de même hauteur (40 px) ; toute la ligne est cliquable et ouvre la réponse. */
[data-stamina-turbo-region] .ticket-reply__closed { --ticket-reply-bar: 2.5rem; display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; cursor: pointer; }
[data-stamina-turbo-region] .ticket-reply__me { display: none; flex: none; }
@media (min-width: 768px) { [data-stamina-turbo-region] .ticket-reply__me { display: inline-flex; } }
[data-stamina-turbo-region] .ticket-reply__me img,
[data-stamina-turbo-region] .ticket-reply__me .avatar { width: var(--ticket-reply-bar); height: var(--ticket-reply-bar); border-radius: 50%; }
[data-stamina-turbo-region] .ticket-reply__bar {
position: relative; display: flex; flex: 1; align-items: center; gap: .75rem; min-width: 0; height: var(--ticket-reply-bar); padding: 0 1rem;
border-radius: 999px; background: var(--color-tile); box-shadow: inset 0 0 0 1px var(--color-field); transition: box-shadow .15s, background-color .15s;
}
[data-stamina-turbo-region] .ticket-reply__closed:hover .ticket-reply__bar,
[data-stamina-turbo-region] .ticket-reply__bar:focus-within { box-shadow: inset 0 0 0 1px var(--color-field-hover); }
[data-stamina-turbo-region] .ticket-reply__placeholder {
flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--color-ink);
font-size: .875rem; text-overflow: ellipsis; cursor: pointer;
}
[data-stamina-turbo-region] .ticket-reply__placeholder::placeholder { color: var(--color-ink-2); opacity: .7; }
[data-stamina-turbo-region] .ticket-reply__placeholder:focus { outline: none; }
/* Repère de l'action, à droite dans la barre : souligné au survol de la ligne. */
[data-stamina-turbo-region] .ticket-reply__cue { display: none; flex: none; color: var(--color-ink-2); font-size: .8125rem; font-weight: 600; }
@media (min-width: 768px) { [data-stamina-turbo-region] .ticket-reply__cue { display: inline-flex; } }
[data-stamina-turbo-region] .ticket-reply__cue > span { display: inline-flex; align-items: center; gap: .4375rem; }
[data-stamina-turbo-region] .ticket-reply__closed:hover .ticket-reply__cue { color: var(--color-ink); }
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__cue-reply,
[data-stamina-turbo-region] .ticket-reply:not(.has-draft) .ticket-reply__cue-resume { display: none; }
/* Réponse en cours repliée : la barre passe en jaune et montre le brouillon (étiquette, début du texte, fichiers).
Le champ reste là, transparent, sur toute la barre : focus clavier et clic. */
[data-stamina-turbo-region] .ticket-reply__draft { display: none; }
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__bar { padding-left: .375rem; background: var(--color-warning-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 35%, transparent); }
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__closed:hover .ticket-reply__bar,
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__bar:focus-within { box-shadow: inset 0 0 0 1px var(--color-warning); }
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__placeholder { position: absolute; inset: 0; z-index: 1; width: 100%; border-radius: inherit; opacity: 0; }
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__draft { display: flex; flex: 1; align-items: center; gap: .75rem; min-width: 0; }
[data-stamina-turbo-region] .ticket-reply.has-draft .ticket-reply__cue { color: var(--color-warning); }
[data-stamina-turbo-region] .ticket-reply__draft-tag { display: inline-flex; flex: none; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .625rem; border-radius: 999px; background: var(--color-warning); color: #fff; font-size: .75rem; font-weight: 700; }
[data-stamina-turbo-region] .ticket-reply__draft-text { flex: 1; min-width: 0; overflow: hidden; color: var(--color-ink); font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
[data-stamina-turbo-region] .ticket-reply__draft-text.is-empty { color: var(--color-ink-2); font-weight: 500; font-style: italic; }
[data-stamina-turbo-region] .ticket-reply__draft-meta { display: inline-flex; flex: none; align-items: center; gap: .375rem; color: var(--color-ink-2); font-size: .75rem; font-weight: 600; }
[data-stamina-turbo-region] .ticket-reply__draft-meta[hidden] { display: none; }
[data-stamina-turbo-region] .ticket-reply__open { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ticket-ease), visibility 0s .42s; }
[data-stamina-turbo-region] .ticket-reply__inner { min-height: 0; overflow: hidden; border-radius: inherit; }
[data-stamina-turbo-region] .ticket-reply.is-open .ticket-reply__open { grid-template-rows: 1fr; transition: grid-template-rows .42s var(--ticket-ease), visibility 0s; }
/* Une fois dépliée, on lève le overflow:hidden pour que les menus (modèles, temps passé…) débordent. */
[data-stamina-turbo-region] .ticket-reply.is-settled .ticket-reply__inner { overflow: visible; }
[data-stamina-turbo-region] .ticket-reply__inner > * { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .35s var(--ticket-ease); }
[data-stamina-turbo-region] .ticket-reply.is-open .ticket-reply__inner > * { opacity: 1; transform: none; }
[data-stamina-turbo-region] .ticket-reply.is-open .ticket-reply__inner > * { transition-delay: .06s; }
[data-stamina-turbo-region] .ticket-reply.is-open .ticket-reply__inner > :nth-child(3) { transition-delay: .1s; }
[data-stamina-turbo-region] .ticket-reply.is-open .ticket-reply__inner > :nth-child(4) { transition-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
[data-stamina-turbo-region] .ticket-reply,
[data-stamina-turbo-region] .ticket-reply * { transition: none !important; }
}
/* Pliée, la partie ouverte ne doit ni se voir ni se tabuler. */
[data-stamina-turbo-region] .ticket-reply:not(.is-open) .ticket-reply__open { visibility: hidden; }
/* Destinataires : champ intégré à la ligne, façon messagerie, sans aplat ni marge. */
[data-stamina-turbo-region] .ticket-reply__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem .5rem;
min-height: 3.125rem;
padding: .25rem 1rem .25rem 1.25rem;
border-bottom: 1px solid var(--color-line);
}
/* Cc et Cci côte à côte, séparés par un filet ; empilés sous 768 px. */
[data-stamina-turbo-region] .ticket-reply__row--split { gap: 0; padding: 0; }
[data-stamina-turbo-region] .ticket-reply__half { display: flex; flex: 1 1 0; align-items: center; gap: .25rem .5rem; min-width: 0; min-height: 3.125rem; padding: .25rem 1rem .25rem 1.25rem; }
[data-stamina-turbo-region] .ticket-reply__half + .ticket-reply__half { border-left: 1px solid var(--color-line); }
[data-stamina-turbo-region] .ticket-reply__half + .ticket-reply__half > .ticket-reply__label { width: auto; }
/* Champ de saisie à la suite des adresses déjà choisies, pas sur une ligne à part. */
[data-stamina-turbo-region] .ticket-reply__field .stamina-ui-select-box.is-multiple { flex-wrap: wrap; }
[data-stamina-turbo-region] .ticket-reply__field .stamina-ui-select-box.is-multiple .stamina-ui-select-search { flex: 1 1 6rem; width: auto; min-width: 6rem; }
@media (max-width: 767.98px) {
[data-stamina-turbo-region] .ticket-reply__row--split { flex-direction: column; align-items: stretch; }
[data-stamina-turbo-region] .ticket-reply__half + .ticket-reply__half { border-top: 1px solid var(--color-line); border-left: 0; }
[data-stamina-turbo-region] .ticket-reply__half + .ticket-reply__half > .ticket-reply__label { width: 3.5rem; }
}
[data-stamina-turbo-region] .ticket-reply__label { flex: none; width: 3.5rem; color: var(--color-muted); font-size: .8125rem; }
/* Objet : tel qu'il partira (préfixe de classification compris), en lecture seule. */
[data-stamina-turbo-region] .ticket-reply__subject { flex: 1; min-width: 0; overflow: hidden; color: var(--color-ink); font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
[data-stamina-turbo-region] .ticket-reply__field { flex: 1 1 0; min-width: 8rem; }
[data-stamina-turbo-region] .ticket-reply__field :is(.form-row, .field, .form-group) { margin: 0; }
/* Destinataires : le sélecteur se fond dans la ligne (ni cadre, ni flèche). */
[data-stamina-turbo-region] .ticket-reply__field :is(.input-group, .stamina-ui-select-box) { min-height: 0; border: 0; background: transparent; box-shadow: none; }
[data-stamina-turbo-region] .ticket-reply__field .stamina-ui-select-search { padding-left: 0; border: 0; background: transparent; box-shadow: none; }
[data-stamina-turbo-region] .ticket-reply__field .stamina-ui-select-search::placeholder { color: var(--color-muted); }
[data-stamina-turbo-region] .ticket-reply__field .stamina-ui-select-caret { display: none; }
[data-stamina-turbo-region] .ticket-reply__row-tools { display: flex; flex: none; align-items: center; gap: .75rem; margin-left: auto; }
/* Éditeur : un seul bord gauche à 20 px pour toute la carte. */
[data-stamina-turbo-region] .ticket-reply__editor { position: relative; padding: .25rem 0 0; }
/* Modèle : dans le coin haut droit du message, à 12 px sous la barre d'outils de l'éditeur (52 px avec le haut de la zone), à 16 px du bord comme le texte. */
[data-stamina-turbo-region] .ticket-reply__corner { position: absolute; z-index: 2; top: calc(3.25rem + .75rem); right: 1rem; display: flex; gap: .375rem; }
[data-stamina-turbo-region] .ticket-reply__corner:empty { display: none; }
[data-stamina-turbo-region] .ticket-reply__editor .tox-tinymce { border: 0 !important; border-radius: 0; }
[data-stamina-turbo-region] .ticket-reply__hint { padding: 0 1.25rem .5rem; font-size: .75rem; }
/* Fichiers joints : pastilles sur la ligne Fichiers, puis « Ajouter… ». Une ligne de collection sans fichier (prototype vide) n'est pas montrée. */
[data-stamina-turbo-region] .ticket-reply__row--files { padding-top: .5rem; padding-bottom: .5rem; }
[data-stamina-turbo-region] .ticket-reply__files { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .375rem; min-width: 0; }
[data-stamina-turbo-region] .ticket-reply__add { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .5rem; border: 0; border-radius: .5rem; background: none; color: var(--color-muted); font-size: .8125rem; cursor: pointer; }
[data-stamina-turbo-region] .ticket-reply__add:is(:hover, [aria-expanded="true"]) { background: var(--color-tile); color: var(--color-ink); }
[data-stamina-turbo-region] :is(.ticket-reply__attachments, .ticket-reply__old-chips, .ticket-reply__draft-files) { display: contents; }
[data-stamina-turbo-region] .ticket-reply__attachments > * { display: contents; }
[data-stamina-turbo-region] .ticket-reply__attachments .file-picker:has([data-stamina-ui-file-input-target="clearButton"][hidden]) { display: none; }
[data-stamina-turbo-region] :is(.ticket-reply__attachments .file-picker, .ticket-reply__chip) {
display: inline-flex; align-items: center; gap: .375rem; width: auto; max-width: 16rem; height: 1.875rem; min-height: 0;
padding: 0 .25rem 0 .625rem; border: 0; border-radius: .5rem; background: var(--color-tile); box-shadow: none;
color: var(--color-ink); font-size: .78125rem; font-weight: 600;
}
[data-stamina-turbo-region] .ticket-reply__attachments .file-picker {
> .addon:first-child { display: none; }
> .input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
> .input::before { content: "\f0c6"; margin-right: .375rem; font: var(--fa-font-light); color: var(--color-muted); }
> button.addon { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; padding: 0; border: 0; border-radius: .375rem; background: none; color: var(--color-muted); }
> button.addon:hover { background: var(--color-tile-2); color: var(--color-ink); }
}
[data-stamina-turbo-region] .ticket-reply__chip > .fal { color: var(--color-muted); }
[data-stamina-turbo-region] .ticket-reply__chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-stamina-turbo-region] .ticket-reply__chip-remove { display: grid; flex: none; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: .375rem; color: var(--color-muted); cursor: pointer; }
[data-stamina-turbo-region] .ticket-reply__chip-remove:hover { background: var(--color-tile-2); color: var(--color-ink); }
/* Pied : outils nommés (fichiers, modèles, temps passé, messages cités…) à gauche, envoi à droite. Sous la largeur utile, l'envoi passe
à la ligne (calé à droite) et les libellés secondaires se replient sur leur icône. */
[data-stamina-turbo-region] .ticket-reply__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
padding: .625rem .75rem .625rem .625rem;
border-top: 1px solid var(--color-line);
}
[data-stamina-turbo-region] .ticket-reply__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; min-width: 0; }
[data-stamina-turbo-region] .ticket-reply__tool {
display: inline-flex;
align-items: center;
gap: .4375rem;
height: 2.125rem;
padding: 0 .625rem;
border: 0;
border-radius: .5rem;
background: none;
color: var(--color-ink-2);
font-size: .78125rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background-color .12s, color .12s;
}
[data-stamina-turbo-region] .ticket-reply__tool > .fal { color: var(--color-muted); font-size: .875rem; }
[data-stamina-turbo-region] .ticket-reply__tool > .ticket-reply__caret { margin-left: -.125rem; font-size: .625rem; }
[data-stamina-turbo-region] .ticket-reply__tool:is(:hover, [aria-expanded="true"]) { background: var(--color-tile); color: var(--color-ink); > .fal { color: var(--color-ink-2); } }
[data-stamina-turbo-region] .ticket-reply__tool.ticket-reply__tool--framed { height: 1.875rem; border: 1px solid var(--color-line); background: var(--color-surface); }
[data-stamina-turbo-region] .ticket-reply__tool .badge { min-width: 1.125rem; height: 1.125rem; padding: 0 .3125rem; font-size: .625rem; line-height: 1; justify-content: center; }
[data-stamina-turbo-region] .ticket-reply__send { display: flex; flex: none; align-items: center; gap: .5rem; margin-left: auto; }
[data-stamina-turbo-region] .ticket-reply__split { display: inline-flex; }
[data-stamina-turbo-region] .ticket-reply__split > .btn:not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
[data-stamina-turbo-region] .ticket-reply__split > span .btn { border-left: 1px solid rgb(255 255 255 / .18); border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Classification obligatoire pas encore choisie : en rouge ; secouée si l'envoi est tenté. */
[data-stamina-turbo-region] .ticket-reply__tool.is-missing { background: var(--color-danger-soft); color: var(--color-danger); > .fal { color: var(--color-danger); } }
[data-stamina-turbo-region] .ticket-reply__tool.is-invalid { animation: ticket-reply-shake .32s ease; }
@keyframes ticket-reply-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
[data-stamina-turbo-region] .ticket-reply__error { width: 100%; padding: 0 .625rem; color: var(--color-danger); font-size: .75rem; }
/* Recherche ajoutée par un bundle (pièce commerciale) : déclencheur invisible, ouvert depuis le menu Fichiers. */
[data-stamina-turbo-region] .ticket-reply__lookup { position: relative; width: 0; height: 0; }
[data-stamina-turbo-region] .ticket-reply__lookup-trigger { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Menus du pied : cases et boutons radio du socle (l'explication sous l'intitulé vient du ui-bundle). */
[data-stamina-turbo-region] .ticket-reply__menu { min-width: 17.5rem; max-width: 22rem; }
[data-stamina-turbo-region] .ticket-reply__menu label.menu-link:has(:checked) { background: var(--color-tile); color: var(--color-ink); }
[data-stamina-turbo-region] .ticket-reply__check { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
[data-stamina-turbo-region] .ticket-reply__old { max-height: 14rem; overflow-y: auto; }
[data-stamina-turbo-region] .ticket-reply__old .menu-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
[data-stamina-turbo-region] .ticket-reply__time { width: 19rem; }
[data-stamina-turbo-region] .ticket-reply__time-body { padding: .25rem .625rem .625rem; }
/* « Envoyer en privé » garde son libellé : sur un pied étroit, l'envoi passe à la ligne (calé à droite). Icône seule sur téléphone. */
@media (max-width: 767.98px) {
[data-stamina-turbo-region] .ticket-reply__private-label { display: none; }
}
/* ---------- Messages : une carte par message ----------
Largeur resserrée (--ticket-msg-width) : 65 % du fil, plafonnée à 46 rem ; 82 % sous 1400 px où le fil
est étroit. Reçus, envoyés et notes ont la même largeur : reçus à gauche du fil, envoyés et notes à droite.
Empreinte verticale réduite : en-tête d'une ligne, corps sans hauteur minimale (l'iframe suit son
contenu), pièces jointes et pied sur une ligne compacte. */
[data-stamina-turbo-region] .ticket-thread { --ticket-msg-width: 82%; }
@media (min-width: 1400px) { [data-stamina-turbo-region] .ticket-thread { --ticket-msg-width: 65%; } }
[data-stamina-turbo-region] .ticket-msg { width: 100%; min-width: 0; margin: 0; overflow: hidden; scroll-margin-top: 5.5rem; }
@media (min-width: 768px) {
[data-stamina-turbo-region] .ticket-msg { width: var(--ticket-msg-width); max-width: 46rem; }
[data-stamina-turbo-region] .ticket-msg--us,
[data-stamina-turbo-region] .ticket-msg--private { margin-left: auto; }
}
[data-stamina-turbo-region] .ticket-msg__head { display: flex; align-items: center; gap: .75rem; padding: .625rem .5rem .625rem 1rem; }
[data-stamina-turbo-region] .ticket-msg__avatar { flex: none; line-height: 0; }
[data-stamina-turbo-region] .ticket-msg__avatar .avatar { --size-avatar: 2.25rem; }
[data-stamina-turbo-region] .ticket-msg__avatar img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
[data-stamina-turbo-region] .ticket-msg__who { flex: 1; min-width: 0; }
[data-stamina-turbo-region] .ticket-msg__name { display: flex; align-items: center; flex-wrap: wrap; gap: .125rem .5rem; overflow: hidden; color: var(--color-ink); font-size: .875rem; font-weight: 700; line-height: 1.4; }
[data-stamina-turbo-region] .ticket-msg__badge { gap: .25rem; font-size: .6875rem; }
[data-stamina-turbo-region] .ticket-msg__badge .fas { font-size: .5625rem; }
[data-stamina-turbo-region] .ticket-msg__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .0625rem .375rem; color: var(--color-muted); font-size: .75rem; line-height: 1.4; }
[data-stamina-turbo-region] .ticket-msg__sub .ticket-copy { font-size: .75rem; }
[data-stamina-turbo-region] .ticket-msg__date { flex: none; color: var(--color-muted); font-size: .75rem; line-height: 1.4; text-align: right; }
[data-stamina-turbo-region] .ticket-msg__date strong { display: block; color: var(--color-ink-2); font-weight: 600; }
[data-stamina-turbo-region] .ticket-msg__body { padding: .625rem 1rem .75rem; border-top: 1px solid var(--color-line); font-size: .875rem; }
[data-stamina-turbo-region] .ticket-msg__body iframe { display: block; width: 100%; border: 0; }
[data-stamina-turbo-region] .ticket-msg__files { display: flex; flex-wrap: wrap; gap: .375rem; padding: .5rem 1rem .625rem; border-bottom: 1px solid var(--color-line); }
[data-stamina-turbo-region] .ticket-file {
display: inline-flex;
align-items: center;
gap: .375rem;
max-width: 100%;
padding: .1875rem .625rem .1875rem .25rem;
border-radius: .5rem;
box-shadow: inset 0 0 0 1px var(--color-field);
color: var(--color-ink-2);
font-size: .75rem;
font-weight: 600;
}
[data-stamina-turbo-region] a.ticket-file:hover { background: var(--color-tile); color: var(--color-ink); }
[data-stamina-turbo-region] .ticket-file__icon { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: .375rem; background: var(--color-info-soft); color: var(--color-info); font-size: .6875rem; }
[data-stamina-turbo-region] .ticket-file--blocked { box-shadow: inset 0 0 0 1px var(--color-danger); color: var(--color-danger); }
[data-stamina-turbo-region] .ticket-file--blocked .ticket-file__icon { background: var(--color-danger-soft); color: var(--color-danger); }
/* Pied : envoi, temps passé, historique, accusé — discret, sous le contenu. */
[data-stamina-turbo-region] .ticket-msg__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem 1rem; padding: .375rem 1rem .5rem; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .75rem; }
[data-stamina-turbo-region] .ticket-msg__fact { display: inline-flex; align-items: center; gap: .375rem; cursor: default; }
[data-stamina-turbo-region] .ticket-msg__fact .fal { font-size: .75rem; }
[data-stamina-turbo-region] .ticket-msg__fact--ok .fal { color: var(--color-success); }
/* État d'envoi : texte à gauche, action à droite, sans cadre. */
[data-stamina-turbo-region] .ticket-msg__state { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .5rem 1rem; border-top: 1px solid var(--color-line); font-size: .75rem; font-weight: 600; }
[data-stamina-turbo-region] .ticket-msg__state-text { color: var(--color-muted); }
/* Envoi en attente : une barre fine balaie le filet au-dessus du pied, jusqu'à ce que le message parte (le pied disparaît alors). */
[data-stamina-turbo-region] .ticket-msg__state.is-pending { position: relative; }
[data-stamina-turbo-region] .ticket-msg__state.is-pending::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent) no-repeat; background-size: 35% 100%; animation: ticket-msg-sending 1.6s ease-in-out infinite; }
@keyframes ticket-msg-sending { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* Pendant le décompte, le filet se remplit de gauche à droite jusqu'à l'heure d'envoi ; ensuite il reprend le balayage. */
[data-stamina-turbo-region] .ticket-msg__state.is-pending.is-counting::before { background: var(--color-accent); transform-origin: left; animation: ticket-msg-countdown var(--send-duration, 20s) linear forwards; }
@keyframes ticket-msg-countdown { from { transform: scaleX(var(--send-from, 0)); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { [data-stamina-turbo-region] .ticket-msg__state.is-pending::before { animation: none; background: var(--color-accent-soft); } }
[data-stamina-turbo-region] .ticket-msg__state-text.is-primary { color: var(--color-accent); }
[data-stamina-turbo-region] .ticket-msg__state-text.is-danger { color: var(--color-danger); }
[data-stamina-turbo-region] .ticket-msg__state-action.is-primary { color: var(--color-accent); }
[data-stamina-turbo-region] .ticket-msg__state-action.is-danger { color: var(--color-danger); }
/* Note interne : clairement autre chose qu'un message envoyé. Fond de tuile (grisé), bordure en pointillé
discrète, texte atténué, pas d'ombre de carte ; badge cadenas neutre. */
[data-stamina-turbo-region] .ticket-msg--private { border: 1px dashed var(--color-field-hover); background: var(--color-tile); box-shadow: none; }
[data-stamina-turbo-region] .ticket-msg--private .ticket-msg__name { color: var(--color-ink-2); }
[data-stamina-turbo-region] .ticket-msg--private .ticket-msg__body { color: var(--color-ink-2); opacity: .85; }
[data-stamina-turbo-region] .ticket-msg--private .ticket-msg__avatar { opacity: .8; }
/* Réponses préparées (PreparedReply/timeline.item.html.twig) : à droite comme nos réponses, bordure en pointillé de
la couleur d'accent ; elles attendent d'être relues puis envoyées. */
[data-stamina-turbo-region] .ticket-msg--prepared { border: 1px dashed var(--color-accent); box-shadow: none; }
[data-stamina-turbo-region] .ticket-prepared__ai { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-size: .9375rem; line-height: 1; }
[data-stamina-turbo-region] .ticket-prepared__missing { color: var(--color-danger); font-weight: 600; }
[data-stamina-turbo-region] .ticket-prepared__state { padding-top: .375rem; padding-bottom: .375rem; background: var(--color-accent-soft); }
[data-stamina-turbo-region] .ticket-prepared__state .ticket-msg__state-text { display: inline-flex; align-items: center; gap: .375rem; }
[data-stamina-turbo-region] .ticket-prepared__actions { display: inline-flex; align-items: center; gap: .375rem; }
@media (max-width: 767.98px) {
[data-stamina-turbo-region] .ticket-msg__head { flex-wrap: wrap; }
[data-stamina-turbo-region] .ticket-msg__date { order: 3; width: 100%; padding-left: 3rem; text-align: left; }
[data-stamina-turbo-region] .ticket-msg__date strong { display: inline; }
[data-stamina-turbo-region] .ticket-msg__date strong::after { content: " · "; font-weight: 400; color: var(--color-muted); }
}
/* ---------- Activité : petite ligne grise alignée à droite, sans filets ---------- */
[data-stamina-turbo-region] .ticket-activity { display: flex; justify-content: flex-end; margin: -.25rem 0; color: var(--color-muted-2); font-size: .6875rem; line-height: 1.4; }
[data-stamina-turbo-region] .ticket-activity__pill { display: inline-flex; align-items: center; gap: .375rem; max-width: 85%; }
[data-stamina-turbo-region] .ticket-activity__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-stamina-turbo-region] .ticket-activity__icon { flex: none; font-size: .625rem; }
[data-stamina-turbo-region] .ticket-activity__icon--primary { color: var(--color-accent); }
[data-stamina-turbo-region] .ticket-activity__icon--success { color: var(--color-success); }
[data-stamina-turbo-region] .ticket-activity__icon--danger { color: var(--color-danger); }
[data-stamina-turbo-region] .ticket-activity strong { color: var(--color-muted); font-weight: 500; }
[data-stamina-turbo-region] .ticket-activity time { flex: none; }
[data-stamina-turbo-region] .ticket-activity time::before { content: "·"; margin-right: .375rem; }
[data-stamina-turbo-region] .ticket-activity__repeat { flex: none; font-weight: 500; }
/* ---------- Réponse en grand (écran de 1920 px et plus) ----------
À l'ouverture de la réponse (is-reply-wide sur le body, posé par stamina-ticket-tickets-reply), la colonne
de gauche s'efface et le fil se partage en deux : les messages à gauche, la
réponse à droite, collante et sur toute la hauteur de l'écran. Sous 1920 px, rien ne change.
La réponse ne prend aucune place dans le fil : elle est décalée dans la moitié droite (marges négatives)
et sa marge basse annule sa hauteur, les messages commencent donc tout en haut de la colonne de gauche. */
/* Bouton de mise en page de la réponse : seulement là où le mode large existe (cf. #wideQuery du contrôleur). */
[data-stamina-turbo-region] .ticket-reply__layout { display: none; }
@media (min-width: 1920px) and (pointer: fine) {
body:not(.is-reply-wide) .ticket-reply__layout--side,
body.is-reply-wide .ticket-reply__layout--thread { display: inline-flex; }
}
@media (min-width: 1920px) {
.is-reply-wide .ticket-page { grid-template-columns: minmax(0, 1fr); }
.is-reply-wide .ticket-page__side { display: none; }
.is-reply-wide .ticket-thread {
--ticket-msg-width: 90%;
--ticket-reply-height: calc(100dvh - var(--ticket-reply-top, 1.25rem) - 1.25rem);
min-height: var(--ticket-reply-height);
padding-right: calc(50% + .75rem);
}
.is-reply-wide .ticket-thread > turbo-frame#stamina-ticket-message-add {
display: flex;
flex-direction: column;
top: var(--ticket-reply-top, 1.25rem);
height: var(--ticket-reply-height);
margin: 0 calc(-100% - 1.5rem) calc(-1 * var(--ticket-reply-height) - .875rem) calc(100% + 1.5rem);
}
.is-reply-wide .ticket-thread > turbo-frame#stamina-ticket-message-add.is-stuck::before { display: none; }
/* La carte remplit la colonne : l'éditeur prend toute la hauteur libre, le pied reste en bas. */
.is-reply-wide #stamina-ticket-message-add > div:has(> form) { flex: 1; min-height: 0; }
.is-reply-wide #ticket-reply-form { height: 100%; }
.is-reply-wide .ticket-reply { height: 100%; grid-template-rows: minmax(0, 1fr); }
.is-reply-wide .ticket-reply__fold { display: none; }
.is-reply-wide .ticket-reply__open { min-height: 0; grid-template-rows: 1fr; }
.is-reply-wide .ticket-reply__inner { display: flex; flex-direction: column; height: 100%; }
.is-reply-wide .ticket-reply__editor,
.is-reply-wide .ticket-reply__editor :has(.tox-tinymce) { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.is-reply-wide .ticket-reply__editor .tox-tinymce { flex: 1; height: auto !important; min-height: 0; }
}
/* Chorégraphie (View Transition, seulement pendant le passage en grand et le retour) : la colonne de
gauche part vers la gauche, la carte de réponse et les messages rejoignent leur nouvelle place. Rapide :
le passage ne doit pas faire attendre. */
.is-ticket-reply-morphing::view-transition-group(*) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.is-ticket-reply-morphing::view-transition-group(ticket-head),
.is-ticket-reply-morphing::view-transition-group(ticket-reply) { overflow: clip; }
.is-ticket-reply-morphing::view-transition-old(ticket-head),
.is-ticket-reply-morphing::view-transition-new(ticket-head),
.is-ticket-reply-morphing::view-transition-old(ticket-reply),
.is-ticket-reply-morphing::view-transition-new(ticket-reply) { width: auto; height: auto; }
.is-ticket-reply-morphing::view-transition-old(ticket-reply) { animation: ticket-vt-fade-out .1s ease both; }
.is-ticket-reply-morphing::view-transition-new(ticket-reply) { animation: ticket-vt-fade-in .16s ease .04s both; }
.is-ticket-reply-morphing::view-transition-old(ticket-side) { animation: ticket-vt-side-out .16s cubic-bezier(.4, 0, .6, 1) both; }
.is-ticket-reply-morphing::view-transition-new(ticket-side) { animation: ticket-vt-side-in .22s cubic-bezier(.2, .8, .2, 1) .04s both; }
@keyframes ticket-vt-fade-out { to { opacity: 0; } }
@keyframes ticket-vt-fade-in { from { opacity: 0; } }
@keyframes ticket-vt-side-out { to { opacity: 0; transform: translateX(-3rem); } }
@keyframes ticket-vt-side-in { from { opacity: 0; transform: translateX(-3rem); } }
}