/*
 * FreeNotes — Styles globaux (style.css)
 * Rôle: mise en page du formulaire, boutons, listes, épingles, zones de résultat.
 * Conseils: chaque section est commentée; les classes .pins-tracages, .btn-precomp, .accordeon-titre, etc. ont des blocs dédiés.
 */

:root {
  /* Aurora Command — DA de reference (cf. docs/ui-direction-admin.md) */
  --bg: #0c0a14;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .03);
  --border: rgba(255, 255, 255, .12);
  --text: #f3eefc;
  --muted: #b0a4cb;
  --accent: #ffcb52;
  --accent-2: #34c3eb;
  --success: #34e7b3;
  --danger: #ff5577;
  --warning: #ffb648;
  --on-accent: #1a1320;

  --input-bg: rgba(6, 5, 11, .55);
  --input-border: rgba(255, 255, 255, .14);
  --btn-bg: rgba(255, 255, 255, .05);
  --chip-bg: rgba(255, 255, 255, .06);

  --radius-lg: 18px;
  --radius-sm: 10px;
  --shadow-card: 0 18px 44px rgba(0, 0, 0, .5);
  --brand-gradient: linear-gradient(135deg, #ffcb52, #ff5577);

  --font-body: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Inter', sans-serif;
  --font-head: 'Segoe UI Variable Display', 'Segoe UI', system-ui, 'Sora', 'Inter', sans-serif;
  --font-mono: 'Cascadia Code', 'Cascadia Mono', Consolas, 'JetBrains Mono', ui-monospace, monospace;
}

body {
background:
  radial-gradient(circle at 12% -5%, rgba(255, 203, 82, .10), transparent 38%),
  radial-gradient(circle at 105% 2%, rgba(255, 85, 119, .10), transparent 44%),
  var(--bg);
background-attachment: fixed;
color: var(--text);
font-family: var(--font-body);
padding: 10px;
margin: 0;
}

/* (Fond ardoise retiré) */
h1 {
text-align: center;
margin-bottom: 10px;
font-size: 26px;
letter-spacing: 1px;
}
form {
background: transparent;
padding: 10px 18px 8px 18px;
border-radius: var(--radius-lg);
max-width: 560px;
margin: 0 auto 12px auto;
box-shadow: none;
font-size: 15px;
}
label {
font-size: 13px;
margin-bottom: 1px;
font-weight: bold;
color: var(--accent);
display: block;
}
input, textarea, select {
width: 100%;
margin-bottom: 7px;
padding: 7px 9px;
border-radius: var(--radius-sm);
border: 1px solid var(--input-border);
background: var(--input-bg);
color: var(--text);
font-size: 13px;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Champs techniques en police mono */
#sn, #ip, #ip_reseau, #magasin_numero, #magasin_trigramme,
#poste, #nom, #prise, #port, #fc, #lu_ecran, #lu_imprimante {
font-family: var(--font-mono);
letter-spacing: .01em;
}

/* Icone ligne (sprite SVG inline) — remplace les emojis */
.fn-ico {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.15em;
}
textarea {
min-height: 32px;
resize: vertical;
height: 100px;

}
button {
background: var(--btn-bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 18px;
font-size: 14px;
cursor: pointer;
margin-right: 7px;
transition: background .15s, border-color .15s, box-shadow .15s;
margin-bottom: 5px;
}
button:hover {
background: rgba(255, 255, 255, .09);
border-color: var(--accent);
}
/*
  Masquer la zone Résultat tant qu'elle est vide.
  S'affiche automatiquement dès qu'un texte ou un contenu (mini‑jeu) y est ajouté.
*/
#resultat { display: none; }
#resultat:not(:empty) { display: block; }

.resultat-titre {
display: none;
margin: 18px auto 0 auto;
max-width: 550px;
color: var(--accent-2);
font-size: 12px;
font-weight: bold;
letter-spacing: .08em;
text-transform: uppercase;
}
.resultat-wrap:has(#resultat:not(:empty)) .resultat-titre {
display: block;
}

#resultat {
resize: vertical;
background: var(--surface);
backdrop-filter: blur(14px);
padding: 12px 18px;
margin: 18px auto 0 auto;
color: var(--success);
border: 1px solid var(--border);
border-left: 4px solid var(--accent-2);
border-radius: var(--radius-lg);
font-family: var(--font-mono);
font-size: 15px;
white-space: pre-line;
line-height: 1.45;
transition: background 0.3s ease;
min-height: 100px;
height: auto;
max-width: 550px;
box-shadow: var(--shadow-card);
}

#copie-ok {
font-size: 15px;
vertical-align: middle;
}

