.tn {
  --tn-encre: #131C1B;
  --tn-lagon: #0E6F62;
  --tn-lagon-clair: #57B7A6;
  --tn-ecume: #E1EDEA;
  --tn-sable: #F2F2EE;
  --tn-nuit: #0E1413;

  
  --tn-corail: #9E2F26;
  --tn-corail-clair: #E8877B;

  --tn-fond: var(--tn-sable);
  --tn-texte: var(--tn-encre);
  --tn-accent: var(--tn-lagon);
  --tn-calme: var(--tn-ecume);
  --tn-discret: #5C6866;
  --tn-refus: var(--tn-corail);

  position: relative;
  display: flex; flex-direction: column;
  min-height: 34rem;
  background: var(--tn-fond); color: var(--tn-texte);
  border-radius: 14px; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  
  color-scheme: light;
}


.tn--plein {
  height: 100dvh; min-height: 100dvh;
  border-radius: 0;
}


.tn--nuit {
  --tn-fond: var(--tn-nuit);
  --tn-texte: var(--tn-sable);
  --tn-accent: var(--tn-lagon-clair);
  --tn-calme: #16211F;
  --tn-discret: #8F9C99;
  
  --tn-refus: var(--tn-corail-clair);
  
  color-scheme: dark;
}


.tn input[type="date"]::-webkit-calendar-picker-indicator,
.tn input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}


.tn-bandeau {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-texte) 12%, transparent);
  font-size: .8rem; color: var(--tn-discret);
}
.tn-jauge { flex: 1; display: flex; gap: .3rem; align-items: center }
.tn-pas {
  height: 4px; flex: 1; border-radius: 2px;
  background: color-mix(in srgb, var(--tn-texte) 14%, transparent);
}
.tn-pas--fait { background: var(--tn-accent) }
.tn-pas--ici { background: var(--tn-accent); opacity: .55 }
.tn-temps { font-variant-numeric: tabular-nums }

.tn-mention {
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--tn-calme); color: var(--tn-accent);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}



.tn-scene {
  flex: 1; min-height: 0; overflow-y: auto;
  
  display: grid; place-items: center; align-content: safe center;
  padding: 2.2rem 1.6rem; text-align: center;
  
  background:
    linear-gradient(var(--tn-fond) 45%, transparent) top    / 100% 26px no-repeat local,
    linear-gradient(transparent, var(--tn-fond) 55%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0,
      color-mix(in srgb, var(--tn-texte) 16%, transparent), transparent)
      top    / 100% 11px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,
      color-mix(in srgb, var(--tn-texte) 16%, transparent), transparent)
      bottom / 100% 11px no-repeat scroll;
}
.tn-dedans { display: grid; gap: 1.1rem; justify-items: center; max-width: 46ch }
.tn-titre { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15 }
.tn-texte { margin: 0; color: var(--tn-discret); line-height: 1.6 }
.tn-pied {
  display: flex; gap: .6rem; justify-content: center; align-items: center;
  padding: 1rem 1.1rem 1.3rem;
}
.tn-bouton {
  font: inherit; font-size: .92rem; font-weight: 600;
  padding: .7rem 1.3rem; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--tn-accent); background: transparent; color: var(--tn-accent);
}
.tn-bouton--premier { background: var(--tn-accent); border-color: var(--tn-accent) }

.tn-bouton--premier { color: #FFFFFF }
.tn--nuit .tn-bouton--premier { color: var(--tn-nuit) }

.tn-passer {
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--tn-discret); font-size: .85rem;
  min-height: 36px; padding: 0 .7rem; border-radius: 8px;
}
.tn-passer:hover { background: color-mix(in srgb, var(--tn-texte) 7%, transparent) }


.tn-droody { width: 190px; height: auto; color: var(--tn-texte) }
.tn-droody--petit { width: 96px }

.tn-droody--encre { color: var(--tn-texte) }


.tn-verrou { width: 356px; max-width: 84%; height: auto; color: var(--tn-texte) }


