/*
 * Adaptation pour telephones uniquement.
 * Les styles historiques pour tablette et ordinateur ne sont pas modifies.
 */
@media only screen and (max-width: 549px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-width: 0;
        font-size: 1em;
        line-height: 1.35;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .container_12 {
        width: 100%;
        margin: 0;
        padding: 0 10px;
    }

    /* La grille en colonnes devient une pile lisible sur petit ecran. */
    .container_12 [class*="grid_"] {
        display: block;
        float: none;
        left: auto;
        width: 100%;
        margin: 0 0 10px;
        padding-left: 0;
        padding-right: 0;
    }

    .fenetre {
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 10px;
        line-height: 1.25;
    }

    /* Navigation tactile : les sous-menus restent visibles. */
    #menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin: 0 0 12px;
        padding: 8px 0 0;
        list-style: none;
    }

    #menu > li {
        min-width: 0;
        list-style: none;
        border-radius: 8px;
        background: linear-gradient(#777, #555);
        text-align: center;
    }

    #menu a {
        display: block;
        padding: 11px 5px;
        color: #fff;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    #menu ul {
        position: static;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: visible;
        list-style: none;
        border-radius: 0 0 8px 8px;
        background: #eee;
    }

    #menu ul a {
        padding: 9px 4px;
        border-top: 1px solid #ccc;
        color: #222;
        font-size: 0.82em;
    }

    .bandeau {
        display: flex !important;
        gap: 10px;
        align-items: flex-start;
        width: 100% !important;
        padding: 8px;
        overflow-x: auto;
        text-align: center;
        -webkit-overflow-scrolling: touch;
    }

    .bandeau > [class*="grid_"] {
        flex: 0 0 66px;
        width: 66px !important;
        margin: 0;
    }

    .bandeau > .grid_5 {
        flex-basis: 180px;
        width: 180px !important;
        text-align: left;
    }

    .bandeau h2 {
        margin: 0;
        font-size: 1.15em;
    }

    a.libel_lien {
        font-size: 0.75em;
        overflow-wrap: anywhere;
    }

    /* Champs assez grands pour etre utilises au doigt. */
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button {
        max-width: 100%;
        min-height: 42px;
        font-size: 16px;
    }

    input[type="text"],
    input[type="login"],
    input[type="password"],
    input[type="number"],
    input[type="file"],
    select,
    textarea {
        width: 100%;
    }

    textarea {
        height: auto;
    }

    label,
    .droite {
        text-align: left;
    }

    .logo {
        min-width: 40px;
        min-height: 40px;
    }

    .logolong,
    .imageGateau,
    img {
        max-width: 100%;
        height: auto;
    }

    /* Les tableaux conservent toutes leurs colonnes et defilent horizontalement. */
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .liste_ingredient tbody,
    .liste_composant tbody,
    .liste_recette tbody {
        width: max-content;
        min-width: 100%;
        max-height: 60vh;
    }

    #principal {
        width: 100% !important;
        height: auto !important;
        max-height: 65vh;
        overflow: auto !important;
    }

    /* Accueil : une tuile par ligne, sans marges calculees pour le PC. */
    div#home[role="main"] ul#tiles-panel {
        width: 100%;
        margin: 12px 0;
        padding: 0;
    }

    div[role="main"]#home ul#tiles-panel li {
        width: 100%;
        margin: 0 0 8px;
    }

    .tile {
        min-height: 55px;
        height: auto;
    }

    #bas_menu .logolong,
    #bas_menu img {
        width: min(100%, 300px);
    }

    /* Les grandes boites de dialogue jQuery UI restent dans l'ecran. */
    .ui-dialog {
        left: 2.5% !important;
        width: 95% !important;
        max-width: 95vw;
    }
}