#suspi-conn-banner,
#suspi-paused-banner {
margin: 10px auto 0 auto;
max-width: 900px;
padding: 8px 14px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border));
color: var(--warning);
background: color-mix(in srgb, var(--warning) 12%, var(--btn-bg));
text-align: center;
font-weight: 700;
font-size: 13px;
}
/* Bouton de secours du bandeau de coupure du temps réel */
#suspi-conn-reload {
margin: 0 0 0 10px;
padding: 3px 10px;
font-size: 12px;
vertical-align: middle;
}
@media (max-width: 650px) {
form, #resultat { max-width: 97vw; }
}
@media (max-width: 480px) {
.ligne-champ {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.ligne-champ label {
min-width: 0;
text-align: left;
}
}
.ligne-champ {
display: flex;
align-items: center;
margin-bottom: 5px;
flex-wrap: nowrap;
border-radius: 6px;
transition: background-color 1.8s ease, box-shadow 1.8s ease;
}

/* Repère transitoire : champ rempli/modifié par une précomplétion */
.ligne-champ.precomp-touched {
background-color: rgba(101, 183, 255, .14);
box-shadow: 0 0 0 1px rgba(101, 183, 255, .35);
transition: background-color .15s ease, box-shadow .15s ease;
}

/* Ligne marque Fnac/Darty au-dessus du Site */
#ligne-brand { align-items: center; }
#ligne-brand .brand-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#ligne-brand .brand-toggle input[type="radio"] { display: none; }
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-brand .logo-brand { height: 1.2em; width: auto; display: inline-block; }
.btn-brand.fnac { border-color: rgba(255, 217, 0, .35); }
.btn-brand.darty { border-color: rgba(255, 74, 74, .35); }
.btn-brand.fnacdarty { border-color: rgba(255, 194, 124, .4); }

/* Styles actifs quand sélectionné */
#brand-fnac:checked + label.btn-brand.fnac {
  background: rgba(255, 217, 0, .12);
  border-color: #ffd900;
  box-shadow: 0 0 0 1px #ffd900 inset, 0 0 16px rgba(255, 217, 0, .22);
}
#brand-darty:checked + label.btn-brand.darty {
  background: rgba(255, 74, 74, .12);
  border-color: #ff5577;
  box-shadow: 0 0 0 1px #ff5577 inset, 0 0 16px rgba(255, 85, 119, .22);
}
#brand-fnacdarty:checked + label.btn-brand.fnacdarty {
  background: rgba(255, 194, 124, .12);
  border-color: #ffc27c;
  box-shadow: 0 0 0 1px #ffc27c inset, 0 0 16px rgba(255, 194, 124, .22);
}
.ligne-champ label {
min-width: 95px;   /* largeur mini, ajuste selon ton texte */
margin: 0  7px 0 0;
font-size: 13px;
font-weight: bold;
color: var(--accent);
text-align: right;
}
.ligne-champ input,
.ligne-champ select {
flex: 1;
margin: 0;
}
.section-form {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 13px;
padding: 12px 14px 7px 14px;
background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
backdrop-filter: blur(14px);
box-shadow: var(--shadow-card);
/* backdrop-filter cree son propre contexte d'empilement : sans position +
   z-index explicites ici, aucun z-index pose sur un descendant (ex. liste de
   suggestions Awesomplete) ne peut passer au-dessus des sections suivantes
   (.accordeon Hardware/Software...), qui peignent ensuite dans l'ordre du DOM. */
position: relative;
z-index: 2;
}
.titre-section {
font-family: var(--font-head);
font-size: 15px;
font-weight: bold;
margin-left: 6px;
letter-spacing: .02em;
background: transparent;
padding: 1px 8px;
border-radius: 3px;
}
.titre-section.user   { color: var(--accent); }
.titre-section.hard   { color: var(--danger); }
.titre-section.soft   { color: var(--accent-2); }
.titre-section.panne  { color: var(--warning); }
.ligne-champ input,
.ligne-champ select,
.ligne-champ textarea {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}

.btn-ping {
width: 40px;
height: 22px;
font-size: 16px;
border: none;
background: none;
color: #fff;
border-radius: 3px;
display: inline-flex;             /* ← clé ici */
align-items: center;             /* centrer verticalement */
justify-content: center;         /* centrer horizontalement */
cursor: pointer;
margin-left: 6px;
vertical-align: middle;          /* aide si inline contextuel */
transform: translateY(3px);      /* ajuste si encore trop haut ou trop bas */
padding: 0;
}

