/* Fallback autonome Observatoire PWA : contenu visible même si une feuille secondaire échoue. */
body.pwa-observatory-standalone{
  margin:0;
  padding:0;
  min-height:100%;
  background:#eef4f8;
  color:#15365d;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
.pwa-observatory-standalone .pwa-observatory-report{display:block;min-height:100vh}
.pwa-observatory-standalone .pwa-observatory-report__body{display:block}

/* Pasivite 2.8.52.56 — garde-fou structurel Web + PWA.
   But : aucune colonne ne doit se comprimer jusqu'à rendre le texte illisible.
   Cette feuille est chargée en dernier sur les vues utilisateur. */

/* 1. Socle : tous les composants utilisateur peuvent réellement rétrécir dans leur conteneur,
      sans créer de débordement horizontal ni de mots découpés lettre par lettre. */
.public-body .main-content,
body.mobile-mode .main-content,
.pwa-observatory-standalone,
.pro-pdf-pwa-standalone{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}

.public-body .main-content *,
body.mobile-mode .main-content *,
.pwa-observatory-standalone *,
.pro-pdf-pwa-standalone *{
  box-sizing:border-box;
}

.public-body .main-content :is(
  [class*="-grid"],[class*="-row"],[class*="-head"],[class*="-hero"],
  [class*="-panel"],[class*="-card"],[class*="-shell"],[class*="-actions"],
  section,article,form,fieldset,details
),
body.mobile-mode .main-content :is(
  [class*="-grid"],[class*="-row"],[class*="-head"],[class*="-hero"],
  [class*="-panel"],[class*="-card"],[class*="-shell"],[class*="-actions"],
  section,article,form,fieldset,details
){
  min-width:0;
  max-width:100%;
}

.public-body .main-content :is(
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,span,strong,small,label,summary,button,a,td,th
),
body.mobile-mode .main-content :is(
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,span,strong,small,label,summary,button,a,td,th
),
.pwa-observatory-standalone :is(h1,h2,h3,h4,p,li,span,strong,small,a,td,th),
.pro-pdf-pwa-standalone :is(h1,h2,h3,h4,p,li,span,strong,small,a,td,th){
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:none;
}

.public-body .main-content :is(pre,code,kbd,samp),
body.mobile-mode .main-content :is(pre,code,kbd,samp){
  max-width:100%;
  overflow-x:auto;
}

.public-body .main-content :is(img,video,canvas,svg,iframe),
body.mobile-mode .main-content :is(img,video,canvas,svg,iframe),
.pwa-observatory-standalone :is(img,video,canvas,svg,iframe),
.pro-pdf-pwa-standalone :is(img,video,canvas,svg,iframe){
  max-width:100%;
}

/* Les enfants d'une grille ne doivent jamais imposer une largeur minimale implicite. */
.public-body .main-content [class*="-grid"] > *,
body.mobile-mode .main-content [class*="-grid"] > *,
.pwa-observatory-standalone [class*="-grid"] > *,
.pro-pdf-pwa-standalone [class*="-grid"] > *{
  min-width:0;
}

/* 2. Observatoire : correction directe du défaut constaté en Web mobile.
      Avant 2.8.52.56, le bloc était un flex à trois enfants qui se comprimait
      jusqu'à afficher « Indice Pasivite » sur quelques caractères par ligne. */
.observatory-index-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "score"
    "explanation"
    "blockers";
  align-items:start;
  gap:8px;
}
.observatory-index-panel > div{
  grid-area:score;
  min-width:0;
}
.observatory-index-panel > p{
  grid-area:explanation;
  min-width:0;
}
.observatory-index-panel > small{
  grid-area:blockers;
  min-width:0;
  margin-top:0;
}
.observatory-index-panel > div :is(span,strong,small),
.observatory-index-panel > p,
.observatory-index-panel > small{
  word-break:normal!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
}

.observatory-quality-panel > *{
  min-width:0;
}

