#cFirst ul{display:none;margin:0;background-color:#fff;min-height:16px;overflow:hidden;padding:0 0 6px 8px}#cFirst ul.niv1{padding-left:6px}#cFirst ul.niv1>li{position:relative;margin-bottom:0;margin-left:0;background:url("../_images/line_doat.gif") repeat-x scroll center bottom transparent;border:medium none;font-size:12px;line-height:13px;padding-bottom:0}#cFirst ul ul li{line-height:13px;min-height:14px}#cFirst .case{border-bottom:1px dotted #141414}#cFirst h4{margin:0;position:relative;background-color:#333;color:#fff;font-size:13px;font-weight:bold;height:30px;line-height:1.3em}#cFirst h4 a{color:#fff;text-decoration:none;display:block;height:30px;padding:7px 0 0 8px}#cFirst h4 i{position:absolute;font-size:12px;top:8px;right:10px;font-weight:normal}#cFirst h4 a:hover,#cFirst li i+a:hover{text-decoration:underline}#cFirst li>i{font-size:10px;color:#555}#cFirst li i+a{text-decoration:none;color:#555;display:inline-block;padding:8px 0}#cFirst li.active>i+a{font-weight:bold}#cFirst li a+a{text-decoration:none;float:right;color:#333;padding:8px 3px}
/* ── Bouton escamoter cFirst ───────────────────────────────────────────────── */
#btn-cFirst {
    display: none;
    position: absolute; top: 4px; right: -16px; z-index: 999;
    background: #3a3a3a; color: #fff; border: none;
    border-radius: 0 4px 4px 0; padding: 8px 6px; cursor: pointer;
    font-size: 13px; line-height: 1;
}
/* Quand cFirst est ouvert : overflow-x:hidden cliperait right:-16px.
   On positionne btn-cFirst à l'intérieur de cFirst (right:4px). */
#cFirst:not(.collapsed) #btn-cFirst { right: 4px; }
#cFirst { position: relative; transition: width 0.2s, margin 0.2s; }
#cFirst.collapsed { width:0 !important; margin:0 !important; overflow:visible !important; padding:0 !important; }
#cFirst.collapsed > *:not(#btn-cFirst) { display: none; }
#cFirst.collapsed #btn-cFirst { right: -18px; }

/* ══ HEADER — défauts (desktop) ════════════════════════════════════════════ */
#header-mobile       { display: none; }     /* caché par défaut              */
.hours-short         { display: none; }     /* texte court caché en desktop  */
.hours-long          { display: inline; }   /* texte long visible en desktop */
/* Desktop : logo(1) | addr(2) | tél(1) → addr double, tél avec espace à droite */
#header-desktop              { display: flex; align-items: center; }
#header-desktop > .first     { flex: 1 1 0; min-width: 0; }
#header-desktop-addr         { flex: 4 4 0; min-width: 0; text-align: center; }
#header-desktop > .last      { flex: 1 1 0; min-width: 0; text-align: right; padding-right: 30px; }
#header-desktop > .last p    { white-space: nowrap; text-align: right; margin: 0; }
/* Desktop : conserver le saut de ligne entre adresse et heures */
br.sep-heures                 { display: inline; }