.btn-ping:hover {
background: #27ae5f5d;
}
.btn-ping.neutre { color: #999; }
.btn-ping.ok { color: #2ecc40; }
.btn-ping.nok { color: #ff3333; }

.accordeon {
margin-bottom: 10px;
}

.accordeon {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 14px;
background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
backdrop-filter: blur(14px);
overflow: hidden;
box-shadow: var(--shadow-card);
}

.accordeon-titre {
width: 100%;
margin: 0;
background: transparent;
color: var(--text);
font-family: var(--font-head);
font-size: 15px;
font-weight: bold;
text-align: left;
padding: 13px 16px;
border: none;
outline: none;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
position: relative;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
letter-spacing: .02em;
}

.accordeon-titre::after {
content: "▼";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.2s;
font-size: 1em;
opacity: 0.7;
}

.accordeon-titre.active::after {
transform: translateY(-50%) rotate(-180deg);
}

/* Couleurs selon section */
.accordeon-titre.hard { color: var(--danger); border-bottom-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.accordeon-titre.soft { color: var(--accent-2); border-bottom-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.accordeon-titre.reseau { color: var(--success); border-bottom-color: color-mix(in srgb, var(--success) 45%, var(--border)); }

.accordeon-titre:hover,
.accordeon-titre:focus-visible {
background: rgba(255, 255, 255, .06);
border-bottom-color: var(--accent);
outline: none;
}

.accordeon-panel {
background: transparent;
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0 12px;
transition:
max-height 0.3s ease,
opacity 0.3s ease,
padding 0.2s ease;
pointer-events: none;
}

.accordeon-panel.open {
max-height: 800px;
opacity: 1;
padding: 16px 12px 10px 12px;
pointer-events: auto;
}

/* Liste de propositions ouverte dans un accordeon (champ Logiciel et glossaire, todo #231) :
   l'accordeon et son panneau coupent ce qui depasse, et les blocs suivants se peignent par-dessus.
   Le temps que la liste est ouverte, rien n'est coupe et l'accordeon passe devant. */
.accordeon:has(.awesomplete > ul:not([hidden])) {
position: relative;
z-index: 3;
overflow: visible;
}

.accordeon:has(.awesomplete > ul:not([hidden])) .accordeon-panel.open {
overflow: visible;
}


@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}

@media (min-width: 950px) {
.layout-L {
display: flex;
align-items: flex-start;
gap: 32px;
max-width: 1300px;
margin: 0 auto;
position: relative;
--layout-gap: 32px;
}
/* Todo #32 : position de l'interface choisie sur /account (par defaut: centre, ci-dessus) */
/* Marge nulle + compensation du padding du body (10px) pour coller vraiment au bord de l'ecran */
.layout-L.layout-pos-left {
margin-left: -10px;
margin-right: auto;
}
.layout-L.layout-pos-right {
margin-left: auto;
margin-right: -10px;
/* Inverse l'ordre visuel des 2 colonnes : le formulaire (1re dans le HTML) se
   retrouve colle au bord droit, "Boutons rapides" passe a sa gauche. */
flex-direction: row-reverse;
}
/* Le formulaire a son propre "margin: 0 auto" (centrage interne a la colonne gauche) :
   sans ce correctif, il reste visuellement centre dans sa colonne meme une fois
   layout-L colle au bord, ce qui laisse un espace residuel bien visible. */
.layout-L.layout-pos-left form#form-notes {
margin-left: 0;
margin-right: 0;
}
.layout-L.layout-pos-right form#form-notes {
/* Pas de margin-left:auto ici : une marge auto sur l'axe transversal desactive le
   stretch flex de .col-gauche (qui gere correctement le padding du formulaire) et
   provoquait un debordement hors ecran. Comme .col-gauche fait desormais exactement
   la largeur du formulaire, margin-right:0 suffit a le coller au bord droit. */
margin-left: 0;
margin-right: 0;
}
/* .col-gauche (700px max, flex-grow:2 par defaut) est plus large que le formulaire
   qu'elle contient (560px max) : sans ce plafond, l'ecart entre le formulaire et la
   colonne "Boutons rapides" reste grand (jusqu'a ~140px de vide invisible) meme une
   fois le formulaire colle au bord. Largeur figee (pas de grow/shrink) plutot qu'un
   simple max-width : avec flex-grow actif, le calcul de repartition de l'espace libre
   combine au max-width provoquait un debordement du formulaire hors ecran en mode droite. */
.layout-L.layout-pos-left .col-gauche,
.layout-L.layout-pos-right .col-gauche {
flex: 0 0 560px;
max-width: 560px;
}
/* Todo #137 : colle a un bord, le formulaire perd 36px (son padding entre dans les
   560px). Les 3 boutons de groupe recevaient en plus la largeur mini et la marge de
   ".ligne-champ label", prevues pour le libelle : le 3e passait a la ligne. Ici ils se
   partagent la ligne a parts egales. */
.layout-L.layout-pos-left #ligne-brand .brand-toggle,
.layout-L.layout-pos-right #ligne-brand .brand-toggle {
flex: 1;
flex-wrap: nowrap;
}
.layout-L.layout-pos-left #ligne-brand .btn-brand,
.layout-L.layout-pos-right #ligne-brand .btn-brand {
flex: 1 1 0;
min-width: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
/* Todo #44 : le logo (centre sur toute la page par defaut) suit la colonne
   formulaire quand elle est collee a un bord, au lieu de rester centre dans le vide. */
.logo-wrap.layout-pos-left,
.logo-wrap.layout-pos-right {
width: 560px;
max-width: 560px;
}
.logo-wrap.layout-pos-left {
margin-left: -10px;
margin-right: auto;
}
.logo-wrap.layout-pos-right {
margin-left: auto;
margin-right: -10px;
}

.pins-tracages .suspi-item.selected { border-color: #48aaff; background: #262b35; }


.col-gauche {
flex: 2 1 400px;
min-width: 0; /* autorise le contenu (carrousel) à déborder et scroller */
max-width: 700px;
display: flex;
flex-direction: column;
gap: 0;
position: relative; /* pour positionner la jauge verticale */
overflow: hidden; /* évite qu'un enfant déborde et masque la colonne droite */
}
.col-droite {
flex: 0 0 340px; /* colonne droite fixe pour éviter qu'elle soit recouverte */
min-width: 280px;
max-width: 340px;
background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
backdrop-filter: blur(14px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 16px 15px 15px;
align-self: stretch;
margin-top: 8px;
height: fit-content;
display: flex;
flex-direction: column;
gap: 12px;
}
.groupe-boutons-precomp {
display: flex;
flex-direction: column;
gap: 7px;
}
.col-droite h3 {
font-family: var(--font-head);
font-size: .82em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
margin-bottom: 5px;
letter-spacing: .06em;
}
.col-droite hr {
border: none;
border-top: 1px solid var(--border);
margin: 8px 0 8px 0;
}
.col-droite button {
width: 100%;
margin-bottom: 0;
padding: 9px 0;
font-size: 14px;
}
}
@media (max-width: 950px) {
.layout-L { display: block; }
.col-gauche, .col-droite { max-width: 99vw; margin: 0 auto; }
.col-droite { margin-top: 15px; }
}
.grille-boutons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 4px;
}
.grille-boutons-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.sous-section {
margin-bottom: 5px;
}
.sous-titre {
font-weight: 700;
color: var(--muted);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 6px;
margin-top: 3px;
}
.col-droite button {
  width: 100%;
  margin-bottom: 0;
  padding: 9px 0;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.col-droite button:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--accent);
  color: var(--text);
}

/* Bouton "Corbeille à Suspi" — ne pas prendre toute la largeur */
.col-droite #btn-suspi-trash {
  width: auto;
  display: inline-block;
  padding: 7px 18px; /* restaurer padding .btn-precomp */
}
.logo-emoji {
width: 1.25em;
height: 1.25em;
object-fit: contain;
padding-right: 0.3em; /* Ajuste selon besoin */
vertical-align: middle;
}
.logo-badge {
height: 1.25em;          /* Même hauteur que le texte, ou légèrement plus */
width: auto;             /* Largeur automatique, pas déformée */
padding-right: 0.3em;    /* Ajuste selon besoin */
vertical-align: middle;
}

.copiable-champ {
cursor: copy;
transition: background 0.15s;
}
label.copiable-label {
cursor: copy;
}
/* === Boutons de pré-complétion (apparence cohérente FreeNotes) === */
/* Style de base des boutons type "Envoyer / Vider / Historique" */
.btn-precomp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-precomp:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--accent);
  color: var(--text);
}
/* Bouton d'un module pas encore en service : grisé par le serveur (SiteModules) */
.btn-precomp[data-module]:disabled,
.btn-precomp[data-module]:disabled:hover {
  background: var(--btn-bg);
  border-color: var(--border);
  opacity: .5;
  filter: grayscale(.6);
  cursor: not-allowed;
}
/* Indication visuelle du bouton de pré-complétion actif */
.btn-mode-precomp.actif,
.btn-precomp.actif {
background: color-mix(in srgb, var(--accent-2) 18%, var(--btn-bg));
color: var(--text);
font-weight: bold;
border: 1px solid var(--accent-2);
box-shadow: 0 0 0 1px var(--accent-2) inset;
}

