/* =============================================================================
   Le Banc des Sardines — compléments et corrections responsive
   -----------------------------------------------------------------------------
   Ce fichier est chargé APRÈS main.css. Il ne remplace rien : il corrige des
   règles précises repérées lors de l'audit. Pour revenir à l'état antérieur,
   il suffit de retirer la ligne correspondante dans includes/header.php.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Fond du pied de page

   #footer-wrapper et #copyright n'ont jamais eu de couleur de fond à eux : ils
   héritaient du bleu de `body`, défini dans main.css.

   Sur les trois galeries photo, assets/css/photos/styles-light.css est chargé
   après main.css et redéfinit `body { background: #FFFFFF }`. Le pied de page se
   retrouvait donc sur fond blanc, avec son texte blanc : illisible.

   Jusqu'ici cela ne se voyait pas, parce que ces trois pages oubliaient un
   </div> : le pied de page se trouvait par accident à l'intérieur de
   #header-wrapper, qui est bleu. En rétablissant la structure HTML correcte,
   j'ai supprimé cette protection involontaire.

   On donne donc au pied de page la couleur qui lui revient, au lieu de la faire
   dépendre d'un parent. C'est exactement le bleu que les autres pages affichent.
   -------------------------------------------------------------------------- */
#footer-wrapper,
#copyright {
    background-color: #326cb1;
}

/* -----------------------------------------------------------------------------
   1. Aucun média ne peut déborder de sa colonne.
      main.css ne contraint que les images portant la classe
      .bordered-feature-image ; toute image ajoutée sans cette classe pouvait
      dépasser la largeur de l'écran sur mobile.
   -------------------------------------------------------------------------- */
img,
video {
    max-width: 100%;
}

img {
    height: auto;
}

/* -----------------------------------------------------------------------------
   2. Carte Google : main.css contient « padding-bottom: 75%; // aspect ratio ».
      Les commentaires « // » n'existent pas en CSS : le navigateur ignore tout
      jusqu'au point-virgule suivant et la déclaration « height: 0 » est perdue.
      On la rétablit ici pour que le rapport hauteur/largeur soit respecté.
   -------------------------------------------------------------------------- */
.google-maps {
    height: 0;
}

/* -----------------------------------------------------------------------------
   3. Vignette du livre de recettes (page d'accueil) : main.css la fige à 307 px
      quelle que soit la taille de l'écran, ce qui la faisait déborder de sa
      colonne sur les téléphones étroits.
   -------------------------------------------------------------------------- */
#video2 a img {
    width: 100%;
    max-width: 307px;
    height: auto;
}

/* -----------------------------------------------------------------------------
   4. Vidéos YouTube : la largeur de 99 % laissait un liseré à droite.
   -------------------------------------------------------------------------- */
.video-container iframe,
.video-container object,
.video-container embed {
    width: 100%;
}

/* -----------------------------------------------------------------------------
   5. Module Facebook : le widget est demandé en 380 px de large et débordait
      sur les écrans de 320 à 375 px. L'attribut data-adapt-container-width
      ajouté dans le pied de page fait le reste.
   -------------------------------------------------------------------------- */
.fb-page,
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {
    max-width: 100% !important;
}

/* -----------------------------------------------------------------------------
   6. Galeries : sur les très petits écrans, une seule colonne et des marges
      réduites pour gagner en surface d'affichage.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .gallery-container .image-main-box .item {
        float: none;
        width: 100%;
    }

    .bordered-feature-image {
        padding: 6px;
    }
}

/* -----------------------------------------------------------------------------
   8. OPTIONNEL — marges latérales sur mobile.
      Le contenu arrive aujourd'hui à 5 px du bord de l'écran. Décommenter ce
      bloc pour aérer la lecture sur téléphone (à valider visuellement).
   --------------------------------------------------------------------------
@media screen and (max-width: 736px) {
    #content-wrapper,
    #footer-wrapper,
    #footer-friend {
        padding-left: 12px;
        padding-right: 12px;
    }
}
*/

/* -----------------------------------------------------------------------------
   Affichage des documents PDF (voir la fonction bds_pdf() dans config.php)
   -------------------------------------------------------------------------- */
.pdf-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
}

/* Sur téléphone et tablette, la hauteur suit celle de l'écran plutôt que de
   créer une immense zone vide à faire défiler. */
@media screen and (max-width: 1024px) {
    .pdf-frame {
        height: 80vh !important;
        min-height: 420px;
    }
}

.pdf-repli {
    padding: 30px;
    text-align: center;
}

/* =============================================================================
   9. Bouton de menu sur téléphone

   Le thème d'origine dessinait une grande pastille bleu pâle opaque, garnie
   d'une icône SVG affichée à 25 % d'opacité : d'où cet aspect délavé, sans
   rapport avec le reste du site.

   On le remplace par un bouton sobre, dessiné entièrement en CSS : un cadre
   translucide sur le bleu du bandeau, trois traits blancs nets, et une
   transformation en croix quand le menu est ouvert. Aucune image à charger.
   Ces règles ne s'appliquent qu'en dessous de 736 px, là où la barre existe.
   ============================================================================= */

@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;
        }
    }
}