/*
FICHIER : styles.css
DESCRIPTION : Styles visuels de la maquette de bilan clinique podologique.
CONTEXTE : Interface fidèle à la fiche papier, modernisée pour un usage web.
DATE : 31/07/2026
*/

/* Définit les variables graphiques réutilisées dans toute l'application. */
:root {
  /* Bleu nuit principal inspiré de la fiche papier. */
  --navy: #07134f;
  /* Bleu secondaire utilisé pour les éléments interactifs. */
  --blue: #1549b9;
  /* Bleu clair utilisé pour les fonds doux. */
  --light-blue: #eaf2ff;
  /* Turquoise utilisé comme accent graphique. */
  --cyan: #24b8d8;
  /* Gris très clair utilisé comme fond général. */
  --surface: #f4f7fb;
  /* Blanc utilisé pour les cartes. */
  --white: #ffffff;
  /* Gris principal du texte. */
  --text: #1b2440;
  /* Gris secondaire des textes descriptifs. */
  --muted: #68718c;
  /* Bordure standard. */
  --border: #dbe2ef;
  /* Couleur de succès. */
  --success: #14804a;
  /* Couleur d'avertissement. */
  --warning: #b05f00;
  /* Couleur de danger. */
  --danger: #b42318;
  /* Ombre principale des cartes. */
  --shadow: 0 10px 28px rgba(18, 34, 79, 0.08);
  /* Rayon standard des cartes. */
  --radius: 16px;
}

/* Applique le modèle de boîte prévisible à tous les éléments. */
* {
  /* Inclut les bordures et espacements dans les dimensions déclarées. */
  box-sizing: border-box;
}

/* Définit le comportement général du document. */
html {
  /* Permet un défilement doux lors des changements de page. */
  scroll-behavior: smooth;
}

/* Définit le style de base du corps de page. */
body {
  /* Supprime la marge par défaut du navigateur. */
  margin: 0;
  /* Utilise une police système rapide et lisible. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Définit la couleur du texte principal. */
  color: var(--text);
  /* Définit le fond général de l'application. */
  background: var(--surface);
}

/* Définit la disposition principale en deux colonnes. */
.app-shell {
  /* Utilise une grille pour séparer barre latérale et contenu. */
  display: grid;
  /* Fixe la largeur de la barre latérale et laisse le reste au contenu. */
  grid-template-columns: 280px minmax(0, 1fr);
  /* Garantit une hauteur minimale égale à l'écran. */
  min-height: 100vh;
}

