/* ==========================================================================
   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;
  }
}

/* Téléphone : 10 px de chaque côté sur TOUTES les pages (2026-11-03). D'abord les pages de produits seules
   (« mets 10 à droite, 10 à gauche… sur les pages où il y a des produits »), puis tout le site le soir même
   (« faut que toutes les pages aient le même padding et que ça soit très court »). Les blocs qui avaient leur
   marge en dur reprennent la gouttière. La fiche produit avait 20 px en dur (fiche-produit-1.css). */
@media (max-width:768px){
  html:root,
  html body{--tdt-gutter:10px}
  /* Accueil : bannière et atouts (20 px en dur dans tdt-accueil-mobile.php), annonces (5vw dans tdt-annonces.php) */
  html body #main div.hp-hero,
  html body #main div.tdt-atouts,
  html body #main section.tdt-an{
    padding-left:var(--tdt-gutter)!important;
    padding-right:var(--tdt-gutter)!important;
  }
  html body.single-product div.product{
    padding-left:var(--tdt-gutter)!important;
    padding-right:var(--tdt-gutter)!important;
  }
}