/* ==========================================================================
   ProSchool V6.1.2 — Correctif responsive final
   Chargé APRES theme-2026 / uiux-v4 / uiux-v3 pour éviter les conflits.
   Cibles : 320, 360, 375, 390, 412, 437, 480, 600, 768, 820, 1024, 1100+
   ========================================================================== */

/* ---------- garde-fous globaux ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.page-shell,
.route-surface,
.route-frame,
.page-hero,
.section-card,
.info-card,
.form-card,
.table-card,
.status-card,
.state-panel,
.home-hero,
.downloads-overview,
.download-group,
.guide-card,
.activation-card,
.security-panel,
.contact-form-card,
.modal,
.workspace-grid,
.workspace-columns,
.resource-grid,
.resource-card,
.resource-detail-card {
  min-width: 0;
  max-width: 100%;
}

.route-surface > *,
.route-grid > *,
.home-hero > *,
.home-hero--uiux > *,
.downloads-overview > *,
.download-architecture-grid > *,
.download-catalog > *,
.guide-downloads > *,
.contact-grid-pro > *,
.activation-layout > *,
.workspace-columns > *,
.account-grid > *,
.dashboard-stats > *,
.pricing-grid > *,
.offer-grid > *,
.comparison-grid > *,
.resource-grid > *,
.localized-price-panel > *,
.engagement-v4__grid > * {
  min-width: 0;
}

p,
li,
dd,
td,
th,
code,
pre,
a,
span,
strong,
small {
  overflow-wrap: anywhere;
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
}

/* ---------- conteneurs ---------- */
.page-shell {
  width: min(calc(100% - 2rem), 1240px) !important;
  margin-inline: auto !important;
}

.footer-inner {
  width: min(calc(100% - 2rem), 1240px) !important;
}

.page-hero,
.section-card,
.info-card,
.form-card,
.table-card,
.status-card {
  max-width: 100%;
}

/* ---------- formulaires ---------- */
.app-form,
.form-row,
.field-group,
.resource-toolbar {
  min-width: 0;
}

.app-form input,
.app-form select,
.app-form textarea,
.resource-field input,
.resource-field select,
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-width: 0;
}

.form-actions,
.inline-actions,
.page-hero__actions {
  max-width: 100%;
  flex-wrap: wrap;
}

/* ---------- tableaux ---------- */
.table-card,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.data-table {
  width: 100%;
}

/* ---------- modales ---------- */
.modal-backdrop {
  padding: clamp(.5rem, 2vw, 1.25rem);
}

