/* =========================================================
   Kapelgy — adaptation automatique téléphone / tablette / PC
   Chargé en dernier (voir functions.php) : filet de sécurité commun
   à toutes les pages. Aucune règle ici ne change l'affichage PC.
   ========================================================= */

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

/* Médias et champs : jamais plus larges que leur conteneur */
img, video { max-width: 100%; height: auto; }
svg, canvas, iframe, embed, object { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
input, select, textarea { max-width: 100%; }

/* Les mots longs (e-mails, URL) passent à la ligne au lieu d'élargir la page */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote) { overflow-wrap: break-word; }

/* Éléments de grille / flex : autorisés à rétrécir (par défaut min-width:auto
   les empêche de passer sous la taille de leur contenu et débordent sur mobile) */
:where([class*="grid"], [class*="cards"], [class*="stats"], [class*="methods"],
       [class*="-row"], [class*="-inner"], [class*="-list"]) > * { min-width: 0; }

/* Encoches (iPhone en paysage) */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Menu mobile : hauteur réelle de l'écran (barre d'adresse mobile comprise) */
@supports (height: 100dvh) {
  .nav-drawer { max-height: calc(100dvh - 68px); }
}

/* ── Tablette et téléphone ─────────────────────────────── */
@media (max-width: 900px) {
  /* Cibles tactiles : au moins ~40 px de haut pour les liens de navigation secondaire */
  footer a:not([class*="social"]):not([class*="logo"]) { display: inline-block; padding-block: 8px; }
  .a-toc a { display: inline-block; padding-block: 8px; }
}

@media (max-width: 768px) {
  /* 16 px minimum dans les champs : évite le zoom automatique d'iOS au focus */
  input, select, textarea { font-size: 16px; }

  /* Petits libellés : pas en dessous de 11 px */
  .certif-chip, .footer-status-text, .status-indicator, .tag, .feat-badge, .feat-pq,
  .plan-badge, .tech-stage-num, .msp-note, .section-tag, .badge, .info-label,
  .legal-toc-label, .legal-progress-label, .ks-garantie-tag, .ks-palier-tag { font-size: 11px !important; }

  .editorial-section { padding: 56px 0; }
  .e-stat-card { padding: 24px 14px; }
}

@media (max-width: 600px) {
  #contact-page .contact-grid { gap: 32px; }
  #contact-page form.kapelgy-form { padding: 20px; }
}

@media (max-width: 480px) {
  .editorial-stats { grid-template-columns: 1fr; }
}