/* ================================================================
   TU DESIGN — lot issu de la revue design du 15-16/09/2026
   (4 regards hors ligne sur captures reelles + 2 verificateurs par lot).
   Fichier SEPARE de tu_bc_produit.css (146477) pour un retrait d'un geste :
   supprimer le <link> dans website.custom_code_head (site 4).
   Toutes les regles sont scopees #wrapwrap ou par page ; aucune ne touche le site 6.
   ================================================================ */

/* 1. Chiffres alignes. Raleway sert par defaut des chiffres elzeviriens :
      ISO 9oo1, 2o18, loi o9-o8 a cote de ISO 9001 en Poppins. */
html body{font-variant-numeric:lining-nums}
#wrapwrap .o-stat__num,#wrapwrap .kpi b,#wrapwrap .tu-stat .v,#wrapwrap .o-card__num,#wrapwrap .diff-num{font-variant-numeric:tabular-nums lining-nums!important;font-feature-settings:"tnum" 1,"lnum" 1,"kern" 1!important}

/* 2. En-tete : deux etages au lieu de trois (la rangee ne portait que 4 icones sociales
      aux couleurs des marques) ; grille alignee sur TU Kit (1280/32) UNIQUEMENT sur les pages
      a bandeau TU Kit, pour ne pas decaler /shop, /blog, /appointment ; recherche en gris de la
      charte ; « Espace client » a l'encre, avec son etat de survol explicite. */
@media (min-width:992px){
  #wrapwrap header#top .o_header_sales_two_top{display:none!important}
}
@media (min-width:1200px){
  #wrapwrap:has(#tu-kit .o-hero__inner,#tu-kit .page-header__inner) header#top .container:not(.h-100):not(.o_tu_mega):not(.o_main_nav){max-width:1280px;padding-left:32px;padding-right:32px}
}
#wrapwrap header#top .o_searchbar_form .oe_search_box,
#wrapwrap header#top .o_searchbar_form .oe_search_button{background-color:#F5F5F7!important}
#wrapwrap header#top a[href="/web/login"].btn{border-color:#D2D2D7!important;color:#1D1D1F}
#wrapwrap header#top a[href="/web/login"].btn:hover,
#wrapwrap header#top a[href="/web/login"].btn:focus-visible,
#wrapwrap header#top a[href="/web/login"].btn:active{background-color:#F5F5F7;border-color:#1D1D1F!important;color:#1D1D1F}

/* 3. Un seul rouge sur fond sombre : le rose #FF6B8E des mots-cles passe au carmin eclairci
      #E23A63 (lisible sur l'encre) ; les surtitres passent en blanc a 82 %, leur tiret reste carmin. */
#wrapwrap #tu-kit .o-hero h1 .span-red,
#wrapwrap #tu-kit .page-header .span-red,
#wrapwrap #tu-kit .o-section--dark h2 .span-red,
#wrapwrap #tu-kit h2 span[style*="#ff5c7a"]{color:#E23A63!important;background-image:none}
html[data-main-object="website.page(80,)"] #wrapwrap #tu-kit .o-hero__inner>h1+div[style]{color:#E23A63!important}
html[data-main-object="website.page(80,)"] #wrapwrap #tu-kit span[style*="#ff7a98"]{color:rgba(255,255,255,.92)!important}
#wrapwrap #tu-kit .o-hero .eyebrow,
#wrapwrap #tu-kit .page-header .eyebrow,
#wrapwrap #tu-kit .o-section--dark .eyebrow{color:rgba(255,255,255,.82)}
#wrapwrap #tu-kit .page-header .eyebrow::before,
#wrapwrap #tu-kit .o-section--dark .eyebrow::before{background:#C30538}

/* 4. Accueil : le titre tenait 4 lignes en 68 px et repoussait les boutons sous la ligne de
      flottaison en 1366x768. Trois lignes, boutons visibles. Portee : la seule page 80. */
@media (min-width:992px){
  html[data-main-object="website.page(80,)"] #wrapwrap #tu-kit .o-hero{padding-top:72px}
  html[data-main-object="website.page(80,)"] #wrapwrap #tu-kit .o-hero h1{font-size:clamp(44px,4.1vw,60px);max-width:780px;margin-bottom:20px}
}

/* 5. Vignettes de logos d'accreditation des bandeaux (bureau) : meme hauteur, meme rayon. */
@media (min-width:992px){
  #wrapwrap #tu-kit .page-header__inner span[style*="background:#fff"]:has(>img),
  #wrapwrap #tu-kit .cert-strip>span[style]:has(>img){height:46px;min-width:76px;justify-content:center;border-radius:8px!important;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)!important}
  #wrapwrap #tu-kit .page-header__inner span[style*="background:#fff"]>img,
  #wrapwrap #tu-kit .cert-strip>span[style]>img{height:30px!important}
}

/* 6. Accueil bureau : la video d'ouverture etait peinte AU-DESSUS du diaporama des 3 divisions,
      qui defilait sans jamais etre vu. Elle passe la main apres un tour (fondu a 10,6 s).
      En mouvement reduit : pas de boucle ; la diapositive 1 ou le poster prend le relais. */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  html[data-main-object="website.page(80,)"] #tu-kit .o-hero--photo>video{animation:tuVidRelais 1.4s ease-in 10.6s forwards}
}
@keyframes tuVidRelais{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html[data-main-object="website.page(80,)"] #wrapwrap #tu-kit .o-hero>video{display:none!important}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){
  html:not([data-main-object="website.page(80,)"]) #wrapwrap #tu-kit .o-hero:has(>video){background:#0b0b0d url(/web/image/136956/hero-poster.jpg) center/cover no-repeat}
  html:not([data-main-object="website.page(80,)"]) #wrapwrap #tu-kit .o-hero:has(>video)>video{display:none!important}
}
/* fin du lot TU DESIGN 22/09/2026 */