/* Boutons signature — primaire (Envoyer) et danger (Bloquant total) */
#btn-envoyer {
  background: var(--brand-gradient);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
}
#btn-envoyer:hover {
  filter: brightness(1.06);
  border-color: transparent;
  color: var(--on-accent);
}
#btn-bloquant-total,
.btn-precomp-danger {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--btn-bg));
}
#btn-bloquant-total:hover,
.btn-precomp-danger:hover {
  background: color-mix(in srgb, var(--danger) 20%, var(--btn-bg));
  border-color: var(--danger);
  color: var(--danger);
}

/* -=-=-=-=-=-=-=-= DEBUT Des awesomplete des propal du champs Magasin -=-=-=-=-=-=-=-= */
.awesomplete {
font-size: 14px !important;
}
.awesomplete .fnac {
color: #ffd900 !important;   /* jaune vif */
font-weight: bold;
}
.awesomplete .darty {
color: #ff4a4a !important;   /* rouge vif */
font-weight: bold;
}
.awesomplete li.fnacdarty {
color: #ffc27c !important; /* blanc */
font-weight: bold;
}
/* Optionnel : améliorer le surlignage */
.awesomplete mark {
background: none !important;
color: var(--accent-2) !important;  /* lisible sur fond sombre */
font-weight: bold;
padding: 0;
}
.awesomplete li[aria-selected="true"],
.awesomplete li:hover {
background: color-mix(in srgb, var(--accent-2) 22%, transparent) !important;
}
.awesomplete ul {
background: #140f20 !important;
border: 1px solid var(--border) !important;
border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
color: var(--text) !important;
box-shadow: var(--shadow-card);
margin-top: 0;
/* La lib pose elle-meme z-index:1 sur .awesomplete > ul (meme specificite),
   et awesomplete.min.css est chargee APRES ce fichier (cf. index.html) donc
   gagne la cascade a specificite egale sans !important, comme les autres
   proprietes de ce bloc. Trop bas de toute facon pour passer au-dessus des
   sections suivantes (accordeons Hardware/Software...). */
z-index: 500 !important;
}
.awesomplete li {
padding: 7px 12px !important;
color: #fff !important;
background: transparent !important;
font-size: 14px;
}
.awesomplete li {
padding: 7px 12px !important;
color: #fff !important;
background: transparent !important;
font-size: 14px !important; 
}
/* Proposition de magasin : logo de l'enseigne, nom, numero de site a droite */
.awesomplete li.magasin-suggestion {
display: flex !important;
align-items: center;
gap: 9px;
}
.magasin-suggestion-logo {
flex: none;
width: 22px;
height: 22px;
object-fit: contain;
}
/* Le logo Intelcia est un carre plein : coins arrondis comme une icone d'appli */
.magasin-suggestion.intelcia .magasin-suggestion-logo {
border-radius: 5px;
}
.magasin-suggestion-nom {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.magasin-suggestion-code {
flex: none;
font-size: 12px;
font-weight: normal;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, .5);
}
.awesomplete input {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* -=-=-=-=-=-=-=-= DEBUT Des awesomplete des propal du champs Magasin -=-=-=-=-=-=-=-= */


.awesomplete {
display: block !important;
width: 100%;
flex: 5 !important;
}

#magasins {
flex: 2;
}

#magasin_numero,
#magasin_trigramme {
flex: 1;
}

.groupe-boutons-precomp {
display: flex;
flex-direction: column;
gap: 8px; /* espace vertical entre chaque bouton */
}

#btn-autoserveur {
width: 40px;
height: 22px;
font-size: 16px;
border: none;
background: var(--accent-2);
color: var(--on-accent);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
cursor: pointer;
transform: translateY(2px); /* ajuste verticalement si besoin */
padding: 0;
}

#btn-autoserveur:hover {
filter: brightness(1.08);
background: var(--accent-2);
}

@media (max-width: 949px) {
  .layout-L {
    display: block;
    padding: 0 12px;
  }

  .col-gauche,
  .col-droite {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .col-droite {
    margin-top: 20px;
    padding: 10px;
  }

  .col-droite button,
  .groupe-boutons-precomp button {
    width: auto;
    min-width: 120px;
    margin: 5px;
    display: inline-block;
  }

  .groupe-boutons-precomp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}

.zone-menus-contextuels {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zone-menus-contextuels > div {
  display: flex;
  justify-content: flex-start;
}


.menu-dropdown {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  background: rgba(18, 14, 28, .96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: var(--shadow-card);
  z-index: 100;
}

.menu-dropdown button {
  flex: 1 1 calc(16% - 6px); /* pour 6 boutons par ligne */
  min-width: 80px;
  margin: 0;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  text-align: center;
}
.menu-dropdown button:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--accent);
}
.menu-dropdown button.active,
.menu-mail button.active {
  background: color-mix(in srgb, var(--accent-2) 18%, var(--btn-bg));
  color: var(--text);
  font-weight: bold;
  border: 1px solid var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2) inset;
}

/* Variante 2 colonnes pour les petits menus (ex: TPE/TCK) */
.menu-dropdown.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.menu-dropdown.two-cols button {
  flex: initial;
  width: 100%;
}

/* Forcer le menu à s'étendre sur les 2 colonnes du grid parent */
.menu-dropdown.full-row {
  grid-column: 1 / -1;
}
/* Styles sortis des scripts (todo #126). Les couleurs sont celles que les scripts
   ecrivaient, pas encore celles de la charte. Les selecteurs sont prefixes ou doubles
   pour passer devant les regles generiques input / button / label, survol et focus
   compris, comme le faisaient les styles ecrits dans les balises. */

