/* ============================================================
   SOCING — components.css
   Composants d'interface (vague V1 CONTRATS).
   Dépend de tokens.css et base.css.
   La couleur n'est JAMAIS le seul signal : tout badge ou registre
   porte un libellé texte obligatoire dans le HTML (WCAG 1.4.1).
   ============================================================ */

/* ============ Boutons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: var(--cible);      /* cible tactile 44 px */
  min-width: var(--cible);
  padding: var(--espace-2) var(--espace-5);
  border: 2px solid transparent;
  border-radius: var(--rayon-plein);
  font-weight: 700;
  font-size: 1.2rem; /* ≥ 18,66 px gras = « grand texte » : le corail/crème (4,29:1) passe AA */
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--duree-rapide) var(--courbe),
    border-color var(--duree-rapide) var(--courbe);
}
.btn:active {
  transform: none; /* pas d'effet de presse : calme avant tout */
}

/* Primaire : corail sur crème (4,29:1 — texte gras ≥ 18 px, AA grand texte) */
.btn-primaire {
  background: var(--prune);
  color: var(--creme);
  border-color: var(--prune);
}
.btn-primaire:hover {
  background: var(--sarcelle-sombre);
  border-color: var(--sarcelle-sombre);
}

/* Secondaire : discret, contour prune */
.btn-secondaire {
  background: transparent;
  color: var(--prune);
  border-color: var(--prune);
}
.btn-secondaire:hover {
  background: var(--creme-sombre);
}

/* Danger : action irréversible (suppression, effacement du coffre) */
.btn-danger {
  background: var(--corail-sombre);
  color: var(--creme);
  border-color: var(--corail-sombre);
}
.btn-danger:hover {
  background: var(--prune-sombre);
  border-color: var(--prune-sombre);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============ Bouton masquer — fixe, TOUJOURS visible ============
   Sortie rapide : masque instantanément l'écran (mode discret). */
.btn-masquer {
  position: fixed;
  right: var(--espace-3);
  bottom: calc(var(--espace-3) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-masquer);
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-4);
  background: var(--prune);
  color: var(--creme);
  border: 2px solid var(--creme);
  border-radius: var(--rayon-plein);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(51, 32, 43, 0.35);
}
.btn-masquer:focus-visible {
  outline: var(--focus-ring-sur-prune);
}

/* Une confirmation modale garde la priorité visuelle et tactile. Le bouton
   reste dans le DOM inerté, sous le dialogue, puis retrouve sa couche de
   sortie rapide dès la fermeture. */
body:has([role="alertdialog"]) .btn-masquer {
  z-index: var(--z-collant);
}

/* ============ Cartes ============ */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l); /* coquille « contenant protecteur » */
  padding: var(--espace-5);
  margin-block: var(--espace-4);
}
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }

/* ============ Badges ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  border: 2px solid currentColor;
  font-size: var(--texte-s);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Information expirée ou non sourcée : jamais une certitude.
   HTML attendu : <span class="badge badge-a-revalider">À revalider</span> */
.badge-a-revalider {
  background: var(--corail-sombre);
  border-color: var(--corail);
  color: var(--creme);
}

/* Toute donnée d'exemple est fictive.
   HTML attendu : <span class="badge badge-fiction">Fiction</span> */
.badge-fiction {
  background: var(--prune);
  border-color: var(--prune-clair);
  color: var(--creme);
}

/* ============ Badges des 5 registres éditoriaux ============
   Couleurs distinctes ET libellé texte obligatoire dans le HTML —
   la couleur seule ne suffit jamais (WCAG 1.4.1). */
.reg-officiel {               /* texte officiel cité tel quel */
  background: var(--surface);
  border-color: var(--prune);
  color: var(--prune);
}
.reg-simple {                 /* explication en langage simple */
  background: var(--surface);
  border-color: var(--sarcelle);
  color: var(--sarcelle-sombre);
}
.reg-pratique {               /* conseil d'action concrète */
  background: var(--surface);
  border-color: var(--vert);
  color: var(--vert-sombre);
}
.reg-question {               /* question à poser à un humain */
  background: var(--surface);
  border-color: var(--corail);
  color: var(--corail-sombre);
}
.reg-urgence {                /* orientation d'urgence */
  background: var(--corail-sombre);
  border-color: var(--corail-sombre);
  color: var(--creme);
}

