/* ==========================================================================
   AROLE - Composants reutilisables
   Styles pour les elements d'interface communs a toute l'application

   Sommaire :
   1. Pagination
   2. Barre de recherche
   3. Etiquettes / Badges
   4. Tableaux de donnees
   5. Fil d'Ariane (breadcrumbs)
   6. Indicateur de chargement (spinner)
   7. Etat vide
   8. Indicateurs de statut
   9. Blason (liste des brevets acquis)
   ========================================================================== */


/* ==========================================================================
   1. PAGINATION
   Navigation entre les pages de resultats
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-xs);
  padding: var(--espace-md) 0;
}

/* Element individuel de la pagination */
.pagination__element {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--espace-sm);
  font-size: var(--taille-texte-sm);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte-secondaire);
  background-color: transparent;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-rapide),
    border-color var(--transition-rapide), color var(--transition-rapide);
}

.pagination__element:hover {
  background-color: var(--couleur-fond-secondaire);
  border-color: var(--couleur-secondaire);
  color: var(--couleur-texte);
  text-decoration: none;
}

/* Page active */
.pagination__element--actif {
  background-color: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  color: var(--couleur-texte-inverse);
  font-weight: var(--graisse-semi-gras);
}

.pagination__element--actif:hover {
  background-color: var(--couleur-primaire-claire);
  border-color: var(--couleur-primaire-claire);
  color: var(--couleur-texte-inverse);
}

/* Boutons precedent / suivant */
.pagination__fleche {
  font-size: var(--taille-texte-lg);
}

/* Element desactive (premiere/derniere page) */
.pagination__element--desactive {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Points de suspension (...) */
.pagination__ellipse {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-texte-desactive);
  font-size: var(--taille-texte-sm);
  cursor: default;
  border: none;
}

/* Informations de pagination (ex: "Page 3 sur 12") */
.pagination__info {
  font-size: var(--taille-texte-sm);
  color: var(--couleur-texte-desactive);
  margin-left: var(--espace-md);
}

/* Selecteur de nombre d'elements par page */
.pagination__par-page {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  margin-left: var(--espace-lg);
  font-size: var(--taille-texte-sm);
  color: var(--couleur-texte-secondaire);
}

.pagination__par-page select {
  width: auto;
  min-width: 60px;
  padding: var(--espace-xs) var(--espace-sm);
  font-size: var(--taille-texte-sm);
}


/* ==========================================================================
   2. BARRE DE RECHERCHE
   Champ de recherche avec icone et options de filtre
   ========================================================================== */

.recherche {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
}

/* Champ de recherche */
.recherche__champ {
  width: 100%;
  padding: var(--espace-sm) var(--espace-md);
  padding-left: 40px; /* Espace pour l'icone */
  padding-right: 40px; /* Espace pour le bouton effacer */
  background-color: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-complet);
  font-size: var(--taille-texte-sm);
  color: var(--couleur-texte);
  transition: border-color var(--transition-rapide),
    box-shadow var(--transition-rapide), width var(--transition-base);
}

.recherche__champ:focus {
  outline: none;
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px rgba(107, 163, 62, 0.15);
}

.recherche__champ::placeholder {
  color: var(--couleur-texte-desactive);
}

/* Icone loupe a gauche */
.recherche__icone {
  position: absolute;
  left: var(--espace-md);
  width: 18px;
  height: 18px;
  color: var(--couleur-texte-desactive);
  pointer-events: none;
}

/* Bouton pour effacer la recherche */
.recherche__effacer {
  position: absolute;
  right: var(--espace-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--couleur-texte-desactive);
  cursor: pointer;
  border-radius: var(--rayon-complet);
  opacity: 0;
  transition: opacity var(--transition-rapide),
    background-color var(--transition-rapide);
}

/* Visible seulement quand il y a du texte */
.recherche__champ:not(:placeholder-shown) ~ .recherche__effacer {
  opacity: 1;
}

.recherche__effacer:hover {
  background-color: var(--couleur-fond-secondaire);
  color: var(--couleur-texte);
}

/* Variante compacte */
.recherche--compacte .recherche__champ {
  padding: var(--espace-xs) var(--espace-sm);
  padding-left: 32px;
  font-size: var(--taille-texte-xs);
}

