/* ================================================================
   MOBILE v3 — MD Micro Services
   Remplace ENTIEREMENT l'ancien css/mobile.css par ce fichier.
   Ne modifie RIEN au-dessus de 767px : le rendu PC reste identique.
   v3 = v2 + :
   - contenu principal AVANT la sidebar (coordonnees/horaires apres)
   - footer : neutralisation du display:flex inline
     (les colonnes Prestations/Zones s'empilent vraiment)
   ================================================================ */

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

  /* ---------- 1. GARDE-FOU GLOBAL ---------- */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  img, picture, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------- 2. CONTENEURS : du fixe au fluide ---------- */
  .home #container,
  #container,
  .home #header,
  .home #content,
  .home #footer,
  #footer,
  .home #wrap-container,
  #diapo,
  .bg-menu,
  .header-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .home #main,
  #main {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .home #main-inner,
  #main-inner {
    padding: 12px !important;
  }

  /* v3 : ORDRE D'AFFICHAGE MOBILE
     Sur PC la sidebar est a droite ; sur mobile, l'ordre du HTML
     la faisait passer AVANT le contenu commercial. On inverse :
     header -> contenu principal -> coordonnees/horaires/actus. */
  #container {
    display: flex !important;
    flex-direction: column !important;
  }
  #header  { order: 1 !important; }
  #main    { order: 2 !important; }
  #content { order: 3 !important; }

  /* Sidebar : empilee sous le contenu, fond image 258px remplace */
  .home #sidebar,
  #sidebar {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    background: #1B1B1B !important;
    box-sizing: border-box !important;
  }

  /* Les blocs internes de la sidebar (coordonnees, horaires, actus...)
     v2 : overflow hidden pour contenir les liens flottants et
     empecher le bandeau suivant de remonter par-dessus */
  .titre-sidebar,
  .titre-coordonnees,
  .titre-horaires,
  .titre-actualites,
  .titre-partenaires,
  #info,
  #horaires,
  #news,
  .box-pink {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    background-image: none !important;
    background-color: #1B1B1B !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* v2 : barres de liens bas de bloc — contenues, espacees, sans
     chevauchement avec le bandeau teal suivant */
  .bg-info-bottom,
  .bg-actu-bottom,
  .bg-time-bottom,
  .bg-photo-bottom {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    background-image: none !important;
    background-color: #1B1B1B !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 12px 15px 16px 15px !important;
    margin-bottom: 4px !important;
    border-bottom: 2px solid #007d84 !important;
  }
  .bg-info-bottom p,
  .bg-actu-bottom p,
  .bg-time-bottom p,
  .bg-photo-bottom p {
    margin: 0 !important;
  }
  .info-mail, .info-actu, .info-time, .info-photo {
    padding-left: 0 !important;
    float: left !important;
  }
  .info-plan {
    margin-right: 0 !important;
    float: right !important;
  }

  /* Bandeaux de titre : aplat teal a la place de l'image 258px */
  .custom-heading,
  .custom-heading2 {
    background: #007d84 !important;
    padding: 12px 15px !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
  }

  #info-inner, #info-inner2,
  #horaires-inner,
  #news-inner,
  #coordonnees-inner,
  #actualites-inner,
  #partenaires-inner {
    padding: 15px !important;
  }

  /* v2 : les paragraphes espaceurs du HTML (line-height:6px inline)
     etaient gonfles a 24px par la regle de lisibilite -> re-ecrases */
  #sidebar p[style*="line-height"],
  #main p[style*="line-height"] {
    line-height: 6px !important;
    font-size: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- 3. HEADER ---------- */
  .home #header,
  #header {
    height: auto !important;
    padding-bottom: 6px !important;
    position: relative !important;
  }

  #header-logo {
    margin: 10px 0 6px 0 !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
  }
  #header-logo img {
    display: inline-block !important;
    max-width: 92% !important;
  }

  /* v2 : icone TeamViewer epinglee en haut a droite,
     ne cree plus de trou dans le flux */
  .sitemap {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    float: none !important;
    margin: 0 !important;
    background: none !important;
    height: auto !important;
  }

  /* Slogans en position absolue 667px : repasses dans le flux */
  #header .txt-slogan,
  #header .txt-slogan2,
  #header .txt-slogan3,
  #header .txt-slogan4,
  .txt-slogan {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    background-image: none !important;
  }

  .scroll-container {
    margin-top: 0 !important;
  }

  /* Decor inutile sur mobile */
  .orhidee,
  .flashmusic {
    display: none !important;
  }

  .teamviewer-options {
    width: auto !important;
    max-width: 92vw !important;
    right: -5px !important;
  }
  .teamviewer-options ul li {
    padding: 14px 15px !important;
  }

  /* ---------- 4. MENU PRINCIPAL ---------- */
  .bg-menu {
    height: auto !important;
    padding: 6px 0 !important;
  }

  .header-menu {
    height: auto !important;
    margin-top: 0 !important;
  }

  .header-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .header-menu li {
    float: none !important;
    background-image: none !important;
    padding: 0 !important;
  }

  .header-menu li a {
    display: block !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }

  /* ---------- 5. LISIBILITE (seniors : 16px minimum) ---------- */
  body {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  #main p, #main li, #main span, #main td, #main strong, #main a,
  #sidebar p, #sidebar li, #sidebar span, #sidebar strong, #sidebar a,
  #footer p, #footer li, #footer span, #footer a,
  footer p, footer li, footer span, footer a,
  .paragraph-text p, .paragraph-text span,
  .news-text p, .news-text span,
  .zones li, .zones a, .zones h2, .zones-text,
  .prestations li, .prestations a,
  .list-item, .list-item h2, .list-item span,
  .title-blue {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  #main h1, #main h1 span {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  #main, #main p, .paragraph-text, .news-text,
  .ligne2, .ligne3, .ligne3b, .ligne4a,
  .gallery-text, #gallery-detail .gallery-text {
    text-align: left !important;
  }

  /* ---------- 6. BLOC SERVICES (3 colonnes -> empilees) ---------- */
  .container {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bg-letruc-top {
    width: 100% !important;
    position: static !important;
    height: auto !important;
    background-image: none !important;
    background-color: #007d84 !important;
  }

  .services {
    flex-direction: column !important;
    padding-top: 15px !important;
  }

  .column,
  .column:first-child,
  .column:nth-child(2),
  .column:last-child {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  .services li {
    margin-bottom: 12px !important;
    font-size: 16px !important;
  }

  /* Bandeau titre central 723px en dur (div inline sur l'index) */
  .paragraph.images-left > div[style],
  .content-management div[style*="723px"] {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    background-image: none !important;
    background-color: #007d84 !important;
    height: auto !important;
  }

  /* v2 : QR code / visuels d'intro plafonnes et centres */
  .paragraph-images {
    float: none !important;
    margin: 0 auto 12px auto !important;
    text-align: center !important;
  }
  .paragraph-images img,
  .img {
    float: none !important;
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
  }

  /* ---------- 7. TABLEAUX (tarifs, plan, contenus) ---------- */
  #page-tarifs table,
  #page-plan table,
  .myTable,
  .gallery-text table {
    width: 100% !important;
    table-layout: auto !important;
  }

  #page-tarifs .ligne-grise-centre,
  #page-tarifs .ligne-foncee-centre,
  #page-plan .ligne-grise-centre,
  #page-plan .ligne-foncee-centre,
  #page-tarifs .titre,
  #page-plan .titre {
    width: auto !important;
    height: auto !important;
    min-height: 37px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  #page-tarifs .ligne-grise-droite,
  #page-tarifs .ligne-foncee-droite {
    width: auto !important;
    height: auto !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  #page-tarifs .ligne-grise-gauche,
  #page-tarifs .ligne-foncee-gauche,
  #page-plan .ligne-grise-gauche,
  #page-plan .ligne-foncee-gauche,
  .ligne5a, .ligne5c {
    width: 4px !important;
  }

  .ligne5b {
    width: auto !important;
    font-size: 15px !important;
  }

  #page-tarifs form .select-dist,
  #page-tarifs form .dist2 {
    width: 100% !important;
  }

  .kaspersky-comparison {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ---------- 8. CARTE, GALERIES, CAROUSEL ---------- */
  .map-container {
    width: 100% !important;
    height: 420px !important;
  }

  .gallerylist .gallery,
  .gallerylist .gallery2,
  .gallerylist.selection .gallery {
    width: 100% !important;
    height: auto !important;
    margin-right: 0 !important;
    padding-bottom: 10px !important;
  }
  .details, .details2 {
    width: auto !important;
    float: none !important;
  }
  .gallerylist .gallery-title {
    height: auto !important;
  }

  #gallery-detail .gallery-text,
  #gallery-detail.soins {
    width: 100% !important;
  }

  #partner-list {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* ---------- 9. FORMULAIRES ---------- */
  .form1 {
    width: 100% !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }
  .form1 .field label {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    font-size: 16px !important;
  }
  .form1 .field .input1,
  .form1 .field .select1 {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 16px !important;
  }
  .form1 .field textarea.input1 {
    height: 140px !important;
    line-height: 1.4 !important;
  }
  .form1 .field .captcha1 {
    float: none !important;
    padding-right: 0 !important;
    width: auto !important;
  }
  .form1 .buttons {
    padding-left: 0 !important;
  }
  .form1 .buttons .button1 {
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  /* ---------- 10. MODALES ---------- */
  .modal-content {
    margin: 20% auto !important;
    width: 92% !important;
    max-width: 92% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
  }
  #video-modal .modal-content {
    width: 92% !important;
  }
  #video-modal video {
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- 11. FOOTER ----------
     v2 : cible AUSSI la balise <footer> (pas seulement #footer),
     c'est elle qui contient les listes Prestations / Zones */
  #footer,
  footer {
    background-image: none !important;
    background-color: #101010 !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Colonnes du footer posees en inline style (width:60% etc.)
     -> empilees en pleine largeur */
  #footer div[style*="width"],
  footer div[style*="width"] {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 0 10px 0 !important;
  }

  /* v3 : le HTML contient un <div style="display:flex..."> qui
     maintenait Prestations/Zones cote a cote -> on le neutralise */
  footer div[style*="flex"],
  #footer div[style*="flex"] {
    display: block !important;
  }

  #footer .box1,
  #footer .box2,
  footer .box1,
  footer .box2 {
    float: none !important;
    text-align: left !important;
  }

  /* Menu du footer : liens en ligne, retour naturel */
  .menu li {
    float: none !important;
    display: inline !important;
  }

  #made-by {
    float: right !important;
    margin: 4px 0 !important;
  }

  #copyright {
    clear: both !important;
    padding: 6px 0 !important;
  }

  .zones li, .prestations li {
    margin-bottom: 12px !important;
  }
  .zones h3, .prestations h3,
  footer h3 {
    font-size: 17px !important;
    margin: 14px 0 8px 0 !important;
  }
}