/* static/css/racines.css */
/* Main */
main{padding:0!important}

/* Boutons catégories */
.racines-categories{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
  max-width:1000px;
  margin:2rem auto;
  padding:0 1rem
}

/* Navigation alphabétique améliorée */
.alpha-nav{
  text-align:center;
  margin:2rem 0;
  padding:1rem;
}
.alpha-nav a,.alpha-nav span{
  display:inline-block;
  margin:0.25rem;
  padding:0.5rem 0.75rem;
  font-weight:600;
  color:#333;
  text-decoration:none;
  border-radius:6px;
  transition:all 0.3s ease;
  min-width:2.5rem;
  text-align:center
}
.alpha-nav a:hover{
  background:#a76107;
  color:white;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(167,97,7,0.3)
}
.alpha-nav a.active{
  background:#a76107;
  color:white;
  box-shadow:0 2px 8px rgba(167,97,7,0.4)
}
.alpha-nav span.disabled{
  color:#ccc;
  cursor:not-allowed
}

/* Container pour bouton retour + recherche */
.search-and-back-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

.back-to-racines {
  flex-shrink: 0;
}

.back-button-racines {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: #f8f9fa;
  color: #a76107;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.back-button-racines:hover {
  background: #a76107;
  color: white;
  border-color: #a76107;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(167, 97, 7, 0.3);
}

.back-button-racines:focus {
  outline: 2px solid #a76107;
  outline-offset: 2px;
}

/* Barre de recherche améliorée */
.search-bar {
  flex: 1;
  text-align: center;
  position: relative;
  margin-top: 1rem; /* ou margin-top: 10px; selon ton besoin */
}
.search-bar form{
  display:flex;
  align-items:center;
  max-width:500px;
  margin:0 auto;
  border:1px solid #ddd;
  border-radius:25px;
  overflow:hidden;
  background:#fff;
  transition:all 0.3s ease;
}
.search-bar form:focus-within{
  border-color:#a76107;
  box-shadow:0 2px 8px rgba(167,97,7,0.15);
}
.search-bar input{
  flex:1;
  padding:1rem 1.5rem;
  border:none;
  font-size:1.1rem;
  background:transparent;
  outline:none
}
.search-bar input::placeholder{
  color:#999;
  font-style:italic
}
.search-bar button{
  padding:1rem 1.5rem;
  border:none;
  background:#a76107;
  color:white;
  font-size:1.1rem;
  cursor:pointer;
  transition:background 0.3s ease;
}
.search-bar button:hover{
  background:#d4851b;
}

/* Liste des entrées avec layout amélioré */
.entries-list{
  max-width:1200px;
  margin:auto;
  padding:0 1rem
}

/* Styles spécifiques pour les métiers */
.metiers-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 2rem 0;
  padding: 0;
}

.metier-item {
  border-bottom: 1px solid #e0e0e0;
}

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

.metier-link {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
  gap: 1rem;
}

.metier-link:hover {
  background-color: #f8f9fa;
}

.metier-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #a76107;
  flex-shrink: 0;
  min-width: 200px;
}

.metier-description {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.4;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Titres de sections alphabétiques simplifiés */
.entries-list h2{
  margin:2rem 0 1rem 0;
  padding:0.5rem 0;
  color:#a76107;
  font-size:1.5rem;
  font-weight:600;
  text-align:left;
  border-bottom:1px solid #ddd;
  background:none;
}

/* Layout en grille pour les listes - plus compact */
.entries-list ul{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:0.5rem;
  list-style:none;
  padding:0;
  margin:0 0 2rem 0
}

/* Cartes d'entrées ultra-simplifiées */
.entries-list li{
  margin:0
}
.entries-list li a{
  display:block;
  padding:0.75rem 0.5rem;
  background:transparent;
  border:none;
  text-decoration:none;
  color:#333;
  transition:color 0.2s ease;
  font-weight:400;
  text-align:center;
  border-radius:4px;
}
.entries-list li a:hover{
  color:#a76107;
  background:#f8f9fa;
}

/* Effet de focus pour l'accessibilité */
.entries-list li a:focus{
  outline:2px solid #a76107;
  outline-offset:2px
}

/* Amélioration de l'espacement et de la typographie */
.entries-list li a{
  font-size:1rem;
  line-height:1.4;
  letter-spacing:0.01em
}

/* Bouton de retour à la liste */
.back-to-list {
  max-width: 900px;
  margin: 2rem auto 1rem auto;
  padding: 0 1rem;
}

.back-button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: #f8f9fa;
  color: #a76107;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.back-button:hover {
  background: #a76107;
  color: white;
  border-color: #a76107;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(167, 97, 7, 0.3);
}