/* Boutons « Send by Mail » et « Webmail » (modeSendMail.js, modeExportExcelHP.js) */
.send-mail-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}
/* Prefixes par l identifiant de la rangee : ".col-droite button:hover" passerait
   devant de simples classes et changerait la couleur au survol. */
#send-mail-actions .btn-send-mail,
#incident-hp-mail-actions .btn-send-mail {
  padding: 8px 12px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}
#send-mail-actions .btn-send-mail--send,
#incident-hp-mail-actions .btn-send-mail--send { background-color: rgb(0, 104, 0); }
#send-mail-actions .btn-send-mail--webmail,
#incident-hp-mail-actions .btn-send-mail--webmail { background-color: rgb(0, 70, 140); }

/* Fenetre « Contenu mail Webmail » (modeSendMail.js) */
#popup-webmail .modal-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#popup-webmail h3 { margin: 0 0 2px 0; }
#popup-webmail .webmail-popup-hint {
  margin: 0 0 8px 0;
  font-size: 0.9em;
  color: #bfc4d1;
}
#popup-webmail label { font-size: 0.9em; }
#popup-webmail input,
#popup-webmail textarea {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #3a4050;
  background: #161921;
  color: #ffffff;
}
#popup-webmail textarea {
  padding: 8px;
  line-height: 1.45;
}
#popup-webmail .webmail-popup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#popup-webmail-copy,
#popup-webmail-close {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: #0050a8;
  color: #ffffff;
  cursor: pointer;
}
#popup-webmail-close { background: #3a4050; }

/* Bordures d alerte d un champ, posees par setFieldBorder() (borderUtils.js) :
   rouge = Nom ou Telephone vide, orange = champ « Important » d un bouton ou User tablette. */
.field-border-missing.field-border-missing { border: 1px solid red; }
.field-border-important.field-border-important { border: 1px solid #f39c12; }
.field-border-awaited.field-border-awaited { border: 1px solid orange; }

/* Champ de copie ajoute par un bouton, ex. « CC » (dynamicPrecompletions.js) */
.ligne-champ .precompletion-copy-field {
  background: #222;
  color: #48aaff;
  border: none;
  text-align: center;
  cursor: pointer;
}
.ligne-champ .precompletion-copy-field.is-copied { background: #123d63; }

/* Dossiers de boutons charges depuis la base (dynamicPrecompletions.js) */
.sous-section.dynamic-precompletions-section { margin-top: 10px; }

/* ===== Toast notifications ===== */
.toast {
  position: fixed;
  left: 50%;
  top: clamp(12px, 4vw, 28px);
  bottom: auto;
  transform: translate(-50%, -14px) scale(.94);
  background: linear-gradient(135deg, #fffbdb 0%, #ffe08a 52%, #ffb347 100%);
  color: #2f1b00;
  border: 2px solid rgba(255, 153, 0, .65);
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  box-shadow: 0 18px 32px rgba(0, 0, 0, .36), 0 6px 18px rgba(255, 159, 28, .35);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: min(90vw, 420px);
  max-width: calc(100vw - 32px);
  text-align: left;
  overflow: hidden;
  pointer-events: none;
}
.toast::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .16);
  color: inherit;
  font-size: 18px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  text-align: center;
  flex-shrink: 0;
  animation: toast-beacon 1.4s ease-in-out infinite;
}
.toast::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 255, 255, .45), transparent 58%);
  opacity: .55;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: toast-pop .42s cubic-bezier(.22, 1, .36, 1);
}

@keyframes toast-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -34px) scale(.84);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, 6px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes toast-beacon {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 159, 28, .55), inset 0 0 0 1px rgba(0, 0, 0, .08);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 159, 28, 0), inset 0 0 0 1px rgba(0, 0, 0, .08);
  }
}

/* ===== Carousel IM (Suspi) ===== */
.im-carousel { margin: 8px 0 12px 0; border: 1px solid #3b4048; border-radius: 10px; background: #1f232b; box-shadow: 0 2px 8px #0003; width: 100%; min-width: 0; overflow: hidden; }
.im-carousel { contain: layout paint; }
.im-carousel-header { display:flex; align-items:center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid #3b4048; }
.im-carousel-title { font-weight: 800; color: #ffcb52; }
.im-carousel-controls { display: inline-flex; gap: 6px; }
.imc-btn { background: #363a43; border: 1px solid #444; padding: 4px 8px; border-radius: 6px; font-size: 14px; }
.imc-btn:hover { background: #48aaff; }
.im-carousel-viewport { display:block; width: 100%; overflow: hidden; padding: 10px; min-width: 0; box-sizing: border-box; }
.im-carousel-track { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; transform: translateX(0); transition: transform 350ms ease; }
.imc-slide { flex: 0 0 100%; max-width: 100%; }
.imc-slide + .imc-slide { margin-left: 12px; }
.imc-slide .suspi-item { height: 100%; }

/* Progression 15s pour indiquer l'auto-défilement */
.im-carousel-progress { height: 3px; background: rgba(255,255,255,.08); margin: 0 10px; border-radius: 2px; overflow: hidden; }
.imc-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #48aaff, #86efac); transition: width .2s linear; }

/* Petites pastilles de pagination */
.im-carousel-dots { display:flex; gap:6px; justify-content:center; align-items:center; padding:6px 10px 0; }
.imc-dot { width:8px; height:8px; border-radius:50%; background:#556; opacity:.6; cursor:pointer; border:none; padding:0; outline: none; transition: transform .15s ease, opacity .15s ease, background-color .15s ease; }
.imc-dot:hover { opacity:.9; transform: scale(1.08); }
.imc-dot.active { background:#48aaff; opacity:1; }

/* La barre du haut est dans /assets/css/topbar.css ; ici, elle rattrape seulement la marge du body. */
.topbar.topbar-alert {
  margin: -10px -10px 14px;
}
/* Le bandeau « Tu es revenu ? » posé sous la barre s'aligne sur elle. */
.topbar-breaks.breaks-banner {
  margin-inline: -10px;
}

/* Rendre visibles les boutons "verrouillés" sans bloquer les clics */
.btn.is-disabled,
button.is-disabled,
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bouton alerte (rouge) — aligne sur le token --danger partage avec admin.css/app.css (lot 7.5.1) */
.btn-danger {
  background: color-mix(in srgb, var(--danger) 22%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 65%, var(--border)) !important;
  color: #ffd7dc !important;
}
.btn-danger:hover,
.btn-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 32%, transparent) !important;
  border-color: var(--danger) !important;
}

/* Bouton principal (mise en avant) — lot 7.5.1 */
.btn-primary {
  background: var(--brand-gradient) !important;
  border: 1px solid transparent !important;
  color: var(--on-accent) !important;
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.08);
}

/* Bouton discret (texte, sans fond ni bordure marques) — lot 7.5.1 */
.btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
}

/* Etat chargement — lot 7.5.1 */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text);
  border-top-color: transparent;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-loading::after {
    animation-duration: 1.5s;
  }
}

/* Bouton Historique (📜) — discret */
.btn-hist {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #aab4c3 !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  opacity: .65;
  box-shadow: none !important;
}
.btn-hist:hover {
  opacity: 1;
  background: rgba(255,255,255,0.06) !important;
  border-color: #3b4048 !important;
}

/* Avertissement Bloquant total (page index) */
.bloquant-warning {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #8a6d3b;
  color: #ffcb52;
  background: rgba(255, 203, 82, 0.08);
  font-size: 13px;
}

/* Incident HP — Bouton "Générer Excel" */
#btn-generer-excel {
  display: block;
  margin-top: 8px;
  background-color: rgb(0, 104, 0) !important;
  color: #fff;
  border: 0;
}
#btn-generer-excel:hover {
  filter: brightness(1.05);
}

