/* ==========================================================================
   AllôRéKà — thème client osTicket : BASE COMMUNE
   Chargé APRÈS theme.css. Aucune couleur « en dur » : tout passe par les
   variables --ar-* définies par la feuille de marque (alloreka-fr.css OU
   alloreka-solutions.css, jamais les deux).
   Mise en page calquée sur les sites : bandeau pleine largeur, contenu centré
   (68 rem), titres 800, pastilles de navigation, polices système uniquement.
   ========================================================================== */

:root {
  /* Valeurs neutres de secours (toutes écrasées par la feuille de marque) */
  --ar-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ar-ink: #1f2430;      --ar-ink-soft: #5b6270;
  --ar-bg: #f5f6f8;       --ar-surface: #ffffff;   --ar-surface-alt: #eef0f4;
  --ar-line: #dfe3ea;     --ar-edge: #dfe3ea;
  --ar-primary: #ffd84d;  --ar-primary-hover: #ffd84d;  --ar-on-primary: #1f2430;
  --ar-secondary: #1b7f79; --ar-secondary-hover: #146560; --ar-on-secondary: #ffffff;
  --ar-accent: #ffd84d;   --ar-ring: #ffd84d;
  --ar-link: #1b7f79;     --ar-link-hover: #146560;
  --ar-band: #1f2430;     --ar-on-band: #ffffff;
  --ar-nav-bg: transparent; --ar-nav-ink: var(--ar-ink); --ar-nav-hover: var(--ar-surface-alt);
  --ar-ok-bg: #d8f3e8;   --ar-ok-ink: #14532d;   --ar-ok-edge: #1b7f79;
  --ar-warn-bg: #fff3cc; --ar-warn-ink: #5c3d00; --ar-warn-edge: #d9a400;
  --ar-err-bg: #fdecea;  --ar-err-ink: #8a1c14;  --ar-err-edge: #b3261e;
  --ar-info-bg: #e4eeeb; --ar-info-ink: #12303a; --ar-info-edge: #1b7f79;
  --ar-bw: 1px;            /* épaisseur des cadres (cartes, champs) */
  --ar-bw-btn: 2px;
  --ar-radius: 10px;  --ar-radius-sm: 8px;  --ar-radius-pill: 999px;
  --ar-shadow-card: none;  --ar-shadow-btn: none;  --ar-shadow-btn-hover: none;
  --ar-btn-hover: translateY(-1px);
  --ar-wrap: 68rem;
  --ar-band-soft: var(--ar-surface-alt);
  --ar-gutter: max(16px, env(safe-area-inset-left, 0px), calc((100% - var(--ar-wrap)) / 2));
}

/* ---------- Socle ---------------------------------------------------------- */
html { scroll-behavior: smooth; overflow-y: scroll; }
body {
  margin: 0;
  font-family: var(--ar-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ar-ink);
  background: var(--ar-bg);
  -webkit-font-smoothing: antialiased;
}
body, input, select, textarea, button { font-family: var(--ar-font); color: var(--ar-ink); }
* { box-sizing: border-box; }
input[type=checkbox], input[type=radio] { accent-color: var(--ar-secondary); }