.modal {
  width: min(36rem, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* ---------- navigation / header tablette ---------- */
@media (max-width: 1100px) {
  :root {
    --ps-nav-h: 70px;
  }

  #app-shell {
    height: calc(var(--ps-nav-h) + 1rem) !important;
  }

  .app-shell {
    padding: .55rem .55rem 0 !important;
  }

  .shell-inner {
    width: min(calc(100% - .25rem), 1320px) !important;
    min-height: var(--ps-nav-h) !important;
    padding: 0 .65rem 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: .45rem !important;
    overflow: visible !important;
  }

  .brand-mark {
    min-width: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    justify-self: start;
  }

  .shell-actions {
    grid-column: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .35rem !important;
    margin-left: 0 !important;
    min-width: 0;
  }

  .shell-toggle {
    display: inline-grid !important;
    place-items: center !important;
    grid-column: auto !important;
    justify-self: end;
    flex: 0 0 auto;
  }

  .main-nav {
    position: absolute !important;
    left: .65rem !important;
    right: .65rem !important;
    top: calc(100% + .45rem) !important;
    width: auto !important;
    max-width: none !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .2rem !important;
    margin: 0 !important;
    padding: .65rem !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #043e37, #075248) !important;
    box-shadow: 0 22px 55px rgba(4,47,40,.28) !important;
    max-height: min(76dvh, 42rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1002 !important;
  }

  .main-nav.is-open {
    display: flex !important;
  }

  .nav-link,
  .nav-dropdown__trigger {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    white-space: normal !important;
  }

  .nav-label {
    min-width: 0;
    overflow-wrap: normal;
  }

  .nav-chevron {
    margin-left: auto !important;
  }

  .nav-dropdown,
  .nav-dropdown__panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav-dropdown__panel {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    margin: .2rem 0 .25rem 0 !important;
  }

  /* Grilles 3/4/5 colonnes -> 2 colonnes sur tablette */
  .home-quick-actions,
  .problem-grid,
  .commercial-feature-grid,
  .profile-grid,
  .profile-grid--compact,
  .trust-grid,
  .pricing-grid,
  .offer-grid,
  .audience-lane-grid,
  .mockup-gallery,
  .resource-toolbar,
  .resource-grid,
  .state-grid,
  .card-grid,
  .account-grid,
  .dashboard-stats,
  .engagement-v4__grid,
  .download-experience-grid,
  .download-experience-grid--profiles,
  .download-catalog,
  .download-catalog--profiles,
  .guide-topic-grid,
  .guide-downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-hero,
  .home-hero--uiux,
  .journey-panel,
  .showcase-grid,
  .comparison-grid,
  .experience-showcase,
  .installation-story-layout,
  .localized-price-panel,
  .contact-grid-pro,
  .activation-layout,
  .download-architecture-grid,
  .workspace-columns,
  .styleguide-hero-grid,
  .styleguide-layout {
    grid-template-columns: 1fr !important;
  }

  .architecture-flow {
    grid-template-columns: 1fr !important;
  }

  .architecture-arrow {
    transform: rotate(90deg);
    text-align: center;
  }
}

/* ---------- tablette portrait / grands mobiles ---------- */
@media (max-width: 820px) {
  .page-shell {
    width: min(calc(100% - 1.25rem), 1240px) !important;
  }

  .footer-inner {
    width: min(calc(100% - 1.25rem), 1240px) !important;
  }

  .page-hero,
  .section-card,
  .info-card,
  .form-card,
  .table-card,
  .status-card,
  .styleguide-section {
    padding: clamp(1rem, 3.5vw, 1.35rem) !important;
  }

  .page-hero h1,
  .home-hero__copy h1 {
    font-size: clamp(2.2rem, 8vw, 3.45rem) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
  }

  .page-hero p,
  .home-hero__copy > p {
    max-width: 100% !important;
  }

  .section-heading,
  .section-heading--split {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }

  .form-row,
  .feature-grid,
  .journey-grid,
  .showcase-metrics,
  .showcase-panels,
  .bullet-grid,
  .component-row,
  .swatch-grid,
  .workspace-columns,
  .resource-grid {
    grid-template-columns: 1fr !important;
  }

  .download-guidance-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: .55rem !important;
  }

  .download-guidance-strip i {
    display: none !important;
  }

  .download-filter-nav,
  .journey-switcher__tabs,
  .hero-device__tabs {
    max-width: 100%;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .download-filter-nav::-webkit-scrollbar,
  .journey-switcher__tabs::-webkit-scrollbar,
  .hero-device__tabs::-webkit-scrollbar {
    display: none;
  }

  .download-filter-nav a,
  .journey-switcher__tab,
  .hero-device__tabs > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .hero-device,
  .hero-device--premium {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .hero-device__layout,
  .hero-device__panels,
  .hero-device__panels--premium {
    grid-template-columns: 1fr !important;
  }

  .hero-device__sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .experience-showcase__intro {
    display: block !important;
  }

  .experience-showcase__intro img {
    max-width: min(100%, 280px) !important;
    margin: 1rem auto 0 !important;
  }

  .experience-showcase .product-home-grid {
    grid-template-columns: 1fr !important;
  }

  .network-flow,
  .standalone-flow {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ---------- mobile standard ---------- */
@media (max-width: 600px) {
  :root {
    --ps-nav-h: 62px;
  }

  html {
    scroll-padding-top: 5.75rem;
  }

  #app-shell {
    height: calc(var(--ps-nav-h) + .8rem) !important;
  }

  .app-shell {
    padding: .38rem .32rem 0 !important;
  }

  .shell-inner {
    min-height: var(--ps-nav-h) !important;
    border-radius: 16px !important;
    padding-right: .38rem !important;
    gap: .28rem !important;
    grid-template-columns: minmax(70px, 1fr) auto auto !important;
  }

  .brand-mark {
    min-width: 0 !important;
    width: min(100%, 7.6rem) !important;
    padding: .35rem 1.35rem .35rem .4rem !important;
    border-radius: 15px 0 0 15px !important;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%) !important;
  }

  .brand-logo {
    width: 3.35rem !important;
    height: 2.55rem !important;
    flex: 0 0 auto;
  }

  .brand-copy {
    display: none !important;
  }

  .shell-actions {
    gap: .22rem !important;
  }

  .lang-switch {
    flex: 0 0 auto;
  }

  .lang-switch button {
    min-width: 25px !important;
    width: 25px !important;
    height: 27px !important;
    padding: 0 !important;
    font-size: .65rem !important;
  }

  .currency-switch {
    flex: 0 1 76px;
    width: 76px;
    min-width: 0;
    height: 29px !important;
  }

  .currency-switch select {
    width: 100%;
    min-width: 0;
    padding: .25rem .9rem .25rem .35rem !important;
    background-position: calc(100% - 7px) 50%, calc(100% - 4px) 50% !important;
    font-size: .62rem !important;
  }

  .shell-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .main-nav {
    left: .35rem !important;
    right: .35rem !important;
    top: calc(100% + .32rem) !important;
    max-height: calc(100dvh - 5rem) !important;
  }

  .page-shell {
    width: min(calc(100% - .85rem), 1240px) !important;
    padding-top: .4rem !important;
  }

  .footer-inner {
    width: min(calc(100% - .85rem), 1240px) !important;
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  .page-hero,
  .home-hero,
  .home-hero--uiux {
    border-radius: 19px !important;
    padding: 1.15rem !important;
  }

  .page-hero h1,
  .home-hero__copy h1 {
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
    letter-spacing: -.035em !important;
  }

  .page-hero__meta,
  .hero-proof-row,
  .meta-row,
  .platform-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }

  .page-hero__actions,
  .form-actions,
  .inline-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }

  .page-hero__actions > *,
  .form-actions > *,
  .inline-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  .home-quick-actions,
  .problem-grid,
  .commercial-feature-grid,
  .profile-grid,
  .profile-grid--compact,
  .trust-grid,
  .pricing-grid,
  .offer-grid,
  .audience-lane-grid,
  .mockup-gallery,
  .resource-toolbar,
  .resource-grid,
  .state-grid,
  .card-grid,
  .account-grid,
  .dashboard-stats,
  .engagement-v4__grid,
  .download-catalog,
  .download-catalog--profiles,
  .guide-topic-grid,
  .guide-downloads,
  .download-other-access-grid {
    grid-template-columns: 1fr !important;
  }

  .download-experience-grid,
  .download-experience-grid--profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .download-card,
  .guide-card,
  .resource-card,
  .contact-form-card,
  .activation-card,
  .security-panel {
    padding: 1rem !important;
  }

  .downloads-overview__main,
  .downloads-overview__aside {
    padding: 1.1rem !important;
  }

  .profile-tech-list {
    grid-template-columns: 1fr !important;
  }

  .profile-tech-list code {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .download-web-callout,
  .demo-banner,
  .final-cta,
  .cta-panel {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .download-guidance-strip {
    grid-template-columns: 1fr 1fr !important;
    padding: .7rem !important;
  }

  .download-guidance-strip div {
    min-width: 0;
    align-items: flex-start !important;
  }

  .download-guidance-strip strong {
    line-height: 1.25;
  }

  .activation-support-contacts {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .activation-support-contacts a {
    width: 100%;
  }

  .hero-device__sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .unified-solution-panel__modules {
    grid-template-columns: 1fr !important;
  }

  .home-installation-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .home-installation-steps li {
    min-width: 0 !important;
  }

  .data-table {
    min-width: 36rem;
  }

  .modal__header,
  .modal__footer {
    flex-wrap: wrap;
  }

  .back-to-top {
    right: .75rem;
    bottom: .75rem;
  }
}

/* ---------- petits mobiles ---------- */
@media (max-width: 420px) {
  .shell-inner {
    grid-template-columns: minmax(58px, 1fr) auto auto !important;
  }

  .brand-mark {
    width: 5.8rem !important;
    padding-right: .9rem !important;
  }

  .brand-logo {
    width: 3rem !important;
    height: 2.35rem !important;
  }

  .lang-switch button {
    min-width: 23px !important;
    width: 23px !important;
    font-size: .61rem !important;
  }

  .currency-switch {
    width: 69px;
    flex-basis: 69px;
  }

  .shell-toggle {
    width: 34px !important;
    height: 34px !important;
  }

  .home-quick-actions,
  .download-experience-grid,
  .download-experience-grid--profiles,
  .hero-proof-row,
  .hero-device__sidebar,
  .download-guidance-strip {
    grid-template-columns: 1fr !important;
  }

  .page-hero h1,
  .home-hero__copy h1 {
    font-size: clamp(1.85rem, 10vw, 2.35rem) !important;
  }

  .page-hero__eyebrow,
  .badge,
  .meta-pill {
    max-width: 100%;
    white-space: normal;
  }

  .home-quick-action {
    min-height: 60px !important;
  }

  .home-quick-action span:last-child {
    display: block !important;
  }

  .download-filter-nav {
    top: 4.75rem !important;
  }

  .download-card__top,
  .guide-card__head,
  .resource-card__top,
  .resource-detail-card__head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .localized-price-panel {
    padding: 1.1rem !important;
  }

  .localized-price-panel__range {
    font-size: 1.8rem !important;
  }
}

/* ---------- très petits écrans 320–360px ---------- */
@media (max-width: 360px) {
  .app-shell {
    padding-inline: .22rem !important;
  }

  .shell-inner {
    grid-template-columns: minmax(50px, 1fr) auto auto !important;
    gap: .18rem !important;
    padding-right: .25rem !important;
  }

  .brand-mark {
    width: 4.9rem !important;
    padding: .3rem .65rem .3rem .3rem !important;
  }

  .brand-logo {
    width: 2.75rem !important;
    height: 2.1rem !important;
  }

  .lang-switch button {
    min-width: 21px !important;
    width: 21px !important;
    height: 25px !important;
  }

  .currency-switch {
    width: 62px;
    flex-basis: 62px;
    height: 27px !important;
  }

  .currency-switch select {
    font-size: .56rem !important;
    padding-left: .25rem !important;
  }

  .shell-toggle {
    width: 32px !important;
    height: 32px !important;
  }

  .page-shell,
  .footer-inner {
    width: min(calc(100% - .55rem), 1240px) !important;
  }

  .page-hero,
  .section-card,
  .info-card,
  .form-card,
  .table-card,
  .status-card,
  .download-card,
  .guide-card,
  .activation-card,
  .security-panel {
    padding: .9rem !important;
  }

  .page-hero h1,
  .home-hero__copy h1 {
    font-size: 1.78rem !important;
  }

  .section-heading h2 {
    font-size: 1.45rem !important;
  }

  .button,
  .ghost-button {
    padding-inline: .8rem !important;
  }
}

/* ---------- écrans tactiles / paysage ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .main-nav {
    max-height: calc(100dvh - 4.5rem) !important;
  }

  .modal {
    max-height: calc(100dvh - .5rem);
  }
}

/* ---------- sécurité contre des règles desktop chargées après responsive.css ---------- */
@media (max-width: 820px) {
  .experience-showcase,
  .home-hero--uiux,
  .narrative-layout,
  .journey-switcher,
  .journey-panel,
  .year-cycle__grid,
  .installation-story-layout,
  .download-architecture-grid,
  .download-catalog--profiles,
  .contact-grid-pro,
  .activation-layout {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}