/* ===== Traçages épinglés — cartes propres & distinctes ===== */

.pins-tracages .liste-tracages {
  display: grid;
  gap: 16px; /* plus d'espace entre cartes */
}

/* Carte */
.pins-tracages .pin-item {
  position: relative;
  padding: 14px 16px 14px 22px;   /* un peu d'air + place pour la barre d'accent */
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);   /* fond carte (thème sombre) */
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Barre d'accent à gauche (pour bien distinguer les cartes) */
.pins-tracages .pin-item::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 14px 0 0 14px;
  background: var(--pin-accent, #3b82f6);
  opacity: 0.9;
}

/* Alternance d'accents (vert / teal / rouge) */
.pins-tracages .pin-item:nth-child(3n+1) { --pin-accent: #22c55e; } /* vert */
.pins-tracages .pin-item:nth-child(3n+2) { --pin-accent: #0ea5a4; } /* teal */
.pins-tracages .pin-item:nth-child(3n+3) { --pin-accent: #ef4444; } /* rouge */

/* Code couleur par type (prend le pas sur l'alternance) */
.pins-tracages .suspi-item.type-multi { --pin-accent: #f59e0b; }  /* orange */
.pins-tracages .suspi-item.type-majeur { --pin-accent: #ef4444; } /* rouge */

.pins-tracages .pin-item:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
}
/* Assurer que le texte passe au-dessus des filigranes */
.pins-tracages .pin-text { position: relative; z-index: 1; }
.pins-tracages .pin-delete { z-index: 2; }


/* Texte */
.pins-tracages .pin-text {
  font-size: 13px;
  line-height: 1.35;
  min-width: 0; /* utile avec l'ellipsis */
}

/* Filigrane enseigne pour tuiles IM (20% d'opacité) */
.pins-tracages .suspi-item.im-open::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 46% auto; /* moitié de la largeur environ */
  opacity: 0.2;
  pointer-events: none;
}
.pins-tracages .suspi-item.im-open.ens-fnac::before {
  background-image: url('Images/Fnac.svg');
}
.pins-tracages .suspi-item.im-open.ens-darty::before {
  background-image: url('Images/Darty.svg');
}
.pins-tracages .suspi-item.im-open.ens-fnacdarty::before {
  background-image: url('Images/Fnac_Darty.svg');
}

/* Filigrane enseigne pour tuiles Bloquants (20% d'opacité) */


/* Tuiles: libellés et valeurs sur la même ligne */
/* Tuiles: libellés et valeurs sur la même ligne (robuste) */
.pins-tracages .pin-text .trace-block {
  display: grid;
  grid-template-columns: max-content 1fr; /* libellé compact + valeur fluide */
  column-gap: 6px;
  align-items: start;
}
.pins-tracages .pin-text .trace-label {
  white-space: nowrap;
  min-width: max-content;
  margin-right: 0;
}
.pins-tracages .pin-text .trace-block .trace-label { display: inline; }
.pins-tracages .pin-text .trace-block > div:last-child {
  flex: 1;
  min-width: 0;
}

/* Eviter un retour à la ligne après le libellé dans les tuiles Suspi */
.pins-tracages .pin-text .trace-block .trace-multiline {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pins-tracages .pin-text .trace-block .trace-text {
  display: inline;
}

/* Tag visuel pour N° d'incident (cliquable pour copier) */
.pins-tracages .tag-incident {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #8a6d3b;
  color: #ffcb52;
  background: rgba(255, 203, 82, 0.08);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  margin-right: 6px;
  width: auto;          /* ne pas s'étirer en pleine largeur */
  flex: 0 0 auto;       /* largeur selon contenu, pas d'étirement */
}
.pins-tracages .tag-incident:hover {
  background: rgba(255, 203, 82, 0.15);
}


/* Tag de type (Multi-Site/Majeur) — même code couleur que l'accent de carte, en texte */


/* (Jauge d'appels retirée) */
/* (suppression du bouton d'actualisation et du lien) */
.pins-tracages .trace-line {
  margin: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton 🗑️ en coin (masqué par défaut, visible au survol/focus) */
.pins-tracages .pin-delete {
  position: absolute;
  top: 6px; left: 6px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: #0b0d12;
  border: 1px solid #414652;
  color: #cbd5e1;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  cursor: pointer;
}
.pins-tracages .pin-item:hover .pin-delete,
.pins-tracages .pin-item:focus-within .pin-delete {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
/* Pins — no overflow in the right column */
.pins-tracages,
.pins-tracages .liste-tracages,
.pins-tracages .pin-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* padding+bordure inclus => pas de dépassement */
}

/* Le texte ne pousse jamais la carte hors cadre */
.pins-tracages .pin-text {
  min-width: 0;
  overflow-wrap: anywhere; /* au cas de mots très longs */
}

/* Optionnel: neutraliser tout spacing latéral parasite */
.pins-tracages .liste-tracages {
  padding-right: 0;
  margin-right: 0;
}

/* Pins — masquer la section quand elle est vide */
#pins-tracages { display: none; }
#pins-tracages.has-pins { display: block; }


/* (Overlay tips retiré) */

/* ===== Page Historique — grille en 3 colonnes ===== */
.page-historique .liste-tracages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .page-historique .liste-tracages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page-historique .liste-tracages { grid-template-columns: 1fr; }
}


/* Petit bouton Copier intégré dans l'entête de l'accordéon */
.accordeon-titre .copy-btn,
.accordeon-titre .copy-ok {
  position: absolute;
  right: 46px; /* laisse la place à la flèche */
  top: 50%;
  transform: translateY(-50%);
  background: #363a43;
  color: #fff;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px;
}
.accordeon-titre .copy-btn:hover { background: #48aaff; }
/* Sécurité: éviter que la colonne gauche s'élargisse à cause du contenu interne */
.col-gauche { min-width: 0; overflow: hidden; }
body.freenotes-guest .topbar,
body.freenotes-guest #btn-ping-ip,
body.freenotes-guest #btn-ping-ipreseau,
body.freenotes-guest #btn-autoserveur,
body.freenotes-guest #im-carousel {
  display: none !important;
}

body.freenotes-guest .freenotes-guest-actions .groupe-boutons-precomp {
  gap: 10px;
}

body.freenotes-guest .freenotes-login-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

/* ===== Phase 7.1 — remplacement des styles inline (index/suspi/incident-manager + rendus JS) ===== */

/* Utilitaire de masquage : double classe pour battre en specificite toute classe
   de mise en page (.ligne-champ, .section-form...) qui pose deja un display. */
.hidden.hidden { display: none; }

/* Logo centre en tete de page, commun aux 3 pages legacy */
.logo-wrap { display: flex; justify-content: center; margin-bottom: 15px; }
.logo-img { height: 64px; object-fit: contain; }
#logo-freenotes { height: 100px; max-width: 95vw; object-fit: contain; }

/* index.html */
.fn-sprite-defs { position: absolute; }
#ligne-brand > .copiable-label { margin-bottom: 0; }
.champ-magasin-numero { width: 85px; background: var(--input-bg); color: var(--accent); border: 1px solid var(--input-border); border-radius: var(--radius-sm); text-align: center; }
.champ-magasin-trigramme { width: 70px; background: var(--input-bg); color: var(--accent-2); border: 1px solid var(--input-border); border-radius: var(--radius-sm); text-align: center; }
.spacer-8 { height: 8px; }
.champ-details-wrap { margin-bottom: 7px; }
#pins-tracages { margin-top: 6px; }
.copie-badge { color: #2ee07b; }
#popup-conflit-champ { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); z-index: 9999; justify-content: center; align-items: center; }
.popup-conflit-box { background: #222; color: #fff; padding: 20px; border-radius: 10px; max-width: 500px; width: 90%; }
#popup-texte { white-space: pre-wrap; background: #333; padding: 10px; border-radius: 6px; }
.popup-conflit-actions { text-align: right; margin-top: 10px; }

/* suspi.html */
.hr-divider { border: none; border-top: 1px solid #3b4048; margin: 10px 0; }
.btn-row-center { display: flex; justify-content: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }


.mb-10 { margin-bottom: 10px; }


.row-flex-full { display: flex; gap: 8px; align-items: center; width: 100%; }


#add-hist-preview { flex: 1; opacity: .9; max-height: 120px; overflow: auto; }
.row-flex-gap8 { display: flex; gap: 8px; }
.form-actions-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }


/* incident-manager.html */
.sous-titre-flush { margin: 0; }
.im-sous-titre-mt10 { margin-top: 10px; }
.im-sous-titre-mt12 { margin-top: 12px; }
#im-scope-hint { font-size: 12px; color: var(--muted); margin: 0; }
#im-editor-delete { margin-right: auto; }

/* Rendus generes en JS (Suspi/IM/carousel) : mêmes petits motifs repetes partout */
.opacity-70 { opacity: .7; }
.opacity-75 { opacity: .75; }
.opacity-80 { opacity: .8; }
.opacity-85 { opacity: .85; }
.mt-8 { margin-top: 8px; }
.row-header-flex { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-title-accent { font-weight: 600; color: #ffcb52; }
.row-gap10-end { display: flex; gap: 10px; align-items: end; margin-top: 8px; flex-wrap: wrap; }
.row-gap8-center { display: flex; gap: 8px; align-items: center; }
.date-narrow { max-width: 180px; }
.cursor-pointer { cursor: pointer; }
.trace-multiline-mt { margin-top: 8px; white-space: pre-wrap; }
.logo-inline-icon { height: 1.7em; vertical-align: middle; padding: 2px; }
.page-historique { padding: 0 16px 24px; }
.history-meta { margin-bottom: 4px; opacity: .75; }
.history-result-text { white-space: pre-wrap; }

/* Modales creees en JS (Suspi/IM) — memes tokens/motif que les modales PHP
   admin (.modal-overlay/.modal-panel), au lieu des styles inline ad-hoc
   precedents (lot 7.5.1, cf. jsModal.js). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 72px 16px 24px;
  background: rgba(12, 15, 20, .78);
}

.modal-panel {
  width: min(820px, 95vw);
  max-height: calc(100vh - 96px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #1a1626, #120f1c);
  padding: 16px;
  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* Variante compacte pour les petites boites de dialogue (ex. popup Webmail) */
.modal-panel--compact {
  width: min(520px, 95vw);
}

/* Todo #37 : generateur de mot de passe temporaire (passwordGenerator.js).
   Selecteurs prefixes par #zone-mdp-temp : la regle generique ".col-droite
   button { width: 100% }" a une specificite plus forte qu'une simple classe
   et ecrasait sinon la largeur du bouton copier. */
/* Reglages avances du generateur de mot de passe (accueil et page Mails) : une roue discrete
   a cote de « Generer », qui ouvre une ligne de niveaux et une reglette de longueur.
   Les selecteurs sont doubles pour passer devant les regles generiques des boutons de chaque page. */
.mdp-row {
  display: flex;
  gap: 6px;
}
.col-droite .mdp-row #btn-genmdp,
.mdp-row > .im-btn {
  flex: 1 1 auto;
  min-width: 0;
}
.mdp-gear,
.col-droite .mdp-row .mdp-gear,
.im-page .mdp-row .mdp-gear {
  flex: 0 0 34px;
  width: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.mdp-gear:hover,
.mdp-gear[aria-expanded="true"],
.col-droite .mdp-row .mdp-gear:hover,
.col-droite .mdp-row .mdp-gear[aria-expanded="true"],
.im-page .mdp-row .mdp-gear:hover,
.im-page .mdp-row .mdp-gear[aria-expanded="true"] {
  border-color: var(--border);
  background: none;
  color: var(--accent);
}
.mdp-options {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
/* « display: grid » l'emporte sur l'attribut hidden : sans cette règle, les réglages restent ouverts. */
.mdp-options[hidden],
.mdp-options [hidden] {
  display: none;
}
.im-page .mdp-options {
  margin-top: 0;
}
.mdp-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mdp-level,
.col-droite .mdp-options .mdp-level,
.im-page .mdp-options .mdp-level {
  width: auto;
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
}
.mdp-level[aria-pressed="true"],
.col-droite .mdp-options .mdp-level[aria-pressed="true"],
.im-page .mdp-options .mdp-level[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.mdp-length {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.mdp-length input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--accent);
}
.mdp-length strong {
  min-width: 2ch;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mdp-temp-zone {
  margin-top: 8px;
}
#zone-mdp-temp .mdp-temp-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
#zone-mdp-temp .mdp-temp-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 32px;
  background: #222;
  color: #2ee07b;
  border: none;
  padding: 0 12px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  box-sizing: border-box;
  border-radius: 4px;
}
#zone-mdp-temp .mdp-temp-input-copied {
  background: #27ae5f5d;
}
#zone-mdp-temp .mdp-temp-copy-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 30px;
  background: #444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transform: translateY(-4px);
}

/* Fenetre « Suspicion » de l'accueil (suspiQuick.js) */
.suspi-rapide .js-dialog-input { margin-bottom: 10px; }
.suspi-rapide-head {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.suspi-rapide-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.suspi-rapide-row button { margin: 0; white-space: nowrap; }
.suspi-rapide-text,
.suspi-rapide-count { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.suspi-rapide-info {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--btn-bg));
  font-size: 13px;
}
.suspi-rapide .js-dialog-actions a.btn { margin-right: auto; }
.suspi-rapide-check { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.suspi-rapide-check input { width: auto; margin: 0; }
.suspi-rapide-check label { margin: 0; color: var(--text); font-size: 14px; cursor: pointer; }

/* Documents proposes par un bouton de precompletion (bibliotheque /admin/documents) */
.precompletion-documents { align-items: center; }
.precompletion-documents-label { color: var(--muted); }
.precompletion-documents-list { display: flex; flex-wrap: wrap; gap: 8px; }
.precompletion-document {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.precompletion-document:hover { border-color: var(--accent); color: var(--accent); }
button.precompletion-document { background: transparent; cursor: pointer; font-family: inherit; }

/* Fenetre d'aide d'un bouton de precompletion (Scripts/helpPopup.js) */
.modal-panel.help-popup { width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 12px; }
.help-popup-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.help-popup-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.help-popup-tab {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
}
.help-popup-tab[aria-selected="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.help-popup-stage { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.help-popup-image { max-width: 100%; height: auto; align-self: center; border-radius: 6px; }
.help-popup-video { max-width: 100%; max-height: 68vh; align-self: center; border-radius: 6px; background: #000; }
.help-popup-frame { width: 100%; height: 68vh; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.help-popup-text {
  margin: 0;
  max-height: 62vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-family: inherit;
}
.help-popup-note { margin: 0; color: var(--muted); }
.help-popup-download { color: var(--accent); font-size: 14px; align-self: flex-start; }

/* Tuile « + Ajouter des diags » (todo #219) : un lien vers le DiagShop, tant que le compte n a rien ajoute ni cree. */
a.btn-diagshop-tile {
  grid-column: 1 / -1;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
a.btn-diagshop-tile:hover {
  color: var(--accent);
}

/* Glossaire et champ Logiciel (todo #231) : un « i » violet au bout du champ quand le nom correspond
   a une application du glossaire. Choix de Renaud du 17/10/2026, a la place d'une ligne sous le champ. */
.ligne-champ input.has-glossary-info {
padding-right: 34px;
}

.glossary-info {
position: absolute;
top: 50%;
right: 6px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
border: 1px solid #a78bfa;
border-radius: 50%;
background: color-mix(in srgb, #a78bfa 22%, transparent);
box-shadow: none;
color: #c4b5fd;
font: italic 700 13px/1 Georgia, 'Times New Roman', serif;
transform: translateY(-50%);
cursor: pointer;
}

.glossary-info[hidden] {
display: none;
}

.glossary-info:hover,
.glossary-info:focus-visible {
background: #a78bfa;
color: #160f24;
outline: none;
}