/**
 * Styles principaux - Application de Tirage au Sort
 *
 * Layout: 3 colonnes (15% | 55% | 30%) sans défilement vertical
 * Conforme RGAA AA avec contrastes vérifiés (4.5:1+ pour texte)
 *
 * AIDEV-NOTE: Contrastes RGAA AA
 * - Texte normal: minimum 4.5:1
 * - Texte large (18pt+): minimum 3:1
 * - Éléments UI: minimum 3:1
 */

/* ============ VARIABLES CSS ============ */
/* AIDEV-NOTE: Variables CSS centralisées
 * Toutes les valeurs configurables de l'application
 * Contrastes vérifiés RGAA AA (ratios documentés)
 * Voir specs/002-resolutions/architecture.md section 2 pour documentation complète
 */
:root {
  /* Couleurs principales - vérifiées RGAA */
  --color-primary: #1565c0;           /* 7.0:1 sur blanc */
  --color-primary-hover: #0d47a1;     /* 10.7:1 sur blanc */
  --color-primary-light: #e3f2fd;

  /* Texte */
  --color-text-primary: #212121;      /* 16.1:1 sur blanc */
  --color-text-secondary: #424242;    /* 11.9:1 sur blanc */

  /* États */
  --color-success: #2e7d32;           /* 4.5:1 sur blanc */
  --color-success-bg: #e8f5e9;
  --color-error: #c62828;             /* 5.9:1 sur blanc */
  --color-error-bg: #ffebee;
  --color-warning: #ef6c00;           /* 4.6:1 sur blanc */
  --color-warning-bg: #fff3e0;

  /* Focus - haute visibilité */
  --color-focus: #0d47a1;
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;

  /* Fonds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-highlight: #e3f2fd;

  /* Bordures */
  --color-border: #bdbdbd;
  --color-border-focus: #1565c0;

  /* Typographie */
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-large: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  /* AIDEV-NOTE: Typographie fluide pour VPI/TNI (FR-008)
   * Utilise clamp() pour scaling progressif entre breakpoints
   * Format: clamp(min, preferred, max)
   * - min: taille minimale (desktop standard 1024px)
   * - preferred: formule adaptative (base + vw pour scaling fluide)
   * - max: taille maximale (grands écrans VPI 1920px+)
   * Assure lisibilité 6m sur écrans FHD (28pt minimum pour résultats)
   */
  --font-size-result-1: clamp(48pt, calc(48pt + 3vw), 96pt);
  --font-size-result-2-3: clamp(36pt, calc(36pt + 2vw), 64pt);
  --font-size-result-4-5: clamp(28pt, calc(28pt + 1.5vw), 48pt);
  --font-size-result-6-10: clamp(24pt, calc(24pt + 1vw), 36pt);
  --font-size-result-11-20: clamp(18pt, calc(18pt + 0.5vw), 24pt);
  --font-size-result-21plus: clamp(14pt, calc(14pt + 0.3vw), 18pt);

  /* Espacements */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* AIDEV-NOTE: Breakpoints responsive (FR-001, FR-003)
   * Définition centralisée des points de rupture
   * Ces valeurs sont documentées dans specs/002-resolutions/architecture.md
   * Alignés sur standards industrie 2025 (Tailwind/Bootstrap)
   */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-laptop: 1280px;   /* Laptops 13-15" (standard Tailwind xl) */
  --breakpoint-large: 1920px;

  /* Dimensions layout */
  --header-height: 48px;
  --main-height: calc(100vh - var(--header-height));

  /* Largeurs colonnes */
  --column-draw-width: 15%;
  --column-results-width: 55%;
  --column-participants-width: 20%;

  /* Min-width colonnes */
  --column-draw-min: 180px;
  --column-results-min: 400px;
  --column-participants-min: 280px;

  /* Dimensions contrôles */
  --button-min-height: 44px;  /* WCAG Target Size */
  --button-min-width: 44px;
  --input-min-height: 44px;
  --border-radius: 4px;
}

/* ============ RESET & BASE ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
}

/* AIDEV-NOTE: Accessibilité typographique WCAG 1.4.12 (FR-009, FR-010, FR-011)
 * line-height 1.5 par défaut (FR-009)
 * L'interface reste fonctionnelle avec les ajustements utilisateur:
 * - letter-spacing jusqu'à 0.12em
 * - word-spacing jusqu'à 0.16em
 * Les layouts flexbox/grid s'adaptent automatiquement
 */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;                    /* FR-009: interligne 1.5x minimum */
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  height: 100vh;
  overflow: hidden; /* Pas de scroll sur le body (>= 1024px) */
}