/* ══ PORTRAIT MOBILE ≤640px ════════════════════════════════════════════════ */
@media (max-width: 640px) and (orientation: portrait) {

    /* Header : cacher desktop, montrer mobile */
    #header-desktop { display: none !important; }
    #header-mobile {
        display: flex !important;
        flex-direction: row;
        align-items: flex-start;
        padding: 0;
        margin-top: 0;
        width: 100%;
    }
    /* Supprimer tout espace au-dessus du header mobile */
    header { padding-top: 0 !important; margin-top: 0 !important; }

    /* Colonnes portrait : gauche étroite (42%), droite large (58%) */
    .header-col-left  {
        width: 42% !important;
        flex: 0 0 42%;
        padding: 3px 4px 3px 0;     /* pas d'espace à gauche */
        box-sizing: border-box;
    }
    .header-col-right {
        width: 58% !important;
        flex: 0 0 58%;
        padding: 3px 12px 3px 4px;  /* espace généreux à droite */
        box-sizing: border-box;
    }

    /* Gauche : logo centré + adresse centrée sous le logo */
    .header-col-left {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }
    .header-col-left img {
        max-width: 110px;
        width: 90%;
        display: block;
        margin: 0 auto 4px auto;   /* centré horizontalement */
    }
    .header-addr {
        font-size: 10px;
        margin: 0;
        line-height: 1.3;
        text-align: center;        /* centré par rapport à la colonne = centré sous logo */
        width: 100%;
    }

    /* Droite : tout aligné à droite */
    .header-col-right {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
    .header-tel, .header-email {
        margin: 0;
        font-size: 10px;
        line-height: 1.5;
        text-align: right;
        width: 100%;
    }
    .header-email .email { font-size: 9px; }

    /* Espace + séparation invisible entre email et heures */
    .header-hours {
        margin-top: 18px;          /* descend légèrement */
        font-size: 9px;
        line-height: 1.4;
        text-align: right;
        width: 100%;
    }

    /* Supprimer tout espace au-dessus du bouton Accueil */
    header          { padding-bottom: 0 !important; margin-bottom: -4px !important; }
    #navTop         { margin-top: -8px !important; margin-bottom: 0 !important; }
    #nav-portrait   { margin-top: 0 !important; padding-top: 0 !important; }

    /* Boutons escamoter visibles en portrait mobile */
    #btn-cFirst          { display: block !important; }
    /* btn-cLast dans h1 cSecond : visible à ≤926px même si show-640 le cache */
    #btn-cLast,
    #btn-cLast2,

    /* Nav Bootstrap masquée, nav-portrait affichée */
    .navbar-toggle       { display: none !important; }
    #navbarMain          { display: none !important; }
    #nav-portrait        { display: block !important; }
    .divider-vertical    { display: none; }
}

/* ── Services : chaque image sur sa propre ligne ─────────────────── */
#services-imgs {
    display: block;           /* empilage vertical */
}
#services-imgs img {
    display: block;
    width: 620px;             /* dimension originale */
    height: 438px;            /* dimension originale */
    max-width: 100%;          /* ne jamais dépasser le conteneur */
    height: auto;             /* préserver ratio si max-width s'applique */
    margin-bottom: 12px;
}

