/* Adaptation smartphone / tablette — appliquée à toutes les pages.
   Les mises en page sont écrites en styles inline : on les surcharge ici par sélecteurs d'attributs. */
@media (max-width: 820px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* Grilles : tout passe sur une seule colonne */
  [style*="grid-template-columns: repeat(12"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  [style*="grid-template-columns: repeat(5"] > :last-child:nth-child(odd),
  [style*="grid-template-columns: repeat(4"] > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  [style*="grid-column"] { grid-column: 1 / -1 !important; }
  /* Une seule colonne : on suit l'ordre du HTML (titre avant le texte) */
  [style*="grid-row"] { grid-row: auto !important; }
  [style*="grid-template-columns: 56px 1fr"] { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 16px !important; padding: 24px 20px !important; }

  /* Titres */
  h1 { font-size: clamp(38px, 11.5vw, 54px) !important; line-height: 1 !important; overflow-wrap: break-word; }
  h2 { font-size: clamp(28px, 8.5vw, 38px) !important; line-height: 1.05 !important; overflow-wrap: break-word; }
  h3 { overflow-wrap: break-word; }

  h1 > span[style*="font-size: 76px"] { font-size: clamp(30px, 9vw, 44px) !important; }
  h1 > span[style*="font-size: 112px"] { font-size: clamp(46px, 14.5vw, 66px) !important; }

  /* Espacements verticaux */
  [style*="padding: 148px 0"] { padding-top: 120px !important; padding-bottom: 56px !important; }
  [style*="padding: 96px 0"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 64px 64px"] { padding: 32px 24px !important; }
  [style*="padding-bottom: 80px"] { padding-bottom: 48px !important; }

  /* Références : vignettes l'une sous l'autre, en 16/9 */
  .prod-row { flex-direction: column !important; aspect-ratio: auto !important; gap: 14px !important; }
  .prod-item { flex: none !important; width: 100% !important; }
  .prod-item .ref-thumb { flex: none !important; aspect-ratio: 16 / 9; }
  /* Première section sous le menu : laisse la place au menu */
  [style*="position: absolute; top: 0; left: 0; right: 0; z-index: 20"] + [style*="padding: 96px 0"] { padding-top: 128px !important; }

  /* Rangées flex qui doivent passer à la ligne */
  [style*="justify-content: space-between"] { flex-wrap: wrap; }
  [style*="gap: 64px"] { gap: 32px !important; }

  /* Fond fixe : non supporté sur iPhone/iPad -> calque fixe à la place */
  [style*="background-attachment: fixed"] {
    isolation: isolate;
    background-size: 0 0 !important;
    background-attachment: scroll !important;
  }
  [style*="background-attachment: fixed"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: inherit;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  [style*="padding: 32px 26px 34px"] { padding: 22px 16px 24px !important; gap: 28px !important; }
  [style*="font-size: 24px; letter-spacing: 0; line-height: 1.05"] { font-size: 20px !important; overflow-wrap: anywhere; hyphens: auto; }
  [style*="padding: 26px 20px"] { padding: 20px 16px !important; }
  [style*="padding: 26px 20px"] span { overflow-wrap: anywhere; }

  /* Vidéos d'une page projet : une par ligne sur téléphone */
  .media-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Boutons trop larges */
  .btn { white-space: normal; text-align: center; }

  /* Accueil : les deux boutons du haut, plus petits (sur une seule ligne si possible) */
  [style*="display: flex; gap: 16px; margin-top: 12px"] { gap: 8px !important; flex-wrap: wrap; }
  [style*="display: flex; gap: 16px; margin-top: 12px"] .btn { font-size: 12px !important; padding: 10px 12px !important; gap: 6px !important; white-space: nowrap; letter-spacing: 0; border-width: 1.5px; }

  /* Accueil : « Et pour produire quoi ? » sur 2 lignes */
  [style*="padding: 26px 48px"] { padding: 22px 16px !important; }
  h3[style*="font-size: 40px; letter-spacing: 0; text-align: center"] { font-size: clamp(22px, 6.6vw, 28px) !important; line-height: 1.1 !important; text-wrap: balance; }
  img, video { max-width: 100%; }
}
@media (max-width: 480px) {
  [style*="font-size: 22px; padding: 20px 34px"] { font-size: 18px !important; padding: 16px 24px !important; }
}