h1, h2, h3, h4, .subject {
  font-family: var(--ar-font);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ar-ink);
}
h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-bottom: .6rem; }
h2, .subject { font-size: clamp(1.35rem, 3.2vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }

a, .link { color: var(--ar-link); transition: color .12s ease; }
a:hover, .link:hover { color: var(--ar-link-hover); border-bottom: 0; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: .12em; text-decoration-color: var(--ar-accent); }
hr { border-top: 1px solid var(--ar-line); }
.faded { color: var(--ar-ink-soft); }
:focus-visible { outline: 3px solid var(--ar-ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ar-accent); color: #231f4f; }
[hidden] { display: none !important; }

/* ---------- Structure : bandeau pleine largeur, contenu centré -------------- */
#container { width: auto; max-width: none; margin: 0; background: transparent; box-shadow: none; }
#header, #nav, #content, #footer { padding-left: var(--ar-gutter); padding-right: var(--ar-gutter); margin-left: 0; margin-right: 0; }

#header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem 1.5rem; height: auto; min-height: 4.5rem; padding-top: .8rem; padding-bottom: .8rem;
}
#header #logo { float: none; width: auto; height: auto; display: inline-flex; align-items: baseline; text-decoration: none; color: var(--ar-ink); border: 0; }
#header #logo:hover { text-decoration: none; }
#header #logo .valign-helper { display: none; }
#header #logo { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; white-space: nowrap; }
#header #logo i { font-style: normal; display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: var(--ar-accent); margin-left: .12em; }
#header #logo .sol { font-weight: 500; letter-spacing: -0.01em; }
#header .ar-back-row { margin-bottom: .35rem; }
.ar-back { display: inline-block; color: var(--ar-ink) !important; font-weight: 700; font-size: .95rem; text-decoration: none !important; padding: .4rem .8rem; border: 1.5px solid var(--ar-edge); border-radius: var(--ar-radius-pill); line-height: 1.3; }
.ar-back:hover { background: var(--ar-surface-alt); }

/* Bandeau d'annonce */
.ar-notice { background: var(--ar-primary); color: var(--ar-on-primary); font-size: .92rem; font-weight: 700; text-align: center; padding: .4rem 1rem; }
#header p, #header .pull-right { float: none; width: auto; margin: 0; padding: 0; text-align: right; font-size: .95rem; color: var(--ar-ink-soft); }

#nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem;
  height: auto; margin-top: 0; margin-bottom: 0; padding-top: .55rem; padding-bottom: .55rem;
  background: none; border-top: 0; box-shadow: none; white-space: normal;
}
#nav li { display: block; }
#nav li a {
  float: none; display: inline-block; height: auto; line-height: 1.25; margin: 0;
  padding: .45rem .85rem .45rem 2.35rem; background-position: .8rem 50%;
  font-size: .95rem; font-weight: 700; color: var(--ar-nav-ink); background-color: var(--ar-nav-bg);
  border-radius: var(--ar-radius-pill); transition: background-color .12s ease, transform .12s ease;
}
#nav li a:hover { background-color: var(--ar-nav-hover); color: var(--ar-nav-ink); text-decoration: none; }
#nav li a.active, #nav li a.active:hover { background-color: var(--ar-primary); color: var(--ar-on-primary); }

#content { height: auto; min-height: 22rem; margin-top: 0; margin-bottom: 0; padding-top: clamp(1.8rem, 5vw, 3rem); padding-bottom: 2.5rem; }
.main-content { width: auto; max-width: 100%; }

