/* Lot 9 — Shell « établi » (layout bi-colonne).
   Tout est préfixé .ae- et porté par .ae-etabli pour ne jamais toucher
   l'ancien layout : le flag ui_etabli désactivé restitue le rendu historique. */

.ae-etabli { font-size: 0.85rem; }

/* En-tête fin et persistant — bande anthracite pleine largeur. Le `<header>`
   est sorti du `.container` pour permettre l'effet bande ; un `.container`
   interne (`.ae-header-inner`) recentre le contenu. */
.ae-header {
    background: #f5f0e8;
    border-bottom: 2px solid #EE7733;
    box-shadow: 0 3px 10px rgba(238,119,51,0.18);
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.ae-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.65rem 1rem;
}
.ae-brand-lien {
    color: #1a1a2e;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.1;
}
.ae-brand-lien:hover, .ae-brand-lien:focus {
    color: #1a1a2e;
    text-decoration: none;
}
.ae-brand-accent { color: #EE7733; }
.ae-baseline {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.2;
    margin-left: 0.75rem;
    margin-right: auto;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

/* H1 spécifiques par page (la marque n'est plus H1, cf. plan
   d'homogénéisation) — discrets, ne perturbent pas la zone héro. */
.ae-accueil-h1 {
    text-align: center;
    font-size: 1.4rem;
    margin: 1rem 0 0.5rem;
    color: #333;
    font-weight: 300;
}
.ae-jeu-titre {
    text-align: center;
    font-size: 1.6rem;
    margin: 1rem 0;
    color: #222;
}

.ae-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}
.ae-nav-lien {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    color: #1a1a2e;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ae-nav-lien:hover,
.ae-nav-lien:focus { background: #EE7733; border-color: #EE7733; color: #fff; }
.ae-nav-accueil { padding: 0; justify-content: center; min-width: 32px; }

/* Burger mobile : masqué au-dessus de md, le menu reste affiché en ligne. */
.ae-burger {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: transparent;
    color: #1a1a2e;
    cursor: pointer;
}
.ae-burger:hover,
.ae-burger:focus { background: #EE7733; border-color: #EE7733; color: #fff; }
/* Thèmes : présents uniquement dans le menu burger (mobile). */
.ae-nav-themes { display: none; }

/* Sélecteur de langue : cibles tactiles >= 44x44 px. */
.ae-langues { display: flex; align-items: center; }
.ae-langues a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Structure bi-colonne ; le repli sous md est géré par la grille Bootstrap
   (col-md-8 / col-md-4 -> empilé, la colonne secondaire passe en bas). */
.ae-shell { margin-top: 0.5rem; }

/* Colonne secondaire : conteneur d'exploration, inerte au Lot 9. */
/* Panneau secondaire (colonne d'exploration / liens latéraux) — identifié
   par un fond gris très clair et un contour discret. */
.ae-aside {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.4rem;
    padding: 0.75rem 5px 0.75rem 0.75rem;
}

.ae-aside-cats { margin-bottom: 0.75rem; }
.ae-aside-branche {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    font-weight: 600;
    margin: 0.6rem 0 0.2rem;
    padding-left: 0.25rem;
}
.ae-aside-branche:first-child { margin-top: 0; }
.ae-aside-cat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 3px;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}
.ae-aside-cat:hover { opacity: 0.8; text-decoration: none; color: inherit; }
.ae-aside-cat svg { flex: 0 0 14px; width: 14px; height: 14px; }

/* Sections internes du panneau latéral (utilisé sur la page catégorie). */
.ae-categorie-side { margin-bottom: 1rem; }
.ae-categorie-side:last-child { margin-bottom: 0; }
.ae-categorie-side-titre {
    font-size: 0.85rem;
    color: #b4530f;
    margin: 0 0 0.4rem;
}
.ae-categorie-side-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ae-categorie-side-liste li { padding: 0.15rem 0; }
.ae-categorie-side-liste a {
    color: #1a6fd4;
    text-decoration: none;
}
.ae-categorie-side-liste a:hover,
.ae-categorie-side-liste a:focus { text-decoration: underline; }

/* Focus clavier visible : non préfixé pour couvrir aussi les pages encore
   sur l'ancien layout (thematique / jeu) — bénéfice accessibilité partout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1a6fd4;
    outline-offset: 2px;
}

/* Lot 10 — Sélecteur de vues Mots / Phrases dans l'en-tête des résultats. */
.ae-vues {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-top: 1rem;
    border-bottom: 1px solid #dee2e6;
}
.ae-vues-tabs { display: flex; gap: 0.25rem; }
.ae-vue-tab {
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    border-bottom: 3px solid transparent;
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
}
.ae-vue-tab-actif { color: #b4530f; border-bottom-color: #EE7733; }
.ae-vues-indice {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.95rem;
    color: #1a6fd4;
    text-decoration: none;
}
.ae-vues-indice:hover { text-decoration: underline; }
.ae-vue[hidden] { display: none; }

/* Lot 11 — Rendu refondu des combinaisons de phrases. */
.ae-phrases { font-size: 0.85rem; }
.ae-ph-groupe { margin-bottom: 0.75rem; }

/* Lot 14 — Axes vues / filtres / tri (jamais mélangés dans un ruban unique). */
.ae-axes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    /* Pas de border-bottom : `.ae-vues` au-dessus en a déjà une. Les contrôles
       s'écoulent vers les résultats sans double séparation. */
}
.ae-axes-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.ae-axes-grp {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.ae-axes-libelle { font-weight: 700; margin: 0; color: #555; min-width: 3.5rem; }
.ae-axes-select {
    min-height: 36px;
    padding: 0 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    background: #fff;
}
.ae-axes-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.ae-axes-chip {
    min-height: 36px;
    padding: 0 0.7rem;
    border: 1px solid #b4530f;
    border-radius: 999px;
    background: #fff3e8;
    color: #b4530f;
    font-size: 0.9rem;
    cursor: pointer;
}

.ae-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid #ced4da;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 0.75em;
    cursor: pointer;
    line-height: 1.6;
}
.ae-pill:hover { filter: brightness(0.93); }
/* Pills sans couleur inline (type + "Tous") : gris clair actif */
.ae-pill-active:not([style]) { background: #e8e8e8; border-color: #adb5bd; color: #333; }
.ae-pill-count { font-size: 0.9em; opacity: 0.75; }
#ae-pills-cat { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

/* Lot 13 — La balade (Surprenez-moi, fil, mot-sujet). */
.ae-nav-bouton {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.ae-fil { margin: 0.75rem 0 0.25rem; }
.ae-fil-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.ae-fil-liste li::after {
    content: " › ";
    color: #aaa;
    padding-left: 0.4rem;
}
.ae-fil-liste li:last-child::after { content: ""; }
.ae-fil-lien {
    display: inline-block;
    min-height: 32px;
    padding: 0.1rem 0.6rem;
    border: 1px solid #ced4da;
    border-radius: 999px;
    color: #1a6fd4;
    text-decoration: none;
}
.ae-fil-lien:hover, .ae-fil-lien:focus { background: #eaf3ff; text-decoration: none; }
.ae-fil-actuel {
    padding: 0.1rem 0.6rem;
    background: #fff3e8;
    border: 1px solid #EE7733;
    border-radius: 999px;
    color: #b4530f;
    font-weight: 700;
}
.ae-fil-reset {
    min-height: 32px;
    padding: 0 0.7rem;
    border: 0;
    background: transparent;
    color: #777;
    cursor: pointer;
    text-decoration: underline;
}

.ae-sujet { text-align: center; margin: 1.25rem 0 0.5rem; }
.ae-sujet-mot { font-size: 1.6rem; margin: 0; letter-spacing: 0.02em; }
.ae-sujet-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.4rem;
}
.ae-sujet-lettres { color: #777; font-size: 0.95rem; }

.ae-expl-mot { color: #b4530f; font-weight: 700; text-decoration: none; }
.ae-expl-mot:hover, .ae-expl-mot:focus { text-decoration: underline; }

/* Lot 12 — Panneau d'exploration (colonne secondaire). */
.ae-expl-toggle { display: none; }
.ae-expl-section { margin-bottom: 1.1rem; }
.ae-expl-titre { font-size: 1.05rem; color: #b4530f; margin: 0 0 0.5rem; }
.ae-expl-sous { font-size: 0.95rem; font-weight: 700; margin: 0.6rem 0 0.3rem; }
.ae-expl-liste { list-style: none; padding: 0; margin: 0; }
.ae-expl-liste li { padding: 0.15rem 0; }
.ae-expl-liste a,
.ae-expl-cousins a { min-height: 24px; display: inline-block; }
.ae-expl-attenue { color: #8a8f95; }
.ae-expl-voisin { color: inherit; text-decoration: none; }
.ae-expl-voisin:hover, .ae-expl-voisin:focus { color: #b4530f; text-decoration: underline; }
.ae-expl-compte { opacity: 0.85; }
.ae-expl-cousins, .ae-expl-amorce { margin: 0; }
.ae-aside .badge-theme { display: inline-block; margin: 0 0.15rem 0.35rem 0; }

/* Bloc « Thèmes présents » — liste avec icônes colorées. */
.ae-themes-liste { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.ae-themes-liste li { margin: 0 0 0.15rem; }

.ae-theme-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    color: #333;
    text-decoration: none;
    transition: background 0.15s;
}
.ae-theme-item:hover,
.ae-theme-item:focus {
    background: #f5f5f7;
    text-decoration: none;
    color: #333;
}

.ae-theme-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    flex: 0 0 28px;
}
.ae-theme-icone svg { width: 16px; height: 16px; }

.ae-theme-nom { flex: 1 1 auto; font-size: 0.95rem; }

.ae-theme-compte {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    background: #f0f0f3;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
}

.ae-themes-voir-tous {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #b4530f;
    text-decoration: underline;
}
.ae-themes-voir-tous:hover,
.ae-themes-voir-tous:focus { color: #8a3f0c; }

@media (max-width: 767.98px) {
    .ae-header-inner { justify-content: space-between; }
    .ae-brand-lien { font-size: 1.3rem; }
    .ae-burger { display: inline-flex; }

    /* Menu burger : masqué par défaut, déplié sous l'en-tête à l'ouverture. */
    .ae-nav {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.4rem;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        padding-top: 0.5rem;
        border-top: 1px solid #e9ecef;
    }
    .ae-menu-ouvert .ae-nav { display: flex; }
    .ae-nav-lien { width: 100%; min-height: 44px; }
    .ae-nav-themes { display: block; width: 100%; }
    .ae-langues { justify-content: center; margin-top: 0.25rem; }

    .ae-vues-indice { margin-left: 0; width: 100%; }
    .ae-expl-toggle {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-top: 1rem;
        border: 1px solid #EE7733;
        border-radius: 0.25rem;
        background: #fff3e8;
        color: #b4530f;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
    }
    .ae-expl-corps { display: none; }
    .ae-expl-ouvert .ae-expl-corps { display: block; padding-top: 0.75rem; }
}

@media (min-width: 1400px) {
    .container.ae-etabli,
    .container.ae-header-inner { max-width: calc(100% - 2rem); }
}