@font-face { font-family: 'Finder'; src: url('assets/fonts/Finder.woff2') format('woff2'), url('assets/fonts/Finder.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --pink: #ff0046;
  --navy: #0a1f2b;
  --cyan: #21e6ff;
  --font-title: 'Finder', 'Outfit', system-ui, sans-serif;
  --title-tracking: 0.01em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--navy);
  color: #fff;
  overflow-x: hidden;
  position: relative;
}
a { color: var(--pink); text-decoration: none; }
a:hover { color: #fff; }
.container { max-width: 1320px; margin: 0 auto; padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); }

/* ---------- Seismograph scroll indicator ---------- */
.seismo { position: fixed; top: 0; left: 0; right: 0; height: 7px; z-index: 998; background: var(--navy); pointer-events: none; overflow: hidden; box-shadow: 0 0 12px rgba(255,0,70,.35); }
.seismo svg { width: 100%; height: 100%; display: block; }
.seismo polyline { fill: none; stroke: var(--pink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255,0,70,.8)); }
@media (prefers-reduced-motion: reduce) { .seismo { display: none; } }

/* curseur personnalisé supprimé : curseur natif */
a, button, [data-magnet] { cursor: pointer; }
.cursor { position: fixed; top: 0; left: 0; z-index: 997; pointer-events: none; will-change: transform; display: none; }
@media (pointer: fine) { .cursor { display: block; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } body, a, button, input, textarea, [data-magnet] { cursor: auto; } }
.cursor-dot { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); transition: transform .15s ease, background .2s ease; }
.cursor-ring { position: absolute; top: -18px; left: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,0,70,.55); transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1), left .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease; }
.cursor.hover .cursor-ring { width: 64px; height: 64px; top: -32px; left: -32px; border-color: var(--pink); background: rgba(255,0,70,.12); }
.cursor.hover .cursor-dot { transform: scale(0); }
.cursor.down .cursor-ring { width: 26px; height: 26px; top: -13px; left: -13px; }
.ripple { position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--pink); pointer-events: none; z-index: 996; animation: rippleOut .7s cubic-bezier(.16,.8,.24,1) forwards; }
@keyframes rippleOut { to { width: 140px; height: 140px; margin: -70px 0 0 -70px; opacity: 0; border-width: .5px; } }

