/* ============================================================
   Giri Soins Builder — Mobile Ergonomics v1
   2026-06-15 — Maha
   Objectifs : épurer ≤768px (bottom-nav, FAB off, sous-titres
   masqués, header allégé, pickers compacts, sauvegarde discrète)
   ============================================================ */

@media (max-width: 768px) {

  /* === 1) (Bottom-nav supprimee 2026-06-15 — hamburger menu suffit) === */

  /* === 2) FAB OFF en mobile (la bottom-nav le remplace) === */
  #gs-fab-wrap { display: none !important; }

  /* === 3) Sous-titres descriptifs cachés (titre seul suffit) === */
  .gs-card-subtitle { display: none !important; }
  /* On garde les sous-titres dans les modals/sections critiques via opt-in :
     ajouter .keep-subtitle si besoin */
  .gs-card-subtitle.keep-subtitle { display: block !important; }

  /* === 4) Header allégé : nom prénom suffit, plus de badges premium au-dessus de la fold === */
  .gs-sidebar-header p { font-size: .78rem; line-height: 1.35; }

  /* === 5) Pickers couleurs/thèmes plus compacts === */
  .gs-picker-circle { width: 34px !important; height: 34px !important; }
  .gs-pickers-row { gap: 8px !important; }
  .gs-picker-item { min-width: 54px !important; }
  .gs-picker-item span { font-size: .60rem !important; }

  /* === 6) Sauvegarde silencieuse : indicateur ultra-discret === */
  #gs-autosave-indicator {
    opacity: .45 !important;
    border: none !important;
    background: transparent !important;
    padding: 4px 6px !important;
  }
  #gs-autosave-indicator.saving { opacity: .85 !important; }

  /* === 7) Header publish-bar : plus compact, "Voir ma vitrine" moins prioritaire === */
  .gs-publish-bar {
    padding: 10px 12px 10px 60px !important;
  }
  .gs-publish-bar > a[href^="/soins/"] {
    padding: 7px 12px !important;
    font-size: .76rem !important;
  }

  /* === 8) Suppression emojis décoratifs des titres cards (laisser le texte uniquement) === */
  /* On masque les premiers caractères pictos via attribut data-no-emoji injecté en JS */
  .gs-card-title.mobile-clean::first-letter { font-size: 0; visibility: hidden; }

  /* === 9) Sections plus aérées / cards moins lourdes === */
  .gs-card {
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
  .gs-card-header { margin-bottom: 8px !important; }
  .gs-card-title { font-size: .98rem !important; }

  /* === 10) Sidebar nav repliée par défaut : la bottom-nav la rend secondaire === */
  /* (la sidebar reste accessible via burger pour les onglets Réglages/Plus) */

  /* === 11) Onglets nav mobiles : sous-textes "tier" cachés (déjà via tierBadge='') === */
  .gs-nav-badge-tier { display: none !important; }

  /* === 12) Boutons inutiles cachés sur mobile === */
  .gs-mobile-hide { display: none !important; }

  /* === 13) Inputs touch-friendly (≥44px) === */
  .gs-input, .gs-select, .gs-textarea, input.gs-input, select.gs-select, textarea.gs-textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* iOS no auto-zoom */
  }
  textarea.gs-textarea { min-height: 88px !important; }

  /* === 14) Boutons primaires plus grands au pouce === */
  .gs-btn-primary { min-height: 44px !important; padding: 10px 18px !important; }

}


/* ============================================================
   FIX BURGER CHEVAUCHE SIDEBAR-HEADER 2026-06-15
   Quand le drawer mobile est ouvert, le burger reste fixé top-left
   et chevauchait "Giri Soins / Brice Piltover / Premium".
   On pousse le contenu sous le burger via padding-top sur le header.
   ============================================================ */
/* ============================================================
   CROIX FERMETURE DRAWER MOBILE 2026-06-15
   - Burger CACHE quand drawer ouvert (plus de doublon)
   - Petite croix en haut a droite DANS le drawer pour le refermer
   - Visible uniquement mobile (≤880px)
   ============================================================ */
