/*
  ClaudeX : feuille de la coquille et de la route de départ (Projets) ; écrans Détail et Réglages : `css/ecrans.css`.
  Couleurs définies par variables ; contrastes AA vérifiés par tests/unit/css.test.mjs.
  Toute durée d'animation ou de transition reste sous 250 ms.
*/

/* ---------- Variables de design : mode clair ---------- */
:root {
  color-scheme: light dark;

  --fond: #f2f2f7;
  --surface: #ffffff;
  --surface-active: #e5e5ea;
  --barre-fond: rgba(249, 249, 251, 0.94);
  --texte: #1c1c1e;
  --texte-secondaire: #636366;
  --separateur: #c6c6c8;
  --chevron: #aeaeb2;
  --accent: #0060df;
  --focus: #0060df;
  --onglet-inactif: #636366;
  --bouton-fond: #0060df;
  --bouton-texte: #ffffff;
  --bouton-secondaire-fond: #e5efff;
  --bouton-secondaire-texte: #0060df;
  --destructif: #c4001a;
  --bord-champ: #8e8e93;
  --piste: #e5e5ea;
  --succes-fond: #e3f4e7;
  --succes-texte: #1f6b30;
  --alerte-fond: #fff0dc;
  --alerte-texte: #8f4200;
  --erreur-fond: #fde6e8;
  --erreur-texte: #b00018;
  --info-fond: #e5efff;
  --info-texte: #0055c4;
  --neutre-fond: #e9e9ee;
  --neutre-texte: #48484a;
  --relire-fond: #c93400;
  --relire-texte: #ffffff;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.06);

  --rayon: 12px;
  --hauteur-onglets: 50px;
  --largeur-max: 42rem;
  --duree: 180ms;
}

/* ---------- Variables de design : mode sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #000000;
    --surface: #1c1c1e;
    --surface-active: #2c2c2e;
    --barre-fond: rgba(22, 22, 24, 0.94);
    --texte: #ffffff;
    --texte-secondaire: #aeaeb2;
    --separateur: #38383a;
    --chevron: #636366;
    --accent: #4ba3ff;
    --focus: #4ba3ff;
    --onglet-inactif: #98989d;
    --bouton-fond: #0060df;
    --bouton-texte: #ffffff;
    --bouton-secondaire-fond: #2c2c2e;
    --bouton-secondaire-texte: #79b8ff;
    --destructif: #ff6961;
    --bord-champ: #8e8e93;
    --piste: #3a3a3c;
    --succes-fond: #12321b;
    --succes-texte: #5fe07a;
    --alerte-fond: #3a2600;
    --alerte-texte: #ffbf5e;
    --erreur-fond: #3d1214;
    --erreur-texte: #ff8a84;
    --info-fond: #0e2a4d;
    --info-texte: #79b8ff;
    --neutre-fond: #2c2c2e;
    --neutre-texte: #d1d1d6;
    --relire-fond: #ff9f0a;
    --relire-texte: #000000;
    --ombre: none;
  }
}

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

[hidden] {
  display: none !important;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Défilement par focus ou `scrollIntoView` : la cible reste au-dessus de la barre d'onglets fixe.
     La marge de 1rem couvre la bordure et le libellé de la barre, qui suivent la taille du texte. */
  scroll-padding-bottom: calc(var(--hauteur-onglets) + env(safe-area-inset-bottom) + 1rem);
}

/* À VÉRIFIER : sur iPhone, `font: -apple-system-body` suit la taille de texte choisie dans iOS (Dynamic Type). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--fond);
  color: var(--texte);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- En-tête ---------- */
.entete {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 0.25rem) 1rem 0.5rem;
}

