/* Phase 09 : cadre parchemin 262x258 en neuf tranches, coins bois non deformes. */
.naw-qnav-zone-a[hidden] { display: none !important; }
.zone-left-inner-ressources > .naw-qnav-zone-a,
.zone-left-inner-ressources-bottom > .naw-qnav-zone-a {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: calc(100% + 8px);
    left: 0;
    width: 268px;
    max-width: calc(100vw - 12px - env(safe-area-inset-left, 0px));
    min-height: 126px;
    padding: 3px 0 5px;
    border: 24px solid transparent;
    border-image-source: url('../images/NAWimagesImportante/Cadre_Grand-2.png?3');
    border-image-slice: 24 22 24 22 fill;
    border-image-width: 24px 22px 24px 22px;
    border-image-repeat: stretch;
    border-radius: 0;
    box-shadow: none;
    color: #49371e;
    font-size: 12px;
}
.naw-qnav-zone-a, .naw-qnav-zone-a * { box-sizing: border-box; }
.naw-qnav-zone-a__heading {
    margin: 0 0 7px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    color: #554029;
}
.naw-qnav-zone-a__favorites {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}
.naw-qnav-zone-a__favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    text-decoration: none;
    transition: background-color .12s ease;
}
.naw-qnav-zone-a__favorite:hover,
.naw-qnav-zone-a__favorite:focus-visible {
    background: #d6e4bd;
    outline: 2px solid #537245;
    outline-offset: 1px;
}
.naw-qnav-zone-a__favorite:active,
.naw-qnav-zone-a__favorite:focus-visible {
    border-color: #bea57c;
}
.naw-qnav-zone-a__favorite img {
    width: 22px;
    height: 22px;
    max-width: 100%;
    object-fit: contain;
}
.zone-left-inner-ressources-bottom > .naw-qnav-zone-a { width: 244px; }
@media (max-width: 991px) {
    .zone-left-inner-ressources > .naw-qnav-zone-a,
    .zone-left-inner-ressources-bottom > .naw-qnav-zone-a {
        /* Le cadre grandit selon les blocs visibles. Pour les petits écrans,
           le plafond dépend de la place réellement exploitable et le contenu
           reste consultable via son propre défilement (au lieu de sortir du cadre). */
        max-height: max(80px, calc(100vh - 340px - env(safe-area-inset-bottom, 0px)));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    /* Position au-dessus avec menu bas, pour éviter de masquer la navigation ;
       le placement au choix sera raccordé en phase 14. */
    .zone-left-inner-ressources-bottom > .naw-qnav-zone-a {
        top: auto;
        bottom: calc(100% + 8px);
    }
}
@supports (height: 100dvh) {
    @media (max-width: 991px) {
        .zone-left-inner-ressources > .naw-qnav-zone-a,
        .zone-left-inner-ressources-bottom > .naw-qnav-zone-a {
            max-height: max(80px, calc(100dvh - 340px - env(safe-area-inset-bottom, 0px)));
        }
    }
}

/* Phase 07 : ordre vertical des blocs, sans élément vide dans la pile. */
.naw-qnav-zone-a__block:first-child,
.naw-qnav-zone-a__block:last-child {
    width: calc(100% - 26px);
    margin-left: auto;
    margin-right: auto;
}
.naw-qnav-zone-a__block + .naw-qnav-zone-a__block {
    border-top: 1px solid rgba(87, 63, 29, .25);
    margin-top: 1px;
    padding-top: 1px;
}
/* Chaque activité : première ligne icône + libellé, seconde ligne chrono + échéance. */
.naw-qnav-zone-a__block--activity { position: relative; }
.naw-qnav-zone-a__activity {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    grid-template-areas: "icon info" "dates dates";
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
    min-height: 38px;
    padding: 3px 3px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #49371e;
    text-decoration: none;
}
.naw-qnav-zone-a__activity:hover,
.naw-qnav-zone-a__activity:focus-visible {
    color: #314e26;
    text-decoration: none;
    background: #d6e4bd;
    outline: 2px solid #537245;
    outline-offset: 1px;
}
.naw-qnav-zone-a__activity:active,
.naw-qnav-zone-a__activity:focus-visible {
    border-color: rgba(115, 84, 48, .36);
}
.naw-qnav-zone-a__activity-icon {
    grid-area: icon;
    display: block; width: 22px; height: 22px;
    object-fit: contain;
}
.naw-qnav-zone-a__activity-info {
    grid-area: info;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1px 4px;
    container-type: inline-size;
    overflow-wrap: anywhere;
}
.naw-qnav-zone-a__activity-name {
    display: block; font-size: 12px; font-weight: 700;
    line-height: 1.2; min-width: 0;
}
.naw-qnav-zone-a__activity-detail {
    display: block; font-size: 12px; line-height: 1.1;
    color: #6a553a;
}
.naw-qnav-zone-a__activity-detail--spawn {
    font-size: 12px; font-weight: 700; line-height: 1.2;
    overflow-wrap: anywhere; white-space: normal;
}
/* Le libellé reste complet si possible, sinon l'acronyme réel de l'unité.
   Le compteur et le temps ne se chevauchent pas, même pour 70+ jours. */
@container (max-width: 96px) {
    .naw-qnav-zone-a__activity-detail--spawn[data-naw-qnav-spawn-short] {
        font-size: 0;
    }
    .naw-qnav-zone-a__activity-detail--spawn[data-naw-qnav-spawn-short]::after {
        content: attr(data-naw-qnav-spawn-short);
        font-size: 12px;
        line-height: 1.2;
    }
}
.naw-qnav-zone-a__activity-dates {
    grid-area: dates;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    column-gap: 5px;
    width: 100%;
    min-width: 0;
    padding-left: 2px;
    font-variant-numeric: tabular-nums;
}
.naw-qnav-zone-a__activity-timer {
    display: block;
    min-width: 0;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}
.naw-qnav-zone-a__activity-end {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    color: #6a553a;
    text-align: right;
    white-space: nowrap;
}
.naw-qnav-zone-a__activity.is-idle {
    grid-template-areas: "icon info";
    opacity: .78;
}
.naw-qnav-zone-a__queue-tooltip:not([hidden]) {
    position: absolute; z-index: 15;
    display: flex; flex-direction: column; gap: 3px;
    left: 0; top: calc(100% + 3px);
    width: max-content;
    min-width: 0;
    max-width: min(310px, calc(100vw - 25px));
    max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid #92754b; border-radius: 5px;
    padding: 6px 8px;
    color: #49371e; background: #f6e6c9;
    box-shadow: 0 4px 12px rgba(46, 31, 16, .24);
    font-size: 12px; line-height: 1.35;
}
/* Hors du contexte d'empilement Ressources, devant les autres panneaux. */
.naw-qnav-zone-a__queue-tooltip--floating:not([hidden]) {
    position: fixed;
    z-index: 30000;
    pointer-events: none;
    max-height: min(260px, calc(100dvh - 16px));
}
.naw-qnav-zone-a__queue-tooltip[hidden] { display: none !important; }
.naw-qnav-zone-a__queue-line {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 5px; padding: 2px 0;
    border-bottom: 1px solid rgba(83, 60, 33, .15);
}
.naw-qnav-zone-a__queue-line span { overflow-wrap: anywhere; }
.naw-qnav-zone-a__queue-line small { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
@media (max-width: 991px) {
    /* En-dessous : le cadre Ressources est relevé de la hauteur de la zone A,
       sans toucher à l'ancrage iOS/Firefox ni au menu bas. */
    .zone-left-inner-ressources-bottom.naw-qnav-panel-below {
        transform: translateY(calc(0px - var(--naw-qnav-panel-height, 0px) - 8px));
    }
    .zone-left-inner-ressources-bottom.naw-qnav-panel-below > .naw-qnav-zone-a {
        top: calc(100% + 8px);
        bottom: auto;
    }
}

/* Recherche centrée dans la largeur INTERNE du parchemin (bordure exclue).
   Même largeur si le bloc est premier, intermédiaire ou dernier. */
.naw-qnav-zone-a__block--search {
    box-sizing: border-box;
    position: relative;
    z-index: 6;
    width: calc(100% - 26px);
    max-width: calc(100% - 26px);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}
.naw-qnav-zone-a__search-form {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}
.naw-qnav-zone-a__search-label {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.naw-qnav-zone-a__search-form input {
    display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 32px;
    padding: 4px 8px; border: 1px solid #9e8151;
    border-radius: 4px; font: inherit; font-size: 12px;
    color: #49371e; background: rgba(255, 251, 238, .9);
}
.naw-qnav-zone-a__search-form input:focus-visible { outline: 2px solid #537245; outline-offset: 1px; }
.naw-qnav-zone-a__search-results:not([hidden]) {
    position: absolute; z-index: 12;
    left: 0; right: 0; top: calc(100% + 3px);
    box-sizing: border-box;
    width: 100%; max-width: 100%; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
    max-height: 225px; overflow-y: auto; overflow-x: hidden;
    padding: 4px; background: #f4e4c9;
    border: 1px solid #a88d65; border-radius: 5px;
    box-shadow: 0 5px 12px rgba(42, 32, 20, .24);
    font-size: 12px; overflow-wrap: anywhere;
}
.naw-qnav-zone-a__search-results[hidden] { display: none !important; }
.naw-qnav-zone-a__search-results a {
    display: block; padding: 6px; border-radius: 3px;
    color: #49371e; background: transparent; text-decoration: none;
}
.naw-qnav-zone-a__search-results a:hover,
.naw-qnav-zone-a__search-results a:focus-visible,
.naw-qnav-zone-a__search-results a.is-active {
    color: #314e26; background: #d6e4bd; text-decoration: underline;
}

/* Phase 16 : cibles tactiles, focus et mouvement réduit. */
@media (max-width: 991px) {
    .naw-qnav-zone-a__favorite { min-height: 38px; }
    .naw-qnav-zone-a__activity-timer { font-size: 11px; }
    .naw-qnav-zone-a__search-form input { min-height: 28px; height: 28px; }

    /* Sur panneau défilant, garder les suggestions dans le flux :
       elles restent accessibles et n'apparaissent jamais sous la bordure. */
    .naw-qnav-zone-a__search-results:not([hidden]) {
        position: static;
        margin-top: 3px;
    }
}
.naw-qnav-zone-a__search-results a:focus-visible {
    outline: 2px solid #537245;
    outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
    .naw-qnav-zone-a__favorite { transition: none; }
}

.naw-qnav-zone-a__queue-heading { display: block; color: #4a3420; font-size: 12px; margin-bottom: 2px; }
.naw-qnav-zone-a__queue-line { align-items: baseline; }
.naw-qnav-zone-a__queue-line span { overflow-wrap: normal; word-break: normal; }