/* ==========================================================================
   KTI Events - Correctifs responsive mobile
   Ajoute le 2026-08-07. Auteur : assistant, sur validation de Mehdi.

   REVERSIBILITE : supprimer ce fichier suffit a annuler tous les correctifs
   (le <link> dans kti-design-canvas.php est conditionne par file_exists()).
   Sauvegarde du template : kti-design-canvas.php.bak.responsive-20260807_204439

   PORTEE : uniquement <= 760px. Aucun contenu editorial modifie.
   Les selecteurs ciblent les styles inline generes par React, d'ou !important.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- P1-a | Lignes de services : grille 3 colonnes qui ne se replie jamais.
     Pages : accueil EN/FR/ES + /services/ et traductions.
     Symptome : viewport 382px vs contenu 470px, texte et fleche hors ecran. */
  a[style*="grid-template-columns: 1.25fr 1.75fr 40px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 28px 0 !important;
    align-items: start !important;
  }

  /* Le titre est en white-space:nowrap : il imposait une largeur mini de ~230px
     a la premiere colonne, ce qui poussait les deux autres hors du viewport. */
  a[style*="grid-template-columns: 1.25fr 1.75fr 40px"] > h3 {
    white-space: normal !important;
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.15 !important;
  }

  /* La fleche revient dans le flux, sous le texte. */
  a[style*="grid-template-columns: 1.25fr 1.75fr 40px"] > span {
    justify-self: start !important;
  }

  /* --- P2 | Vignette de survol en position absolue (affordance desktop).
     Sur mobile elle chevauche le texte et n'est pas atteignable (pointer-events:none). */
  a[style*="grid-template-columns: 1.25fr 1.75fr 40px"] > div[style*="position: absolute"] {
    display: none !important;
  }

  /* --- P1-d | Bloc "Our method / Notre methode" : grille 2 colonnes 1.4fr/1.6fr.
     Meme cause que P1-a (titre nowrap). Debordement residuel +29px. */
  div[style*="grid-template-columns: 1.4fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 28px 0 !important;
    align-items: start !important;
  }

  div[style*="grid-template-columns: 1.4fr 1.6fr"] > h3 {
    white-space: normal !important;
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.15 !important;
  }

  /* --- P1-e | Garde-fou : tout titre force en nowrap en style inline impose une
     largeur mini superieure au viewport. Sur mobile, on autorise le retour ligne. */
  h1[style*="white-space: nowrap"],
  h2[style*="white-space: nowrap"],
  h3[style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* --- P1-b | /contact/ : grille 2 colonnes 1.2fr/1fr. Debordement +137px. */
  div[style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* --- P1-c | /about/ : frise historique en 5 colonnes fixes. Debordement +351px. */
  div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Les cartes de la frise imposaient min-height:380px : inutile en pleine largeur. */
  div[style*="grid-template-columns: repeat(5, 1fr)"] > div[style*="min-height: 380px"] {
    min-height: 0 !important;
    padding: 32px 24px !important;
  }

}