/* ==== Améliorations Capurso (2026-11-04) : animations, verre dépoli, logo vectoriel, crédit, chargement ==== */
:root { --ease: cubic-bezier(.25,.8,.25,1); --curve: cubic-bezier(.16,1,.3,1); --bounce: cubic-bezier(.34,1.56,.64,1); }

/* Logo vectoriel */
.header__logo img { height: 58px; width: auto; transition: transform .5s var(--curve); }
.header__logo:hover img { transform: scale(1.04) rotate(-1deg); }
@media (max-width: 860px) { .header__logo img { height: 48px; } }
.footer__logo { display: inline-block; margin-bottom: 14px; }
.footer__logo img { height: 74px; width: auto; transition: transform .6s var(--bounce); }
.footer__logo:hover img { transform: translateY(-3px) rotate(-2deg); }

/* En-tête : verre dépoli au défilement + barre de progression */
.header { transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.header.is-scrolled { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.scroll-bar { position: absolute; left: 0; bottom: -4px; height: 4px; width: 100%; background: var(--noir); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .9; pointer-events: none; }

/* Apparitions au défilement : fondu + flou + glissé */
.js .reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity .9s var(--curve), transform 1.1s var(--curve), filter .9s var(--curve); will-change: opacity, transform; }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .reveal.from-l { transform: translateX(-60px); }
.js .reveal.from-r { transform: translateX(60px); }
.js .reveal.from-l.is-in, .js .reveal.from-r.is-in { transform: none; }
/* images en volet (slide) */
.js .split__img.reveal { filter: none; clip-path: inset(0 100% 0 0); transform: none; opacity: 1; transition: clip-path 1.2s var(--curve); }
.js .split--rev .split__img.reveal { clip-path: inset(0 0 0 100%); }
.js .split__img.reveal img { transform: scale(1.18); transition: transform 1.6s var(--curve); }
.js .split__img.reveal.is-in { clip-path: inset(0 0 0 0); }
.js .split__img.reveal.is-in img { transform: none; }
/* cascades */
.js .reveal.stagger { opacity: 1; transform: none; filter: none; }
.js .reveal.stagger > * { opacity: 0; transform: translateY(30px) scale(.98); filter: blur(4px); transition: opacity .8s var(--curve), transform .9s var(--curve), filter .8s var(--curve), background .25s; transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.stagger.is-in > * { opacity: 1; transform: none; filter: none; }
.js .mosaic.reveal > a { clip-path: inset(12% 12% 12% 12%); }
.js .mosaic.reveal.is-in > a { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--curve), opacity .8s var(--curve), transform .9s var(--curve), filter .8s var(--curve); transition-delay: calc(var(--i, 0) * 110ms); }
/* numéros de service qui « roulent » */
.js .services.reveal .service__num { display: inline-block; transform: rotateX(90deg); transition: transform .7s var(--bounce); transition-delay: calc(var(--i, 0) * 90ms + .25s); }
.js .services.reveal.is-in .service__num { transform: none; }

/* En-têtes de page et hero : entrée au chargement */
.js .page-head .wrap > *, .js .hero__in > * { opacity: 0; transform: translateY(26px); filter: blur(8px); }
.page-ready .page-head .wrap > *, .page-ready .hero__in > * { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--curve), transform 1s var(--curve), filter .9s var(--curve); }
.page-ready .page-head .wrap > :nth-child(2), .page-ready .hero__in > :nth-child(2) { transition-delay: .1s; }
.page-ready .page-head .wrap > :nth-child(3), .page-ready .hero__in > :nth-child(3) { transition-delay: .2s; }
.page-ready .page-head .wrap > :nth-child(4), .page-ready .hero__in > :nth-child(4) { transition-delay: .3s; }
.page-ready .page-head .wrap > :nth-child(n+5), .page-ready .hero__in > :nth-child(n+5) { transition-delay: .4s; }

/* Boutons : reflet au survol */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--curve); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.97); }

/* Mosaïque : légère inclinaison 3D qui suit la souris */
@media (hover: hover) {
  .mosaic a { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .5s var(--curve); }
}


