/* =============================
   VARIABLES & BASE
   ============================= */
:root {
  --bleu: #036aaf;
  --bleu_clair: #7c95bf;
  --gris: #f0f0f2;
  --gris_clair: #f7f8ff;
  --noir: #000;
  --blanc: #fff;
  --rouge: #940A00;
  --rouge_clair: #ffdddd;
  --vert: #3c763d;
  --vert_clair: #dff0d8;
}

html {
  font-size: clamp(0.875rem, 1vw, 1rem);
  line-height: 1.5;
  font-family: Verdana, sans-serif;
  color: var(--noir);
  background-color: var(--blanc);
}

body {
  margin: 0;
  padding: 0;
}

#main {
  margin: 1rem auto;
  padding: 0.3rem;
  max-width: 1200px; /* pour éviter les lignes trop longues sur grand écran */
}

.page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
/* =============================
   TYPOGRAPHIE
   ============================= */
.h1 {
  font-size: clamp(1.8rem, 2vw + 1rem, 3rem);
  font-weight: bold;
}

.h2 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
  font-weight: bold;
}

.h3 {
  font-size: clamp(1.2rem, 1vw + 1rem, 2rem);
  font-weight: bold;
}

.h4,
.card__title-text {
  font-size: clamp(1.3rem, 0.4vw + 1rem, 1.7rem);
  font-weight: 600;
}


/* =============================
   FORMULAIRES
   ============================= */
.hidden {
    display: none !important;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 420px;
  margin: 0 auto;
  padding: 1rem;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form__label {
  font-weight: bold;
  color: var(--noir);
  font-size: 1rem;
}

.form__label--required::after {
  content: " *";
  color: var(--rouge);
  font-weight: bold;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: var(--blanc);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--bleu);
  box-shadow: 0 0 0 2px rgba(3, 106, 175, 0.25);
  outline: none;
}

/* États */
.form__input--error,
.form__select--error,
.form__textarea--error {
  border-color: var(--rouge);
  background-color: var(--rouge_clair);
}

.form__input--success,
.form__select--success,
.form__textarea--success {
  border-color: var(--vert);
  background-color: var(--vert_clair);
}

/* Messages */
.form__message {
  font-size: 0.875rem;
}

.form__message--error {
  color: var(--rouge);
}

.form__message--success {
  color: var(--vert);
}

.form__message--help {
  color: var(--bleu_clair);
}

/* Actions (boutons) */
.form__actions {
  display: flex;
  gap: 1rem;
  flex-direction: column; /* Mobile-first */
}

a.form__button{
    text-decoration: none;
}

.form__button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  width: 100%; /* Mobile */
}

.form__button:active {
  transform: scale(0.97);
}

.form__button--primary {
  background-color: var(--bleu);
  color: var(--blanc);
}

.form__button--primary:hover {
  background-color: #025a91;
}

.form__button--secondary {
  background-color: var(--gris);
  color: var(--noir);
}

.form__button--secondary:hover {
  background-color: #e0e0e2;
}

.form__button--danger {
  background-color: var(--rouge);
  color: var(--blanc);
}

.form__button--danger:hover {
  background-color: #7a0800;
}

/* ==== Textes d'aide / indications ==== */
small,
.help-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #555;
  display: block;
  margin-top: 0.25rem;
}

/* Variante info (neutre, par défaut) */
.help-text--info {
  color: var(--bleu_clair);
}

/* Variante alerte (champ sensible, ex : mot de passe) */
.help-text--warning {
  color: var(--rouge);
}

/* Variante succès (confirmation, explications validées) */
.help-text--success {
  color: var(--vert);
}

/* Liens dans les textes d'aide */
small a,
.help-text a {
  color: var(--bleu);
  text-decoration: none;
}

small a:hover,
.help-text a:hover {
  text-decoration: underline;
}

/* ==== Messages d’alerte ==== */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.alert[role="alert"] {
  /* Assure la compatibilité screen readers */
}

.alert--error {
  background-color: var(--rouge_clair);
  color: var(--rouge);
  border: 1px solid var(--rouge);
}

.alert--success {
  background-color: var(--vert_clair);
  color: var(--vert);
  border: 1px solid var(--vert);
}

.alert--info {
  background-color: #EAEFF5;
  color: #0000F5;
  border: 1px solid #0000F5;
}

.alert--warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.alert--error::before,
.alert--success::before,
.alert--info::before,
.alert--warning::before {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1.4em;   /* plus grand que le texte */
  vertical-align: middle;
}
.alert--error::before {
  content: "⛔";
}

.alert--success::before {
  content: "✅";
}

.alert--info::before {
  content: "ℹ️";
}

.alert--warning::before {
  content: "⚠️";
}


/* Bouton de fermeture (optionnel) */
.alert__close {
  float: right;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* =============================
   RADIO & CHECKBOX
   ============================= */

/* Groupe radio/checkbox */
.form__fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form__legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--noir);
}

.form__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form__checkbox,
.form__radio {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--bleu); /* Couleur native pour input */
  cursor: pointer;
}

.form__label--option {
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--noir);
}

/* États d’erreur/succès */
.form__checkbox:invalid,
.form__radio:invalid {
  outline: 2px solid var(--rouge);
}

.form__checkbox:checked:valid,
.form__radio:checked:valid {
  outline: 2px solid var(--vert);
}

/* =============================
   TABLES
   ============================= */
table{
    /*width:100%;*/
    border : 1px solid var(--gris);
    border-collapse: collapse;
    margin-bottom: 1rem;
}

  
table caption{
    padding: 1rem 0 1rem 0;
    text-align: left;
}

th, td{
    border : 1px solid var(--bleu);
    text-align: left;
    padding: 5px;
}

summary:focus, .dropdown__toggle:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
/* =============================
   RESPONSIVE
   ============================= */
@media (min-width: 600px) {
  .form__actions {
    flex-direction: row;
    justify-content: flex-start;
  }
  .form__button {
    width: auto;
  }
}

@media (max-width: 600px) {
  .form__actions {
    flex-direction: column;
    justify-content: center;
  }
  .form__button {
    width: auto;
  }
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}