/* ============================================================
   KIT — l'ADN visuel commun à toutes mes pages.

   Une page = un lien :
     <link rel="stylesheet" href="/kit/kit.css">

   Convention : tout ce qui vient d'ici est préfixé `k-`. Ce qui est
   propre à une page reste dans sa propre feuille, jamais ici.
   ============================================================ */

:root{
  /* ---- Châssis ---- */
  --k-bg-top:     #fbfdfe;
  --k-bg-mid:     #eef4f7;
  --k-bg-bot:     #dae6ec;
  --k-frame:      #dfe6ea;
  --k-frame-edge: #c2ccd3;

  /* ---- Encre ---- */
  --k-ink:        #66757e;
  --k-ink-strong: #54646d;
  --k-ink-soft:   #96a4ac;

  /* ---- Bleu Wii ---- */
  --k-blue:       #23b6ee;
  --k-blue-soft:  #8ddcf7;
  --k-blue-pale:  #e9f7fd;
  --k-blue-deep:  #1793c4;

  /* ---- Sémantique ---- */
  --k-good:       #4a9d4a;
  --k-warn:       #d98324;
  --k-bad:        #d64b3f;

  /* ---- Métriques ---- */
  --k-radius:     clamp(9px, 1.1vw, 15px);
  --k-radius-sm:  8px;
  --k-gap:        clamp(12px, 1.6vw, 22px);
  --k-pad:        clamp(16px, 3.5vw, 44px);

  /* ---- Ombres ---- */
  --k-lift:       0 2px 5px rgba(80,105,120,.16);
  --k-lift-hi:    0 6px 16px rgba(40,110,145,.22);

  --k-font: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--k-font);
  color: var(--k-ink);
  background: var(--k-bg-mid);
  -webkit-font-smoothing: antialiased;
}

/* Le fond caractéristique : dégradé de châssis + fine trame. */
.k-screen{
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--k-bg-top) 0%, var(--k-bg-mid) 55%, var(--k-bg-bot) 100%);
  background-attachment: fixed;
}

.k-screen::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .7;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0px,
    rgba(255,255,255,.55) 1px,
    rgba(150,170,180,.05) 1px,
    rgba(150,170,180,.05) 3px
  );
}

/* Visible des lecteurs d'écran et des moteurs, invisible à l'œil. */
.k-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Mise en page — c'est elle qui fait que deux pages sans rapport
   se ressemblent quand même.
   ============================================================ */

.k-header,
.k-main,
.k-footer{ position: relative; z-index: 1; }

.k-header{
  padding: clamp(22px, 4vh, 46px) var(--k-pad) clamp(14px, 2vh, 24px);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.k-title{
  margin: 0;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--k-ink-strong);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.k-lede{
  margin: .5em 0 0;
  max-width: 60ch;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--k-ink-soft);
}

.k-main{
  flex: 1 1 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--k-pad) clamp(28px, 5vh, 60px);
}

/* Barre de filtres / d'actions, juste sous le titre. */
.k-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-gap);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.k-bar__spacer{ flex: 1 1 auto; }

/* Le pied de page reprend la courbe bleue du menu. */
.k-footer{
  flex: 0 0 auto;
  margin-top: auto;
  padding: clamp(18px, 3vh, 30px) var(--k-pad);
  text-align: center;
  font-size: clamp(12px, 1.2vw, 14px);
  color: #7b8992;
  background: linear-gradient(180deg, #f2fbfe 0%, var(--k-blue-pale) 40%, #d3ecf8 100%);
  border-top: 2px solid var(--k-blue-soft);
  border-radius: 50% 50% 0 0 / clamp(20px, 3.5vh, 40px) clamp(20px, 3.5vh, 40px) 0 0;
}

.k-footer a{ color: #4a8ba5; }

/* ============================================================
   Composants
   ============================================================ */

/* ---- Boutons ---- */

.k-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 16px);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  padding: .6em 1.5em;
  color: var(--k-ink);
  background: linear-gradient(180deg, #ffffff 0%, #f0f6f9 55%, #dceaf1 100%);
  box-shadow:
    0 0 0 1px #c4d2da,
    inset 0 2px 0 rgba(255,255,255,.95),
    0 3px 8px rgba(50,95,120,.16);
  transition: transform .14s ease, box-shadow .14s ease;
}

.k-btn--primary{
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,60,90,.35);
  background: linear-gradient(180deg, #5fd0f6 0%, var(--k-blue) 52%, var(--k-blue-deep) 100%);
  box-shadow:
    0 0 0 1px #1b9bcd,
    inset 0 2px 0 rgba(255,255,255,.45),
    0 4px 11px rgba(30,120,160,.32);
}

.k-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px var(--k-blue-soft),
    0 0 0 4px rgba(35,182,238,.20),
    var(--k-lift-hi);
}