#footer { margin-top: 1rem; padding-top: 1.6rem; padding-bottom: 2.4rem; font-size: .95rem; color: var(--ar-ink-soft); text-align: left; border-top: 1px solid var(--ar-line); }
#footer.ar-foot { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; }
.ar-foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
#poweredBy { font-size: .85rem; opacity: .85; }
@media (prefers-color-scheme: dark) { #footer #poweredBy { filter: brightness(0) invert(1); opacity: .7; } }
#footer a { color: var(--ar-ink-soft); }
#footer a:hover { color: var(--ar-ink); }

/* ---------- Boutons -------------------------------------------------------- */
.button, .button:visited {
  display: inline-block; max-width: none; padding: .8rem 1.3rem; font-size: 1rem; font-weight: 800; line-height: 1.3;
  color: var(--ar-on-primary); background: var(--ar-primary);
  border: var(--ar-bw-btn) solid var(--ar-btn-edge, var(--ar-primary));
  border-radius: var(--ar-radius-pill); box-shadow: var(--ar-shadow-btn); text-shadow: none; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.button:hover { background: var(--ar-primary-hover); color: var(--ar-on-primary); text-decoration: none; transform: var(--ar-btn-hover); box-shadow: var(--ar-shadow-btn-hover); }
.button:active { top: 0; }
.green.button, .green.button:visited { background: var(--ar-primary); color: var(--ar-on-primary); }
.green.button:hover { background: var(--ar-primary-hover); }
.blue.button, .blue.button:visited { background: var(--ar-secondary); color: var(--ar-on-secondary); border-color: var(--ar-btn-edge, var(--ar-secondary)); }
.blue.button:hover { background: var(--ar-secondary-hover); }

input[type=submit], input[type=reset], input[type=button], button {
  padding: .7rem 1.2rem; font-size: 1rem; font-weight: 800; line-height: 1.3;
  border: var(--ar-bw-btn) solid var(--ar-btn-edge, var(--ar-ink)); border-radius: var(--ar-radius-pill);
  background: var(--ar-surface); color: var(--ar-ink); box-shadow: var(--ar-shadow-btn);
  transition: transform .12s ease, box-shadow .12s ease;
}
input[type=reset], input[type=button], button { background: transparent; }
input[type=submit], button[type=submit] { background: var(--ar-primary); color: var(--ar-on-primary); border-color: var(--ar-btn-edge, var(--ar-primary)); }
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover { transform: var(--ar-btn-hover); box-shadow: var(--ar-shadow-btn-hover); }

.action-button {
  background: var(--ar-surface); color: var(--ar-ink) !important; border: 2px solid var(--ar-edge);
  border-radius: var(--ar-radius-pill); padding: 1px 12px; line-height: 22px; font-weight: 700;
}
.action-button:hover { border-color: var(--ar-ink); }
.action-button span, .action-button a { color: var(--ar-ink) !important; }
.action-button { font-size: .9rem; }

/* ---------- Messages ------------------------------------------------------- */
#msg_notice, #msg_warning, .warning-banner, #msg_error, #msg_info {
  height: auto; min-height: 16px; line-height: 1.45; margin-bottom: 1rem; padding: .7rem 1rem .7rem 2.6rem;
  border: var(--ar-bw) solid; border-radius: var(--ar-radius-sm); font-weight: 600; background-position: .9rem 50%;
}
#msg_notice { background-color: var(--ar-ok-bg);   color: var(--ar-ok-ink);   border-color: var(--ar-ok-edge); }
#msg_warning, .warning-banner { background-color: var(--ar-warn-bg); color: var(--ar-warn-ink); border-color: var(--ar-warn-edge); }
#msg_error  { background-color: var(--ar-err-bg);  color: var(--ar-err-ink);  border-color: var(--ar-err-edge); }
#msg_info   { background-color: var(--ar-info-bg); color: var(--ar-info-ink); border-color: var(--ar-info-edge); padding-left: 1rem; }
.warning { background: var(--ar-warn-bg); color: var(--ar-warn-ink); }
.warning strong, .error, #clientLogin strong { color: var(--ar-err-ink); }
font.error, span.error, em.error { color: var(--ar-err-text, var(--ar-err-ink)); }   /* astérisques et messages hors encadré */

/* ---------- Accueil et pages « éditoriales » (composants .ar-*) ------------- */
body.ar-home #content { padding: 0; min-height: 0; }
body.ar-home #footer { margin-top: 0; }
.ar-wrap { padding-left: var(--ar-gutter); padding-right: var(--ar-gutter); }
.ar-band { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.ar-band.soft { background: var(--ar-band-soft); }
.ar-hero { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem); }
.ar-hero h1 { font-size: clamp(2.2rem, 6.4vw, 3.8rem); max-width: 18ch; margin: 0; }
.ar-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-secondary); margin: 0 0 .9rem; }
.ar-lede { color: var(--ar-ink-soft); max-width: 60ch; margin: 1.2rem 0 1.6rem; font-size: 1.15rem; }
.ar-hero .ar-lede { margin-bottom: 0; }
h1 u { text-decoration-color: var(--ar-accent); text-decoration-thickness: .13em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.ar-band h2 { margin: 0; }

.ar-prep { background: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-left: 5px solid var(--ar-accent); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-card); padding: clamp(1.3rem, 4vw, 2rem); margin-bottom: 1.4rem; max-width: 70ch; }
.ar-prep h3 { font-size: 1.4rem; margin: 0 0 .5rem; }
.ar-prep > p { color: var(--ar-ink-soft); }
.ar-prep ol, .ar-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ar-prep ol { margin-top: 1.2rem; gap: 1rem; counter-reset: q; }
.ar-prep li { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .8rem; align-items: start; counter-increment: q; }
.ar-prep li::before { content: counter(q); font-weight: 800; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ar-surface-alt); color: var(--ar-ink); }
.ar-prep li strong { display: block; font-size: 1.05rem; }
.ar-prep li span { color: var(--ar-ink-soft); font-size: .97rem; }
.ar-reassure { font-size: .95rem; color: var(--ar-ink-soft); }
.ar-prep .ar-reassure { margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--ar-line); }