/* ══ PAYSAGE MOBILE ≤926px ══════════════════════════════════════════════════ */
@media (max-width: 926px) and (orientation: landscape) {

    #header-mobile  { display: none !important; }   /* jamais en paysage     */
    .hours-long     { display: none !important; }    /* texte long masqué en paysage  */
    .hours-short    { display: inline !important; }  /* texte court sur 1 ligne       */

    /* Header paysage : même look que desktop, colonnes adaptées à ~926px ──────
       Problème : Bootstrap col-sm-3 (25%=231px) trop étroit pour l'email.
       Solution : flex explicite qui override Bootstrap width + float.       */
    #header-desktop              { display: flex !important; align-items: center; }
    #header-desktop > *          { float: none !important; }   /* annuler Bootstrap float */

    /* logo : fixe 160px, addr : tout le reste, tel/email : fixe 210px */
    #header-desktop > .first     { flex: 0 0 160px !important; width: auto !important;
                                   padding-bottom: 6px !important;  /* espace sous le logo */
                                   padding-right:  20px !important; /* espace logo → addr  */ }
    #header-desktop-addr         { flex: 1 1 auto !important; width: auto !important;
                                   text-align: center !important; min-width: 0; }
    #header-desktop-addr p       { display: inline-block; text-align: center; margin: 0; }
    #header-desktop > .last      { flex: 0 0 210px !important; width: auto !important;
                                   margin-left: -20px !important;   /* compense : addr → tél plus proche */
                                   text-align: right !important; padding-right: 16px !important; }
    #header-desktop > .last p    { white-space: nowrap; text-align: right !important;
                                   margin: 0; font-size: 12px; line-height: 1.6; }

    br.sep-addr                  { display: none !important; }  /* adresse sur 1 ligne */
    br.sep-heures                { display: none !important; }  /* pas de ligne blanche */

    /* Espace logo↔navbar + navbar légèrement moins haute */
    header                       { padding-bottom: 6px !important; }
    #navTop                      { margin-top: 0 !important; margin-bottom: 0 !important; }
    #navTop .navbar-nav > li > a { padding-top: 6px; padding-bottom: 6px; }

    /* Navbar paysage sur 2 lignes :
       Ligne 1 : liens nav (gauche) + Mon Compte / Déconnexion (droite)
       Ligne 2 : champ Recherche (pleine largeur)                        */
    #navbarMain                        { display: flex !important; flex-wrap: wrap !important;
                                         align-items: center; }
    #navbarMain > ul.navbar-nav:not(.pull-right)
                                       { order: 1; flex: 1 1 auto; float: none !important; }
    #navbarMain > ul.pull-right        { order: 2; float: none !important; margin-left: auto; }
    #navbarMain > form.navbar-form     { order: 3; width: 100% !important;
                                         float: none !important; margin: 2px 0 !important; }
    /* Champ recherche : pleine largeur en paysage */
    #navbarMain > form.navbar-form     { padding: 2px 0 !important; margin: 0 !important;
                                         width: 100% !important; }
    #navbarMain form .form-group       { display: block !important; width: 100% !important;
                                         margin: 0 !important; }
    #navbarMain form .input-group      { display: table !important; width: 100% !important; }
    #navbarMain form .form-control     { display: table-cell !important; width: 100% !important; }
    #navbarMain form .input-group-btn  { display: table-cell !important; width: 1% !important;
                                         white-space: nowrap !important; }

    /* btn-cFirst visible en paysage */
    #btn-cFirst          { display: block !important; }

    /* btn-cLast masqué en paysage : cLast géré automatiquement avec cFirst */
    #btn-cLast,
    #btn-cLast2          { display: none !important; }
}

/* ══ NAV PORTRAIT ══════════════════════════════════════════════════════════ */
#nav-portrait { display: none; padding: 0 4px 4px; }  /* padding-top:0 = bouton Accueil remonté */

.nav-row {
    display: flex; width: 100%; margin-bottom: 2px; align-items: stretch;
}
.nav-item {
    flex: 1; text-align: center; padding: 4px 1px;    /* padding réduit pour 4 items */
    color: #fefefe; font-size: 10px; font-weight: bold;
    text-transform: uppercase; text-decoration: none; background: transparent;
    white-space: nowrap; overflow: hidden;
}
.nav-item:hover, .nav-item.active {
    background-color: #707070; color: #fff; text-decoration: none;
}
/* Icône Mon Compte : verte pour signaler l'état connecté */
.nav-item .fa-user { color: #00e000; }
/* Opérateur de filtre actif : fond vert pour bien le distinguer */
#filtreBox .btn-info.active,
#filtreBox .btn-info:focus  { background-color: #3c763d !important;
                               border-color:     #2d5a2e !important;
                               color:            #fff    !important; }
/* Dropdown filtre avec valeur sélectionnée : toggle en vert */
#filtreBox .filtre-actif > .dropdown-toggle {
    background-color: #3c763d !important;
    color: #fff !important;
    border-color: #2d5a2e !important; }
/* Valeur active dans le menu : fond vert clair */
#filtreBox .dropdown-menu li.active > a { background-color: #5cb85c; color: #fff; }
#filtreBox .dropdown-menu > li > a     { padding: 5px 10px; }
.nav-item-wide  { flex: 2; text-align: left; padding-left: 6px; white-space: normal; }
/* PC et Nas sur mesure : léger flex supplémentaire */
.nav-item-pc    { flex: 1.5; white-space: normal; font-size: 9px; }
.nav-row-search { padding: 1px 0 3px; }
.nav-row-search form, .nav-row-search .input-group { width: 100%; }
.nav-row-search .form-control { font-size: 12px; }

/* ══ IMAGES SERVICES pleine largeur sur mobile ══════════════════════════════ */
@media (max-width: 926px) {
    /* Les 3 images service : pleine largeur de cSecond, centrées */
    /* Mobile portrait : images services = largeur de cSecond */
    #services-imgs img {
        width: 100% !important;    /* pleine largeur de cSecond */
        height: auto !important;   /* ratio préservé */
        display: block;
        margin-bottom: 8px;
    }
    /* warning.gif : taille originale, centré */
    #pgServices #cSecond img[src*="warning"] {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        display: inline !important;
        vertical-align: middle;
    }
}