/* ============ TYPOGRAPHIE ============ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.2;
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-xl);
}

h2 {
  font-size: var(--font-size-large);
}

.section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

p {
  margin: 0 0 var(--spacing-sm) 0;
}

/* ============ LAYOUT PRINCIPAL ============ */
/* AIDEV-NOTE: Layout 3 colonnes
 * Structure: Header fixe (48px) + Main (100vh - 48px)
 * Grille: Tirage (15%) | Résultats (55% flex) | Participants (20%)
 * Overflow hidden sur body pour écrans >= 1024px
 * Voir specs/002-resolutions/architecture.md pour schéma complet
 */

/* Header - 48px fixe */
.app-header {
  height: var(--header-height);
  background-color: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  position: relative;
}

.app-header h1 {
  color: white;
  margin: 0;
  font-size: var(--font-size-xl);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Conteneurs de liens dans le header */
.header-links {
  display: flex;
  gap: var(--spacing-sm);
  z-index: 1;
}

.header-links--left {
  justify-content: flex-start;
}

.header-links--right {
  justify-content: flex-end;
}

/* Liens dans le header - style bouton discret */
.header-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: var(--font-size-sm, 14px);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.header-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  text-decoration: underline;
}

.header-link:focus {
  outline: 2px solid white;
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* Main - calc(100vh - header) */
.app-main {
  height: var(--main-height);
  overflow: hidden;
  position: relative;
}

/* Conteneur d'erreurs global */
.error-container {
  position: absolute;
  top: var(--spacing-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: 600px;
  width: 90%;
}

/* Grille 3 colonnes */
.app-grid {
  display: grid;
  grid-template-columns:
    minmax(var(--column-draw-min), var(--column-draw-width))
    minmax(var(--column-results-min), 1fr)
    minmax(var(--column-participants-min), var(--column-participants-width));
  height: 100%;
  gap: 0;
}

/* Colonne gauche: Tirage */
.column-draw {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-md);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Footer copyright dans colonne tirage */
.column-draw__footer {
  margin-top: auto;
  padding-top: var(--spacing-md);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs, 11px);
}

/* Colonne centrale: Résultats */
.column-results {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Colonne droite: Participants */
.column-participants {
  background-color: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* AIDEV-NOTE: Zone liste participants - Flexbox dynamique
 * flex: 1 1 auto permet à la zone de croître ET de rétrécir selon l'espace disponible
 * min-height: 150px garantit un minimum de lisibilité
 * Cette approche résout le problème de hauteur fixe sur écrans contraints (ex: 1180x820)
 */
.participants-list-section {
  flex: 1 1 auto;
  padding: var(--spacing-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 150px; /* Minimum pour voir quelques participants */
}

/* Conteneur liste participants - doit remplir l'espace */
#list-input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* AIDEV-NOTE: Zone sauvegarde - Taille basée sur contenu
 * flex: 0 0 auto empêche la zone de rétrécir en dessous de son contenu
 * Garantit que les boutons "Listes enregistrées" restent toujours visibles
 */
.participants-save-section {
  flex: 0 0 auto;
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  overflow: visible;
}

/* ============ FORMULAIRES ============ */
label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
  font-size: 14px;
}

input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: var(--input-min-height);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--color-border-focus);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

textarea {
  resize: none; /* Pas de resize dans layout fixe */
}

/* ============ BOUTONS ============ */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-min-height);
  min-width: var(--button-min-width);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: inherit;
  color: white;
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover,
.button:hover {
  background-color: var(--color-primary-hover);
}

button:focus,
.button:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

button:disabled,
.button:disabled {
  background-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Bouton principal (grand) */
.button-primary-large {
  width: 100%;
  padding: var(--spacing-md);
  font-size: var(--font-size-large);
  background-color: var(--color-success);
}

.button-primary-large:hover {
  background-color: #1b5e20;
}

/* Bouton secondaire */
.button-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.button-secondary:hover {
  background-color: var(--color-primary-light);
}

/* Bouton danger */
.button-danger {
  background-color: var(--color-error);
}

.button-danger:hover {
  background-color: #b71c1c;
}

/* Bouton success */
.button-success {
  background-color: var(--color-success);
}

.button-success:hover {
  background-color: #1b5e20;
}

/* Boutons petits */
.button-sm {
  min-height: 36px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 14px;
}

/* ============ CONTRÔLES DE TIRAGE ============ */
.draw-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  height: 100%;
}

/* Mode de tirage (radio buttons) */
.draw-mode-selector {
  margin-bottom: var(--spacing-md);
}

.draw-mode-selector fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.draw-mode-selector legend {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.draw-mode-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
}

.draw-mode-option input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.draw-mode-option label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

/* Configuration du tirage */
.draw-config {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.draw-config__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.draw-config__field input[type="number"] {
  width: 80px;
}

.draw-config__info {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.draw-config__preview {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* AIDEV-NOTE: Compteur tactile pour TNI/VPI
 * Boutons 56×56px pour faciliter l'utilisation sur écrans tactiles interactifs
 * Dépasse le minimum WCAG de 44×44px pour meilleure ergonomie en classe
 */

/* Contrôle compteur tactile (TNI) */
.counter-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-sm) 0;
}

.counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  font-size: 32px;
  font-weight: 700;
  color: white;
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.counter-btn:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}

.counter-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.counter-btn:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

.counter-btn:disabled {
  background-color: var(--color-border);
  cursor: not-allowed;
  opacity: 0.5;
}

.counter-btn--minus {
  background-color: var(--color-text-secondary);
}

.counter-btn--minus:hover:not(:disabled) {
  background-color: #333;
}

.counter-btn--plus {
  background-color: var(--color-success);
}

.counter-btn--plus:hover:not(:disabled) {
  background-color: #1b5e20;
}

.counter-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
}