/* ---------- Grain texture ---------- */
.grain { position: fixed; inset: -60px; z-index: 995; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift 1s steps(3) infinite; }
@keyframes grainShift { 0% { transform: translate(0,0); } 33% { transform: translate(-2%,1%); } 66% { transform: translate(1%,-2%); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

.reveal { opacity: 0; transform: translateY(46px); transition: opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 500; background: var(--navy); display: grid; place-items: center; transition: opacity .5s ease, visibility .5s ease; }
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* logo : vibre en passant du blanc au rouge */
.ld-logo { width: clamp(130px,17vw,220px); filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%); animation: ldColor 1.4s ease-in-out .1s forwards, ldShake .09s steps(2) infinite; }
@keyframes ldColor { to { filter: brightness(0) saturate(100%) invert(36.3%) sepia(100%) saturate(869%) hue-rotate(-52deg) brightness(78%) contrast(203%); } }
@keyframes ldShake {
  0% { transform: translate(-2px, 1px) rotate(-.4deg); }
  50% { transform: translate(2px, -1px) rotate(.4deg); }
  100% { transform: translate(-1px, -2px) rotate(-.2deg); }
}
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px clamp(20px, 5vw, 64px);
  transition: background .4s ease, padding .4s ease, backdrop-filter .4s ease;
}
.site-header.scrolled { padding-top: 14px; padding-bottom: 14px; }
.site-header img { height: 26px; display: block; transition: filter .4s ease; }
.site-header.on-light img { filter: brightness(0) saturate(100%) invert(8%) sepia(85%) saturate(255%) hue-rotate(158deg) brightness(154%) contrast(111%); }
.burger { width: 26px; height: 18px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; }
.burger-ping { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1.5px solid var(--pink); opacity: 0; pointer-events: none; }
.burger-ping.ping { animation: burgerPing .6s cubic-bezier(.16,.8,.24,1); }
@keyframes burgerPing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
.burger span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease, background .4s ease; }
.site-header.on-light .burger span { background: var(--navy); }
.site-header.nav-open img { filter: none; background: none; }
.site-header.nav-open .burger span { filter: none; background: #fff; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 8px; }
.burger span:nth-child(3) { top: 16px; }
.burger:hover span:nth-child(1) { transform: translateY(2px) rotate(4deg); }
.burger:hover span:nth-child(3) { transform: translateY(-2px) rotate(-4deg); }
.site-header.nav-open .burger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.site-header.nav-open .burger span:nth-child(2) { opacity: 0; }
.site-header.nav-open .burger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ---------- Fullscreen nav ---------- */
.nav-overlay { position: fixed; inset: 0; z-index: 150; background: var(--pink); clip-path: circle(0px at calc(100% - 46px) 46px); transition: clip-path .8s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,6vw,80px); }
.nav-overlay.open { clip-path: circle(150% at calc(100% - 46px) 46px); }
.nav-overlay-links { display: flex; flex-direction: column; gap: clamp(6px,1.4vw,14px); }
.nav-overlay-links a { font-size: clamp(34px,7vw,84px); font-weight: 800; color: #fff; letter-spacing: -0.02em; opacity: 0; transform: translateY(30px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), color .3s ease; }
.nav-overlay.open .nav-overlay-links a { opacity: 1; transform: none; }
.nav-overlay.open .nav-overlay-links a:nth-child(1) { transition-delay: .1s; }
.nav-overlay.open .nav-overlay-links a:nth-child(2) { transition-delay: .18s; }
.nav-overlay.open .nav-overlay-links a:nth-child(3) { transition-delay: .26s; }
.nav-overlay.open .nav-overlay-links a:nth-child(4) { transition-delay: .34s; }
.nav-overlay.open .nav-overlay-links a:nth-child(5) { transition-delay: .42s; }
.nav-overlay-links a:hover { color: var(--navy); }
.nav-overlay-foot { margin-top: clamp(40px,6vw,70px); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: #fff; font-size: 14px; opacity: 0; transition: opacity .5s ease .4s; }
.nav-overlay.open .nav-overlay-foot { opacity: .9; }
.nav-overlay-foot .socials a { border-color: rgba(255,255,255,.5); }
.nav-overlay-foot .socials a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 560px) { .nav-overlay-links a { font-size: clamp(30px,10vw,48px); } }

/* ---------- Intro stage: hero title crossfades into the showreel on scroll ---------- */
.intro-stage { position: relative; height: 200vh; }
.intro-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.intro-sticky .hero { position: absolute; inset: 0; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.showreel-stage { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(56px,9vw,110px); padding-bottom: clamp(30px,5vw,60px); }
.hero-content { width: 100%; will-change: transform, opacity; }
.hero .hero-title-gif { margin: 0; max-width: 1100px; width: 100%; }
.hero-title-gif img, .hero-title-gif video { width: 100%; height: auto; display: block; }
/* Titre animé de l'accueil : vrai texte (Finder), la partie rose défile par paliers */
.hero-title-gif { container-type: inline-size; }
.hero-title-gif .ht { display: block; font-family: var(--font-title); text-transform: uppercase; font-size: 5.1cqw; line-height: .96; letter-spacing: 0; color: #fff; }
.hero-title-gif .ht-l { display: block; white-space: nowrap; }
.hero-title-gif .ht-win { display: block; height: 2.14em; margin-top: -.22em; overflow: hidden; color: var(--pink); }
.hero-title-gif .ht-track { display: block; animation: htRoll 7.6s cubic-bezier(.7,0,.3,1) infinite; will-change: transform; }
.hero-title-gif .ht-p { display: block; height: 2.14em; padding-top: .22em; box-sizing: border-box; }
@keyframes htRoll {
  0%, 22% { transform: translateY(0); }
  25%, 47% { transform: translateY(-20%); }
  50%, 72% { transform: translateY(-40%); }
  75%, 97% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); }
}
@media (prefers-reduced-motion: reduce) { .hero-title-gif .ht-track { animation: none; } }
@media (max-width: 700px) { .hero-title-gif .ht { font-size: 6.6cqw; } }

.hero-content.tremor { animation: heroTremor .9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes heroTremor {
  0% { transform: translate(0,0); }
  8% { transform: translate(-6px,3px) rotate(-.3deg); }
  16% { transform: translate(5px,-4px) rotate(.3deg); }
  24% { transform: translate(-4px,4px) rotate(-.2deg); }
  32% { transform: translate(6px,-2px) rotate(.2deg); }
  42% { transform: translate(-3px,2px); }
  52% { transform: translate(2px,-2px); }
  64% { transform: translate(-1.5px,1px); }
  78% { transform: translate(1px,-.5px); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-content.tremor { animation: none; } }

.round-btn { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--navy); }
.round-btn svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 9s linear infinite; }
.round-btn:hover svg.ring { animation-duration: 3s; }
.round-btn .core { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
@keyframes spin { to { transform: rotate(360deg); } }

.magnet { will-change: transform; transition: transform .25s cubic-bezier(.2,.9,.3,1); }

/* ---------- Typographic title reveal ---------- */
.split-title { overflow: hidden; padding-bottom: .1em; }
.split-title .w { display: inline-block; transform: translateY(115%) rotate(4deg); opacity: 0; transition: transform .8s cubic-bezier(.16,.8,.24,1), opacity .8s cubic-bezier(.16,.8,.24,1); }
.split-title.in-view .w { transform: translateY(0) rotate(0); opacity: 1; }

/* ---------- Showreel (fullscreen) ---------- */
.video-wrap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #0a1f2b; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Methode ---------- */
.methode { position: relative; background: #fff; color: var(--navy); padding: clamp(72px,10vw,130px) 0; }
.methode-stage { text-align: center; }
.methode h1, .methode h2 { font-size: clamp(26px,4.4vw,52px); font-weight: 400; color: var(--pink); margin: 0; letter-spacing: var(--title-tracking);  font-family: var(--font-title); text-transform: uppercase;}

.picto-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,4vw,60px); max-width: 1000px; margin: clamp(36px,6vh,72px) auto 0; }
.picto-card { position: relative; background: #fff; display: grid; justify-items: center; gap: 10px; padding-top: 6px; }
.picto-card img { width: clamp(90px,10vw,140px); height: clamp(90px,10vw,140px); object-fit: contain; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.picto-card:hover img { transform: scale(1.08) rotate(-4deg); }
.picto-card h3 { margin: 0; color: var(--pink); font-size: clamp(18px,2.2vw,28px); font-weight: 400; letter-spacing: var(--title-tracking);  font-family: var(--font-title); text-transform: uppercase;}

.methode-text { color: var(--navy); text-align: center; max-width: 62ch; margin: clamp(24px,4vh,44px) auto 0; font-size: clamp(16px,1.5vw,19px); line-height: 1.5; font-weight: 500; }
.methode-text strong { color: var(--pink); font-weight: 700; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border: 1px solid currentColor; font-family: inherit; font-weight: 600; font-size: 15px; background: none; position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease; }
.btn::before { content: ""; position: absolute; inset: -1px; transform: scaleY(0); transform-origin: bottom; transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.btn:hover::before { transform: scaleY(1); }
.btn.red { color: var(--pink); }
.btn.red::before { background: var(--pink); }
.btn.red:hover { color: #fff; }
.btn.white { color: #fff; }
.btn.white::before { background: #fff; }
.btn.white:hover { color: var(--navy); }
.btn svg { width: 14px; height: 14px; transition: transform .35s ease; }
.btn:hover svg { transform: translateX(4px); }
.methode .btn { margin-top: clamp(24px,4vh,40px); }

/* ---------- Offres ---------- */
.offres { position: relative; background: var(--navy); padding: clamp(72px,9vw,130px) 0; text-align: center; overflow: hidden; }
.offres h1, .offres h2 { font-size: clamp(26px,4.4vw,52px); font-weight: 400; margin: 0; color: #fff; letter-spacing: var(--title-tracking); text-align: center;  font-family: var(--font-title); text-transform: uppercase;}

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,2vw,26px); margin-top: clamp(56px,7vw,96px); text-align: left; perspective: 1200px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.offre-card { position: relative; background: #fff; color: var(--navy); min-height: clamp(300px,32vw,370px); padding: 26px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; transform-style: preserve-3d; overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.offre-card::after { content: ""; position: absolute; inset: 0; background: var(--pink); transform: translateY(101%); transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.offre-card:hover::after, .offre-card.on::after { transform: none; }
.offre-card > * { position: relative; z-index: 1; }
.offre-card .picto { width: 60px; height: 60px; object-fit: contain; transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.offre-card:hover .picto, .offre-card.on .picto { filter: brightness(0) invert(1); transform: scale(1.1) rotate(-6deg); }
.offre-card h3 { margin: 0; color: var(--pink); font-size: clamp(15px,1.4vw,18px); font-weight: 400; letter-spacing: var(--title-tracking); transition: color .4s ease, text-shadow .1s ease;  font-family: var(--font-title); text-transform: uppercase;}
.offre-card:hover h3, .offre-card.on h3 { color: #fff; animation: cardGlitch .3s steps(2) 1; }
@keyframes cardGlitch { 0% { text-shadow: none; } 30% { text-shadow: -2px 0 var(--cyan), 2px 0 rgba(255,255,255,.7); } 60% { text-shadow: 2px 0 var(--cyan), -2px 0 rgba(255,255,255,.7); } 100% { text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .offre-card:hover h3, .offre-card.on h3 { animation: none; } }
.offre-card .txt { width: 100%; max-height: 0; overflow: hidden; display: grid; gap: 10px; font-size: 11.5px; line-height: 1.35; color: #fff; opacity: 0; transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.offre-card:hover .txt, .offre-card.on .txt { max-height: 300px; opacity: 1; }
.offre-card .txt p { margin: 0; }
.offre-card .txt .intro { font-weight: 700; font-size: 15px; line-height: 1.3; opacity: .95; }
.offre-card .hint { position: absolute; right: 16px; bottom: 14px; width: 20px; height: 20px; transition: opacity .3s ease, transform .4s ease; }
.offre-card .hint::before, .offre-card .hint::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--pink); transform: translate(-50%,-50%); }
.offre-card .hint::before { width: 100%; height: 1.5px; }
.offre-card .hint::after { width: 1.5px; height: 100%; }
.offre-card:hover .hint, .offre-card.on .hint { opacity: 0; transform: rotate(90deg); }
.offres .btn { margin-top: clamp(36px,5vw,56px); }

/* ---------- Realisations ---------- */
.realisations { background: #fff; color: var(--navy); padding: clamp(72px,9vw,130px) 0 clamp(90px,9vw,130px); }
.realisations h1, .realisations h2 { color: var(--pink); font-size: clamp(26px,4.4vw,52px); font-weight: 400; margin: 0 0 clamp(40px,6vw,70px); letter-spacing: var(--title-tracking); text-align: center;  font-family: var(--font-title); text-transform: uppercase;}
.grid6 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px,1.6vw,20px); }
.tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; }
.tile img { width: 112%; height: 112%; max-width: none; object-fit: cover; display: block; position: relative; left: -6%; top: -6%; clip-path: inset(101% 0 0 0); transition: clip-path 1s cubic-bezier(.16,.8,.24,1), transform .5s cubic-bezier(.2,.8,.2,1), filter .45s ease, opacity .4s ease; filter: grayscale(.65) contrast(1.05); }
.tile.in-view img { clip-path: inset(0 0 0 0); animation: tileSettle 1.1s cubic-bezier(.16,.8,.24,1); }
@keyframes tileSettle { from { transform: scale(1.18); } }
.tile-video { position: absolute; inset: 0; width: 112%; height: 112%; left: -6%; top: -6%; object-fit: cover; opacity: 0; pointer-events: none; z-index: 1; }
.tile.is-playing .tile-video { opacity: 1; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px clamp(14px,2vw,20px); background: linear-gradient(0deg, rgba(10,31,43,.9) 0%, rgba(10,31,43,0) 100%); color: #fff; z-index: 2; }
.tile .cap b { display: block; font-size: clamp(13px,1.5vw,16px); font-weight: 700; }
.tile .cap span { font-size: clamp(11px,1.2vw,13px); color: rgba(255,255,255,.75); }
@media (prefers-reduced-motion: reduce) { .tile img { clip-path: none; } .tile.in-view img { animation: none; } }

/* ---------- Contact ---------- */
.contact-wrap { background: #fff; padding: 0 0 clamp(60px,8vw,100px); scroll-margin-top: 40px; }
.contact-title { grid-column: 1 / -1; margin: 0; text-align: center; color: #fff; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: clamp(26px,4.4vw,52px); }
.contact-card { background: var(--navy); border-radius: 8px; padding: clamp(28px,4vw,52px); display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(30px,5vw,60px); }
.contact-info b { display: block; font-size: clamp(16px,1.8vw,20px); margin-bottom: 10px; }
.contact-info p { margin: 2px 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.6; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.socials a:hover { background: var(--pink); border-color: var(--pink); transform: translateY(-3px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.field { grid-column: span 2; position: relative; padding-top: 24px; }
.field.half { grid-column: span 1; }
.field label { position: absolute; left: 2px; top: 24px; font-size: 15px; color: rgba(255,255,255,.55); transition: top .3s cubic-bezier(.2,.8,.2,1), font-size .3s ease, opacity .3s ease; pointer-events: none; }
.field label small { color: rgba(255,255,255,.5); font-weight: 400; margin-left: 4px; transition: opacity .2s ease; }
.field:focus-within label, .field.filled label { top: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.field:focus-within label small, .field.filled label small { opacity: 0; }
.field input, .field textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; font-family: inherit; font-size: 15px; padding: 6px 2px; outline: none; }
.field textarea { resize: vertical; min-height: 40px; }
.field-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.field input:focus ~ .field-line, .field textarea:focus ~ .field-line { transform: scaleX(1); }
.submit-btn { grid-column: span 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.submit-btn:hover { background: var(--pink); border-color: var(--pink); }
.submit-btn svg { transition: transform .3s ease; }
.submit-btn:hover svg { transform: translateX(4px); }

@media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; } .field.half { grid-column: span 2; } }

.contact-mini-map { position: relative; margin-top: 20px; height: 130px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); background: var(--navy); }
.contact-mini-map iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; filter: grayscale(1) invert(92%) contrast(85%) brightness(.9); }
.contact-mini-map-link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px 10px; background: linear-gradient(0deg, rgba(10,31,43,.7), transparent 60%); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .3s ease; }
.contact-mini-map:hover .contact-mini-map-link, .contact-mini-map-link:focus { opacity: 1; }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--pink); padding: clamp(28px,4vw,40px) 0 0; overflow: hidden }
.footer.shake { animation: footShake .35s ease; }
@keyframes footShake { 10%,90% { transform: translate(-.5px,.5px); } 20%,80% { transform: translate(1px,-1px); } 30%,50%,70% { transform: translate(-2px,1px); } 40%,60% { transform: translate(2px,-1px); } }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 14px; padding-bottom: clamp(28px,4vw,40px); }
.footer-row img { height: 24px; width: auto; }
.footer-row span { color: rgba(255,255,255,.85); }
.footer-row a { color: #fff; position: relative; }
.footer-row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .4s ease; }
.footer-row a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-wordmark { width: 100%; height: auto; display: block; margin: 0 0 -16.44%; /* = moitié de la hauteur du logo (205/623,6 ÷ 2) → logo coupé en son milieu */ cursor: pointer; transform: translateY(45%); transition: transform .55s cubic-bezier(.16,.8,.24,1); will-change: transform, translate; }
.footer-wordmark.in { transform: translateY(0); animation: logoQuake .45s linear .3s both; }
@keyframes logoQuake {
  0%,100% { translate: 0 0; }
  12% { translate: -3px 1px; } 25% { translate: 4px -1px; } 38% { translate: -4px 1px; }
  50% { translate: 3px -1px; } 62% { translate: -2px 1px; } 75% { translate: 2px 0; } 88% { translate: -1px 0; }
}


@media (max-width: 720px) {
  .picto-row { grid-template-columns: 1fr; gap: 32px; }
  .grid6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .intro-stage { height: 170vh; }
}

/* ======================================================================
   Pages internes — styles reconstruits (équipe, cas clients, mentions)
   ====================================================================== */
.picto-card p { margin: 6px 0 0; color: var(--navy); font-size: clamp(14px,1.3vw,16px); line-height: 1.55; font-weight: 500; max-width: 34ch; }
.picto-card p strong { color: var(--pink); font-weight: 700; }

/* --- Qui sommes-nous --- */
.team-banner { overflow: hidden; }
.team-banner img { width: 100%; height: clamp(220px,38vw,520px); object-fit: cover; display: block; }
.team { background: #fff; color: var(--navy); padding: clamp(60px,8vw,110px) 0 clamp(72px,9vw,120px); text-align: center; }
.team h1, .team h2 { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; color: var(--pink); font-size: clamp(26px,4.4vw,52px); letter-spacing: var(--title-tracking); margin: 0; }
.team-intro { max-width: 52ch; margin: clamp(16px,2vw,24px) auto 0; font-size: clamp(16px,1.6vw,20px); line-height: 1.5; font-weight: 500; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); margin: clamp(40px,6vw,72px) 0; text-align: left; }
.team-card { display: flex; flex-direction: column; gap: 10px; }
.team-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--navy); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.team-card:hover .team-photo img { filter: none; transform: scale(1.04); }
.team-card h3 { margin: 6px 0 0; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; color: var(--pink); font-size: clamp(15px,1.5vw,19px); letter-spacing: var(--title-tracking); }
.team-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.team-role { color: var(--navy); }
.team-years { color: rgba(10,31,43,.55); }
.team-card p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(10,31,43,.85); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* --- Pages cas client --- */
.case-hero { position: relative; background: var(--navy); }
.case-hero > img { width: 100%; height: clamp(300px,52vw,640px); object-fit: cover; display: block; }
.case-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,31,43,.88) 0%, rgba(10,31,43,.15) 55%, rgba(10,31,43,0) 100%); pointer-events: none; }
.case-hero-caption { position: absolute; z-index: 1; left: clamp(20px,5vw,64px); right: clamp(20px,5vw,64px); bottom: clamp(24px,4vw,56px); max-width: 980px; }
.case-client { display: inline-block; margin-bottom: 14px; color: var(--pink); font-size: clamp(12px,1.2vw,14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.case-hero-caption h1 { margin: 0; color: #fff; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); line-height: 1.12; font-size: clamp(22px,3.6vw,46px); }
.case-wrap { background: #fff; color: var(--navy); padding: clamp(48px,7vw,96px) 0 clamp(72px,9vw,120px); }
.case-content { max-width: 780px; margin: 0 auto; }
.case-content p { font-size: clamp(16px,1.5vw,19px); line-height: 1.65; font-weight: 400; margin: 0 0 1.2em; }
.case-content p strong { color: var(--pink); font-weight: 700; }
.case-content h2 { margin: clamp(40px,6vw,64px) 0 18px; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); color: var(--pink); font-size: clamp(18px,2.2vw,26px); }
.case-content img { width: 100%; height: auto; display: block; margin: clamp(24px,4vw,40px) 0; border-radius: 3px; }
.case-back { display: inline-block; margin-bottom: clamp(24px,4vw,40px); color: var(--navy); font-size: 14px; font-weight: 600; transition: color .25s ease, transform .25s ease; }
.case-back:hover { color: var(--pink); transform: translateX(-4px); }
.case-idea { margin: 0 0 clamp(28px,4vw,44px) !important; padding: 22px 0 22px 24px; border-left: 4px solid var(--pink); color: var(--navy); font-family: var(--font-title); font-weight: 400 !important; text-transform: uppercase; line-height: 1.3 !important; font-size: clamp(16px,2vw,24px) !important; }
.case-figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,2vw,24px); margin: clamp(24px,4vw,40px) 0; }
.case-figure-pair img { margin: 0; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .case-figure-pair { grid-template-columns: 1fr; } }
.case-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(48px,7vw,80px); padding-top: 28px; border-top: 1px solid rgba(10,31,43,.15); font-size: 14px; font-weight: 600; }
.case-nav a { color: var(--navy); max-width: 46%; line-height: 1.4; transition: color .25s ease; }
.case-nav a:hover { color: var(--pink); }
.case-nav .next { margin-left: auto; text-align: right; }

/* --- Mentions légales --- */
.page-head { background: #fff; color: var(--navy); padding: clamp(50px,7vw,90px) 0 clamp(10px,2vw,20px); }
.page-head h1, .page-head h2 { margin: 0; text-align: center; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); color: var(--pink); font-size: clamp(26px,4.4vw,52px); }
.page-wrap { background: #fff; color: var(--navy); padding: clamp(24px,4vw,48px) 0 clamp(72px,9vw,120px); }
.page-content { max-width: 780px; margin: 0 auto; }
.page-content p { font-size: clamp(15px,1.4vw,17px); line-height: 1.65; margin: 0 0 1.1em; }
.page-content h3 { margin: 2em 0 .6em; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); color: var(--pink); font-size: clamp(15px,1.6vw,19px); }
.page-content a { color: var(--pink); text-decoration: underline; }

/* ======================================================================
   Pages réalisations (modèle Squarespace) — hero + galerie + accordéons
   ====================================================================== */
.cs { background: var(--navy); }
.cs-hero { position: relative; min-height: min(86vh, 860px); display: grid; place-items: center; padding: clamp(40px,7vw,96px) clamp(20px,5vw,64px); overflow: hidden; isolation: isolate; margin-top: -76px; padding-top: calc(clamp(40px,7vw,96px) + 76px); }
.cs-hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,31,43,.55) 0%, rgba(10,31,43,.18) 40%, rgba(10,31,43,.35) 100%); }
.cs-card { width: min(820px, 100%); background: rgba(230,230,230,.95); color: var(--navy); text-align: center; padding: clamp(28px,4.2vw,56px) clamp(22px,4.5vw,64px); }
.cs-tag { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.cs-client { margin: 0 0 clamp(14px,2vw,22px); font-size: clamp(17px,1.8vw,22px); font-weight: 700; }
.cs-card h1 { margin: 0 0 clamp(16px,2.2vw,26px); font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); line-height: 1.1; font-size: clamp(22px,3.2vw,40px); color: var(--navy); }
.cs-intro { margin: 0 0 1em; font-size: clamp(15px,1.3vw,18px); line-height: 1.6; font-weight: 500; }
.cs-brand { margin: clamp(16px,2vw,24px) 0 0; padding-top: clamp(16px,2vw,24px); border-top: 2px solid var(--pink); font-size: clamp(15px,1.3vw,18px); line-height: 1.5; font-weight: 500; }
.cs-brand strong { color: var(--pink); font-weight: 800; }
.cs-intro:last-child { margin-bottom: 0; }