/* ══ FOOTER : liens plus petits sur mobile ═════════════════════════════════ */
@media (max-width: 926px) {
    footer nav ul { padding: 0; margin: 4px 0; }
    footer nav ul li { display: inline-block; }
    footer nav ul li a { font-size: 10px; padding: 3px 6px; }
}
@media (max-width: 640px) {
    footer nav ul li a { font-size: 9px; padding: 2px 4px; }
}

/* ══ LAYOUT STICKY v1.0.25 ══════════════════════════════════════════════════
   - footer.row : width:100% + margin:0 → pleine largeur
   - #wrap : width:100% + margin:0 → annule margin:0 auto
   - float:none !important → annule Bootstrap .pull-left/.pull-right
   - body#pgCompte : form = flex-item (cSecond dans form)
   - body#pgSurmesure, body#pgOuSommesNous : cSecond = flex:1 + flex-column
   ─────────────────────────────────────────────────────────────────────────── */

body#pgHome,
body#pgComparer,   body#pgCommande,
body#pgCompte,     body#pgSurmesure,
body#pgServices,   body#pgInfos,
body#pgSommesNous, body#pgOuSommesNous,
body#pgConditions, body#pgConnexion {
    display: flex;
    flex-direction: column;
    height: 100vh;          /* fallback */
    height: 100dvh;         /* dynamic viewport height */
    overflow: hidden;
}

/* ── MOBILE ≤926px : scroll naturel → tout le contenu est visible ─────────
   Sur vrai mobile (S25 Ultra etc.), 100dvh/overflow:hidden coupe le bas.
   Solution v1.0.47 : height:auto + overflow:visible → scroll natif.         */
@media (max-width: 926px) {
    body#pgHome,
    body#pgComparer,   body#pgCommande,
    body#pgCompte,     body#pgSurmesure,
    body#pgServices,   body#pgInfos,
    body#pgSommesNous, body#pgOuSommesNous,
    body#pgConditions, body#pgConnexion {
        height: auto !important;
        overflow: visible !important;
    }
}

/* footer pleine largeur — annule Bootstrap .row { margin:-15px } */
body#pgHome > footer,
body#pgComparer > footer,   body#pgCommande > footer,
body#pgCompte > footer,     body#pgSurmesure > footer,
body#pgServices > footer,   body#pgInfos > footer,
body#pgSommesNous > footer, body#pgOuSommesNous > footer,
body#pgConditions > footer, body#pgConnexion > footer {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
}

/* #wrap pleine largeur — annule margin:0 auto */
body#pgHome #wrap,
body#pgComparer #wrap,   body#pgCommande #wrap,
body#pgCompte #wrap,     body#pgSurmesure #wrap,
body#pgServices #wrap,   body#pgInfos #wrap,
body#pgSommesNous #wrap, body#pgOuSommesNous #wrap,
body#pgConditions #wrap, body#pgConnexion #wrap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
}
@media (max-width: 926px) {
    body#pgHome #wrap,
    body#pgComparer #wrap,   body#pgCommande #wrap,
    body#pgCompte #wrap,     body#pgSurmesure #wrap,
    body#pgServices #wrap,   body#pgInfos #wrap,
    body#pgSommesNous #wrap, body#pgOuSommesNous #wrap,
    body#pgConditions #wrap, body#pgConnexion #wrap {
        overflow: visible !important;
        flex: 0 0 auto;
    }
}