/* ============ Bandeau d'urgence ============
   Fond prune : texte et liens UNIQUEMENT en crème ou corail clair. */
.bandeau-urgence {
  position: relative;
  z-index: var(--z-bandeau);
  background: var(--prune);
  color: var(--creme);
  padding: var(--espace-4) var(--espace-5);
  border-radius: var(--rayon-m);
  font-weight: 600;
}
.bandeau-urgence a {
  color: var(--corail-clair);           /* seul accent lisible sur prune */
  text-decoration-thickness: 2px;
  font-weight: 700;
}
.bandeau-urgence a[href^="tel:"]::before {
  content: "☎ ";                        /* signal non coloré : appel direct */
}
.bandeau-urgence a:hover {
  color: var(--creme);
}
.bandeau-urgence :focus-visible {
  outline: var(--focus-ring-sur-prune);
}

/* ============ Checklist — cases ≥ 44 px de zone tactile ============ */
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espace-2);
}
.checklist li {
  display: flex;
}
.checklist label {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  min-height: var(--cible);             /* toute la ligne est cliquable */
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-m);
  cursor: pointer;
  flex: 1;
}
.checklist label:hover {
  background: var(--surface);
}
.checklist input[type="checkbox"] {
  flex: none;
  width: 28px;
  height: 28px;
  margin: calc((var(--cible) - 28px) / 2) 0; /* cible visuelle + zone 44 px */
  accent-color: var(--sarcelle);        /* natif, sans url() */
  cursor: pointer;
}
.checklist input[type="checkbox"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.checklist input:checked + .checklist-texte {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--prune-clair);
}

/* ============ Écran de verrouillage ============
   Recouvre toute l'application (coffre verrouillé / mode discret). */
.ecran-verrouillage {
  position: fixed;
  inset: 0;
  z-index: var(--z-verrou);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-5);
  padding: var(--espace-6);
  background: var(--prune);
  color: var(--creme);
  text-align: center;
}
.ecran-verrouillage a,
.ecran-verrouillage .btn-secondaire {
  color: var(--creme);
  border-color: var(--creme);
}
.ecran-verrouillage .btn-primaire {
  background: var(--corail-clair);      /* accent sur fond prune */
  border-color: var(--corail-clair);
  color: var(--prune-sombre);
}
.ecran-verrouillage :focus-visible {
  outline: var(--focus-ring-sur-prune);
}

/* ============ Navigation mobile basse ============
   Icône + libellé texte TOUJOURS associés (jamais d'icône seule).
   Défilement interne possible : la PAGE ne déborde jamais à 320 px. */
.nav-basse {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-collant);
  background: var(--surface);
  border-top: 2px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-basse ul {
  list-style: none;
  display: flex;
  gap: var(--espace-1);
  margin: 0;
  padding: var(--espace-1) var(--espace-2);
  overflow-x: auto;                     /* débordement contenu dans la barre */
  scrollbar-width: thin;
}
.nav-basse li {
  flex: 1 0 auto;
  min-width: 64px;
}
.nav-basse a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  min-height: var(--cible);
  padding: var(--espace-2) var(--espace-1);
  border-radius: var(--rayon-m);
  color: var(--prune);
  text-decoration: none;
  font-size: var(--texte-s);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.nav-basse a .icone {
  width: 24px;
  height: 24px;
  flex: none;
}
.nav-basse a:hover {
  background: var(--creme-sombre);
}
.nav-basse a[aria-current="page"] {
  color: var(--corail-sombre);
  background: var(--creme-sombre);
  font-weight: 700;
}
/* Le contenu ne passe jamais sous la barre : réserver la place */
body:has(.nav-basse) {
  padding-bottom: calc(var(--cible) + var(--espace-6));
}