/* ==========================================================================
   AllôRéKà — marque « alloreka.fr » : charte légère et ludique
   Reprise de la charte du site (index.html) : bordures encre épaisses, ombres
   décalées, pastilles jaune / rose / ciel, titres 800, polices système.
   Chargé uniquement quand la marque résolue est "fr".
   ========================================================================== */

:root {
  --ar-font: ui-rounded, "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --ar-pop-yellow: #ffd84d;
  --ar-pop-pink: #ff8fa8;
  --ar-pop-sky: #7fd6ee;
  --ar-pop-mint: #b9ebc6;     /* vert doux de la charte « post-it », pour les succès */
  --ar-on-pop: #231f4f;

  --ar-ink: #231f4f;
  --ar-ink-soft: #55507f;
  --ar-bg: #fbf9ff;
  --ar-surface: #ffffff;
  --ar-surface-alt: #fbf9ff;
  --ar-line: color-mix(in srgb, var(--ar-ink) 15%, var(--ar-surface));
  --ar-edge: var(--ar-ink);
  --ar-shadow-ink: #231f4f;

  --ar-primary: var(--ar-pop-yellow);  --ar-primary-hover: var(--ar-pop-yellow);  --ar-on-primary: var(--ar-on-pop);
  --ar-secondary: var(--ar-pop-sky);   --ar-secondary-hover: var(--ar-pop-sky);   --ar-on-secondary: var(--ar-on-pop);
  --ar-accent: var(--ar-pop-pink);
  --ar-ring: var(--ar-pop-pink);
  --ar-link: var(--ar-ink);  --ar-link-hover: var(--ar-ink);
  --ar-band: var(--ar-pop-sky);  --ar-on-band: var(--ar-on-pop);
  --ar-nav-bg: transparent;  --ar-nav-ink: var(--ar-ink);  --ar-nav-hover: var(--ar-surface);

  /* Statuts : pastilles « pop » à bordure encre, texte encre */
  --ar-ok-bg: var(--ar-pop-mint);    --ar-ok-ink: var(--ar-on-pop);    --ar-ok-edge: var(--ar-ink);
  --ar-warn-bg: var(--ar-pop-yellow); --ar-warn-ink: var(--ar-on-pop);  --ar-warn-edge: var(--ar-ink);
  --ar-err-bg: var(--ar-pop-pink);   --ar-err-ink: var(--ar-on-pop);   --ar-err-edge: var(--ar-ink);
  --ar-info-bg: var(--ar-pop-sky);   --ar-info-ink: var(--ar-on-pop);  --ar-info-edge: var(--ar-ink);

  --ar-bw: 3px;  --ar-bw-btn: 3px;  --ar-btn-edge: var(--ar-ink);
  --ar-radius: 1.2rem;  --ar-radius-sm: .9rem;
  --ar-shadow-card: 5px 5px 0 var(--ar-shadow-ink);
  --ar-shadow-btn: 4px 4px 0 var(--ar-shadow-ink);
  --ar-shadow-btn-hover: 6px 6px 0 var(--ar-shadow-ink);
  --ar-btn-hover: translate(-2px, -2px);
  --ar-wrap: 66rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ar-ink: #f3f0ff;  --ar-ink-soft: #b9b4e0;
    --ar-bg: #16132f;   --ar-surface: #221e48;  --ar-surface-alt: #16132f;
    --ar-shadow-ink: #0a0818;  --ar-err-text: #ff9db4;
    --ar-nav-bg: #f3f0ff;  --ar-nav-ink: #231f4f;  --ar-nav-hover: #ffffff;  /* pastilles claires : icônes PNG lisibles */
    color-scheme: dark;
  }
}

/* ---------- Wordmark : pastille « ··· » + AllôRéKà (comme le site) --------- */
#header #logo { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
#header #logo .mark {
  display: inline-grid; place-items: center; width: 2.3rem; height: 1.9rem; line-height: 1;
  font-size: 1rem; letter-spacing: .05em; color: var(--ar-on-pop); background: var(--ar-pop-yellow);
  border: 3px solid var(--ar-ink); border-radius: .8rem .8rem .8rem .2rem;
}

/* ---------- Page ---------------------------------------------------------- */
#header { border-bottom: 3px solid var(--ar-ink); background: var(--ar-bg); }
#nav { background: var(--ar-bg); border-bottom: 0; }
#nav li a { border: 3px solid transparent; padding-top: .35rem; padding-bottom: .35rem; }
#nav li a:hover { border-color: var(--ar-ink); transform: translate(-1px, -1px); }
#nav li a.active, #nav li a.active:hover { background-color: var(--ar-pop-pink); color: var(--ar-on-pop); border-color: var(--ar-ink); }

/* Titre : surligneur jaune, comme « en toute simplicité » */
#content h1:not(:has(u)), #content h1 u {
  width: fit-content; max-width: 100%; padding-inline: .1em; color: var(--ar-ink); text-decoration: none;
  background: linear-gradient(transparent 58%, var(--ar-pop-yellow) 58%, var(--ar-pop-yellow) 92%, transparent 92%);
}
@media (prefers-color-scheme: dark) {
  #content h1:not(:has(u)), #content h1 u { background: linear-gradient(transparent 58%, rgba(255, 216, 77, .45) 58%, rgba(255, 216, 77, .45) 92%, transparent 92%); }
}
#ticketInfo h1 { width: auto; background: none; }

