/* ============================================================
   mobile.css — adaptation aux petits écrans
   ------------------------------------------------------------
   Claude Design produit des styles en ligne, sans media query :
   les grilles restent figées à trois ou quatre colonnes et les
   marges à 48 px, quelle que soit la largeur.

   Corriger cela dans les pages serait perdu au prochain export.
   Cette feuille est donc injectée à la construction et cible les
   valeurs exactes rencontrées dans les attributs style. D'où les
   !important : c'est la seule façon de passer devant un style en
   ligne, et le procédé est déjà celui de site-fx.js pour le menu.

   Deux ruptures :
     1024 px — les grilles larges passent à deux colonnes
      760 px — tout passe sur une colonne. Même seuil que la
               séquence du bandeau, qui bascule sur son jeu mobile.

   Si une nouvelle grille apparaît dans Claude Design, ajouter sa
   valeur exacte ici. La règle générique de la rupture 760 la
   couvrira déjà : seule la rupture 1024 est énumérative.
   ============================================================ */

/* Garde-fou : rien ne doit déborder horizontalement. */
img, video, canvas, svg { max-width: 100%; }

/* ---------- Tablette et petit portable ---------- */
@media (max-width: 1024px) {

  /* Trois et quatre colonnes deviennent deux. */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1.6fr 1fr 1fr 1.2fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Les paires asymétriques s'équilibrent avant de se rompre. */
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1.3fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Marges de section : 48 px devient 32 px. */
  [style*="padding:100px 48px"] { padding: 80px 32px !important; }
  [style*="padding:96px 48px"]  { padding: 76px 32px !important; }
  [style*="padding:88px 48px"]  { padding: 70px 32px !important; }
  [style*="padding:80px 48px"]  { padding: 64px 32px !important; }
  [style*="padding:72px 48px"]  { padding: 58px 32px !important; }
  [style*="padding:64px 48px"]  { padding: 52px 32px !important; }
  [style*="padding:56px 48px"]  { padding: 46px 32px !important; }
  [style*="padding:44px 48px"]  { padding: 38px 32px !important; }
  [style*="padding:16px 48px"]  { padding: 16px 32px !important; }

  /* Les grands écarts se resserrent. */
  [style*="gap:88px"] { gap: 48px !important; }
  [style*="gap:80px"] { gap: 44px !important; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {

  /* Une seule colonne, quelle que soit la grille d'origine.
     Règle générique volontaire : elle couvre aussi les grilles
     qui apparaîtront plus tard sans qu'on ait à y revenir. */
  [style*="grid-template-columns:"] {
    grid-template-columns: 1fr !important;
  }

  /* Les colonnes d'étiquettes perdent leur largeur fixe. */
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns:90px 1.2fr 1fr"],
  [style*="grid-template-columns:90px 1fr 2fr"] {
    gap: 8px !important;
  }

  [style*="padding:100px 48px"] { padding: 56px 20px !important; }
  [style*="padding:96px 48px"]  { padding: 54px 20px !important; }
  [style*="padding:88px 48px"]  { padding: 50px 20px !important; }
  [style*="padding:80px 48px"]  { padding: 46px 20px !important; }
  [style*="padding:72px 48px"]  { padding: 42px 20px !important; }
  [style*="padding:64px 48px"]  { padding: 40px 20px !important; }
  [style*="padding:56px 48px"]  { padding: 36px 20px !important; }
  [style*="padding:44px 48px"]  { padding: 32px 20px !important; }
  [style*="padding:16px 48px"]  { padding: 14px 20px !important; }

  /* Cartes et blocs internes. */
  [style*="padding:32px 28px"] { padding: 24px 20px !important; }
  [style*="padding:36px 32px"] { padding: 26px 20px !important; }

  [style*="gap:88px"] { gap: 32px !important; }
  [style*="gap:80px"] { gap: 30px !important; }
  [style*="gap:48px"] { gap: 26px !important; }
  [style*="gap:40px"] { gap: 24px !important; }
  [style*="gap:32px"] { gap: 22px !important; }

  /* Menu : six liens ne tiennent pas sur une ligne à 375 px.
     Ils passent à la ligne plutôt que de déborder ou d'être
     masqués — la navigation reste entière et accessible. */
  [data-nav-inner] {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    column-gap: 16px !important;
    padding: 12px 16px !important;
  }
  [data-nav-inner] > div:last-child {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    column-gap: 14px !important;
  }

  /* Les boutons pleine largeur évitent les lignes bancales. */
  [style*="padding:16px 30px"] {
    padding: 15px 22px !important;
    justify-content: center !important;
  }
}