/* Page « Recettes » — cartes de données, aux couleurs du site.
   app.css donne aux sections une typographie d'article (paragraphes à 22px) :
   une liste de 800 recettes demande l'inverse, d'où les remises à l'échelle. */

.donnees-intro {
    h1, h2 {
        font-size: clamp(28px, 6vw, 42px);
    }

    .chiffres {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 25px;

        /* Les tuiles sont des <li> : c'est eux, pas le lien, que la grille place. */
        li {
            display: flex;
        }

        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 120px;
            padding: 12px 20px;
            border: 2px solid var(--sombre);
            border-radius: 8px;
            text-decoration: none;
            color: var(--sombre);
            transition: background-color .2s, color .2s;

            b {
                font-size: 28px;
                line-height: 1.1;
            }

            span {
                font-size: 14px;
                text-transform: uppercase;
                letter-spacing: .08em;
            }

            &:hover {
                background-color: var(--sombre);
                color: var(--clair);
            }
        }
    }

}

.donnees {
    .barre {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding: 12px 0;
        background-color: var(--sombre);
    }

    .onglets {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        button {
            font: inherit;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border: 2px solid var(--clair);
            border-radius: 8px;
            background: none;
            color: var(--clair);
            cursor: pointer;

            span {
                font-weight: normal;
                font-size: 13px;
                opacity: .7;
            }

            &:hover {
                background-color: rgba(233, 219, 203, .15);
            }

            &[aria-selected="true"] {
                background-color: var(--clair);
                color: var(--sombre);
            }
        }
    }

    .recherche {
        display: flex;
        align-items: center;
        gap: 10px;

        input {
            font: inherit;
            font-size: 16px;
            padding: 9px 14px;
            min-width: min(320px, 60vw);
            border: 2px solid var(--clair);
            border-radius: 8px;
            background-color: var(--clair);
            color: var(--sombre);
        }

        .compteur {
            font-size: 14px;
            opacity: .75;
            white-space: nowrap;
        }
    }


    .rien {
        font-size: 18px;
        margin: 30px 0 0;
        text-align: center;
        opacity: .7;
    }

    .cartes {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 16px;
    }
}