a, .link { text-decoration: underline; text-decoration-color: var(--ar-pop-pink); text-decoration-thickness: .13em; text-underline-offset: .15em; }
a:hover, .link:hover { text-decoration-color: var(--ar-pop-yellow); }
#nav li a, #header #logo, .ar-back, .button, .action-button, #pagination a, #faq ol li a, #footer a { text-decoration: none; }
#footer a { text-decoration: underline; }

/* Accueil : cartes « autocollants » jaune et ciel, légèrement inclinées */
.ar-band.soft { background: color-mix(in srgb, var(--ar-pop-sky) 22%, var(--ar-bg)); }
.ar-prep { border: 3px solid var(--ar-ink); border-left-width: 3px; transform: rotate(-.3deg); }
.ar-prep li::before { background: var(--ar-pop-pink); color: var(--ar-on-pop); border: 2px solid var(--ar-ink); }
.ar-steps li::before { border: 2px solid var(--ar-ink); }
.ar-choices .ar-card:nth-child(1) { background: var(--ar-pop-yellow); transform: rotate(-.8deg); }
.ar-choices .ar-card:nth-child(2) { background: var(--ar-pop-sky);    transform: rotate(.8deg); }
.ar-choices .ar-card h3, .ar-choices .ar-card p { color: var(--ar-on-pop); }
.ar-card .button { background: var(--ar-surface); color: var(--ar-ink); }
.ar-free { background: var(--ar-surface); color: var(--ar-ink); border: 2px solid var(--ar-ink); border-radius: 999px; }
.ar-steps { border-top-color: var(--ar-ink); }
.ar-notice { border-bottom: 3px solid var(--ar-ink); }
.ar-back { border: 3px solid var(--ar-ink); }
.ar-back:hover { background: var(--ar-pop-yellow); color: var(--ar-on-pop) !important; }
#footer { border-top: 3px solid var(--ar-ink); }

/* Boutons : jaune, relief décalé — le bouton « Contact » du site est rose */
.blue.button { background: var(--ar-pop-sky); }
input[type=submit], button[type=submit] { background: var(--ar-pop-yellow); color: var(--ar-on-pop); }
input[type=reset], input[type=button], button { background: var(--ar-surface); color: var(--ar-ink); }
.button:active, input[type=submit]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ar-shadow-ink); }

/* Pastilles (chips) : statuts */
.label { background-color: var(--ar-surface); color: var(--ar-ink); border: 2px solid var(--ar-ink); font-size: .82rem; }
.label-bare { border-color: var(--ar-ink); color: var(--ar-ink); }

/* Fil de discussion : bulles « chat » — client = fond de page, équipe = jaune */
.thread-entry { border-radius: 1.2rem; }
.thread-entry .header { border-bottom: 2px solid var(--ar-ink); font-weight: 800; }
.thread-entry.message { background: var(--ar-surface-alt); border-bottom-left-radius: .3rem; margin-right: 4rem; }
.thread-entry.message .header { background: var(--ar-pop-sky); color: var(--ar-on-pop); }
.thread-entry.response { background: var(--ar-pop-yellow); color: var(--ar-on-pop); border-bottom-right-radius: .3rem; margin-left: 4rem; }
.thread-entry.response .header { background: var(--ar-pop-pink); color: var(--ar-on-pop); }
.thread-entry.response .thread-body, .thread-entry.response .thread-body a { color: var(--ar-on-pop); }
.thread-body .attachments { background: transparent; border-top: 2px dashed var(--ar-ink); }

/* Cartes & encarts */
#kb > li { border-left-width: 10px; border-left-color: var(--ar-pop-sky); }
#kb > li:nth-child(4n+2) { border-left-color: var(--ar-pop-yellow); }
#kb > li:nth-child(4n+3) { border-left-color: var(--ar-pop-pink); }
#kb > li:nth-child(4n+4) { border-left-color: var(--ar-pop-mint); }
#faq ol { border-top-color: var(--ar-ink); }
#faq ol li a { border-bottom-color: var(--ar-ink); }
#ticketTable th { background: var(--ar-pop-sky); color: var(--ar-on-pop); border-bottom: 3px solid var(--ar-ink); }
#ticketTable th a { color: var(--ar-on-pop); }
#ticketTable caption { background: transparent; color: var(--ar-ink); border: 0; padding: 0 0 .6rem; font-size: 1.3rem; font-weight: 800; }
#ticketTable { border-collapse: separate; }
#ticketTable tr.alt td { background: var(--ar-surface-alt); }
#ticketTable tr:hover td { background: var(--ar-pop-yellow); color: var(--ar-on-pop); }
#ticketTable td { border-bottom: 1px solid var(--ar-line); }
#reply { border-radius: var(--ar-radius); }
#clientLogin { background-color: var(--ar-surface); }
.note, .search.well { border: 3px dashed var(--ar-ink); background: transparent; }
.sidebar .content { background: var(--ar-surface); }

#footer { font-weight: 600; }
#footer p::before { content: "✨ "; }
@media (prefers-reduced-motion: reduce) {
  .ar-prep, .ar-choices .ar-card { transform: none !important; }
}
@media (max-width: 760px) {
  .thread-entry.message { margin-right: .8rem; }
  .thread-entry.response { margin-left: .8rem; }
}