/* MDSK : mise en page des écrans. AUCUNE valeur en dur : tout vient de
   site/tokens.css (géométrie) et des jetons du socle (couleurs, polices). */

.mdsk-page {
  width: 100%;
  max-width: calc(var(--mdsk-mesure) + 2 * var(--mdsk-marge-laterale));
  margin: 0 auto;
  padding: var(--mdsk-espace-3) var(--mdsk-marge-laterale) var(--mdsk-espace-4);
  box-sizing: border-box;
}
.mdsk-page-admin {
  max-width: calc(var(--mdsk-largeur-admin) + 2 * var(--mdsk-marge-laterale));
}
.mdsk-page h1 { margin: 0 0 var(--mdsk-espace-2); }
.mdsk-page h2 { margin: 0 0 var(--mdsk-espace-2); }
.mdsk-page p { margin: 0 0 var(--mdsk-espace-2); }

.mdsk-etape {
  border: var(--mdsk-trait);
  border-radius: var(--mdsk-rayon);
  padding: var(--mdsk-encadre-marge);
  margin: var(--mdsk-espace-3) 0 0;
  background: var(--iav-fond-bloc);
}

.mdsk-bandeau {
  padding: var(--mdsk-espace-1) var(--mdsk-espace-2);
  border-radius: var(--mdsk-rayon);
  background: var(--mdsk-info-fond);
  color: var(--mdsk-info-texte);
  border: var(--iav-trait, 1px) solid var(--mdsk-info-bordure);
}
.mdsk-bandeau-essai,
.mdsk-bandeau-attente {
  background: var(--iav-avertissement-fond);
  color: var(--iav-avertissement-texte);
  border-color: var(--iav-avertissement-bordure);
}

/* Les deux cartes de modèle : côte à côte sur grand écran, empilées sur téléphone. */
.mdsk-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdsk-carte-largeur-min), 1fr));
  gap: var(--mdsk-espace-2);
}
.mdsk-carte {
  display: flex;
  flex-direction: column;
  gap: var(--mdsk-espace-1);
  padding: var(--mdsk-encadre-marge);
  border: var(--mdsk-trait);
  border-radius: var(--mdsk-rayon);
  background: var(--iav-fond-page);
}
.mdsk-carte h3 { margin: 0; font-size: var(--iav-taille-intertitre); }
.mdsk-carte p { margin: 0; color: var(--iav-texte-secondaire); }
.mdsk-carte select { width: 100%; }
.mdsk-carte .iav-bouton { margin-top: var(--mdsk-bouton-bord); align-self: flex-start; }

.mdsk-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdsk-bouton-ecart);
  margin-top: var(--mdsk-bouton-bord);
}

.mdsk-message {
  padding: var(--mdsk-espace-1) var(--mdsk-espace-2);
  border-radius: var(--mdsk-rayon);
  border: var(--iav-trait, 1px) solid transparent;
}
.mdsk-message-info { background: var(--mdsk-info-fond); color: var(--mdsk-info-texte); border-color: var(--mdsk-info-bordure); }
.mdsk-message-erreur { background: var(--mdsk-erreur-fond); color: var(--mdsk-erreur-texte); border-color: var(--mdsk-erreur-bordure); }

.mdsk-resultat {
  padding: var(--mdsk-encadre-marge);
  border-radius: var(--mdsk-rayon);
  font-size: var(--iav-taille-titre);
  font-weight: var(--iav-graisse-forte);
  border: var(--iav-trait-epais, 2px) solid transparent;
}
.mdsk-resultat-ok { background: var(--mdsk-succes-fond); color: var(--mdsk-succes-texte); border-color: var(--mdsk-succes-bordure); }
.mdsk-resultat-echec { background: var(--mdsk-erreur-fond); color: var(--mdsk-erreur-texte); border-color: var(--mdsk-erreur-bordure); }
.mdsk-resultat-attention { background: var(--mdsk-attention-fond); color: var(--mdsk-attention-texte); border-color: var(--mdsk-attention-bordure); }
.mdsk-resultat-info { background: var(--mdsk-info-fond); color: var(--mdsk-info-texte); border-color: var(--mdsk-info-bordure); }

.mdsk-fiche {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--mdsk-espace-1) var(--mdsk-espace-2);
  margin: 0 0 var(--mdsk-espace-2);
}
.mdsk-fiche dt { font-weight: var(--iav-graisse-semi); }
.mdsk-fiche dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { /* = seuil téléphone de tokens.css (une variable ne vaut pas dans @media) */
  .mdsk-fiche { grid-template-columns: 1fr; gap: 0; }
  .mdsk-fiche dd { margin-bottom: var(--mdsk-espace-1); }
}
.mdsk-mono { font-family: var(--iav-police-mono); }
.mdsk-liste { margin: 0 0 var(--mdsk-espace-2); padding-left: var(--mdsk-espace-3); }
.mdsk-liste li { margin-bottom: var(--mdsk-espace-1); }
.mdsk-choix { font-weight: var(--iav-graisse-semi); }

progress {
  width: 100%;
  height: var(--mdsk-progression-hauteur);
  accent-color: var(--iav-bleu-marque);
}

/* Administration. */
.mdsk-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdsk-filtre-largeur-min), 1fr));
  gap: var(--mdsk-espace-2);
  align-items: end;
  margin-bottom: var(--mdsk-espace-3);
}
.mdsk-filtres .iav-champ { margin: 0; }
.mdsk-nav-admin {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdsk-espace-2);
  margin: 0 0 var(--mdsk-espace-3);
}
.mdsk-nav-admin a[aria-current="page"] { font-weight: var(--iav-graisse-forte); }
.mdsk-marque-essai {
  display: inline-block;
  padding: 0 var(--mdsk-espace-1);
  border-radius: var(--mdsk-rayon);
  background: var(--iav-avertissement-fond);
  color: var(--iav-avertissement-texte);
  font-size: var(--iav-taille-petite);
  font-weight: var(--iav-graisse-forte);
}
.mdsk-section { margin-top: var(--mdsk-espace-4); }
.mdsk-sha { font-family: var(--iav-police-mono); font-size: var(--iav-taille-petite); overflow-wrap: anywhere; }
.mdsk-formulaire-ligne { display: inline; }