.ar-choices { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ar-choices { grid-template-columns: 1fr 1fr; } }
.ar-choices > *, .ar-two > * { min-width: 0; }
.ar-card { background: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-card); padding: clamp(1.3rem, 4vw, 2rem); display: grid; gap: .9rem; align-content: start; }
.ar-card h3 { font-size: 1.5rem; margin: 0; }
.ar-card p { color: var(--ar-ink-soft); margin: 0; }
.ar-card .button { justify-self: start; }
.ar-free { display: inline-block; justify-self: start; padding: .3rem .7rem; background: var(--ar-primary); color: var(--ar-on-primary); font-weight: 700; border-radius: var(--ar-radius-sm); font-size: .9rem; }
.ar-already { margin: 1.6rem 0 0; color: var(--ar-ink-soft); }

.ar-steps { margin-top: 1.6rem; border-top: 2px solid var(--ar-ink); counter-reset: step; }
.ar-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem 1rem; padding-block: 1.2rem; border-bottom: 1px solid var(--ar-line); counter-increment: step; align-items: start; }
.ar-steps li::before { content: counter(step); font-weight: 800; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ar-primary); color: var(--ar-on-primary); }
.ar-steps li > div { min-width: 0; }
.ar-steps strong { display: block; font-size: 1.15rem; font-weight: 800; }
.ar-steps span { color: var(--ar-ink-soft); }

.ar-two { display: grid; gap: 2rem 3rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ar-two { grid-template-columns: 1fr 1fr; } }
.ar-two h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.ar-two p, .ar-two li { color: var(--ar-ink-soft); }
.ar-two p { margin: 0; }
.ar-two ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* Formulaire de demande */
.ar-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0 0; }
.ar-buttons input { margin: 0; }
#ticketForm em[style], #clientLogin em[style], #ticketForm .field em { color: var(--ar-ink-soft) !important; }
.redactor-box, .redactor-styles, .redactor-in, .redactor-toolbar { background: var(--ar-surface); color: var(--ar-ink); border-color: var(--ar-edge); }
.redactor-toolbar a { color: var(--ar-ink); }
.redactor-box { border-radius: var(--ar-radius-sm); }

/* ---------- Base de connaissances / FAQ ----------------------------------- */
#kb { padding: 0; margin: .3rem 0; }
#kb > li { padding: 1rem 1.2rem; margin: 0 0 .8rem; background: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-card); }
#kb > li h4 span { color: var(--ar-ink-soft); }
.featured-category { box-sizing: border-box; padding-right: .8rem; }
.featured-category i { color: var(--ar-secondary); text-shadow: none; }
.category-name { font-weight: 800; }
.article-title { font-weight: 700; }
#faq ol { border-top: 2px solid var(--ar-ink); }
#faq ol li { color: var(--ar-ink-soft); }
#faq ol li a { border-bottom: 1px solid var(--ar-line); padding-top: .5rem; padding-bottom: .5rem; line-height: 1.4; }
#faq ol li a:hover { background-color: var(--ar-surface-alt); text-decoration: none; }
#faq .article-meta { background: var(--ar-surface-alt); border-radius: var(--ar-radius-sm); }
#kb-search #breadcrumbs, #kb-search #breadcrumbs a { color: var(--ar-ink-soft); }