/* Bouton "Tous" */
.button-all {
  width: 100%;
  min-height: 48px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: var(--spacing-sm);
}

.button-all:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: white;
}

.button-all:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

.button-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Option mixité */
.mixite-option {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background-color: var(--color-bg-primary);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-sm);
}

.mixite-option label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: normal;
  cursor: pointer;
}

.mixite-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.mixite-stats {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: 28px;
}

.mixite-warning {
  font-size: 12px;
  color: var(--color-warning);
  margin-left: 28px;
}

/* Option tirage unique */
.unique-draw-option {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background-color: var(--color-bg-primary);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-sm);
  border: 1px solid var(--color-border);
}

.unique-draw-option__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.unique-draw-option label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: normal;
  cursor: pointer;
}

.unique-draw-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.unique-draw-stats {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: 28px;
}

/* Bouton reset tirage unique */
.button-reset-drawn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  font-size: 16px;
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-reset-drawn:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.button-reset-drawn:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

.button-reset-drawn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Bouton de tirage */
.draw-action {
  margin-top: auto;
}

/* ============ ZONE RÉSULTATS ============ */
.result-display {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Message d'accueil (avant le premier tirage) */
.result-display--welcome {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  padding: var(--spacing-xl);
  overflow-y: auto;
}

.welcome-message {
  max-width: 600px;
  margin: 0 auto;
}

.welcome-logo {
  display: block;
  width: 30%;
  max-width: 300px;
  height: auto;
  margin: 0 auto var(--spacing-lg);
}

.welcome-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.welcome-description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.welcome-section {
  margin-bottom: var(--spacing-lg);
}

.welcome-section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.welcome-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.welcome-steps li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  line-height: 1.5;
}

.welcome-steps li::before {
  content: counter(step) ".";
  counter-increment: step;
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-primary);
}

.welcome-options {
  list-style: none;
  padding: 0;
  margin: 0;
}

.welcome-options li {
  padding: var(--spacing-sm) 0;
  line-height: 1.6;
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background-color: var(--color-bg-highlight);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.welcome-tip {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--color-success-bg, #e8f5e9);
  border-radius: var(--border-radius);
  color: var(--color-success, #2e7d32);
  text-align: center;
}

/* Titre résultat */
.result-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Liste des désignés */
.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-sm) var(--spacing-md);
  grid-auto-flow: column; /* Remplissage par colonne (1,2,3... puis 7,8,9...) */
  justify-content: center;
  align-content: center;
  width: 100%;
  max-height: 100%;
}

.result-item {
  font-weight: 700;
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-bg-highlight);
  border-radius: var(--border-radius);
  animation: fadeIn 0.3s ease-out;
  white-space: nowrap;
}

.result-item--first {
  background-color: var(--color-primary);
  color: white;
}