@keyframes tn-planer {
  0%   { transform: translateY(0) rotate(0deg) }
  50%  { transform: translateY(-9px) rotate(-1.4deg) }
  100% { transform: translateY(0) rotate(0deg) }
}
@keyframes tn-monter { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes tn-tracer { from { stroke-dashoffset: var(--tn-long) } to { stroke-dashoffset: 0 } }

.tn-plane { animation: tn-planer 5.5s ease-in-out infinite }
.tn-entre { animation: tn-monter .5s ease-out both }
.tn-entre--2 { animation-delay: .12s }
.tn-entre--3 { animation-delay: .24s }
.tn-entre--4 { animation-delay: .36s }


.tn-frise { display: grid; gap: .7rem; width: 100%; text-align: left }
.tn-carte {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem .95rem; border-radius: 10px; background: var(--tn-calme);
}
.tn-carte b { display: block; font-size: .95rem }
.tn-carte span { font-size: .85rem; color: var(--tn-discret); line-height: 1.5 }
.tn-rang {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tn-accent);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.tn-carte .tn-rang, .tn-frise .tn-rang { color: #FFFFFF }
.tn--nuit .tn-carte .tn-rang, .tn--nuit .tn-frise .tn-rang { color: var(--tn-nuit) }


.tn-declaration {
  display: grid; gap: .7rem; text-align: left; width: 100%;
  padding: 1.1rem 1.2rem; border-radius: 12px;
  background: var(--tn-calme);
  border-left: 4px solid var(--tn-accent);
}
.tn-declaration b { font-size: 1rem }
.tn-declaration p { margin: 0; color: var(--tn-discret); line-height: 1.6; font-size: .92rem }


.tn-fil { display: grid; gap: .7rem; width: 100%; text-align: left }
.tn-bulle {
  padding: .8rem 1rem; border-radius: 14px; max-width: 90%;
  background: var(--tn-calme); line-height: 1.55; font-size: .95rem;
}
.tn-bulle--droody { border-bottom-left-radius: 4px }
.tn-signature { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--tn-discret) }
.tn-signature .tn-droody { width: 44px }


@media (prefers-reduced-motion: reduce) {
  .tn *, .tn *::before, .tn *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


.tn-dedans--large { max-width: 60ch }
.tn-choix { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start }
.tn-jeton {
  font: inherit; font-size: .88rem; padding: .55rem 1rem; border-radius: 999px;
  min-height: 44px;
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 22%, transparent);
  background: transparent; color: var(--tn-texte); cursor: pointer;
}

.tn-jeton--pris { background: var(--tn-accent); border-color: var(--tn-accent); color: var(--tn-fond) }
.tn-note { margin: 0; font-size: .82rem; color: var(--tn-discret); line-height: 1.5 }
.tn-champs { display: grid; gap: .7rem; width: 100% }
.tn-gestes-fil { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .3rem }

.tn-refus {
  padding: .7rem .9rem; border-radius: 10px; font-size: .88rem; line-height: 1.5;
  background: color-mix(in srgb, var(--tn-refus) 12%, transparent);
  border-left: 4px solid var(--tn-refus); color: var(--tn-refus); text-align: left;
}
.tn-maquette {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; border-radius: 12px; background: var(--tn-calme); width: 100%;
}
.tn-pastille { width: 2.2rem; height: 2.2rem; border-radius: 8px; flex: none }
.tn-maquette b { margin-left: auto; font-size: .82rem; color: var(--tn-discret) }


.tn .champ-annote {
  background: var(--tn-fond); border: 1px solid color-mix(in srgb, var(--tn-texte) 14%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--tn-texte) 30%, transparent);
  border-radius: 10px; padding: .75rem .9rem;
  display: flex; flex-direction: column; gap: .4rem; text-align: left;
}
.tn .champ-annote .tete { display: flex; align-items: baseline; gap: .8rem; justify-content: space-between; flex-wrap: wrap }
.tn .champ-annote .lib { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tn-discret) }
.tn .champ-annote .etat { font-size: .72rem; font-weight: 600; color: var(--tn-discret); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap }
.tn .champ-annote .marque {
  font-size: .72rem; line-height: 1; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 4px;
}
.tn .champ-annote .valeur { font-size: 1.05rem; font-weight: 600 }
.tn .champ-annote .valeur.absente { color: var(--tn-discret); font-weight: 400; font-style: italic }
.tn .champ-annote .detail { font-size: .78rem; color: var(--tn-discret) }
.tn .champ-annote .gestes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem }
.tn .bouton-champ {
  font: inherit; font-size: .82rem; padding: .4rem .85rem; border-radius: 8px; cursor: pointer;
  
  min-height: 40px;
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 22%, transparent);
  background: transparent; color: var(--tn-texte);
}
.tn .bouton-champ.premier { background: var(--tn-accent); border-color: var(--tn-accent); color: var(--tn-fond) }


