/*
  Ce fichier CSS contient tous les styles pour le générateur de PVI.
  Il utilise des variables CSS pour une gestion facile du thème (couleurs, etc.)
  et est organisé en sections pour plus de clarté.
*/

/* Importation de la police 'Inter' depuis Google Fonts pour un design moderne */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Définition des variables CSS globales (root) pour la palette de couleurs et le thème */
/* L'utilisation de variables permet de changer facilement le thème du site en modifiant seulement ces valeurs. */
:root {
    --bg-color: #1a1a1d;         /* Couleur de fond principale (gris très foncé) */
    --card-color: #2c2c31;       /* Couleur de fond des "cartes" (sections) */
    --border-color: #44444c;     /* Couleur des bordures */
    --text-color: #e1e1e6;       /* Couleur du texte principal (gris clair) */
    --primary-color: #4a90e2;    /* Couleur d'accentuation principale (bleu) */
    --primary-hover: #5aa1f2;    /* Couleur au survol pour la couleur principale */
    --danger-color: #e24a4a;      /* Couleur pour les actions destructrices (rouge) */
    --danger-hover: #f25a5a;     /* Couleur au survol pour la couleur danger */
    --label-color: #a0a0b0;      /* Couleur du texte des étiquettes (labels) */
}

/* ==========================================================================
   Styles de base et réinitialisation (Reset)
   ========================================================================== */

/* Réinitialisation universelle pour s'assurer que tous les éléments ont le même point de départ */
* { 
    box-sizing: border-box; /* Fait en sorte que padding et border ne s'ajoutent pas à la largeur/hauteur totale */
    margin: 0;              /* Supprime les marges par défaut */
    padding: 0;             /* Supprime les paddings par défaut */
}

body {
    font-family: 'Inter', sans-serif; /* Applique la police Inter à tout le site */
    background-color: var(--bg-color); /* Utilise la variable pour la couleur de fond */
    color: var(--text-color);          /* Utilise la variable pour la couleur du texte */
    line-height: 1.6;                  /* Hauteur de ligne pour une meilleure lisibilité */
    padding: 2rem;                     /* Ajoute de l'espace autour du contenu principal */
}

.container { 
    max-width: 1200px;      /* Largeur maximale du contenu */
    margin: 0 auto;         /* Centre le conteneur horizontalement */
    display: flex;          /* Utilise Flexbox pour la mise en page */
    flex-direction: column; /* Aligne les enfants (header, sections) verticalement */
    gap: 2rem;              /* Ajoute un espace de 2rem entre chaque enfant */
}

header { 
    text-align: center; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 1.5rem; 
    margin-bottom: 1rem; 
    display: flex; 
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    justify-content: space-between; /* Espace les éléments (titre et boutons) */
    align-items: center; 
    gap: 1rem; 
}
header h1 { font-size: 2rem; color: var(--primary-color); }

/* Style des cartes qui contiennent les sections du formulaire */
.card { 
    background-color: var(--card-color); 
    padding: 1.5rem 2rem; 
    border-radius: 8px; /* Bords arrondis */
    border: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; /* Espace entre les éléments à l'intérieur de la carte */
}
.card h2 { 
    font-size: 1.4rem; 
    color: var(--text-color); 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 1rem; 
    margin-bottom: 0.5rem; 
}

hr { border: none; border-top: 1px solid var(--border-color); margin: 0.5rem 0; } /* Ligne de séparation */

/* ==========================================================================
   Styles des formulaires (champs, étiquettes, etc.)
   ========================================================================== */

.form-group, .form-group-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-group { flex-direction: column; align-items: flex-start; } /* Pour les champs pleine largeur */
.form-group-inline.no-wrap { flex-wrap: nowrap; } /* Empêche le retour à la ligne */
.form-group label { font-weight: 500; font-size: 0.9rem; color: var(--label-color); margin-bottom: 0.25rem; }

/* Style commun pour tous les champs de saisie et de sélection */
.input-field, .input-inline, .select-inline, select { 
    background-color: var(--bg-color); 
    border: 1px solid var(--border-color); 
    border-radius: 5px; 
    padding: 0.6rem 0.8rem; 
    color: var(--text-color); 
    font-size: 1rem; 
}
/* Effet visuel quand un champ est sélectionné (focus) */
.input-field:focus, .input-inline:focus, select:focus { 
    outline: none; /* Supprime le contour par défaut */
    border-color: var(--primary-color); /* Change la couleur de la bordure */
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); /* Ajoute une ombre douce */
}
.input-field { width: 100%; } /* Champ qui prend toute la largeur */

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.input-flexible {
    flex: 1; /* Permet au champ de s'étirer pour remplir l'espace disponible */
    min-width: 150px; /* Donne une largeur minimale pour ne pas être trop écrasé */
}

/* Augmenter la hauteur pour les zones de texte et permettre le redimensionnement vertical */
textarea.input-field {
    min-height: 150px; /* Hauteur de base, environ le double de l'original */
    resize: vertical;  /* Permet à l'utilisateur de redimensionner verticalement */
}