.recherche--compacte .recherche__icone {
  left: var(--espace-sm);
  width: 14px;
  height: 14px;
}

/* Barre de recherche avec bouton de filtre */
.recherche-avec-filtres {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  width: 100%;
}

.recherche-avec-filtres .recherche {
  flex: 1;
}

/* Bouton filtre a cote de la recherche */
.recherche__filtre-bouton {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: var(--espace-sm) var(--espace-md);
  background-color: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-complet);
  font-size: var(--taille-texte-sm);
  color: var(--couleur-texte-secondaire);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-rapide),
    background-color var(--transition-rapide);
}

.recherche__filtre-bouton:hover {
  border-color: var(--couleur-secondaire);
  background-color: var(--couleur-fond-secondaire);
}

/* Indicateur de filtres actifs */
.recherche__filtre-compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--espace-xs);
  background-color: var(--couleur-primaire);
  color: var(--couleur-texte-inverse);
  font-size: 10px;
  font-weight: var(--graisse-gras);
  border-radius: var(--rayon-complet);
}


/* ==========================================================================
   3. ETIQUETTES / BADGES
   Petits elements visuels pour categoriser ou marquer des elements
   ========================================================================== */

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 2px var(--espace-sm);
  font-size: var(--taille-texte-xs);
  font-weight: var(--graisse-moyenne);
  line-height: 1.5;
  border-radius: var(--rayon-complet);
  white-space: nowrap;
}

/* Variante par defaut (neutre) */
.etiquette--defaut {
  background-color: var(--couleur-fond-secondaire);
  color: var(--couleur-texte-secondaire);
}

/* Variante primaire (vert fonce) */
.etiquette--primaire {
  background-color: rgba(45, 80, 22, 0.12);
  color: var(--couleur-primaire);
}

/* Variante secondaire (vert moyen) */
.etiquette--secondaire {
  background-color: rgba(74, 124, 35, 0.12);
  color: var(--couleur-secondaire);
}

/* Variante accent (vert clair) */
.etiquette--accent {
  background-color: rgba(107, 163, 62, 0.12);
  color: var(--couleur-accent-sombre);
}

/* Variante succes */
.etiquette--succes {
  background-color: var(--couleur-succes-fond);
  color: var(--couleur-succes);
}

/* Variante avertissement */
.etiquette--avertissement {
  background-color: var(--couleur-avertissement-fond);
  color: var(--couleur-avertissement);
}

/* Variante erreur */
.etiquette--erreur {
  background-color: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}

/* Variante info */
.etiquette--info {
  background-color: var(--couleur-info-fond);
  color: var(--couleur-info);
}

/* Etiquette avec bordure (contour) */
.etiquette--contour {
  background-color: transparent;
  border: 1px solid currentColor;
}

/* Etiquette avec icone de suppression */
.etiquette__supprimer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--rayon-complet);
  opacity: 0.6;
  margin-left: 2px;
  margin-right: -4px;
  transition: opacity var(--transition-rapide),
    background-color var(--transition-rapide);
}

.etiquette__supprimer:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

/* Badge numerique (compteur) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--graisse-gras);
  line-height: 1;
  border-radius: var(--rayon-complet);
  background-color: var(--couleur-primaire);
  color: var(--couleur-texte-inverse);
}

.badge--petit {
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  padding: 0 4px;
}

.badge--secondaire {
  background-color: var(--couleur-texte-desactive);
}

.badge--danger {
  background-color: var(--couleur-erreur);
}

/* Groupe d'etiquettes */
.etiquette-groupe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}


/* ==========================================================================
   4. TABLEAUX DE DONNEES
   Presentation tabulaire des informations
   ========================================================================== */

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--taille-texte-sm);
}

/* Conteneur avec defilement horizontal */
.tableau-conteneur {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--couleur-bordure-legere);
  border-radius: var(--rayon-lg);
  background-color: var(--couleur-fond-carte);
}

/* En-tete du tableau */
.tableau thead {
  background-color: var(--couleur-fond-secondaire);
}