.gs-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(184,148,74,.10);
  border: 1px solid rgba(184,148,74,.30);
  color: var(--text-primary, #f0ece4);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: background .18s, transform .15s, border-color .18s;
  z-index: 5;
}
.gs-sidebar-close:hover {
  background: rgba(184,148,74,.20);
  border-color: rgba(184,148,74,.55);
}
.gs-sidebar-close:active { transform: scale(.92); }
.gs-sidebar-close svg { width: 18px; height: 18px; display: block; }
/* [FIX-DESKTOP 2026-06-15] position:relative scopé mobile uniquement (ne casse plus le layout desktop) */

@media (max-width: 880px) {
  /* Burger DISPARAIT quand drawer ouvert */
  body.gs-mobile-nav-open .gs-mobile-burger {
    display: none !important;
  }
  /* Croix apparait dans le drawer mobile */
  body.gs-mobile-nav-open .gs-sidebar-close {
    display: inline-flex !important;
  }
  /* Sidebar-header retrouve son padding normal */
  body.gs-mobile-nav-open .gs-sidebar-header {
    padding-top: 0 !important;
    padding-left: 20px !important;
    padding-right: 56px !important; /* espace pour la croix */
  }
  body.gs-mobile-nav-open .gs-sidebar-header h2,
  body.gs-mobile-nav-open .gs-sidebar-header p {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   NOTIFICATIONS MOBILE 2026-06-15
   - Cloche flottante (#gs-notif-bell) MASQUEE sur mobile
   - Bouton "Notifications" dans la sidebar (mobile uniquement)
   - Pastille rouge sur le burger quand notif > 0
   ============================================================ */
/* [BELL-COMPACT 2026-06-16] Cloche compacte 40x40, plus de rectangle "Notifications" */
/* [BELL-ALIGN-RIGHT 2026-06-16] Alignée bord droit, en phase avec items menu */
.gs-sidebar-notif-btn {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  padding: 0;
  align-self: flex-end;
  margin-right: 10px;
  margin-bottom: 8px;
  background: rgba(184,148,74,.06);
  border: 1px solid rgba(184,148,74,.18);
  border-radius: 50%;
  color: var(--text-primary, #f0ece4);
  font-family: inherit;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.gs-sidebar-notif-btn:hover {
  background: rgba(184,148,74,.14);
  border-color: rgba(184,148,74,.38);
  transform: scale(1.04);
}
.gs-sidebar-notif-btn:active { transform: scale(.96); }
.gs-sidebar-notif-btn svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent, #b8944a); }
.gs-sidebar-notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: #ef4444; color: #fff;
  font-size: .65rem; font-weight: 700;
  display: inline-flex;
  align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg-card, #15110e);
}

/* Pastille rouge sur burger quand notifications non-lues */
/* [FIX-FIXED 2026-06-15] supprimé : position:relative écrasait position:fixed → burger scrollait. Pastille ::after fonctionne aussi avec position:fixed comme ancre. */
.gs-mobile-burger.has-notif::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--bg-card, #15110e);
  box-shadow: 0 0 0 1px rgba(239,68,68,.4), 0 0 8px rgba(239,68,68,.45);
  animation: gsNotifDot 1.8s ease-in-out infinite;
}
@keyframes gsNotifDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .85; }
}

@media (max-width: 768px) {
  /* Cloche flottante cachee mobile : on consulte via le hamburger */
  #gs-notif-bell { display: none !important; }
  /* Bouton sidebar visible mobile uniquement */
  .gs-sidebar-notif-btn { display: inline-flex !important; }
}

/* Desktop : la cloche flottante reste, et le bouton sidebar est cache (par default) */

/* ============================================================
   PUBLISH-BAR MOBILE 2026-06-15
   - Cacher toggle En ligne/Hors ligne + URL + copier + crayon en mobile
   - Garder uniquement "Voir ma vitrine"
   - Les controles deplaces vivent dans .gs-mobile-only (renderAccount)
   ============================================================ */
.gs-mobile-only { display: none; }

@media (max-width: 768px) {
  /* Cacher la partie info de la publish-bar (toggle + url + autosave + plan gratuit) */
  .gs-publish-info,
  #gs-autosave-indicator,
  .gs-publish-bar > div[style*="Plan gratuit"],
  .gs-publish-bar > div:has(> div[onclick*="_showUpgrade"]) {
    display: none !important;
  }
  /* Publish-bar compactee : centrer le bouton "Voir ma vitrine" */
  .gs-publish-bar {
    justify-content: flex-end !important;
    padding: 10px 14px !important;
    padding-left: 60px !important; /* burger reste a gauche */
  }
  /* Reactivation du bloc mobile-only dans renderAccount */
  .gs-mobile-only { display: block !important; }
}

/* [MOBILE-HIDE-STATS 2026-06-15] Cache les 3 cartes Demandes RDV / Messages / Soin le plus demandé sur smartphone — info dispo dans les onglets dédiés */
@media (max-width: 768px){
  .gs-ws-wrap, .gs-weekly-stats-skeleton { display: none !important; }
}

/* [MOBILE-PUBLISH-BAR-FLAT 2026-06-15] Retire le cadre clair derrière Voir ma vitrine — invisible/transparent sur smartphone */
@media (max-width: 768px){
  .gs-publish-bar{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 0 56px !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
    min-height: 36px;
  }
}

/* [MOBILE-CENTER 2026-06-15] Ignorer le burger pour le centrage : on ne réserve plus d'espace à gauche, le contenu redevient symétrique.
   - Le burger reste fixed top-left en overlay
   - On laisse simplement assez de padding-top sur .gs-main pour que le titre H1 ne passe pas sous le burger */
@media (max-width: 768px){
  /* Plus aucun décalage gauche : on neutralise les padding-left: 56-64px hérités */
  .gs-publish-bar{
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }
  /* Espace en haut pour que le premier H1/titre ne soit pas masqué par le burger fixed (44px + 14px top + marge) */
  .gs-main{
    padding-top: 64px !important;
  }
  /* Quand le drawer est ouvert le burger disparait → on peut retirer le padding-top extra
     (drawer prend tout l'écran, plus d'overlap à gérer) */
  body.gs-mobile-nav-open .gs-main{
    padding-top: 20px !important;
  }
}

/* [MOBILE-FULLWIDTH 2026-06-15] Reset nucléaire : force tout le contenu à occuper la pleine largeur du viewport mobile, symétriquement. Burger reste overlay (n'influence plus aucune mise en page). */
@media (max-width: 768px){
  html, body { width:100% !important; max-width:100vw !important; overflow-x: hidden; margin:0 !important; padding:0 !important; }
  .gs-dashboard { width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }
  .gs-main {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 64px 14px 24px 14px !important; /* top large pour passer sous le burger, gauche/droite égaux */
    box-sizing: border-box !important;
  }
  #gs-content, .gs-page-header { width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
  .gs-card { margin-left:0 !important; margin-right:0 !important; }
  /* Le burger reste fixed top-left mais ne réserve PLUS aucun espace */
  .gs-publish-bar { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* [MOBILE-NOFLEX 2026-06-15] Mobile : on retire display:flex de .gs-dashboard pour éviter toute redistribution.
   Burger reste fixed top-left, content commence à x=0 et y=0 (sauf padding intentionnel sur .gs-main).
   On retire le padding-top exagéré : le burger est petit, on lui laisse juste le coin top-left libre via padding-top compact. */
@media (max-width: 768px){
  .gs-dashboard{
    display: block !important;
  }
  .gs-main{
    padding: 12px 14px 24px 14px !important; /* compact top, le contenu commence juste sous la barre de status */
  }
  /* Si le titre H1 de la 1ère page chevauche le burger, on lui ajoute un padding-left juste assez pour le contourner.
     Mais uniquement quand c'est nécessaire — le contenu général (cards, formulaires) reste pleine largeur. */
  .gs-page-header > h1:first-child,
  .gs-page-header > div:first-child{
    padding-left: 52px !important; /* H1 contourne le burger */
  }
}

/* [MOBILE-VITRINE-RIGHT 2026-06-15] Bouton Voir ma vitrine aligné en haut à droite (mobile uniquement) */
@media (max-width: 768px){
  .gs-publish-bar{
    justify-content: flex-end !important;
  }
}

/* [MOBILE-VITRINE-FIXED 2026-06-15] Bouton Voir ma vitrine fixé en haut à droite, même niveau vertical que le burger (top:14px) */
@media (max-width: 768px){
  .gs-publish-bar > a[href^="/soins/"]{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 200 !important;
    margin: 0 !important;
  }
  /* La publish-bar redevient une coquille vide → on la réduit pour qu'elle ne prenne pas de place verticale */
  .gs-publish-bar{
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  /* Compense le padding-top en moins puisque la barre disparaît visuellement (le burger occupe seul le haut) */
  .gs-main{
    padding-top: 60px !important;
  }
}

/* [MOBILE-VITRINE-SHORT 2026-06-15] Texte raccourci Voir vitrine au lieu de Voir ma vitrine sur smartphone uniquement */
@media (max-width: 768px){
  .gs-publish-bar > a[href^=/soins/]{
    font-size: 0 !important; /* masque le texte original */
    gap: 5px !important;
    padding: 7px 12px !important;
  }
  .gs-publish-bar > a[href^=/soins/] svg{
    width: 13px !important;
    height: 13px !important;
  }
  .gs-publish-bar > a[href^=/soins/]::after{
    content: 'Voir vitrine';
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1px;
  }
}

/* [MOBILE-BLOG 2026-06-15] Optimisations onglet Blog smartphone uniquement (correction guillemets) */
@media (max-width: 768px){
  /* Header Blog */
  #gs-content > .gs-page-header[style*="justify-content:space-between"]{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  #gs-content > .gs-page-header[style*="justify-content:space-between"] > div:first-child h1{
    font-size: 1.35rem !important;
  }
  #gs-content > .gs-page-header[style*="justify-content:space-between"] > div:first-child p{
    font-size: .8rem !important;
  }
  #gs-content > .gs-page-header[style*="justify-content:space-between"] > button.gs-btn-primary{
    align-self: stretch !important;
    padding: 9px 14px !important;
    font-size: .85rem !important;
  }
  /* Barre de filtres : wrap propre + boutons compacts */
  #gs-content > div[style*="border-bottom:1px solid"][style*="flex-wrap:wrap"]{
    padding: 8px 0 10px !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  #gs-content > div[style*="border-bottom:1px solid"][style*="flex-wrap:wrap"] .gs-btn-sm{
    padding: 5px 10px !important;
    font-size: .72rem !important;
    border-radius: 7px !important;
  }
  #gs-content > div[style*="border-bottom:1px solid"] > div[style*="margin-left:auto"]{
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    padding-top: 4px !important;
    border-top: 1px dashed var(--border) !important;
    margin-top: 2px !important;
  }
  #gs-content > div[style*="border-bottom:1px solid"] > div[style*="margin-left:auto"]::before{
    content: 'Trier :';
    font-size: .68rem;
    color: var(--text-muted);
    align-self: center;
    margin-right: 4px;
    letter-spacing: .3px;
  }
  /* Cards d'articles : cover compact, meta condensée */
  #gs-blog-list > .gs-card{
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  #gs-blog-list > .gs-card > div[style*="display:flex"][style*="gap:16px"]{
    gap: 10px !important;
    align-items: flex-start !important;
  }
  #gs-blog-list > .gs-card img,
  #gs-blog-list > .gs-card > div > div[style*="width:80px"][style*="height:60px"]{
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
  }
  #gs-blog-list > .gs-card > div > div[style*="flex:1"] > div[style*="font-weight:500"]{
    font-size: .9rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #gs-blog-list > .gs-card > div > div[style*="flex:1"] > div[style*="font-size:.8rem"]{
    font-size: .74rem !important;
    margin-top: 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #gs-blog-list > .gs-card > div > div[style*="flex:1"] > div[style*="display:flex"][style*="gap:8px"]{
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 6px !important;
  }
  #gs-blog-list > .gs-card > div > div[style*="flex:1"] > div[style*="display:flex"][style*="gap:8px"] > span{
    font-size: .68rem !important;
  }
  #gs-blog-list > .gs-card > div > button.gs-btn-icon{
    width: 30px !important; height: 30px !important;
    font-size: .8rem !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
  }
  #gs-blog-list .gs-empty{ padding: 24px 16px !important; font-size: .82rem !important; }
  #gs-blog-list .gs-empty-icon{ font-size: 1.6rem !important; margin-bottom: 6px !important; }
  /* Éditeur */
  #gs-blog-editor .gs-card{ padding: 14px !important; }
  #gs-blog-editor .gs-card-header{ flex-wrap: wrap !important; gap: 8px !important; }
  #gs-blog-editor .gs-input, #gs-blog-editor .gs-textarea{ font-size: .9rem !important; padding: 9px 11px !important; }
  #gs-rte-toolbar{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 5px 6px !important;
  }
  #gs-rte-toolbar::-webkit-scrollbar{ height: 0 !important; }
  #gs-rte-toolbar .gs-rte-btn{
    flex-shrink: 0 !important;
    padding: 5px 9px !important;
    font-size: .82rem !important;
  }
}