.cs-body { background: #fff; color: var(--navy); padding: clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px); }
.cs-carousel-wrap { position: relative; }
.cs-carousel { display: flex; gap: clamp(14px,2vw,28px); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: clamp(20px,5vw,64px); padding: 0 clamp(20px,5vw,64px) 6px; scrollbar-width: none; outline-offset: 4px; -webkit-overflow-scrolling: touch; }
.cs-carousel::-webkit-scrollbar { display: none; }
.cs-item { flex: 0 0 auto; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.cs-item img, .cs-item video { height: clamp(240px,52vh,560px); width: auto; max-width: none; display: block; background: #f1f1f1; }
.cs-item-video video { background: #fff; outline: 1px solid rgba(10,31,43,.12); }
.cs-zoom { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; border-bottom: 1px solid rgba(10,31,43,.35); transition: color .25s ease, border-color .25s ease; }
.cs-zoom:hover, .cs-zoom:focus-visible { color: var(--pink); border-color: var(--pink); }
.cs-arrow { position: absolute; top: calc(clamp(240px,52vh,560px) / 2 - 24px); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,.92); border: 1px solid rgba(10,31,43,.2); border-radius: 50%; color: var(--navy); cursor: pointer; transition: background .25s ease, color .25s ease, opacity .25s ease; }
.cs-arrow:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.cs-prev { left: clamp(10px,2vw,28px); } .cs-next { right: clamp(10px,2vw,28px); }
.cs-arrow[disabled] { opacity: 0; pointer-events: none; }

.cs-acc { margin-top: clamp(44px,6vw,80px); }
.cs-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,3vw,48px); }
.cs-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 18px 4px; background: none; border: 0; border-top: 1px solid rgba(10,31,43,.5); border-bottom: 1px solid rgba(10,31,43,.5); font-family: inherit; font-size: clamp(16px,1.5vw,19px); font-weight: 500; color: var(--navy); cursor: pointer; text-align: center; transition: color .25s ease, border-color .25s ease; }
.cs-tab span { flex: 1; }
.cs-tab i { position: relative; flex: 0 0 14px; height: 14px; }
.cs-tab i::before, .cs-tab i::after { content: ""; position: absolute; background: currentColor; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cs-tab i::before { left: 0; right: 0; top: 6px; height: 2px; }
.cs-tab i::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.cs-tab[aria-expanded="true"] { color: var(--pink); border-color: var(--pink); }
.cs-tab[aria-expanded="true"] i::after { transform: scaleY(0); }
.cs-tab:hover { color: var(--pink); }
.cs-panel { max-width: 800px; margin: clamp(28px,4vw,52px) auto 0; animation: csPanel .5s cubic-bezier(.16,.8,.24,1); }
.cs-panel[hidden] { display: none; }
@keyframes csPanel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cs-panel p { margin: 0 0 1.2em; font-size: clamp(16px,1.45vw,19px); line-height: 1.65; }
.cs-panel p strong { color: var(--pink); font-weight: 700; }
.cs-panel .cs-idea { padding: 20px 0 20px 24px; border-left: 4px solid var(--pink); font-family: var(--font-title); text-transform: uppercase; letter-spacing: var(--title-tracking); line-height: 1.3; font-size: clamp(16px,2vw,24px); }
@media (max-width: 720px) { .cs-tabs { grid-template-columns: 1fr; gap: 0; } .cs-tab { border-top-width: 0; } .cs-tab:first-child { border-top-width: 1px; } .cs-arrow { display: none; } }

.cs-pager { background: #fff; color: var(--navy); padding: 0 0 clamp(48px,6vw,80px); }
.cs-pager-row { display: flex; justify-content: space-between; gap: 24px; padding-top: clamp(24px,3vw,40px); border-top: 1px solid rgba(10,31,43,.15); }
.cs-pg { display: flex; align-items: center; gap: 16px; color: var(--navy); max-width: 46%; line-height: 1.35; font-size: clamp(14px,1.3vw,17px); font-weight: 500; transition: color .25s ease; }
.cs-pg small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(10,31,43,.5); margin-bottom: 4px; }
.cs-pg.next { margin-left: auto; text-align: right; }
.cs-pg svg { flex: 0 0 auto; transition: transform .3s ease; }
.cs-pg.prev:hover svg { transform: translateX(-5px); } .cs-pg.next:hover svg { transform: translateX(5px); }
.cs-pg:hover { color: var(--pink); }

.cs-lightbox { position: fixed; inset: 0; z-index: 400; display: none; place-items: center; background: rgba(10,31,43,.94); padding: clamp(16px,4vw,48px); cursor: zoom-out; }
.cs-lightbox.open { display: grid; }
.cs-lightbox img, .cs-lightbox video { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.cs-lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; background: none; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.cs-lightbox-close:hover { background: var(--pink); border-color: var(--pink); }
.cs-carousel.cs-single { justify-content: center; }

/* Galerie en grille (remplace le carrousel) */
.cs-grid { column-count: 3; column-gap: clamp(14px,2vw,28px); }
.cs-grid .cs-item { break-inside: avoid; margin: 0 0 clamp(14px,2vw,28px); display: flex; flex-direction: column; gap: 10px; }
.cs-grid .cs-item img, .cs-grid .cs-item video { width: 100%; height: auto; max-width: 100%; }
.cs-grid.cs-single { column-count: 1; max-width: 900px; margin-inline: auto; }
@media (max-width: 960px) { .cs-grid { column-count: 2; } }
@media (max-width: 560px) { .cs-grid { column-count: 1; } }

/* Parallaxe des heros réalisations */
.cs-hero-media { inset: auto; top: -17.5%; left: 0; height: 135%; will-change: transform; animation: csHeroIn 1.8s cubic-bezier(.16,.8,.24,1) both; transform-origin: 50% 50%; }
@keyframes csHeroIn { from { scale: 1.12; } to { scale: 1; } }
.cs-card { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .cs-hero-media { top: 0; height: 100%; animation: none; } }

/* ---------- Enrichissement (présentation « Contenu site ») ---------- */
/* Agence : baseline sur la bannière */
.team-banner { position: relative; }
.team-baseline { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: var(--pink); display: grid; place-items: center; padding: clamp(18px,3vw,52px); }
.team-baseline img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }
.team-banner > img { object-position: 20% center; }
.team-kicker { margin: clamp(18px,2.4vw,30px) 0 0; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); color: var(--navy); font-size: clamp(18px,2.4vw,30px); }
.team-intro { max-width: 62ch; }
.team-cred { margin-top: 4px !important; padding-top: 10px; border-top: 1px solid rgba(10,31,43,.15); font-size: 12.5px !important; line-height: 1.5 !important; color: rgba(10,31,43,.6) !important; }
@media (max-width: 720px) {
  .team-banner { display: flex; flex-direction: column; }
  .team-banner > img { height: 240px; object-position: 22% center; }
  .team-baseline { position: static; width: 100%; padding: 28px 24px; }
  .team-baseline img { max-width: 420px; }
}

