/*
 * 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 {
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;
}
@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-brand .brand-toggle {
flex-wrap: wrap;
}
}
.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;
  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;
}


@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;
}
.suspi-layout .col-extra-left {
  flex: 0 0 300px;
  max-width: 320px;
  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;
}
.pins-tracages .suspi-item.selected { border-color: #48aaff; background: #262b35; }
/* Page Suspi: élargir fortement la colonne gauche */
.suspi-layout {
  max-width: 1400px; /* un peu plus large pour 3 colonnes + gaps */
}
.suspi-layout .col-gauche {
  flex: 2 1 0;       /* 2x la colonne droite */
  min-width: 380px;
  max-width: 750px;  /* intermédiaire entre 1000px et 500px */
}
.suspi-layout .col-droite {
  flex: 1 1 0;
  max-width: 360px;
}
.suspi-layout #suspi-form {
  max-width: 620px;  /* intermédiaire entre 830px et 415px */
  width: 100%;
}
.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);
}
/* 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; 
}
.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;
}
.btn-send-mail:hover {
background: #ae27495d;
}

/* ===== 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; }

/* ===== Menu top FreeNotes — barre alerte ===== */
.topbar-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 48px;
  margin: -10px -10px 14px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 6, 14, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  position: relative;
  z-index: 10;
}

.topbar-alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-gradient);
}

.topbar-alert a {
  text-decoration: none;
}

.topbar-user,
.topbar-flow,
.topbar-item {
  display: inline-flex;
  align-items: center;
}

.topbar-flow {
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.topbar-item,
.topbar-user {
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--chip-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.topbar-item {
  padding: 0 10px;
}

.topbar-user {
  padding: 0 11px;
  color: #dfe7f1;
  min-width: 0;
  max-width: min(280px, 100%);
}

.topbar-user span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-item:hover,
.topbar-user:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--accent);
}

.topbar-item-hot {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}

.topbar-item-current {
  background: var(--chip-active-bg, rgba(255, 255, 255, .14));
  border-color: var(--accent);
  cursor: default;
}

.topbar-item-current:hover {
  background: var(--chip-active-bg, rgba(255, 255, 255, .14));
  border-color: var(--accent);
}

.topbar-dashboard {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.status-ok {
  background: #59c986;
  box-shadow: 0 0 0 3px rgba(89, 201, 134, .14);
}

.status-watch {
  background: #f5a742;
  box-shadow: 0 0 0 3px rgba(245, 167, 66, .16);
}

.status-danger {
  background: #ef5369;
  box-shadow: 0 0 0 3px rgba(239, 83, 105, .16);
}

.topbar-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .topbar-alert {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .topbar-flow {
    width: 100%;
    padding-bottom: 2px;
  }

  .topbar-user {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .topbar-alert {
    padding: 7px 10px;
  }

  .topbar-item {
    min-height: 34px;
  }
}

/* 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 {
  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-suspi { --pin-accent: #22c55e; }  /* vert */
.pins-tracages .suspi-item.type-multi { --pin-accent: #f59e0b; }  /* orange */
.pins-tracages .suspi-item.type-majeur { --pin-accent: #ef4444; } /* rouge */
/* Bloquants totaux: violet */
.pins-tracages .suspi-item.type-bloquant { --pin-accent: #8b5cf6; } /* violet */

.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; }

/* Suspi liée à un IM ouvert: griser et désactiver le bouton de déclaration */
.pins-tracages .suspi-item.im-open-linked {
  opacity: .65;
  filter: grayscale(20%);
}
.pins-tracages .suspi-item.im-open-linked .btn-im-decl { display: none !important; }
.pins-tracages .suspi-item .btn-im-decl[data-role="suspi-im-decl"] {
  display: block;
  width: 100%;
  text-align: center;
}

/* Suspi validée (IM déclaré) — style grisé léger pour indiquer qu'elle est traitée */
.pins-tracages .suspi-item.is-validated {
  opacity: .65;
  filter: grayscale(12%);
}

/* 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,
.pins-tracages .suspi-item.im-archived::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,
.pins-tracages .suspi-item.im-archived.ens-fnac::before {
  background-image: url('Images/Fnac.svg');
}
.pins-tracages .suspi-item.im-open.ens-darty::before,
.pins-tracages .suspi-item.im-archived.ens-darty::before {
  background-image: url('Images/Darty.svg');
}
.pins-tracages .suspi-item.im-open.ens-fnacdarty::before,
.pins-tracages .suspi-item.im-archived.ens-fnacdarty::before {
  background-image: url('Images/Fnac_Darty.svg');
}

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

/* Petites transitions d'apparition/disparition pour panneaux (Suspi/IM) */
.panel-animated {
  transition: opacity 160ms ease, transform 160ms ease;
}

/* 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 rouge pour indiquer un IM fermé */
.tag-closed,
.pins-tracages .tag-closed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #a33;
  color: #ff7b7b;
  background: rgba(255, 107, 107, 0.12);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  margin-left: 6px;
  width: auto;
  flex: 0 0 auto;
}

/* Tag vert pour indiquer une Suspi validée (prête IM) */
.tag-valid,
.pins-tracages .tag-valid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #1f8f4a;
  color: #86efac; /* vert clair */
  background: rgba(34, 197, 94, 0.12);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  margin-left: 6px;
  width: auto;
  flex: 0 0 auto;
}

/* Tag de type (Multi-Site/Majeur) — même code couleur que l'accent de carte, en texte */
.tag-type {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  margin-left: 6px;
  border: 1px solid color-mix(in srgb, var(--pin-accent, var(--accent)) 55%, transparent);
  color: var(--pin-accent, var(--accent));
  background: color-mix(in srgb, var(--pin-accent, var(--accent)) 14%, transparent);
}

/* Tag "déjà rattachée à un IM ouvert" — explique le grisé de la carte en texte */
.tag-linked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #3b6fa3;
  color: #8fc4ff;
  background: rgba(101, 183, 255, 0.12);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
}

/* (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; }

/* ===== Suspi — tags incidents dans le formulaire ===== */
.suspi-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.suspi-tags .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; /* mieux pour centrage vertical */
  cursor: pointer;
}
.suspi-tags .tag-incident .num { line-height: 1; display: inline-block; }
.suspi-tags .tag-remove {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px; /* plus compact */
  padding: 0; line-height: 0; font-size: 12px; /* centrage visuel du × */
  align-self: center; vertical-align: middle; /* aligné verticalement */
  border-radius: 999px;
  border: 1px solid #8a6d3b;
  color: #ffcb52;
  background: transparent;
  cursor: pointer;
}
.suspi-tags .tag-remove:hover { background: rgba(255, 203, 82, 0.15); }

/* (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; }
.col-extra-left > .section-form { padding: 12px; }
#suspi-form { padding: 12px; }
.mb-10 { margin-bottom: 10px; }
#im-status { margin: -6px 0 8px 0; }
#suspi-status { margin: -6px 0 8px 0; color: #ff6b6b; font-weight: 600; }
.row-flex-full { display: flex; gap: 8px; align-items: center; width: 100%; }
#suspi-hist-group { margin-top: 6px; }
#suspi-related { margin-top: 12px; }
#suspi-related > .section-form { padding: 10px; }
#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; }
#im-decl-panel, #im-resol-panel { padding: 12px; }
#imd-date1, #imd-date2, #imr-date { max-width: 180px; }
#imd-time1, #imd-time2, #imr-time { max-width: 140px; margin-left: 8px; }
#suspi-pins { margin-top: -10px; }

/* 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; }

/* 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);
}