/* ===== MOBILE-RDV v2 — onglet Rendez-vous smartphone (scopé via #gs-rdv-root) ===== */
@media (max-width: 768px){
  /* Stats 3 cartes compactes */
  #gs-rdv-root .gs-grid.gs-grid-3 > .gs-card{
    padding: 10px 6px !important;
  }
  #gs-rdv-root .gs-grid.gs-grid-3 > .gs-card > div:first-child{
    font-size: 1.5rem !important;
    line-height: 1.1 !important;
  }
  #gs-rdv-root .gs-grid.gs-grid-3 > .gs-card > div:last-child{
    font-size: .7rem !important;
    line-height: 1.15 !important;
  }

  /* Disponibilités : 7 jours sur 1 ligne lisible */
  #gs-rdv-root #gs-avail-grid > div{
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }
  #gs-rdv-root #gs-avail-grid > div > label{
    width: 70px !important;
    font-size: .82rem !important;
    flex-shrink: 0 !important;
  }
  #gs-rdv-root #gs-avail-grid > div > input[type="time"]{
    width: 88px !important;
    font-size: .85rem !important;
    padding: 6px 4px !important;
  }
  #gs-rdv-root #gs-avail-grid > div > span{
    font-size: .8rem !important;
  }

  /* Form jours bloqués : inputs pleine largeur empilés */
  #gs-rdv-root .gs-card > div[style*="align-items:flex-end"]{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  #gs-rdv-root .gs-card > div[style*="align-items:flex-end"] > div,
  #gs-rdv-root .gs-card > div[style*="align-items:flex-end"] > button{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Liste RDV à venir + historique : rows verticales compactes */
  #gs-rdv-root .gs-card > div[style*="border-bottom:1px solid var(--border)"]{
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }
  #gs-rdv-root .gs-card > div[style*="border-bottom:1px solid var(--border)"] > div[style*="flex:1"]{
    flex: 1 1 100% !important;
  }
  #gs-rdv-root .gs-card > div[style*="border-bottom:1px solid var(--border)"] > div:last-child{
    margin-left: auto !important;
  }
}