/* Style de la barre latérale. */
.sidebar {
  /* Maintient la barre visible pendant le défilement. */
  position: sticky;
  /* Colle la barre en haut de l'écran. */
  top: 0;
  /* Limite sa hauteur à l'écran. */
  height: 100vh;
  /* Utilise une disposition verticale. */
  display: flex;
  /* Organise les éléments du haut vers le bas. */
  flex-direction: column;
  /* Ajoute un espacement intérieur confortable. */
  padding: 24px;
  /* Définit le fond bleu nuit. */
  background: linear-gradient(180deg, #07134f 0%, #0b216d 100%);
  /* Définit le texte en blanc. */
  color: var(--white);
  /* Autorise le défilement interne si nécessaire. */
  overflow-y: auto;
}

/* Bloc du logo et du nom. */
.brand {
  /* Place le logo et le texte sur une même ligne. */
  display: flex;
  /* Centre verticalement les éléments. */
  align-items: center;
  /* Ajoute un espace entre logo et texte. */
  gap: 14px;
  /* Ajoute une marge basse. */
  margin-bottom: 24px;
}

/* Logo textuel de la marque. */
.brand-logo {
  /* Centre l'icône dans son bloc. */
  display: grid;
  /* Centre horizontalement et verticalement. */
  place-items: center;
  /* Définit la largeur du bloc. */
  width: 54px;
  /* Définit la hauteur du bloc. */
  height: 54px;
  /* Arrondit fortement le bloc. */
  border-radius: 16px;
  /* Ajoute un fond blanc translucide. */
  background: rgba(255, 255, 255, 0.13);
  /* Agrandit l'icône. */
  font-size: 30px;
}

/* Titre du cabinet. */
.brand h1 {
  /* Supprime les marges natives. */
  margin: 0;
  /* Définit une taille lisible. */
  font-size: 18px;
  /* Transforme le texte en majuscules. */
  text-transform: uppercase;
  /* Ajoute un léger espacement entre lettres. */
  letter-spacing: 0.04em;
}

/* Sous-titre du cabinet. */
.brand p {
  /* Ajoute une petite marge haute. */
  margin: 4px 0 0;
  /* Réduit légèrement la taille. */
  font-size: 12px;
  /* Rend le texte légèrement transparent. */
  opacity: 0.78;
}

/* Carte des coordonnées du cabinet. */
.practice-card {
  /* Ajoute un espacement intérieur. */
  padding: 16px;
  /* Ajoute un fond blanc translucide. */
  background: rgba(255, 255, 255, 0.08);
  /* Ajoute une bordure légère. */
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Arrondit la carte. */
  border-radius: 14px;
  /* Ajoute une marge basse. */
  margin-bottom: 24px;
}

/* Paragraphes de coordonnées. */
.practice-card p {
  /* Définit les marges verticales. */
  margin: 0 0 14px;
  /* Définit la taille du texte. */
  font-size: 13px;
  /* Définit la hauteur de ligne. */
  line-height: 1.5;
}

/* Supprime la marge du dernier paragraphe. */
.practice-card p:last-child {
  /* Évite un espace inutile en bas. */
  margin-bottom: 0;
}

/* Navigation principale. */
.main-menu {
  /* Organise les boutons en colonne. */
  display: grid;
  /* Ajoute un espacement entre boutons. */
  gap: 8px;
}

/* Boutons du menu latéral. */
.menu-item {
  /* Supprime la bordure native. */
  border: 0;
  /* Ajoute un fond transparent. */
  background: transparent;
  /* Définit la couleur du texte. */
  color: rgba(255, 255, 255, 0.78);
  /* Aligne le texte à gauche. */
  text-align: left;
  /* Ajoute un espacement intérieur. */
  padding: 12px 14px;
  /* Arrondit les boutons. */
  border-radius: 10px;
  /* Affiche le curseur main. */
  cursor: pointer;
  /* Définit une transition douce. */
  transition: 160ms ease;
}

/* Survol des boutons du menu. */
.menu-item:hover {
  /* Ajoute un fond léger. */
  background: rgba(255, 255, 255, 0.08);
  /* Rend le texte blanc. */
  color: var(--white);
}

/* Bouton actif du menu. */
.menu-item.active {
  /* Ajoute un fond blanc. */
  background: var(--white);
  /* Utilise la couleur bleu nuit. */
  color: var(--navy);
  /* Met le texte en gras. */
  font-weight: 700;
}

/* Note de prototype en bas de la barre latérale. */
.prototype-note {
  /* Pousse le bloc vers le bas. */
  margin-top: auto;
  /* Utilise une disposition verticale. */
  display: grid;
  /* Ajoute un faible espacement. */
  gap: 4px;
  /* Ajoute une marge haute. */
  padding-top: 24px;
  /* Réduit la taille du texte. */
  font-size: 12px;
  /* Rend le texte secondaire plus discret. */
  color: rgba(255, 255, 255, 0.72);
}

/* Zone principale de travail. */
.workspace {
  /* Empêche la grille de déborder horizontalement. */
  min-width: 0;
  /* Ajoute un espacement intérieur. */
  padding: 24px 28px 48px;
}

/* En-tête principal de la consultation. */
.topbar {
  /* Place les deux zones sur une ligne. */
  display: flex;
  /* Répartit les zones aux extrémités. */
  justify-content: space-between;
  /* Aligne verticalement les zones. */
  align-items: flex-end;
  /* Ajoute un espace entre les zones. */
  gap: 24px;
  /* Ajoute un fond bleu nuit. */
  background: linear-gradient(135deg, var(--navy), #0d2b83);
  /* Définit le texte en blanc. */
  color: var(--white);
  /* Ajoute un espacement intérieur. */
  padding: 24px 26px;
  /* Arrondit l'en-tête. */
  border-radius: var(--radius);
  /* Ajoute une ombre. */
  box-shadow: var(--shadow);
}

/* Petit texte au-dessus du titre. */
.eyebrow {
  /* Supprime les marges natives. */
  margin: 0 0 6px;
  /* Transforme le texte en majuscules. */
  text-transform: uppercase;
  /* Ajoute un espacement entre lettres. */
  letter-spacing: 0.12em;
  /* Réduit la taille. */
  font-size: 11px;
  /* Utilise la couleur cyan. */
  color: #5ee7f6;
}

/* Titre principal. */
.topbar h2 {
  /* Supprime les marges natives. */
  margin: 0;
  /* Définit une grande taille. */
  font-size: clamp(24px, 3vw, 36px);
}

/* Métadonnées du dossier. */
.record-meta {
  /* Place les champs sur une ligne. */
  display: flex;
  /* Ajoute un espace entre les champs. */
  gap: 12px;
  /* Autorise le retour à la ligne. */
  flex-wrap: wrap;
}

/* Libellés des métadonnées. */
.record-meta label {
  /* Organise le libellé et le champ verticalement. */
  display: grid;
  /* Ajoute un petit espace. */
  gap: 6px;
  /* Définit une taille minimale. */
  min-width: 160px;
}

/* Texte des libellés de métadonnées. */
.record-meta span {
  /* Réduit la taille du texte. */
  font-size: 11px;
  /* Transforme en majuscules. */
  text-transform: uppercase;
  /* Ajoute un espacement entre lettres. */
  letter-spacing: 0.08em;
  /* Rend le texte légèrement transparent. */
  opacity: 0.78;
}

/* Champs des métadonnées. */
.record-meta input {
  /* Supprime la bordure par défaut. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Ajoute un fond blanc translucide. */
  background: rgba(255, 255, 255, 0.12);
  /* Définit le texte en blanc. */
  color: var(--white);
  /* Ajoute un espacement intérieur. */
  padding: 10px 12px;
  /* Arrondit le champ. */
  border-radius: 10px;
}

/* Barre d'actions. */
.actionbar {
  /* Place le statut et les actions sur une ligne. */
  display: flex;
  /* Répartit les zones aux extrémités. */
  justify-content: space-between;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace entre les zones. */
  gap: 16px;
  /* Ajoute une marge verticale. */
  margin: 18px 0;
}

/* Statut d'enregistrement. */
.save-state {
  /* Place la pastille et le texte sur une ligne. */
  display: inline-flex;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un petit espace. */
  gap: 8px;
  /* Définit la couleur secondaire. */
  color: var(--muted);
  /* Réduit légèrement la taille. */
  font-size: 13px;
}

/* Pastille de statut. */
.save-dot {
  /* Définit la largeur. */
  width: 9px;
  /* Définit la hauteur. */
  height: 9px;
  /* Rend la pastille circulaire. */
  border-radius: 50%;
  /* Utilise la couleur de succès. */
  background: var(--success);
}

/* Groupe de boutons. */
.action-buttons {
  /* Place les boutons sur une ligne. */
  display: flex;
  /* Ajoute un espace entre les boutons. */
  gap: 10px;
  /* Autorise le retour à la ligne. */
  flex-wrap: wrap;
}

/* Style générique des boutons. */
.button {
  /* Supprime la bordure native. */
  border: 1px solid transparent;
  /* Ajoute un espacement intérieur. */
  padding: 10px 15px;
  /* Arrondit le bouton. */
  border-radius: 10px;
  /* Affiche le curseur main. */
  cursor: pointer;
  /* Met le texte en gras. */
  font-weight: 700;
  /* Définit une transition douce. */
  transition: 160ms ease;
}

/* Bouton principal. */
.button-primary {
  /* Utilise le bleu principal. */
  background: var(--blue);
  /* Définit le texte en blanc. */
  color: var(--white);
}

/* Survol du bouton principal. */
.button-primary:hover {
  /* Assombrit légèrement le bouton. */
  background: #0f3b99;
}

/* Bouton secondaire. */
.button-secondary {
  /* Utilise un fond blanc. */
  background: var(--white);
  /* Utilise le texte bleu nuit. */
  color: var(--navy);
  /* Ajoute une bordure standard. */
  border-color: var(--border);
}

/* Survol du bouton secondaire. */
.button-secondary:hover {
  /* Utilise un fond bleu clair. */
  background: var(--light-blue);
}

/* Navigation entre pages. */
.page-tabs {
  /* Utilise une grille de cinq colonnes. */
  display: grid;
  /* Définit cinq colonnes égales. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Ajoute un espace entre les onglets. */
  gap: 8px;
  /* Ajoute une marge basse. */
  margin-bottom: 14px;
}

/* Onglet de page. */
.page-tab {
  /* Place le numéro et le texte sur une ligne. */
  display: flex;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace interne. */
  gap: 10px;
  /* Aligne le texte à gauche. */
  text-align: left;
  /* Ajoute un fond blanc. */
  background: var(--white);
  /* Ajoute une bordure. */
  border: 1px solid var(--border);
  /* Arrondit l'onglet. */
  border-radius: 12px;
  /* Ajoute un espacement intérieur. */
  padding: 12px;
  /* Affiche le curseur main. */
  cursor: pointer;
  /* Définit la couleur du texte. */
  color: var(--muted);
  /* Définit une transition douce. */
  transition: 160ms ease;
}

/* Numéro dans l'onglet. */
.page-tab span {
  /* Centre le numéro. */
  display: grid;
  /* Centre horizontalement et verticalement. */
  place-items: center;
  /* Définit la largeur. */
  width: 28px;
  /* Définit la hauteur. */
  height: 28px;
  /* Arrondit le numéro. */
  border-radius: 8px;
  /* Utilise un fond bleu clair. */
  background: var(--light-blue);
  /* Utilise le texte bleu. */
  color: var(--blue);
  /* Met le numéro en gras. */
  font-weight: 800;
  /* Empêche le rétrécissement. */
  flex: 0 0 auto;
}

/* Onglet actif. */
.page-tab.active {
  /* Utilise le fond bleu nuit. */
  background: var(--navy);
  /* Utilise le texte blanc. */
  color: var(--white);
  /* Utilise la bordure bleu nuit. */
  border-color: var(--navy);
}

/* Numéro de l'onglet actif. */
.page-tab.active span {
  /* Utilise un fond blanc translucide. */
  background: rgba(255, 255, 255, 0.14);
  /* Utilise le texte blanc. */
  color: var(--white);
}

/* Panneau de progression. */
.progress-panel {
  /* Utilise une grille à trois colonnes. */
  display: grid;
  /* Définit les tailles des colonnes. */
  grid-template-columns: auto minmax(120px, 1fr) auto;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace entre les colonnes. */
  gap: 12px;
  /* Ajoute un fond blanc. */
  background: var(--white);
  /* Ajoute une bordure. */
  border: 1px solid var(--border);
  /* Arrondit le panneau. */
  border-radius: 12px;
  /* Ajoute un espacement intérieur. */
  padding: 10px 14px;
  /* Ajoute une marge basse. */
  margin-bottom: 18px;
  /* Réduit légèrement la taille du texte. */
  font-size: 13px;
  /* Utilise la couleur secondaire. */
  color: var(--muted);
}

/* Piste de progression. */
.progress-track {
  /* Définit une hauteur compacte. */
  height: 8px;
  /* Utilise un fond gris clair. */
  background: #edf1f7;
  /* Arrondit la piste. */
  border-radius: 999px;
  /* Cache le débordement de la barre. */
  overflow: hidden;
}

/* Barre de progression. */
.progress-bar {
  /* Définit une hauteur égale à la piste. */
  height: 100%;
  /* Démarre à zéro pour cent. */
  width: 0%;
  /* Utilise un dégradé bleu et cyan. */
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  /* Arrondit la barre. */
  border-radius: inherit;
  /* Anime les changements de largeur. */
  transition: width 220ms ease;
}

/* Masque les pages inactives. */
.form-page {
  /* Cache la page par défaut. */
  display: none;
}

/* Affiche la page active. */
.form-page.active {
  /* Affiche la page sélectionnée. */
  display: block;
  /* Lance une animation d'apparition. */
  animation: fadeIn 180ms ease;
}

/* Animation d'apparition des pages. */
@keyframes fadeIn {
  /* État initial légèrement transparent et décalé. */
  from {
    /* Réduit l'opacité. */
    opacity: 0;
    /* Décale légèrement vers le bas. */
    transform: translateY(4px);
  }
  /* État final visible et en position normale. */
  to {
    /* Rend l'élément opaque. */
    opacity: 1;
    /* Supprime le décalage. */
    transform: translateY(0);
  }
}

/* En-tête visuel de chaque page. */
.page-heading {
  /* Place le numéro et le texte sur une ligne. */
  display: flex;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace entre les éléments. */
  gap: 14px;
  /* Ajoute une marge basse. */
  margin-bottom: 16px;
}

/* Numéro de page. */
.page-number {
  /* Centre le numéro. */
  display: grid;
  /* Centre horizontalement et verticalement. */
  place-items: center;
  /* Définit la largeur. */
  width: 48px;
  /* Définit la hauteur. */
  height: 48px;
  /* Arrondit le carré. */
  border-radius: 13px;
  /* Utilise un fond bleu nuit. */
  background: var(--navy);
  /* Définit le texte en blanc. */
  color: var(--white);
  /* Agrandit le numéro. */
  font-size: 24px;
  /* Met le numéro en gras. */
  font-weight: 900;
}

/* Titre de page. */
.page-heading h3 {
  /* Supprime les marges. */
  margin: 0;
  /* Définit la taille. */
  font-size: 24px;
  /* Utilise la couleur bleu nuit. */
  color: var(--navy);
}

/* Sous-titre de page. */
.page-heading p {
  /* Ajoute une petite marge haute. */
  margin: 4px 0 0;
  /* Utilise la couleur secondaire. */
  color: var(--muted);
}

/* Carte de contenu. */
.card {
  /* Ajoute un fond blanc. */
  background: var(--white);
  /* Ajoute une bordure. */
  border: 1px solid var(--border);
  /* Arrondit la carte. */
  border-radius: var(--radius);
  /* Ajoute un espacement intérieur. */
  padding: 18px;
  /* Ajoute une ombre légère. */
  box-shadow: 0 6px 18px rgba(18, 34, 79, 0.04);
  /* Ajoute une marge basse. */
  margin-bottom: 16px;
}

/* Titres des cartes. */
.card h4 {
  /* Supprime la marge haute. */
  margin: 0 0 14px;
  /* Utilise la couleur bleu nuit. */
  color: var(--navy);
  /* Définit la taille. */
  font-size: 15px;
  /* Transforme en majuscules. */
  text-transform: uppercase;
  /* Ajoute un espacement léger. */
  letter-spacing: 0.04em;
}

/* Sous-titres internes des cartes. */
.card h5 {
  /* Définit les marges. */
  margin: 0 0 10px;
  /* Utilise la couleur bleu nuit. */
  color: var(--navy);
  /* Définit la taille. */
  font-size: 14px;
}

/* Grille de cartes. */
.card-grid {
  /* Utilise la grille CSS. */
  display: grid;
  /* Ajoute un espace entre cartes. */
  gap: 16px;
}

/* Grille à deux colonnes. */
.card-grid-2 {
  /* Crée deux colonnes égales. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Grille à trois colonnes. */
.card-grid-3 {
  /* Crée trois colonnes égales. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Grille de champs. */
.field-grid {
  /* Utilise la grille CSS. */
  display: grid;
  /* Ajoute un espace entre champs. */
  gap: 14px;
}

/* Grille de champs à deux colonnes. */
.field-grid-2 {
  /* Crée deux colonnes égales. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Grille de champs à trois colonnes. */
.field-grid-3 {
  /* Crée trois colonnes égales. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Grille de champs à quatre colonnes. */
.field-grid-4 {
  /* Crée quatre colonnes égales. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Étend un champ sur deux colonnes. */
.field-span-2 {
  /* Occupe deux colonnes. */
  grid-column: span 2;
}

/* Étend un champ sur quatre colonnes. */
.field-span-4 {
  /* Occupe quatre colonnes. */
  grid-column: span 4;
}

/* Conteneur standard d'un champ. */
.field {
  /* Organise libellé et contrôle verticalement. */
  display: grid;
  /* Ajoute un petit espace. */
  gap: 7px;
  /* Empêche le débordement. */
  min-width: 0;
}

/* Libellé d'un champ. */
.field > span {
  /* Réduit légèrement la taille. */
  font-size: 12px;
  /* Met le texte en gras. */
  font-weight: 700;
  /* Utilise une couleur secondaire. */
  color: #4d5874;
}

/* Styles communs des champs de saisie. */
input,
select,
textarea {
  /* Utilise la police du document. */
  font: inherit;
  /* Définit la couleur du texte. */
  color: var(--text);
  /* Ajoute une bordure standard. */
  border: 1px solid var(--border);
  /* Ajoute un fond légèrement bleuté. */
  background: #fbfdff;
  /* Arrondit les champs. */
  border-radius: 9px;
  /* Ajoute un espacement intérieur. */
  padding: 10px 11px;
  /* Définit une largeur complète. */
  width: 100%;
  /* Supprime le contour natif. */
  outline: none;
  /* Définit une transition douce. */
  transition: 140ms ease;
}

/* Ajuste les zones de texte. */
textarea {
  /* Autorise uniquement le redimensionnement vertical. */
  resize: vertical;
  /* Définit une hauteur minimale. */
  min-height: 78px;
  /* Améliore la lisibilité. */
  line-height: 1.45;
}

/* État de focus des champs. */
input:focus,
select:focus,
textarea:focus {
  /* Utilise la bordure bleue. */
  border-color: var(--blue);
  /* Ajoute un halo bleu. */
  box-shadow: 0 0 0 3px rgba(21, 73, 185, 0.11);
  /* Utilise un fond blanc. */
  background: var(--white);
}

/* Champs requis non valides après interaction. */
input:required:invalid:not(:placeholder-shown) {
  /* Utilise une bordure rouge discrète. */
  border-color: #e38b82;
}


/* Groupe de saisie du téléphone avec pays et numéro. */
.phone-control {
  /* Utilise une grille pour conserver le sélecteur et le numéro sur une seule ligne. */
  display: grid;
  /* Donne une largeur maîtrisée au pays et laisse le reste au numéro. */
  grid-template-columns: minmax(158px, 0.9fr) minmax(150px, 1.1fr);
  /* Ajoute un espace entre les contrôles. */
  gap: 8px;
  /* Aligne les contrôles sur leur bord inférieur. */
  align-items: end;
}

/* Variante du groupe lorsqu'un indicatif libre doit être affiché. */
.phone-control.has-custom-code {
  /* Ajoute une colonne compacte réservée à l'indicatif international. */
  grid-template-columns: minmax(145px, 0.9fr) 72px minmax(130px, 1.1fr);
}

/* Sélecteur du pays du téléphone. */
#phoneCountry {
  /* Évite que les intitulés longs agrandissent la grille. */
  min-width: 0;
}

/* Champ d'indicatif personnalisé. */
.phone-custom-code {
  /* Centre l'indicatif pour faciliter sa lecture. */
  text-align: center;
  /* Met l'indicatif en gras. */
  font-weight: 700;
}

/* Aide affichée sous le champ téléphone. */
.field-help {
  /* Utilise une taille discrète. */
  font-size: 11px;
  /* Utilise la couleur secondaire de l'interface. */
  color: var(--muted);
  /* Améliore la lisibilité sur plusieurs lignes. */
  line-height: 1.4;
}

/* Aide affichée lorsqu'un numéro est invalide. */
.field-help.is-error {
  /* Utilise la couleur de danger définie par le thème. */
  color: var(--danger);
  /* Renforce le message d'erreur. */
  font-weight: 700;
}

/* Liste de cases à cocher. */
.check-list {
  /* Organise les choix en grille. */
  display: grid;
  /* Crée deux colonnes. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Ajoute un espace entre les choix. */
  gap: 9px;
  /* Ajoute une marge basse. */
  margin-bottom: 14px;
}

/* Ligne d'une case à cocher. */
.check-list label {
  /* Place la case et le texte sur une ligne. */
  display: flex;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace. */
  gap: 8px;
  /* Ajoute un fond doux. */
  background: #f8faff;
  /* Ajoute une bordure. */
  border: 1px solid var(--border);
  /* Arrondit le bloc. */
  border-radius: 9px;
  /* Ajoute un espacement intérieur. */
  padding: 9px 10px;
  /* Affiche le curseur main. */
  cursor: pointer;
}

/* Cases à cocher et boutons radio. */
input[type="checkbox"],
input[type="radio"] {
  /* Conserve une largeur automatique. */
  width: auto;
  /* Augmente légèrement la taille. */
  transform: scale(1.08);
  /* Utilise la couleur bleue d'accent. */
  accent-color: var(--blue);
}

/* Conteneur de tableau avec défilement horizontal. */
.table-wrap {
  /* Autorise le défilement horizontal. */
  overflow-x: auto;
  /* Arrondit les bords internes. */
  border-radius: 10px;
}

/* Tableau clinique. */
.clinical-table {
  /* Fusionne les bordures. */
  border-collapse: collapse;
  /* Utilise toute la largeur disponible. */
  width: 100%;
  /* Fixe une largeur minimale pour conserver la lisibilité. */
  min-width: 620px;
  /* Réduit légèrement la taille du texte. */
  font-size: 12px;
}

/* Cellules du tableau. */
.clinical-table th,
.clinical-table td {
  /* Ajoute une bordure. */
  border: 1px solid var(--border);
  /* Ajoute un espacement intérieur. */
  padding: 8px;
  /* Aligne verticalement en haut. */
  vertical-align: top;
}

/* En-têtes de tableau. */
.clinical-table th {
  /* Utilise un fond bleu clair. */
  background: var(--light-blue);
  /* Utilise la couleur bleu nuit. */
  color: var(--navy);
  /* Transforme en majuscules. */
  text-transform: uppercase;
  /* Réduit la taille. */
  font-size: 10px;
  /* Ajoute un espacement entre lettres. */
  letter-spacing: 0.04em;
}

/* Première colonne du tableau. */
.clinical-table td:first-child {
  /* Met le texte en gras. */
  font-weight: 700;
  /* Utilise un fond très clair. */
  background: #fbfcff;
}

/* Champs intégrés aux tableaux. */
.clinical-table input,
.clinical-table select {
  /* Réduit l'espacement intérieur. */
  padding: 7px;
  /* Réduit le rayon. */
  border-radius: 7px;
  /* Définit une largeur minimale. */
  min-width: 76px;
}

/* Tableau compact. */
.clinical-table.compact {
  /* Autorise une largeur légèrement plus faible. */
  min-width: 520px;
}

/* Grille des profils musculaires. */
.profile-grid {
  /* Utilise une grille à deux colonnes. */
  display: grid;
  /* Crée deux colonnes. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Ajoute un espace. */
  gap: 10px;
}

/* Option de profil. */
.profile-option {
  /* Cache le débordement. */
  overflow: hidden;
  /* Arrondit le bloc. */
  border-radius: 10px;
  /* Affiche le curseur main. */
  cursor: pointer;
}

/* Cache visuellement la case native tout en la gardant accessible. */
.profile-option input {
  /* Positionne la case hors du flux visuel. */
  position: absolute;
  /* Rend la case invisible. */
  opacity: 0;
  /* Empêche la case de prendre de la place. */
  pointer-events: none;
}

/* Texte de l'option de profil. */
.profile-option span {
  /* Affiche le texte en bloc. */
  display: block;
  /* Ajoute un espacement intérieur. */
  padding: 13px;
  /* Utilise un fond jaune doux par défaut. */
  background: #fff2a8;
  /* Met le texte en gras. */
  font-weight: 800;
  /* Centre le texte. */
  text-align: center;
  /* Ajoute une bordure transparente. */
  border: 2px solid transparent;
}

/* Marque une option cochée. */
.profile-option input:checked + span {
  /* Utilise une bordure bleu nuit. */
  border-color: var(--navy);
  /* Ajoute une ombre interne. */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* Variante orange. */
.profile-option.warm span {
  /* Utilise un fond orange. */
  background: #ffc857;
}

/* Variante rouge. */
.profile-option.danger span {
  /* Utilise un fond rouge. */
  background: #ff4f4f;
  /* Définit le texte en blanc. */
  color: var(--white);
}

/* Variante rose. */
.profile-option.pink span {
  /* Utilise un fond rose. */
  background: #ff2f92;
  /* Définit le texte en blanc. */
  color: var(--white);
}

/* Variante bleue. */
.profile-option.blue span {
  /* Utilise un fond bleu. */
  background: #1368e8;
  /* Définit le texte en blanc. */
  color: var(--white);
}

/* Variante verte. */
.profile-option.green span {
  /* Utilise un fond vert. */
  background: #17a653;
  /* Définit le texte en blanc. */
  color: var(--white);
}

/* Marge haute utilitaire. */
.spaced-top {
  /* Ajoute une marge haute. */
  margin-top: 14px;
}

/* Grille de choix segmentés. */
.segmented-grid {
  /* Utilise une grille responsive. */
  display: grid;
  /* Crée cinq colonnes. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Ajoute un espace. */
  gap: 8px;
}

/* Choix segmenté. */
.segmented-grid label {
  /* Affiche le curseur main. */
  cursor: pointer;
}

/* Cache la case native. */
.segmented-grid input {
  /* Positionne la case hors du flux. */
  position: absolute;
  /* Rend la case invisible. */
  opacity: 0;
  /* Empêche les interactions directes. */
  pointer-events: none;
}

/* Texte du choix segmenté. */
.segmented-grid span {
  /* Affiche le texte en bloc. */
  display: block;
  /* Ajoute un espacement intérieur. */
  padding: 11px 9px;
  /* Centre le texte. */
  text-align: center;
  /* Ajoute une bordure. */
  border: 1px solid var(--border);
  /* Arrondit le bloc. */
  border-radius: 9px;
  /* Utilise un fond clair. */
  background: #f8faff;
  /* Réduit la taille. */
  font-size: 12px;
  /* Met le texte en gras. */
  font-weight: 700;
}

/* État coché du choix segmenté. */
.segmented-grid input:checked + span {
  /* Utilise le fond bleu nuit. */
  background: var(--navy);
  /* Utilise le texte blanc. */
  color: var(--white);
  /* Utilise la bordure bleu nuit. */
  border-color: var(--navy);
}

/* Carte numérotée de la synthèse. */
.numbered-card {
  /* Utilise une grille. */
  display: grid;
  /* Réserve une colonne au numéro. */
  grid-template-columns: 42px minmax(0, 1fr);
  /* Ajoute un espace. */
  gap: 14px;
  /* Aligne en haut. */
  align-items: start;
}

/* Numéro de section. */
.section-index {
  /* Centre le numéro. */
  display: grid;
  /* Centre horizontalement et verticalement. */
  place-items: center;
  /* Définit la largeur. */
  width: 36px;
  /* Définit la hauteur. */
  height: 36px;
  /* Arrondit le carré. */
  border-radius: 9px;
  /* Utilise le fond bleu nuit. */
  background: var(--navy);
  /* Utilise le texte blanc. */
  color: var(--white);
  /* Met le numéro en gras. */
  font-weight: 900;
}

/* Carte de diffusion. */
.delivery-card {
  /* Place le texte et les boutons sur une ligne. */
  display: flex;
  /* Répartit les zones. */
  justify-content: space-between;
  /* Centre verticalement. */
  align-items: center;
  /* Ajoute un espace. */
  gap: 16px;
}

/* Paragraphe de la carte de diffusion. */
.delivery-card p {
  /* Supprime les marges inutiles. */
  margin: 0;
  /* Utilise la couleur secondaire. */
  color: var(--muted);
}

/* Champ conditionnel masqué. */
.hidden {
  /* Cache l'élément. */
  display: none;
}

/* Texte uniquement destiné aux lecteurs d'écran. */
.sr-only {
  /* Positionne hors du flux visible. */
  position: absolute;
  /* Définit une taille minimale. */
  width: 1px;
  /* Définit une hauteur minimale. */
  height: 1px;
  /* Cache le débordement. */
  overflow: hidden;
  /* Coupe la zone visible. */
  clip: rect(0, 0, 0, 0);
  /* Empêche le retour à la ligne. */
  white-space: nowrap;
}

/* Fenêtre modale. */
.modal {
  /* Supprime la bordure native. */
  border: 0;
  /* Arrondit la fenêtre. */
  border-radius: 16px;
  /* Définit une largeur adaptée. */
  width: min(560px, calc(100% - 32px));
  /* Ajoute un espacement intérieur. */
  padding: 22px;
  /* Ajoute une ombre importante. */
  box-shadow: 0 24px 80px rgba(7, 19, 79, 0.3);
}

/* Fond derrière la fenêtre modale. */
.modal::backdrop {
  /* Ajoute un voile sombre. */
  background: rgba(7, 19, 79, 0.55);
}

/* Titre de la modale. */
.modal h3 {
  /* Supprime la marge haute. */
  margin: 0 0 8px;
  /* Utilise la couleur bleu nuit. */
  color: var(--navy);
}

/* Note dans la modale. */
.modal-note {
  /* Ajoute une marge basse. */
  margin: 0 0 16px;
  /* Utilise la couleur secondaire. */
  color: var(--muted);
}

/* Champs de la modale. */
.modal .field {
  /* Ajoute une marge basse. */
  margin-bottom: 12px;
}

/* Actions de la modale. */
.modal-actions {
  /* Place les boutons sur une ligne. */
  display: flex;
  /* Aligne les boutons à droite. */
  justify-content: flex-end;
  /* Ajoute un espace. */
  gap: 10px;
  /* Ajoute une marge haute. */
  margin-top: 16px;
}

/* Notification temporaire. */
.toast {
  /* Fixe la notification à l'écran. */
  position: fixed;
  /* Place la notification à droite. */
  right: 24px;
  /* Place la notification en bas. */
  bottom: 24px;
  /* Utilise le fond bleu nuit. */
  background: var(--navy);
  /* Définit le texte en blanc. */
  color: var(--white);
  /* Ajoute un espacement intérieur. */
  padding: 13px 16px;
  /* Arrondit la notification. */
  border-radius: 11px;
  /* Ajoute une ombre. */
  box-shadow: var(--shadow);
  /* Rend la notification invisible par défaut. */
  opacity: 0;
  /* La décale légèrement vers le bas. */
  transform: translateY(10px);
  /* Empêche les interactions. */
  pointer-events: none;
  /* Définit une transition douce. */
  transition: 180ms ease;
  /* Place la notification au-dessus du reste. */
  z-index: 100;
}

/* Notification visible. */
.toast.show {
  /* Rend la notification visible. */
  opacity: 1;
  /* Replace la notification. */
  transform: translateY(0);
}

/* Adaptation aux écrans moyens. */
@media (max-width: 1180px) {
  /* Réduit la largeur de la barre latérale. */
  .app-shell {
    /* Utilise une barre latérale plus compacte. */
    grid-template-columns: 230px minmax(0, 1fr);
  }

  /* Réduit le nombre de colonnes des grands formulaires. */
  .field-grid-4 {
    /* Passe à deux colonnes. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Ajuste les champs occupant quatre colonnes. */
  .field-span-4 {
    /* Occupe seulement deux colonnes sur cet écran. */
    grid-column: span 2;
  }

  /* Réduit les onglets à une grille plus compacte. */
  .page-tabs {
    /* Autorise le retour sur plusieurs lignes. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Adaptation aux tablettes. */
@media (max-width: 900px) {
  /* Passe l'application sur une seule colonne. */
  .app-shell {
    /* Supprime la colonne latérale fixe. */
    grid-template-columns: 1fr;
  }

  /* Transforme la barre latérale en bandeau. */
  .sidebar {
    /* Rend la position normale. */
    position: static;
    /* Utilise une hauteur automatique. */
    height: auto;
  }

  /* Cache les éléments secondaires de la barre latérale. */
  .practice-card,
  .prototype-note {
    /* Masque les blocs pour gagner de la place. */
    display: none;
  }

  /* Affiche le menu principal en grille. */
  .main-menu {
    /* Crée plusieurs colonnes. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Passe les cartes multiples sur une colonne. */
  .card-grid-2,
  .card-grid-3 {
    /* Utilise une seule colonne. */
    grid-template-columns: 1fr;
  }

  /* Réduit les choix segmentés. */
  .segmented-grid {
    /* Utilise deux colonnes. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Adaptation aux petits écrans. */
@media (max-width: 620px) {
  /* Réduit l'espacement de la zone de travail. */
  .workspace {
    /* Utilise un espacement plus compact. */
    padding: 14px;
  }

  /* Empile l'en-tête principal. */
  .topbar {
    /* Utilise une disposition verticale. */
    flex-direction: column;
    /* Aligne les éléments à gauche. */
    align-items: stretch;
  }

  /* Empile la barre d'actions. */
  .actionbar {
    /* Utilise une disposition verticale. */
    flex-direction: column;
    /* Aligne les éléments à gauche. */
    align-items: stretch;
  }

  /* Passe les onglets sur une seule colonne. */
  .page-tabs {
    /* Crée une seule colonne. */
    grid-template-columns: 1fr;
  }



  /* Empile les contrôles du téléphone sur les écrans étroits. */
  .phone-control,
  .phone-control.has-custom-code {
    /* Utilise une seule colonne pour éviter tout écrasement. */
    grid-template-columns: 1fr;
  }

  /* Passe toutes les grilles de champs sur une seule colonne. */
  .field-grid-2,
  .field-grid-3,
  .field-grid-4 {
    /* Utilise une seule colonne. */
    grid-template-columns: 1fr;
  }

  /* Réinitialise les extensions de colonnes. */
  .field-span-2,
  .field-span-4 {
    /* Occupe une seule colonne. */
    grid-column: span 1;
  }

  /* Passe la progression sur deux lignes. */
  .progress-panel {
    /* Définit deux colonnes. */
    grid-template-columns: 1fr auto;
  }

  /* Étend la piste sur toute la largeur. */
  .progress-track {
    /* Occupe les deux colonnes. */
    grid-column: 1 / -1;
    /* Place la piste en deuxième ligne. */
    grid-row: 2;
  }

  /* Passe la carte de diffusion en colonne. */
  .delivery-card {
    /* Utilise une disposition verticale. */
    flex-direction: column;
    /* Aligne les éléments à gauche. */
    align-items: stretch;
  }

  /* Passe la grille de profils sur une colonne. */
  .profile-grid {
    /* Utilise une seule colonne. */
    grid-template-columns: 1fr;
  }
}

/* Styles d'impression de la page 5. */
@media print {
  /* Cache les éléments de navigation et d'action. */
  .sidebar,
  .actionbar,
  .page-tabs,
  .progress-panel,
  .topbar,
  .delivery-card,
  .toast {
    /* Ne les imprime pas. */
    display: none !important;
  }

  /* Supprime la grille principale. */
  .app-shell {
    /* Affiche un simple bloc. */
    display: block;
  }

  /* Supprime les marges de la zone de travail. */
  .workspace {
    /* Supprime l'espacement extérieur. */
    padding: 0;
  }

  /* Cache toutes les pages. */
  .form-page {
    /* Ne les imprime pas. */
    display: none !important;
  }

  /* Affiche uniquement la page 5. */
  .form-page[data-page-panel="5"] {
    /* Affiche la synthèse. */
    display: block !important;
  }

  /* Simplifie les cartes pour l'impression. */
  .card {
    /* Supprime l'ombre. */
    box-shadow: none;
    /* Évite de couper une carte entre deux pages. */
    break-inside: avoid;
  }

  /* Utilise le blanc comme fond d'impression. */
  body {
    /* Définit le fond blanc. */
    background: #ffffff;
  }
}

/* FIN DU FICHIER styles.css */