/* AIDEV-NOTE: Affichage adaptatif des résultats
 * Taille de police et nombre de colonnes selon le nombre de résultats tirés
 * Variables --font-size-result-* définies dans :root
 * Classes .result-list--size-* appliquées dynamiquement par JS
 * Modification prévue: conversion en clamp() pour typographie fluide (FR-008)
 */

/* Tailles et colonnes adaptatives selon nombre de résultats */
/* 1 résultat: 1 colonne */
.result-list--size-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.result-list--size-1 .result-item { font-size: var(--font-size-result-1); }

/* 2-3 résultats: 1 colonne */
.result-list--size-2-3 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
}
.result-list--size-2-3 .result-item { font-size: var(--font-size-result-2-3); }

/* 4-5 résultats: 1 colonne */
.result-list--size-4-5 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, auto);
}
.result-list--size-4-5 .result-item { font-size: var(--font-size-result-4-5); }

/* 6-10 résultats: 2 colonnes */
.result-list--size-6-10 {
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(5, auto);
}
.result-list--size-6-10 .result-item { font-size: var(--font-size-result-6-10); }

/* 11-20 résultats: 2 colonnes */
.result-list--size-11-20 {
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(10, auto);
}
.result-list--size-11-20 .result-item { font-size: var(--font-size-result-11-20); }

/* 21+ résultats: 3 colonnes */
.result-list--size-21plus {
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(12, auto);
}
.result-list--size-21plus .result-item { font-size: var(--font-size-result-21plus); }

/* Affichage groupes */
.result-groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
  width: 100%;
}

.result-group {
  flex: 1;
  min-width: 150px;
  max-width: 250px;
  background-color: var(--color-bg-highlight);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: center;
}

.result-group__title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary);
}

.result-group__members {
  list-style: none;
  padding: 0;
  margin: 0;
}

.result-group__member {
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
}

.result-group__member--female::before {
  content: "F ";
}

.result-group__member--male::before {
  content: "G ";
}

/* Résumé */
.result-summary {
  margin-top: var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

/* Actions résultat */
.result-actions {
  margin-top: var(--spacing-lg);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ LISTE PARTICIPANTS ============ */
.list-input {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--spacing-sm);
}

.list-input__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-input__count {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.list-input__textarea-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.list-input textarea {
  flex: 1;
  min-height: 100px;
  font-family: inherit;
}

.list-input__help {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
}

.list-input__add-btn {
  margin-top: var(--spacing-sm);
}

/* Ligne d'ajout de participant (input + bouton) */
.list-input__add-row {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.list-input__add-row input {
  flex: 1;
  min-height: 36px;
}

.list-input__add-row .button-sm {
  min-width: 36px;
  padding: 0;
  font-size: 18px;
}

/* AIDEV-NOTE: Liste visuelle des participants - Flexbox dynamique
 * flex: 1 1 0 permet de prendre l'espace disponible et de rétrécir si nécessaire
 * min-height: 80px garantit un minimum de visibilité (environ 3 participants)
 * overflow-y: auto ajoute scroll interne si le contenu dépasse
 */
.list-input__visual {
  flex: 1 1 0;
  min-height: 80px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-primary);
}

.list-input__visual-empty {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: 14px;
  text-align: center;
  padding: var(--spacing-md);
  margin: 0;
}

/* Participant dans la liste visuelle */
.visual-participant {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.4;
}

.visual-participant:last-child {
  border-bottom: none;
}

.visual-participant__name {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icône de genre cliquable - style compact sans couleur */
.gender-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: none;
  border-radius: 2px;
  background-color: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  transition: background-color 0.15s ease;
}

.gender-icon:hover {
  background-color: var(--color-bg-secondary);
}

.gender-icon:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* États des icônes de genre - sans couleurs distinctives */
.gender-icon--undefined {
  color: var(--color-border);
}

.gender-icon--female,
.gender-icon--male {
  color: var(--color-text-primary);
}

/* AIDEV-NOTE: Tooltip d'onboarding pour la fonctionnalité genre
 * Affiché une seule fois lors du premier ajout de participant
 * Positionné à droite près de la colonne participants
 * Couleurs en dur pour garantir le contraste (évite problèmes de variables CSS)
 */
.gender-onboarding-tooltip {
  position: fixed;
  top: 120px;
  right: 20px;
  /* Couleurs en dur: bleu #1565c0 sur blanc = 7:1 ratio WCAG AAA */
  background-color: #1565c0;
  color: #ffffff;
  padding: 16px 24px;
  padding-right: 48px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: fadeInTooltip 0.4s ease-out;
}

.gender-onboarding-tooltip__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.15s, background-color 0.15s;
}

.gender-onboarding-tooltip__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
}

