/* Foundi : styles de base. Couleurs reprises des jetons nha-ui, palette douce pour les fonds. */

:root {
  /* Jetons nha-ui */
  --color-primary: #0A2852;
  --color-primary-hover: #071F45;
  --color-danger: #C14542;
  --color-success: #006F18;
  --color-warning: #A96200;
  --color-info: #007FC4;

  /* Palette Foundi, douce */
  --color-fond: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-texte: #1B2433;
  --color-texte-doux: #505A6B;
  --color-bordure: #D5DAE3;
  --color-bordure-champ: #6B7385;
  --color-entete: #EEF2F8;

  --rayon-sm: 0.25rem;
  --rayon-md: 0.5rem;
  --rayon-lg: 0.75rem;

  --ombre-sm: 0 1px 2px rgba(10, 40, 82, 0.08);
  --ombre-md: 0 4px 12px rgba(10, 40, 82, 0.10);
  --ombre-lg: 0 12px 28px rgba(10, 40, 82, 0.14);

  --police: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-texte);
  background: var(--color-fond);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.75rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--color-primary); }
.texte-doux { color: var(--color-texte-doux); }

/* Focus visible, partout */
:focus-visible {
  outline: 3px solid var(--color-info);
  outline-offset: 2px;
}

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  color: var(--color-primary);
  border-radius: var(--rayon-md);
}
.lien-evitement:focus { top: 1rem; }

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* En-tête et menu */
.entete {
  background: var(--color-primary);
  color: #FFFFFF;
}
.entete :focus-visible { outline-color: #FFFFFF; }
.entete-contenu {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.entete a { color: #FFFFFF; text-decoration: none; }
.entete a:hover { text-decoration: underline; }
.logo { font-weight: 700; font-size: 1.125rem; }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; }
.utilisateur { display: flex; gap: 0.75rem; align-items: center; font-size: 0.9375rem; }

/* Contenu */
.principal {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.entete-page { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.centre { max-width: 28rem; margin: 0 auto; width: 100%; }

/* Boutons */
.btn {
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 2px solid transparent;
  border-radius: var(--rayon-md);
  background: var(--color-primary);
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-hover); }
.btn-secondaire {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondaire:hover { background: var(--color-entete); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #A63A37; }
.bouton-lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

/* Formulaires */
.champ { display: flex; flex-direction: column; gap: 0.375rem; }
.champ label, .legende { font-weight: 600; }
.aide { font-size: 0.875rem; color: var(--color-texte-doux); }
.erreur-champ { font-size: 0.875rem; color: var(--color-danger); font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea {
  font: inherit;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-bordure-champ);
  border-radius: var(--rayon-sm);
  background: var(--color-surface);
  color: var(--color-texte);
}
textarea { min-height: 8rem; resize: vertical; }
.case, .choix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.case input[type="checkbox"], .choix input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--color-primary);
}
.choix input[type="text"] { flex: 1; }
.choix {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-bordure);
  border-radius: var(--rayon-sm);
  background: var(--color-surface);
}
.groupe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ligne { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }

/* Cartes */
.carte {
  background: var(--color-surface);
  border: 1px solid var(--color-bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.grille-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
caption { text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; }
th, td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--color-bordure); vertical-align: top; }
th { background: var(--color-entete); font-size: 0.875rem; }

/* Étiquettes d'état */
.etat {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid currentColor;
}
.etat-publie { color: var(--color-success); background: #E6F4EA; }
.etat-brouillon { color: var(--color-warning); background: var(--color-surface); }
.etat-juste { color: var(--color-success); background: #E6F4EA; }
.etat-faux { color: var(--color-danger); background: #FBE9E8; }

/* Messages */
.message {
  padding: 0.75rem 1rem;
  border-radius: var(--rayon-md);
  border-left: 4px solid currentColor;
  background: var(--color-surface);
  box-shadow: var(--ombre-sm);
}
.message-success { color: var(--color-success); }
.message-error { color: var(--color-danger); }
.message-warning { color: var(--color-warning); }
.message-info { color: var(--color-primary); border-left-color: var(--color-info); }
.message-texte { color: var(--color-texte); }

/* Progression */
progress {
  width: 100%;
  height: 0.75rem;
  appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-entete);
}
progress::-webkit-progress-bar { background: var(--color-entete); }
progress::-webkit-progress-value { background: var(--color-primary); }
progress::-moz-progress-bar { background: var(--color-primary); }

/* Ombres de survol */
.carte:hover { box-shadow: var(--ombre-md); }
.btn:active { box-shadow: var(--ombre-sm); }

/* Une seule règle pour le téléphone */
@media (max-width: 40rem) {
  .grille-deux { grid-template-columns: 1fr; }
  .masquer-mobile { display: none; }
  .entete-contenu { flex-direction: column; align-items: flex-start; }
  .principal { padding-inline: 1rem; }
}