.tn .champ-annote[data-etat="signale"] { border-left-width: 5px; border-left-color: #9E2222 }
.tn .champ-annote[data-etat="propose"] { border-left-style: dashed }
.tn .champ-annote[data-etat="accepte"] { border-left-width: 5px; border-left-color: var(--tn-accent) }
.tn .champ-annote[data-etat="saisi"] { border-left-width: 5px; border-left-color: var(--tn-texte) }


.tn-teintes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap }
.tn-teintes .tn-pastille { border: 1px solid color-mix(in srgb, var(--tn-texte) 18%, transparent) }


.tn-saisie {
  display: grid; gap: .5rem; width: 100%; text-align: left;
  padding: .9rem 1rem; border-radius: 12px;
  background: var(--tn-calme); border-left: 4px solid var(--tn-accent);
}
.tn-saisie label { font-size: .82rem; font-weight: 600; color: var(--tn-discret) }

.tn-saisie input:not([type="checkbox"]):not([type="radio"]) {
  font: inherit; font-size: 1.05rem;
  min-height: 48px; padding: 0 .8rem;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 25%, transparent);
}
.tn-saisie input[type="checkbox"], .tn-saisie input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--tn-accent); cursor: pointer;
}
.tn-saisie input:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }


.tn-diff { display: grid; gap: .3rem; width: 100%; text-align: left }
.tn-diff-l {
  display: grid; grid-template-columns: 10rem 1fr auto; gap: .8rem; align-items: baseline;
  padding: .55rem .8rem; border-radius: 9px; background: var(--tn-calme);
}

.tn-diff-c { font-size: .82rem; color: var(--tn-discret) }
.tn-diff-v { font-weight: 600 }
.tn-diff-e { font-size: .74rem; font-weight: 600; letter-spacing: .02em }

.tn-diff-e[data-etat="propose"] { color: var(--tn-discret) }
.tn-diff-e[data-etat="accepte"], .tn-diff-e[data-etat="saisi"] { color: var(--tn-accent) }
.tn-diff-e[data-etat="signale"], .tn-diff-e[data-etat="vide"] { color: #9E2222 }
.tn--nuit .tn-diff-e[data-etat="signale"], .tn--nuit .tn-diff-e[data-etat="vide"] { color: #E98C8C }


.tn-presente { display: grid; gap: 1rem; width: 100%; text-align: left }
.tn-dedans--large { max-width: 60ch }


.tn-carte--refus { border-left: 4px solid var(--tn-accent) }


.tn-nomprenom {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.tn-nomprenom > span { display: grid; gap: .35rem }


.tn-qualites { border: 0; margin: 0; padding: 0; display: grid; gap: .4rem }
.tn-qualites legend { font-size: .82rem; font-weight: 600; color: var(--tn-discret); padding: 0 0 .3rem }
.tn-qualite {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  
  min-height: 44px; padding: .55rem .7rem; border-radius: 9px;
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 16%, transparent);
}
.tn-qualite:hover { background: color-mix(in srgb, var(--tn-texte) 5%, transparent) }
.tn-qualite input { margin-top: .25rem; accent-color: var(--tn-accent); width: 18px; height: 18px }
.tn-qualite b { display: block; font-size: .95rem }
.tn-qualite span span { font-size: .82rem; color: var(--tn-discret); line-height: 1.45 }

.tn-qualite:has(input:checked) { border-color: var(--tn-accent); background: var(--tn-calme) }
.tn-qualite:focus-within { outline: 3px solid var(--tn-accent); outline-offset: 1px }


.tn-deux { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem }
.tn-deux span { display: grid; gap: .35rem }
.tn-deux label { font-size: .82rem; font-weight: 600; color: var(--tn-discret) }
.tn-deux input {
  font: inherit; font-size: 1.05rem; min-height: 48px; padding: 0 .8rem;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 25%, transparent);
}
.tn-deux input:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }
.tn-qualite input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tn-accent) }


.tn-diff-l .tn-note { display: block; font-weight: 400 }
.tn-diff-l .tn-passer { justify-self: end }

.tn-bouton[disabled] { opacity: .45; cursor: not-allowed }


.tn-rebut {
  display: grid; gap: .2rem; padding: .5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--tn-texte) 10%, transparent);
}
.tn-rebut:first-of-type { border-top: 0 }

