/* ==========================================================================
   Terres de Talents : marges latérales du texte (2026-09-30)
   L'audit des marges a mesuré le texte à 10 px du bord sur téléphone (33 textes sur 57 à
   l'accueil, toutes les fiches produits des rayons, le pied de page) et à 37 px sur ordinateur.
   Cause : la gouttière commune --tdt-gutter valait clamp(10px,2.6vw,44px) (tdt-flat-typo.php),
   et une série de règles « padding:10px!important » l'imposaient aussi en dur sous 1024 / 900 /
   768 px. Une seule gouttière fluide pour tout le site, celle de l'agence : 20 px sur téléphone,
   jusqu'à 72 px sur grand écran. La largeur maxi (--tdt-shell, 1760 px) ne change pas.
   Sélecteurs « html body … » : passent devant les règles de tdt-flat-typo.php (« #main .x »,
   « body #main .x .y ») sans toucher aux conteneurs imbriqués, qui gardent leur marge nulle
   (un .hp-car rangé dans .hp-products-inner reste à 0 : la gouttière est portée par le parent).
   ========================================================================== */

html:root{--tdt-gutter:clamp(20px,5vw,72px)}

/* Titre des pages légales posé sur la photo (CGV) : collait aux deux bords sur téléphone. */
html body .tdt-legal-ban-ov{padding-left:var(--tdt-gutter);padding-right:var(--tdt-gutter)}

/* Tablette et téléphone : les conteneurs forcés à 10 px reprennent la gouttière. */
@media (max-width:1024px){
  html body #main .hp-hero-inner,
  html body #main .hp-concept-inner,
  html body #main .hp-white-inner,
  html body #main .hp-section>.hp-car,
  html body #main .hp-products-inner:not(:has(.hp-car)),
  html body .tdt-shop-container,
  html body .tdt-cp-wrap,
  html body.tax-product_cat .tdt-cp-wrap{
    padding-left:var(--tdt-gutter)!important;
    padding-right:var(--tdt-gutter)!important;
  }
}

/* Page Paniers garnis (styles dans le contenu de la page) : 10 px sous 900 px. */
@media (max-width:900px){
  html body .tdt-pg-wrap{
    padding-left:var(--tdt-gutter)!important;
    padding-right:var(--tdt-gutter)!important;
  }
}

@media (max-width:768px){
  html body #main .hp-products-header,
  html body #main .hp-cats-grid,
  html body #main .hp-cats-title,
  html body #main div[style*="grid-template-columns:repeat(4,1fr)"],
  html body #main div[style*="margin:-80"],
  html body #main .hp-section:has(#car-team)>h2,
  html body #main .hp-section:has(#car-team)>p,
  html body #main .hp-section:has(#car-team)>div:not(.hp-car),
  html body .tdt-cat-inner,
  html body .tdt-ct-wrap,
  html body .tdt-legal-content,
  html body .tdt-footer .tdt-footer-inner,
  html body.woocommerce-checkout .wp-block-woocommerce-checkout,
  html body.woocommerce-cart .wp-block-woocommerce-cart,
  html body.woocommerce-order-received .woocommerce,
  html body.single-product .content-container.site-container,
  html body.single-product .related.products,
  html body.single-product .up-sells.products{
    padding-left:var(--tdt-gutter)!important;
    padding-right:var(--tdt-gutter)!important;
  }
  /* Carrousels de produits : deux cartes entières par écran, calculées sur la largeur
     réelle de la bande (l'ancien calc(50vw - 18px) supposait 10 px de marge). */
  html body #main .hp-car .hp-car-t ul.products li.product{
    flex:0 0 calc(50% - 6px)!important;
    width:calc(50% - 6px)!important;
    max-width:calc(50% - 6px)!important;
  }
}