/*
 * Thème sombre PADDOCK13 — gabarit de base.
 *
 * Palette lue sur les visuels de marque (docs/cadrage/02-besoins-paddock13.md
 * §5.2, [déduction, à valider]) : fond noir profond, accents rouges réservés
 * à l'actif, titres en dégradé chrome, texte blanc, filets rouges lumineux.
 * Couleurs encore provisoires — à confirmer avec Bilal (04-questions J6)
 * une fois le fichier source du logo en main ; ne JAMAIS les durcir ailleurs
 * que dans ces variables.
 *
 * Pas de webfont téléchargé pour l'instant (la typographie exacte du logo —
 * proche d'Eurostile / Michroma — dépend du fichier source, J6) : l'effet
 * « capitales grasses racing » est obtenu par CSS seul (majuscules,
 * espacement, graisse) sur la pile système, pour rester utilisable dès
 * aujourd'hui sans dépendance externe.
 */

:root {
  --p13-noir: #0a0a0a;
  --p13-noir-panneau: #141414;
  --p13-noir-ligne: #262626;
  --p13-rouge: #e10600;
  --p13-rouge-sombre: #8a0400;
  --p13-blanc: #f5f5f5;
  --p13-gris-texte: #a3a3a3;
  --p13-chrome-haut: #d9d9d9;
  --p13-chrome-bas: #6e6e6e;

  /* Alertes : volontairement distinctes du rouge de marque (02 §5.2 :
     "réservé aux accents et éléments actifs ; distinct du rouge d'erreur") */
  --p13-succes: #1f9d55;
  --p13-attention: #d97706;
  --p13-erreur: #b91c1c;

  --p13-rayon: 6px;
  --p13-ombre: 0 2px 12px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--p13-noir);
  color: var(--p13-blanc);
  font-family:
    -apple-system,
    "Segoe UI",
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
.p13-titre {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--p13-chrome-haut), var(--p13-chrome-bas));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.5em;
}

a {
  color: var(--p13-rouge);
}

/* Comptoir / caisse : cibles tactiles ≥ 48 px (02 §5.4, poste partagé mobile-first) */
button,
.p13-bouton,
input,
select,
textarea {
  font-size: 1rem;
  min-height: 48px;
  border-radius: var(--p13-rayon);
  border: 1px solid var(--p13-noir-ligne);
  background: var(--p13-noir-panneau);
  color: var(--p13-blanc);
  padding: 0.5em 0.9em;
}

.p13-bouton,
button {
  background: var(--p13-noir-panneau);
  border: 1px solid var(--p13-rouge-sombre);
  cursor: pointer;
  font-weight: 600;
}

.p13-bouton:hover,
button:hover {
  border-color: var(--p13-rouge);
}

.p13-bouton--actif,
button[type="submit"] {
  background: var(--p13-rouge);
  border-color: var(--p13-rouge);
  color: #fff;
}

.p13-bouton--actif:hover,
button[type="submit"]:hover {
  background: var(--p13-rouge-sombre);
}

/* Panneau / carte : la brique de base des espaces (comptoir, atelier, lavage…) */
.p13-panneau {
  background: var(--p13-noir-panneau);
  border: 1px solid var(--p13-noir-ligne);
  border-radius: var(--p13-rayon);
  box-shadow: var(--p13-ombre);
  padding: 1rem;
}

/* Filet rouge lumineux (02 §5.2 : "LED rouges encastrées") — séparateur, pas décor envahissant */
.p13-filet {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--p13-rouge), transparent);
  border: none;
  margin: 1.5rem 0;
}

.p13-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.p13-badge--succes {
  background: color-mix(in srgb, var(--p13-succes) 25%, transparent);
  color: var(--p13-succes);
}

.p13-badge--attention {
  background: color-mix(in srgb, var(--p13-attention) 25%, transparent);
  color: var(--p13-attention);
}

.p13-badge--erreur {
  background: color-mix(in srgb, var(--p13-erreur) 25%, transparent);
  color: var(--p13-erreur);
}

/* Barre d'entête commune à tous les espaces */
.p13-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--p13-noir-ligne);
  background: var(--p13-noir);
  position: sticky;
  top: 0;
  z-index: 10;
}

.p13-contenu {
  padding: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Mobile-first atelier / lavage (poste debout, un seul pouce) */
@media (max-width: 640px) {
  .p13-contenu {
    padding: 0.75rem;
  }

  button,
  .p13-bouton {
    width: 100%;
  }
}