/* [MOBILE-RDV-STATS-3COL 2026-06-15] Force les 3 cartes stats RDV côte à côte sur smartphone */
@media (max-width: 768px){
  #gs-rdv-root .gs-grid.gs-grid-3{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  #gs-rdv-root .gs-grid.gs-grid-3 > .gs-card{
    padding: 8px 4px !important;
    min-width: 0 !important;
  }
  #gs-rdv-root .gs-grid.gs-grid-3 > .gs-card > div:first-child{
    font-size: 1.3rem !important;
  }
  #gs-rdv-root .gs-grid.gs-grid-3 > .gs-card > div:last-child{
    font-size: .62rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* [MOBILE-MENU-OVER-VITRINE 2026-06-16] Quand le menu hamburger est ouvert sur mobile,
   le bouton 'Voir vitrine' (position:fixed z-index:200) doit passer DERRIÈRE le menu.
   On le masque le temps de l'ouverture (la sidebar est z-index:120 ; le burger lui-même
   reste apparent dans la sidebar via .gs-sidebar-close pour fermer). */
@media (max-width: 768px){
  body.gs-mobile-nav-open .gs-publish-bar > a[href^="/soins/"]{
    display: none !important;
  }
}

/* ============================================================
   [OFFLINE-BANNER-MOBILE 2026-06-22 Brice] bandeau "publier" :
   sur mobile on EMPILE (texte au-dessus, bouton pleine largeur dessous),
   texte non tronque. Remplace l'ancien forcage en ligne (row) de 2026-06-16.
   ============================================================ */
