/* ============================================================================
   Tinker — styles partagés : responsive, menu mobile, animations, parallaxe
   (Les pages utilisent des styles "inline" ; ici on ne fait que des ajouts
   ciblés — d'où quelques !important pour surpasser l'inline sur mobile.)
   ============================================================================ */

html, body { max-width: 100%; }
/* height:auto → l'attribut height des <img> (ajouté pour le CLS) ne force plus
   la hauteur ; les images à ratio (galeries) reprennent leur bonne taille.
   Les images en style inline height:100% (avant/après) gardent la priorité. */
img { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }
/* Décalage pour que la barre fixe ne cache pas les ancres (#contact, etc.) */
:target { scroll-margin-top: 78px; }

/* ------------------------------------------------------------------ */
/*  BARRE DE MENU FIXE (apparaît au défilement)                       */
/* ------------------------------------------------------------------ */
.tk-topbar{
  position:fixed; top:0; left:0; right:0; z-index:150; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 6vw;
  background:rgba(10,10,11,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.tk-topbar.tk-show{ transform:none; }
.tk-topbar-logo{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; flex:none; }
.tk-logo-badge{ width:30px; height:30px; border-radius:7px; background:#fff; color:#0a0a0b; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; letter-spacing:-.02em; }
.tk-logo-word{ font-weight:700; letter-spacing:.3em; font-size:14px; }
.tk-topbar-right{ display:flex; align-items:center; gap:clamp(14px,2vw,24px); }
.tk-topbar .tk-nav{ display:flex; gap:clamp(14px,1.6vw,22px); font-size:14px; }
.tk-topbar .tk-nav a{ color:rgba(255,255,255,.82); text-decoration:none; white-space:nowrap; }
.tk-topbar .tk-nav a:hover{ color:#fff; }
.tk-topbar-cta{ white-space:nowrap; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; }
.tk-topbar .tk-burger-bar{ color:#fff; }
@media (max-width:860px){
  .tk-topbar .tk-nav, .tk-topbar .tk-topbar-cta{ display:none; }
}
@media (min-width:861px){
  .tk-topbar .tk-burger-bar{ display:none; }
}

/* ------------------------------------------------------------------ */
/*  BOUTON « REMONTER EN HAUT »                                        */
/* ------------------------------------------------------------------ */
.tk-top{
  position:fixed; left:20px; bottom:20px; z-index:60;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:#1A6BE5; color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, filter .2s ease;
}
.tk-top.tk-show{ opacity:1; visibility:visible; transform:none; }
.tk-top:hover{ filter:brightness(1.08); }

/* Texte réservé aux lecteurs d'écran / moteurs (ancrage des liens en icône) */
.tk-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ------------------------------------------------------------------ */
/*  LOGO ANIMÉ : TINKER ⇄ Rénovation (fondu + flou, en boucle)         */
/* ------------------------------------------------------------------ */
.tk-logoswap{
  position:relative; display:inline-grid; white-space:nowrap; vertical-align:middle;
  /* La grille empile les deux mots et prend automatiquement la largeur du plus long */
}
.tk-logoswap .tk-lw{ grid-area:1/1; display:inline-block; }
.tk-logoswap .tk-lw2{ opacity:0; }   /* caché par défaut, même cellule grille */
.tk-logoswap .tk-lw1{ animation: tk-logo1 5.2s ease-in-out infinite; }
.tk-logoswap .tk-lw2{ animation: tk-logo2 5.2s ease-in-out infinite; }
@keyframes tk-logo1{
  0%, 34%  { opacity:1; filter:blur(0); }
  44%, 88% { opacity:0; filter:blur(5px); }
  100%     { opacity:1; filter:blur(0); }
}
@keyframes tk-logo2{
  0%, 34%  { opacity:0; filter:blur(5px); }
  44%, 88% { opacity:1; filter:blur(0); }
  100%     { opacity:0; filter:blur(5px); }
}
@media (prefers-reduced-motion: reduce){
  .tk-logoswap .tk-lw1, .tk-logoswap .tk-lw2{ animation:none; }
  .tk-logoswap .tk-lw2{ opacity:0; }   /* reste "TINKER" */
}

/* ------------------------------------------------------------------ */
/*  BLOG / ACTUALITÉS                                                  */
/* ------------------------------------------------------------------ */
.tk-navlabel{ display:none; }        /* lien nav Actualités : icône seule sur desktop, texte repris dans le tiroir mobile */

.tk-blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(24px,3vw,40px); }
.tk-post{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(10,10,11,.08); border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .3s ease, box-shadow .3s ease; }
.tk-post:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(10,10,11,.35); }
.tk-post-img{ aspect-ratio:16/10; width:100%; object-fit:cover; background:#e9e7e1; display:block; }
.tk-post-body{ padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; gap:10px; flex:1; }
.tk-post-meta{ font-size:13px; color:#8a887f; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.tk-post-title{ font-size:clamp(19px,2.1vw,23px); font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:0; }
.tk-post-ex{ font-size:15px; color:#54545a; line-height:1.55; margin:0; }
.tk-post-more{ margin-top:auto; padding-top:6px; color:#1A6BE5; font-weight:700; font-size:14px; }

.tk-article{ max-width:760px; margin:0 auto; }
.tk-article p{ font-size:clamp(16px,1.9vw,18px); line-height:1.75; color:#26262a; margin:0 0 clamp(18px,2.4vw,26px); }
.tk-article h2{ font-size:clamp(23px,3vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:clamp(30px,4vw,44px) 0 clamp(12px,1.6vw,18px); }
.tk-article ul{ margin:0 0 clamp(18px,2.4vw,26px); padding-left:22px; }
.tk-article li{ font-size:clamp(16px,1.9vw,18px); line-height:1.7; color:#26262a; margin-bottom:8px; }
.tk-article img{ max-width:100%; border-radius:16px; }

/* ------------------------------------------------------------------ */
/*  BANDEAU DE CONSENTEMENT COOKIES                                    */
/* ------------------------------------------------------------------ */
.tk-cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:300; max-width:560px; margin:0 auto;
  background:#0b1a30; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 24px 60px -22px rgba(0,0,0,.7); padding:clamp(16px,2.4vw,22px);
  transform:translateY(160%); opacity:0; visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease, visibility .42s; }
.tk-cookie.tk-show{ transform:none; opacity:1; visibility:visible; }
.tk-cookie-t{ margin:0 0 14px; font-size:14px; line-height:1.55; color:#d6d6db; }
.tk-cookie-t a{ color:#9cc2ff; text-decoration:underline; text-underline-offset:2px; }
.tk-cookie-b{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.tk-cookie-b button{ font-family:inherit; cursor:pointer; border-radius:999px; padding:11px 22px; font-size:14px; font-weight:600;
  border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; transition:filter .2s ease, background .2s ease; }
.tk-cookie-b button:hover{ background:rgba(255,255,255,.08); }
.tk-cookie-b .tk-cookie-acc{ background:#1A6BE5; border-color:transparent; }
.tk-cookie-b .tk-cookie-acc:hover{ filter:brightness(1.08); background:#1A6BE5; }

/* ------------------------------------------------------------------ */
/*  HERO SALLE DE BAIN : contenu centré + bandeau chiffres centré      */
/* ------------------------------------------------------------------ */
.tk-hc{ text-align:center; }
.tk-hc h1, .tk-hc p{ margin-left:auto !important; margin-right:auto !important; }
.tk-hc div[style*="flex-wrap:wrap"]{ justify-content:center !important; }
.tk-hc div[style*="minmax(160px,1fr)"]{ display:flex !important; justify-content:center; flex-wrap:wrap; gap:clamp(24px,5vw,64px); }
.tk-hc div[style*="minmax(160px,1fr)"] > *{ padding:clamp(22px,2.6vw,30px) 0 0 0 !important; text-align:center; }

/* ------------------------------------------------------------------ */
/*  FOND DÉGRADÉ ANIMÉ WebGL (section Pourquoi Tinker)                 */
/* ------------------------------------------------------------------ */
.tk-ag{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.tk-ag canvas{ display:block; width:100%; height:100%; }
.tk-ag-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.28) 0%, rgba(10,10,11,.48) 100%); }

/* ------------------------------------------------------------------ */
/*  HERO ACCUEIL — halos bleus animés + trame de points               */
/* ------------------------------------------------------------------ */
.tk-hero-fx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.tk-hero-fx .tk-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.tk-hero-fx .tk-glow-a{
  width:56vw; height:56vw; max-width:660px; max-height:660px; left:-10vw; top:-12vh;
  background:radial-gradient(circle, rgba(26,107,229,.60), rgba(26,107,229,0) 70%);
  animation:tk-drift-a 22s ease-in-out infinite alternate;
}
.tk-hero-fx .tk-glow-b{
  width:48vw; height:48vw; max-width:560px; max-height:560px; right:-8vw; bottom:-16vh;
  background:radial-gradient(circle, rgba(92,155,255,.45), rgba(92,155,255,0) 70%);
  animation:tk-drift-b 27s ease-in-out infinite alternate;
}
.tk-hero-fx .tk-hero-grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0%, #000 28%, transparent 76%);
          mask-image:radial-gradient(120% 85% at 50% 0%, #000 28%, transparent 76%);
}
@keyframes tk-drift-a{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(7vw,5vh) scale(1.14); } }
@keyframes tk-drift-b{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-6vw,-4vh) scale(1.12); } }
@media (max-width:760px){ .tk-hero-fx .tk-glow{ animation:none; opacity:.5; } }
@media (prefers-reduced-motion: reduce){ .tk-hero-fx .tk-glow{ animation:none; } }

/* ------------------------------------------------------------------ */
/*  MENU MOBILE (hamburger + tiroir)                                   */
/* ------------------------------------------------------------------ */
.tk-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:9px; margin-left:6px;
  background:transparent; border:0; cursor:pointer; color:inherit; flex:none;
}
.tk-burger span{
  display:block; height:2px; width:100%; background:currentColor; border-radius:2px;
  transition:transform .28s ease, opacity .2s ease;
}
.tk-burger.tk-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.tk-burger.tk-open span:nth-child(2){ opacity:0; }
.tk-burger.tk-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.tk-drawer{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,8,14,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.tk-drawer.tk-open{ opacity:1; visibility:visible; }
.tk-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(84vw,340px);
  background:#0b1a30; color:#fff; transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; gap:2px; padding:92px 26px 28px; overflow-y:auto;
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.7);
}
.tk-drawer.tk-open .tk-drawer-panel{ transform:none; }
.tk-drawer-panel a{
  color:#fff; text-decoration:none; font-size:18px; font-weight:600; letter-spacing:-.01em;
  padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.1);
}
.tk-drawer-panel a.tk-cta{
  margin-top:18px; border:0; background:#1A6BE5; border-radius:999px; text-align:center;
  padding:15px 20px; font-weight:600;
}

@media (max-width:860px){
  [data-mainnav]{ display:none !important; }
  .tk-burger{ display:flex; }
  /* Mobile : on retire le bouton "Devis 48h" de la barre du haut (il reste
     accessible dans le tiroir du burger et dans le hero). Ça libère la place
     pour le logo animé TINKER ⇄ RÉNOVATION, qui débordait sur ce bouton. */
  .tk-headcta{ display:none !important; }
}

/* ------------------------------------------------------------------ */
/*  RÉGLAGES MOBILE (lisibilité / compacité)                           */
/* ------------------------------------------------------------------ */
@media (max-width:600px){
  /* Le comparateur avant/après passe en format un peu plus haut sur mobile */
  [data-ba-box]{ aspect-ratio:4/5 !important; }
}

/* Hero plus aéré sur mobile : titre moins compact, plus d'espace autour */
@media (max-width:680px){
  #top h1{ line-height:1.08 !important; margin-top:.18em !important; margin-bottom:.5em !important; }
  /* un peu plus d'air sous l'accroche et le sous-titre du hero */
  #top > section:first-of-type p{ margin-top:.2em !important; }
  /* Rapproche le titre "01 — …" de sa description (promesses / garanties) */
  div[style*="color:#5C9BFF; font-weight:600; font-size:16px; margin-bottom:16px"]{ margin-bottom:6px !important; }
}
@media (max-width:600px){
  /* Titres héros : on borne la taille mini pour éviter tout débordement */
  section h1{ font-size:clamp(32px, 8.5vw, 44px) !important; }
  section h2{ font-size:clamp(28px, 7.5vw, 40px) !important; }
}

/* Empêche tout débordement horizontal issu des grands titres */
h1, h2 { overflow-wrap:break-word; word-break:break-word; }

/* ------------------------------------------------------------------ */
/*  CARROUSEL PHOTOS (glissable + flèches + points)                    */
/* ------------------------------------------------------------------ */
.tk-car{ position:relative; display:block !important; }
.tk-car-vp{ overflow:hidden; cursor:grab; }
.tk-car-vp.tk-grabbing{ cursor:grabbing; }
.tk-car-full .tk-car-vp{ cursor:default; }
.tk-car-track{ display:flex; transition:transform .5s cubic-bezier(.2,.6,.2,1); will-change:transform; }
.tk-car-slide{ flex:0 0 100%; min-width:0; box-sizing:border-box; padding:0 8px; }
.tk-car-row .tk-car-slide{ flex-basis:100%; }
@media (min-width:640px){ .tk-car-row .tk-car-slide{ flex-basis:50%; } }
@media (min-width:980px){ .tk-car-row .tk-car-slide{ flex-basis:33.3333%; } }
.tk-car-full .tk-car-slide{ flex-basis:100%; padding:0; }

.tk-car-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
  border:1px solid rgba(10,10,11,.14); background:#fff; color:#0a0a0b;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
  transition:opacity .25s ease, filter .2s ease;
}
.tk-car-btn.prev{ left:6px; }
.tk-car-btn.next{ right:6px; background:#1A6BE5; color:#fff; border-color:transparent; }
.tk-car-btn:disabled{ opacity:.32; cursor:default; }
.tk-car-btn:not(:disabled):hover{ filter:brightness(1.03); }

.tk-car-dots{ display:flex; gap:8px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.tk-car-dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(10,10,11,.22); transition:background .2s ease, transform .2s ease; }
.tk-car-dot.tk-active{ background:#1A6BE5; transform:scale(1.3); }

/* Ordinateur : on borne le diaporama plein cadre (avant/après) pour que la
   photo ne soit pas démesurée, et on le centre joliment. */
@media (min-width:760px){
  .tk-car-full{ max-width:440px !important; margin-left:auto !important; margin-right:auto !important; }
}
/* Grand écran : 4 vignettes par vue dans les galeries en rangée (plus fines) */
@media (min-width:1280px){
  .tk-car-row .tk-car-slide{ flex-basis:25%; }
}

/* ------------------------------------------------------------------ */
/*  "Ce que nous réalisons" : liste sur 2 colonnes (ordinateur)        */
/* ------------------------------------------------------------------ */
@media (min-width:900px){
  div[style*="position:sticky; top:40px"] + div{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(28px,3vw,48px);
    align-items:start; align-content:start;
  }
}
/* Accordéon "Ce que nous réalisons" */
.tk-inc{ border-top:1px solid rgba(10,10,11,.14); }
.tk-inc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:clamp(12px,1.6vw,16px);
  padding:clamp(15px,2vw,20px) 0; }
.tk-inc summary::-webkit-details-marker{ display:none; }
.tk-inc-c{ flex:none; display:flex; }
.tk-inc-t{ flex:1; font-weight:900; letter-spacing:-.02em; line-height:1.15; color:#0a0a0b; font-size:clamp(18px,2vw,23px); }
.tk-inc summary::after{ content:"+"; flex:none; font-size:26px; line-height:1; font-weight:300; color:#b9b7b0; transition:transform .3s ease, color .2s ease; }
.tk-inc[open] summary::after{ transform:rotate(45deg); color:#1A6BE5; }
@media (hover:hover) and (pointer:fine){ .tk-inc summary:hover::after{ color:#1A6BE5; } }
.tk-inc-d{ margin:0; padding:0 0 clamp(15px,2vw,20px);
  color:#54545a; font-weight:400; font-size:clamp(15px,1.6vw,17px); line-height:1.55; max-width:60ch; }
@media (hover:hover) and (pointer:fine){ .tk-inc summary:hover .tk-inc-t{ color:#1A6BE5; } }

/* ------------------------------------------------------------------ */
/*  FAQ (accordéon natif <details>)                                    */
/* ------------------------------------------------------------------ */
.tk-faq details{ border-bottom:1px solid rgba(10,10,11,.14); }
.tk-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:clamp(18px,2.4vw,24px) 0; font-weight:700; font-size:clamp(17px,2vw,21px); letter-spacing:-.01em; color:#0a0a0b; }
.tk-faq summary::-webkit-details-marker{ display:none; }
.tk-faq summary::after{ content:"+"; flex:none; font-weight:400; font-size:28px; line-height:1; color:#1A6BE5; transition:transform .25s ease; }
.tk-faq details[open] summary::after{ transform:rotate(45deg); }
.tk-faq .tk-faq-a{ padding:0 0 clamp(18px,2.4vw,24px); color:#54545a; font-weight:400; font-size:clamp(15px,1.7vw,17px); line-height:1.6; max-width:66ch; }

/* ------------------------------------------------------------------ */
/*  BANDEAU DÉFILANT (marquee) — chiffres 48h / 10 ans / +30…          */
/* ------------------------------------------------------------------ */
.tk-mq{ display:block !important; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.tk-mq-track{ display:flex; width:max-content; animation: tk-mq-scroll var(--mqdur,22s) linear infinite; }
.tk-mq-track > *{ flex:0 0 auto; margin-right:clamp(30px,5vw,64px); }
@keyframes tk-mq-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .tk-mq-track{ animation:none; } }

/* ------------------------------------------------------------------ */
/*  BOUTON SHIMMER (éclat qui tourne autour de la bordure)             */
/* ------------------------------------------------------------------ */
.tk-shimmer{ position:relative; z-index:0; overflow:hidden; }
.tk-shimmer::before{ content:""; position:absolute; z-index:-2; top:50%; left:50%; width:220%; height:220%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, transparent 0 80%, var(--shimmer,#ffffff) 90%, transparent 98%);
  animation: tk-shimmer-spin 2.6s linear infinite; }
.tk-shimmer::after{ content:""; position:absolute; z-index:-1; inset:1.6px; border-radius:inherit; background:inherit; }
@keyframes tk-shimmer-spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .tk-shimmer::before{ animation:none; } }

/* ------------------------------------------------------------------ */
/*  SURLIGNEUR ANIMÉ (fond coloré qui se dévoile de gauche à droite)   */
/* ------------------------------------------------------------------ */
.tk-hl{
  position:relative; display:inline-block;
  padding:.02em .16em; margin:0 .02em; border-radius:.24em;
  background:#bcd6ff; color:#0a0a0b;   /* bleu clair on-brand, texte foncé lisible */
}
/* Caché puis dévoilé UNIQUEMENT si le JS tourne (sinon le mot reste visible) */
html.tk-js .tk-hl{ clip-path: inset(0 100% 0 0); }
html.tk-js .tk-hl.tk-in{
  clip-path: inset(0 0% 0 0);
  transition: clip-path 1s cubic-bezier(.6,.02,.1,1) 0s;   /* démarre tout de suite (plus de délai) */
}
@media (prefers-reduced-motion: reduce){
  html.tk-js .tk-hl{ clip-path:none !important; }
}

/* ------------------------------------------------------------------ */
/*  APPARITION LETTRE PAR LETTRE (gradual spacing)                     */
/* ------------------------------------------------------------------ */
/* Chiffres d'étapes (01, 02…) : apparition en cascade avec petit rebond */
html.tk-js .tk-count{ opacity:0; transform:scale(.4); transition:opacity .7s ease, transform .75s cubic-bezier(.34,1.56,.64,1); }
html.tk-js .tk-count.tk-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.tk-js .tk-count{ opacity:1 !important; transform:none !important; } }

.tk-grad-word{ display:inline-block; white-space:nowrap; }
html.tk-js .tk-grad-c{
  display:inline-block; opacity:0; transform:translateX(-14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.6,.2,1);
}
html.tk-js .tk-gradual.tk-in .tk-grad-c{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.tk-js .tk-grad-c{ opacity:1 !important; transform:none !important; }
}

/* ------------------------------------------------------------------ */
/*  AVIS — colonnes à défilement vertical (marquee)                    */
/* ------------------------------------------------------------------ */
.tk-tcols{
  display:flex; justify-content:center; gap:24px;
  max-height:min(72vh,660px); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.tk-tcol{ flex:0 0 clamp(280px, 30vw, 360px); }
.tk-tcol-track{
  display:flex; flex-direction:column; gap:24px;
  animation: tk-vscroll var(--dur,24s) linear infinite; will-change:transform;
}
@keyframes tk-vscroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
/* Le défilement des avis reste continu (pas de pause au survol). */

.tk-tcard{
  background:#f7f6f3; border:1px solid rgba(10,10,11,.06); border-radius:16px;
  padding:clamp(22px,2.4vw,28px); box-shadow:0 16px 40px -34px rgba(0,0,0,.5);
}
.tk-tcard .tk-stars{ color:#FFB400; font-size:15px; letter-spacing:3px; margin-bottom:14px; }
.tk-tcard .tk-quote{ margin:0 0 18px; font-weight:400; color:#26262a; font-size:15px; line-height:1.55; white-space:pre-line; }
.tk-tcard .tk-author{ display:flex; align-items:center; gap:12px; }
.tk-tcard .tk-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex:none; letter-spacing:.02em; }
.tk-tcard .tk-name{ display:block; font-weight:700; font-size:15px; color:#0a0a0b; }
.tk-tcard .tk-role{ display:block; color:#54545a; font-size:13px; }

@media (max-width:1024px){ .tk-tcol-lg{ display:none; } }
@media (max-width:760px){ .tk-tcol-md{ display:none; } .tk-tcol{ flex-basis:min(88vw,360px); } }

@media (prefers-reduced-motion: reduce){
  .tk-tcol-track{ animation:none; }
  .tk-tcols{ max-height:none; -webkit-mask-image:none; mask-image:none; }
}

/* ------------------------------------------------------------------ */
/*  ANIMATIONS D'APPARITION AU DÉFILEMENT                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  html.tk-js [data-reveal]{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
    will-change:opacity, transform;
  }
  html.tk-js [data-reveal].tk-in{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------------ */
/*  PARALLAXE (desktop uniquement, pas sur mobile / reduced-motion)    */
/* ------------------------------------------------------------------ */
@media (min-width:861px) and (prefers-reduced-motion: no-preference){
  [data-parallax]{ background-attachment:fixed; }
}

/* ------------------------------------------------------------------ */
/*  MICRO-INTERACTIONS CURSEUR (souris fine uniquement)                */
/* ------------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  a[href], button[type="submit"]{ transition:transform .18s ease, opacity .18s ease, box-shadow .25s ease, filter .25s ease; }
  /* Boutons "pilule" : léger soulèvement */
  a[style*="border-radius:999px"]:hover,
  button[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(0,0,0,.55); }
  /* Liens de navigation */
  [data-mainnav] a:hover{ opacity:.65; }
  /* Cartes réalisations / galerie : zoom discret de l'image */
  [data-ba-box]{ transition:box-shadow .3s ease; }
  [data-ba-box] img{ transition:transform .5s cubic-bezier(.2,.6,.2,1); }
  [data-ba-box]:hover{ box-shadow:0 24px 50px -28px rgba(0,0,0,.6); }
  a[href*="uploads/"] img, .tk-zoom:hover img{ }
}

/* Zoom discret sur les vignettes de galerie (survol) */
@media (hover:hover) and (pointer:fine){
  section img{ }
}