#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;
}
#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,
    #btn-cLast2          { display: inline-block !important; }

    /* 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; }
}

/* ══ 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; }
    #navTop .navbar-form         { margin-top: 4px; margin-bottom: 4px; }

    /* 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;
}
.nav-item-wide  { flex: 2; text-align: left; padding-left: 6px; white-space: normal; }
.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 */
    #pgServices #cSecond #main {
        text-align: center;
        display: block;
        width: 100%;
    }
    #pgServices #cSecond #main .img-service {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 8px auto;
    }
    /* 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; }
}