/* Crédit Novadesko (repris des Bijoux de Marie, version blanche) */
.footer__bottom { align-items: center; }
.powered { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #ffffff; opacity: .75; transition: opacity .3s var(--ease); font-size: .85rem; letter-spacing: .02em; }
.powered:hover { opacity: 1; }
.powered .nd-logo { height: 22px; width: auto; display: inline-block; vertical-align: middle; color: #ffffff; opacity: .85; transition: color .35s, opacity .35s; }
.powered:hover .nd-logo { opacity: 1; color: var(--jaune); }
.footer .powered:hover { color: #ffffff; }

/* Écran de chargement (C du logo qui se dessine + briques) */
.cl-loader { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease), visibility 0s .45s, transform .45s var(--ease); }
html.cl-wait .cl-loader, .cl-loader.cl-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s var(--ease); }
html.cl-wait .cl-loader { transition: none; animation: cl-safety .4s 4s forwards; }
@keyframes cl-safety { to { opacity: 0; visibility: hidden; } }
.cl-loader svg { width: min(30vw, 150px); height: auto; overflow: visible; }
.cl-out { fill: transparent; stroke: #F9BC0B; stroke-width: 16; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cl-draw .75s var(--ease) forwards, cl-fillin .3s .55s forwards; }
.cl-fill { fill: #242424; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: cl-pop .65s var(--bounce) .45s forwards, cl-breathe 1.6s ease-in-out 1.2s infinite; }
.cl-brick { fill: #242424; transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: cl-drop .5s var(--bounce) forwards, cl-hop 1.6s ease-in-out infinite; }
.cl-brick.y { fill: #F9BC0B; }
.cl-brick:nth-of-type(1) { animation-delay: .55s, 1.3s; }
.cl-brick:nth-of-type(2) { animation-delay: .68s, 1.45s; }
.cl-brick:nth-of-type(3) { animation-delay: .81s, 1.6s; }
.cl-brick:nth-of-type(4) { animation-delay: .94s, 1.75s; }
.cl-brick:nth-of-type(5) { animation-delay: 1.07s, 1.9s; }
@keyframes cl-draw { to { stroke-dashoffset: 0; } }
@keyframes cl-fillin { to { fill: #F9BC0B; } }
@keyframes cl-pop { from { opacity: 0; transform: scale(.55) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes cl-breathe { 0%, 100% { transform: none; } 50% { transform: rotate(-6deg) scale(1.03); } }
@keyframes cl-drop { from { opacity: 0; transform: translateY(-260px) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes cl-hop { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-34px) rotate(-4deg); } 90% { transform: translateY(0) scaleY(.9); } }
.cl-loader.cl-done { opacity: 0; visibility: hidden; transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.stagger > *, .js .split__img.reveal, .js .split__img.reveal img, .js .mosaic.reveal > a,
  .js .page-head .wrap > *, .js .hero__in > *, .js .services.reveal .service__num { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .cl-out { stroke-dashoffset: 0; fill: #F9BC0B; animation: none; }
  .cl-fill, .cl-brick { opacity: 1; animation: none; }
  .cl-loader { transition: opacity .2s linear; transform: none !important; }
  .btn::after { display: none; }
  .mosaic a { transform: none !important; }
}

/* Réalisations : vignettes carrées 1:1 type Instagram (image entière dans la visionneuse) — Anthony 11:20 */
.gallery button { display: block; aspect-ratio: 1 / 1; position: relative; }
.gallery img, .gallery--feature button:first-child img { width: 100%; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover; object-position: center !important; }
.gallery--feature button:first-child { aspect-ratio: auto; }
@media (max-width: 760px) { .gallery--feature button:first-child { aspect-ratio: 1 / 1; } }

/* ==== Mobile / PWA ==== */
html, body { overflow-x: clip; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea, button { font-size: max(16px, 1em); }
.header__in { padding-left: max(env(safe-area-inset-left), 0px); padding-right: max(env(safe-area-inset-right), 0px); }
.footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (max-width: 860px) { .nav { padding-bottom: env(safe-area-inset-bottom); } }
@media (display-mode: standalone) { .header { padding-top: env(safe-area-inset-top); } }
img, svg, video { max-width: 100%; }