.tableau th {
  padding: var(--espace-sm) var(--espace-md);
  text-align: left;
  font-weight: var(--graisse-semi-gras);
  font-size: var(--taille-texte-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--couleur-texte-secondaire);
  border-bottom: 2px solid var(--couleur-bordure);
  white-space: nowrap;
  user-select: none;
}

/* Cellules du corps */
.tableau td {
  padding: var(--espace-sm) var(--espace-md);
  border-bottom: 1px solid var(--couleur-bordure-legere);
  color: var(--couleur-texte);
  vertical-align: middle;
}

/* Derniere ligne sans bordure inferieure */
.tableau tbody tr:last-child td {
  border-bottom: none;
}

/* Ligne au survol */
.tableau tbody tr {
  transition: background-color var(--transition-rapide);
}

.tableau tbody tr:hover {
  background-color: var(--couleur-fond-secondaire);
}

/* Ligne selectionnee */
.tableau tbody tr.ligne-selectionnee {
  background-color: rgba(45, 80, 22, 0.06);
}

/* En-tete triable */
.tableau th[data-tri] {
  cursor: pointer;
  position: relative;
  padding-right: var(--espace-xl);
}

.tableau th[data-tri]:hover {
  background-color: var(--couleur-bordure-legere);
}

/* Indicateur de tri (fleche) */
.tableau th[data-tri]::after {
  content: "";
  position: absolute;
  right: var(--espace-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--couleur-texte-desactive);
  opacity: 0.4;
}

.tableau th[data-tri="asc"]::after {
  border-top: none;
  border-bottom: 5px solid var(--couleur-primaire);
  opacity: 1;
}

.tableau th[data-tri="desc"]::after {
  border-top: 5px solid var(--couleur-primaire);
  opacity: 1;
}

/* Tableau compact (moins de padding) */
.tableau--compact th,
.tableau--compact td {
  padding: var(--espace-xs) var(--espace-sm);
}

/* Tableau raye (lignes alternees) */
.tableau--raye tbody tr:nth-child(even) {
  background-color: var(--couleur-fond-secondaire);
}

.tableau--raye tbody tr:nth-child(even):hover {
  background-color: var(--couleur-bordure-legere);
}

/* Cellule d'actions (boutons a droite) */
.tableau__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  justify-content: flex-end;
}

/* Pied de tableau (totaux, resume) */
.tableau tfoot {
  background-color: var(--couleur-fond-secondaire);
  font-weight: var(--graisse-semi-gras);
}

.tableau tfoot td {
  padding: var(--espace-sm) var(--espace-md);
  border-top: 2px solid var(--couleur-bordure);
  border-bottom: none;
}


/* ==========================================================================
   5. FIL D'ARIANE (Breadcrumbs)
   Navigation hierarchique montrant le chemin dans l'arbre
   ========================================================================== */

.fil-ariane {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  padding: var(--espace-sm) 0;
  font-size: var(--taille-texte-sm);
}

/* Element du fil d'Ariane */
.fil-ariane__element {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  color: var(--couleur-texte-secondaire);
}

/* Lien cliquable dans le fil d'Ariane */
.fil-ariane__lien {
  color: var(--couleur-secondaire);
  text-decoration: none;
  padding: 2px var(--espace-xs);
  border-radius: var(--rayon-sm);
  transition: background-color var(--transition-rapide),
    color var(--transition-rapide);
}

.fil-ariane__lien:hover {
  background-color: var(--couleur-fond-secondaire);
  color: var(--couleur-primaire);
  text-decoration: none;
}

/* Separateur entre les elements (chevron) */
.fil-ariane__separateur {
  color: var(--couleur-texte-desactive);
  font-size: var(--taille-texte-xs);
  user-select: none;
  margin: 0 2px;
}

/* Element actuel (dernier, non cliquable) */
.fil-ariane__actuel {
  color: var(--couleur-texte);
  font-weight: var(--graisse-medium);
}

/* Icone d'accueil au debut du fil */
.fil-ariane__accueil {
  width: 16px;
  height: 16px;
  color: var(--couleur-texte-desactive);
}


/* ==========================================================================
   6. INDICATEUR DE CHARGEMENT (Spinner)
   Animation d'attente pendant le chargement des donnees
   ========================================================================== */

