/* ==========================================================================
   DUONEXIA — habillage de la plateforme de signature
   --------------------------------------------------------------------------
   Injecte par le sidecar nginx, apres la feuille de l'application. Celle-ci
   n'est pas modifiee : on redefinit seulement ses variables de theme, ce qui
   survit aux mises a jour d'image et evite un fork.

   Socle DaisyUI v4. Le theme d'origine est declare sur :root en HSL nu
   (« H S% L% », sans hsl()). On redeclare les memes tokens sur html[data-theme]
   — specificite superieure a :root, donc la redefinition l'emporte quel que
   soit l'ordre de chargement.

   MODE CLAIR (« papier » de la charte), et c'est deliberé.
   L'application code en dur des fonds blancs dans la barre d'outils de
   l'editeur, le panneau de types de champs et plusieurs badges. En basculant la
   base en sombre, --bc passe en texte clair et ces zones deviennent du blanc
   sur blanc. Ce n'est pas rattrapable proprement : il faudrait repeindre chaque
   ecran a la main, et chaque mise a jour rouvrirait des trous. Le mode papier
   de la charte donne la meme identite sans ce risque, et va mieux a une
   application qui affiche des documents — lesquels sont blancs.

   Charte : C:/Dev/DuoNexia/brand/README.md
   ========================================================================== */

/* ------------------------------------------------------------------ Fontes */
/* Auto-hebergees. Une plateforme de signature ne doit pas transmettre l'IP de
   ses signataires a un tiers a chaque chargement de page : pas de Google Fonts. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/duonexia/fonts/archivo-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;           /* fonte variable : couvre 400/500/600 */
  font-display: swap;
  src: url('/duonexia/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/duonexia/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* ------------------------------------------------------- Tokens de marque */
html[data-theme] {
  --dnx-paper:    40 26% 93%;    /* #f2efe9 — fond de page */
  --dnx-surface:  45 100% 99%;   /* #fffefb — cartes, panneaux, champs */
  --dnx-surface-2:40 36% 95%;    /* #f7f4ee — surface survolee */
  --dnx-text:    213 31% 6%;     /* #0a0e13 — titres et texte fort */
  --dnx-text-2:  211 13% 34%;    /* #4a5561 — corps */
  --dnx-text-3:  211 12% 42%;    /* #5f6b78 — legendes. Plancher absolu. */
  --dnx-line:     38 22% 83%;    /* #ddd6ca — regle 1px */
  --dnx-line-2:   39 18% 74%;    /* #c9c1b2 — bordure de composant */
  --dnx-line-3:   39 13% 61%;    /* #a89f8e — filet d'ouverture */

  /* Vermillon de mode clair. #d63f0a donne 4.0:1 sur le papier : suffisant pour
     un bouton ou un filet, insuffisant pour du texte courant. D'ou accent-ink a
     5.4:1, reserve a tout texte accentue sous 18 px. */
  --dnx-accent:    16 91% 44%;   /* #d63f0a — boutons, filets, symboles */
  --dnx-accent-2:  14 90% 37%;   /* #b33209 — survol d'un bouton plein */
  --dnx-accent-ink:14 90% 37%;   /* #b33209 — texte accentue */
  --dnx-on-accent: 45 100% 99%;  /* #fffefb — texte pose sur l'accent */

  --dnx-ok:      152 60% 30%;    /* #1f7a50 */
  --dnx-warn:     37 70% 35%;    /* #96661a */
  --dnx-err:       0 68% 41%;    /* #b02222 */

  /* ------------------------------------------------- Remappage DaisyUI v4 */
  /* b1 = fond de page, b2/b3 montent en elevation. Meme sens que le theme
     d'origine : on ne fait que changer les teintes, pas la hierarchie — c'est
     precisement ce qui evite de casser les ecrans a fond blanc code en dur. */
  --b1:  var(--dnx-paper);
  --b2:  var(--dnx-surface);
  --b3:  var(--dnx-surface-2);
  --bc:  var(--dnx-text);

  /* Action. primary et accent partagent le vermillon : les deux designent une
     action, les distinguer inventerait une couleur que la charte n'a pas. */
  --p:   var(--dnx-accent);
  --pf:  var(--dnx-accent-2);
  --pc:  var(--dnx-on-accent);
  --a:   var(--dnx-accent);
  --af:  var(--dnx-accent-2);
  --ac:  var(--dnx-on-accent);

  /* Secondaire et neutre : des gris chauds. Le bleu froid #2f6bff de la charte
     est reserve aux degrades de halo, jamais a un composant. */
  --s:   var(--dnx-line-3);
  --sf:  var(--dnx-line-2);
  --sc:  var(--dnx-text);
  --n:   var(--dnx-text);
  --nf:  var(--dnx-text-2);
  --nc:  var(--dnx-surface);

  /* Couleurs de service : separees de l'accent, sinon une erreur de formulaire
     est indiscernable d'un bouton d'action. */
  --su:  var(--dnx-ok);     --suc: 45 100% 99%;
  --wa:  var(--dnx-warn);   --wac: 45 100% 99%;
  --er:  var(--dnx-err);    --erc: 45 100% 99%;
  --in:  var(--dnx-text-2); --inc: 45 100% 99%;

  /* ------------------------------------------------------------- Formes */
  /* L'application livre des boutons en pilule (1.9rem). La charte impose 3px :
     c'est le changement le plus visible, et le plus identitaire. */
  --rounded-btn:   3px;
  --rounded-badge: 3px;
  --rounded-box:   10px;   /* grands panneaux uniquement */
  --tab-radius:    3px;
  --border-btn:    1px;

  /* Mouvement : pas de rebond. 0.95 faisait sauter le bouton a l'appui —
     registre technique, pas ludique. */
  --animation-btn:   0.22s;
  --animation-input: 0.16s;
  --btn-focus-scale: 0.98;
  --btn-text-case:   none;   /* les CAPS sont reservees au mono */

  color-scheme: light;
}

/* --------------------------------------------------------- Typographie */
html[data-theme] body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Archivo 800, interlettrage negatif : plus le corps est grand, plus il serre. */
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] .text-4xl,
html[data-theme] .text-3xl,
html[data-theme] .text-2xl {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
html[data-theme] h1,
html[data-theme] .text-4xl { letter-spacing: -0.05em; line-height: 0.98; }

/* Les chiffres qui s'empilent doivent s'aligner. */
html[data-theme] table,
html[data-theme] .font-mono,
html[data-theme] code,
html[data-theme] pre {
  font-variant-numeric: tabular-nums;
}
html[data-theme] .font-mono,
html[data-theme] code,
html[data-theme] pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------- Le logo */
/* Le symbole d'origine porte sa couleur en style inline. On le retire et on pose
   la jonction Duonexia a la place. Le mot qui le suit est remplace en amont par
   le proxy (sub_filter), pas ici : un nœud texte se remplace mal en CSS, et
   font-size:0 + ::after casse la selection et les lecteurs d'ecran.

   jonction-header.svg porte ses couleurs en dur : un SVG charge en
   background-image est un document isole, currentColor n'y est pas resolu. */
html[data-theme] a[href="/"] > svg[style*="#e97a42"],
html[data-theme] a[href="/"] > svg[style*="rgb(233, 122, 66)"] {
  display: none;
}
html[data-theme] a[href="/"]:has(> svg[style*="#e97a42"])::before,
html[data-theme] a[href="/"]:has(> svg[style*="rgb(233, 122, 66)"])::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  background: url('/duonexia/jonction-header.svg') center / contain no-repeat;
}