body#pgHome #push,
body#pgComparer #push,   body#pgCommande #push,
body#pgCompte #push,     body#pgSurmesure #push,
body#pgServices #push,   body#pgInfos #push,
body#pgSommesNous #push, body#pgOuSommesNous #push,
body#pgConditions #push, body#pgConnexion #push { display: none; }

body#pgHome #wrap > header,
body#pgComparer #wrap > header,   body#pgCommande #wrap > header,
body#pgCompte #wrap > header,     body#pgSurmesure #wrap > header,
body#pgServices #wrap > header,   body#pgInfos #wrap > header,
body#pgSommesNous #wrap > header, body#pgOuSommesNous #wrap > header,
body#pgConditions #wrap > header, body#pgConnexion #wrap > header {
    flex: 0 0 auto;
}
/* ── MOBILE (≤926px) : header sticky → toujours visible en haut ──────────
   header contient : bloc adresse/contact + navTop (navbar) + barre recherche.
   position:sticky + top:0 le maintient en haut lors du scroll de la page.
   z-index élevé pour passer au-dessus de cFirst en overlay.               */
@media (max-width: 926px) {
    body#pgHome #wrap > header,
    body#pgComparer #wrap > header,   body#pgCommande #wrap > header,
    body#pgCompte #wrap > header,     body#pgSurmesure #wrap > header,
    body#pgServices #wrap > header,   body#pgInfos #wrap > header,
    body#pgSommesNous #wrap > header, body#pgOuSommesNous #wrap > header,
    body#pgConditions #wrap > header, body#pgConnexion #wrap > header {
        position: sticky;
        top: 0;
        z-index: 500;
        background: #fff;      /* fond neutre — les sections internes (navbar, search) ont leur propre fond */
    }
}

/* section.container-fluid ou row-fluid */
body#pgHome #wrap > section.container-fluid,
body#pgComparer #wrap > section.container-fluid,
body#pgCommande #wrap > section.container-fluid,
body#pgCompte #wrap > section.container-fluid,
body#pgSurmesure #wrap > section.container-fluid,
body#pgServices #wrap > section.container-fluid,
body#pgInfos #wrap > section.container-fluid,
body#pgSommesNous #wrap > section.container-fluid,
body#pgSommesNous #wrap > section.row-fluid,
body#pgOuSommesNous #wrap > section.container-fluid,
body#pgOuSommesNous #wrap > section.row-fluid,
body#pgConditions #wrap > section.container-fluid,
body#pgConnexion #wrap > section.container-fluid {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 0 !important;
}
@media (max-width: 926px) {
    body#pgHome #wrap > section.container-fluid,
    body#pgComparer #wrap > section.container-fluid,
    body#pgCommande #wrap > section.container-fluid,
    body#pgCompte #wrap > section.container-fluid,
    body#pgSurmesure #wrap > section.container-fluid,
    body#pgServices #wrap > section.container-fluid,
    body#pgInfos #wrap > section.container-fluid,
    body#pgSommesNous #wrap > section.container-fluid,
    body#pgConditions #wrap > section.container-fluid,
    body#pgConnexion #wrap > section.container-fluid {
        overflow: visible !important;
        flex: 0 0 auto;
        align-items: flex-start;
    }
}


/* ── cFirst ── */
body#pgHome #cFirst,
body#pgComparer #cFirst,   body#pgCommande #cFirst,
body#pgCompte #cFirst,     body#pgSurmesure #cFirst,
body#pgServices #cFirst,   body#pgInfos #cFirst,
body#pgSommesNous #cFirst, body#pgOuSommesNous #cFirst,
body#pgConditions #cFirst, body#pgConnexion #cFirst {
    order: 1;
    flex: 0 0 auto;
    float: none !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── cSecond ── toutes les pages, y compris pgSurmesure et pgOuSommesNous */
body#pgHome #cSecond,
body#pgComparer #cSecond,  body#pgCommande #cSecond,
body#pgSurmesure #cSecond, body#pgServices #cSecond,
body#pgInfos #cSecond,     body#pgSommesNous #cSecond,
body#pgOuSommesNous #cSecond,
body#pgConditions #cSecond, body#pgConnexion #cSecond {
    order: 2;
    flex: 1 1 auto;
    width: 0;           /* force flex:1 à étirer — min-width:0 ne suffit pas toujours */
    min-width: 0;
    min-height: 0;
    float: none !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* pgHome : flex-colonne, seul .row.index scrolle */
