.tu-bc{font-family:'Poppins','Raleway',sans-serif;color:#1D1D1F;max-width:1180px;margin:0 auto;padding:4px 16px 0;position:relative;z-index:5}
.tu-bc *{box-sizing:border-box}
.tu-bread{font-size:13px;color:#8a8a92;padding:10px 0 2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tu-bread a{color:#8a8a92;text-decoration:none}
.tu-bread a:hover{color:#C30538}
.tu-bread span{color:#c9c9d0}
.tu-bread b{color:#1D1D1F;font-weight:600}
.tu-bc .eyebrow{display:inline-block;font-family:'Raleway',sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C30538;margin-bottom:14px}
.tu-bc h1{font-family:'Raleway',sans-serif;font-weight:900;font-size:clamp(26px,3.5vw,40px);line-height:1.1;margin:0 0 16px;color:#1D1D1F}
.tu-bc h2{font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(21px,2.5vw,28px);line-height:1.18;margin:0 0 10px}
.tu-bc p{font-size:16px;line-height:1.7;color:#3a3a40}
.tu-hero{display:grid;grid-template-columns:1.05fr.95fr;gap:38px;align-items:center;padding:18px 0 24px}
.tu-hero .lead{font-size:18px;color:#4a4a52;margin:0 0 20px}
.tu-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.tu-pill{display:inline-flex;align-items:center;gap:7px;background:#fbf2f4;border:1px solid #f0d3d9;color:#8A0426;font-weight:600;font-size:13px;border-radius:999px;padding:8px 14px}
.tu-pill:before{content:'';width:7px;height:7px;border-radius:50%;background:#C30538}
.tu-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.tu-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border-radius:10px;padding:14px 26px;text-decoration:none;transition:transform.15s,box-shadow.15s,background.15s;cursor:pointer;border:0}
.tu-btn-primary{background:#C30538;color:#fff;box-shadow:0 8px 22px rgba(195,5,56,.25)}
.tu-btn-primary:hover{background:#a30430;transform:translateY(-2px);color:#fff}
.tu-btn-ghost{background:#fff;color:#1D1D1F;border:1.5px solid #d9d9de}
.tu-btn-ghost:hover{border-color:#1D1D1F;transform:translateY(-2px);color:#1D1D1F}
.tu-hero-img{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(29,29,31,.22);aspect-ratio:16/10}
.tu-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.tu-hero-tag{position:absolute;left:16px;bottom:16px;background:rgba(29,29,31,.80);color:#fff;font-size:12px;font-weight:600;border-radius:8px;padding:7px 12px;border-left:3px solid #C30538}
.tu-sec{padding:30px 0;border-top:1px solid #ededf0}
.tu-sec .kick{font-family:'Raleway',sans-serif;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C30538;margin-bottom:8px}
.tu-rich{font-size:16px;line-height:1.75;color:#3a3a40}
.tu-rich p{margin:0 0 14px}
.tu-rich ul,.tu-rich ol{margin:0 0 16px;padding-left:4px;list-style:none}
.tu-rich ul li{position:relative;padding-left:28px;margin-bottom:9px}
.tu-rich ul li:before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:#C30538}
.tu-rich ol{padding-left:22px;list-style:decimal}
.tu-rich ol li{margin-bottom:9px}
.tu-rich strong{color:#1D1D1F}
.tu-rich h2,.tu-rich h3,.tu-rich h4{font-family:'Raleway',sans-serif;color:#1D1D1F;margin:20px 0 8px;font-weight:700}
.tu-rich .lead{font-size:18px;color:#1D1D1F}
.tu-rich img{max-width:100%;border-radius:10px}
.tu-grid{display:grid;gap:18px}
.tu-g3{grid-template-columns:repeat(3,1fr)}
.tu-card{background:#fff;border:1px solid #e9e9ee;border-radius:14px;padding:22px;transition:transform.15s,box-shadow.15s}
.tu-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(29,29,31,.08)}
.tu-card h3{font-family:'Raleway',sans-serif;font-weight:700;font-size:17px;margin:0 0 7px;color:#1D1D1F}
.tu-card p{font-size:14px;line-height:1.6;color:#56565e;margin:0}
.tu-band{position:relative;border-radius:18px;overflow:hidden;margin:30px 0;min-height:270px;display:flex;align-items:center}
.tu-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tu-band .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,18,.93) 0%,rgba(20,16,18,.66) 45%,rgba(20,16,18,.22) 100%)}
.tu-band .in{position:relative;z-index:2;color:#fff;padding:38px;max-width:640px}
.tu-band h2{color:#fff}
.tu-band p{color:#e7e2e4;font-size:15.5px}
.tu-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:18px}
.tu-stat .v{font-family:'Raleway',sans-serif;font-weight:900;font-size:30px;color:#fff;line-height:1}
.tu-stat .l{font-size:12px;letter-spacing:.04em;color:#c9c2c5;text-transform:uppercase;margin-top:4px}
.tu-faq details{border:1px solid #e9e9ee;border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.tu-faq summary{cursor:pointer;font-weight:700;font-size:15.5px;padding:16px 20px;list-style:none;color:#1D1D1F;display:flex;justify-content:space-between;align-items:center;gap:14px}
.tu-faq summary::-webkit-details-marker{display:none}
.tu-faq summary:after{content:'+';font-size:22px;color:#C30538;font-weight:400;line-height:1}
.tu-faq details[open] summary:after{content:'−'}
.tu-faq details[open] summary{border-bottom:1px solid #f0f0f3}
.tu-faq .a{padding:14px 20px 18px;font-size:14.5px;color:#56565e;line-height:1.65}
.tu-devis{background:linear-gradient(180deg,#fafafb,#f3f4f7);border:1px solid #e7e7ec;border-radius:18px;padding:34px;margin:34px 0;scroll-margin-top:96px}
.tu-devis h2{margin-bottom:6px}
.tu-devis .sub{color:#56565e;font-size:15px;margin:0 0 20px}
.tu-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border:1px dashed #d9b9c1;border-radius:12px;padding:12px 16px;margin-bottom:22px}
.tu-ctx .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8a8a92;font-weight:700}
.tu-badge{display:inline-flex;align-items:center;gap:6px;background:#C30538;color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:6px 13px}
.tu-badge.alt{background:#1D1D1F}
.tu-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tu-form .full{grid-column:1/-1}
.tu-field label{display:block;font-size:13px;font-weight:600;color:#3a3a40;margin-bottom:6px}
.tu-field select{width:100%;border:1px solid #d6d6dc;border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff}.tu-field select:focus{outline:none;border-color:#C30538;box-shadow:0 0 0 3px rgba(195,5,56,.12)}.tu-field input,.tu-field textarea{width:100%;border:1px solid #d6d6dc;border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;transition:border.15s,box-shadow.15s}
.tu-field input:focus,.tu-field textarea:focus{outline:none;border-color:#C30538;box-shadow:0 0 0 3px rgba(195,5,56,.12)}
.tu-req{color:#C30538}
.tu-form-msg{display:none;border-radius:12px;padding:16px 18px;font-size:15px;font-weight:600;margin-top:6px}
.tu-form-msg.ok{display:block;background:#e9f7ee;border:1px solid #b8e3c6;color:#1c7a3e}
.tu-form-msg.err{display:block;background:#fdecef;border:1px solid #f4c2cd;color:#b3243f}
.tu-cta-dark{background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.6px) 0 0/22px 22px,linear-gradient(135deg,#1D1D1F,#2a2a2e);border-radius:18px;padding:38px;text-align:center;color:#fff;margin:34px 0 10px}
.tu-cta-dark h2{color:#fff;margin-bottom:8px}
.tu-cta-dark p{color:#c9c2c5;margin:0 auto 22px;max-width:560px}
@media(max-width:860px){.tu-hero{grid-template-columns:1fr;gap:20px}.tu-g3{grid-template-columns:1fr}.tu-form{grid-template-columns:1fr}}

/* --- TU 31/07/2026 : barre de conversion mobile pendant le consentement ---
   La vue 20583 pose html.tu-cookie-shown .tu-mcta{display:none!important} plus bas dans la page.
   On remonte la specificite (.tu-mcta.d-lg-none) pour gagner independamment de l'ordre. */
@media (max-width: 991.98px) {
  html.tu-cookie-shown .tu-mcta.d-lg-none { display: flex !important; }
  .tu-mcta.d-lg-none a:last-child { padding-right: 76px; }
}


/* ============================================================
   TU MOTION v1 - 11/08/2026 - micro-interactions et animations
   Charte : Carmin #C30538 - Encre #1D1D1F - Raleway/Poppins
   Zero JS. Desactive si prefers-reduced-motion. Charge sitewide
   via custom_code_head (site 4). Navigateurs sans
   animation-timeline : affichage normal, aucune degradation.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

html{scroll-behavior:smooth}

/* --- Boutons : elevation + lueur carmin --- */
#wrap .btn,.tu-btn{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s cubic-bezier(.2,.7,.3,1),background-color .22s,border-color .22s,color .22s}
#wrap .btn:hover{transform:translateY(-2px)}
#wrap .btn:active,.tu-btn:active{transform:translateY(0) scale(.985)}
#wrap .btn-primary:hover,.tu-btn-primary:hover{box-shadow:0 12px 26px -10px rgba(195,5,56,.55)}
#wrap .btn:focus-visible,.tu-btn:focus-visible{outline:2px solid #C30538;outline-offset:2px}

/* --- Cartes : lift + ombre profonde + liseret carmin --- */
#wrap .card,.tu-card{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s cubic-bezier(.2,.7,.3,1),border-color .28s}
#wrap .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(29,29,31,.30)}
.tu-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(29,29,31,.16);border-color:rgba(195,5,56,.35)}
#wrap .card .card-img-top{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
#wrap .card:hover .card-img-top{transform:scale(1.04)}

/* --- Boutique : zoom image + ombre sur les cellules produit --- */
#wrap .oe_product_image{overflow:hidden}
#wrap .oe_product .oe_product_image img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
#wrap .oe_product:hover .oe_product_image img{transform:scale(1.05)}
#wrap .oe_product{transition:box-shadow .28s}
#wrap .oe_product:hover{box-shadow:0 14px 34px -16px rgba(29,29,31,.25)}

/* --- Navigation : soulignement carmin anime --- */
#top_menu>li>a.nav-link{position:relative}
#top_menu>li>a.nav-link:after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:#C30538;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
#top_menu>li>a.nav-link:hover:after,#top_menu>li>a.nav-link:focus:after{transform:scaleX(1)}

/* --- Heros et bandeaux photo : zoom tres leger au survol --- */
.tu-hero-img img,.tu-band>img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tu-hero:hover .tu-hero-img img{transform:scale(1.025)}
.tu-band:hover>img{transform:scale(1.03)}

/* --- FAQ : apparition douce de la reponse --- */
.tu-faq details[open] .a{animation:tuFade .35s ease both}

/* --- Barre mobile et logos accreditations --- */
.tu-mcta a{transition:transform .2s}
.tu-mcta a:active{transform:scale(.97)}
.tu-logos__track:hover{animation-play-state:paused}

/* --- Liens : transition de couleur douce --- */
#wrap a,footer a{transition:color .18s ease}

/* --- En-tete : ombre progressive au defilement (Chromium) --- */
@supports (animation-timeline: scroll()) {
header#top{animation:tuHeadShadow linear both;animation-timeline:scroll(root);animation-range:0 140px}
}

/* --- Revelation au scroll, sans JS (Chromium 115+) ---
   Les proprietes individuelles translate/opacity sont animees,
   la propriete transform reste libre pour les survols. */
@supports (animation-timeline: view()) {
#wrap section .container>.row,.tu-sec,.tu-card,#wrap .card,#wrap .oe_product{animation:tuRise .7s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 0% entry 28%}
}

@keyframes tuRise{from{opacity:.001;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes tuFade{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes tuHeadShadow{from{box-shadow:0 0 0 0 rgba(29,29,31,0)}to{box-shadow:0 8px 24px -12px rgba(29,29,31,.22)}}

}

/* --- TU MOTION v1.1 - vocabulaire des pages TU Kit (accueil, poles) --- */
@media (prefers-reduced-motion: no-preference) {
.o-btn{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s cubic-bezier(.2,.7,.3,1),background-color .22s,color .22s,border-color .22s}
.o-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(195,5,56,.45)}
.o-btn:active{transform:translateY(0) scale(.985)}
.o-btn:focus-visible{outline:2px solid #C30538;outline-offset:2px}
.o-card,.div-card,.diff-item,.tu-quick,.trust-bar__item{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s cubic-bezier(.2,.7,.3,1),border-color .28s}
.o-card:hover,.div-card:hover,.diff-item:hover{transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(29,29,31,.18)}
.tu-quick:hover{transform:translateY(-3px)}
.div-card__media{overflow:hidden}
.div-card__bg{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.div-card:hover .div-card__bg{transform:scale(1.05)}
.link-arrow{transition:color .18s ease,letter-spacing .18s ease}
/* Revelation : fondu pur sur les sections (aucun translate, aucun risque
   pour les descendants sticky/fixed), montee douce sur les petites cartes. */
@supports (animation-timeline: view()) {
#wrap .o-section{animation:tuFadeIn .6s ease both;animation-timeline:view();animation-range:entry 0% entry 20%}
.o-card,.div-card,.diff-item{animation:tuRise .7s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 0% entry 30%}
}
@keyframes tuFadeIn{from{opacity:.001}to{opacity:1}}
}

/* rev 11-08-2026 b */

/* --- TU RTL v1 - interface arabe (11/08/2026) --- */
html[lang^="ar"] body,html[lang^="ar"] p,html[lang^="ar"] .lead,html[lang^="ar"] .tu-rich{font-family:'Tajawal','Poppins','Segoe UI',system-ui,sans-serif}
html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,html[lang^="ar"] h4,html[lang^="ar"] .o-btn,html[lang^="ar"] .tu-btn{font-family:'Tajawal','Raleway',sans-serif}
html[lang^="ar"] .eyebrow,html[lang^="ar"] .kick,html[lang^="ar"] .tu-sec .kick,html[lang^="ar"] .o-stat__lbl,html[lang^="ar"] .expnet__lbl,html[lang^="ar"] .o-card__num,html[lang^="ar"] .tl-meta{letter-spacing:0}
html[lang^="ar"] .tu-band .ov{background:linear-gradient(270deg,rgba(20,16,18,.93) 0%,rgba(20,16,18,.66) 45%,rgba(20,16,18,.22) 100%)}
html[lang^="ar"] .ph-scrim{background:linear-gradient(258deg,rgba(13,13,15,.92) 0%,rgba(13,13,15,.8) 42%,rgba(13,13,15,.5) 78%,rgba(13,13,15,.64) 100%)}
html[lang^="ar"] .o-hero--photo .o-hero__scrim{background:linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,0) 20%),linear-gradient(260deg,rgba(11,11,13,.86) 0%,rgba(11,11,13,.6) 34%,rgba(11,11,13,.24) 62%,rgba(11,11,13,.12) 82%,rgba(11,11,13,.42) 100%)}
html[lang^="ar"] .tu-hero-tag{left:auto;right:16px;border-left:0;border-right:3px solid #C30538}
html[lang^="ar"] .div-card__tag{left:auto;right:14px}
html[lang^="ar"] #top_menu>li>a.nav-link:after{transform-origin:right}
html[lang^="ar"] .tu-rich ul li{padding-left:0;padding-right:28px}
html[lang^="ar"] .tu-rich ul li:before{left:auto;right:0}
html[lang^="ar"] .tu-wa-btn{left:auto;right:22px}
@media(max-width:768px){html[lang^="ar"] .tu-wa-btn{left:auto;right:16px}}
html[lang^="ar"] .tu-mcta.d-lg-none a:last-child{padding-right:8px;padding-left:76px}
html[lang^="ar"] #tu-lang{right:auto;left:0;border-radius:0 0 10px 0}
@media(max-width:991.98px){html[lang^="ar"] #tu-lang{border-radius:0 10px 0 0}}
html[lang^="ar"] a[href^="tel:"],html[lang^="ar"] .tu-stat .v,html[lang^="ar"] .o-stat__num{direction:ltr;unicode-bidi:embed}

/* --- TU RTL v1.1 - specificite renforcee (11/08/2026) --- */
html[lang^="ar"] #tu-kit h1,html[lang^="ar"] #tu-kit h2,html[lang^="ar"] #tu-kit h3,html[lang^="ar"] #tu-kit h4,html[lang^="ar"] .tu-bc h1,html[lang^="ar"] .tu-bc h2,html[lang^="ar"] #wrap h1,html[lang^="ar"] #wrap h2,html[lang^="ar"] #wrap h3{font-family:'Tajawal','Raleway',sans-serif}
html[lang^="ar"] #tu-kit body,html[lang^="ar"] #tu-kit p,html[lang^="ar"] #tu-kit .lead,html[lang^="ar"] #wrap p,html[lang^="ar"] #wrap .lead{font-family:'Tajawal','Poppins','Segoe UI',sans-serif}
html[lang^="ar"] #tu-kit .eyebrow,html[lang^="ar"] #tu-kit .kick,html[lang^="ar"] #wrap .eyebrow,html[lang^="ar"] .tu-sec .kick,html[lang^="ar"] #tu-kit .o-stat__lbl,html[lang^="ar"] #tu-kit .o-card__num,html[lang^="ar"] #tu-kit .tl-meta,html[lang^="ar"] #tu-kit .expnet__lbl{letter-spacing:0}
html[lang^="ar"] #tu-kit .o-btn,html[lang^="ar"] .tu-btn,html[lang^="ar"] #tu-kit .div-badge{font-family:'Tajawal','Raleway',sans-serif;letter-spacing:0}

/* TU HERO LOGOS mobile v1 - compaction cartouches accreditations (13/08/2026) */
@media (max-width:575.98px){
 #wrap .cert-strip{gap:8px!important;row-gap:8px!important}
 #wrap .cert-strip>span[style]{padding:4px 8px!important;border-radius:7px!important}
 #wrap .cert-strip>span[style] img{height:20px!important;max-width:96px!important}
}
/* rev 13-08-2026 hero-mobile */

/* ================================================================
   TU CINEMA v1 — grammaire de mouvement cinematographique (14/08/2026)
   Selecteurs cales sur la structure REELLE du site, relevee au navigateur :
     bandeau  = section.o-hero > div.o-hero__inner > (eyebrow, h1, ..., cert-strip)
     diaporama= div.o-hero__slides > div.o-hero__slide  [DEJA anime : tuHeroFade 32s
                avec zoom — on n'y touche PAS, sous peine de casser le diaporama]
     grilles  = div.grid-4 / div.grid-3 (cartes .o-card), div.o-stats
     bandeaux de fiche = .tu-band .photo  (eux n'ont aucun mouvement : on leur
                donne le zoom lent et la parallaxe)
   Regles absolues : opacite + transform uniquement ; ouverture en CSS pur (donc
   aucun saut de contenu) ; coupure sur prefers-reduced-motion ; parallaxe et
   inclinaison au-dessus de 992px seulement ; jamais sur formulaire ni paiement.
   ================================================================ */

:root{ --tu-film: cubic-bezier(.16,1,.3,1); }

@keyframes tuCineRise{
  from{opacity:0;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:none}
}
@keyframes tuCineKen{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}
}

/* --- 01. OUVERTURE : la sequence du bandeau, en CSS pur -------- */
#wrap .o-hero__inner > *{
  animation:tuCineRise .95s var(--tu-film) both;
}
#wrap .o-hero__inner > *:nth-child(1){animation-delay:.06s}
#wrap .o-hero__inner > *:nth-child(2){animation-delay:.17s}
#wrap .o-hero__inner > *:nth-child(3){animation-delay:.28s}
#wrap .o-hero__inner > *:nth-child(4){animation-delay:.37s}
#wrap .o-hero__inner > *:nth-child(5){animation-delay:.46s}
#wrap .o-hero__inner > *:nth-child(6){animation-delay:.58s}
#wrap .o-hero__inner > *:nth-child(n+7){animation-delay:.66s}

/* --- 02. La photo respire — UNIQUEMENT la ou rien ne bouge ----- */
/* Le diaporama d'accueil a deja son propre zoom : exclu volontairement. */
@media (min-width:768px){
  /* structure reelle relevee au navigateur : .tu-band > img (sans classe),
     surmontee de .ov (voile) et .in (contenu) */
  #wrap .tu-band > img{
    animation:tuCineKen 22s ease-out both;
    will-change:transform;
  }
}

/* --- 03. Le trait carmin decouvre l'image (classe posee par JS) */
#wrap .tu-cine-wipe{position:relative;overflow:hidden}
#wrap .tu-cine-wipe > img{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--tu-film);
}
#wrap .tu-cine-wipe::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
  background:#C30538;transform:scaleY(0);transform-origin:top;
  transition:left 1s var(--tu-film), transform .3s ease;
  pointer-events:none;
}
#wrap .tu-cine-wipe.tu-cine-vu > img{clip-path:inset(0 0 0 0)}
#wrap .tu-cine-wipe.tu-cine-vu::after{left:100%;transform:scaleY(1)}

/* --- 04. Les blocs entrent en cascade au defilement ------------ */
#wrap .tu-cine-stagger > *{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .7s ease, transform .9s var(--tu-film);
}
#wrap .tu-cine-stagger.tu-cine-vu > *{opacity:1;transform:none}
#wrap .tu-cine-stagger.tu-cine-vu > *:nth-child(2){transition-delay:.09s}
#wrap .tu-cine-stagger.tu-cine-vu > *:nth-child(3){transition-delay:.18s}
#wrap .tu-cine-stagger.tu-cine-vu > *:nth-child(4){transition-delay:.27s}
#wrap .tu-cine-stagger.tu-cine-vu > *:nth-child(5){transition-delay:.36s}
#wrap .tu-cine-stagger.tu-cine-vu > *:nth-child(6){transition-delay:.45s}
#wrap .tu-cine-stagger.tu-cine-vu > *:nth-child(n+7){transition-delay:.52s}

/* --- 05. Le projecteur isole un choix -------------------------- */
@media (hover:hover) and (min-width:992px){
  #wrap .tu-cine-spot:hover > *{opacity:.42;transition:opacity .35s ease}
  #wrap .tu-cine-spot:hover > *:hover{opacity:1}
}

/* --- 06. La carte prend de l'epaisseur (transform pose en JS) -- */
@media (hover:hover) and (min-width:992px){
  #wrap .tu-cine-tilt{transform-style:preserve-3d}
  #wrap .tu-cine-tilt:hover{box-shadow:0 26px 60px -20px rgba(29,29,31,.34)}
}

/* --- 07. Le tiret de section se trace lui-meme ------------------
   Les .eyebrow portent DEJA un tiret carmin de 22 px en ::before (defini dans
   une feuille inline de la page, donc plus forte que celle-ci dans la cascade :
   d'ou le !important, strictement limite aux elements que le JS a marques).
   On n'ajoute aucun element : on fait DESSINER celui qui existe quand la
   section entre dans l'ecran. Le translateY(-1px) d'origine est preserve. */
#wrap .tu-cine-rule::before{
  transform:translateY(-1px) scaleX(0)!important;
  transform-origin:left center;
  transition:transform .7s var(--tu-film);
}
#wrap .tu-cine-rule.tu-cine-vu::before{transform:translateY(-1px) scaleX(1)!important}
@media (prefers-reduced-motion: reduce){
  #wrap .tu-cine-rule::before{transform:translateY(-1px) scaleX(1)!important;transition:none!important}
}

/* --- 08. Parallaxe : bandeaux de fiche uniquement -------------- */
@media (min-width:992px){
  #wrap .tu-cine-par{will-change:transform}
}

/* --- garde-fous ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  #wrap .o-hero__inner > *{animation:none!important}
  #wrap .tu-band > img{animation:none!important}
  #wrap .tu-cine-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  #wrap .tu-cine-wipe > img{clip-path:none!important}
  #wrap .tu-cine-wipe::after{display:none}
}
@media (scripting: none){
  #wrap .tu-cine-stagger > *{opacity:1!important;transform:none!important}
}
/* filet d'ouverture pose par le JS apres 2 s (voir TU-CINEMA-JS) */
#wrap.tu-cine-ouvert .o-hero__inner > *{animation:none!important;opacity:1;transform:none}

/* pages ou la concentration prime : le JS pose .tu-no-cine sur #wrap */
#wrap.tu-no-cine .o-hero__inner > *{animation:none!important}
#wrap.tu-no-cine .tu-cine-stagger > *{opacity:1!important;transform:none!important}

/* l'arabe s'ecrit de droite a gauche : les gestes lateraux sont en miroir */
html[lang^="ar"] #wrap .tu-cine-rule::before{transform-origin:right center}
html[lang^="ar"] #wrap .tu-cine-wipe > img{clip-path:inset(0 0 0 100%)}
html[lang^="ar"] #wrap .tu-cine-wipe.tu-cine-vu > img{clip-path:inset(0 0 0 0)}
html[lang^="ar"] #wrap .tu-cine-wipe::after{left:auto;right:0}
html[lang^="ar"] #wrap .tu-cine-wipe.tu-cine-vu::after{right:100%;left:auto}

/* rev TU CINEMA v1 — 14-08-2026 */