/* ============================================================
   HOKKO studio: Responsive global
   Chargé après les styles inline des pages (donc prioritaire).
   Gère : nav, paddings, footer, boutons CTA, formulaires, menu mobile.
   Desktop (>1200px) : inchangé.
   ============================================================ */

/* Sécurité anti-débordement + anti faux-zoom iOS */
html {
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
body {
  overflow-x: clip;
  overflow-y: visible;
  max-width: 100%;
  width: 100%;
  position: relative;
}
/* Éléments pleine largeur (bandes / fond edge-to-edge) : plafonnés à 100 %.
   NB : ne PAS inclure ici les conteneurs déjà centrés (.si, .portfolio-wrap,
   .contact-wrap…) qui possèdent leur propre max-width: sinon on écrase leur
   centrage sur grand écran. */
main, #contenu, nav, footer, .hero, .cta-band {
  max-width: 100%;
}
/* Filet de sécurité anti-débordement pour les conteneurs centrés, sans
   toucher à leur max-width d'origine (1200px / 920px…). */
.si, .portfolio-wrap, .contact-wrap {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   DESKTOP (≥1025px): respiration latérale moderne
   Marges gauche/droite un peu plus généreuses sur grand écran
   (jamais inférieures aux 3rem d'origine). Tablette/mobile intacts.
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .si,
  .faq-inner,
  .cta-band,
  .portfolio-wrap,
  .contact-wrap,
  .status-inner,
  .quote-simulator-section {
    padding-left: clamp(3rem, 5vw, 6rem);
    padding-right: clamp(3rem, 5vw, 6rem);
  }
}
/* Enfants flex/grid : peuvent rétrécir sous leur contenu */
[class*="grid"], [class*="row"], [class*="-acts"], [class*="filter"], .ft, .fb2, .stats-row, .stats {
  min-width: 0;
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ: focus clavier visible
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue, #2D8EFF);
  outline-offset: 3px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------
   MENU MOBILE (hamburger + tiroir)
   --------------------------------------------------------- */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--bdr, rgba(255,255,255,0.1));
  background: rgba(255,255,255,0.04);
  color: var(--wh, #fff);
  cursor: pointer; padding: 0; margin-left: 0.35rem;
  transition: background .2s, border-color .2s;
}
.nav-burger:hover { background: rgba(255,255,255,0.08); }
.nav-burger span { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background .2s; }
.nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease; }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; top: 0; right: 0; z-index: 130;
  width: min(320px, 86vw); height: 100%;
  background: rgba(11,17,32,0.98);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-left: 1px solid var(--bdr, rgba(255,255,255,0.1));
  box-shadow: -20px 0 50px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 5rem 1.5rem 2rem; overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer a {
  color: var(--ow, #E8EDF5); text-decoration: none;
  font-family: var(--ffb, 'Inter', sans-serif);
  font-size: 1rem; font-weight: 500;
  padding: 0.8rem 0.75rem; border-radius: 10px;
  transition: background .2s, color .2s;
}
.mobile-drawer a:hover, .mobile-drawer a.active { background: rgba(45,142,255,0.12); color: #fff; }
.mobile-drawer .drawer-cta { margin-top: 0.75rem; background: var(--blue, #2D8EFF); color: #fff; text-align: center; font-weight: 600; }
.mobile-drawer .drawer-cta:hover { background: var(--bl, #5AAEFF); }
.mobile-drawer .drawer-login { border: 1px solid var(--bdr, rgba(255,255,255,0.12)); text-align: center; font-weight: 600; }
.mobile-drawer .drawer-sep { height: 1px; background: var(--bdr, rgba(255,255,255,0.1)); margin: 0.6rem 0; }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4,8,16,0.55);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
body.drawer-locked { overflow: hidden; }
body.drawer-locked nav { z-index: 140; }

/* Burger dès 1200px: masquer le CTA header (présent dans le tiroir) */
@media (max-width: 1200px) {
  nav .nav-links { display: none; }
  nav .nav-actions .nav-sim { display: none; }
  nav .nav-actions .nav-login { display: none; }
  nav .nav-actions .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }

  nav { gap: 0.75rem; min-width: 0; }
  nav > .logo { min-width: 0; max-width: min(58vw, 220px); }
  nav .site-logo { max-height: 36px; width: auto; }
  nav .nav-actions:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer, .drawer-backdrop, .nav-burger span::before, .nav-burger span::after { transition: none; }
}

/* Espace widget Milo: footer desktop */
@media (min-width: 769px) {
  footer .fb2 {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "login copy social";
    align-items: center;
    gap: 1rem 1.25rem;
    padding-right: 92px;
  }
  footer .footer-login { width: auto; }
  footer .fb2 > span { min-width: 0; }
  footer .fsoc {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
  }
}

footer .fc a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------
   FOOTER: éviter superpositions (Milo, grille, copyright)
   --------------------------------------------------------- */
footer {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;
}
footer .ft {
  width: 100%;
  box-sizing: border-box;
}
footer .ft > div {
  min-width: 0;
}
footer .ft .site-logo {
  max-height: 38px;
  width: auto;
  display: block;
}
footer .fb-desc {
  max-width: 100%;
}
footer .fb2 {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "login"
    "copy"
    "social";
  gap: 0.85rem;
  align-items: start;
}
footer .footer-login {
  grid-area: login;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  white-space: nowrap;
}
footer .fb2 > span {
  grid-area: copy;
  display: block;
  max-width: 100%;
  line-height: 1.5;
}
footer .fsoc {
  grid-area: social;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

/* ---------------------------------------------------------
   TABLETTE (≤1024px): espacements verticaux allégés
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Accueil (hero plein écran + social-card) : inchangé */
  .hero:not(:has(.social-card)) {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .si { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .faq-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .cta-band { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  /* Secnav offres : dégager le widget Milo en bas */
  .secnav {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* Footer tablette : grille empilée (login / copyright / réseaux) */
  footer .fb2 {
    padding-right: 0 !important;
  }
  footer .fsoc {
    max-width: 100%;
    padding-right: 4.75rem;
    box-sizing: border-box;
  }
}

/* À propos : hero texte centré (aligné sur hero-inner 1 col à 920px) */
@media (max-width: 920px) {
  .hero-inner > div:first-child {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-inner .hero-badge,
  .hero-inner > div:first-child > .badge {
    align-self: center;
  }
  .hero-inner h1 { width: 100%; }
  .hero-inner .hero-sub {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .hero-inner .hero-actions {
    justify-content: center;
    width: 100%;
  }
}

/* ---------------------------------------------------------
   TABLETTE / MOBILE (≤768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  nav { padding-left: 1.25rem; padding-right: 1.25rem; }
  .si { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero { padding-left: 1.5rem; padding-right: 1.5rem; }
  .cta-band { padding-left: 1.5rem; padding-right: 1.5rem; }
  .faq-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  footer { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: calc(1.5rem + 4.75rem); }
  .status-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .portfolio-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .filter-bar { padding-left: 1.25rem; padding-right: 1.25rem; }
  .filter-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .contact-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .quote-simulator-section { padding-left: 1.25rem; padding-right: 1.25rem; }

  .hero:not(:has(.social-card)) {
    padding-top: 4.25rem;
    padding-bottom: 2.5rem;
  }

  .si { padding-top: 3rem; padding-bottom: 3rem; }
  .faq-inner { padding-top: 3rem; padding-bottom: 3rem; }
  .cta-band { padding-top: 3rem; padding-bottom: 3rem; }
  .cta-band p { margin-bottom: 1.75rem; }

  /* Footer mobile : empilement vertical forcé */
  footer .fb2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding-right: 0 !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
  }
  footer .footer-login {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    grid-area: unset !important;
  }
  footer .fb2 > span {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    grid-area: unset !important;
  }
  footer .fsoc {
    order: 3;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 4.75rem !important;
    box-sizing: border-box !important;
    grid-area: unset !important;
  }

  .ft { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Stats portfolio : 3 colonnes sur une ligne */
  .stats-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 100% !important;
    gap: 0.4rem;
    margin-left: 0;
    margin-right: 0;
  }
  .stats-row .stat-item,
  .stats-row .stat-item.stat-sep {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
  .stats-row .stat-n {
    font-size: clamp(1.15rem, 4.2vw, 1.65rem) !important;
  }
  .stats-row .stat-l {
    font-size: clamp(0.55rem, 2.1vw, 0.7rem) !important;
    letter-spacing: 0.04em;
    line-height: 1.25;
    white-space: normal;
  }

  /* Groupes de boutons CTA */
  .cta-acts {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .cta-acts .btn-solid,
  .cta-acts .btn-ghost,
  .cta-acts .btn-blue,
  .cta-acts > a,
  .cta-acts > button {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }

  .hero-actions,
  .hero-acts {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions .btn-solid,
  .hero-actions .btn-ghost,
  .hero-acts .btn-solid,
  .hero-acts .btn-ghost {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }

  /* Boutons packs / abonnements */
  .pack-cta,
  .pack-full-action .pack-cta,
  .sub-full-action .pack-cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }
  .pack-full-action,
  .sub-full-action {
    align-items: stretch;
    width: 100%;
  }

  /* Toggle facturation offres */
  .billing-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 0.35rem;
    padding: 0.35rem;
  }
  .billing-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    font-size: 0.78rem;
  }

  /* Filtres offres / portfolio: grille dès tablette */
  .filter-wrap {
    justify-content: center;
    gap: 0.45rem;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }
  .filter-wrap .filter-btn {
    width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.5rem 0.65rem;
  }
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-top: 2rem;
    box-sizing: border-box;
  }
  .filter-left {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
  }
  .filter-left .filter-btn {
    width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.5rem 0.65rem;
  }
  .view-toggle {
    justify-content: center;
  }

  /* Stats hero (portfolio etc.): gardé en ligne, voir bloc 768px */
  .hero h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.35rem) !important;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  h2, .cta-band h2, .faq-section-title {
    font-size: clamp(1.35rem, 3.5vw, 1.85rem) !important;
    overflow-wrap: anywhere;
  }
  .hero-sub, .ssub, .cta-band p {
    font-size: 0.92rem;
    line-height: 1.65;
  }
  .hero-sub { margin-bottom: 1.75rem; }
  .modal-title { font-size: 1.35rem; }
  .pack-price, .sub-price { font-size: 1.65rem; }
  .scard-price { font-size: 1.35rem; }
  .stat-n { font-size: 2rem; }

  /* Badges */
  .badge, .hero-badge {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding: 0.32rem 0.75rem;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }

  /* Cartes / listes */
  .lcard { padding: 1rem; gap: 0.75rem; }
  .pcard-info { padding: 1rem; }
  .ptag { white-space: normal; text-align: center; }

  /* Formulaires */
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn-solid,
  .form-actions .btn-ghost,
  .form-actions .btn-outline,
  .form-actions button,
  .form-actions a {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
  .contact-card { padding: 1.5rem; }
  .contact-type { flex-direction: column; }
  .type-pill { min-width: 0; width: 100%; flex: none; }
  .rdv-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .rdv-banner .btn-solid,
  .rdv-banner .btn-outline,
  .rdv-banner a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .success-panel .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .success-panel .form-actions a {
    width: 100%;
  }
  .pack-wants-toggle { flex-direction: column; }
  .pack-selected-preview { flex-direction: column; align-items: stretch; }
  .pack-clear-btn { width: 100%; text-align: center; }

  /* Portfolio: vue liste compacte (ligne, pas carte) */
  .filter-bar { padding-bottom: 0; }
  .list-view { gap: 0.45rem !important; }
  .list-view .lcard {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    grid-template-areas: "thumb body arrow" !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .list-view .lcard-thumb {
    grid-area: thumb !important;
    width: 56px !important;
    height: 56px !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    flex-shrink: 0;
  }
  .list-view .lcard-body {
    grid-area: body !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
  }
  .list-view .lcard-arrow {
    grid-area: arrow !important;
    display: block !important;
  }
  .list-view .lcard-tags { display: none !important; }
  .lcard-body { min-width: 0; }
  .pcard-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .pcard-tags { justify-content: flex-start; }
  .modal-overlay { padding: 1rem; align-items: flex-end; }
  .modal { max-height: 92vh; border-radius: 16px 16px 0 0; }
  .modal-body { padding: 1.5rem; }

  /* Accueil: carte réseaux */
  .social-card { margin-top: 3rem; }

  /* Panneau succès / vérification */
  .verify-code { flex-direction: column; }
  .verify-code input { min-width: 0; width: 100%; }

  /* Simulateur devis : scroll page (pas piégé dans le formulaire) */
  .quote-form {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
  .quote-result-card { position: static !important; }
}

/* ---------------------------------------------------------
   PETIT MOBILE (≤480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  /* Garder le root à 100 % : réduire html{font-size} mélange rem/px
     et donne un rendu « zoomé » / incohérent sur iPhone. */
  html { font-size: 100%; }
  body { font-size: 1rem; line-height: 1.55; }

  nav { padding-left: 0.85rem; padding-right: 0.85rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .si { padding-left: 0.85rem; padding-right: 0.85rem; padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .hero { padding-left: 0.85rem; padding-right: 0.85rem; }
  .hero:not(:has(.social-card)) { padding-top: 3.5rem; padding-bottom: 2rem; }
  .cta-band { padding-left: 0.85rem; padding-right: 0.85rem; padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .faq-inner { padding-left: 0.85rem; padding-right: 0.85rem; padding-top: 2.25rem; padding-bottom: 2.25rem; }
  footer { padding-left: 0.85rem; padding-right: 0.85rem; padding-bottom: calc(1.25rem + 4.5rem); }
  .contact-wrap { padding-left: 0.85rem; padding-right: 0.85rem; }
  .portfolio-wrap { padding-left: 0.85rem; padding-right: 0.85rem; padding-top: 1.75rem; padding-bottom: 2.5rem; }
  .filter-wrap, .filter-bar { padding-left: 0.85rem; padding-right: 0.85rem; }
  .status-inner { padding-left: 0.85rem; padding-right: 0.85rem; }

  .ft { grid-template-columns: 1fr; gap: 1.25rem; }

  footer .fsoc {
    max-width: 100%;
    padding-right: 4.5rem;
  }

  nav > .logo { max-width: min(48vw, 150px); }
  nav .site-logo { max-height: 30px; }
  .nav-burger { width: 38px; height: 38px; margin-left: 0.2rem; }

  /* Titres encore plus compacts */
  .hero h1 {
    font-size: 1.7rem !important;
    line-height: 1.1;
  }
  h2, .cta-band h2 {
    font-size: 1.35rem !important;
    line-height: 1.15;
  }
  .hero-sub, .ssub { font-size: 0.86rem; }
  .cta-band p { font-size: 0.86rem; margin-bottom: 1.25rem; }

  /* Accueil */
  .hero:has(.social-card) { padding: 3rem 0.85rem 3.25rem; min-height: auto; }
  .hero-btns, .social-card, .cta-acts, .hero-actions, .hero-acts {
    max-width: 100%;
  }
  .social-card { margin-top: 2rem; padding: 0.65rem 0.7rem; }
  .btn-solid, .btn-ghost, .btn-blue, .pack-cta {
    font-size: 0.84rem;
    padding: 0.8rem 1rem;
  }

  /* Filtres : 1 colonne si libellés longs */
  .filter-wrap,
  .filter-left {
    grid-template-columns: 1fr;
  }
  .filter-wrap .filter-btn,
  .filter-left .filter-btn {
    font-size: 0.76rem;
    padding: 0.45rem 0.6rem;
  }

  .billing-toggle { width: 100%; border-radius: 12px; }
  .billing-btn {
    flex: 1 1 100%;
    font-size: 0.72rem;
    padding: 0.45rem 0.55rem;
    white-space: normal;
    line-height: 1.3;
  }
  .billing-tag { font-size: 0.58rem; }

  .secnav {
    max-width: min(100% - 1rem, 100%);
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    padding: 0.4rem 0.45rem;
    gap: 0.1rem;
    box-sizing: border-box;
  }
  .secnav-item { padding: 0.3rem 0.35rem; }
  .secnav-dot { width: 9px; height: 9px; }

  .pack-card, .sub-card, .scard, .cat-card, .contact-card, .member {
    padding: 1.15rem;
  }
  .pack-price, .sub-price { font-size: 1.45rem; }
  .scard-price { font-size: 1.2rem; }
  .pack-name, .sub-name { font-size: 1.15rem; }
  .scard-name { font-size: 1rem; }

  .contact-card { padding: 1.15rem; }
  .modal-body { padding: 1.15rem; }
  .modal-overlay { padding: 0.5rem; }

  .faq-q { font-size: 0.88rem; padding: 1rem 0; gap: 0.65rem; }
  .faq-a { font-size: 0.82rem; }

  .search-box { padding: 0.4rem 0.65rem; }
  .search-input { font-size: 0.92rem; padding: 0.85rem 0; }
  .search-btn { font-size: 0.78rem; padding: 0.5rem 0.85rem; }
}

/* Très petits écrans (≤400px): densifier sans réduire le root font-size
   (réduire html{font-size} provoquait un rendu « zoomé » / incohérent sur iPhone). */
@media (max-width: 400px) {
  :root {
    --pad-x: 4%;
    --pad-y: 6%;
  }

  html {
    font-size: 100%;
  }
  body {
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Paddings latéraux en %: écrase les 3rem des pages */
  nav,
  .hero,
  .si,
  .cta-band,
  footer,
  .faq-inner,
  .status-inner,
  .portfolio-wrap,
  .contact-wrap,
  .filter-wrap,
  .filter-bar,
  .quote-simulator-section,
  main,
  #contenu {
    padding-left: var(--pad-x) !important;
    padding-right: var(--pad-x) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  nav {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    gap: 2%;
  }
  nav > .logo {
    max-width: 42% !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  nav .site-logo {
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .nav-burger {
    width: 38px;
    min-width: 34px;
    max-width: 40px;
    height: 38px;
    min-height: 34px;
    max-height: 40px;
    flex-shrink: 0;
    margin-left: 0;
  }

  /* Typo mobile stable (rem) — évite le rendu « zoomé » des vw */
  .hero h1 {
    font-size: 1.7rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    width: 100%;
    max-width: 100%;
  }
  h2,
  .cta-band h2,
  .faq-section-title,
  .modal-title {
    font-size: 1.4rem !important;
    line-height: 1.15 !important;
    width: 100%;
    max-width: 100%;
  }
  .hero-sub,
  .ssub,
  .cta-band p,
  .modal-desc,
  .modal-lead,
  .modal-tagline,
  .highlight-chip,
  .pack-desc,
  .scard-desc,
  .sub-desc {
    font-size: 0.95rem !important;
    max-width: 100% !important;
    width: 100%;
  }
  .eyebrow, .modal-eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em;
  }
  .badge, .hero-badge {
    font-size: 0.72rem !important;
    padding: 0.3em 0.75em !important;
    width: auto;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero:not(:has(.social-card)) {
    padding-top: 14% !important;
    padding-bottom: 8% !important;
  }
  .hero:has(.social-card) {
    padding-top: 10% !important;
    padding-bottom: 10% !important;
    min-height: auto !important;
  }
  .si,
  .cta-band,
  .faq-inner {
    padding-top: 8% !important;
    padding-bottom: 8% !important;
  }

  /* Boutons & CTA : 100% largeur, texte lisible (pas de vw agressif) */
  .btn-solid,
  .btn-ghost,
  .btn-blue,
  .btn-outline,
  .pack-cta,
  .scard-cta,
  .cc-btn,
  .filter-btn,
  .billing-btn,
  .search-btn,
  .slot-btn,
  button[type="submit"],
  .cta-acts > *,
  .hero-btns > *,
  .hero-actions > *,
  .hero-acts > *,
  .form-actions > *,
  .modal-cta > *,
  .pack-wants-toggle > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    padding: 0.85rem 1rem !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center !important;
    justify-content: center !important;
  }

  .cta-acts,
  .hero-btns,
  .hero-actions,
  .hero-acts,
  .form-actions,
  .modal-cta,
  .pack-wants-toggle {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.5rem;
  }

  /* Exceptions : petits boutons icône */
  .nav-burger,
  .view-btn,
  .modal-close,
  .faq-ic,
  .milo-widget__launcher {
    width: auto !important;
  }
  .view-toggle {
    display: flex;
    justify-content: center;
    gap: 3%;
    width: 100%;
  }
  .view-btn {
    width: 38px !important;
    min-width: 34px;
    max-width: 40px;
    height: 38px !important;
    min-height: 34px;
    max-height: 40px;
    padding: 0 !important;
  }

  .social-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8% !important;
    padding: 3% !important;
  }
  .social-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2%;
  }
  .s-btn {
    font-size: 0.72rem !important;
    padding: 0.35em 0.2em !important;
    min-width: 0 !important;
  }

  /* Stats */
  .stats {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .stat {
    border-right: none !important;
    border-bottom: 1px solid var(--bdr, rgba(255,255,255,0.08));
    padding: 5% var(--pad-x) !important;
    width: 100%;
    box-sizing: border-box;
  }
  .stat:last-child { border-bottom: none; }
  .stat-n { font-size: 1.75rem !important; }
  .stat-l { font-size: 0.72rem !important; letter-spacing: 0.05em; }

  .stats-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .stats-row .stat-item,
  .stats-row .stat-item.stat-sep {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
    width: auto !important;
  }
  .stats-row .stat-n { font-size: 1.1rem !important; }
  .stats-row .stat-l { font-size: 0.62rem !important; }

  /* Grilles → 1 colonne */
  .services-grid,
  .pack-grid,
  .sub-grid,
  .cat-grid,
  .contact-grid,
  .popular-grid,
  .about-grid,
  .team-grid,
  .values-grid,
  .process-grid,
  .process-row,
  .port-grid,
  .grid-view,
  .testi-grid,
  .story-grid,
  .hero-inner,
  .aide-layout,
  .booking-layout,
  .contact-grid.contact-grid,
  .quote-layout,
  .quote-choice-grid,
  .quote-check-grid,
  .quote-field-grid,
  .modal-grid,
  .modal-stats,
  .slots-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .calendar-weekdays,
  .calendar-dates {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 1% !important;
    width: 100% !important;
  }
  .cal-day {
    font-size: 0.75rem !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 6px;
  }
  .calendar-weekdays span { font-size: 0.68rem !important; }

  .filter-wrap,
  .filter-left {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding-top: 6% !important;
  }

  .ft {
    grid-template-columns: 1fr !important;
    gap: 6%;
    width: 100%;
  }

  /* Portfolio liste: ne pas hériter du padding "carte" */
  .list-view .lcard {
    padding: 0.65rem 0.85rem !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 0.6rem !important;
  }
  .list-view .lcard-thumb {
    width: 48px !important;
    height: 48px !important;
  }

  /* Cartes */
  .pack-card,
  .sub-card,
  .scard,
  .cat-card,
  .member,
  .contact-card,
  .lcard,
  .art-card,
  .pcard,
  .calendar-panel,
  .booking-form-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5% !important;
    box-sizing: border-box !important;
  }

  .pack-price,
  .sub-price { font-size: 1.55rem !important; white-space: normal !important; }
  .scard-price { font-size: 1.25rem !important; white-space: normal !important; }
  .pack-name,
  .sub-name { font-size: 1.15rem !important; }
  .scard-name { font-size: 1.05rem !important; }

  .billing-toggle {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 2% !important;
    gap: 2% !important;
  }

  /* Formulaires */
  .contact-grid,
  .contact-field input:not([type="checkbox"]):not([type="radio"]),
  .contact-field textarea,
  .contact-field select,
  .type-pill,
  .type-pill label,
  .cal-select,
  .verify-code input,
  .search-input,
  .pack-picker-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .contact-type { width: 100%; }
  .type-pill { flex: none !important; min-width: 0 !important; }

  /* Cases à cocher / consentements : jamais pleine largeur */
  .consent-check,
  .contact-consent .consent-check {
    display: grid !important;
    grid-template-columns: 1.35rem minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    justify-content: start !important;
  }
  .consent-check input[type="checkbox"],
  .contact-field input[type="checkbox"],
  .contact-field input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem !important;
    min-width: 1.25rem !important;
    margin: 0.2rem 0 0 !important;
    flex-shrink: 0 !important;
    justify-self: start !important;
  }
  .consent-check > span {
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.5;
  }

  /* Comparatif offres */
  .compare-wrap,
  .cr-cell {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .cr-cell {
    padding: 2% 3% !important;
    font-size: 0.82rem !important;
  }

  /* Secnav dock : largeur au contenu (pas 92% qui bloquait les gestes) */
  .secnav {
    width: auto !important;
    max-width: calc(100% - 1.5rem) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: center;
    overflow-x: auto;
    padding: 0.45rem 0.55rem !important;
    box-sizing: border-box;
  }
  .secnav.ready {
    transform: translateX(-50%) !important;
  }
  .secnav-item { padding: 2% !important; flex: 0 0 auto; }
  .secnav-dot { width: 10px; height: 10px; min-width: 8px; min-height: 8px; }

  /* Modal */
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0;
  }
  .modal-overlay { padding: 0 !important; }
  .modal-body { padding: 5% !important; }
  .modal-cta { flex-direction: column !important; }

  /* FAQ */
  .faq-q {
    font-size: 0.95rem !important;
    gap: 3%;
    padding: 4% 0 !important;
  }
  .faq-a { font-size: 0.9rem !important; }
  .faq-ic {
    width: 28px;
    height: 28px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
  }

  /* Footer */
  footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important; }
  footer .ft { gap: 5% !important; }
  footer .fb2 > span {
    font-size: 0.7rem !important;
    line-height: 1.45 !important;
  }
  footer .fsoc {
    padding-right: 4.25rem !important;
    gap: 0.35rem !important;
  }
  footer .fsi {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex-shrink: 0;
  }

  /* Divers */
  .rdv-banner,
  .pack-selected-preview,
  .pack-option-head {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .pack-option-price { white-space: normal !important; }
  .scard-badge { white-space: normal !important; }
  .ptag { font-size: 0.7rem !important; }

  /* Chiffres / stats : ne jamais couper (ex. 2026 sur 2 lignes) */
  .hc-stat-n,
  .hc-stat-l,
  .sv-year,
  .sv-mini-n,
  .sv-mini-l,
  .stat-n,
  .stat-l,
  .stats-row .stat-n,
  .stats-row .stat-l,
  .tl-year,
  .pack-price,
  .sub-price,
  .scard-price,
  .quote-total {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .hc-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3% !important;
  }
  .hc-stat {
    padding: 4% 3% !important;
    min-width: 0;
  }
  .hc-stat-n { font-size: 1.55rem !important; }
  .hc-stat-l {
    font-size: 0.7rem !important;
    white-space: normal !important;
    line-height: 1.3;
  }
  .sv-year { font-size: 2.75rem !important; }
  .sv-mini-n { font-size: 1.35rem !important; }

  /* Cassure de mots uniquement sur les longs paragraphes */
  .hero-sub,
  .ssub,
  .story-text p,
  .faq-a,
  .modal-desc,
  .modal-lead,
  .modal-tagline,
  .highlight-chip,
  .pack-desc,
  .scard-desc,
  .sub-desc,
  .cta-band p {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* À propos: stats hero (téléphone) */
@media (max-width: 768px) {
  .hc-stat-n,
  .sv-year,
  .sv-mini-n {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .hc-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .hc-stat { padding: 0.85rem 0.5rem; }
  .hc-stat-n { font-size: 1.65rem; }
  .sv-year { font-size: 2.75rem; }
}

/* ============================================================
   PWA / mobile installé (standalone)
   ============================================================ */
/* WebKit/iOS : overflow-x:hidden sur html ET body bloque le scroll vertical.
   On force un document scrollable, safe-area uniquement sur nav/footer. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html {
    height: auto !important;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: clip !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
  }
  /* Scène décorative : ne jamais intercepter le scroll */
  .site-scene,
  .site-scene--auralis,
  .auralis-canvas {
    pointer-events: none !important;
    touch-action: none;
  }
  nav, .nav, header.nav, .site-nav {
    padding-top: max(0.55rem, env(safe-area-inset-top));
  }
  footer, .fb2, .mobile-drawer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  .mobile-drawer {
    padding-top: max(5rem, calc(3.5rem + env(safe-area-inset-top)));
  }
  .nav-links a,
  .btn-solid,
  .btn-ghost,
  .scard-cta,
  .pack-cta,
  .filter-btn,
  .nav-burger,
  .ec-btn {
    min-height: 44px;
  }
}

html.is-pwa,
body.is-pwa {
  width: 100%;
  height: auto !important;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.is-pwa {
  overflow-y: visible !important;
  touch-action: pan-y pinch-zoom;
}

/* Boutons mobiles (tous écrans ≤640) : texte qui wrap correctement */
@media (max-width: 640px) {
  .btn-solid,
  .btn-ghost,
  .btn-blue,
  .btn-outline,
  .pack-cta,
  .scard-cta,
  .nav-sim,
  .nav-cta,
  .ec-btn,
  .filter-btn,
  .billing-btn,
  .search-btn,
  .slot-btn,
  .cc-btn,
  .pack-wants-toggle > *,
  button[type="submit"] {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }

  .cta-acts,
  .hero-btns,
  .hero-actions,
  .hero-acts,
  .ec-hero-actions,
  .form-actions,
  .modal-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 0.65rem;
  }

  .cta-acts > *,
  .hero-btns > *,
  .hero-actions > *,
  .hero-acts > *,
  .ec-hero-actions > *,
  .form-actions > *,
  .modal-cta > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }

  .billing-toggle {
    flex-wrap: wrap;
    width: 100%;
  }
  .billing-btn {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
  }
}

/* Touch: désactive hover sticky sur vrais appareils tactiles */
@media (hover: none) and (pointer: coarse) {
  .scard:hover,
  .pack-card:hover,
  .sub-card:hover {
    transform: none;
  }
  a, button, .scard-cta, .pack-cta {
    -webkit-tap-highlight-color: rgba(45, 142, 255, 0.18);
  }
}

/* Formulaires mobiles: éviter zoom iOS (font ≥16px) */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}