.k-btn:active{ transform: translateY(0) scale(.98); }
.k-btn:focus{ outline: none; }
.k-btn:focus-visible{ outline: 2px solid var(--k-blue); outline-offset: 3px; }
.k-btn[disabled]{ opacity: .5; pointer-events: none; }

/* ---- Champs ---- */

.k-field{
  display: inline-flex;
  flex-direction: column;
  gap: .35em;
  min-width: 0;
}

.k-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--k-ink-soft);
}

.k-input,
.k-select{
  font: inherit;
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--k-ink-strong);
  padding: .55em .9em;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--k-frame-edge), inset 0 1px 3px rgba(80,105,120,.10);
  transition: box-shadow .14s ease;
}

.k-input:focus,
.k-select:focus{
  outline: none;
  box-shadow: 0 0 0 1px var(--k-blue-soft), 0 0 0 4px rgba(35,182,238,.20);
}

/* ---- Case à cocher ---- */

.k-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--k-ink-strong);
  cursor: pointer;
}

.k-check input{
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--k-blue);
}

.k-check input:focus-visible{
  outline: 2px solid var(--k-blue);
  outline-offset: 2px;
}

/* ---- Carte ---- */

.k-card{
  position: relative;
  padding: clamp(14px, 2vw, 22px);
  border-radius: var(--k-radius);
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px var(--k-frame-edge),
    var(--k-lift);
}

.k-card__title{
  margin: 0 0 .35em;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  color: var(--k-ink-strong);
}

.k-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 30vw, 300px), 1fr));
  gap: var(--k-gap);
}

/* ---- Puces ---- */

.k-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-chip{
  display: inline-block;
  padding: .32em .85em;
  border-radius: 999px;
  font-size: clamp(11px, 1.05vw, 14px);
  color: #40788e;
  background: var(--k-blue-pale);
  box-shadow: inset 0 0 0 1px var(--k-blue-soft);
}

.k-chip--good{ color: #2f7a2f; background: #eaf7ea; box-shadow: inset 0 0 0 1px #b6e0b6; }
.k-chip--warn{ color: #96601a; background: #fdf3e4; box-shadow: inset 0 0 0 1px #f0d2a3; }
.k-chip--bad{  color: #9c352c; background: #fdeceb; box-shadow: inset 0 0 0 1px #f2b8b3; }

/* ---- Tableau de résultats ---- */

/* Un tableau large doit défiler dans sa boîte, jamais la page. */
.k-table-wrap{
  overflow-x: auto;
  border-radius: var(--k-radius);
  box-shadow: 0 0 0 1px var(--k-frame-edge), var(--k-lift);
  background: #fff;
}

.k-table{
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(13px, 1.3vw, 15px);
}

.k-table th,
.k-table td{
  padding: .75em 1em;
  text-align: left;
  white-space: nowrap;
}

.k-table thead th{
  position: sticky;
  top: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #5b8ea3;
  background: var(--k-blue-pale);
  box-shadow: inset 0 -1px 0 var(--k-blue-soft);
}

.k-table tbody tr + tr td{ border-top: 1px solid #e7edf0; }
.k-table tbody tr:hover td{ background: #f6fbfd; }

/* `.k-table th` porte déjà `text-align: left` : il faut au moins autant
   de spécificité pour le contrer, d'où les sélecteurs qualifiés. */
.k-table th.k-table__num,
.k-table td.k-table__num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   États — les trois pages en ont besoin, autant les fixer ici.
   ============================================================ */

.k-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8em;
  /* Assez généreux seul au milieu d'une page, sans devenir absurde
     quand l'état est imbriqué dans une carte qui a déjà son padding. */
  padding: clamp(26px, 5vh, 54px) var(--k-pad);
  text-align: center;
  color: var(--k-ink-soft);
}

.k-state__title{
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 700;
  color: var(--k-ink);
}

.k-state--error .k-state__title{ color: var(--k-bad); }

/* Posé dans une carte, l'état n'a pas besoin de sa marge pleine page :
   la carte apporte déjà la sienne. */
.k-card > .k-state{
  padding: clamp(6px, 1.4vh, 16px) 0;
}

/* Anneau de chargement, dans le bleu de la maison. */
.k-spinner{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid var(--k-blue-pale);
  border-top-color: var(--k-blue);
  animation: k-spin .8s linear infinite;
}

@keyframes k-spin{ to{ transform: rotate(360deg); } }

/* ============================================================
   Adaptations
   ============================================================ */

@media (max-width: 560px){
  .k-bar{ gap: 10px; }
  .k-field{ flex: 1 1 100%; }
  .k-input,
  .k-select{ width: 100%; }
}

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