/* Conteneur de chargement (centre dans la zone parente) */
.chargement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-md);
  padding: var(--espace-2xl);
}

/* Spinner rotatif */
.chargement__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--couleur-bordure-legere);
  border-top-color: var(--couleur-primaire);
  border-radius: var(--rayon-complet);
  animation: rotation-spinner 0.8s linear infinite;
}

@keyframes rotation-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Variante petite */
.chargement__spinner--petit {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

/* Variante grande */
.chargement__spinner--grand {
  width: 56px;
  height: 56px;
  border-width: 4px;
}

/* Variante en ligne (a cote du texte) */
.chargement--en-ligne {
  display: inline-flex;
  flex-direction: row;
  padding: 0;
  gap: var(--espace-sm);
}

/* Texte de chargement */
.chargement__texte {
  font-size: var(--taille-texte-sm);
  color: var(--couleur-texte-secondaire);
}

/* Spinner a l'interieur d'un bouton */
.bouton .chargement__spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--couleur-texte-inverse);
}

/* Superposition de chargement (couvre la zone parente) */
.chargement-superposition {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(248, 249, 250, 0.8);
  border-radius: inherit;
  z-index: 5;
  backdrop-filter: blur(2px);
}

/* Barre de progression lineaire */
.barre-progression {
  width: 100%;
  height: 4px;
  background-color: var(--couleur-fond-secondaire);
  border-radius: var(--rayon-complet);
  overflow: hidden;
}

.barre-progression__remplissage {
  height: 100%;
  background-color: var(--couleur-accent);
  border-radius: var(--rayon-complet);
  transition: width 300ms ease;
}

/* Barre de progression indeterminee */
.barre-progression--indeterminee .barre-progression__remplissage {
  width: 40%;
  animation: progression-indeterminee 1.5s ease infinite;
}

@keyframes progression-indeterminee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}


/* ==========================================================================
   7. ETAT VIDE
   Affichage quand aucune donnee n'est disponible
   ========================================================================== */

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--espace-3xl) var(--espace-xl);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}

/* Illustration / icone de l'etat vide */
.etat-vide__illustration {
  width: 120px;
  height: 120px;
  margin-bottom: var(--espace-lg);
  opacity: 0.5;
  color: var(--couleur-texte-desactive);
}

/* Icone SVG dans l'illustration */
.etat-vide__illustration svg {
  width: 100%;
  height: 100%;
}

/* Titre de l'etat vide */
.etat-vide__titre {
  font-size: var(--taille-texte-lg);
  font-weight: var(--graisse-semi-gras);
  color: var(--couleur-texte);
  margin-bottom: var(--espace-sm);
}

/* Description de l'etat vide */
.etat-vide__description {
  font-size: var(--taille-texte-sm);
  color: var(--couleur-texte-secondaire);
  line-height: var(--hauteur-ligne);
  margin-bottom: var(--espace-lg);
}

/* Action suggeree (bouton) */
.etat-vide__action {
  margin-top: var(--espace-sm);
}

/* Variante compacte (pour les panneaux lateraux) */
.etat-vide--compact {
  padding: var(--espace-xl) var(--espace-md);
}

.etat-vide--compact .etat-vide__illustration {
  width: 80px;
  height: 80px;
}

.etat-vide--compact .etat-vide__titre {
  font-size: var(--taille-texte-base);
}


/* ==========================================================================
   8. INDICATEURS DE STATUT
   Points et badges pour montrer l'etat d'un element
   ========================================================================== */

/* Point de statut (pastille coloree) */
.statut {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-size: var(--taille-texte-sm);
  font-weight: var(--graisse-moyenne);
}

/* Pastille de couleur du statut */
.statut__point {
  width: 8px;
  height: 8px;
  border-radius: var(--rayon-complet);
  flex-shrink: 0;
}

/* Statut actif (en ligne, valide) */
.statut--actif .statut__point {
  background-color: var(--couleur-succes);
  box-shadow: 0 0 0 2px rgba(45, 138, 62, 0.2);
}

.statut--actif {
  color: var(--couleur-succes);
}

/* Statut inactif (hors ligne, desactive) */
.statut--inactif .statut__point {
  background-color: var(--couleur-texte-desactive);
}