.tn-rebut-brut { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .82rem }
.tn-rebut-motif { font-size: .82rem; color: var(--tn-discret); line-height: 1.5 }

.tn-saisie textarea {
  font: inherit; font-size: .95rem; line-height: 1.5;
  
  min-height: 12rem; padding: .7rem .8rem; resize: vertical;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 25%, transparent);
}
.tn-saisie textarea:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }
.tn-diff-l .tn-choix { display: flex; gap: .35rem; justify-self: end }


.tn-saisie select {
  font: inherit; font-size: 1.05rem; min-height: 48px; padding: 0 .6rem;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 25%, transparent);
}
.tn-saisie select:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }
.tn-deux span { display: grid; gap: .35rem }


.tn-tableau { width: 100%; overflow-x: auto; border-radius: 10px; background: var(--tn-calme) }
.tn-tableau table { border-collapse: collapse; width: 100%; font-size: .9rem }
.tn-tableau th, .tn-tableau td {
  text-align: left; padding: .5rem .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-texte) 10%, transparent);
}
.tn-tableau th { font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tn-discret) }
.tn-tableau tbody tr:last-child td { border-bottom: 0 }
.tn-tableau .tn-nombre { text-align: right; font-variant-numeric: tabular-nums }
.tn-tableau .tn-actions { text-align: right; white-space: nowrap }
.tn-tableau .tn-actions button { margin-left: .3rem }