/* ---------- Formulaires ---------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=url],
select, textarea,
#ticketForm div input, #clientLogin div input, #ticketForm div textarea, #clientLogin div textarea,
#reply input[type=text], #reply #response_options textarea {
  border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius-sm);
  background: var(--ar-surface); color: var(--ar-ink); padding: .6rem .8rem; font-size: 1rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#ticketForm div input[type=file], #clientLogin div input[type=file],
#ticketForm div input[type=checkbox], #ticketForm div input[type=radio] { border: 0; padding: 0; background: none; }
input:focus, select:focus, textarea:focus, #ticketForm div input:focus, #ticketForm div textarea:focus {
  outline: 3px solid var(--ar-ring); outline-offset: 2px; border-color: var(--ar-ink);
}
#ticketForm td textarea, #clientLogin td textarea, #ticketForm div textarea, #clientLogin div textarea { width: 100%; max-width: 100%; }
#reply textarea { width: 100% !important; max-width: 100% !important; }
#ticketForm > table { table-layout: auto; width: 100%; }
#ticketForm > table td { width: auto; padding: .35rem .8rem .35rem 0; }
#ticketForm > table td:first-child { width: 11rem; }
label.required, span.required { font-weight: 800; }
#ticketForm td em, #clientLogin td em, #ticketForm div em, #clientLogin div em { color: var(--ar-ink-soft); }
#ticketForm div.error input, #clientLogin div.error input, .error input { border-color: var(--ar-err-edge); }
#ticketForm div.error label, #clientLogin div.error label { color: var(--ar-err-ink); }
.captcha { border-radius: var(--ar-radius-sm); }

/* ---------- Connexion ------------------------------------------------------ */
#clientLogin {
  margin-top: .5rem; padding: 1.6rem 1.8rem; background-color: var(--ar-surface);
  border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-card);
}
#clientLogin input[type=text], #clientLogin input[type=password] { padding: .6rem .8rem; margin-bottom: 1rem; }
#clientLogin input[type=submit] { padding: .7rem 1.4rem; }
.login-box { box-shadow: none; border-right: 1px solid var(--ar-line); }
.rtl .login-box { border-right: 0; border-left: 1px solid var(--ar-line); }
.external-auth-box { border: 2px solid var(--ar-edge); border-radius: var(--ar-radius-sm); }
.external-auth-icon, .external-auth-name { color: var(--ar-ink); }
.external-auth-icon { border-right-color: var(--ar-line); }

/* ---------- Tickets -------------------------------------------------------- */
.Icon { color: var(--ar-link); }
#ticketTable { width: 100%; border: var(--ar-bw) solid var(--ar-edge); border-collapse: separate; border-spacing: 0; border-radius: var(--ar-radius); overflow: hidden; background: var(--ar-surface); box-shadow: var(--ar-shadow-card); }
#ticketTable caption { padding: .7rem 1rem; color: var(--ar-ink); background: var(--ar-surface); border: 0; border-bottom: 1px solid var(--ar-line); font-weight: 800; }
#ticketTable th { height: 2.6rem; line-height: 2.6rem; padding: 0 .9rem; font-weight: 800; background: var(--ar-band); color: var(--ar-on-band); border: 0; }
#ticketTable th a { color: var(--ar-on-band); }
#ticketTable td { padding: .6rem .9rem; border: 0; border-bottom: 1px solid var(--ar-line); }
#ticketTable tr:last-child td { border-bottom: 0; }
#ticketTable tr.alt td { background: var(--ar-surface-alt); }
#ticketTable tr:hover td { background: var(--ar-info-bg); color: var(--ar-info-ink); }
a.refresh, i.refresh { color: var(--ar-link); }
a.refresh { border: 2px solid var(--ar-edge); border-radius: var(--ar-radius-pill); height: auto; line-height: 1.6; }

.infoTable, .infoTable th, table.custom-data th { background: var(--ar-surface-alt); }
table .headline, table.custom-data .headline { background: var(--ar-surface); border-bottom: 2px solid var(--ar-line); }
.search.well, .searchbar .search, .search-form .search { background-color: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius-sm); box-shadow: none; }
.search.well { margin-top: 0; background-color: var(--ar-surface-alt); }
#ticketInfo h1 { border-bottom: 2px solid var(--ar-line); padding-bottom: .6rem; }