.carte {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-radius: 8px;
    background-color: var(--clair);
    color: var(--sombre);

    .tete {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .titre {
        flex: 1;
        min-width: 0;
    }

    h3 {
        font-size: 18px;
        line-height: 1.25;
        overflow-wrap: anywhere;

        .palier {
            font-size: 12px;
            font-weight: bold;
            vertical-align: middle;
            margin-left: 6px;
            padding: 1px 6px;
            border-radius: 4px;
            background-color: var(--sombre);
            color: var(--clair);
        }
    }

    .ident {
        font-family: ui-monospace, Consolas, monospace;
        font-size: 11px;
        line-height: 1.3;
        margin: 2px 0 0;
        opacity: .55;
        overflow-wrap: anywhere;
    }

    .lot {
        flex: none;
        font-weight: bold;
        font-size: 15px;
        padding: 3px 8px;
        border-radius: 6px;
        background-color: var(--sombre);
        color: var(--clair);
    }

    .note {
        font-size: 13px;
        line-height: 1.45;
        margin: 0;
        opacity: .7;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .couts {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 5px;

        li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .quoi {
            flex: 1;
            overflow-wrap: anywhere;
        }

        .combien {
            font-weight: bold;
            white-space: nowrap;
        }
    }

    .pied {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        align-items: baseline;
        margin-top: auto;
        padding-top: 9px;
        border-top: 1px solid rgba(27, 21, 22, .2);
        font-size: 13px;

        .lieu {
            margin-left: auto;
            text-align: right;
            opacity: .75;
        }
    }

    .ico {
        flex: none;
        object-fit: contain;
        image-rendering: auto;
    }

    .ico.creuse {
        display: inline-block;
        width: var(--d);
        height: var(--d);
        border: 1px dashed rgba(27, 21, 22, .4);
        border-radius: 4px;
    }
}

/* Tableaux de la page « Équipements ».

   Ces chiffres-là ne se lisent pas un par un, ils se comparent : d'où des
   colonnes plutôt que des cartes, des nombres alignés à droite en chasse fixe,
   et un en-tête qui trie d'un clic. Le tableau défile horizontalement dans son
   cadre plutôt que d'imposer une barre de défilement à toute la page. */
.donnees .defile {
    overflow-x: auto;
    border-radius: 8px;
    background-color: var(--clair);
    color: var(--sombre);
}

.donnees table.grille {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;

    th,
    td {
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid rgba(27, 21, 22, .14);
    }

    .num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    thead th {
        padding: 0;
        vertical-align: bottom;
        border-bottom: 2px solid var(--sombre);

        button {
            font: inherit;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: .04em;
            width: 100%;
            padding: 10px 12px;
            border: 0;
            background: none;
            color: inherit;
            text-align: inherit;
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        &.num button {
            text-align: right;
        }

        /* La flèche dit dans quel sens on a trié — et tient sa place même quand
           la colonne ne l'est pas, pour que rien ne saute au clic. */
        button::after {
            content: ' ↕';
            opacity: .25;
        }

        &[aria-sort="ascending"] button::after {
            content: ' ↑';
            opacity: 1;
        }

        &[aria-sort="descending"] button::after {
            content: ' ↓';
            opacity: 1;
        }
    }

    tbody th {
        font-weight: normal;
        /* La colonne des noms porte deux lignes — le nom et l'identifiant — et
           n'a pas à se replier tant que le tableau peut défiler. */
        min-width: 190px;
    }

    tbody tr:hover {
        background-color: rgba(27, 21, 22, .05);
    }

    tbody tr:last-child th,
    tbody tr:last-child td {
        border-bottom: 0;
    }

    .nul {
        opacity: .28;
    }
}

.sujet {
    display: flex;
    align-items: center;
    gap: 9px;

    .titre {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .nom {
        font-weight: bold;
        white-space: nowrap;
    }

    .ident {
        font-family: ui-monospace, Consolas, monospace;
        font-size: 11px;
        opacity: .5;
    }

    .palier {
        font-size: 11px;
        font-weight: bold;
        margin-left: 6px;
        padding: 1px 5px;
        border-radius: 4px;
        background-color: var(--sombre);
        color: var(--clair);
    }
}

/* Visionneuse de la page « Carte ».

   Les fonds sont tous dans le document et se remplacent l'un l'autre ; c'est le
   fond visible qui règle la taille de la pile, et le calque s'y ajuste en
   absolu — seul moyen de les garder alignés sans figer de dimensions dans le
   script. Tout est porté sous .donnees : app.css donne aux <p> de section une
   taille d'article qui écraserait le cartouche. */
.donnees {
    .visionneuse {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Le cadre est une fenêtre : la pile s'y déplace et s'y agrandit, rien n'en
       sort. Son rapport est celui de la carte, pour qu'à l'échelle 1 elle le
       remplisse exactement — c'est ce qui rend le bornage trivial. */
    .cadre {
        position: relative;
        overflow: hidden;
        /* Le cadre garde le rapport de la carte quoi qu'il arrive : c'est la
           largeur qu'on plafonne, pas la hauteur. Plafonner la hauteur
           l'écraserait, et la pile étant tendue sur ses bords, la carte
           sortirait déformée. */
        width: 100%;
        max-width: calc(82vh * var(--ratio, 1));
        aspect-ratio: var(--ratio, 1);
        margin-inline: auto;
        border-radius: 8px;
        background-color: rgba(233, 219, 203, .08);
        touch-action: none;
        cursor: grab;
        /* Sans ça, tirer la carte sélectionne le texte autour au lieu de la
           déplacer, et le curseur reste en « je sélectionne ». */
        user-select: none;
        -webkit-user-select: none;

        &.tire {
            cursor: grabbing;
        }
    }

    .pile {
        position: absolute;
        inset: 0;
        transform-origin: 0 0;
        will-change: transform;

        img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            /* Une image est glissable par défaut : le navigateur emportait le
               carreau au lieu de laisser la carte se déplacer. */
            -webkit-user-drag: none;
        }
    }

    /* La pyramide : un calque par niveau, empilés par z-index, et dans chacun
       des carreaux placés en pourcentage — ce qui les rend indépendants de la
       taille réelle d'affichage. Le léger débord évite le liseré d'un pixel que
       l'arrondi laisse entre deux carreaux voisins. */
    .tuiles {
        position: absolute;
        inset: 0;

        .niveau {
            position: absolute;
            inset: 0;
        }

        img {
            position: absolute;
            display: block;
            outline: 1px solid transparent;
            transform: scale(1.002);
        }
    }

    .zoom {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: stretch;
        gap: 4px;
        padding: 4px;
        border-radius: 8px;
        background-color: rgba(27, 21, 22, .78);
        cursor: default;

        button {
            font: inherit;
            font-size: 15px;
            font-weight: bold;
            min-width: 30px;
            padding: 3px 9px;
            border: 1px solid rgba(233, 219, 203, .4);
            border-radius: 5px;
            background: none;
            color: var(--clair);
            cursor: pointer;

            &:hover {
                background-color: rgba(233, 219, 203, .18);
            }
        }

        output {
            display: flex;
            align-items: center;
            min-width: 52px;
            justify-content: center;
            font-size: 13px;
            font-variant-numeric: tabular-nums;
            opacity: .8;
        }
    }

    .rangs {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .choix {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;

        &.calques {
            padding-top: 10px;
            border-top: 1px solid rgba(233, 219, 203, .2);
        }

        .etiquette {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .08em;
            opacity: .6;
        }

        button {
            font: inherit;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: 15rem;
            padding: 4px 10px 4px 4px;
            border: 2px solid rgba(233, 219, 203, .35);
            border-radius: 8px;
            background: none;
            color: var(--clair);
            text-align: left;
            cursor: pointer;

            img {
                flex: none;
                width: 38px;
                height: 38px;
                object-fit: cover;
                border-radius: 4px;
                background-color: rgba(0, 0, 0, .3);
            }

            /* Un calque n'a pas de vignette : elle serait transparente à
               quatre-vingt-dix-neuf pour cent. Sa pastille porte l'encre qu'on
               cherche sur la carte, et c'est ça, la légende. */
            .pastille {
                flex: none;
                width: 14px;
                height: 14px;
                margin-left: 6px;
                border-radius: 50%;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
            }

            span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            &:hover:not(:disabled) {
                border-color: var(--clair);
            }

            &[aria-pressed="true"] {
                background-color: var(--clair);
                border-color: var(--clair);
                color: var(--sombre);
            }

            /* Un calque n'a de sens que sur un fond de même cadrage ; ailleurs
               il reste proposé, mais éteint, plutôt que de disparaître. */
            &:disabled {
                opacity: .35;
                cursor: not-allowed;
            }
        }
    }

    .cartouche {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        align-items: baseline;
        margin: 0;
        padding-top: 10px;
        border-top: 1px solid rgba(233, 219, 203, .2);
        font-size: 14px;
        line-height: 1.5;

        b {
            font-size: 16px;
        }

        span {
            opacity: .75;
        }

        .mono {
            margin-left: auto;
            font-family: ui-monospace, Consolas, monospace;
            font-size: 12px;
            white-space: nowrap;
        }
    }

    .titre-legende {
        font-size: 20px;
        margin: 34px 0 14px;
    }

    .marqueurs {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 10px 18px;

        li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }

        img {
            flex: none;
            width: 28px;
            height: 28px;
            object-fit: contain;
        }
    }
}

[hidden] {
    display: none !important;
}

/* Sur téléphone, la barre collante ne doit pas manger l'écran : les onglets
   passent en grille de deux, et le champ prend la largeur restante. */
@media (max-width: 768px) {
    /* Deux tuiles par ligne ne tiennent pas : « TRANSFORMATION » est plus large
       que la moitié d'un écran de téléphone. On les couche plutôt à plat, le
       nombre puis l'intitulé, ce qui divise par deux la hauteur du bloc. */
    .donnees-intro .chiffres {
        gap: 8px;

        li {
            flex: 1 1 100%;
        }

        a {
            flex-direction: row;
            justify-content: flex-start;
            gap: 12px;
            width: 100%;
            min-width: 0;
            padding: 8px 14px;

            b {
                font-size: 22px;
            }
        }
    }

    .donnees .barre {
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 0;
    }

    /* Cinq onglets en grille feraient trois rangées, soit un quart de l'écran
       occupé en permanence par une barre collante. Ils tiennent donc sur une
       seule ligne qui défile ; le dernier onglet coupé par le bord dit de
       lui-même qu'il y a la suite. */
    .donnees .onglets {
        flex-wrap: nowrap;
        width: 100%;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        button {
            flex: none;
            font-size: 14px;
            padding: 7px 12px;
        }
    }

    .donnees .recherche {
        width: 100%;
    }

    .donnees .recherche input {
        min-width: 0;
        width: 100%;
    }
}