body#pgHome #cSecond {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;   /* ancre btn-cLast en absolu */
}
body#pgHome #cSecond > h1             { flex: 0 0 auto; margin: 0 0 4px 0 !important; padding: 4px 12px !important; overflow: visible !important; height: auto !important; }
body#pgHome #cSecond > ol.breadcrumb  { margin-bottom: 2px !important; }
body#pgHome #cSecond > #nav1          { flex: 0 0 auto; margin: 0 !important; }
body#pgHome #cSecond > #nav1 .navBox  { margin: 0 !important; margin-bottom: 4px !important; }
body#pgHome #cSecond > form           { flex: 0 0 auto; }
/* ── navBox : 3 zones à toutes les largeurs ────────────────────────────────
   Zone 1 gauche  : Page x/y - total  (flex:0 0 auto, padding-left:10px)
   Zone 2 centre  : pagination        (flex:1 1 auto, text-align:center)
   Zone 3 droite  : par page          (flex:0 0 auto, padding-right:10px)
   Bootstrap col-md-4 est écrasé (width, float, padding).                   */
body#pgHome #cSecond > .navBox {
    flex: 0 0 auto;
    height: auto !important;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 2px 0;
}
/* Écraser Bootstrap col-md-4 / col-sm-4 / col-xs-12 dans le navBox */
body#pgHome #cSecond > .navBox > div.first,
body#pgHome #cSecond > .navBox > div.second,
body#pgHome #cSecond > .navBox > div.last {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Zone 1 — Page x/y - total : colle à gauche, taille contenu */
body#pgHome #cSecond > .navBox > div.first {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 10px;
    white-space: nowrap;
    text-align: left;
    padding-left: 10px !important;
}
/* Zone 2 — pagination : prend tout l'espace restant, contenu centré */
body#pgHome #cSecond > .navBox > div.second {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    text-align: center;
}
/* Zone 3 — par page : colle à droite, taille contenu */
body#pgHome #cSecond > .navBox > div.last {
    flex: 0 0 auto !important;
    width: auto !important;
    text-align: right;
    white-space: nowrap;
    padding-right: 10px !important;
}
body#pgHome #cSecond > .navBox .pagination     { margin: 0; display: inline-flex !important; flex-wrap: nowrap; }
body#pgHome #cSecond > .navBox .parpage        { margin: 0; }
body#pgHome #cSecond > .navBox ul.pagination > li > a,
body#pgHome #cSecond > .navBox ul.pagination > li > span { padding: 2px 4px; font-size: 10px; }
body#pgHome #cSecond > .row.index {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: flex-start;
    width: 100%;
    padding-left: 0;
    box-sizing: border-box;
}
@media (max-width: 926px) {
    body#pgHome #cSecond > .row.index {
        overflow: visible !important;
        flex: 0 0 auto;
        height: auto !important;
    }
}
body#pgHome #cSecond > p.note { flex: 0 0 auto;
    margin: 0 0 4px 6px !important; }  /* moins d'espace dessous, décalé gauche */

/* autres pages scroll direct */
body#pgComparer #cSecond,  body#pgCommande #cSecond,
body#pgServices #cSecond,  body#pgInfos #cSecond,
body#pgSommesNous #cSecond, body#pgConditions #cSecond,
body#pgConnexion #cSecond {
    overflow-y: auto;
}

/* pcsurmesure : konfigurator-app remplit cSecond */
body#pgSurmesure #cSecond {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body#pgSurmesure #cSecond > h1             { flex: 0 0 auto; }
body#pgSurmesure #cSecond > #konfigurator-app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;              /* ajusterHauteur() pose height via style inline */
    -webkit-overflow-scrolling: touch;  /* scroll fluide iOS/Android */
}