/* Fil de discussion : un seul cadre par message */
#ticketThread { border-bottom: 0; }
#ticketThread::before, .thread-entry::before, .thread-entry::after { display: none; }
.thread-entry { margin-bottom: 1.2rem; background: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius); overflow: hidden; box-shadow: var(--ar-shadow-card); }
.thread-entry .header { border: 0; border-bottom: 1px solid var(--ar-line); border-radius: 0; background: var(--ar-surface-alt); padding: .55rem 1rem; }
.thread-entry.avatar .header:before, .thread-entry.avatar .header:after { display: none; }
/* theme.css colore ces en-têtes en dur (#c3d9ff / #ddd) avec une spécificité plus forte */
.thread-entry.message .header, .thread-entry.response .header { background: var(--ar-surface-alt); color: var(--ar-ink); }
.thread-entry .thread-body { border: 0; border-radius: 0; padding: .2rem 1rem .8rem; }
.thread-entry > .avatar { border-radius: var(--ar-radius-sm); }
.thread-body .attachments { background: var(--ar-surface-alt); border-top: 1px dashed var(--ar-line); margin: 0 -1rem; padding: .4rem 1rem; top: .8rem; }
.thread-event .type-icon { background: var(--ar-surface-alt); border: 1px solid var(--ar-line); border-radius: var(--ar-radius-sm); }
.thread-event .type-icon.dark { background: var(--ar-ink-soft); border-color: var(--ar-ink-soft); }
.thread-event .type-icon::after { border-color: var(--ar-bg); }
.freetext-files { background: var(--ar-surface-alt); border: 1px dashed var(--ar-line); border-radius: var(--ar-radius-sm); }

#reply { margin-top: 1rem; padding: 1.2rem 1.4rem; background: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-card); }
#reply h2 { border-bottom: 2px dotted var(--ar-line); }

/* Pastilles de statut */
.label { padding: .1rem .6rem; background-color: var(--ar-ink-soft); color: var(--ar-surface); text-shadow: none; border-radius: var(--ar-radius-pill); font-weight: 800; }
.label-bare { background: transparent; border: 2px solid var(--ar-ink-soft); color: var(--ar-ink-soft); }

/* Pagination */
#pagination li a { border-radius: var(--ar-radius-sm); padding: .2rem .6rem; color: var(--ar-ink); font-weight: 700; }
#pagination li a:hover { background: var(--ar-surface-alt); color: var(--ar-ink); text-decoration: none; }
#pagination .active { background: var(--ar-primary); color: var(--ar-on-primary); border-radius: var(--ar-radius-sm); padding: .2rem .6rem; }
#pagination .previousOff, #pagination .nextOff { color: var(--ar-ink-soft); }

/* Barre latérale */
.sidebar { margin-left: 1.5rem; }
.sidebar .content { padding: 1rem; background: var(--ar-surface); border: var(--ar-bw) solid var(--ar-edge); border-radius: var(--ar-radius); box-shadow: var(--ar-shadow-card); }
.sidebar section .header { font-weight: 800; }

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width: 760px) {
  #ticketForm > table, #ticketForm > table tbody, #ticketForm > table tr, #ticketForm > table td { display: block; width: auto !important; }
  .span4, .span8 { display: block; width: 100%; margin: 0; }
  .sidebar { width: auto; margin-left: 0; }
  .login-box { width: 100%; display: block; border-right: 0; }
  #clientLogin .instructions { display: block; padding-right: 0; }
  .thread-entry.avatar, .thread-entry.response.avatar { margin-left: 0; margin-right: 0; }
  .thread-entry > .avatar { display: none; }
  .thread-event { margin-left: 0; }
  #ticketTable { display: block; overflow-x: auto; }
  #header { flex-direction: column; align-items: flex-start; }
  #header p, #header .pull-right { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .button:hover, input[type=submit]:hover, button:hover, #nav li a:hover { transform: none !important; }
}

/* Formulaires en petit écran : champs sur toute la largeur, libellé au-dessus (les « size=40 » d'osTicket débordent sinon) */
@media (max-width: 640px) {
  #ticketForm table, #ticketForm tbody, #ticketForm tr, #ticketForm td,
  #clientLogin table, #clientLogin tbody, #clientLogin tr, #clientLogin td { display: block; width: auto; }
  #ticketForm input[type=text], #ticketForm input[type=email], #ticketForm input[type=password], #ticketForm input[type=tel],
  #ticketForm select, #ticketForm textarea,
  #clientLogin input[type=text], #clientLogin input[type=password] { width: 100%; max-width: 100%; box-sizing: border-box; }
}