/* =========================================================================
   Lexique du M&A
   Complète assets/css/style.css, dont il reprend variables et composants.
   ========================================================================= */

/* --- Barre collante : recherche + sommaire alphabétique ---------------- */
.lexique-barre {
    position: sticky;
    /* Sous l'en-tête du site, qui est lui-même collant. */
    top: var(--header-height);
    z-index: 20;
    padding-block: var(--space-sm);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.lexique-recherche {
    position: relative;
    max-width: 34rem;
    margin: 0 auto var(--space-sm);
}

.lexique-recherche .icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.lexique-recherche input {
    width: 100%;
    padding: .8rem 1rem .8rem 2.9rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border-fort);
    border-radius: var(--radius-pill);
    font-size: 1rem;
}

.lexique-recherche input:focus {
    border-color: var(--color-primary);
    outline: 3px solid rgba(20, 98, 240, .15);
}

.lexique-sommaire ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
}

.lexique-sommaire a {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lexique-sommaire a:hover,
.lexique-sommaire a:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.lexique-compteur {
    margin-top: var(--space-xs);
    text-align: center;
    font-size: .875rem;
    color: var(--color-text-muted);
}

/* --- Sections par lettre ------------------------------------------------ */
.lexique-lettre {
    max-width: 48rem;
    margin: 0 auto var(--space-lg);
    /* L'en-tête et la barre de recherche sont collants : sans cette marge,
       une ancre atterrirait sous eux. */
    scroll-margin-top: calc(var(--header-height) + 7rem);
}

.lexique-lettre__titre {
    margin-bottom: var(--space-md);
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--color-primary);
    font-size: 2rem;
    color: var(--color-primary);
    text-align: left;
}

/* --- Une entrée --------------------------------------------------------- */
.lexique-terme {
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: calc(var(--header-height) + 7rem);
}

.lexique-lettre .lexique-terme:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.lexique-terme h3 {
    margin-bottom: .5rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

.lexique-terme .definition {
    margin-bottom: var(--space-sm);
    font-size: 1.0625rem;
}

/* Encart « Ce que ça change pour vous » : fond crème, distinct du bleu du
   site, pour marquer qu'on passe de la définition au conseil. */
.pour-vous {
    padding: var(--space-sm) var(--space-md);
    background: #fffaf0;
    border-left: 3px solid #fbbf24;
    border-radius: var(--radius);
}

.pour-vous p { color: var(--color-text); font-size: .9375rem; }
.pour-vous strong { color: #5c3600; }

.lexique-vide {
    max-width: 48rem;
    margin: var(--space-lg) auto;
    padding: var(--space-md);
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-muted);
}

/* --- Lien de définition posé depuis les autres pages -------------------- */
.lien-lexique {
    text-decoration: none;
    border-bottom: 1px dotted var(--color-primary);
    color: inherit;
}

.lien-lexique:hover,
.lien-lexique:focus-visible {
    color: var(--color-primary);
    border-bottom-style: solid;
}

@media (max-width: 620px) {
    .lexique-barre { position: static; }
    .lexique-sommaire a { width: 1.9rem; height: 1.9rem; font-size: .875rem; }
    .lexique-terme, .lexique-lettre { scroll-margin-top: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}