@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tooltip responsive pour mobile/tablette */
@media (max-width: 1024px) {
  .gender-onboarding-tooltip {
    top: auto;
    bottom: 20px;
    right: 20px;
    left: 20px;
    max-width: none;
  }
}

/* Participant déjà tiré (tirage unique) */
.visual-participant--drawn {
  opacity: 0.5;
}

.visual-participant--drawn .visual-participant__name {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

/* Actions de dialogue */
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* Bouton de suppression */
.delete-participant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: none;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.15s ease;
}

.delete-participant:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

.delete-participant:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* Liste visuelle des participants (ancien style - rétrocompatibilité) */
.participants-visual-list {
  flex: 1;
  overflow-y: auto; /* Seule zone avec scroll */
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-primary);
}

.participant-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.participant-item:last-child {
  border-bottom: none;
}

.participant-item__gender {
  width: 20px;
  text-align: center;
  cursor: pointer;
}

.participant-item__gender--female {
  color: #e91e63;
}

.participant-item__gender--male {
  color: #2196f3;
}

.participant-item__gender--undefined {
  color: var(--color-text-secondary);
}

.participant-item__name {
  flex: 1;
}

.participant-item__selected {
  color: var(--color-success);
}

/* ============ GESTION LISTES ============ */
.list-manager {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  height: 100%;
}

.list-manager__select-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.list-manager__select-wrapper select {
  width: 100%;
}

.list-manager__actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.list-manager__actions button {
  flex: 1;
  min-width: 80px;
}

/* Boutons Export/Import fichiers */
.list-manager__file-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

.button-file {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-file:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.button-file:focus {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
}

/* ============ MESSAGES ============ */
.error-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--color-error-bg);
  border-left: 4px solid var(--color-error);
  border-radius: var(--border-radius);
  color: var(--color-error);
  font-weight: 500;
}

.success-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
  border-radius: var(--border-radius);
  color: var(--color-success);
  font-weight: 500;
}

.warning-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-warning-bg);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--border-radius);
  color: var(--color-warning);
  font-size: 14px;
}

/* Fix: s'assurer que hidden fonctionne sur warning-message */
.warning-message[hidden] {
  display: none !important;
}

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

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

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-text-secondary);
}

/* ============ RESPONSIVE ============ */
/* AIDEV-NOTE: Breakpoints responsive
 * 5 breakpoints: 480px, 768px, 1024px, 1280px, 1920px
 * < 768px: Mode portrait, réorganisation Participants → Tirage → Résultats
 * < 1024px: Scroll vertical autorisé
 * >= 1024px: Layout 3 colonnes, pas de scroll
 * >= 1280px: Laptops 13-15", colonnes optimisées
 * >= 1920px: Grands écrans VPI/TNI
 * Voir specs/002-resolutions/architecture.md pour documentation complète
 */

/* AIDEV-NOTE: Portrait reorder (FR-003)
 * Réorganisation des colonnes en mode portrait (< 768px)
 * Ordre: Participants (1) → Tirage (2) → Résultats (3)
 * Utilise CSS order pour changer l'affichage sans modifier le HTML
 */

/* Mobile portrait (< 480px) */
@media (max-width: 479px) {
  /* AIDEV-NOTE: Header responsive petit écran
   * Passe en layout vertical pour éviter chevauchement titre/liens
   */
  .app-header {
    height: auto;
    min-height: var(--header-height);
    flex-direction: column;
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
  }

  .app-header h1 {
    position: static;
    transform: none;
    font-size: var(--font-size-large);
    order: 1;
  }

  .header-links {
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-links--left,
  .header-links--right {
    justify-content: center;
  }

  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(250px, 1fr);
  }

  .column-participants { order: 1; }
  .column-draw { order: 2; }
  .column-results { order: 3; }

  /* Réduction des paddings sur très petits écrans */
  .column-draw,
  .column-results,
  .participants-list-section,
  .participants-save-section {
    padding: var(--spacing-sm);
  }
}

