/* ==========================================================================
   mobile.css — Overrides globaux mobile (≤ 956px)
   Charge CE FICHIER EN DERNIER
   ========================================================================== */


@media (max-width: 956px){

  /* ---------- Garde-fous généraux ---------- */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;         /* coupe tout débordement horizontal */
    -webkit-text-size-adjust: 100%;
  }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, iframe { max-width: 100%; height: auto; display: block; }

  body {
    min-height: 100svh;         /* hauteur écran fiable iOS/Android */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  .row { margin-left: 0 !important; margin-right: 0 !important; }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;   /* ✅ symétrie gauche/droite */
  }

  /*-----------Menu Tollge---------
.menu-wrap { position: relative; display: inline-block; }

.menu-toggle {
  font-size:22px;
  cursor:pointer;
  user-select:none;
}
/* ==== VISUEL COMMUN POUR TOUS LES MENUS ==== */
.menu-panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  min-width:230px;
  padding:8px 0;
}

/* Items (li custom OU .dropdown-item Bootstrap) */
.menu-panel > li,
.menu-panel .dropdown-item{
  padding:12px 18px;
  font-size:16px;
  line-height:1.25;
  white-space:nowrap;
}

.menu-panel > li + li,
.menu-panel .dropdown-item + .dropdown-item{
  border-top:1px solid #f1f1f1;
}

.menu-panel a{ color:inherit; text-decoration:none; display:block; }

/* ==== MENU “BURGER” CUSTOM ==== */
.menu-wrap{ position:relative; }
.dropdown-menu-custom{
  position:absolute;
  top:calc(100% + 8px);
  right:0;                 /* ← fini le -180px */
  list-style:none;
  margin:0;
  display:none;            /* fermé par défaut */
  z-index:1100;
  cursor: pointer;
}
.dropdown-menu-custom.is-open{ display:block; }

/* Sous-menu admin (inchangé) */
.has-submenu .submenu-toggle{
  width:100%; text-align:left; background:none; border:0;
  padding:.55rem 1rem; font-weight:400;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:#000;
}
.submenu{ list-style:none; margin:0; padding:0 0 .5rem 0; }
.submenu > li{ padding:.4rem 1rem .4rem 1.5rem; cursor:pointer; }
.submenu > li:hover{ background:#f8f9fa; }
.submenu[hidden]{ display:none; }

/* ==== MENU “?” BOOTSTRAP ==== */
.dropdown-menu.menu-panel{          /* on garde le comportement Bootstrap */
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  min-width:230px;
  padding:8px 0;
  cursor: pointer;
}

/* Sécurité : que rien ne coupe les menus */
.site-header, .header-actions, .menu-wrap, .dropdown{ overflow:visible; }
/*.dropdown-menu-custom {
  position:absolute; 
  top: calc(100% + 8px); 
  right: 0;              
  background:#fff;
  border:1px solid #dee2e6;
  border-radius:8px;
  list-style:none;
  padding:0;
  margin:0;
  width:230px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  display:none;
  z-index:1100;
}
.dropdown-menu-custom li {
  padding:12px 18px;
  border-bottom:1px solid #f1f1f1;
  cursor:pointer;
  font-size:15px;
}
.dropdown-menu-custom li:last-child { border-bottom:none; }
.dropdown-menu-custom li:hover { background:#f8f9fa; }*/

  /* ---------- Header ---------- */
  .lang-switch, .lang-btn { display: none; }
  .brand {
    display: flex; align-items: center; gap: 10px;
    width: auto; max-width: 100%;
  }

  /* ---------- HERO ---------- */
  .hero-title { font-size: 40px; }

  /* Chips : rangées centrées et espacées de façon homogène */
  .hero .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;    /* ✅ centrage horizontal des chips */
    gap: 8px 10px;              /* espace cohérent */
  }
  .chip {
    font-size: 12px;
    width: 110px;               /* tu peux passer en auto + padding si tu veux */
  }

  /* Barre de recherche : centrée, largeur cohérente */
  .searchbar {
    width: 100%;
    max-width: 640px;           /* limite confortable */
    margin: 0 auto;             /* ✅ centrage horizontal */
  }

  /* Bouton “Найти” : centré sous la barre */
  .btn-find {
    display: block;
    width: fit-content;         /* reste à sa largeur naturelle */
    margin: 16px auto 0;        /* ✅ parfaitement centré */
  }

  /* ---------- Steps (mobile) ---------- */
  .step-label{
    background: var(--c-white);
    color: var(--c-dark);
    font-weight: 700;
    font-size: clamp(13px, 2.6vw, 26px);
    padding: 14px 26px 14px 38px; /* pour chevauchement côté gauche */
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: var(--c-shadow);
    margin-left: -30px;
    z-index: 0;
  }

  /* tailles différentes pour chaque étape */
  .step:nth-child(1) .step-badge { width: 70px; height: 70px; font-size: clamp(41px, 5vw, 56px); }
  .step:nth-child(2) .step-badge { width: 90px; height: 90px; font-size: clamp(48px, 5.5vw, 64px);}
  .step:nth-child(3) .step-badge { width: 110px; height: 110px; font-size: clamp(52px, 6vw, 72px); }

  .step--left   { justify-self: start;  transform: translateX(0); }
  .step--right  { justify-self: end;    transform: translateX(0); }

  /* ❗️Supprime le décalage latéral au milieu (source d’asymétrie visuelle) */
  .step--center{
    justify-self: center;
    transform: translateY(12px);
    padding-left: 100px;            /* ✅ avant : 100px → crée l’effet “plus d’espace à gauche” */
  }

  /* ---------- Composants transverses ---------- */
  main, .main, .main1, .main2 {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    background: transparent !important;
    margin: 0 !important; padding: 0 !important;
    width: 100% !important; max-width: none !important;
  }

  .text-end { text-align: initial !important; }
  .text-end .btn { width: 100%; }

  .card, .card * { overflow-wrap: anywhere; word-break: break-word; }

  .card,
  .card.shadow-sm.p-3,
  .card.shadow-sm.p-3.avis-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    border-radius: 16px;
    box-sizing: border-box;
  }

 
  /*
  .profile-grid > * { min-width: 0; min-height: 0; }

  .big-photo { width: 100% !important; max-height: 400px; overflow: hidden; border-radius: 16px; }
  .big-photo img { width: 100% !important; height: auto !important; object-fit: cover; display: block; }

  .info-scroll, .vlist { max-height: none !important; overflow: visible !important; padding-right: 0 !important; }

  .vlist { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .vlist .vitem { width: 100%; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 21 / 9; }
  .vlist .vitem img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .bottom-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .card .d-flex.align-items-center { flex-direction: column !important; align-items: flex-start !important; gap: 6px; }
  .avis-card .d-flex.justify-content-between { flex-direction: column !important; align-items: flex-start !important; gap: 4px; }
  .avis-card .meta + div { overflow: hidden; display: block; line-height: 1.5; max-height: calc(1.5em * 3); }

  .big-photo, section.panel, aside.panel, .profile-grid, .bottom-grid, .card {
    position: static !important; float: none !important; transform: none !important;
    z-index: auto !important; margin-left: 0 !important; margin-right: 0 !important; clear: both !important;
  }*/

 /* ---------- PROFIL ---------- */
