/* =============================================================================
   Bouton de menu sur téléphone — Le Banc des Sardines
   -----------------------------------------------------------------------------
   Cette feuille est chargée APRÈS main.css et ne fait que redessiner le bouton
   de menu de la barre mobile. Elle ne modifie rien d'autre, et ne s'applique
   qu'en dessous de 736 px de large : sur ordinateur, rien ne change.

   Le thème d'origine dessinait une pastille bleu pâle opaque garnie d'une icône
   SVG affichée à 25 % d'opacité, d'où son aspect délavé. On la remplace par un
   bouton dessiné entièrement en CSS : cadre translucide, trois traits blancs
   nets, et transformation en croix quand le menu est ouvert. Aucune image n'est
   téléchargée.

   Pour revenir en arrière : retirer la ligne qui appelle ce fichier dans
   includes/header.php. Rien d'autre n'est à défaire.
   ============================================================================= */

@media screen and (max-width: 736px) {

    /* Le bouton lui-même devient le cadre. */
    #titleBar .toggle {
        left: 9px;
        top: 5px;
        width: 46px;
        height: 34px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 8px;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    #titleBar .toggle:hover,
    #titleBar .toggle:active {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.75);
    }

    #titleBar .toggle:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    /* Le libellé « Menu » reste lisible par les lecteurs d'écran,
       sans être visible à l'écran. */
    #titleBar .toggle .toggle-libelle {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Trois traits : le trait central, et les deux autres par projection.
       On neutralise au passage l'icône SVG et l'opacité du thème d'origine. */
    #titleBar .toggle:after {
        content: '';
        display: block;
        position: absolute;
        top: 15px;
        left: 12px;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
        box-shadow: 0 -6px 0 0 #ffffff, 0 6px 0 0 #ffffff;
        text-shadow: none;
        opacity: 1;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    /* Second trait, invisible au repos, qui forme la croix à l'ouverture. */
    #titleBar .toggle:before {
        content: '';
        display: block;
        position: absolute;
        top: 15px;
        left: 12px;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
        opacity: 0;
        z-index: 2;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Menu ouvert : les traits se croisent. */
    body.navPanel-visible #titleBar .toggle {
        background: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.75);
    }

    body.navPanel-visible #titleBar .toggle:after {
        box-shadow: none;
        transform: rotate(45deg);
    }

    body.navPanel-visible #titleBar .toggle:before {
        opacity: 1;
        transform: rotate(-45deg);
    }

    /* Le titre était décentré par la largeur de l'ancien bouton. */
    #titleBar .title {
        padding: 0 60px;
        line-height: 22px;
    }

    @media (prefers-reduced-motion: reduce) {
        #titleBar .toggle,
        #titleBar .toggle:before,
        #titleBar .toggle:after {
            transition: none;
        }
    }
}