/**
 * OPS — correctifs d'affichage du theme (pendant CSS de assets/js/ops-fixes.js).
 *
 * CHARGEMENT : depuis templates/_partials/stylesheets.tpl, avec le meme "?v=" que
 * les autres assets (variable ops_assets_version). Fichier volontairement SEPARE de
 * custom.css, qui appartient a l'agence : ses livraisons ecraseraient nos correctifs.
 *
 * FIX 28/09/2026 — defilement horizontal sur mobile.
 * Constate sur Pixel 9a (1080x2424 physiques => 412px de largeur CSS) : le document
 * faisait 452px pour un ecran de 412px, d'ou une page qui glisse lateralement et des
 * elements coupes au bord droit. Le theme est cale sur des largeurs superieures.
 */

@media (max-width: 767px) {

  /* 1) Fleches des carrousels — elles sont positionnees HORS de leur conteneur
        (left:-70px pour la precedente, left:382px pour la suivante alors que le
        conteneur ne fait que 352px). Sur desktop elles se logent dans les marges ;
        sur mobile il n'y a plus de marges, et la fleche "suivante" poussait le
        document 40px au-dela de l'ecran. On les ramene aux bords du conteneur.
        Le !important est necessaire : les declarations du theme sont plus specifiques. */
  .slick-slider .slick-prev.slick-arrow { left: 0 !important; right: auto !important; }
  .slick-slider .slick-next.slick-arrow { left: auto !important; right: 0 !important; }

  /* 2) Fiche produit — sous 768px la colonne d'informations n'a plus de largeur
        imposee (la regle width:50% est en min-width:768px) : elle prend donc la
        largeur de son contenu, 411px, plus 30px de marge interieure = 441px dans une
        ligne de 412px. Etant centree, elle debordait des deux cotes. max-width la
        contraint a la largeur reellement disponible. */
  .row.product-block > .col-md-6 { max-width: 100%; }

  /* 3) Bandeau promotionnel du header — son texte est en white-space:nowrap et
        reclame 529px alors que le bandeau n'en fait que 412, debordement masque et
        AUCUNE animation de defilement (animation:none). La fin du message etait donc
        coupee en permanence sur mobile, numero de telephone compris ; sur desktop
        (1440px) les 529px tiennent, d'ou un defaut invisible au bureau.
        On autorise le passage a la ligne : le texte tient alors sur deux lignes
        (25px) dans la hauteur existante du bandeau (30px). */
  .opartmarquee__slide p {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}