.input-inline.large { width: 500px; } /* Variante de champ en ligne plus large */

/* Style pour les textes auto-remplis (ex: nom du mis en cause) */
.auto-fill { 
    font-weight: bold; 
    color: var(--primary-color); 
    background-color: var(--bg-color); 
    padding: 0.2rem 0.5rem; 
    border-radius: 4px; 
}

/* ==========================================================================
   Styles pour les cases à cocher et sections conditionnelles
   ========================================================================== */

.checkbox-group { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.checkbox-group.inline-check { margin-top: 0; } /* Variante sans marge supérieure */
.checkbox-group input[type="checkbox"] { 
    width: 1.1em; 
    height: 1.1em; 
    accent-color: var(--primary-color); /* Change la couleur de la coche */
}

/* Style pour les sections qui apparaissent/disparaissent */
.conditional-section { 
    padding-left: 1.5rem; 
    border-left: 3px solid var(--primary-color); /* Ligne verticale bleue pour l'indentation */
    margin-top: 1rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}

.hidden { display: none !important; } /* Classe utilitaire pour cacher des éléments */

/* ==========================================================================
   Styles des boutons
   ========================================================================== */

.controls { display: flex; flex-wrap: wrap; gap: 1rem; }

button { 
    border: none; 
    padding: 0.7rem 1.2rem; 
    border-radius: 5px; 
    font-size: 0.9rem; 
    font-weight: 700; 
    cursor: pointer; /* Curseur en forme de main */
    transition: background-color 0.2s ease; /* Animation douce au survol */
}

.google-btn { background-color: var(--primary-color); color: white; }
.google-btn:hover { background-color: var(--primary-hover); }

.secondary-btn { background-color: var(--card-color); color: var(--text-color); border: 1px solid var(--primary-color); }
.secondary-btn:hover { background-color: #3c3c42; }

.danger-btn { background-color: var(--danger-color); color: white; }
.danger-btn:hover { background-color: var(--danger-hover); }

button:disabled { background-color: var(--border-color); cursor: not-allowed; } /* Style pour les boutons désactivés */

/* ==========================================================================
   Styles personnalisés pour la bibliothèque Choices.js
   ========================================================================== */

/* Classes utilitaires pour forcer la largeur des conteneurs Choices */
.choices.choices-agent { width: 450px !important; }
.choices.choices-full-width { width: 100% !important; }

/* Style de base pour le conteneur intérieur de Choices (le champ de saisie visible) */
.choices[data-type*="select-one"] .choices__inner,
.choices[data-type*="select-multiple"] .choices__inner {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    color: var(--text-color); /* Couleur du texte de l'élément sélectionné */
}

/* Style pour le texte de remplacement (placeholder) quand rien n'est sélectionné */
.choices__placeholder, .choices[data-type*="select-multiple"] .choices__inner input.choices__input {
    color: var(--label-color) !important;
    background-color: transparent !important;
}

/* Style de la liste déroulante qui s'ouvre */
.choices.is-open .choices__list--dropdown {
    background-color: var(--card-color) !important;
    border-color: var(--border-color) !important;
}

/* Style pour chaque option dans la liste déroulante */
.choices__item--choice {
    color: var(--text-color); /* Texte clair pour une meilleure visibilité */
    white-space: normal;      /* Assure que le texte peut aller à la ligne */
    word-break: normal;       /* Empêche de couper les mots en leur milieu */
    overflow-wrap: break-word;/* Gère le retour à la ligne pour les mots longs */
    text-align: left;         /* Aligne le texte à gauche */
}

/* Style pour une option survolée ou sélectionnée au clavier */
.choices.is-open .choices__list--dropdown .choices__item--choice.is-highlighted {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Style du champ de recherche à l'intérieur de la liste déroulante */
.choices.is-open .choices__list--dropdown .choices__input {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Personnalisation de l'icône de suppression (la croix) pour les sélections multiples */
.choices[data-type*="select-multiple"] .choices__button {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="21" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="%23FFF" fill-rule="evenodd"><path d="M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z"/><path d="M.044 18.364L18.408.044l2.548 2.548L2.592 20.912z"/></g></svg>');
}

/* ==========================================================================
   Styles pour la section finale et les liens
   ========================================================================== */

/* Style pour le bloc de texte <pre> du rapport final généré */
#final-pvi {
    white-space: pre-wrap; /* Permet au texte de passer à la ligne automatiquement */
    word-wrap: break-word; /* Coupe les mots longs si nécessaire pour éviter le débordement */
    background-color: var(--bg-color);
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

/* Style pour le lien vers le document Google Doc */
#doc-link-container a { color: var(--primary-hover); }

/* Style pour le conteneur affichant le dossier Drive sélectionné */
#drive-folder-container { font-size: 0.9rem; color: var(--label-color); }