/* ousommesnous : iframe remplit cSecond */
body#pgOuSommesNous #cSecond {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body#pgOuSommesNous #cSecond > h1     { flex: 0 0 auto; }
body#pgOuSommesNous #cSecond > iframe {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    border: 0;
}
body#pgOuSommesNous #cSecond > p { flex: 0 0 auto; }

/* moncompte : form = flex-item, cSecond remplit la form */
body#pgCompte #wrap > section.container-fluid > form {
    order: 2;
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    min-height: 0;
    float: none !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body#pgCompte #cSecond {
    flex: 1 1 auto;
    min-height: 0;
    float: none !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── cLast ── */
body#pgHome #cLast,
body#pgComparer #cLast,   body#pgCommande #cLast,
body#pgCompte #cLast,     body#pgSurmesure #cLast,
body#pgServices #cLast,   body#pgInfos #cLast,
body#pgSommesNous #cLast, body#pgOuSommesNous #cLast,
body#pgConditions #cLast, body#pgConnexion #cLast {
    order: 3;
    flex: 0 0 auto;
    float: none !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ══ cFirst FORCÉ VISIBLE à ≤800px ═══════════════════════════════════════════
   comportements_ui.js collapse cFirst par défaut sur mobile (isMobile=≤926px).
   On force l'annulation du .collapsed à ≤800px pour que cFirst soit toujours
   visible à 640px et 800px, conformément aux exigences.
   En dessous de 640px, responsive.css masque cFirst entièrement (display:none).
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 800px) {
    #cFirst.collapsed {
        width: 154px !important;   /* annule width:0 !important du collapsed */
        margin: 0 10px 0 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    #cFirst.collapsed > *:not(#btn-cFirst) {
        display: block !important;  /* annule display:none des enfants cachés */
    }
}

/* ══ BOUTONS ESCAMOTER : visibles sur tout mobile ≤926px ═══════════════════
   btn-cFirst   : dans #cFirst — visible via position:absolute right:-16px
   btn-cLast    : dans h1 cSecond — visible dès que cLast peut être escamoté
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 926px) {
    /* btn-cFirst : toujours visible sur mobile, géré par col1/comportements */
    #btn-cFirst                   { display: block !important; }
    /* btn-cLast  : toujours visible sur mobile portrait */
    #btn-cLast                    { display: inline-block !important; }
    #btn-cLast2                   { display: inline-block !important; }
}

/* Portrait ≤926px : btn-cLast visible */
@media (max-width: 926px) and (orientation: portrait) {
    #btn-cLast                    { display: inline-block !important; }
    #btn-cLast2                   { display: inline-block !important; }
}

/* btn-cLast : toujours dans nav-row-search (injecté par JS)            */
#btn-cLast, #btn-cLast2 {
    flex: 0 0 auto;
    margin: 0 2px !important;
    align-self: center;
}
/* btn-promos : pull-right absolu dans h1, top:7px, 10px du bord droit.
   h1 position:relative sert d'ancre. Fonctionne indépendamment du filtreBox.  */
body#pgHome #cSecond h1 {
    position: relative;
    min-height: 28px;   /* garantit que h1 a de la hauteur même si $titre est court */
}
body#pgHome #cSecond h1 span.pull-right {
    position: absolute;
    top: 7px;
    right: 10px;
    float: none !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* pgFiche ≤640px : stock-zone et row.description — pas de centrage */
@media (max-width: 640px) {
    body#pgFiche #cSecond .stock-zone,
    body#pgFiche #cSecond .row.description,
    body#pgFiche #cSecond .stock-zone-text,
    body#pgFiche #cSecond .second {
        text-align: left !important;
    }
}
/* ══ FOOTER — nouveau layout inline (v1.0.58) ══════════════════════════════ */
body > footer {
    height: auto !important;
    min-height: 38px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 0 !important;
}
body > footer nav    { flex: 0 0 auto; }
body > footer nav ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
body > footer nav ul li { display: inline; }
body > footer nav ul li a { font-size: 12px !important; padding: 6px 8px; }
body > footer .footer-copy { flex: 0 0 auto; line-height: 1.3; font-size: 9px !important; color: silver; padding: 0 10px; }
body > footer .footer-copy a { font-size: 9px !important; padding: 0 !important; }
#push { height: 46px; }   /* légèrement plus grand pour footer auto-height */