.statut--inactif {
  color: var(--couleur-texte-desactive);
}

/* Statut en attente (en cours de traitement) */
.statut--en-attente .statut__point {
  background-color: var(--couleur-avertissement);
  animation: clignotement-statut 1.5s ease-in-out infinite;
}

.statut--en-attente {
  color: var(--couleur-avertissement);
}

@keyframes clignotement-statut {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Statut erreur */
.statut--erreur .statut__point {
  background-color: var(--couleur-erreur);
}

.statut--erreur {
  color: var(--couleur-erreur);
}

/* Statut info */
.statut--info .statut__point {
  background-color: var(--couleur-info);
}

.statut--info {
  color: var(--couleur-info);
}

/* Indicateur de presence (avatar avec point) */
.presence {
  position: relative;
  display: inline-block;
}

.presence__point {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--rayon-complet);
  border: 2px solid var(--couleur-fond-carte);
}

.presence__point--en-ligne {
  background-color: var(--couleur-succes);
}

.presence__point--absent {
  background-color: var(--couleur-avertissement);
}

.presence__point--hors-ligne {
  background-color: var(--couleur-texte-desactive);
}

/* Niveau de progression (jauge) */
.niveau {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  font-size: var(--taille-texte-xs);
  color: var(--couleur-texte-secondaire);
}

.niveau__barre {
  flex: 1;
  height: 6px;
  background-color: var(--couleur-fond-secondaire);
  border-radius: var(--rayon-complet);
  overflow: hidden;
}

.niveau__remplissage {
  height: 100%;
  border-radius: var(--rayon-complet);
  background: linear-gradient(
    90deg,
    var(--couleur-primaire),
    var(--couleur-accent)
  );
  transition: width 500ms ease;
}

.niveau__texte {
  min-width: 36px;
  text-align: right;
  font-weight: var(--graisse-semi-gras);
}


/* ==========================================================================
   9. BLASON (Liste des brevets acquis)
   Liste ordonnee des brevets obtenus par une personne
   Represente le "blason" dans la theorie des arbres de connaissances
   ========================================================================== */

.blason {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* En-tete du blason (nom de la personne + statistiques) */
.blason__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-md) var(--espace-lg);
  background: linear-gradient(
    135deg,
    var(--couleur-primaire),
    var(--couleur-secondaire)
  );
  color: var(--couleur-texte-inverse);
  border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
}

.blason__nom {
  font-size: var(--taille-texte-lg);
  font-weight: var(--graisse-gras);
}

.blason__compteur {
  font-size: var(--taille-texte-sm);
  opacity: 0.85;
}

/* Liste ordonnee des brevets acquis */
.blason__liste {
  list-style: none;
  counter-reset: brevet;
  border: 1px solid var(--couleur-bordure-legere);
  border-top: none;
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
  background-color: var(--couleur-fond-carte);
  overflow: hidden;
}

/* Element individuel de brevet */
.blason__brevet {
  display: flex;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-sm) var(--espace-md);
  border-bottom: 1px solid var(--couleur-bordure-legere);
  counter-increment: brevet;
  transition: background-color var(--transition-rapide);
}

.blason__brevet:last-child {
  border-bottom: none;
}

.blason__brevet:hover {
  background-color: var(--couleur-fond-secondaire);
}

/* Numero d'ordre du brevet (auto-incremente) */
.blason__brevet::before {
  content: counter(brevet);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  font-size: var(--taille-texte-xs);
  font-weight: var(--graisse-gras);
  color: var(--couleur-texte-inverse);
  background-color: var(--couleur-accent);
  border-radius: var(--rayon-complet);
  flex-shrink: 0;
}

/* Premier brevet (special, couleur plus foncee) */
.blason__brevet:first-child::before {
  background-color: var(--couleur-primaire);
}

/* Trois premiers brevets (mis en valeur) */
.blason__brevet:nth-child(-n + 3)::before {
  background-color: var(--couleur-secondaire);
}

/* Informations du brevet */
.blason__brevet-info {
  flex: 1;
  min-width: 0;
}

