/* Com Bataillon : couche « mouvement » du site.
   Les classes Elementor (cb-*) portent l'apparence ; ce fichier ajoute uniquement
   les transitions, keyframes, pseudo-éléments et les composants générés en JS. */

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:#fff;color:var(--cb-encre);font-family:var(--cb-font-display);font-size:16px;line-height:1.55}
:focus-visible{outline:3px solid var(--cb-magenta);outline-offset:3px;border-radius:6px}
.elementor .cb-hero-note strong{color:var(--cb-encre)}
.elementor .cb-contact-title span{font-family:var(--cb-font-main);font-weight:700;color:var(--cb-jaune);display:inline-block;transform:rotate(-4deg)}
.elementor .cb-footer a{color:inherit;text-decoration:none;opacity:.8}
.elementor .cb-footer a:hover{opacity:1}
/* Les conteneurs Elementor utilisent ::before pour leur calque de fond : on neutralise sa position avant de s'en servir */
.elementor .cb-svc::before,.elementor .cb-header .cb-nav::before{top:auto;left:auto;right:auto;bottom:auto;border:0;opacity:1;mix-blend-mode:normal}
/* Dans les en-têtes titre + texte, le bloc titre prend sa largeur naturelle (comme dans la maquette) */
.elementor .cb-works-head>.cb-stack,.elementor .cb-theque-head>.cb-stack{width:auto;max-width:100%}
/* En-tête du constructeur de thème : c'est son conteneur qui reste collé en haut au défilement */
.elementor-location-header{position:sticky;top:0;z-index:50}

