/* ==========================================================================
   Sentaxis — couche responsive
   Les pages sont écrites en styles inline. On les surcharge ici via des
   sélecteurs d'attribut [style*="..."] + !important (une règle author
   !important l'emporte sur un style inline non-important).

   IMPORTANT : support.js reconstruit le DOM et normalise les styles inline
   (« prop: value », espace après les virgules, couleurs en rgb()). Les
   chaînes ciblées ci-dessous sont donc les formes NORMALISÉES telles
   qu'elles apparaissent dans le DOM, pas telles qu'écrites dans le .dc.html.
   Exemple : source « grid-template-columns:repeat(3,1fr) »
             DOM    « grid-template-columns: repeat(3, 1fr) »
   ========================================================================== */

/* --- Garde-fous globaux ------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* ==========================================================================
   <= 1024px — tablette paysage
   ========================================================================== */
@media (max-width: 1024px) {
  /* Gouttières latérales. On ne touche qu'aux marges horizontales : le
     rythme vertical des sections est conservé. « px 44px » couvre tous les
     « padding: <vertical> 44px [...] », y compris le hero (« 0px 44px 90px »). */
  [style*="px 44px"] { padding-left: 28px !important; padding-right: 28px !important; }
  [style*="right: 44px"] { right: 28px !important; }

  /* Grilles denses : 4 et 5 colonnes -> 2 */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   <= 960px — barre de navigation
   ========================================================================== */
@media (max-width: 960px) {
  /* La nav se replie en lignes plutot que de comprimer ses libelles :
     sans cela « Se connecter » se casse en deux et chevauche « Entreprise ». */
  nav { flex-wrap: wrap !important; row-gap: 12px !important; }
  nav a { white-space: nowrap !important; }
  nav [style*="gap: 44px"] { gap: 18px !important; flex-wrap: wrap !important; }
  nav [style*="gap: 30px"] { gap: 16px !important; flex-wrap: wrap !important; }
  nav [style*="gap: 22px"] { gap: 12px !important; }
}

/* Entre 761 et 960px la nav tient en une ou deux lignes : on empeche ses deux
   groupes de se comprimer, ils passent a la ligne proprement. En dessous il
   faut au contraire les laisser se compresser, sinon le groupe de liens
   deborde et « Entreprise » se retrouve coupe hors ecran. */
@media (min-width: 761px) and (max-width: 960px) {
  nav > div { flex-shrink: 0 !important; }
}

/* ==========================================================================
   <= 900px — tablette portrait
   ========================================================================== */
@media (max-width: 900px) {
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grilles asymétriques (texte + visuel) -> empilées */
  [style*="2.4fr 1fr"],
  [style*="1.6fr 1fr"],
  [style*="1.2fr 1fr"],
  [style*="1fr 1.15fr"],
  [style*="0.9fr 1.1fr"],
  [style*="1fr 1.1fr 1fr"],
  [style*="64px 1fr 1.4fr"],
  [style*="1fr 46px 1fr 46px 1fr"] { grid-template-columns: 1fr !important; }

  /* --- Hero : recomposition de la scene camera --------------------------
     En desktop le hero est une composition en deux colonnes : le texte a
     gauche, la scene camera (cadres de detection, etiquettes, lignes de
     comptage, zone SVG) a droite a partir de 78% de la largeur. Sous 900px
     le texte prend toute la largeur et vient se superposer a la scene.

     Choix : on ne masque rien et on n'attenue rien. La scene recoit sa
     propre bande en haut du hero et le texte passe dessous.

     Il faut aussi la recadrer. Ses elements sont positionnes en pourcentage
     mais dimensionnes en pixels fixes : un cadre de 112px fait 8% de large
     sur un hero de 1360px et 30% sur un mobile de 375px. A positions
     inchangees ils se chevauchent donc entre eux. On les replace un par un
     pour une lecture en portrait — meme scene, meme cadrage relatif entre
     un element et son etiquette, aucune mise a l'echelle : les libelles
     gardent leur taille reelle et toutes les animations tournent. */
  [style*="min-height: 92vh"] {
    min-height: 0 !important;
    padding-top: 480px !important;   /* bande reservee a la scene */
  }
  [style*="z-index: 1; pointer-events: none"] {
    top: 46px !important;            /* sous la legende du flux camera */
    bottom: auto !important;
    height: 460px !important;
  }

  /* Le SVG (lignes de comptage, tripwire, polygone de zone) suit la bande :
     il est en inset:0 / viewBox 100x100, ses reperes restent donc aux memes
     pourcentages. Les etiquettes ci-dessous sont replacees en consequence,
     chacune restant accrochee au repere qu'elle designe.
     Les deux libelles calés sur un repere de droite sont ancres par `right`
     plutot que par `left` : leur repere SVG se termine a 92% et 96% de la
     bande, un ancrage a droite les suit donc a toutes les largeurs. Ils sont
     aussi forces sur une ligne — replies sur deux, ils descendaient sur le
     tripwire en dessous de 375px. */
  [style*="left: 60%; top: 8%"] {              /* LIGNE COMPTAGE -> au-dessus de sa ligne */
    left: auto !important; right: 8% !important; top: 0.5% !important;
    white-space: nowrap !important;
  }
  [style*="left: 47%; top: 15%"] {             /* SENS DETECTE -> sous son tripwire */
    left: 40% !important; top: 14% !important;
    white-space: nowrap !important;
  }
  [style*="left: 78%; top: 45%"] {             /* ZONE A -> au-dessus du polygone */
    left: auto !important; right: 4% !important; top: 40% !important;
    white-space: nowrap !important;
  }

  [style*="left: 78%; top: 14%"] { left: 6%  !important; top: 24% !important; }  /* cadre PERSONNE */
  [style*="left: 88%; top: 34%"] { left: 60% !important; top: 24% !important; }  /* cadre ALERTE   */
  [style*="left: 78%; top: 58%"] { left: 30% !important; top: 70% !important; }  /* cadre VEHICULE */
  [style*="left: 76%; top: 46%"] { left: 8%  !important; top: 60% !important; }  /* trainee de mouvement */
}

/* ==========================================================================
   <= 760px — grand mobile
   ========================================================================== */
@media (max-width: 760px) {
  /* Les rangées flex passent à la ligne au lieu de déborder. Les éléments
     positionnés en absolu sont exclus : ce sont les décors du hero. */
  [style*="display: flex"]:not([style*="position: absolute"]),
  [style*="display: inline-flex"] { flex-wrap: wrap !important; }

  [style*="min-height: 62vh"] { min-height: 52vh !important; }
}

/* ==========================================================================
   <= 620px — mobile
   ========================================================================== */
@media (max-width: 620px) {
  [style*="px 44px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="right: 44px"] { right: 18px !important; }

  /* Toute grille restante passe sur une seule colonne */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Séparateurs verticaux devenus faux une fois les cellules empilées */
  [style*="border-right: 1px solid rgba(255, 255, 255, 0.07)"] { border-right: 0 !important; }

  /* Titres de section (le hero utilise déjà clamp()) */
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size: 26px"] { font-size: 22px !important; }
  [style*="font-size: 22px"] { font-size: 20px !important; }

  /* Boutons pleine largeur : lisibilité et cibles tactiles */
  [style*="padding: 14px 26px"],
  [style*="padding: 14px 24px"] { flex: 1 1 100% !important; text-align: center !important; }

  nav a { padding-top: 4px !important; padding-bottom: 4px !important; }
}