.tn-tableau tr[data-etat="propose"] td:first-child { border-left: 3px dashed var(--tn-accent) }
.tn-marque { font-size: .76rem; color: var(--tn-discret) }
.tn-manque { color: #9E2222; font-size: .82rem }
.tn--nuit .tn-manque { color: #E98C8C }


.tn-bouton--annuler { border-color: #9E2222; color: #9E2222; background: transparent }
.tn-bouton--annuler:hover { background: color-mix(in srgb, #9E2222 10%, transparent) }
.tn--nuit .tn-bouton--annuler { border-color: #E98C8C; color: #E98C8C }

.tn-passer--retrait { color: #9E2222 }
.tn--nuit .tn-passer--retrait { color: #E98C8C }
.tn-saisie > span { display: grid; gap: .35rem }


.tn-voie { cursor: pointer; border: 1.5px solid transparent; text-align: left }
.tn-voie:hover { border-color: var(--tn-accent) }
.tn-voie:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 2px }
.tn-saisie input[type="file"] {
  font: inherit; font-size: .9rem; padding: .6rem; min-height: 48px;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px dashed color-mix(in srgb, var(--tn-texte) 30%, transparent);
}

a.tn-bouton { display: inline-flex; align-items: center; text-decoration: none }


@keyframes tn-battement-g {
  0%   { transform: rotate(0deg) }
  18%  { transform: rotate(-19deg) }   
  46%  { transform: rotate(7deg) }     
  100% { transform: rotate(0deg) }
}
@keyframes tn-battement-d {
  0%   { transform: rotate(0deg) }
  18%  { transform: rotate(19deg) }
  46%  { transform: rotate(-7deg) }
  100% { transform: rotate(0deg) }
}

@keyframes tn-battement-corps {
  0%   { transform: translate(0, 0) scale(1, 1) }
  18%  { transform: translate(0, -1.4px) scale(.92, 1.085) }  
  36%  { transform: translate(0, -5px) scale(1.01, 1.005) }   
  62%  { transform: translate(0, -2.6px) scale(1.065, .945) } 
  100% { transform: translate(0, 0) scale(1, 1) }
}



@keyframes tn-trainee {
  0%   { transform: rotate(0deg) translateY(0) }
  30%  { transform: rotate(6deg) translateY(.8px) }
  64%  { transform: rotate(-4deg) translateY(.4px) }
  100% { transform: rotate(0deg) translateY(0) }
}


@keyframes tn-tracte {
  0%   { transform: translate(0, 0) }
  18%  { transform: translate(0, 0) }           
  46%  { transform: translate(4.5px, -3.2px) }  
  100% { transform: translate(0, 0) }
}

.tn-nage .tn-nageoire, .tn-nage .tn-symbole,
.tn-nage .tn-queue, .tn-nage .tn-mot {
  
  transform-box: view-box;
  animation-duration: 3.2s;
  animation-iteration-count: infinite;
}

.tn-nage .tn-nageoire--g {
  transform-origin: 45.5px 25.23px;
  animation-name: tn-battement-g;
  animation-timing-function: cubic-bezier(.2, .9, .3, 1);
}
.tn-nage .tn-nageoire--d {
  transform-origin: 54.5px 25.23px;
  animation-name: tn-battement-d;
  animation-timing-function: cubic-bezier(.2, .9, .3, 1);
}

.tn-nage .tn-symbole {
  transform-origin: 50px 48px;
  animation-name: tn-battement-corps;
  animation-timing-function: cubic-bezier(.25, .8, .35, 1);
}
.tn-nage .tn-queue {
  transform-origin: 50px 64px;
  animation-name: tn-trainee;
  animation-timing-function: ease-in-out;
}
.tn-nage .tn-mot {
  animation-name: tn-tracte;
  
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.tn-nage .tn-verrou { width: 356px; max-width: 84%; height: auto; color: var(--tn-texte) }


.tn-fichier {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.2rem; border-radius: 10px; cursor: pointer;
  font-weight: 600; font-size: .92rem;
  border: 1.5px dashed var(--tn-accent); color: var(--tn-accent);
}
.tn-fichier:hover { background: color-mix(in srgb, var(--tn-accent) 10%, transparent) }
.tn-fichier input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0 }
.tn-fichier:focus-within { outline: 3px solid var(--tn-accent); outline-offset: 2px }


.tn-diff-l[data-origine="proposee"] { opacity: .82 }
.tn-diff-l[data-origine="enregistree"] { border-left: 3px solid var(--tn-accent) }
.tn-diff-e[data-etat="vide"] { color: var(--tn-discret) }


.tn-suggestion {
  margin: 0; padding: .6rem .8rem; border-radius: 9px; font-size: .9rem;
  background: color-mix(in srgb, var(--tn-accent) 10%, transparent);
  border-left: 3px solid var(--tn-accent);
}
.tn-suggestion b { font-size: 1.05rem }


.tn-exceptions { display: grid; gap: .3rem; width: 100%; text-align: left }
.tn-exceptions .tn-diff-l { grid-template-columns: 1fr auto; padding: .4rem .7rem }
.tn-exceptions select {
  font: inherit; font-size: .85rem; min-height: 34px; padding: 0 .5rem;
  border-radius: 7px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 22%, transparent);
}
.tn-exceptions select:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }


.tn-lignes { display: grid; gap: .35rem; width: 100%; text-align: left }
.tn-lignes > label { font-size: .82rem; font-weight: 600; color: var(--tn-discret) }
.tn-lignes .tn-diff-l { grid-template-columns: 1fr auto auto; gap: .7rem; align-items: center }
.tn-lignes .tn-diff-l input { max-width: 8.5rem; min-height: 38px; font-size: .95rem }
.tn-lignes .tn-diff-l label { font-size: .7rem }
.tn-offert {
  color: var(--tn-accent); text-transform: uppercase;
  font-size: .75rem; letter-spacing: .08em;
}


.tn-saisie--imbriquee {
  border-left-width: 2px; padding: .7rem .8rem;
  background: color-mix(in srgb, var(--tn-accent) 7%, transparent);
}
.tn-saisie--imbriquee select {
  font: inherit; font-size: .95rem; min-height: 42px; padding: 0 .6rem;
  border-radius: 8px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 22%, transparent);
}


.tn-bilan {
  margin: .4rem 0 0; padding: .55rem .8rem; border-radius: 9px; font-size: .9rem;
  background: color-mix(in srgb, var(--tn-accent) 10%, transparent);
  border-left: 3px solid var(--tn-accent);
}


.tn-deux--eteinte { opacity: .5 }
.tn-deux--eteinte input { cursor: not-allowed }
.tn-qualite--eteinte { opacity: .45 }
.tn-qualite--eteinte input { cursor: not-allowed }


.tn-traduction { display: grid; gap: .4rem; width: 100%; text-align: left }


.tn-double {
  margin: 0; padding: .6rem .8rem; border-radius: 9px; font-size: .9rem;
  background: color-mix(in srgb, var(--tn-alerte, #B0740B) 12%, transparent);
  border-left: 3px solid var(--tn-alerte, #B0740B);
}


.tn-refus-doux {
  margin: 0; padding: .6rem .8rem; border-radius: 9px; font-size: .9rem;
  background: var(--tn-calme); border-left: 3px solid var(--tn-discret);
}


.tn-controle {
  display: grid; gap: .5rem; width: 100%; text-align: left;
  padding: .9rem 1rem; border-radius: 12px;
  background: var(--tn-calme); border-left: 4px solid var(--tn-accent);
}
.tn-compte { display: flex; flex-wrap: wrap; gap: .35rem }
.tn-compte-l {
  font-size: .84rem; padding: .25rem .6rem; border-radius: 999px;
  background: var(--tn-fond); border: 1px solid color-mix(in srgb, var(--tn-texte) 14%, transparent);
}
.tn-compte-l b { font-variant-numeric: tabular-nums }
.tn-compte-l--vide {
  border-color: color-mix(in srgb, var(--tn-alerte, #B0740B) 55%, transparent);
  color: var(--tn-alerte, #B0740B);
}


.tn-pages {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .6rem .8rem; border-top: 1px solid color-mix(in srgb, var(--tn-texte) 10%, transparent);
}
.tn-pages-quoi {
  font-size: .85rem; color: var(--tn-discret); text-align: center;
  font-variant-numeric: tabular-nums; display: grid; gap: .1rem;
}
.tn-pages-quoi .tn-note { font-size: .75rem }

.tn-pages button[disabled] { opacity: .35; cursor: not-allowed }


.tn-deux--haut { align-items: start }
.tn-colonne-taux { display: grid; gap: .4rem }
.tn-colonne-taux .tn-suggestion { font-size: .85rem; padding: .5rem .7rem }
.tn-colonne-taux .tn-note { font-size: .8rem }


.tn-heure { display: flex; align-items: center; gap: .4rem }
.tn-heure select {
  font: inherit; font-size: 1rem; min-height: 44px; padding: 0 .5rem;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 25%, transparent);
  font-variant-numeric: tabular-nums;
}
.tn-heure select:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }
.tn-saisie input[type="date"] {
  font: inherit; font-size: 1.05rem; min-height: 48px; padding: 0 .8rem;
  border-radius: 9px; background: var(--tn-fond); color: var(--tn-texte);
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 25%, transparent);
}
.tn-saisie input[type="date"]:focus-visible { outline: 3px solid var(--tn-accent); outline-offset: 1px }


.tn-familles { display: grid; gap: .4rem; width: 100%; text-align: left }
.tn-familles > label { font-size: .82rem; font-weight: 600; color: var(--tn-discret) }

.tn-familles-l { display: flex; flex-wrap: wrap; gap: .35rem }


.tn-coche { display: flex; align-items: flex-start; gap: .35rem }
.tn-coche > input { flex: none; margin-top: .15rem }
.tn-coche > span { min-width: 0 }
.tn-famille {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: .88rem; padding: .35rem .7rem; border-radius: 999px;
  background: var(--tn-fond); border: 1.5px solid color-mix(in srgb, var(--tn-texte) 16%, transparent);
}
.tn-famille--prise {
  background: color-mix(in srgb, var(--tn-accent) 12%, transparent);
  border-color: var(--tn-accent); font-weight: 600;
}
.tn-famille input { margin: 0 }


.tn-qte { display: inline-block; margin-right: .5rem }
.tn-qte input { max-width: 4.5rem }
.tn-lignes .tn-diff-l { grid-template-columns: 1fr auto auto; align-items: center }


.tn-tel {
  width: 100%; max-width: 17rem; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  background: #FFFFFF; color: #131C1B;
  border: 1px solid color-mix(in srgb, var(--tn-texte) 18%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  font-size: .82rem; text-align: left;
}

.tn-tel-tete { display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem }
.tn-tel-logo {
  width: 1.8rem; height: 1.8rem; border-radius: 7px; flex: none;
  display: grid; place-items: center; border: 1.5px solid currentColor;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.tn-tel-nom { font-weight: 600; font-size: .95rem; line-height: 1.2 }
.tn-tel-corps { padding: .8rem .9rem; display: grid; gap: .55rem }
.tn-tel-place {
  display: grid; gap: .1rem; padding: .5rem .6rem;
  border-radius: 9px; border-left: 3px solid currentColor;
  background: #F4F4F1;
}
.tn-tel-etiquette { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #6B7370 }
.tn-tel-place b { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: #131C1B }
.tn-tel-prix { font-size: .74rem; color: #4A524F }
.tn-tel-prenom {
  margin: 0; padding: .45rem .6rem; border-radius: 9px;
  background: #F4F4F1; font-size: .78rem; color: #131C1B;
}
.tn-tel-prenom span { display: block; font-size: .68rem; color: #6B7370 }
.tn-tel-rubrique {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  margin-top: .2rem;
}
.tn-tel-l {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .28rem 0; border-bottom: 1px solid #EAEAE5; color: #131C1B;
}
.tn-tel-l:last-of-type { border-bottom: 0 }
.tn-tel-manque { color: #9E2222; font-size: .72rem; font-style: normal }
.tn-tel-pied {
  display: grid; gap: .3rem; justify-items: center;
  padding: .7rem .9rem .9rem; border-top: 1px solid #EAEAE5;
}
.tn-tel-bouton {
  display: block; width: 100%; text-align: center;
  padding: .5rem .8rem; border-radius: 9px; font-weight: 600; font-size: .82rem;
}
.tn-tel-note { font-size: .7rem; color: #6B7370; text-align: center }
.tn-tel-avert { max-width: 30rem; margin: 0 auto }


.tn-apercu { display: grid; gap: .5rem; justify-items: center; width: 100% }
.tn-apercu-onglets { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center }
.tn-apercu-quoi { margin: 0; text-align: center }
.tn-apercu-cadre {
  width: 100%; max-width: 21rem;
  border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tn-texte) 18%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  
  background: #F5F0E6;
}

.tn-apercu-cadre .tel { max-height: 27rem; overflow-y: auto }

.tn-apercu-cadre .acte, .tn-apercu-cadre .cta, .tn-apercu-cadre .formule,
.tn-apercu-cadre .barre button { cursor: default }


.tn-depot { position: relative; overflow: hidden; cursor: pointer }
.tn-depot input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  left: 0; top: 0; cursor: pointer;
}
.tn-depot:focus-within { outline: 2px solid var(--tn-accent); outline-offset: 2px }
.tn-diff-v .tn-teintes { justify-content: flex-end }


.tn-teinte { display: inline-flex; align-items: center; gap: .45rem }
.tn-teinte-code {
  display: grid; font-family: ui-monospace, Consolas, monospace;
  font-size: .78rem; line-height: 1.25; text-align: left;
}
.tn-teinte-code .tn-note { font-size: .68rem; font-family: inherit }
.tn-teintes { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center }

.tn-nuancier { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; justify-content: flex-start }
.tn-teinte--choix {
  font: inherit; cursor: pointer; padding: .45rem .6rem; border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--tn-texte) 18%, transparent);
  background: var(--tn-calme); color: var(--tn-texte);
}
.tn-teinte--choix:hover { border-color: var(--tn-accent) }
.tn-teinte--choix:focus-visible { outline: 2px solid var(--tn-accent); outline-offset: 2px }

.tn-teinte--prise { opacity: .45; cursor: not-allowed }


.tn-journee {
  position: relative; width: 100%; height: 3.6rem; margin: .2rem 0 1.1rem;
  border-radius: 10px; background: var(--tn-calme);
}
.tn-journee-bloc {
  position: absolute; top: .35rem; height: 1.9rem;
  border-radius: 7px; background: var(--tn-accent);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

.tn-journee-bloc > span {
  color: #FFFFFF; font-size: .74rem; font-weight: 600; padding: 0 .35rem;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.tn--nuit .tn-journee-bloc > span { color: var(--tn-nuit) }
.tn-journee-axe { position: absolute; left: 0; right: 0; bottom: .3rem; height: 1rem; display: block }
.tn-journee-axe > span {
  position: absolute; transform: translateX(-50%);
  font-size: .68rem; color: var(--tn-discret); font-variant-numeric: tabular-nums;
}


@media (max-width: 560px) {
  
  
  .tn-diff-l,
  .tn-lignes .tn-diff-l,
  .tn-exceptions .tn-diff-l {
    grid-template-columns: 1fr; gap: .5rem; padding: .7rem .8rem; align-items: start;
  }
  .tn-diff-l .tn-diff-v { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end }
  .tn-diff-l .tn-passer { justify-self: auto }
  .tn-diff-c { font-size: .88rem }

  
  .tn-bandeau { flex-wrap: wrap; gap: .5rem .8rem; padding: .7rem .9rem }
  .tn-jauge { order: 2; flex-basis: 100%; }
  .tn-mention { order: 3 }

  
  .tn-pied { flex-wrap: wrap; padding: .9rem .9rem 1.1rem }
  .tn-pied .tn-bouton { flex: 1 1 12rem }
}