.back-button:focus {
  outline: 2px solid #a76107;
  outline-offset: 2px;
}

/* Détail fiche */
.racines-detail{
  max-width:900px;
  margin:2rem auto;
  padding:2rem;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:12px;
  line-height:1.7;
  box-shadow:0 2px 8px rgba(0,0,0,0.1)
}

/* Réduction de la taille des titres dans les fiches */
.racines-detail h1 {
  font-size: 1.8rem;
  margin-bottom: 0.3rem;
  margin-top: 2.5rem;
}

.racines-detail h1:first-child {
  margin-top: 0;
}

.racines-detail p {
  margin-bottom: 0.8rem;
}

.racines-detail h2 {
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
  margin-top: 2.5rem;
}

.racines-detail h3 {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  margin-top: 2rem;
}
.variant-note{
  max-width:900px;
  margin:1rem auto;
  padding:1rem 1.5rem;
  background:linear-gradient(135deg,#fff3cd,#ffeaa7);
  border-left:5px solid #a76107;
  border-radius:8px;
  color:#856404;
  font-style:italic;
  box-shadow:0 4px 16px rgba(167,97,7,0.1)
}

/* Mode sombre avec le bon sélecteur */
:root.theme-dark .alpha-nav a,
:root.theme-dark .alpha-nav span{
  background: var(--bg-main);
  color: var(--text-alt);
  border-color: var(--arrow-bg);
}
:root.theme-dark .alpha-nav a:hover{
  background: #FFB061;
  color: #333;
}
:root.theme-dark .alpha-nav a.active{
  background: #FFB061;
  color: #333;
}
:root.theme-dark .alpha-nav span.disabled{
  color: var(--text-alt-muted);
  background: var(--bg-secondary);
}

:root.theme-dark .back-button-racines, 
:root.theme-dark .back-button {
  background: var(--bg-main);
  color: var(--text-alt);
  border-color: var(--arrow-bg);
}
:root.theme-dark .back-button-racines:hover, 
:root.theme-dark .back-button:hover {
  background: var(--btn-return-bg);
}

:root.theme-dark .search-bar form{
  background: var(--bg-main);
  border-color: var(--arrow-bg);
}
:root.theme-dark .search-bar form:focus-within{
  border-color: #FFB061;
  box-shadow: 0 0 3px rgba(255,176,97,.4);
}
:root.theme-dark .search-bar input{
  background: var(--bg-main);
  color: var(--text-alt);
}
:root.theme-dark .search-bar input::placeholder{
  color: var(--text-alt-muted);
}
:root.theme-dark .search-bar button{
  background: #FFB061;
  color: #333;
}

:root.theme-dark .entries-list h2{
  color: var(--text-alt);
  border-color: var(--arrow-bg);
}

:root.theme-dark .entries-list li a{
  color: var(--text-alt);
}
:root.theme-dark .entries-list li a:hover{
  color: #FFB061;
  background: var(--bg-main);
}

:root.theme-dark .metier-item {
  border-color: var(--arrow-bg);
}
:root.theme-dark .metier-link {
  color: var(--text-alt);
}
:root.theme-dark .metier-link:hover {
  background-color: var(--bg-main);
}
:root.theme-dark .metier-name {
  color: #FFB061;
}
:root.theme-dark .metier-description {
  color: var(--text-alt-muted);
}

:root.theme-dark .racines-detail{
  background: var(--bg-secondary);
  color: var(--text-alt);
  border-color: var(--arrow-bg);
}

:root.theme-dark .variant-note{
  background: var(--bg-main);
  color: var(--text-alt);
  border-left-color: #FFB061;
}

:root.theme-dark .results-header {
  background: var(--bg-main);
  border-color: var(--arrow-bg);
  color: var(--text-alt);
}
:root.theme-dark .results-header h2 {
  color: #FFB061;
}

:root.theme-dark .pagination button {
  background: var(--bg-main);
  color: var(--text-alt);
  border-color: var(--arrow-bg);
}
:root.theme-dark .pagination button:hover:not(:disabled) {
  background: var(--btn-return-bg);
}
:root.theme-dark .pagination button.active {
  background: #FFB061;
  color: #333;
}
:root.theme-dark .pagination .page-info {
  color: var(--text-alt-muted);
}

:root.theme-dark mark {
  background: var(--bg-main);
  color: #FFB061;
}

:root.theme-dark .no-results {
  color: var(--text-alt-muted);
}
:root.theme-dark .no-results h2 {
  color: #FFB061;
}

:root.theme-dark .intro-text {
  background: var(--bg-secondary);
  border-color: var(--arrow-bg);
  color: var(--text-alt);
}
:root.theme-dark .intro-text strong {
  color: #FFB061;
}
:root.theme-dark .intro-text a {
  color: #FFB061;
}

/* Styles pour la page de recherche */
.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
}