/* Filet de securite : tout symbole d'origine subsistant ailleurs passe au
   vermillon plutot que de garder l'orange de la marque d'origine. */
html[data-theme] svg[style*="#e97a42"],
html[data-theme] svg[style*="rgb(233, 122, 66)"] {
  color: hsl(var(--dnx-accent));
}

/* ------------------------------------------------------ Le bouton d'action */
/* .base-button est le bouton NEUTRE de l'application (fond --b2) et sert aussi
   bien a « Annuler » qu'a « Envoyer ». On ne repeint donc que les submit : le
   vermillon designe l'action, et la charte le plafonne a 10% de l'ecran. */
html[data-theme] button[type="submit"].base-button,
html[data-theme] input[type="submit"].base-button {
  background-color: hsl(var(--dnx-accent));
  border-color: hsl(var(--dnx-accent));
  color: hsl(var(--dnx-on-accent));
  font-weight: 600;
}
html[data-theme] button[type="submit"].base-button:hover,
html[data-theme] input[type="submit"].base-button:hover {
  background-color: hsl(var(--dnx-accent-2));
  border-color: hsl(var(--dnx-accent-2));
}

/* ------------------------------------------------ Champs et etats visibles */
html[data-theme] .base-input,
html[data-theme] input[type="text"],
html[data-theme] input[type="email"],
html[data-theme] input[type="password"],
html[data-theme] select,
html[data-theme] textarea {
  background-color: hsl(var(--dnx-surface));
  border-color: hsl(var(--dnx-line-2));
  color: hsl(var(--dnx-text));
  border-radius: 3px;
}
html[data-theme] .base-input::placeholder,
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
  color: hsl(var(--dnx-text-3));
}

/* Un anneau de focus visible au clavier : une plateforme de signature se
   parcourt aussi sans souris. */
html[data-theme] :focus-visible {
  outline: 2px solid hsl(var(--dnx-accent));
  outline-offset: 2px;
  border-radius: 3px;
}

/* Le texte accentue sous 18 px passe sur accent-ink : #d63f0a tombe a 4.0:1 sur
   le papier, sous le seuil AA de 4.5 pour du texte courant. */
html[data-theme] a:not(.btn):not(.base-button):hover {
  color: hsl(var(--dnx-accent-ink));
}

/* Les filets. La marque n'a presque pas de cartes : elle a des lignes. */
html[data-theme] hr,
html[data-theme] .divider::before,
html[data-theme] .divider::after {
  border-color: hsl(var(--dnx-line));
  background-color: hsl(var(--dnx-line));
}

/* ---------------------------------------------------------------- Le grain */
/* Bruit fractal fige au viewport : c'est ce qui empeche l'aplat de paraitre
   plastique. 3.5% en clair, conformement a la charte. Non cliquable, et retire
   a l'impression — un document signe ne doit pas sortir grisaille. */
html[data-theme] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print {
  html[data-theme] body::after { display: none; }
}

/* Sous prefers-reduced-motion, tout s'eteint proprement. Aucune information ne
   depend d'une animation : si couper le mouvement fait disparaitre du contenu,
   l'implementation est fausse. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}