/* Adaptation responsive commune à toutes les pages MIV.
   Les règles larges existantes restent intactes ; ces ajustements interviennent
   uniquement lorsque l'espace disponible devient plus réduit. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
}

/*
 * Au-dessus de 900 px, le site conserve exactement la composition de la
 * maquette de référence (2032 px). Le script responsive-scale.js calcule un
 * coefficient unique, y compris sur les très grands écrans, et l'applique à
 * toute la page : aucune position interne n'est recalculée indépendamment.
 */
html.miv-proportional-desktop {
  overflow-x: hidden;
}

html.miv-proportional-desktop body {
  transform-origin: top left;
  position: relative;
  left: var(--miv-desktop-offset, 0px);
}

/*
 * Secours entièrement CSS : la réduction reste active même lorsqu'un
 * navigateur ouvre directement index.html et tarde à charger le fichier JS.
 * Le script remplace ensuite cette valeur par la largeur utile exacte, sans
 * compter la barre de défilement.
 */
@media (min-width: 901px) {
  html {
    overflow-x: hidden;
  }

  html:not(.miv-proportional-desktop) body {
    width: 2032px;
    zoom: calc(125vw / 2032px);
    position: relative;
    left: -203.2px;
  }
}

/* Les quatre cas concrets reprennent la largeur et l'axe du reste du site. */
@media (min-width: 901px) {
  .cases .section-head,
  .cases .case-grid {
    margin-inline: 0;
    width: 100%;
  }

  .cases .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases .case {
    min-width: 0;
  }

  .cases .case h3 {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

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

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

/*
 * Tablettes et écrans étroits : les grands visuels décoratifs sont retirés
 * afin de privilégier immédiatement le contenu. Les trois emblèmes de la
 * section « Domaines d'intervention » de l'accueil ne sont pas concernés.
 */
@media (max-width: 1024px) {
  .hero-visual,
  .hero-domain-logo,
  .hero-domain-logo-wrap {
    display: none !important;
  }

  .hero-inner,
  .hero-domain {
    grid-template-columns: 1fr !important;
  }
}

/* Ordinateurs portables et tablettes horizontales. */
@media (max-width: 900px) {
  .wrap,
  header .wrap {
    width: 100%;
    max-width: none;
    padding-inline: clamp(24px, 4vw, 48px);
  }

  header .wrap {
    gap: 18px;
  }

  nav ul {
    gap: 16px;
  }

  nav a,
  .nav-cta {
    font-size: 11px;
  }

  .brand-text strong {
    font-size: 12px;
  }

  .hero-inner {
    gap: clamp(30px, 5vw, 60px) !important;
  }

  .hero-sub {
    width: min(100%, 720px);
    max-width: 100%;
  }

  .hero-visual {
    max-width: 38vw;
    margin-right: 0;
  }

  .hero-wrench {
    width: clamp(1050px, 125vw, 1450px);
  }

  .parcours-grid,
  .contact-grid,
  .cat-cols {
    gap: clamp(36px, 5vw, 64px);
  }
}

/* Le menu complet devient trop serré avant la largeur tablette. */
@media (max-width: 900px) {
  header {
    padding-block: 14px;
  }

  header .wrap {
    position: relative;
  }

  nav ul {
    display: none;
  }

  .nav-toggle {
    display: block;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    line-height: 1;
  }

  .nav-cta {
    margin-left: auto;
  }

  #main-nav ul[style*="display: flex"] {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: clamp(20px, 4vw, 44px) !important;
    left: auto !important;
    width: min(340px, calc(100vw - 40px));
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    z-index: 110;
    padding: 22px 24px !important;
    gap: 0 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: #101822 !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
  }

  #main-nav ul[style*="display: flex"] li + li {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  #main-nav ul[style*="display: flex"] a {
    display: block;
    padding: 13px 2px;
    font-size: 12px;
  }

  .hero h1,
  .section-head h2,
  .missions-heading h2,
  .cta h2,
  .cat-cta h2,
  .contact h2 {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step {
    min-width: 0;
  }

  .mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablettes portrait. */
@media (max-width: 820px) {
  section {
    padding-block: clamp(68px, 10vw, 88px);
  }

  .section-head {
    max-width: 100%;
    margin-bottom: 44px;
  }

  .section-head .single-line {
    white-space: normal;
  }

  .hero {
    padding: 140px 0 84px;
  }

  .hero-inner,
  .hero-domain,
  .parcours-grid,
  .contact-grid,
  .cat-cols {
    grid-template-columns: 1fr !important;
  }

  .hero-inner > div,
  .hero-domain > div,
  .contact-grid > *,
  .cat-cols > * {
    min-width: 0;
  }

  .hero-visual {
    justify-self: center;
    max-width: 430px;
    width: min(100%, 430px);
    margin: 24px auto 0;
  }

  .hero-domain-logo,
  .hero-domain-logo-wrap {
    width: min(320px, 70vw);
    max-width: 100%;
    justify-self: center;
    margin-inline: auto;
  }

  .hex-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2.5vw, 22px);
  }

  .hex-card {
    min-width: 0;
  }

  .hex-card h3 {
    font-size: clamp(17px, 3.4vw, 22px);
    white-space: normal;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .cta .wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  footer .wrap {
    align-items: flex-start;
  }
}

/* Téléphones. */
@media (max-width: 680px) {
  .wrap,
  header .wrap {
    padding-inline: clamp(18px, 5.5vw, 26px);
  }

  header {
    padding-block: 12px;
  }

  .brand {
    min-width: 0;
    gap: 10px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand-text {
    display: block !important;
    min-width: 0;
    line-height: 1.25;
  }

  .brand-text strong {
    font-size: clamp(10.5px, 3vw, 12px);
    white-space: nowrap;
  }

  .brand-text span {
    font-size: clamp(10px, 2.8vw, 11.5px);
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    border: 1px solid transparent;
    border-radius: 2px;
  }

  .nav-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .32);
  }

  .hero {
    min-height: 0;
    padding: 124px 0 68px;
  }

  .hero-inner > div:first-child,
  .hero-ref,
  .hero h1,
  .hero-sub,
  .hero-cta {
    transform: none;
  }

  .hero-ref,
  .eyebrow {
    font-size: clamp(9.5px, 2.9vw, 11px);
    letter-spacing: .13em;
    line-height: 1.5;
  }

  .hero h1,
  .missions .hero h1 {
    font-size: clamp(32px, 10.5vw, 45px);
    line-height: .98;
  }

  .hero .tagline {
    font-size: clamp(15px, 4.6vw, 19px);
    line-height: 1.35;
  }

  .hero-sub,
  .hero p {
    width: auto;
    max-width: 100%;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  .hero-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }

  .btn,
  .submit-btn {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.35;
  }

  .hero-visual,
  .hero-domain-logo,
  .hero-domain-logo-wrap {
    display: none !important;
  }

  section,
  .missions,
  .cta {
    padding-block: 62px;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .section-head h2,
  .missions-heading h2,
  .cta h2,
  .cat-cta h2,
  .contact h2 {
    font-size: clamp(27px, 8.5vw, 36px);
    line-height: 1;
  }

  .section-head p,
  .missions-heading p,
  .contact-info > p {
    font-size: 14.5px;
    line-height: 1.6;
  }

  .hex-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .hex-img-wrap {
    margin-bottom: 12px;
  }

  .hex-card h3 {
    font-size: clamp(14px, 4.3vw, 19px);
    line-height: 1;
  }

  .hex-link {
    display: none !important;
  }

  .parcours-grid,
  .contact-grid,
  .cat-cols {
    gap: 34px;
  }

  .portrait-frame,
  .portrait img {
    width: min(100%, 300px);
    margin-inline: auto;
  }

  .story p,
  .check-list li,
  .case p,
  .mission h3,
  .mission-detail {
    overflow-wrap: break-word;
  }

  .timeline {
    padding-left: 30px;
  }

  .t-item::before {
    left: -35px;
  }

  .steps,
  .mission-grid {
    grid-template-columns: 1fr;
  }

  .step,
  .mission,
  .case {
    min-height: 0;
    padding: 24px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* évite le zoom automatique sur iPhone */
  }

  select {
    width: 100%;
    margin: 0;
    text-align: left;
    text-align-last: left;
  }

  .contact .value,
  .contact a,
  .privacy-note {
    overflow-wrap: anywhere;
  }

  footer {
    padding-block: 28px;
  }

  footer .wrap,
  footer .foot-links {
    flex-direction: column;
    align-items: flex-start;
  }

  footer .foot-links {
    gap: 12px;
  }
}

/* Petits téléphones (320 à 420 px). */
@media (max-width: 420px) {
  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-text strong {
    font-size: 10px;
    letter-spacing: .025em;
  }

  .brand-text span {
    font-size: 9.5px;
  }

  .nav-toggle {
    min-width: 40px;
    min-height: 40px;
  }

  .hero h1,
  .missions .hero h1 {
    font-size: clamp(29px, 10.2vw, 39px);
  }

  .hero-sub,
  .hero p {
    font-size: 14px;
  }

  .hex-grid {
    gap: 4px;
  }

  .hex-card h3 {
    font-size: clamp(13px, 4vw, 16px);
  }

  .eyebrow::before {
    width: 18px;
    flex: 0 0 18px;
  }
}

/* Téléphone tenu horizontalement : contenu compact sans masquer le menu. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  header {
    padding-block: 8px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .hero {
    padding-top: 102px;
  }

  #main-nav ul[style*="display: flex"] {
    max-height: calc(100vh - 72px);
  }
}