.blason__brevet-titre {
  font-size: var(--taille-texte-sm);
  font-weight: var(--graisse-medium);
  color: var(--couleur-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blason__brevet-branche {
  font-size: var(--taille-texte-xs);
  color: var(--couleur-texte-desactive);
}

/* Date d'acquisition */
.blason__brevet-date {
  font-size: var(--taille-texte-xs);
  color: var(--couleur-texte-desactive);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Etat du brevet dans le blason */
.blason__brevet--recent {
  background-color: var(--couleur-succes-fond);
}

.blason__brevet--recent::before {
  background-color: var(--couleur-succes);
}

/* Resume en bas du blason */
.blason__resume {
  display: flex;
  justify-content: space-around;
  padding: var(--espace-md);
  background-color: var(--couleur-fond-secondaire);
  border: 1px solid var(--couleur-bordure-legere);
  border-top: none;
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
}

.blason__resume-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-xs);
}

.blason__resume-valeur {
  font-size: var(--taille-texte-2xl);
  font-weight: var(--graisse-gras);
  color: var(--couleur-primaire);
}

.blason__resume-label {
  font-size: var(--taille-texte-xs);
  color: var(--couleur-texte-secondaire);
}

/* Blason vide (aucun brevet) */
.blason__vide {
  padding: var(--espace-2xl);
  text-align: center;
  color: var(--couleur-texte-desactive);
  font-size: var(--taille-texte-sm);
  border: 1px solid var(--couleur-bordure-legere);
  border-top: none;
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
  background-color: var(--couleur-fond-carte);
}


/* ==========================================================================
   ADAPTATIONS RESPONSIVES DES COMPOSANTS
   ========================================================================== */

/* Tablette */
@media (max-width: 1024px) {
  /* Pagination simplifiee */
  .pagination__info,
  .pagination__par-page {
    display: none;
  }

  /* Tableau : empiler les cellules en cartes sur tablette etroite */
  .tableau--responsif thead {
    display: none;
  }

  .tableau--responsif tbody tr {
    display: block;
    padding: var(--espace-md);
    border-bottom: 1px solid var(--couleur-bordure);
    margin-bottom: var(--espace-sm);
    border-radius: var(--rayon-md);
  }

  .tableau--responsif td {
    display: flex;
    justify-content: space-between;
    padding: var(--espace-xs) 0;
    border-bottom: none;
  }

  .tableau--responsif td::before {
    content: attr(data-label);
    font-weight: var(--graisse-semi-gras);
    font-size: var(--taille-texte-xs);
    text-transform: uppercase;
    color: var(--couleur-texte-secondaire);
    margin-right: var(--espace-md);
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Recherche pleine largeur */
  .recherche {
    max-width: unset;
  }

  .recherche-avec-filtres {
    flex-direction: column;
  }

  /* Blason compact sur mobile */
  .blason__entete {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace-xs);
  }

  .blason__resume {
    flex-wrap: wrap;
    gap: var(--espace-sm);
  }

  .blason__brevet {
    padding: var(--espace-sm);
  }

  /* Fil d'Ariane tronque sur mobile */
  .fil-ariane {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fil-ariane::-webkit-scrollbar {
    display: none;
  }
}

/* ─── Prérequis (fiche brevet) ────────────────────────────────────────── */

.prereq-list {
  list-style: none;
  margin: 0 0 var(--espace-sm);
  padding: 0;
}

.prereq-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.prereq-list li::before {
  content: "↳";
  color: #4a7c3a;
}

.prereq-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: var(--espace-sm);
}

.prereq-add select {
  max-width: 320px;
}

/* ─── Tableau « qui est prêt pour quoi » (suivi enseignant) ───────────── */

.readiness-section {
  margin-bottom: var(--espace-lg);
  padding: var(--espace-md);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.readiness-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
  margin-bottom: 4px;
}

.readiness-header h3 {
  margin: 0;
}

.ready-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  background: #f0f7ec;
  border: 1px solid #cfe3c4;
  border-radius: 999px;
  font-size: 0.82rem;
  text-decoration: none;
  color: #2b4a20;
}

.ready-chip:hover {
  background: #e2efdb;
}

.ready-chip-pct {
  font-weight: 700;
  color: #4a7c3a;
}