/* ══ FICHE — stock-zone compact (v1.0.58) ══════════════════════════════════ */
#pgFiche #cSecond .second > div > div.stock-zone {
    padding: 4px 10px !important;
    margin: 0 0 8px 0 !important;
}
#pgFiche #cSecond .second > div > div.stock-zone,
#pgFiche #cSecond .second > div > div.stock-zone span,
#pgFiche #cSecond .second > div > div.stock-zone .stock-zone-text {
    line-height: 1.3;
}
#pgFiche #cSecond .second > div > div.stock-zone .promo_date {
    top: -8px !important;
}

/* ══ INFOS — contenu aligné à gauche ═══════════════════════════════════════ */
body#pgInfos #cSecond,
body#pgInfos #cSecond p,
body#pgInfos #cSecond td,
body#pgInfos #cSecond li {
    text-align: left !important;
}

/* ══ FOOTER — © responsive 3 états ════════════════════════════════════════
   ≥550px      : 1 ligne "© Génération Amiga, Curatolo Carlo" (virgule, no br)
   475–549px   : 2 lignes
   <475px      : 1 ligne (virgule, no br)                                     */
/* défaut (≥550px) : 1 ligne */
body > footer .fcbr            { display: none; }
body > footer .fcm             { display: inline; }   /* virgule */

/* 475–549px : 2 lignes */
@media (max-width: 549px) and (min-width: 475px) {
    body > footer .fcbr        { display: block; }
    body > footer .fcm         { display: none; }
}
/* <475px : 1 ligne (virgule) — identique au défaut, rien à overrider */

/* ══ CARRE — boule colorée inline avec le dernier prix ═════════════════════ */
#cSecond section.carre div.prix i.fa-circle {
    display: inline !important;
    vertical-align: middle;
    margin-left: 3px;
}

/* ══ FILTREBOX — dropdown styling (v1.0.61) ════════════════════════════════ */
/* Mot "Filtres" et zone navbar-header complètement supprimés */
#frmFiltrage .navbar-header   { display: none !important; }
#frmFiltrage .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
#frmFiltrage .navbar          { min-height: 0 !important; margin-bottom: 0 !important;
                                 border: none !important; padding: 0 !important; }

/* Bouton réinit filtres : croix rouge, coin inférieur droit de filtreBox.
   width/height explicites pour éviter l'étirement (block absolu = full-width
   par défaut si left:auto et right fixé).                                  */
#btn-filtre-reset {
    display: none;           /* JS: inline-block si filtre actif */
    position: absolute;
    bottom: 2px;
    right: 2px;
    left: auto !important;   /* CRITIQUE: empêche l'étirement horizontal */
    top: auto !important;
    width: auto !important;
    max-width: fit-content;
    z-index: 20;
    background: #d9534f;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    white-space: nowrap;
}
#btn-filtre-reset:hover {
    background: #b52b27;
}
/* filtreBox : position:relative pour ancrer le bouton */
#filtreBox {
    position: relative;
}

/* Padding des liens dropdown */
#frmFiltrage #filtreBox .dropdown-toggle,
#frmFiltrage #filtreBox .nav > li > a {
    padding: 5px 10px !important;
}
#frmFiltrage #filtreBox .dropdown-menu > li > a {
    padding: 5px 10px !important;
}

/* Léger contour sur les li.dropdown */
#frmFiltrage #filtreBox .nav > li.dropdown {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 1px 2px;
}
#frmFiltrage #filtreBox .nav > li.dropdown.active,
#frmFiltrage #filtreBox .nav > li.dropdown.filtre-actif {
    border-color: #3a87ad;
    background-color: #d9edf7;
}
#frmFiltrage #filtreBox .nav > li.dropdown.filtre-actif > a {
    color: #1a5a7a;
    font-weight: bold;
}