.entete-barre {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.retour {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 44px;
  min-height: 44px;
  margin-left: -0.5rem;
  padding: 0 0.5rem;
  border-radius: 10px;
  color: var(--accent);
  font-size: 1.0625rem;
  text-decoration: none;
}

.retour-icone {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.titre-vue {
  margin: 0;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Le titre reçoit le focus par programme après chaque navigation (VoiceOver) ; ce n'est pas une commande. */
.titre-vue:focus,
.titre-vue:focus-visible {
  outline: none;
}

/* ---------- Zone de vue ---------- */
.vue {
  display: block;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0.5rem 1rem calc(var(--hauteur-onglets) + env(safe-area-inset-bottom) + 1.5rem);
}

.vue > * {
  animation: apparition var(--duree) ease-out;
}

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Barre d'onglets ---------- */
.onglets {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--barre-fond);
  border-top: 1px solid var(--separateur);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.onglets-liste {
  display: flex;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.onglets-liste > li {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.onglet {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: var(--hauteur-onglets);
  padding: 4px 2px;
  border-radius: 10px;
  color: var(--onglet-inactif);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
  touch-action: manipulation;
}

.onglet:focus-visible {
  outline-offset: -3px;
}

.onglet[aria-current] {
  color: var(--accent);
}

.onglet-icone {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onglet[aria-current] .onglet-icone {
  stroke-width: 2.2;
}

.onglet-libelle {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Listes groupées façon réglages iOS ---------- */
.groupe {
  margin: 0 0 1.75rem;
}

.groupe-liste {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--surface);
  border-radius: var(--rayon);
}

.groupe-liste > li {
  position: relative;
}

.groupe-liste > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 1rem;
  border-top: 1px solid var(--separateur);
}

.cellule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border: 0;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: background-color 150ms ease;
}

a.cellule:active,
button.cellule:active {
  background: var(--surface-active);
}

a.cellule::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-top: 2px solid var(--chevron);
  border-right: 2px solid var(--chevron);
  transform: rotate(45deg);
}

.cellule:focus-visible {
  outline-offset: -3px;
}

.cellule-titre {
  display: block;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

.cellule-detail {
  display: block;
  color: var(--texte-secondaire);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.625rem 1.125rem;
  border: 0;
  border-radius: var(--rayon);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease, transform 120ms ease;
  touch-action: manipulation;
}

.bouton:active {
  transform: scale(0.98);
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.bouton-principal {
  background: var(--bouton-fond);
  color: var(--bouton-texte);
}

.bouton-secondaire {
  background: var(--bouton-secondaire-fond);
  color: var(--bouton-secondaire-texte);
}

.bouton-bloc {
  display: flex;
  width: 100%;
}

/* ---------- Badges de statut ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--neutre-fond);
  color: var(--neutre-texte);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-succes {
  background: var(--succes-fond);
  color: var(--succes-texte);
}

.badge-alerte {
  background: var(--alerte-fond);
  color: var(--alerte-texte);
}

.badge-erreur {
  background: var(--erreur-fond);
  color: var(--erreur-texte);
}

.badge-info {
  background: var(--info-fond);
  color: var(--info-texte);
}

/* ---------- Barre de progression (élément progress) ---------- */
.progression {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--piste);
  color: var(--accent);
}

.progression::-webkit-progress-bar {
  border-radius: 3px;
  background: var(--piste);
}

.progression::-webkit-progress-value {
  border-radius: 3px;
  background: var(--accent);
  transition: width 200ms ease;
}

.progression::-moz-progress-bar {
  border-radius: 3px;
  background: var(--accent);
}

/* ---------- Bandeau d'alerte ---------- */
.bandeau {
  display: block;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid currentColor;
  border-radius: var(--rayon);
  background: var(--info-fond);
  color: var(--info-texte);
}

.bandeau-alerte {
  background: var(--alerte-fond);
  color: var(--alerte-texte);
}

.bandeau-erreur {
  background: var(--erreur-fond);
  color: var(--erreur-texte);
}

.bandeau > :first-child {
  margin-top: 0;
}

.bandeau > :last-child {
  margin-bottom: 0;
}

/* ---------- Actions ---------- */
.actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* ---------- Vue en attente de contenu ---------- */
.attente {
  padding: 2.5rem 1rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.attente-titre {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.attente-texte {
  margin: 0;
  color: var(--texte-secondaire);
}

/* ---------- Chargement des vues ---------- */
/* Délai d'apparition : rien ne clignote quand la vue se charge vite. */
.chargement {
  margin: 2rem 0;
  color: var(--texte-secondaire);
  text-align: center;
  overflow-wrap: anywhere;
  animation: apparition var(--duree) ease-out 150ms both;
}

.echec-chargement .bouton {
  margin-top: 0.75rem;
}

/* ---------- Écrans Projets et Détail ---------- */
.meta {
  color: var(--texte-secondaire);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

p.meta {
  margin: 0.25rem 0 0;
}

.barre-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.barre-info {
  flex: 1 1 auto;
  margin: 0;
}

.analyse {
  margin: 0 0 1rem;
}

.analyse .meta {
  margin: 0 0 0.375rem;
}

.projet {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.projet-corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.projet-ligne,
.decision-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.projet-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.avancement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0.5rem 0 0;
}

.projet .avancement {
  margin: 0;
}

.avancement .progression {
  flex: 1 1 6rem;
  width: auto;
}

.avancement-texte {
  color: var(--texte-secondaire);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.badge-relire {
  background: var(--relire-fond);
  color: var(--relire-texte);
  font-size: 0.875rem;
}

.champs ul,
.avertissements ul {
  margin: 0;
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}

.avertissements {
  margin: 0.5rem 0 0;
  color: var(--texte-secondaire);
  font-size: 0.875rem;
}

.avertissements > summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  cursor: pointer;
}

.avertissements > summary::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.avertissements[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bouton:active {
    transform: none;
  }
}