/* ==========================================================================
   Nexoria Mobile — adaptation mobile commune à TOUTES les pages.

   Les pages étaient construites à l'échelle du bureau : espacements de 56 à
   80 px entre sections, titres de 34 à 46 px, cartes très hautes. Sur un
   téléphone — les trois quarts des visiteurs — cela donnait des pages de 10
   à 13 écrans où il fallait beaucoup faire défiler pour pas grand-chose.

   Tout ce fichier est enfermé dans des media queries : l'affichage sur
   ordinateur n'est jamais modifié. Les règles restent volontairement
   génériques ; chaque page peut les affiner dans son propre <style>.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- 1. Respiration entre les sections -------------------------------
     C'est le levier principal : les sections portent un padding en ligne
     (52 à 80 px), d'où le !important. */
  section { padding-top: 34px !important; }
  section:last-of-type { padding-bottom: 56px !important; }

  /* --- 2. Titres à l'échelle du téléphone ----------------------------- */
  h1 { font-size: clamp(25px, 7vw, 32px) !important; line-height: 1.14 !important; }
  h2 { font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.18 !important; }
  h3 { font-size: 16px !important; }

  /* --- 3. Cartes et encadrés : moins de rembourrage -------------------- */
  [style*="border-radius:22px"],
  [style*="border-radius:24px"],
  [style*="border-radius: 22px"],
  [style*="border-radius: 24px"] { border-radius: 18px !important; }

  /* --- 4. Formulaires : confortables au doigt sans être énormes -------- */
  /* 16px : en dessous, Safari iOS zoome automatiquement sur le champ à la saisie et
     la page reste zoomée. Un sélecteur d'élément perdait contre les classes de champs
     des pages (.ck-in, .cp-in, .nx-in à 14,5px) : d'où le !important, seul moyen de
     l'emporter sans dupliquer la liste des classes de chaque gabarit. */
  input, select, textarea { font-size: 16px !important; }
  label { font-size: 12.5px; }

  /* --- 5. Rien ne doit dépasser de l'écran ----------------------------
     min-width:auto est le piège classique des éléments de grille et de
     flex : ils refusent de rétrécir sous la largeur de leur contenu et
     provoquent un défilement horizontal. */
  main, section, article, aside, footer, header { max-width: 100%; }
  img, video, svg, table { max-width: 100%; }
  [style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0; }
  [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0; }

  /* --- 6. Tableaux : défilement horizontal dans leur cadre ------------- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Très petits téléphones : on resserre encore d'un cran. */
@media (max-width: 420px) {
  section { padding-top: 28px !important; padding-left: 18px !important; padding-right: 18px !important; }
  h1 { font-size: clamp(23px, 6.6vw, 28px) !important; }
  h2 { font-size: clamp(19px, 5.4vw, 23px) !important; }
}