.no-results h2 {
  color: #a76107;
  margin-bottom: 1rem;
}

.results-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.results-header h2 {
  color: #a76107;
  margin: 0;
}

mark {
  background: #fff3cd;
  color: #856404;
  padding: 0.1em 0;
  border-radius: 2px;
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  gap: 0.5rem;
}

.pagination button {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.pagination button:hover:not(:disabled) {
  background: #a76107;
  color: #fff;
  border-color: #a76107;
}

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

.pagination button.active {
  background: #a76107;
  color: #fff;
  border-color: #a76107;
}

.pagination .page-info {
  margin: 0 1rem;
  font-size: 0.9rem;
  color: #666;
}

/* Responsive design amélioré */
@media (max-width:768px){
  .alpha-nav{
    padding:0.75rem;
    margin:1.5rem 0
  }
  .alpha-nav a,.alpha-nav span{
    padding:0.4rem 0.6rem;
    margin:0.15rem;
    font-size:0.9rem;
    min-width:2rem
  }
  .search-and-back-container {
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem auto;
    padding: 0 1rem;
  }
  .search-bar{
    margin: 0;
    padding: 0;
  }
  .back-button-racines {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  .search-bar input{
    padding:0.875rem 1.25rem;
    font-size:1rem
  }
  .search-bar button{
    padding:0.875rem 1.25rem;
    font-size:1rem
  }
  .entries-list ul{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:0.25rem
  }
  .entries-list li a{
    padding:0.5rem 0.25rem;
    font-size:0.85rem
  }
  .entries-list h2{
    font-size:1.5rem;
    margin:2rem 0 1rem 0
  }
  /* Styles responsive pour les métiers */
  .metier-link {
    padding: 0.8rem 0;
  }
  .metier-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
  .metier-description {
    font-size: 0.9rem;
  }
  .racines-detail{
    margin:1rem;
    padding:1.5rem
  }
  .back-to-list {
    margin: 1.5rem auto 1rem auto;
    padding: 0 1rem;
  }
  .back-button {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width:480px){
  .entries-list ul{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:0.25rem
  }
  .entries-list li a{
    padding:0.5rem 0.25rem;
    font-size:0.8rem
  }
  /* Styles responsive pour les métiers sur petits écrans */
  .metier-link {
    padding: 0.7rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .metier-name {
    font-size: 0.95rem;
    margin-bottom: 0;
    min-width: auto;
    width: 100%;
  }
  .metier-description {
    font-size: 0.85rem;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    width: 100%;
    line-height: 1.3;
  }
  .pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .pagination button {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
  .alpha-nav a,.alpha-nav span{
    padding:0.3rem 0.5rem;
    margin:0.1rem;
    font-size:0.85rem
  }
  .back-button-racines {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
  .racines-detail{
    padding:1rem
  }
  .back-to-list {
    margin: 1rem auto 0.5rem auto;
    padding: 0 0.5rem;
  }
  .back-button {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* Styles pour les descriptions introductives */
.intro-text {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  line-height: 1.6;
}

.intro-text p {
  margin-bottom: 1rem;
}

.intro-text p:last-child {
  margin-bottom: 0;
}

.intro-text strong {
  color: #a76107;
  font-weight: 600;
}

.intro-text a {
  color: #a76107;
  font-weight: 500;
  transition: color 0.2s ease;
}

.intro-text a:hover {
  color: #d4851b;
}


/* Améliorations d'accessibilité */
.alpha-nav a:focus, .search-bar button:focus, .back-button:focus, .back-button-racines:focus {
  outline: 2px solid #a76107;
  outline-offset: 3px;
}

.metier-link:focus {
  outline: 2px solid #a76107;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive pour intro-text */
@media (max-width: 768px) {
  .intro-text {
    margin: 1.5rem auto;
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 480px) {
  .intro-text {
    margin: 1rem;
    padding: 1rem;
    font-size: 0.95rem;
  }
}