/* 3. Les lignes de titres/actions peuvent revenir à la ligne au lieu d'écraser le texte. */
:is(
  .section-heading,
  .observatory-section-head,
  .roadmap-section-head,
  .roadmap-identity-head,
  .sitecheck-human-heading,
  .sitecheck-human-card-head,
  .sitecheck-doc>div,
  .domain-hygiene-result-head,
  .professional-guidance-step-head,
  .psv-password-section-head,
  .contact-form-heading,
  .alerts-list-heading-v370,
  .mobile-library-head,
  .pro-report-section-head,
  .exposure-result-head,
  .reflex-row-meta
){
  min-width:0;
}

/* 4. Tableaux : ils restent lisibles sur écran étroit et ne poussent plus le viewport. */
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{
  min-width:100%;
  max-width:none;
}

/* 5. Assistant : en Web mobile, même compacité que dans la PWA.
      Le libellé long ne doit plus masquer la carte qu'on est en train de lire. */
@media(max-width:760px){
  body.public-body:not(.mobile-mode) .psv-chatbot{
    right:12px!important;
    left:auto!important;
    top:auto!important;
    bottom:12px!important;
    max-width:52px!important;
  }
  body.public-body:not(.mobile-mode) .psv-chatbot:not(.is-open) .psv-chatbot-launcher{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
    height:50px!important;
    min-height:50px!important;
    padding:0!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    gap:0!important;
  }
  body.public-body:not(.mobile-mode) .psv-chatbot:not(.is-open) .psv-chatbot-launcher-label{
    display:none!important;
  }
  body.public-body:not(.mobile-mode) .psv-chatbot:not(.is-open) .chat-launch-icon{
    margin:0!important;
  }
  body.public-body:not(.mobile-mode) .psv-chatbot-panel{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 96px)!important;
  }

  /* Observatoire Web et PWA : empilement explicite, jamais trois colonnes tassées. */
  .observatory-index-panel{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "score"
      "explanation"
      "blockers"!important;
    gap:8px!important;
    align-items:start!important;
  }
  .observatory-index-panel > div,
  .observatory-index-panel > p,
  .observatory-index-panel > small{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .observatory-index-panel > div strong{
    display:block!important;
    margin-top:5px!important;
    font-size:clamp(1.35rem,7vw,1.75rem)!important;
    line-height:1.12!important;
    overflow-wrap:normal!important;
  }
  .observatory-quality-panel{
    display:block!important;
  }
  .observatory-quality-panel > div{
    min-width:0!important;
  }
  .observatory-quality-panel p{
    margin-top:10px!important;
  }

  /* Tous les en-têtes fonctionnels peuvent se réorganiser sans réduire une colonne à 20 px. */
  :is(
    .section-heading,
    .observatory-section-head,
    .roadmap-section-head,
    .roadmap-identity-head,
    .sitecheck-human-heading,
    .sitecheck-human-card-head,
    .domain-hygiene-result-head,
    .professional-guidance-step-head,
    .psv-password-section-head,
    .contact-form-heading,
    .alerts-list-heading-v370,
    .mobile-library-head,
    .exposure-result-head
  ){
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }

  /* Cartes flex principales : retour à la ligne avant compression du texte. */
  :is(
    .sitecheck-company-card,
    .sitecheck-source,
    .sitecheck-plain-warning,
    .audience-hero,
    .audience-trust-panel,
    .audience-p2-panel,
    .audience-help-nearby,
    .pro-observatory-hero,
    .kit-detail-hero,
    .kit-library-hero,
    .reflex-17cyber-callout,
    .reflex-contact-inline,
    .contact-other-details,
    .exposure-principle,
    .exposure-transparency,
    .exposure-signals,
    .trusted-consent-reminder
  ){
    flex-wrap:wrap!important;
  }

  /* Les boutons de formulaire ne gardent pas une largeur minimale qui chasse le champ. */
  :is(.sitecheck-submit,.primary-button,.secondary-button,.big-submit,.psv-home-btn){
    max-width:100%;
    min-width:0;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
}

/* 6. Téléphones : priorité absolue à la lisibilité.
      Les grilles de contenu deviennent une seule colonne ; navigation/dock ne sont pas concernés. */
@media(max-width:560px){
  .public-body .main-content [class*="-grid"],
  body.mobile-mode .main-content [class*="-grid"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  :is(
    .button-row,
    .hero-actions,
    .guide-action-row,
    .alerts-more-row,
    .companion-install-row,
    .companion-user-actions-grid,
    .domain-hygiene-input-row,
    .exposure-action-row,
    .professional-guidance-actions,
    .audience-bottom-actions,
    .psv-password-button-grid
  ){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:10px!important;
  }

  :is(
    .button-row,
    .hero-actions,
    .guide-action-row,
    .alerts-more-row,
    .companion-install-row,
    .companion-user-actions-grid,
    .domain-hygiene-input-row,
    .exposure-action-row,
    .professional-guidance-actions,
    .audience-bottom-actions,
    .psv-password-button-grid
  ) > :is(a,button,input[type="submit"]){
    width:100%!important;
    max-width:100%!important;
  }

  /* Les listes/phrases ne doivent jamais réactiver une césure agressive héritée. */
  .public-body .main-content :is(h1,h2,h3,h4,p,li,strong,small,span,label,a,button),
  body.mobile-mode .main-content :is(h1,h2,h3,h4,p,li,strong,small,span,label,a,button){
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    white-space:normal!important;
  }


  /* Toute flexbox de contenu peut revenir à la ligne sur téléphone.
     La navigation basse PWA n'est pas dans .main-content et reste donc intacte. */
  .public-body .main-content *,
  body.mobile-mode .main-content *{
    flex-wrap:wrap!important;
  }

  /* Garde-fou générique pour toutes les cartes/lignes/panneaux utilisateur.
     Si un ancien composant est en flex horizontal, il peut revenir à la ligne au lieu d'écraser ses enfants. */
  .public-body .main-content :is(
    [class*="-row"],[class*="-head"],[class*="-heading"],[class*="-hero"],
    [class*="-panel"],[class*="-card"],[class*="-banner"],[class*="-callout"],
    [class*="-actions"]
  ),
  body.mobile-mode .main-content :is(
    [class*="-row"],[class*="-head"],[class*="-heading"],[class*="-hero"],
    [class*="-panel"],[class*="-card"],[class*="-banner"],[class*="-callout"],
    [class*="-actions"]
  ){
    min-width:0!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
  }

  .public-body .main-content :is(input,select,textarea,button),
  body.mobile-mode .main-content :is(input,select,textarea,button){
    min-width:0!important;
    max-width:100%!important;
  }

  /* Les tables restent scrollables sans rendre toute la page plus large que l'écran. */
  .table-wrap{
    width:100%!important;
    overflow-x:auto!important;
  }
}

/* 7. Lecteurs/rapports PWA autonomes : mêmes garde-fous, sans modifier leur barre de navigation. */
@media(max-width:560px){
  .pwa-observatory-standalone :is(.obs-mobile-kpis,.obs-mobile-list,.obs-mobile-ranked),
  .pro-pdf-pwa-standalone .pro-pdf-pwa__actions{
    min-width:0;
    max-width:100%;
  }
  .pwa-observatory-standalone :is(.obs-mobile-list,.obs-mobile-ranked) > *,
  .pro-pdf-pwa-standalone .pro-pdf-pwa__actions > *{
    min-width:0;
  }
}


/* 8. Très petits écrans (iPhone 390/414, Android compacts) :
      si une ancienne vue utilise encore une grille sans règle responsive dédiée,
      elle passe en une colonne. Les contrôles de navigation explicitement listés
      gardent deux colonnes lorsque c'est leur fonction. */
@media(max-width:430px){
  .public-body .main-content *,
  body.mobile-mode .main-content *{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .public-body .main-content :is(
    .mobile-segmented-tabs,
    .mobile-mode-switcher,
    .psv-web-mode-switcher,
    .reflex-audience-tabs,
    .domain-hygiene-tool-switch
  ),
  body.mobile-mode .main-content :is(
    .mobile-segmented-tabs,
    .mobile-mode-switcher,
    .psv-web-mode-switcher,
    .reflex-audience-tabs,
    .domain-hygiene-tool-switch
  ){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}