/* ---------- PROFIL (mobile) ---------- */
.profile-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;   /* ← empile en 1 colonne */
  grid-auto-rows: auto !important;
  gap: 16px !important;
}
.profile-grid.profile-top{ height: auto !important; }  /* annule clamp() s'il existe */
.profile-grid > * { min-width: 0; min-height: 0; }

/* annule les hauteurs "90%" du desktop */
.profile-grid .panel{ height: auto !important; }

.big-photo{
  width: 100% !important;
  height: auto !important;        /* ← annule le 90% */
  max-width: 100% !important;
  max-height: none !important;    /* évite la “fenêtre” grise */
  overflow: hidden;
  border-radius: 16px;
}
.big-photo img{
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
}

.info-scroll, .vlist{
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.vlist{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.bottom-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* les cartes doivent pouvoir rétrécir */
.card{ min-width: 0 !important; }
  
  
  /* ---------- LISTES / RÉSULTATS ---------- */
  .pro-list { gap: 16px !important; padding: 12px 0 24px !important; }
  .pro-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "photo" "info" "video" "cta" !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .pro-photo img { width: 100% !important; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
  .pro-info { padding: 0 !important; }
  .pro-video-col { width: 100% !important; display: block !important; }
  .pro-video, .pro-video.placeholder { width: 100%; aspect-ratio: 16 / 9; max-height: none; border-radius: 16px; overflow: hidden; background: #000; }
  .pro-cta-col { display: block !important; }
  .pro-cta { display: block; width: 100%; text-align: center; }

  /* ---------- FAVORIS ---------- */
  .praticien-card { display: block !important; }
  .praticien-card > div:first-child { margin-bottom: 12px; }
  .praticien-card .card-img-top { display: block; width: 100%; height: auto; border-radius: 12px; }
  .praticien-card > .card-body.p-0 { margin-bottom: 12px; min-width: 0; }
  .praticien-card .d-flex { display: flex; flex-direction: column; gap: 10px; }
  .praticien-card .d-flex .btn { width: 100%; justify-content: center; }

  /* ---------- Suggestions (autocomplete) ---------- */
  .suggest, #suggestions {
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    right: 0;                                     /* => même largeur que l'input */
    z-index: 2000;

    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 8px 0;
    margin: 0;

    max-height: 50vh;                             /* scrollable si long */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    width: auto !important;                       /* annule width:100% si besoin */
  }

  .suggest li, #suggestions li {
    list-style: none;
    padding: 12px 16px;
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 1.25;
    cursor: pointer;
  }
  .suggest li + li, #suggestions li + li { border-top: 1px solid #f3f4f6; }
  .suggest li:hover, #suggestions li:hover { background: #f8f9fa; }

  /* Largeurs figées à neutraliser en mobile */
  .pto-list { width: 100% !important; }

  /* Footer */
  .site-footer { font-size: 12px; }

}



/*---------Transformation table en cards-----------------------*
***************************************************************/
/* ===== TABLE -> CARTES (mobile) ===== */
@media (max-width: 768px){
  /* ✅ N’affiche pas THEAD tant que data-label n’est pas prêt */
  #table_rdv thead{ display: table-header-group; }
  .mc-ready #table_rdv thead{ display: none; }

  /* neutralise centrage hérité */
  #table_rdv, #table_rdv tr, #table_rdv td, #table_rdv td *{ text-align:left !important; }

  /* wrapper bootstrap */
  .table-responsive{ overflow: visible; }

  #table_rdv{
    width:100%; border:0; background:transparent;
    border-collapse:separate; border-spacing:0;
  }
  #table_rdv tbody{ display:block; }

  /* chaque ligne -> carte */
  #table_rdv tr{
    display:block; margin:12px 0; background:#fff;
    border:1px solid rgba(0,0,0,.06); border-radius:14px;
    box-shadow:0 6px 14px rgba(0,0,0,.08); overflow:hidden;
  }
  #table_rdv tr::before{
    content:""; display:block; height:3px; background:#38378B; opacity:.9;
  }

  /* cellules empilées */
  #table_rdv td{
    display:block; padding:10px 14px !important;
    background:transparent !important; border:none !important; box-sizing:border-box;
  }
  #table_rdv td + td{ border-top:1px dashed rgba(0,0,0,.08) !important; }

  /* libellés auto (et on masque s’ils sont vides) */
  #table_rdv td::before{
    content: attr(data-label);
    display:inline-block; min-width:120px; margin-right:8px;
    font-weight:600; color:#666;
  }
  #table_rdv td::before:empty{ display:none; }

  /* hiérarchie visuelle (adapte si ordre diffère) */
  #table_rdv td:nth-child(1){ font-size:16px; font-weight:700; letter-spacing:.2px; }
  #table_rdv td:nth-child(2){ color:#6b7280; font-weight:600; padding-top:6px; }

  /* select pleine largeur + iOS align */
  #table_rdv select.form-select{
    display:block; width:100%; height:40px; font-size:15px; border-radius:10px; margin:6px 0;
    text-align:left !important; text-align-last:left !important; -webkit-text-size-adjust:100%;
  }

  /* actions */
  #table_rdv .row-actions{
    display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;
    justify-content:flex-start !important; align-items:stretch !important;
  }
  #table_rdv .row-actions .btn{ flex:1 1 calc(50% - 4px); margin:0 !important; }

  /* neutralise utilitaires Bootstrap qui centrent */
  #table_rdv :is(.text-center,.text-sm-center,.text-md-center,.text-lg-center){ text-align:left !important; }
  #table_rdv :is(.mx-auto,.ms-auto,.me-auto){ margin-left:0 !important; margin-right:0 !important; }
  #table_rdv :is(.justify-content-center,.justify-content-sm-center,.justify-content-md-center,.justify-content-lg-center){
    justify-content:flex-start !important;
  }
  #table_rdv :is(.align-items-center){ align-items:flex-start !important; }

  /* retire les zébrures en mode carte */
  #table_rdv.table-striped > tbody > tr:nth-of-type(odd) > *{ background:transparent !important; }

  
}
/******************************FIN TABLES MOBILE********************************************/
@media (max-width: 576px) {
  /* Barre de recherche */
.searchbar{
  background:#fff; border-radius:999px; display:flex; align-items:center;
  gap:14px; padding:10px 14px; max-width:760px; margin:0 auto;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.search-icon{ margin-left:6px; }
.input-wrap{ position:relative; flex:1.3; }
.searchbar input{
  width:100%; border:none; outline:none; font-size: clamp(10px, 3vw, 16px); padding:10px 4px;
}
.divider{ width:1px; height:28px; background:#E6E6E6; }
}
.footer-top-links {
  color: #38378B;
  font-weight: 600;
}
.footer-top-links a {
  color: inherit; /* hérite du bleu foncé */
}

/* Fallback si le navigateur ne supporte pas gap */
@supports not (gap: 1rem) {
  .d-flex.gap-2 > * { margin-right: .5rem; }
  .d-flex.gap-3 > * { margin-right: 1rem; }
  .d-flex.gap-4 > * { margin-right: 1.5rem; }
  .d-flex[class*="gap-"] > *:last-child { margin-right: 0; }
}
.scrollable { -webkit-overflow-scrolling: touch; }

.fullheight { min-height: 100vh; }          /* défaut */
@supports (height: 100dvh) {
  .fullheight { min-height: 100dvh; }       /* iOS 16+ */
}
@supports not (height: 100dvh) {
  .fullheight { min-height: -webkit-fill-available; } /* iOS anciens */
}