.gs-offline-banner{box-sizing:border-box}

@media (max-width: 640px){
  .gs-offline-banner{
    margin: 0 0 16px !important;
    padding: 15px 16px !important;
    gap: 12px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  .gs-offline-banner .gs-offline-banner-text{ flex: 1 1 auto !important; }
  .gs-offline-banner > button,
  .gs-offline-banner .gs-offline-banner-btn{
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: .92rem !important;
    min-height: 48px !important;
  }
}

@media (max-width: 380px){
  .gs-offline-banner{
    padding: 14px 14px !important;
    gap: 11px !important;
  }
  .gs-offline-banner > button,
  .gs-offline-banner .gs-offline-banner-btn{
    padding: 13px 18px !important;
    font-size: .9rem !important;
  }
}

/* ============================================================
   [POLISH-MOBILE 2026-06-16] — Photo & Banniere preview robuste +
   espace de fin de page pour eviter recouvrement par cookie banner +
   PWA install banner stackes au bas de l'ecran.
   ============================================================ */
@media (max-width: 768px){
  /* Reserver assez d'espace au bas de chaque tab pour que les bandeaux
     cookie (#gs-cookie-banner) + install PWA (#gs-pwa-banner) ne
     masquent jamais les derniers champs du formulaire. */
  .gs-main{
    padding-bottom: 200px !important;
  }
  /* Si seul le cookie est present (pas de pwa) suffit 140px ; on garde 200
     en defaut car peu coute. Quand un banner est dismiss ces classes
     remontent dynamiquement. */
  body:not(.gs-banner-active) .gs-main{
    padding-bottom: 140px !important;
  }
  body:not(.gs-banner-active):not(:has(#gs-pwa-banner)) .gs-main{
    padding-bottom: 80px !important;
  }

  /* Banniere preview : assurer une hauteur minimale meme image en cours
     de chargement / cassee, pour que le bouton "Remplacer"
     position:absolute reste sur l'image et ne deborde pas sur le label
     du champ suivant. */
  .gs-img-preview{
    min-height: 160px !important;
    background: rgba(255,255,255,.04) !important;
  }
  /* Avatar circulaire : verrouiller le ratio carre meme si l'image
     est en cours de chargement. */
  .gs-avatar-preview{
    aspect-ratio: 1/1 !important;
    width: 120px !important;
    height: 120px !important;
    min-height: 120px !important;
    flex-shrink: 0 !important;
  }
  /* Donner de l'air entre le label "Banniere" et la preview pour
     que le bouton "Remplacer" (absolute bottom 10) reste a l'interieur. */
  .gs-card .gs-form-group > div[style*="margin-bottom:10px"]{
    margin-bottom: 12px !important;
  }
  /* Bloc story / photo de profil dans la grille : centrer le contenu
     pour eviter qu'il ne pendouille a gauche apres collapse 2-cols → 1. */
  .gs-card .gs-grid-2 > div{
    text-align: left;
  }
  .gs-card .gs-grid-2 label[for="gs-photo-file-input"],
  .gs-card .gs-grid-2 > div > label.gs-form-group{
    display: block;
  }
}

/* [AUTOSAVE-PROFILE 2026-06-16] Sur smartphone, le bouton 'Sauvegarder mon profil' est superflu
   (sauvegarde automatique a chaque modification) — on masque aussi son wrapper droit-aligne */
@media (max-width: 768px){
  .gs-save-profile-btn{ display: none !important; }
  /* Le bouton etait dans un <div style='text-align:right;margin-top:24px'> */
  .gs-tab-content > div[style*='text-align:right'][style*='margin-top:24px']:has(.gs-save-profile-btn),
  .gs-tab-content > div[style*='text-align: right'][style*='margin-top: 24px']:has(.gs-save-profile-btn){
    display: none !important;
  }
}

/* [STYLE-SEP-SUB-HIDE 2026-06-16] Smartphone Mon Style : masquer les sous-titres descriptifs sous PARTIE 1 et PARTIE 2 (demande Maha) */
@media (max-width: 768px) {
  .gs-style-sep .gs-style-sep-sub, .gs-style-sep .gs-style-sep-title { display: none !important; }
}

/* [AUTOSAVE-ALLTABS 2026-06-16] Sur smartphone, masquer les boutons Sauvegarder
   des modales d'edition et formulaires globaux (autosave 1200ms debounce actif) */
@media (max-width: 768px){
  .gs-btn.gs-autosave-hide-mobile, button.gs-autosave-hide-mobile, .gs-autosave-hide-mobile{ display: none !important; }
  /* [FIX-CREATION-MOBILE 2026-06-23] En CREATION (modale sans autosave), le bouton Sauvegarder
     DOIT rester visible : sinon impossible de valider un nouveau soin/article/lien/temoignage sur mobile.
     L'autosave n'existe qu'en edition (.gs-autosave-modal) ; en creation il n'y a aucun autosave. */
  .gs-modal-overlay:not(.gs-autosave-modal) .gs-autosave-hide-mobile{ display: inline-flex !important; }
  .gs-modal-overlay:not(.gs-autosave-modal) .gs-modal-actions{ display: flex !important; gap: 10px !important; }
  .gs-modal-overlay:not(.gs-autosave-modal) .gs-modal-actions > .gs-btn{ flex: 1 1 0 !important; }
  /* [STICKY-MODAL-ACTIONS 2026-06-23] Pied d'actions collant en bas de modale sur mobile :
     le bouton Sauvegarder/Annuler reste toujours visible sans scroller (modale longue). */
  .gs-modal-overlay .gs-modal-actions{
    position: sticky !important; bottom: 0 !important;
    margin: 20px -32px -32px !important;
    padding: 14px 32px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border) !important;
    z-index: 3 !important;
  }
  .gs-autosave-modal .gs-modal-actions{ justify-content: stretch !important; }
  .gs-autosave-modal .gs-modal-actions > .gs-btn-secondary{ flex: 1 1 100% !important; width: 100% !important; }
}

/* [RDV-MOBILE 2026-06-16] Onglet Rendez-vous smartphone — la ligne disponibilites
   (label 100px + checkbox + input 120px + 'a' + input 120px ≈ 420px) debordait
   du viewport 390px. L'input time etait ecrase et le bouton 'Definir' du picker
   natif Android tronque a droite. */
@media (max-width: 768px){
  /* En-tete carte "Mes disponibilites" : wrap si le bouton Sauvegarder manque de place */
  #gs-rdv-root .gs-card-header{ flex-wrap: wrap; gap: 8px; }

  /* La ligne par jour passe en 2 niveaux : checkbox+label dessus, puis les 2 inputs */
  #gs-avail-grid > div{
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }
  #gs-avail-grid > div > input[type="checkbox"]{
    order: -2 !important;
    width: 22px; height: 22px;
    accent-color: var(--accent);
  }
  #gs-avail-grid > div > label{
    order: -1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--text-primary) !important;
  }
  /* [RDV-TIME-PICKER 2026-06-16] picker custom 2 selects HH+MM remplace input type=time */
  #gs-avail-grid > div{
    align-items: center !important;
  }
  #gs-avail-grid > div > .gs-time-picker:first-of-type{
    margin-top: 4px;
  }
  #gs-avail-grid > div > .gs-time-picker{
    flex: 1 1 auto !important;
    justify-content: center;
  }
  #gs-avail-grid > div > .gs-time-picker select{
    padding: 12px 8px !important;
    font-size: 1rem !important;
    min-width: 0 !important;
    background-color: var(--bg-card, var(--bg-surface));
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  #gs-avail-grid > div > span{
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: .95rem;
    padding: 0 4px;
  }

  /* Bloc "Jours bloques" : champs Date et Raison s'empilent proprement, bouton plein largeur */
  #gs-rdv-root .gs-card > div[style*="align-items:flex-end"],
  #gs-rdv-root .gs-card > div[style*="align-items: flex-end"]{
    flex-direction: column;
    align-items: stretch !important;
  }
  #gs-rdv-root .gs-card > div[style*="align-items:flex-end"] > button,
  #gs-rdv-root .gs-card > div[style*="align-items: flex-end"] > button{
    width: 100% !important;
    height: 48px !important;
  }
}


/* [PUBLISH-CTA-MOBILE 2026-06-22] "Publier ma vitrine" desormais integre au cadre (plus de banniere separee).
   Sur mobile le cadre info est masque : on garde le CTA en bouton pleine largeur propre, place sous le burger. */
@media (max-width: 768px){
  .gs-publish-bar:has(> .gs-publish-cta){
    padding: 0 !important;
    margin: 50px 0 14px 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: stretch !important;
  }
  .gs-publish-bar > .gs-publish-cta{
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    font-size: .9rem !important;
  }
}