/* ---------- Boutons ---------- */
.elementor .cb-btn{transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.elementor .cb-btn:hover{transform:translate(-2px,-2px)}
.elementor .cb-btn-icon svg{width:100%;height:100%;fill:currentColor}
.elementor .cb-btn-social .cb-btn-icon{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.elementor .cb-btn-social:hover .cb-btn-icon{transform:rotate(-12deg) scale(1.2)}
@media (max-width:767px){.elementor .cb-btn-row .cb-btn{flex:1 1 220px;justify-content:center}}

/* ---------- En-tête + menu burger ---------- */
.elementor .cb-nav-link{transition:background .2s}
.elementor .cb-burger-bar{transition:transform .35s cubic-bezier(.6,-0.4,.3,1.4),opacity .2s,top .35s}
.elementor .cb-header.open .cb-burger-bar:nth-child(1){top:22px;transform:rotate(45deg)}
.elementor .cb-header.open .cb-burger-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.elementor .cb-header.open .cb-burger-bar:nth-child(3){top:22px;transform:rotate(-45deg)}
@media (max-width:1024px){
  .elementor .cb-header .cb-nav{position:absolute;left:0;right:0;top:100%;width:auto;height:calc(100dvh - 100%);flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:14px;padding:24px 24px calc(24px + env(safe-area-inset-bottom,0px));background:var(--cb-papier);overflow:auto;isolation:isolate;
    clip-path:circle(0% at calc(100% - 40px) 0);visibility:hidden;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s}
  .elementor .cb-header .cb-nav::before,.elementor .cb-header .cb-nav::after{content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
  .elementor .cb-header .cb-nav::before{width:260px;height:260px;background:var(--cb-jaune);opacity:.35;left:auto;bottom:auto;right:-90px;top:-70px;border:0}
  .elementor .cb-header .cb-nav::after{width:200px;height:200px;background:var(--cb-bleu);opacity:.3;left:-70px;bottom:-50px}
  .elementor .cb-header.open .cb-nav{clip-path:circle(150% at calc(100% - 40px) 0);visibility:visible;transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
  .elementor .cb-header .cb-nav .cb-nav-link{font-size:clamp(26px,8vw,38px);font-weight:900;letter-spacing:-.02em;padding:14px 22px;border-radius:20px;text-align:center;color:var(--cb-encre);
    opacity:0;transform:translateY(24px) rotate(0deg);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
  .elementor .cb-header .cb-nav .cb-nav-link:nth-child(1){background:var(--cb-bleu);--r:-2deg}
  .elementor .cb-header .cb-nav .cb-nav-link:nth-child(2){background:var(--cb-jaune);--r:1.5deg}
  .elementor .cb-header .cb-nav .cb-nav-link:nth-child(3){background:var(--cb-rose);--r:-1deg}
  .elementor .cb-header .cb-nav .cb-nav-cta{background:var(--cb-magenta);color:#fff;--r:2deg;margin-top:10px}
  .elementor .cb-header .cb-nav .cb-nav-link[aria-current="page"]{outline:4px solid var(--cb-encre);outline-offset:3px}
  .elementor .cb-header.open .cb-nav .cb-nav-link{opacity:1;transform:translateY(0) rotate(var(--r))}
  .elementor .cb-header.open .cb-nav .cb-nav-link:nth-child(1){transition-delay:.15s}
  .elementor .cb-header.open .cb-nav .cb-nav-link:nth-child(2){transition-delay:.22s}
  .elementor .cb-header.open .cb-nav .cb-nav-link:nth-child(3){transition-delay:.29s}
  .elementor .cb-header.open .cb-nav .cb-nav-link:nth-child(4){transition-delay:.36s}
  html.cb-menu-open{overflow:hidden}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){.elementor .cb-header .cb-nav,.elementor .cb-header .cb-nav .cb-nav-link,.elementor .cb-burger-bar{transition:none!important}}

/* ---------- Hero : calage quadri du titre ---------- */
.cb-headline .cb-line{display:block;position:relative;white-space:nowrap}
.cb-headline .cb-reg{position:relative;display:inline-block;color:var(--cb-encre)}
.cb-headline .cb-reg::before,.cb-headline .cb-reg::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}
.cb-headline .cb-reg.c1{color:var(--cb-bleu)}
.cb-headline .cb-reg.c2{color:var(--cb-magenta)}
.cb-headline .cb-reg.c3{color:var(--cb-jaune)}
.cb-headline .cb-reg::before{color:var(--cb-magenta);animation:cbCalageA 1.6s cubic-bezier(.2,.9,.2,1) both}
.cb-headline .cb-reg::after{color:var(--cb-jaune);animation:cbCalageB 1.6s cubic-bezier(.2,.9,.2,1) both}
.cb-headline .cb-reg.c2::before{color:var(--cb-bleu)}
.cb-headline .cb-reg.c3::after{color:var(--cb-bleu)}
.cb-headline .cb-line:nth-child(2) .cb-reg::before,.cb-headline .cb-line:nth-child(2) .cb-reg::after{animation-delay:.18s}
.cb-headline .cb-line:nth-child(3) .cb-reg::before,.cb-headline .cb-line:nth-child(3) .cb-reg::after{animation-delay:.36s}
@keyframes cbCalageA{0%{transform:translate(-.12em,.06em)}70%{transform:translate(.012em,-.006em)}100%{transform:translate(0,0);opacity:0}}
@keyframes cbCalageB{0%{transform:translate(.1em,-.08em)}70%{transform:translate(-.01em,.008em)}100%{transform:translate(0,0);opacity:0}}
.cb-headline .cb-line:hover .cb-reg::before{animation:cbWobbleA .6s ease both}
.cb-headline .cb-line:hover .cb-reg::after{animation:cbWobbleB .6s ease both}
@keyframes cbWobbleA{0%{opacity:1;transform:translate(0)}40%{opacity:1;transform:translate(-.05em,.03em)}100%{opacity:0;transform:translate(0)}}
@keyframes cbWobbleB{0%{opacity:1;transform:translate(0)}40%{opacity:1;transform:translate(.05em,-.03em)}100%{opacity:0;transform:translate(0)}}
.cb-headline .cb-regmark{position:absolute;width:.32em;height:.32em;right:-.42em;top:.18em;opacity:.8}
@media (max-width:1024px){.cb-headline .cb-regmark{display:none}}

/* ---------- Badge 30 ans ---------- */
.elementor .cb-badge{transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.elementor .cb-badge-ring{animation:cbSpin 22s linear infinite}
.elementor .cb-badge-ring svg{width:100%;height:100%;display:block}
.elementor .cb-badge-core{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.elementor .cb-badge:hover .cb-badge-core{transform:scale(1.06) rotate(-8deg)}
@keyframes cbSpin{to{transform:rotate(360deg)}}

/* ---------- Éclaboussures d'encre ---------- */
.cb-ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* ---------- Bandeaux défilants ---------- */
.elementor .cb-track-item{flex-shrink:0}
.elementor .cb-track-item::after{content:"";width:.5em;height:.5em;background:var(--cb-jaune);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.elementor .cb-marquee-alt .cb-track-item::after{background:var(--cb-papier)}

/* ---------- Bloc 30 ans ---------- */
.elementor .cb-fact{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.elementor .cb-fact:hover{transform:rotate(-2deg) translateY(-4px)}
.elementor .cb-polaroid{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.elementor .cb-polaroid:hover{transform:rotate(0) scale(1.06);z-index:2;position:relative}

/* ---------- Métiers ---------- */
.elementor .cb-svc{transition:border-color .3s,transform .3s}
.elementor .cb-svc::before{content:"";position:absolute;top:auto;left:auto;right:-40px;bottom:-40px;width:80px;height:80px;border:0;opacity:1;border-radius:50%;background:var(--c);transform:scale(.6);transition:transform .55s cubic-bezier(.2,.9,.2,1);z-index:0}
.elementor .cb-svc:hover{border-color:var(--c);transform:translateY(-4px)}
.elementor .cb-svc:hover::before{transform:scale(9)}
.elementor .cb-svc .cb-svc-text,.elementor .cb-svc .cb-svc-title{transition:color .3s}
.elementor .cb-svc .cb-svc-tag{transition:color .3s}
.elementor .cb-svc:hover .cb-svc-text,.elementor .cb-svc:hover .cb-svc-title,.elementor .cb-svc:hover .cb-svc-tag{color:var(--cb-encre)}
.elementor .cb-svc-dark:hover .cb-svc-text,.elementor .cb-svc-dark:hover .cb-svc-title,.elementor .cb-svc-dark:hover .cb-svc-tag{color:#fff}

/* ---------- Réalisations (générées en JS) ---------- */
.cb-shot{position:relative;margin:0;white-space:normal;border-radius:18px;overflow:hidden;background:var(--cb-encre);cursor:zoom-in;border:0;padding:0;font:inherit;color:#fff;text-align:left;isolation:isolate;transition:transform .45s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.cb-shot.tall{grid-row:span 2}
.cb-shot.wide{grid-column:span 2}
.cb-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.9,.2,1),filter .4s}
.cb-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(22,40,42,.85));z-index:1;transition:opacity .3s}
.cb-shot::before{content:"";position:absolute;inset:0;z-index:2;border:5px solid var(--c);border-radius:18px;opacity:0;transform:scale(1.05);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.cb-shot:hover,.cb-shot:focus-visible{transform:translateY(-6px) rotate(-.8deg);box-shadow:8px 10px 0 var(--c)}
.cb-shot:hover img{transform:scale(1.08)}
.cb-shot:hover::before,.cb-shot:focus-visible::before{opacity:1;transform:none}
.cb-shot .cb-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;display:flex;flex-direction:column;gap:1px}
.cb-shot .cb-cap b{font-weight:800;font-size:16px;line-height:1.15;text-wrap:balance}
.cb-shot .cb-cap span{font-size:12.5px;font-weight:500;opacity:.88}
.cb-shot .cb-tag{position:absolute;top:12px;left:12px;z-index:3;background:var(--c);color:var(--cb-encre);font-family:var(--cb-font-main);font-weight:700;font-size:17px;line-height:1;padding:4px 11px 3px;border-radius:8px;transform:rotate(-4deg) scale(.9);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.cb-shot:hover .cb-tag,.cb-shot:focus-visible .cb-tag{opacity:1;transform:rotate(-4deg)}
@media (hover:none){.cb-shot .cb-tag{opacity:1;transform:rotate(-4deg)}}
@media (max-width:767px){.cb-shot .cb-tag{font-size:14px}}
.elementor-editor-active .cb-gallery:empty::before{content:"Galerie générée automatiquement : 13 réalisations tirées au hasard à chaque visite";grid-column:1/-1;align-self:center;text-align:center;font-family:var(--cb-font-main);font-size:22px;color:var(--cb-muted)}

/* ---------- Visionneuse ---------- */
.cb-lb{position:fixed;inset:0;z-index:90;background:rgba(22,40,42,.92);display:grid;grid-template-rows:1fr auto;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));gap:14px;font-family:var(--cb-font-display)}
.cb-lb[hidden]{display:none!important}
.cb-lb figure{margin:0;display:grid;place-items:center;min-height:0}
.cb-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.4);animation:cbLbIn .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes cbLbIn{from{transform:scale(.85) rotate(-2deg);opacity:.2}to{transform:none;opacity:1}}
.cb-lb .cb-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;max-width:1100px;width:100%;margin:0 auto}
.cb-lb .cb-lb-bar b{font-size:20px;font-weight:800;display:block}
.cb-lb .cb-lb-bar span{font-family:var(--cb-font-main);font-size:20px;color:var(--cb-jaune)}
.cb-lb .cb-lb-nav{display:flex;gap:8px;flex:none}
.cb-lb button{font-family:inherit;font-weight:800;font-size:18px;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;transition:background .2s,color .2s;padding:0}
.cb-lb button:hover{background:#fff;color:var(--cb-encre)}

/* ---------- Engagement ---------- */
.elementor .cb-leaf{animation:cbSway 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes cbSway{50%{transform:rotate(8deg)}}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .elementor *,.elementor *::before,.elementor *::after,.cb-lb *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cb-headline .cb-reg::before,.cb-headline .cb-reg::after{opacity:0}
}