/* Pasivite 2.8.52.53 — couche finale de cohérence visuelle PWA.
 * Chargée en dernier uniquement en contexte mobile/PWA.
 * Objectifs : lisibilité, absence de mots cassés, cartes auto-dimensionnées,
 * navigation stable, contrôles tactiles et protection contre les débordements.
 */

body.mobile-mode.pwa-app-shell{
  --pwa53-inline:clamp(10px,3.2vw,16px);
  --pwa53-gap:clamp(8px,2.8vw,12px);
  --pwa53-radius:14px;
  overflow-x:hidden!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.mobile-mode.pwa-app-shell *,
body.mobile-mode.pwa-app-shell *::before,
body.mobile-mode.pwa-app-shell *::after{
  box-sizing:border-box;
  min-width:0;
}

/* Aucun libellé d'interface ne doit être coupé arbitrairement au milieu d'un mot. */
body.mobile-mode.pwa-app-shell :is(
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,summary,
  a,button,strong,b,small,span,.badge,.pill,.tag,.chip
){
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
}

body.mobile-mode.pwa-app-shell :is(h1,h2,h3,h4,h5,h6,strong,b,button,.primary-button,.secondary-button){
  text-wrap:balance;
}

body.mobile-mode.pwa-app-shell :is(p,li,small,label,dd){
  text-wrap:pretty;
}

body.mobile-mode.pwa-app-shell :is(img,svg,video,canvas,iframe){
  max-width:100%;
}

body.mobile-mode.pwa-app-shell :is(.page-shell,.senior-shell,.form-shell,.public-shell,.mobile-app-main,.mobile-home-v473,.mobile-pro-home-v370,.professional-guidance-page,.professional-maturity-page,.promise-decoder-page){
  width:100%!important;
  max-width:100%!important;
}

body.mobile-mode.pwa-app-shell .mobile-app-main{
  overflow:visible!important;
  padding-left:var(--pwa53-inline)!important;
  padding-right:var(--pwa53-inline)!important;
  padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
}

/* Barre de mode : visible, compacte, sans chevauchement. */
body.mobile-mode.pwa-app-shell .mobile-global-mode-bar{
  position:relative!important;
  z-index:30!important;
  width:100%!important;
  margin:0!important;
  padding:6px max(var(--pwa53-inline),env(safe-area-inset-right)) 7px max(var(--pwa53-inline),env(safe-area-inset-left))!important;
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid #edf2f5!important;
  border-bottom:1px solid #e1e9ee!important;
  box-shadow:0 4px 12px rgba(18,53,91,.04)!important;
}
body.mobile-mode.pwa-app-shell .mobile-mode-switcher-global{
  width:100%!important;
  min-height:40px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
body.mobile-mode.pwa-app-shell .mobile-mode-switcher-global>*{
  min-width:0!important;
  min-height:40px!important;
  padding:7px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-size:.76rem!important;
  line-height:1.15!important;
  white-space:normal!important;
}

/* Cartes et listes : hauteur pilotée par le contenu, jamais par une valeur fixe. */
body.mobile-mode.pwa-app-shell :is(
  .pv-list>a,.pv-list>button,.pv-card,.public-card,.senior-card,.info-card,.action-card,
  .mobile-situation-list>a,.mobile-quick-grid>a,.mobile-pro-launch-grid>a,.mobile-pro-value-card,
  .observatory-card,.alert-card,.news-card,.kit-card,.reflex-card,.professional-guidance-options>a,
  .professional-guidance-options>button
){
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body.mobile-mode.pwa-app-shell :is(.pv-list,.card-grid,.cards-grid,.action-grid,.mobile-action-pair,.mobile-situation-list){
  width:100%!important;
  max-width:100%!important;
}

/* Formulaires : jamais deux champs écrasés côte à côte sur téléphone. */
body.mobile-mode.pwa-app-shell :is(input,select,textarea){
  max-width:100%!important;
  font-size:max(16px,.8rem)!important; /* évite le zoom automatique iOS */
}
body.mobile-mode.pwa-app-shell :is(.form-row,.form-grid,.field-grid,.fields-grid,.two-columns,.two-col,.grid-2,.grid-two){
  min-width:0;
}
body.mobile-mode.pwa-app-shell :is(.primary-button,.secondary-button,.ghost-button,.danger-button,button,[role="button"]){
  height:auto!important;
  min-height:44px!important;
  max-width:100%!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
  line-height:1.2!important;
  white-space:normal!important;
}

/* Boussole Pro — correction structurelle du cas réel remonté sur iPhone. */
body.mobile-mode.pwa-app-shell .professional-guidance-step-head{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  width:100%!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-step-head>span{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:grid!important;
  place-items:center!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-step-head>div{
  min-width:0!important;
  width:100%!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-step-head strong,
body.mobile-mode.pwa-app-shell .professional-guidance-step-head small{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-options{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  width:100%!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-options>a,
body.mobile-mode.pwa-app-shell .professional-guidance-options>button{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 30px!important;
  grid-template-rows:auto auto!important;
  grid-template-areas:"pg-title pg-arrow" "pg-desc pg-arrow"!important;
  align-items:center!important;
  column-gap:10px!important;
  row-gap:4px!important;
  width:100%!important;
  padding:13px 14px!important;
  text-align:left!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-options>a>strong,
body.mobile-mode.pwa-app-shell .professional-guidance-options>button>strong{
  grid-area:pg-title!important;
  display:block!important;
  width:100%!important;
  font-size:clamp(1rem,5vw,1.12rem)!important;
  line-height:1.18!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-options>a>small,
body.mobile-mode.pwa-app-shell .professional-guidance-options>button>small{
  grid-area:pg-desc!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  font-size:clamp(.76rem,3.9vw,.88rem)!important;
  line-height:1.35!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-options>a>b,
body.mobile-mode.pwa-app-shell .professional-guidance-options>button>b{
  grid-area:pg-arrow!important;
  align-self:center!important;
  justify-self:end!important;
  width:30px!important;
  text-align:center!important;
  font-size:1.45rem!important;
  line-height:1!important;
}

/* Résultats Boussole : pas de colonnes étroites. */
body.mobile-mode.pwa-app-shell :is(.maturity-grid,.maturity-summary-grid,.professional-guidance-result-grid,.professional-guidance-actions){
  grid-template-columns:1fr!important;
}
body.mobile-mode.pwa-app-shell .professional-guidance-actions{
  display:grid!important;
  gap:8px!important;
}

/* Observatoire / alertes / actualités : titre et métadonnées doivent respirer. */
body.mobile-mode.pwa-app-shell :is(.observatory-card,.observatory-item,.alert-card,.alert-item,.news-card,.news-item){
  min-width:0!important;
  width:100%!important;
}
body.mobile-mode.pwa-app-shell :is(.observatory-card,.observatory-item,.alert-card,.alert-item,.news-card,.news-item) :is(h2,h3,strong,a,p,small){
  max-width:100%!important;
}

/* Raccourci Observatoire Pro explicite. */
body.mobile-mode.pwa-app-shell .mobile-pro-observatory-shortcut{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 22px!important;
  gap:10px!important;
  align-items:center!important;
  margin:10px 0!important;
  padding:12px!important;
  border:1px solid var(--pwa-line-strong,#c8d7df)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--pwa-primary,#12355B)!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
body.mobile-mode.pwa-app-shell .mobile-pro-observatory-shortcut>span:first-child{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  background:var(--pwa-accent-soft,#e9f7f4)!important;
  color:var(--pwa-accent-dark,#187F7A)!important;
  font-weight:900!important;
}
body.mobile-mode.pwa-app-shell .mobile-pro-observatory-shortcut strong{display:block!important;font-size:.84rem!important;line-height:1.2!important}
body.mobile-mode.pwa-app-shell .mobile-pro-observatory-shortcut small{display:block!important;margin-top:2px!important;font-size:.69rem!important;line-height:1.3!important}
body.mobile-mode.pwa-app-shell .mobile-pro-observatory-shortcut>b{width:22px!important;text-align:right!important;font-size:1.2rem!important}

/* Barre basse : 5 zones égales, texte centré, aucune coupure verticale. */
body.mobile-mode.pwa-app-shell .mobile-bottom-nav{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  width:100%!important;
  max-width:100%!important;
  padding-left:max(4px,env(safe-area-inset-left))!important;
  padding-right:max(4px,env(safe-area-inset-right))!important;
}
body.mobile-mode.pwa-app-shell .mobile-bottom-nav>a{
  min-width:0!important;
  padding-left:2px!important;
  padding-right:2px!important;
  overflow:visible!important;
}
body.mobile-mode.pwa-app-shell .mobile-bottom-nav>a :is(span,small,strong){
  max-width:100%!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-align:center!important;
}

/* Le chatbot reste au-dessus de la barre basse sans masquer une carte. */
body.mobile-mode.pwa-app-shell .psv-chatbot:not(.is-open),
body.mobile-mode.pwa-app-shell .psv-chatbot.psv-chatbot-positioned:not(.is-open){
  position:fixed!important;
  left:auto!important;
  top:auto!important;
  right:max(10px,env(safe-area-inset-right))!important;
  bottom:calc(94px + env(safe-area-inset-bottom))!important;
  z-index:930!important;
  max-width:48px!important;
}
body.mobile-mode.pwa-app-shell .psv-chatbot:not(.is-open) .psv-chatbot-launcher{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  padding:0!important;
  border-radius:999px!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.mobile-mode.pwa-app-shell .psv-chatbot:not(.is-open) .psv-chatbot-launcher-label{display:none!important}
/* Sur les vues internes, le bouton flottant ne masque plus le contenu : l'assistant est dans le menu hamburger. */
body.mobile-mode.pwa-app-shell:not(.pwa-route-mobile):not(.pwa-route-mobile-pro):not(.pwa-route-mobile-perso) .psv-chatbot:not(.is-open){
  display:none!important;
}

@media (max-width:760px){
  body.mobile-mode.pwa-app-shell :is(.form-row,.form-grid,.field-grid,.fields-grid,.two-columns,.two-col,.grid-2,.grid-two,.maturity-grid,.maturity-summary-grid){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:var(--pwa53-gap)!important;
  }
  body.mobile-mode.pwa-app-shell :is(.mobile-dashboard-head,.mobile-pro-compact-head){
    max-width:100%!important;
  }
}

@media (max-width:430px){
  body.mobile-mode.pwa-app-shell .mobile-app-main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.mobile-mode.pwa-app-shell .professional-guidance-options>a,
  body.mobile-mode.pwa-app-shell .professional-guidance-options>button{
    padding:12px!important;
    grid-template-columns:minmax(0,1fr) 26px!important;
    column-gap:8px!important;
  }
  body.mobile-mode.pwa-app-shell .professional-guidance-options>a>b,
  body.mobile-mode.pwa-app-shell .professional-guidance-options>button>b{
    width:26px!important;
  }
  body.mobile-mode.pwa-app-shell .mobile-bottom-nav>a :is(span,small,strong){
    font-size:clamp(.55rem,2.9vw,.68rem)!important;
    line-height:1.05!important;
  }
}

@media (max-width:340px){
  body.mobile-mode.pwa-app-shell .professional-guidance-step-head{
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:9px!important;
  }
  body.mobile-mode.pwa-app-shell .professional-guidance-step-head>span{
    width:36px!important;height:36px!important;min-width:36px!important;
  }
  body.mobile-mode.pwa-app-shell .mobile-bottom-nav>a :is(span,small,strong){
    font-size:.54rem!important;
  }
}