/* Méthode */
.methode-intro { max-width: 62ch; margin: clamp(20px,3vw,32px) auto 0; font-size: clamp(16px,1.5vw,19px); line-height: 1.55; font-weight: 500; color: var(--navy); }
.methode-intro strong { color: var(--pink); font-weight: 700; }
.methode-photo { margin: clamp(36px,5vw,64px) auto 0; max-width: 1100px; }
.methode-photo img { width: 100%; height: auto; display: block; border-radius: 3px; }

/* Offres : détail */
.offres-detail { background: #fff; color: var(--navy); padding: clamp(24px,4vw,56px) 0 clamp(48px,7vw,100px); }
.offre-detail { display: grid; grid-template-columns: minmax(160px, 1fr) 1.7fr; gap: clamp(28px,6vw,96px); align-items: center; padding: clamp(40px,6vw,88px) 0; border-bottom: 1px solid rgba(10,31,43,.12); scroll-margin-top: 70px; }
.offre-detail:last-child { border-bottom: 0; }
.offre-detail:nth-child(even) { grid-template-columns: 1.7fr minmax(160px, 1fr); }
.offre-detail:nth-child(even) .offre-detail-media { order: 2; }
.offre-detail-media { display: grid; place-items: center; }
.offre-detail-media img { width: min(100%, 300px); height: auto; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.offre-detail:hover .offre-detail-media img { transform: rotate(-4deg) scale(1.04); }
.offre-detail h3 { margin: 0 0 clamp(14px,2vw,22px); font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); line-height: 1.1; color: var(--navy); font-size: clamp(24px,3.2vw,42px); }
.offre-detail p { margin: 0 0 1em; font-size: clamp(15px,1.35vw,18px); line-height: 1.6; max-width: 58ch; }
.offre-detail .offre-hook { color: var(--pink); font-weight: 700; }
.offre-quote { margin: clamp(20px,3vw,32px) 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--pink); max-width: 58ch; }
.offre-quote p { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(15px,1.3vw,17px) !important; line-height: 1.55; margin: 0 0 12px !important; }
.offre-quote footer { font-size: 12.5px; line-height: 1.45; color: rgba(10,31,43,.65); }
.offre-quote footer cite { font-style: italic; }
.offre-atelier { margin-top: clamp(24px,3vw,36px); padding: clamp(20px,3vw,32px); border: 1px solid var(--pink); max-width: 62ch; }
.offre-atelier h4 { margin: 0 0 14px; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); color: var(--pink); font-size: clamp(16px,1.8vw,22px); }
.offre-atelier p { font-size: clamp(14px,1.2vw,16px) !important; }
.offre-atelier .offre-atelier-note { margin: 18px 0 0 !important; font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--pink); }
@media (max-width: 760px) {
  .offre-detail, .offre-detail:nth-child(even) { grid-template-columns: 1fr; }
  .offre-detail:nth-child(even) .offre-detail-media { order: 0; }
  .offre-detail-media img { width: 140px; }
}

/* ---------- Hero Méthode : vidéo plein écran ---------- */
.mh { position: relative; background: var(--navy); color: #fff; overflow: hidden; margin-top: -76px; }
.mh-stage { position: relative; height: 56.25vw; max-height: 100vh; }
.mh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,31,43,.5) 0%, rgba(10,31,43,0) 18%); }
.mh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.methode-stage .methode-intro:first-child { margin-top: 0; }

/* Offres : navigation par ancres (pictos + titres) */
.offre-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,3vw,48px); margin-top: clamp(48px,6vw,88px); }
.offre-nav-item { display: flex; flex-direction: column; align-items: center; gap: clamp(16px,2vw,26px); color: #fff; text-align: center; transition: color .3s ease; }
.offre-nav-item img { width: clamp(64px,7vw,104px); height: clamp(64px,7vw,104px); object-fit: contain; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.offre-nav-item span { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); line-height: 1.15; font-size: clamp(14px,1.5vw,20px); max-width: 16ch; }
.offre-nav-item:hover, .offre-nav-item:focus-visible { color: var(--pink); }
.offre-nav-item:hover img, .offre-nav-item:focus-visible img { transform: translateY(-6px) rotate(-5deg) scale(1.06); }
@media (max-width: 720px) { .offre-nav { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }

/* ===== Formulaire : envoi réel ===== */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-legal { grid-column: span 2; margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }
.form-legal a { color: inherit; text-decoration: underline; }
.form-status { grid-column: span 2; margin: 0; font-size: 14px; min-height: 1.4em; }
.form-status.ok { color: #fff; }
.form-status.err { color: var(--pink); }
.submit-btn:disabled { opacity: .6; cursor: wait; }

/* seo-h1 */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Hero agence : l'image intègre déjà la baseline */
.team-banner > img { width: 100%; height: auto; aspect-ratio: 2221 / 1280; object-fit: cover; object-position: center; display: block; }
@media (max-width: 820px) { .team-banner > img { height: auto; aspect-ratio: 2221 / 1280; object-position: center; } }

/* Film de présentation d'une réalisation */
.cs-film { margin: 0 0 clamp(28px,4vw,56px); }
.cs-film video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 6px; background: var(--navy); cursor: pointer; object-fit: cover; }

/* Cartes offres de la home : cartes cliquables */
a.offre-card { text-decoration: none; cursor: pointer; }
/* Bandeaux Agence et Méthode : hauteur réduite */
.team-banner > img { height: clamp(240px, 36vw, 520px); aspect-ratio: auto; object-fit: cover; object-position: 50% 15%; }
.mh-stage { height: clamp(260px, 38vw, 560px); max-height: none; }
.mh-video { object-position: 50% 40%; }
@media (max-width: 820px) { .team-banner > img { height: auto; aspect-ratio: 2221 / 1280; } .mh-stage { height: clamp(220px, 56vw, 360px); } }

/* cs-aligned : mosaïque 3 colonnes alignées */
.cs-grid.cs-aligned { display: grid; column-count: auto; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,2vw,28px); grid-auto-flow: dense; }
.cs-aligned .cs-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f1f1f1; border-radius: 4px; }
.cs-aligned .cs-item img, .cs-aligned .cs-item video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cs-aligned .cs-item.cs-span2 { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 960px) { .cs-grid.cs-aligned { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .cs-grid.cs-aligned { grid-template-columns: 1fr; } .cs-aligned .cs-item.cs-span2 { grid-row: auto; aspect-ratio: 4 / 5; } }

/* films YouTube (vignettes + lecture en plein écran) */
.cs-yt-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,2vw,28px); margin: 0 0 clamp(28px,4vw,56px); }
.cs-yt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--navy); color: #fff; text-decoration: none; }
.cs-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cs-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,31,43,.72) 0%, rgba(10,31,43,0) 55%); pointer-events: none; }
.cs-yt:hover img, .cs-yt:focus-visible img { transform: scale(1.04); }
.cs-yt-play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .3s ease; }
.cs-yt-play svg { margin-left: 3px; }
.cs-yt:hover .cs-yt-play, .cs-yt:focus-visible .cs-yt-play { transform: scale(1.1); }
.cs-yt-cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.cs-yt-cap b { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: clamp(18px,2vw,26px); line-height: 1; }
.cs-yt-cap small { font-size: 13px; opacity: .9; }
.cs-aligned .cs-item.cs-wide { grid-column: span 2; aspect-ratio: 8 / 3; }
.cs-lightbox iframe { width: min(100%, 1280px); aspect-ratio: 16 / 9; height: auto; max-height: 100%; border: 0; background: #0a1f2b; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
@media (max-width: 960px) { .cs-yt-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .cs-yt-cap small { display: none; } }
@media (max-width: 560px) { .cs-yt-row { grid-template-columns: 1fr; } .cs-yt-cap small { display: block; } .cs-aligned .cs-item.cs-wide { grid-column: auto; aspect-ratio: 4 / 3; } }
.cs-lightbox-stage:has(iframe) { width: 100%; display: grid; place-items: center; }

/* vignettes films : plus petites */
.cs-yt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; gap: clamp(10px,1.4vw,18px); }
.cs-yt-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.cs-yt-play svg { width: 16px; height: 16px; margin-left: 2px; }
.cs-yt-cap { left: 12px; right: 12px; bottom: 10px; }
.cs-yt-cap b { font-size: clamp(14px,1.5vw,18px); }
.cs-yt-cap small { font-size: 12px; }
@media (max-width: 960px) { .cs-yt-row { max-width: none; } }
@media (max-width: 560px) { .cs-yt-row { grid-template-columns: repeat(3, minmax(0,1fr)); } .cs-yt-cap small { display: none; } .cs-yt-play { width: 34px; height: 34px; margin: -17px 0 0 -17px; } }

/* vignettes films : alignées sur les 3 colonnes de la galerie, format panoramique */
.cs-yt-row { max-width: none; gap: clamp(14px,2vw,28px); }
.cs-yt { aspect-ratio: 21 / 9; }
.cs-yt-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.cs-yt-play svg { width: 18px; height: 18px; }
.cs-yt-cap { left: 16px; right: 16px; bottom: 12px; }
.cs-yt-cap b { font-size: clamp(16px,1.8vw,22px); }
.cs-yt-cap small { font-size: 12px; }
.cs-aligned .cs-item.cs-wide img { object-position: 50% 45%; }
@media (max-width: 960px) { .cs-yt { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .cs-yt-row { grid-template-columns: 1fr; } .cs-yt { aspect-ratio: 16 / 9; } .cs-yt-cap small { display: block; } .cs-yt-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; } }

