/* mobile.css — refonte mobile de deli-one (JulienWeb, 02/10/2026).
   Chargee APRES style.css (dependance deliOne-style), filemtime() en version : rien n'est ecrit
   dans style.css. Compagnon : assets/chrome.js (bouton menu, retrecissement au defilement).
   Porte du header de c2i-info.net (c2i-v8-chrome.css / .js) : bouton 44 px, panneau, hysteresis.

   Mesures de depart, a 375 px (dev, 02/10) : en-tete 247 px colle en haut de l'ecran, grille des
   artistes 11 917 px (22 vignettes, une par ligne), menu du pied de page 193 px (une entree par ligne).

   1. Retrecissement au defilement — toutes largeurs
   2. En-tete compact + bouton menu — sous 992 px
   3. Grille des artistes sur 2 colonnes — sous 576 px
   4. Menu du pied de page en ligne — sous 768 px */


/* -- 1. Retrecissement au defilement ---------------------------------------------------------
   La classe .is-shrunk est posee par chrome.js (hysteresis 80 / 20 px). L'enveloppe de
   jquery.sticky garde sa hauteur de depart (min-height posee par chrome.js) : l'en-tete
   retrecit sans que la page ne bouge dessous. */

.header-nav-wrapper .logo-theme {
    transition: padding .25s ease;
}

.header-nav-wrapper .logo-theme-img img {
    transition: width .25s ease;
}

.header-nav-wrapper .blog-name {
    max-height: 2em;
    overflow: hidden;
    transition: max-height .25s ease, margin .25s ease, opacity .2s ease;
}