/* Tablette portrait / Mobile paysage (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  /* Header responsive tablette portrait */
  .app-header {
    height: auto;
    min-height: var(--header-height);
    flex-wrap: wrap;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-xs);
  }

  .app-header h1 {
    position: static;
    transform: none;
    font-size: var(--font-size-xl);
    width: 100%;
    text-align: center;
    order: 1;
  }

  .header-links {
    order: 2;
  }

  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(300px, 1fr);
  }

  .column-participants { order: 1; }
  .column-draw { order: 2; }
  .column-results { order: 3; }
}

/* Tablette portrait (768px - 1023px en portrait) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(300px, 1fr);
  }

  /* Portrait: même ordre que mobile */
  .column-participants { order: 1; }
  .column-draw { order: 2; }
  .column-results { order: 3; }
}

/* Tablette paysage / Petit desktop (768px - 1023px en paysage) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(300px, 1fr);
  }

  /* Paysage: même ordre que portrait */
  .column-participants { order: 1; }
  .column-draw { order: 2; }
  .column-results { order: 3; }
}

/* AIDEV-NOTE: Breakpoint principal mobile/tablette (FR-017, FR-018)
 * Autorise le scroll vertical pour les résolutions < 1024px
 * NOTE: Les règles .app-grid sont définies dans les breakpoints spécifiques
 * (479px, 480-767px, 768-1023px) pour éviter les conflits de cascade CSS
 */
@media (max-width: 1023px),
       (min-width: 1024px) and (max-height: 800px) {
  /* Autoriser le scroll vertical global */
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  /* AIDEV-NOTE: Déblocage scroll - .app-main
   * Désactive height fixe et overflow hidden pour permettre le scroll
   */
  .app-main {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .app-grid {
    height: auto;
  }

  /* Bordures adaptées au layout 1 colonne */
  .column-draw {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
  }

  .column-participants {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  .column-results {
    min-height: 300px;
    overflow: visible;
  }

  /* Sections participants - permettre affichage complet */
  .participants-list-section,
  .participants-save-section {
    flex: none;
    overflow: visible;
  }
}

/* AIDEV-NOTE: Petit desktop paysage avec hauteur limitée
 * Pour 1024x768 et similaires où le layout 3 colonnes ne tient pas
 * Passe en layout 1 colonne avec scroll
 */
@media (min-width: 1024px) and (max-height: 800px) {
  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(300px, 1fr);
  }

  /* Ordre unifié: Participants → Tirage → Résultats */
  .column-participants { order: 1; }
  .column-draw { order: 2; }
  .column-results { order: 3; }

  .column-draw {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .column-participants {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* AIDEV-NOTE: Laptop standard (1280px - 1919px)
 * Breakpoint intermédiaire pour laptops 13-15" (1280x800, 1366x768, 1440x900)
 * Optimise l'espacement et la lisibilité sur écrans de taille moyenne
 * Standard industrie 2025 (Tailwind xl, Bootstrap entre lg et xl)
 * Reset order pour éviter conflit cascade avec breakpoint max-height:800px
 */
@media (min-width: 1280px) and (max-width: 1919px) {
  /* Ajustement colonnes pour meilleure utilisation de l'espace */
  .app-grid {
    grid-template-columns: 18% 1fr 22%;
  }

  /* Reset ordre desktop (annule l'ordre portrait du breakpoint hauteur limitée) */
  .column-draw { order: 0; }
  .column-results { order: 0; }
  .column-participants { order: 0; }

  /* Légère augmentation des paddings pour aération */
  .column-draw,
  .column-results {
    padding: var(--spacing-lg);
  }
}

/* AIDEV-NOTE: Grande résolution VPI/TNI (FR-004, FR-019)
 * Les tailles de police sont maintenant gérées par clamp() dans :root
 * Cette media query conservée pour styles spécifiques grands écrans
 * Overflow hidden hérité du body par défaut (>= 1024px)
 */
@media (min-width: 1920px) {
  /* Styles spécifiques grands écrans si nécessaire */
  body {
    overflow: hidden; /* FR-019: Pas de scroll sur grands écrans */
  }
}

/* AIDEV-NOTE: Écrans ultra-wide 21:9+ (FR-021, FR-022)
 * Limite la largeur maximale et centre le contenu
 * Évite que l'interface soit trop étirée sur écrans très larges
 */
@media (min-aspect-ratio: 21/9) {
  .app-grid {
    max-width: 2560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mode réduit (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}