/* cs-ar11 : tuiles 11/10 pour que la tuile haute (2 lignes) épouse un visuel vertical type chemin de fer */
.cs-aligned.cs-ar11 .cs-item { aspect-ratio: 11 / 10; }
.cs-aligned.cs-ar11 .cs-item.cs-span2 { aspect-ratio: auto; background: #fff; }
.cs-aligned.cs-ar11 .cs-item.cs-span2 img { object-position: 50% 50%; }
@media (max-width: 560px) { .cs-aligned.cs-ar11 .cs-item.cs-span2 { aspect-ratio: 53 / 100; } }

/* positions explicites (desktop) : colonne gauche = couverture + animation, centre = chemin de fer, droite = doubles pages */
@media (min-width: 961px) {
  .cs-aligned .cs-p-a { grid-column: 1; grid-row: 1; }
  .cs-aligned .cs-p-b { grid-column: 1; grid-row: 2; }
  .cs-aligned .cs-p-c { grid-column: 2; grid-row: 1 / span 2; }
  .cs-aligned .cs-p-d { grid-column: 3; grid-row: 1; }
  .cs-aligned .cs-p-e { grid-column: 3; grid-row: 2; }
}

/* cs-rows : rangées de hauteur fixe (3/4 de la largeur d'une colonne) pour des tuiles hautes et larges parfaitement calées */
.cs-body .container { container-type: inline-size; }
.cs-grid.cs-rows { --g: clamp(14px,2vw,28px); gap: var(--g); grid-auto-rows: calc((100cqw - 2 * var(--g)) / 3 * 0.75); }
.cs-rows .cs-item, .cs-aligned .cs-rows .cs-item { aspect-ratio: auto; height: 100%; }
.cs-aligned .cs-item.cs-wide, .cs-aligned .cs-item.cs-span2 { }
.cs-grid.cs-rows .cs-item.cs-wide, .cs-grid.cs-rows .cs-item.cs-span2 { aspect-ratio: auto; }
@media (min-width: 961px) {
  .cs-grid.cs-rows .cs-item.cs-widd { grid-column: span 2; }
  .cs-grid.cs-rows .cs-item.cs-e1 { grid-column: 1; grid-row: 1 / span 2; }
  .cs-grid.cs-rows .cs-item.cs-e2 { grid-column: 2; grid-row: 3; }
  .cs-grid.cs-rows .cs-item.cs-e3 { grid-column: 2; grid-row: 2; }
  .cs-grid.cs-rows .cs-item.cs-e4 { grid-column: 3; grid-row: 2; }
  .cs-grid.cs-rows .cs-item.cs-e5 { grid-column: 1; grid-row: 3; }
  .cs-grid.cs-rows .cs-item.cs-e6 { grid-column: 3; grid-row: 3; }
  .cs-grid.cs-rows .cs-item.cs-e7 { grid-column: 2 / span 2; grid-row: 1; }
}
@media (max-width: 960px) { .cs-grid.cs-rows { grid-auto-rows: calc((100cqw - var(--g)) / 2 * 0.75); } }
@media (max-width: 560px) {
  .cs-grid.cs-rows { grid-auto-rows: auto; }
  .cs-grid.cs-rows .cs-item { height: auto; aspect-ratio: 4 / 3; }
  .cs-grid.cs-rows .cs-item.cs-span2 { grid-row: auto; aspect-ratio: 1650 / 2320; }
  .cs-grid.cs-rows .cs-item.cs-wide { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* Capital Bleu : rangées 3/2, trois visuels verticaux en tuiles hautes, film avec commandes */
.cs-grid.cs-rows.cs-rowf667 { grid-auto-rows: calc((100cqw - 2 * var(--g)) / 3 * 0.667); }
.cs-film video[controls] { cursor: auto; }
@media (min-width: 961px) {
  .cs-grid.cs-rows .cs-item.cs-c1 { grid-column: 1; grid-row: 1 / span 2; }
  .cs-grid.cs-rows .cs-item.cs-c2 { grid-column: 2; grid-row: 1; }
  .cs-grid.cs-rows .cs-item.cs-c3 { grid-column: 2; grid-row: 2; }
  .cs-grid.cs-rows .cs-item.cs-c4 { grid-column: 3; grid-row: 1 / span 2; }
  .cs-grid.cs-rows .cs-item.cs-c5 { grid-column: 1; grid-row: 3 / span 2; }
  .cs-grid.cs-rows .cs-item.cs-c6 { grid-column: 2 / span 2; grid-row: 3; }
  .cs-grid.cs-rows .cs-item.cs-c7 { grid-column: 2; grid-row: 4; }
  .cs-grid.cs-rows .cs-item.cs-c8 { grid-column: 3; grid-row: 4; }
}
@media (max-width: 960px) { .cs-grid.cs-rows.cs-rowf667 { grid-auto-rows: calc((100cqw - var(--g)) / 2 * 0.667); } }
@media (max-width: 560px) { .cs-grid.cs-rows .cs-item.cs-port { aspect-ratio: 3 / 4; } }
/* animation carrée du logo : entière dans sa tuile (fond blanc) */
.cs-grid.cs-rows .cs-item.cs-c8 { background: #fff; }
.cs-grid.cs-rows .cs-item.cs-c8 video { object-fit: contain; }

/* Bilan : couverture et animation en tuiles hautes (alternées), bandeau large en bas */
@media (min-width: 961px) {
  .cs-grid.cs-rows .cs-item.cs-b1 { grid-column: 1; grid-row: 1 / span 2; }
  .cs-grid.cs-rows .cs-item.cs-b2 { grid-column: 2; grid-row: 1; }
  .cs-grid.cs-rows .cs-item.cs-b3 { grid-column: 3; grid-row: 1; }
  .cs-grid.cs-rows .cs-item.cs-b4 { grid-column: 2; grid-row: 2; }
  .cs-grid.cs-rows .cs-item.cs-b5 { grid-column: 3; grid-row: 2; }
  .cs-grid.cs-rows .cs-item.cs-b9 { grid-column: 1 / span 2; grid-row: 3; }
  .cs-grid.cs-rows .cs-item.cs-b6 { grid-column: 3; grid-row: 3 / span 2; }
  .cs-grid.cs-rows .cs-item.cs-b7 { grid-column: 1; grid-row: 4; }
  .cs-grid.cs-rows .cs-item.cs-b8 { grid-column: 2; grid-row: 4; }
}
/* collage de l'atelier (carré, 3 photos) : entier dans sa tuile, fond blanc */
.cs-grid.cs-rows .cs-item.cs-b8 { background: #fff; }
.cs-grid.cs-rows .cs-item.cs-b8 img { object-fit: contain; }
.cs-grid.cs-rows .cs-item.cs-b8 img { background: #fff; }

/* ===== rz : page réalisations v2 ===== */
.rz-page .container { max-width: 1240px; }
.rz-lead { max-width: 680px; margin: calc(-1 * clamp(20px,3vw,40px)) auto clamp(28px,4vw,44px); text-align: center; font-size: clamp(16px,1.6vw,19px); line-height: 1.6; color: rgba(10,31,43,.78); }
.rz-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(36px,5vw,64px); }
.rz-chip { font: 600 13px/1 'Outfit', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(10,31,43,.25); background: transparent; color: var(--navy); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.rz-chip:hover { border-color: var(--pink); color: var(--pink); }
.rz-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rz { padding: clamp(36px,5vw,72px) 0; border-top: 1px solid rgba(10,31,43,.12); }
.rz[hidden] { display: none; }
.rz-main { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(24px,4.5vw,72px); align-items: center; }
.rz-flip .rz-main { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.rz-flip .rz-hero { order: 2; }
.rz-hero { display: block; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 11; background: #eef1f2; }
.rz-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.rz-hero:hover img, .rz-hero:focus-visible img { transform: scale(1.045); }
.rz-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.rz-num { margin: 0 0 clamp(16px,2vw,26px); font-size: 13px; letter-spacing: .14em; color: rgba(10,31,43,.5); }
.rz-num b { color: var(--pink); font-weight: 700; }
.rz-tag { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.rz .rz-client { margin: 0 0 clamp(14px,1.8vw,22px); font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); line-height: .98; font-size: clamp(30px,4.2vw,56px); color: var(--navy); text-align: left; }
.rz-title { margin: 0 0 14px; font-size: clamp(17px,1.7vw,21px); font-weight: 500; line-height: 1.35; }
.rz-txt { margin: 0 0 clamp(22px,2.6vw,32px); font-size: 15.5px; line-height: 1.65; color: rgba(10,31,43,.75); max-width: 46ch; }
.rz-cta { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border: 1px solid var(--navy); border-radius: 999px; color: var(--navy); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .3s, color .3s, border-color .3s, gap .3s; }
.rz-cta:hover, .rz-cta:focus-visible { background: var(--pink); border-color: var(--pink); color: #fff; gap: 18px; }
.rz-cta-solid { background: var(--navy); color: #fff; }
.rz-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px,1.6vw,20px); margin-top: clamp(18px,2.4vw,30px); }
.rz-th { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #f1f1f1; }
.rz-th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.rz-th:hover img, .rz-th:focus-visible img { transform: scale(1.06); }
.rz-play { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.rz-play svg { margin-left: 2px; }
.rz-more { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 3; padding: clamp(14px,1.8vw,22px); border-radius: 4px; background: var(--navy); color: #fff; text-decoration: none; transition: background .3s; }
.rz-more span { font-family: var(--font-title); text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: clamp(20px,2.2vw,30px); line-height: 1; }
.rz-more small { font-size: 13px; opacity: .75; margin-top: -6px; }
.rz-more svg { align-self: flex-end; color: var(--pink); transition: transform .3s; }
.rz-more:hover, .rz-more:focus-visible { background: var(--pink); }
.rz-more:hover svg { color: #fff; transform: translateX(6px); }
.rz-end { border-top: 1px solid rgba(10,31,43,.12); padding-top: clamp(40px,6vw,80px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rz-end p { margin: 0; font-family: var(--font-title); text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: clamp(24px,3.6vw,44px); color: var(--pink); }
@media (max-width: 900px) {
  .rz-main, .rz-flip .rz-main { grid-template-columns: 1fr; }
  .rz-flip .rz-hero { order: 0; }
  .rz-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.rz .rz-client.rz-long { font-size: clamp(24px,3vw,40px); line-height: 1.02; }


/* ===== retours site (PPT) ===== */
/* Menu : délai d'apparition limité à opacity/transform (le survol réagit tout de suite) */
.nav-overlay-links a { transition: opacity .5s ease var(--d,0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0s), color .12s ease 0s; }
.nav-overlay-links a:nth-child(1) { --d: .1s; } .nav-overlay-links a:nth-child(2) { --d: .18s; } .nav-overlay-links a:nth-child(3) { --d: .26s; } .nav-overlay-links a:nth-child(4) { --d: .34s; } .nav-overlay-links a:nth-child(5) { --d: .42s; }
.nav-overlay:not(.open) .nav-overlay-links a { --d: 0s; }
.nav-overlay.open .nav-overlay-links a:nth-child(n) { transition-delay: var(--d), var(--d), 0s; }
/* Menu : curseur blanc sur le fond rouge */
body.nav-is-open .cursor-dot { background: #fff; }
body.nav-is-open .cursor-ring { border-color: rgba(255,255,255,.8); }
body.nav-is-open .cursor.hover .cursor-ring { border-color: #fff; background: rgba(255,255,255,.18); }
.nav-overlay-links a:hover { color: var(--navy); }
/* Boutons : remplissage rapide, texte qui s'inverse en même temps (plus de "rouge sur rouge") */
.btn { transition: color .1s ease .05s; }
.btn::before { transition: transform .26s cubic-bezier(.3,.7,.2,1); }
.btn:not(:hover) { transition-delay: 0s; }
.submit-btn { transition: background .15s ease, border-color .15s ease; }
/* Intro agence (home) */
.agence-intro { background: var(--navy); color: #fff; text-align: center; padding: clamp(72px,9vw,130px) 0; }
.agence-intro .ai-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); }
.agence-intro h1, .agence-intro h2 { margin: 0; color: #fff; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: clamp(26px,4.4vw,52px); }
.agence-intro .ai-txt { max-width: 62ch; margin: clamp(24px,4vh,40px) auto 0; font-size: clamp(16px,1.5vw,19px); line-height: 1.6; font-weight: 500; color: rgba(255,255,255,.86); }
.agence-intro .ai-txt strong { color: #fff; font-weight: 700; }
.agence-intro .btn { margin-top: clamp(26px,4vh,40px); }
/* Offres : recto = picto + titre, verso = description seule ; hauteur fixe, plus de décalage */
.offre-card { display: grid; place-items: center; }
.offre-card > .recto, .offre-card > .txt { grid-area: 1 / 1; }
.offre-card .recto { display: flex; flex-direction: column; align-items: center; gap: 16px; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.offre-card:hover .recto, .offre-card.on .recto { opacity: 0; transform: translateY(-10px); }
.offre-card .txt { max-height: none; overflow: visible; align-content: center; text-align: center; font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s ease .05s, transform .35s cubic-bezier(.2,.8,.2,1); }
.offre-card:hover .txt, .offre-card.on .txt { max-height: none; opacity: 1; transform: none; }
.offre-card .txt .intro { font-size: 15px; }
.offre-card:hover .hint, .offre-card.on .hint { opacity: 0; }
/* Réalisations (home) : mosaïque avec un grand visuel + CTA */
@media (min-width: 761px) {
  .grid6 > .tile:first-child { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
}
.rz-home-cta { display: flex; width: fit-content; margin: clamp(36px,5vw,56px) auto 0; }
.realisations .rz-home-cta { margin-top: clamp(36px,5vw,56px); }
/* Contact : carte plus grande */
.contact-info { display: flex; flex-direction: column; }
.contact-mini-map { flex: 1 1 auto; min-height: 260px; height: auto; }
.contact-mini-map-link { opacity: 1; background: linear-gradient(0deg, rgba(10,31,43,.65), transparent 45%); }
.form-status a { color: inherit; text-decoration: underline; }
/* Page réalisations : moins de niveaux de titres */
.rz-more small { display: none; }
.rz-more span { margin-top: auto; }
.rz-info .rz-title { font-size: clamp(16px,1.5vw,19px); }
.rz-txt strong { display: block; margin-bottom: 8px; font-size: clamp(17px,1.6vw,20px); line-height: 1.35; font-weight: 600; color: var(--navy); }
@media (min-width: 761px) {
  .grid6 > .tile:first-child img { position: absolute; width: 112%; height: 112%; }
}

/* pages démarrant sur fond blanc : la zone du header (sticky) ne doit pas laisser voir le fond marine */
body.page-light { background: #fff; }


/* ===== curseur « tremblement » ===== */
.cursor-dot { width: 12px; height: 12px; top: -6px; left: -6px; background: var(--pink); transition: background .2s ease, box-shadow .2s ease; }
.cursor-ring, .cursor-echo { position: absolute; width: 12px; height: 12px; top: -6px; left: -6px; border-radius: 50%; border: 1.5px solid var(--pink); background: none; transition: border-color .2s ease; }
.cursor-ring { opacity: .55; }
.cursor-echo { opacity: .3; }
.cursor.hover .cursor-ring, .cursor.down .cursor-ring { width: 12px; height: 12px; top: -6px; left: -6px; background: none; border-color: var(--pink); }
.cursor.hover .cursor-dot { transform: none; background: transparent; box-shadow: 0 0 0 2px var(--pink); }
.cursor.down .cursor-dot { background: var(--pink); }
body.nav-is-open .cursor-dot { background: #fff; }
body.nav-is-open .cursor-ring, body.nav-is-open .cursor-echo, body.nav-is-open .cursor.hover .cursor-ring { border-color: #fff; background: none; }
body.nav-is-open .cursor.hover .cursor-dot { background: transparent; box-shadow: 0 0 0 2px #fff; }


/* ===== carte stylisée : plan teinté marine + épicentre qui pulse ===== */
.contact-mini-map { border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0a1f2b; isolation: isolate; }
.contact-mini-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) invert(1) contrast(.95) brightness(.72); opacity: .9; transform: scale(1.04); }
.map-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(10,31,43,.78), rgba(10,31,43,.35) 60%, rgba(255,0,70,.18)); mix-blend-mode: multiply; }
.map-epi { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.map-epi b { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 24px 6px rgba(255,0,70,.55); }
.map-epi i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--pink); opacity: 0; animation: epi 3s cubic-bezier(.2,.6,.3,1) infinite; }
.map-epi i:nth-child(2) { animation-delay: 1s; } .map-epi i:nth-child(3) { animation-delay: 2s; }
@keyframes epi { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(7); opacity: 0; } }
.map-label { position: absolute; z-index: 3; left: 50%; top: calc(50% - 26px); transform: translate(-50%,-100%); background: #fff; color: var(--navy); border-radius: 6px; padding: 8px 12px 9px; font-size: 12px; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.35); pointer-events: none; }
.map-label strong { display: block; font-family: var(--font-title); text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: 15px; font-weight: 400; color: var(--pink); }
.map-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.contact-mini-map-link { z-index: 4; opacity: 1; background: none; align-items: flex-end; justify-content: flex-end; }
.contact-mini-map-link span { background: rgba(10,31,43,.85); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 600; transition: background .2s ease, border-color .2s ease; }
.contact-mini-map:hover .contact-mini-map-link span { background: var(--pink); border-color: var(--pink); }
@media (prefers-reduced-motion: reduce) { .map-epi i { animation: none; opacity: .5; transform: scale(3); } }


/* ===== carte dessinée à la main (SVG) ===== */
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.contact-mini-map { overflow: hidden; }
.map-tint { background: radial-gradient(ellipse at 50% 50%, rgba(10,31,43,0) 35%, rgba(10,31,43,.55) 100%); mix-blend-mode: normal; }
.map-label { display: none; }
.map-label { display: block; top: calc(50% - 24px); }
@media (max-width: 560px) { .map-svg .ptr-t { display: none; } }

/* ===== police de titre Finder ===== */
:root { font-synthesis: none; }
.split-title { padding-top: .3em; margin-top: -.3em; }   /* ne coupe plus les accents (É, Ô…) */
.map-label strong { font-weight: 400; }

/* menu plein écran en Finder */
.nav-overlay-links a { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; font-size: clamp(40px,8.4vw,104px); }
@media (max-width: 560px) { .nav-overlay-links a { font-size: clamp(34px,11vw,56px); } }

.agence-intro h1, .agence-intro h2 { text-wrap: balance; max-width: 22ch; margin-left: auto; margin-right: auto; }
.agence-intro h1, .agence-intro h2 { line-height: 1.12; }
.offre-card .txt .solo { font-size: 13.5px; line-height: 1.5; font-weight: 500; }

/* ===== Méthode : bloc « Notre approche » — bloc épinglé, les 5 étapes défilent à l'intérieur ===== */
.approche-pin { --apH: min(calc(100vh - 140px), 620px); max-width: 1180px; margin: clamp(56px,8vw,104px) auto 0; height: calc(var(--apH) + 290vh); }
.approche { --p: 0; position: sticky; top: max(84px, calc((100vh - var(--apH)) / 2 + 30px)); height: var(--apH); box-sizing: border-box; display: flex; flex-direction: column; background: var(--navy); color: #fff; border-radius: 4px; padding: clamp(26px,3.4vw,52px); text-align: left; overflow: hidden; }
.methode .approche h2.approche-title { color: var(--pink); margin: 0 0 clamp(8px,2vw,28px); flex: none; }
.ap-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(24px,5vw,72px); align-items: center; }
.ap-stage { position: relative; width: 100%; aspect-ratio: 1130 / 760; max-height: 100%; justify-self: center; }
.ap-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ap-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ap-step { grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.ap-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ap-step h3 { margin: 0; font: 400 clamp(22px,2.6vw,36px)/1.1 var(--font-title); letter-spacing: var(--title-tracking); text-transform: uppercase; color: #fff; }
.ap-step p { margin: 0; max-width: 40ch; font-size: clamp(15px,1.3vw,18px); line-height: 1.6; color: rgba(255,255,255,.85); }
/* repère discret des 5 étapes */
.ap-rail { position: absolute; z-index: 2; right: clamp(12px,1.8vw,26px); top: 50%; height: 38%; width: 9px; transform: translateY(-38%); pointer-events: none; }
.ap-rail::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.16); }
.ap-rail-fill { position: absolute; left: 4px; top: 0; width: 1px; height: calc(var(--p) * 100%); background: var(--pink); opacity: .7; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.ap-rail > span { position: absolute; left: 2px; pointer-events: auto; cursor: pointer; width: 5px; height: 5px; border-radius: 50%; background: #0a1f2b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transform: translateY(-50%); }
.ap-rail > span:nth-of-type(1) { top: 0; } .ap-rail > span:nth-of-type(2) { top: 25%; } .ap-rail > span:nth-of-type(3) { top: 50%; } .ap-rail > span:nth-of-type(4) { top: 75%; } .ap-rail > span:nth-of-type(5) { top: 100%; }
.ap-rail-dot { position: absolute; left: 0; top: calc(var(--p) * 100%); width: 9px; height: 9px; border-radius: 50%; background: var(--pink); transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(255,0,70,.16); transition: top .6s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 820px) {
  .approche-pin { --apH: min(calc(100vh - 120px), 700px); height: calc(var(--apH) + 290vh); }
  .approche { top: max(72px, calc((100vh - var(--apH)) / 2 + 24px)); padding: 22px 26px 22px 20px; }
  .ap-rail { right: 9px; height: 30%; }
  .ap-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: 14px; align-items: center; }
  .ap-stage { width: 100%; height: auto; max-height: 100%; }
  .ap-steps { align-self: start; min-height: 11.5em; }
  .ap-step h3 { font-size: clamp(20px,6vw,28px); }
}
@media (prefers-reduced-motion: reduce) { .ap-step { transition: none; } }

/* Home réalisations : légendes plus grandes */
.grid6 .tile .cap { padding: clamp(16px,2.2vw,26px) clamp(14px,2vw,24px) clamp(14px,1.8vw,22px); background: linear-gradient(0deg, rgba(10,31,43,.92) 0%, rgba(10,31,43,.6) 55%, rgba(10,31,43,0) 100%); }
.grid6 .tile .cap b { font-size: clamp(15px,1.9vw,24px); line-height: 1.2; margin-bottom: 4px; }
.grid6 .tile .cap span { display: block; font-size: clamp(12.5px,1.35vw,17px); line-height: 1.3; color: rgba(255,255,255,.85); }
@media (min-width: 761px) {
  .grid6 > .tile:first-child .cap b { font-size: clamp(24px,2.8vw,38px); }
  .grid6 > .tile:first-child .cap span { font-size: clamp(16px,1.6vw,21px); }
}

/* Méthode : les 3 blocs (picto / titre / texte) alignés sur les mêmes lignes */
.picto-row { align-items: stretch; }
.picto-card { align-content: start; grid-template-rows: clamp(90px,10vw,140px) auto 1fr; gap: 14px; }
.picto-card h3 { align-self: start; line-height: 1.1; }
.picto-card p { margin-top: 0; align-self: start; }
@media (max-width: 720px) { .picto-card { grid-template-rows: auto auto auto; } }
/* Arénaire : image entière (pas de zoom 112 %) pour ne pas rogner le logo en haut */
.grid6 > .tile:first-child img { width: 100%; height: 100%; left: 0; top: 0; }

.ap-rail > span::after { content: ""; position: absolute; inset: -9px; }

/* Réalisations : les vignettes carrées de la home, affichées en entier */
.rz-page .rz-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.rz-page .rz-flip .rz-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.rz-page .rz-hero { aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: end; }
.rz-page .rz-flip .rz-hero { justify-self: start; }
@media (max-width: 820px) { .rz-page .rz-main, .rz-page .rz-flip .rz-main { grid-template-columns: minmax(0,1fr); } .rz-page .rz-hero, .rz-page .rz-flip .rz-hero { max-width: none; justify-self: stretch; } }

/* mobile : zones tactiles du pied de page */
@media (max-width: 820px) { .footer-row a { display: inline-block; padding: 12px 0; } }


/* ===== mise à jour : zones de clic, offres de la home, vignettes réalisations, plan ===== */
/* zones de clic agrandies (logo + burger) sans changer l'apparence */
.site-header > a { position: relative; display: block; line-height: 0; }
.site-header > a::after { content: ""; position: absolute; inset: -22px -28px; }
.burger::after { content: ""; position: absolute; inset: -24px -26px; }

/* offres de la home : pictos et textes plus grands, texte aligné à gauche */
.offre-card { place-items: center stretch; text-align: left; padding: 30px 28px; }
.offre-card .recto { align-items: flex-start; text-align: left; gap: 20px; }
.offre-card .picto { width: 88px; height: 88px; }
.offre-card h3 { font-size: clamp(17px,1.65vw,21px); line-height: 1.15; }
.offre-card .txt { text-align: left; justify-items: start; }
.offre-card .txt .solo { font-size: clamp(14.5px,1.2vw,16px); line-height: 1.5; }
@media (min-width: 561px) { .offre-card { min-height: clamp(340px,34vw,420px); } }

/* vignettes réalisations : toute la vignette est cliquable, titre plus gros, centré, au survol */
a.tile { display: block; color: #fff; text-decoration: none; cursor: pointer; }
.grid6 .tile .cap { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(16px,2.4vw,32px); background: rgba(10,31,43,.58); opacity: 0; transition: opacity .35s ease; }
.grid6 .tile:hover .cap, .grid6 .tile:focus-visible .cap { opacity: 1; }
.grid6 .tile .cap b { font-size: clamp(19px,2.4vw,30px); line-height: 1.15; margin-bottom: 6px; }
.grid6 .tile .cap span { font-size: clamp(13px,1.4vw,17px); }
@media (min-width: 761px) { .grid6 > .tile:first-child .cap b { font-size: clamp(28px,3.4vw,46px); } .grid6 > .tile:first-child .cap span { font-size: clamp(16px,1.6vw,22px); } }
.tile:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
@media (hover: none) { .grid6 .tile .cap { opacity: 1; inset: auto 0 0 0; justify-content: flex-end; background: linear-gradient(0deg, rgba(10,31,43,.92) 0%, rgba(10,31,43,.55) 60%, rgba(10,31,43,0) 100%); } }

/* plan : logo Séisme à la place du texte */
.map-label { background: var(--pink); color: #fff; text-align: center; padding: 10px 14px 9px; }
.map-label::after { background: var(--pink); }
.map-label img { display: block; height: 22px; width: auto; margin: 0 auto 5px; }
.map-label small { display: block; font-size: 12px; line-height: 1.2; opacity: .9; }

/* offres (home) : pictos + titres centrés en bleu foncé, texte au survol à gauche sur fond blanc */
.offre-card { place-items: center stretch; }
.offre-card .recto { align-items: center; text-align: center; }
.offre-card .picto, .offre-card:hover .picto, .offre-card.on .picto { filter: brightness(0) saturate(100%) invert(8%) sepia(85%) saturate(255%) hue-rotate(158deg) brightness(154%) contrast(111%); }
.offre-card h3, .offre-card:hover h3, .offre-card.on h3 { color: #0a1f2b; text-align: center; }
.offre-card::after { background: #fff; }
.offre-card .txt, .offre-card .txt p, .offre-card .txt .intro { color: #0a1f2b; text-align: left; }
.offre-card .txt { justify-items: start; }

/* home : section Agence (photo de groupe + intro) */
.agence-home .team { padding-bottom: clamp(40px,5vw,72px); }
.agence-home .team .btn { margin-top: clamp(24px,3vw,36px); }
.agence-home + .methode { padding-top: clamp(40px,5vw,72px); }
.socials a svg { display: block; }

/* bandeau photo de groupe (Agence + home) : plus haut */
@media (min-width: 821px) { .team-banner > img { height: clamp(380px, 50vw, 740px); object-position: 50% 20%; } }

/* home : présentation « Stratégie, communication… » sur la photo de groupe */
.agence-intro.agence-photo { background: #e3dfde url("assets/images/home-agence.webp") no-repeat left center / cover; color: var(--navy); text-align: left; display: flex; align-items: center; min-height: calc(100vw * 814 / 2000); padding: clamp(56px,7vw,110px) 0; }
.agence-photo .container { width: 100%; max-width: none; padding: 0; }
.agence-photo .container > * { margin-left: 57%; max-width: 38%; }
.agence-photo h2 { color: var(--navy); max-width: 38%; margin-left: 57%; margin-right: 0; text-wrap: balance; }
.agence-photo .ai-txt { color: var(--navy); margin-left: 57%; margin-right: 0; max-width: 38ch; }
@media (max-width: 1000px) {
  .agence-intro.agence-photo { display: block; min-height: 0; text-align: center; background: linear-gradient(to bottom, rgba(227,223,222,0) calc(40.7vw - 50px), #e3dfde 40.7vw), url("assets/images/home-agence.webp") no-repeat top center / 100% auto, #e3dfde; padding: calc(40.7vw + 8px) 0 56px; }
  .agence-photo .container > *, .agence-photo h2, .agence-photo .ai-txt { margin-left: auto; margin-right: auto; max-width: 100%; }
}

/* contact (home) : pleine largeur, bas de la carte aligné sur le bas du formulaire */
.contact-wrap { background: var(--navy); padding: clamp(56px,7vw,100px) 0; }
.contact-card { background: none; border-radius: 0; padding: 0; align-items: stretch; }
.form-grid { position: relative; }
.form-status { position: absolute; left: 0; right: 0; top: calc(100% + 10px); min-height: 0; }
.contact-info .contact-mini-map { min-height: 200px; }
/* bandeau d'accueil plus bas */
@media (min-width: 1001px) {
  .agence-intro.agence-photo { padding: clamp(32px,4vw,64px) 0; }
  .agence-photo h2 { font-size: clamp(24px,3.5vw,46px); max-width: 40%; }
  .agence-photo .ai-txt { margin-top: clamp(16px,2.4vh,26px); font-size: clamp(15px,1.25vw,18px); }
  .agence-photo .btn { margin-top: clamp(18px,2.4vh,28px); }
}
/* offres (home) : pas de + */
.offre-card .hint { display: none; }

/* méthode : « Notre approche » en pleine largeur, titre blanc */
.approche-pin { max-width: none; width: 100%; margin: clamp(56px,8vw,104px) 0 0; }
.approche { border-radius: 0; padding-left: max(clamp(20px,5vw,64px), calc((100% - 1320px) / 2 + clamp(20px,5vw,64px))); padding-right: max(clamp(34px,5vw,64px), calc((100% - 1320px) / 2 + clamp(20px,5vw,64px))); }
.methode .approche h2.approche-title { color: #fff; }
#methode:has(.approche-pin) { padding-bottom: 0; }
@media (max-width: 820px) { .approche { padding: 22px 34px 22px 20px; } }

/* menu plein écran : ferré à droite */
.nav-overlay-links { align-items: flex-end; text-align: right; }
.nav-overlay-foot { justify-content: flex-end; text-align: right; gap: 16px 32px; }

/* offres (home) : sans cartes blanches, pictos et titres blancs */
.offre-card { background: transparent; color: #fff; }
.offre-card::after { display: none; }
.offre-card .picto, .offre-card:hover .picto, .offre-card.on .picto { filter: brightness(0) invert(1); }
.offre-card h3, .offre-card:hover h3, .offre-card.on h3 { color: #fff; }
.offre-card .txt, .offre-card .txt p, .offre-card .txt .intro { color: #fff; }

/* offres (home) : espaces réduits, apparition en fondu sans mouvement */
.offres .cards { margin-top: clamp(16px,2.4vw,32px); }
@media (min-width: 561px) { .offres .offre-card { min-height: clamp(300px,27vw,350px); } }
.offres .btn { margin-top: clamp(14px,2.2vw,28px); }
.offres .reveal, .offres .reveal.in-view { transform: none; transition: opacity 1.1s ease; }
.offre-card, .offre-card:hover { transform: none; }
.offre-card .recto, .offre-card:hover .recto, .offre-card.on .recto { transform: none; transition: opacity .6s ease; }
.offre-card .txt, .offre-card:hover .txt, .offre-card.on .txt { transform: none; transition: opacity .6s ease; }
.offre-card:hover .picto, .offre-card.on .picto { transform: none; }
.offre-card:hover h3, .offre-card.on h3 { animation: none; }
@media (min-width: 561px) {
  .offres .offre-card { place-items: start stretch; padding: 6px 14px 0; min-height: 0; }
  .offres .offre-card .txt { align-content: start; }
  .offres .offre-card .txt .solo { font-size: clamp(14px,1.12vw,15.5px); line-height: 1.5; }
}

/* offres (home), ≥ 1001 px : texte au survol en surimpression, la hauteur ne dépend que des pictos + titres */
@media (min-width: 1001px) {
  .offres { padding: clamp(56px,6.5vw,96px) 0 clamp(56px,5.6vw,90px); }
  .offres .cards { margin-top: clamp(48px,6.6vw,130px); }
  .offres .offre-card { overflow: visible; position: relative; }
  .offres .offre-card .txt { position: absolute; left: 14px; right: 14px; top: 6px; }
  .offres .btn { margin-top: clamp(40px,5.6vw,100px); }
}
@media (min-width: 1001px) {
  .offres .offre-card .txt, .offres .offre-card:hover .txt, .offres .offre-card.on .txt { top: 50%; transform: translateY(-50%); align-content: center; }
}

/* accessibilité : offres au clavier (focus) + texte visible sur écrans tactiles */
.offre-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.offre-card:focus-visible .recto { opacity: 0; }
.offre-card:focus-visible .txt { opacity: 1; pointer-events: auto; }
@media (min-width: 1001px) { .offres .offre-card:focus-visible .txt { top: 50%; transform: translateY(-50%); } }
@media (hover: none) {
  .offres .offre-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; min-height: 0; padding: 10px 14px 18px; }
  .offres .offre-card .recto, .offres .offre-card:hover .recto { opacity: 1; align-items: center; }
  .offres .offre-card .txt, .offres .offre-card:hover .txt { position: static; transform: none; opacity: 1; pointer-events: auto; max-height: none; align-content: start; text-align: left; }
  .offres .offre-card:focus-visible .recto { opacity: 1; }
}
.form-legal a { display: inline-block; padding: 10px 0; }
.no-loader .loader { display: none; }

/* plan : rues sobres + quadrillage + ondes concentriques */
.contact-mini-map .map-svg g[filter] { filter: none; }
.contact-mini-map .map-svg g[fill="#fff"] path { fill: #fff; }
.contact-mini-map .map-svg [fill="#0f4560"] { fill: #fff; fill-opacity: .05; }
.contact-mini-map .map-svg [fill="#1f7a6c"], .contact-mini-map .map-svg [fill="#3fd1b4"] { fill: #fff; fill-opacity: .07; }
.contact-mini-map .map-svg [stroke="#3fd1b4"], .contact-mini-map .map-svg [stroke="#7fd4ff"] { stroke: #fff; stroke-opacity: .18; }
.contact-mini-map .map-svg [stroke="#e6f6ff"], .contact-mini-map .map-svg [stroke="#cfeeff"] { stroke: #fff; stroke-opacity: .5; }
.contact-mini-map .map-svg text[fill="#7fd4ff"] { fill: #cfeeff; }
.map-tint { display: none; }
.map-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .6; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; }
.map-rings { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.map-rings i { position: absolute; left: 0; top: 0; border: 1.5px solid var(--pink); border-radius: 50%; transform: translate(-50%,-50%); }
.map-rings i:nth-child(1) { width: 90px; height: 90px; opacity: .9; }
.map-rings i:nth-child(2) { width: 190px; height: 190px; opacity: .55; }
.map-rings i:nth-child(3) { width: 300px; height: 300px; opacity: .3; }
.map-rings i:nth-child(4) { width: 420px; height: 420px; opacity: .16; }
.map-epi i { display: none; }
.map-epi b { box-shadow: 0 0 0 4px rgba(255,0,70,.25); }

/* pin du plan : logo seul */
.map-label { padding: 11px 16px 10px; }
.map-label img { margin: 0 auto; }

/* réalisations (home, liste, pages projet) : fond gris clair */
.realisations, .cs-body, .cs-pager { background: #e8e8e8; }
body.page-light { background: #e8e8e8; }

/* page Agence : fond gris clair, comme les réalisations */
.team { background: #e8e8e8; }

/* ===== bandeau de consentement cookies ===== */
.cookie-banner { position: fixed; z-index: 900; left: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 22px 20px; background: var(--navy); color: #fff; border-top: 3px solid var(--pink); box-shadow: 0 18px 50px rgba(0,0,0,.35); opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.cookie-banner.show { opacity: 1; transform: none; }
.cookie-title { margin: 0 0 8px; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: var(--title-tracking); font-size: 18px; color: var(--pink); }
.cookie-txt { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.88); }
.cookie-txt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; margin-top: 18px; }
.cookie-btn { flex: 1 1 0; padding: 13px 16px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; color: #fff; background: transparent; border: 1px solid #fff; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.cookie-btn.no:hover { background: #fff; color: var(--navy); }
.cookie-btn.yes { background: var(--pink); border-color: var(--pink); }
.cookie-btn.yes:hover { background: #fff; border-color: #fff; color: var(--pink); }
.cookie-btn:focus-visible, .footer-cookie:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity .2s ease; transform: none; } }

/* pied de page : liens légaux */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.footer-cookie { font: inherit; font-size: 14px; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.footer-cookie::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .4s ease; }
.footer-cookie:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 820px) { .footer-cookie { padding: 12px 0; } .footer-links { gap: 0 22px; } }

/* offres : textes plus longs, on resserre un peu entre 1001 et 1180px pour qu'ils tiennent entre le titre et le bouton */
@media (min-width: 1001px) and (max-width: 1180px) { .offres .offre-card .txt .solo { font-size: 12.5px; line-height: 1.42; } }

/* home, méthode : phrase d'intro entièrement en rouge, sans gras */
.methode-text { color: var(--pink); font-weight: 400; }

/* « œ » : la police des titres n'a pas ce glyphe, on le compose avec o + e resserrés (même police, même graisse) */
.methode h1, .methode h2 { --oe-fs: clamp(26px,4.4vw,52px); }
.oe { font-size: 0; }
.oe::before { content: attr(data-oe); font-size: var(--oe-fs, 1rem); letter-spacing: -.14em; margin-right: .06em; }

/* méthode : bouton sous la partie « approche » */
.methode-cta { text-align: center; padding: clamp(40px,5vw,72px) 0 clamp(56px,7vw,100px); background: #fff; }

/* photo de groupe (home) : marges latérales sur tablette et mobile */
@media (max-width: 1000px) { .agence-photo .container { padding-left: clamp(20px,5vw,40px); padding-right: clamp(20px,5vw,40px); box-sizing: border-box; } }
/* mobile : on recadre sur le groupe (moitié gauche de la photo) pour que les personnes restent lisibles */
@media (max-width: 560px) {
  .agence-intro.agence-photo { background: linear-gradient(to bottom, rgba(227,223,222,0) calc(81.4vw - 70px), #e3dfde 81.4vw), url("assets/images/home-agence.webp") no-repeat left top / 200% auto, #e3dfde; padding: calc(81.4vw + 4px) 0 48px; }
}

/* ===== bandeau cookies v2 : panneau « Personnaliser » ===== */
.cookie-banner { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.cookie-more { margin: 14px 0 0; text-align: center; }
.cookie-link { font: inherit; font-size: 14px; color: #fff; background: none; border: 0; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cookie-link:hover { color: var(--pink); }
.cookie-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cookie-opts { display: grid; gap: 16px; }
.cookie-opt { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.18); }
.cookie-opt:last-child { border-bottom: 0; padding-bottom: 0; }
.cookie-opt p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.8); }
.cookie-opt-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cookie-opt-name { font-weight: 600; font-size: 15px; color: #fff; }
.cookie-always { font-size: 12.5px; color: rgba(255,255,255,.65); white-space: nowrap; }
.cookie-switch { position: relative; flex: none; width: 46px; height: 26px; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cookie-switch i { position: absolute; inset: 0; border: 1px solid #fff; border-radius: 26px; background: transparent; transition: background .25s ease, border-color .25s ease; pointer-events: none; }
.cookie-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s ease; }
.cookie-switch input:checked + i { background: var(--pink); border-color: var(--pink); }
.cookie-switch input:checked + i::after { transform: translateX(20px); }
.cookie-switch input:focus-visible + i { outline: 2px solid #fff; outline-offset: 3px; }
.cookie-banner.is-panel .cookie-actions { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .cookie-switch i, .cookie-switch i::after { transition: none; } }

/* loader : plafonné à 0,8 s même si la page n'est pas encore prête */
.loader-cap .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* Galerie Crédit Agricole : Hyères + Toulon en tête, le magazine en grand, l'affiche urbaine à côté, l'abribus en bandeau */
.cs-aligned.cs-ca .cs-item.ca-hy, .cs-aligned.cs-ca .cs-item.ca-tl { aspect-ratio: 11 / 10; }
.cs-aligned.cs-ca .cs-item.ca-mag { aspect-ratio: 3 / 2; }
.cs-aligned.cs-ca .cs-item.ca-mob { aspect-ratio: auto; }
.cs-aligned.cs-ca .cs-item.ca-abri { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
@media (min-width: 961px) {
  .cs-grid.cs-aligned.cs-ca { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .cs-aligned.cs-ca .cs-item.ca-hy, .cs-aligned.cs-ca .cs-item.ca-tl { grid-column: span 3; }
  .cs-aligned.cs-ca .cs-item.ca-mag { grid-column: 1 / span 4; }
  .cs-aligned.cs-ca .cs-item.ca-mob { grid-column: 5 / span 2; }
}
@media (max-width: 960px) {
  .cs-aligned.cs-ca .cs-item.ca-mag { grid-column: 1 / -1; }
  .cs-aligned.cs-ca .cs-item.ca-mob { grid-column: 1; aspect-ratio: 3 / 4; }
  .cs-aligned.cs-ca .cs-item.ca-abri { grid-column: 2; aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
  .cs-aligned.cs-ca .cs-item.ca-mob, .cs-aligned.cs-ca .cs-item.ca-abri { grid-column: 1; aspect-ratio: 4 / 5; }
}

/* Home : 5 vignettes (une vignette masquée) -> la dernière occupe deux colonnes pour ne pas laisser de vide */
.grid6.grid6-five > .tile:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }

/* Crédits d'un cas (sous les onglets) */
.cs-credits { max-width: 800px; margin: clamp(36px,5vw,64px) auto 0; padding-top: clamp(16px,2vw,24px); border-top: 1px solid rgba(10,31,43,.15); font-size: clamp(13px,1.15vw,15px); line-height: 1.6; color: rgba(10,31,43,.75); }
.cs-credits p { margin: 0 0 .2em; }
.cs-credits .cs-credits-t { margin-bottom: .5em; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(10,31,43,.5); }
.cs-credits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cs-credits a:hover { color: var(--pink); }