.header-nav-wrapper.is-shrunk {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.header-nav-wrapper.is-shrunk .logo-theme {
    padding-top: 8px;
}

.header-nav-wrapper.is-shrunk .logo-theme-img img {
    width: 44px;
}

.header-nav-wrapper.is-shrunk .blog-name {
    max-height: 0;
    margin-bottom: 8px;
    opacity: 0;
}

/* Le cartouche de mois de l'agenda se colle sous l'en-tete : agenda-home.css le pose a 141 px en
   dur (en-tete deplie). --jw-hdr-h est tenue a jour par chrome.js ; sans JavaScript, 141 px reste. */
html.jw-js .agenda-home .agenda-mois {
    top: var(--jw-hdr-h, 141px);
}

/* Le bouton menu et les acces rapides n'existent pas en grand ecran. */
.jw-burger,
.jw-quick {
    display: none;
}


/* -- 2. En-tete compact + bouton menu (sous 992 px) -------------------------------------------
   Une seule barre de 56 px : logo et nom a gauche, langues et bouton a droite. Le menu devient
   un panneau sous la barre — c'est le meme <ul class="menu-main">, pas une copie.
   Sans JavaScript (pas de classe .jw-js sur <html>), le panneau reste deplie : rien n'est cache
   a qui ne peut pas l'ouvrir. */

@media (max-width: 991.98px) {

    .header-nav-wrapper {
        position: relative;
    }

    .header-nav .row {
        flex-wrap: nowrap;
        justify-content: space-between;
        min-height: 56px;
        transition: min-height .25s ease;
    }

    .header-nav-wrapper.is-shrunk .header-nav .row {
        min-height: 48px;
    }

    /* Les trois colonnes Bootstrap ne se partagent plus la largeur : elles se serrent sur leur
       contenu. position: static pour que le panneau s'ancre sur l'en-tete entier. */
    .header-nav .row > [class*="col-"] {
        position: static;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .header-nav .row > [class*="col-"]:first-child {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
        padding-right: 0;
    }

    .header-nav-wrapper .logo-theme,
    .header-nav-wrapper.is-shrunk .logo-theme {
        flex: none;
        padding: 0;
    }

    .header-nav-wrapper .logo-theme-img img {
        display: block;
        width: 40px;
    }

    .header-nav-wrapper.is-shrunk .logo-theme-img img {
        width: 32px;
    }

    .header-nav-wrapper .blog-name,
    .header-nav-wrapper.is-shrunk .blog-name {
        max-height: none;
        margin: 0 0 0 10px;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-nav-wrapper.is-shrunk .blog-name {
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s .2s;
    }

    /* Recherche et langues */
    .header-nav .menu-top {
        flex-wrap: nowrap;
        padding: 0;
    }

    .header-nav .langue-menu {
        padding: 0;
    }

    .header-nav .langue-menu ul {
        margin: 0;
        padding: 0;
    }

    .header-nav .langue-menu li {
        padding: 0;
    }

    .header-nav .langue-menu a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 7px;
    }

    .header-nav .menu-top-item a.bt-show-search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 44px;
        padding: 0;
    }

    /* Le bouton menu : 44 x 44 px, la cible tactile minimale. */
    .jw-burger {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 15px 0 4px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .4);
        border-radius: 3px;
        background: rgba(49, 39, 131, .55);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        transition: border-color .2s ease, color .2s ease;
    }

    .jw-burger:hover,
    .jw-burger[aria-expanded="true"] {
        border-color: #F39200;
        color: #F39200;
    }

    .jw-burger:focus-visible {
        outline: 2px solid #F39200;
        outline-offset: 2px;
    }

    html:not(.jw-js) .jw-burger {
        display: none;
    }

    /* Le panneau */
    html.jw-js .header-nav .nav-main {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        /* style.css l. 1335 pose height: 100% : en absolu, ca vaut la hauteur de la barre (56 px)
           et le panneau ne montrait que la recherche. */
        height: auto;
        max-height: calc(100vh - 56px);
        max-height: calc(100dvh - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 4px 15px 16px;
        border-top: 1px solid rgba(255, 255, 255, .2);
        background: #312783;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    }

    html.jw-js .header-nav .nav-main.is-open {
        display: block;
    }

    html.jw-js .header-nav .menu-main {
        display: block;
        margin: 0;
        padding: 0;
    }

    html.jw-js .header-nav .menu-main > .menu-item {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    html.jw-js .header-nav .menu-main > .menu-item > .title,
    html.jw-js .header-nav .menu-main > .menu-item > .title.opened-submenu {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 4px;
        border-bottom: 0;
        background: none;
        font-size: 16px;
    }

    /* Tete du panneau (.jw-panel-top, construite par chrome.js) : la recherche, un champ toujours
       deplie, et les langues FR / EN a sa droite — elles ont cede leur place dans la barre aux
       trois acces rapides. */
    .header-nav .nav-main .jw-panel-top {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 0 8px;
    }

    .header-nav .nav-main .jw-panel-top > .menu-top-item:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-nav .nav-main .jw-panel-top .bt-show-search {
        display: none !important;
    }

    .header-nav .nav-main .jw-panel-top #search-form {
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Acces rapides dans la barre : Artistes, Agenda, Albums (copies du menu par chrome.js). */
    .jw-quick {
        display: flex;
        flex: none;
        align-items: center;
        margin-left: auto;
    }

    .jw-quick-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 7px;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color .3s ease-in;
    }

    .jw-quick-link:hover,
    .jw-quick-link.is-current {
        color: #F39200;
    }

    .jw-quick-link:focus-visible {
        outline: 2px solid #F39200;
        outline-offset: -2px;
    }

    /* Les deux colonnes videes de leur contenu ne doivent plus prendre leurs 30 px de gouttiere. */
    .header-nav-wrapper.has-quick .header-nav .row > .col-md-8 {
        padding: 0;
    }

    .header-nav-wrapper.has-quick .header-nav .row > .col-md-2:not(.col-6) {
        display: none;
    }

    .header-nav .nav-main .search-form {
        padding: 0;
        background: none;
    }

    .header-nav .nav-main .search-input {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: 16px;
    }

    .header-nav .nav-main .search-submit {
        min-height: 44px;
    }
}

/* -- 2 bis. En haut de page, l'en-tete sur deux lignes (sous 992 px, 08/10/2026) ----------------
   Demande de Julien : « un menu sur 2 lignes en haut de page, et une reduction ensuite sur la
   taille du menu actuel quand on scrolle ».
   Ligne 1 : le logo, le nom du site, le bouton menu. Ligne 2 : les rubriques (copies du menu par
   chrome.js), qui defilent de cote si elles ne tiennent pas. Au defilement (.is-shrunk) la ligne 2
   se replie et les trois acces rapides reviennent dans la barre : l'en-tete d'avant, a 48 px.
   Sans JavaScript (pas de .has-ligne2) : rien de tout cela, la barre d'origine. */
.jw-ligne2 {
    display: none;
}

@media (max-width: 991.98px) {

    .header-nav-wrapper.has-ligne2 .header-nav .row {
        flex-wrap: wrap;
        align-content: flex-start;
    }

    /* La ligne 1 garde ses 56 px (48 repliee) : la hauteur etait portee par la rangee entiere. */
    .header-nav-wrapper.has-ligne2 .header-nav .row > [class*="col-"]:first-child {
        min-height: 56px;
        transition: min-height .25s ease;
    }

    .header-nav-wrapper.has-ligne2.is-shrunk .header-nav .row > [class*="col-"]:first-child {
        min-height: 48px;
    }

    .header-nav-wrapper.has-ligne2 .jw-burger {
        margin-left: auto;
    }

    /* En haut de page : le nom du site a la place des trois acces rapides, que la ligne 2 reprend. */
    .header-nav-wrapper.has-ligne2:not(.is-shrunk) .jw-quick {
        display: none;
    }

    .header-nav-wrapper.has-ligne2:not(.is-shrunk) .blog-name {
        display: block;
    }

    .jw-ligne2 {
        display: flex;
        flex: 0 0 100%;
        gap: 0 4px;
        max-height: 44px;
        padding: 0 9px 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        transition: max-height .25s ease, padding .25s ease, opacity .2s ease, visibility 0s;
    }

    .jw-ligne2::-webkit-scrollbar {
        display: none;
    }

    .header-nav-wrapper.is-shrunk .jw-ligne2 {
        max-height: 0;
        padding-bottom: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height .25s ease, padding .25s ease, opacity .2s ease, visibility 0s .25s;
    }

    .jw-ligne2-link {
        display: inline-flex;
        flex: none;
        align-items: center;
        min-height: 38px;
        padding: 0 6px;
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color .3s ease-in;
    }

    .jw-ligne2-link:hover,
    .jw-ligne2-link.is-current {
        color: #F39200;
    }

    .jw-ligne2-link:focus-visible {
        outline: 2px solid #F39200;
        outline-offset: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jw-ligne2,
    .header-nav-wrapper.has-ligne2 .header-nav .row > [class*="col-"]:first-child {
        transition: none;
    }
}

/* Sur telephone, le nom du site cede sa place aux trois acces rapides : il reste le logo.
   Sans JavaScript (pas de .has-quick), le nom reste. Au-dessus de 576 px il y a la place pour les deux. */
@media (max-width: 575.98px) {
    .header-nav-wrapper.has-quick .blog-name {
        display: none;
    }
}

/* Petits telephones (320 a 360 px) : on resserre pour qu'aucun lien ne soit coupe. */
@media (max-width: 374.98px) {
    .jw-quick-link {
        padding: 0 5px;
        font-size: 12px;
    }
    .jw-burger {
        margin-left: 0;
    }
    .header-nav .row > [class*="col-"]:first-child {
        padding-left: 10px;
    }
    .jw-burger {
        margin-right: 10px;
    }
}


/* -- 3. Grille des artistes sur 2 colonnes (sous 576 px) --------------------------------------
   22 vignettes : 11 rangees au lieu de 22. L'extrait est masque — sur 160 px de large il fait
   quatre lignes et rallonge la section qu'on raccourcit. Le nom et le pays restent. */

@media (max-width: 575.98px) {

    .artist-wall .artist-bricks.row {
        justify-content: center;
        margin-right: -7px;
        margin-left: -7px;
    }

    .artist-wall .artist-bricks .artist-brick {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 7px;
        padding-left: 7px;
    }

    .artist-wall .artist-brick .artist-row {
        margin: 0 0 1.5em;
        padding: 0;
    }

    .artist-wall .artist-brick .artist-row a.artist-name {
        padding: .6em 0 0;
        font-size: 15px;
        line-height: 1.25;
    }

    .artist-wall .artist-brick .artist-origine {
        padding: 2px 0 0;
        font-size: 12px;
    }

    .artist-wall .artist-brick .artist-excerpt {
        display: none;
    }

    .artist-wall .chapeau {
        margin-bottom: 1.5em;
    }
}


/* -- 4. Menu du pied de page en ligne (sous 768 px) -------------------------------------------
   Les sept entrees ne tiennent pas sur une ligne a 375 px : elles se rangent sur deux, centrees,
   chacune dans une zone de 44 px de haut. Le copyright passe seul dessous. */

@media (max-width: 767.98px) {

    .footer-site .plan-site ul.menu {
        display: flex;
        flex-wrap: wrap;
        /* !important : la classe utilitaire .justify-content-between de Bootstrap en porte un. */
        justify-content: center !important;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-site .plan-site ul.menu > li {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .footer-site .plan-site ul.menu > li > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
    }

    .footer-site .plan-site ul.menu > li.copyright {
        flex: 0 0 100%;
        padding-top: 10px;
        text-align: center;
    }
}


@media (prefers-reduced-motion: reduce) {

    .header-nav-wrapper .logo-theme,
    .header-nav-wrapper .logo-theme-img img,
    .header-nav-wrapper .blog-name,
    .header-nav .row,
    .jw-burger {
        transition: none;
    }
}