/* Primobat + Reflex Pro · un seul site à la charte ZELY (zelystudio.fr), identique pour les deux espaces :
   crème #FFFDF7, encre, bleu ZELY #0882D8, Onest (titres et texte) + Poppins (texte des cartes) + Inter (chiffres),
   boutons capitales à liseré pointillé, cartes pastel, mots clés soulignés d'un trait arrondi (jamais encadrés).
   Structure de la page d'accueil reprise d'obat.fr. Mobile d'abord. */
:root {
  --cream: #FFFDF7; --white: #FFFFFF; --ink: #000; --ink-2: #0A0A0A; --gray: #666; --gray-l: #8B8B8B; --nav: rgba(18, 18, 18, .67);
  --blue: #0882D8; --blue-d: #0667B0; --navy: #08467A; --blue-l: #5AB2F0; --blue-rgb: 8, 130, 216; --orange: #FC8228;
  --b50: rgba(8, 130, 216, .5); --b20: rgba(8, 130, 216, .2); --b12: rgba(8, 130, 216, .12);
  --dash: #A8A8A8; --line: #ECEAE4;
  --pa: rgba(186, 221, 255, .35); --pb: rgba(184, 218, 248, .35); --pc: rgba(255, 210, 186, .35); --pd: rgb(208, 230, 248);
  --pe: linear-gradient(217deg, rgb(190, 218, 244) 42%, rgba(8, 130, 216, .2) 100%);
  --display: 'Onest', system-ui, sans-serif; --text: 'Onest', system-ui, sans-serif; --card: 'Poppins', system-ui, sans-serif; --num: 'Inter', system-ui, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: 20px;
  --sl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M5 11 Q 100 3 195 9' fill='none' stroke='%230882D8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --sl-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M5 11 Q 100 3 195 9' fill='none' stroke='%235AB2F0' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1220px, 100% - var(--pad) * 2); margin: 0 auto; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
svg.i { width: 1em; height: 1em; flex: none; }

/* ---------- typo ZELY ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; }
.h1 { font-size: clamp(36px, 9.4vw, 66px); line-height: 1.1; letter-spacing: -.065em; }
.h2 { font-size: clamp(30px, 7.8vw, 50px); line-height: 1.1; letter-spacing: -.065em; }
.lead { font-size: 17px; line-height: 1.3; letter-spacing: -.02em; color: var(--gray); }
.lead b { color: var(--ink); font-weight: 400; }
.ac { background: linear-gradient(90deg, var(--blue-d), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac-2 { background: linear-gradient(90deg, var(--navy), #2E95DD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lbl { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--display); letter-spacing: -.04em; }
.lbl em { font-style: normal; color: var(--blue); }
.lbl .sep { width: 1px; height: 14px; background: rgba(0, 0, 0, .25); }
.lbl .mk { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 11px var(--num); }
/* souligné arrondi (qui se dessine) */
.sl { padding-bottom: .1em; background: var(--sl) no-repeat 0 100% / 100% .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .sl { background-size: 0% .3em; }
.js .hero .sl, .js .in .sl, .js .in.sl { animation: trait .9s var(--ease) .3s forwards; }
.js .hero .sl { animation-delay: .7s; } .js .hero .sl + .sl, .js .hero .sl ~ .sl { animation-delay: 1s; }
@keyframes trait { to { background-size: 100% .3em; } }
.sur-sombre .sl { background-image: var(--sl-l); }

/* ---------- boutons ZELY (capitales, liseré pointillé) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 10px; font: 600 15px var(--display); letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 .7px .7px -.3px rgba(16, 49, 77, .05), 0 3.6px 3.6px -.9px rgba(16, 49, 77, .06), 0 8px 18px -1.2px rgba(16, 49, 77, .08); transition: transform .4s var(--spring); }
.btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed var(--dash); pointer-events: none; }
.btn:hover { transform: translateY(-1px); }
.btn .i { width: 13px; height: 13px; transition: transform .4s var(--spring); }
.btn:hover .i { transform: rotate(45deg) scale(1.1); }
.btn-dark { background: #000; color: #fff; }
.btn-light { background: #fff; color: #000; }
.btn-blue { background: linear-gradient(269deg, var(--blue) -136%, #000 100%); color: #fff; }
.btn-ac { background: var(--blue); color: #fff; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- logos ---------- */
.logo { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 9px; border-radius: 10px; background: #0B0B0B; flex: none; }
.logo img { width: 78px; height: auto; }
.logo-rx { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font: 700 21px var(--display); letter-spacing: -.06em; white-space: nowrap; }
.logo-rx span { color: var(--blue); }

/* ---------- navigation flottante ZELY ---------- */
.nav { position: fixed; z-index: 50; top: 10px; left: 50%; transform: translateX(-50%); width: min(980px, calc(100% - 20px)); height: 62px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; background: rgba(255, 255, 255, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; box-shadow: 0 1px 37px rgba(0, 0, 0, .1); }
.nav-links { display: none; }
.nav .sp { margin-left: auto; }
.nav-cta, .nav-out { display: none; }
.nav-call { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 18px rgba(var(--blue-rgb), .45); flex: none; }
.nav-call svg { width: 18px; height: 18px; }
.nav-burger { width: 44px; height: 44px; border-radius: 10px; background: #000; color: #fff; display: grid; place-items: center; flex: none; }
.nav-burger svg { width: 18px; height: 18px; }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--cream); padding: 84px var(--pad) 24px; display: none; flex-direction: column; overflow-y: auto; }
.menu.open { display: flex; }
.menu .x { position: absolute; top: 19px; right: 18px; width: 44px; height: 44px; border-radius: 10px; background: #000; color: #fff; font-size: 24px; }
.menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 62px; border-bottom: 1px dashed #CFCFCF; font: 600 24px var(--display); letter-spacing: -.06em; }
.menu nav a.rx-link { color: var(--blue); }
.menu .foot { margin-top: 26px; display: grid; gap: 10px; }
.lock { width: 14px; height: 14px; }

/* ---------- héros (dessin de Jimmy + obat : texte à gauche, film à droite, artisans en bas) ---------- */
.hero { position: relative; padding: 104px 0 0; overflow: hidden; }
.bands { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #D6EBFA 0%, #E6F2FB 45%, #F5F9FC 80%, var(--cream) 100%); }
.bands i { position: absolute; top: -10%; bottom: -10%; width: 14%; filter: blur(16px); animation: bande 14s ease-in-out infinite alternate; }
.bands i:nth-child(odd) { background: linear-gradient(90deg, transparent, #fff 50%, transparent); }
.bands i:nth-child(even) { background: linear-gradient(90deg, transparent, rgba(8, 130, 216, .22) 50%, transparent); }
.bands i:nth-child(1) { left: -4%; animation-duration: 13s; } .bands i:nth-child(2) { left: 9%; width: 9%; animation-duration: 17s; animation-delay: -4s; } .bands i:nth-child(3) { left: 20%; animation-duration: 15s; animation-delay: -7s; } .bands i:nth-child(4) { left: 36%; width: 11%; animation-duration: 19s; animation-delay: -2s; } .bands i:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: -9s; } .bands i:nth-child(6) { left: 64%; width: 10%; animation-duration: 18s; animation-delay: -5s; } .bands i:nth-child(7) { left: 76%; animation-duration: 14s; animation-delay: -11s; }
.bands::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(255, 253, 247, .85)); }
@keyframes bande { from { transform: translateX(-40px) scaleX(.9); opacity: .75; } to { transform: translateX(40px) scaleX(1.15); opacity: 1; } }
.hero-in { position: relative; z-index: 2; }
.hero-g { display: grid; gap: 30px; }
.astreinte { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); font: 600 13.5px var(--display); letter-spacing: -.02em; }
.astreinte i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #1FB55B; }
.astreinte i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(31, 181, 91, .45); animation: pouls 1.8s ease-out infinite; }
@keyframes pouls { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.hero .h1 { margin-top: 16px; }
.hero .h1 .ln { display: block; }
.hero .sous { margin-top: 10px; font: 600 clamp(22px, 5.6vw, 32px)/1.2 var(--display); letter-spacing: -.05em; }
.checks { display: grid; gap: 8px; margin-top: 20px; }
.checks li { display: flex; gap: 10px; font: 400 16px var(--card); color: rgba(0, 0, 0, .75); }
.checks li svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 3px; }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.note-g { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--gray); }
.note-g b { color: var(--ink); font: 700 15px var(--num); }
.note-g .st { color: #F5A524; letter-spacing: 1px; }
/* film (carte vidéo, bouton lecture au centre) */
.film { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -20px rgba(12, 30, 70, .35), 0 0 0 1px rgba(0, 0, 0, .05); }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; }
.film .go { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35)); }
.disc { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #111; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .4s var(--spring); }
.disc::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .9); animation: tourne 22s linear infinite; }
.disc svg { width: 24px; height: 24px; margin-left: 3px; }
.go:hover .disc { transform: scale(1.07); }
@keyframes tourne { to { transform: rotate(360deg); } }
.film .duree { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .78); color: #fff; font: 700 13.5px var(--num); }
.film .duree em { font-style: normal; color: #8CC8F5; font-weight: 500; }
.film.lecture .go, .film.lecture .duree { display: none; }
/* les artisans de dos : montent à l'arrivée puis au défilement, chacun à sa vitesse (comme les sites sur zelystudio.fr) */
.crew { position: relative; z-index: 1; height: clamp(150px, 30vw, 340px); margin-top: 26px; pointer-events: none; }
.crew-in { position: absolute; left: 50%; bottom: 0; width: min(1180px, 112vw); transform: translateX(-50%); height: 100%; }
.crew img { position: absolute; bottom: 0; height: auto; will-change: transform; filter: drop-shadow(0 18px 24px rgba(12, 30, 70, .18)); }
.crew::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(255, 253, 247, 0), var(--cream)); z-index: 2; }
.js .crew img { opacity: 0; transform: translateY(70px); }
.crew.pret img { animation: monte 1.2s var(--ease) forwards; }
.crew.pret img:nth-child(2) { animation-delay: .1s; } .crew.pret img:nth-child(3) { animation-delay: .2s; } .crew.pret img:nth-child(4) { animation-delay: .3s; } .crew.pret img:nth-child(5) { animation-delay: .4s; }
@keyframes monte { to { opacity: 1; transform: translateY(var(--dy, 0px)); } }
.crew.suit img { animation: none; opacity: 1; transform: translateY(var(--dy, 0px)); }

/* ---------- bandeau de confiance (obat : carte grise + chiffres) ---------- */
.trust { position: relative; z-index: 3; margin-top: -10px; }
.trust-card { display: grid; gap: 16px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 1px 40px rgba(0, 0, 0, .09); }
.trust-card .slog { display: flex; gap: 12px; align-items: center; }
.trust-card .slog i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--b12); color: var(--blue); font-style: normal; }
.trust-card .slog i svg { width: 20px; height: 20px; }
.trust-card .slog b { display: block; font: 600 16px var(--display); letter-spacing: -.03em; }
.trust-card .slog small { display: block; font-size: 13.5px; color: var(--gray); }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.figs div { padding: 10px 12px; border-radius: 12px; background: var(--cream); }
.figs b { display: block; font: 700 22px/1.1 var(--num); letter-spacing: -.03em; }
.figs span { font-size: 13px; color: var(--gray); }

/* ---------- sections ---------- */
.sec { padding: 72px 0; position: relative; }
.sec-head { text-align: center; max-width: 780px; margin: 0 auto 32px; }
.sec-head .h2 { margin-top: 8px; }
.sec-head .lead { margin-top: 12px; }
.blanc { background: #fff; }
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; }

/* bande bleue à motif (obat : « une équipe… ») = un interlocuteur, 24 corps de métiers */
.motif { padding: 56px 0; background-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M0 60a60 60 0 0 1 60-60M60 120a60 60 0 0 1 60-60M0 0h120v120H0zM60 0v120M0 60h120'/%3E%3Ccircle cx='30' cy='90' r='18'/%3E%3Cpath d='M78 18l24 24M102 18L78 42'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; }
.motif-card { display: grid; gap: 26px; align-items: center; padding: 26px 20px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.motif-card .h2 { font-size: clamp(26px, 6.4vw, 40px); }
.motif-card .lead { margin-top: 12px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.stats span { padding-left: 12px; border-left: 2px solid var(--blue); font: 600 15px var(--display); letter-spacing: -.03em; color: var(--blue); }
.orbit { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbit .ring { position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed var(--b50); animation: tourne 90s linear infinite; }
.orbit .ring2 { position: absolute; inset: 25%; border-radius: 50%; border: 1px solid var(--line); }
.orbit .core { position: absolute; inset: 31%; border-radius: 50%; background: #0B0B0B; display: grid; place-items: center; text-align: center; color: #fff; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .5), 0 0 0 8px var(--b12); }
.orbit .core img { width: 66%; height: auto; margin: 0 auto; }
.orbit .core small { display: block; margin-top: 3px; font: 600 10px var(--display); color: var(--blue-l); letter-spacing: .06em; text-transform: uppercase; }
.dot { --r: 43cqw; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 2px solid var(--b50); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--blue); opacity: .25; }
.in .dot::after { animation: allume 4.8s infinite; animation-delay: calc(var(--k) * .2s); }
@keyframes allume { 0%, 100% { opacity: .25; transform: scale(1); } 6% { opacity: 1; transform: scale(1.25); } 18% { opacity: .25; transform: scale(1); } }
.orbit .vous { position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: #fff; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .25); font: 600 13.5px var(--display); letter-spacing: -.02em; white-space: nowrap; }
.orbit .vous i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-style: normal; }

/* « Nos promesses » (obat) */
.promesses { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; }
.promesse { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 30px rgba(0, 0, 0, .07); }
.promesse i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pa); color: var(--blue); font-style: normal; }
.promesse i svg { width: 22px; height: 22px; }
.promesse b { display: block; font: 600 18px var(--display); letter-spacing: -.04em; }
.promesse p { font: 400 15px var(--card); color: rgba(0, 0, 0, .65); margin-top: 2px; }

/* cartes de services (obat : 2 + 1 large, ZELY : pastel) */
.svc { display: grid; gap: 12px; }
.cd { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 40px rgba(0, 0, 0, .09); transition: transform .4s var(--spring), box-shadow .4s var(--ease); }
.cd::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(33, 33, 33, .05); pointer-events: none; }
.cd:hover { transform: scale(1.02) rotate(-.6deg); box-shadow: 0 10px 50px rgba(var(--blue-rgb), .22); z-index: 2; }
.cd.a { background: var(--pa); } .cd.b { background: var(--pb); } .cd.c { background: var(--pc); } .cd.d { background: var(--pd); } .cd.e { background: var(--pe); }
.cd .ph { position: relative; height: 200px; overflow: hidden; margin: 12px 12px 0; border-radius: 12px; }
.cd .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cd:hover .ph img { transform: scale(1.05); }
.cd .vis { position: relative; min-height: 190px; display: grid; place-items: center; padding: 16px 14px 4px; }
.bd { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cd h3 { display: flex; align-items: center; gap: 8px; font-size: 23px; line-height: 1.05; letter-spacing: -.05em; }
.cd h3 .ic { width: 26px; height: 26px; color: var(--blue); flex: none; }
.cd h3 .ar { width: 12px; height: 12px; transition: transform .4s var(--spring); }
.cd:hover h3 .ar { transform: rotate(45deg) scale(1.1); }
.cd p { font: 400 16px/1.25 var(--card); color: rgba(0, 0, 0, .7); }
.cd p b { color: #000; font-weight: 600; }
.cd .legal { font-size: 11.5px; line-height: 1.4; color: rgba(0, 0, 0, .5); }
.cd .btn { align-self: flex-start; margin-top: auto; min-height: 44px; font-size: 13.5px; }
.badge-opt { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #1FB55B; color: #fff; font: 700 11px var(--display); letter-spacing: .04em; text-transform: uppercase; }

/* mini-interfaces (ZELY) */
.ui { position: relative; width: 100%; max-width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(6, 34, 60, .18); padding: 12px; font: 400 12.5px var(--card); text-align: left; }
.ui .t { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 12.5px var(--card); margin-bottom: 10px; }
.ui .t em { font-style: normal; font-weight: 500; color: var(--blue); background: var(--b12); padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.pp { display: flex; flex-wrap: wrap; gap: 6px; }
.pp span { padding: 5px 10px; border-radius: 999px; border: 1px solid #E3E3E3; font-weight: 500; font-size: 12px; background: #fff; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #F0F0F0; }
.row:first-of-type { border-top: 0; }
.ok { color: #1E9E50; font-weight: 600; font-size: 11.5px; background: rgba(43, 212, 109, .14); padding: 2px 8px; border-radius: 999px; }
.st-s { position: relative; display: inline-grid; font-weight: 600; font-size: 11px; }
.st-s span { grid-area: 1 / 1; padding: 2px 8px; border-radius: 999px; text-align: center; white-space: nowrap; }
.st-s .w { color: #8A8A8A; background: #F2F2F2; }
.st-s .o { color: #1E9E50; background: rgba(43, 212, 109, .14); opacity: 0; }
.semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.semaine span { display: grid; place-items: center; height: 30px; border-radius: 8px; background: #F2F2F2; font: 700 11px var(--num); color: #888; }
.in .semaine span { animation: jour 7s infinite; animation-delay: calc(var(--k) * .18s); }
@keyframes jour { 0%, 4% { background: #F2F2F2; color: #888; } 8%, 88% { background: var(--blue); color: #fff; } 96%, 100% { background: #F2F2F2; color: #888; } }

/* méthode (cartes à grands chiffres ZELY) */
.steps { display: grid; gap: 12px; }
.stp { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 20px; min-height: 200px; background: linear-gradient(180deg, rgba(212, 233, 250, .55), rgba(230, 242, 251, .65)); box-shadow: 0 0 0 1px rgba(8, 70, 122, .06); }
.stp .n { font: 700 80px/1 var(--num); letter-spacing: -.06em; background: linear-gradient(180deg, var(--navy), #3C9AD8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stp .n span { -webkit-text-fill-color: var(--blue); }
.stp h3 { font-size: 23px; letter-spacing: -.05em; margin-top: 8px; }
.stp p { font: 400 15px var(--card); color: rgba(0, 0, 0, .65); margin-top: 4px; max-width: 30ch; }
.stp .ui { position: absolute; right: 14px; top: 16px; width: 160px; transform: rotate(2deg); font-size: 11px; padding: 10px; }
.stp .ui .t { font-size: 11px; margin-bottom: 6px; }
.stp.in { animation: etape 8s infinite; } .stp.in:nth-child(2) { animation-delay: 2s; } .stp.in:nth-child(3) { animation-delay: 4s; } .stp.in:nth-child(4) { animation-delay: 6s; }
@keyframes etape { 0%, 30%, 100% { box-shadow: 0 0 0 1px rgba(8, 70, 122, .06); } 4%, 24% { box-shadow: 0 0 0 2px var(--b50), 0 20px 46px -22px rgba(var(--blue-rgb), .7); } }
.stp.in .ui { animation: flotte 5s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-6px); } }
.plan-b { display: grid; gap: 5px; }
.plan-b i { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--blue-d), var(--blue)); width: 0; }
.plan-b i:nth-child(2) { margin-left: 22%; } .plan-b i:nth-child(3) { margin-left: 44%; }
.stp.in .plan-b i { animation: barre 8s infinite; } .stp.in .plan-b i:nth-child(2) { animation-delay: .4s; } .stp.in .plan-b i:nth-child(3) { animation-delay: .8s; }
@keyframes barre { 0%, 48% { width: 0; } 58%, 92% { width: 52%; } 100% { width: 0; } }

/* bloc sombre ZELY (réalisations) */
.dark { margin: 0 10px; border-radius: 28px; background: radial-gradient(120% 80% at 50% 0%, #0A2E4D 0%, #04101A 55%, #000 100%); color: #fff; padding: 56px 0 40px; overflow: hidden; }
.dark .lbl { color: rgba(255, 255, 255, .85); }
.dark .lead { color: rgba(255, 255, 255, .7); }
.dark .lead b { color: #fff; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaic figure { position: relative; border-radius: 16px; overflow: hidden; background: #111; }
.mosaic figure.w { grid-column: 1 / -1; }
.mosaic button { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.mosaic img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease); }
.mosaic figure.w img { aspect-ratio: 16 / 9; }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #000; font: 600 12.5px var(--display); letter-spacing: -.02em; pointer-events: none; }

/* appel à l'action (obat : « Prêt à … ? ») */
.band-cta { text-align: center; padding: 34px 20px; border-radius: 24px; background: linear-gradient(180deg, #D6EBFA, #F2F8FD); box-shadow: 0 0 0 1px rgba(8, 70, 122, .06); }
.band-cta .lead { margin: 10px auto 20px; max-width: 520px; }
.band-cta .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* avis */
.avis { max-width: 820px; margin: 0 auto; text-align: center; }
.avis .card { position: relative; padding: 28px 22px; border-radius: 16px; background: #fff; box-shadow: 0 1px 40px rgba(0, 0, 0, .09); }
.avis .stars { color: #F5A524; letter-spacing: 3px; font-size: 18px; }
.avis blockquote { margin-top: 12px; font: 500 clamp(22px, 5.4vw, 30px)/1.25 var(--display); letter-spacing: -.04em; }
.avis cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--gray); }
.avis .sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 22px; }
.avis .sum b { font: 700 46px/1 var(--num); letter-spacing: -.05em; }
.avis .sum b small { font-size: .4em; color: var(--gray-l); }

/* FAQ ZELY */
.faq-g { display: grid; gap: 24px; }
.faq-l { display: flex; flex-direction: column; gap: 10px; }
.faq details { position: relative; border-radius: 12px; background: rgba(255, 255, 255, .6); }
.faq details::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--b20); pointer-events: none; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 18px; cursor: pointer; font: 600 17px/1.3 var(--display); letter-spacing: -.05em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 24px; height: 24px; flex: none; transition: transform .4s var(--spring); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 18px 18px; font: 400 16px/1.38 var(--card); color: rgba(0, 0, 0, .7); }

/* bloc final sombre ZELY + formulaire */
.cta { margin: 0 10px; border-radius: 28px; background: linear-gradient(120deg, #000 0%, #04101A 45%, #08467A 100%); color: #fff; padding: 36px 18px 18px; }
.cta-g { display: grid; gap: 28px; }
.cta .h2 { font-weight: 400; } .cta .h2 b { font-weight: 600; }
.cta .l { margin-top: 14px; font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, .8); }
.cta ol { display: grid; gap: 10px; margin-top: 18px; }
.cta ol li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.cta ol li b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font: 700 12px var(--num); flex: none; }
.cta .tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-weight: 600; color: #8CC8F5; }
.form { background: #fff; color: #000; border-radius: 18px; padding: 18px; }
.form .top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #EEE; font-size: 12.5px; color: var(--gray); }
.form .top i { width: 8px; height: 8px; border-radius: 50%; background: #1FB55B; }
.prog { display: flex; gap: 6px; margin-bottom: 16px; }
.prog i { flex: 1; height: 4px; border-radius: 999px; background: #EEE; }
.prog i.on { background: var(--blue); }
.qstep { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.qstep.on { display: block; }
.qstep legend { font: 600 20px var(--display); letter-spacing: -.05em; margin-bottom: 12px; padding: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles label { position: relative; display: block; cursor: pointer; }
.tiles input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tiles span { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 84px; padding: 12px; border-radius: 12px; border: 1.5px solid #E6E6E6; font: 600 15px var(--display); letter-spacing: -.03em; transition: border-color .2s, background-color .2s; }
.tiles span small { font: 400 12.5px var(--card); color: var(--gray); }
.tiles input:checked + span { border-color: var(--blue); background: var(--b12); }
.tiles input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.fl { display: block; margin-bottom: 12px; }
.fl > span { display: block; font-size: 13px; font-weight: 500; color: var(--gray); margin-bottom: 6px; }
.fl input, .fl textarea, .fl select { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #E6E6E6; background: #FCFCFB; font: 16px var(--card); color: #000; }
.fl textarea { min-height: 88px; resize: vertical; }
.fl input:focus, .fl textarea:focus, .fl select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--b12); }
[aria-invalid=true] { border-color: #D93025 !important; }
.qnav { display: flex; gap: 8px; margin-top: 14px; }
.qnav .btn { flex: 1; }
.qnav .back { flex: 0 0 auto; padding: 0 18px; }
.note { font-size: 12.5px; color: var(--gray-l); margin-top: 10px; }
.note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 600; }
.done { display: none; text-align: center; padding: 26px 8px; }
.done.on { display: block; }
.done b { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; background: #1E9E50; color: #fff; font-size: 24px; }
.done p:first-of-type { font: 600 21px var(--display); letter-spacing: -.05em; margin-bottom: 4px; }
.done p { color: var(--gray); }

/* pied de page ZELY */
.foot-w { background: linear-gradient(180deg, var(--cream) 0%, rgba(8, 130, 216, .35) 100%); padding-top: 50px; margin-top: 60px; }
footer { position: relative; background: var(--ink-2); color: #fff; border-radius: 36px 36px 0 0; padding: 44px var(--pad) 110px; overflow: hidden; }
.f-top { display: grid; gap: 28px; }
.f-brand img { width: 140px; height: auto; }
.f-brand p { margin-top: 12px; max-width: 440px; font-size: 15px; color: rgba(255, 255, 255, .6); }
.f-brand .ct { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.f-brand .ct a { display: inline-flex; align-items: center; min-height: 44px; }
.f-brand hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .2); margin: 20px 0; }
.f-nav { display: flex; flex-wrap: wrap; gap: 40px; }
.f-nav h3 { font: 500 22px var(--display); letter-spacing: -.05em; margin-bottom: 4px; }
.f-nav a { display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; font-size: 14px; color: rgba(255, 255, 255, .65); }
.f-nav a:hover { color: #fff; }
.f-nav a.rx-link { color: #8CC8F5; }
.f-copy { margin-top: 22px; font-size: 13px; color: #999; }
.f-copy a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: #fff; font-weight: 600; }
.wm { position: relative; margin-top: 30px; font: 600 clamp(64px, 21vw, 240px)/.8 var(--display); letter-spacing: -.07em; color: #F3EEDF; text-align: center; white-space: nowrap; user-select: none; }
.wm span { color: var(--blue); }

/* barre mobile */
.mbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, .15); transform: translateY(150%); transition: transform .35s var(--ease); }
.mbar.show { transform: none; }

/* visionneuse */
.lb { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 20px; background: rgba(5, 5, 5, .92); }
.lb.on { display: grid; }
.lb img { max-width: min(1200px, 100%); max-height: 84vh; border-radius: 12px; }
.lb button { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 12px; background: #fff; font-size: 24px; }

/* écran du code Reflex Pro */
.acces { min-height: 100svh; padding-bottom: 60px; text-align: center; }
.acces .h1 .ln { display: block; }
.acces .lead { max-width: 560px; margin: 16px auto 0; }
.code-box { max-width: 440px; margin: 26px auto 0; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .25); text-align: left; }
.code-f .btn { width: 100%; }
.code-f input { font: 600 18px var(--num); letter-spacing: .12em; text-transform: uppercase; }
.msg { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
.msg.ko { background: #FDECEA; color: #A42A1A; }
.msg.info { background: #F2F2F2; color: #000; }
.retour { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font: 600 14.5px var(--display); border-bottom: 1px solid currentColor; }

/* =================== tablette =================== */
@media (min-width: 768px) {
  :root { --pad: 32px; }
  .figs { grid-template-columns: repeat(4, 1fr); }
  .trust-card { grid-template-columns: 1fr; padding: 22px; }
  .promesses { grid-template-columns: repeat(3, 1fr); }
  .svc { grid-template-columns: 1fr 1fr; }
  .cd.wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .cd.wide .ph, .cd.wide .vis { width: 50%; flex: none; height: auto; min-height: 260px; margin: 12px 0 12px 12px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(12, 1fr); gap: 14px; }
  .mosaic figure { grid-column: span 4; } .mosaic figure.w { grid-column: span 7; } .mosaic figure.w2 { grid-column: span 5; }
  .mosaic img, .mosaic figure.w img { aspect-ratio: auto; height: 300px; }
  .dark, .cta { margin: 0 24px; }
  .cta { padding: 48px 40px 40px; }
  .motif-card { grid-template-columns: .9fr 1.1fr; padding: 36px; }
  .band-cta { padding: 48px 32px; }
  .f-top { grid-template-columns: 1fr auto; }
  footer { padding: 60px 60px 0; }
  .mbar { display: none; }
}
/* =================== ordinateur =================== */
@media (min-width: 1100px) {
  .nav { top: 12px; height: 65px; gap: 18px; padding: 12px 10px 12px 12px; }
  .nav-links { display: flex; align-items: center; gap: 2px; margin-right: auto; margin-left: 6px; }
  .nav-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 0 0 11px; font-size: 14px; text-transform: uppercase; color: var(--nav); transition: color .2s; }
  .nav-links a:hover { color: #000; }
  .nav-links a.rx-link { color: var(--blue); }
  .nav .sp { display: none; }
  .nav-cta, .nav-out { display: inline-flex; min-height: 44px; }
  .nav-burger { display: none; }
  .hero { padding: 140px 0 0; }
  .hero-g { grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
  .lead { font-size: 21px; line-height: 1.2; }
  .sec { padding: 100px 0; }
  .trust-card { grid-template-columns: 1.2fr 2fr; align-items: center; gap: 24px; }
  .svc { grid-template-columns: 1fr 1fr; max-width: 1180px; margin: 0 auto; }
  .steps { max-width: 1080px; margin: 0 auto; }
  .stp { min-height: 230px; padding: 28px; }
  .stp .n { font-size: 110px; }
  .stp .ui { width: 220px; right: 22px; top: 22px; font-size: 12px; }
  .dark { margin: 0 30px; padding: 90px 0 60px; }
  .mosaic img, .mosaic figure.w img { height: 380px; }
  .faq-g { grid-template-columns: 1fr 660px; gap: 40px; align-items: start; }
  .cta { max-width: 1100px; margin: 0 auto; padding: 50px 46px 46px; }
  .cta-g { grid-template-columns: 1fr 470px; gap: 44px; align-items: center; }
  footer { padding: 70px 140px 0; }
}
@media (max-width: 767px) {
  .mosaic figure:nth-child(6) { grid-column: 1 / -1; } .mosaic figure:nth-child(6) img { aspect-ratio: 16 / 9; }
  .crew-in { width: 128vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .crew img { opacity: 1; transform: none; }
  .js .sl { background-size: 100% .3em; }
  .st-s .o { opacity: 1; } .st-s .w { opacity: 0; } .plan-b i { width: 52%; }
}

/* ---------- blocs ZELY réutilisés (espace Reflex Pro) ---------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); font: 500 13.5px var(--display); letter-spacing: -.02em; }
.badge b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--blue); color: #fff; font: 700 12px var(--num); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .1); font: 500 14px var(--display); letter-spacing: -.03em; }
.chip b { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 12.5px var(--num); background: var(--blue); color: #fff; }
.chip b.ok { background: #1E9E50; }
.svc-g { display: grid; gap: 30px; }
.intro .h2 { margin-top: 8px; }
.intro .lead { margin-top: 12px; color: #000; }
.intro .btn { margin-top: 22px; }
.quote { max-width: 320px; margin-top: 22px; }
.quote p { font: 400 18px/1.25 var(--display); letter-spacing: -.03em; color: #3A3A3A; }
.who { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff; font: 600 14px var(--display); flex: none; }
.who strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.04em; }
.who small { display: block; font-size: 13px; color: #333; }
.group { position: relative; border-radius: 23px; padding: 12px; margin-top: 34px; }
.group::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px dashed var(--b50); pointer-events: none; }
.group.g2::before { border-color: rgba(8, 70, 122, .45); }
.gtag { position: absolute; top: -24px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 7px; background: #fff; border-radius: 10px; transform: rotate(-2deg); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font: 400 21px var(--display); letter-spacing: -.06em; }
.gtag .mk { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--blue); color: #fff; font: 800 11px var(--num); }
.g2 .gtag .mk { background: var(--navy); }
.cards { display: grid; gap: 10px; }
@media (min-width: 768px) { .cards { grid-template-columns: 1fr 1fr; } .cards .cd.wide { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .svc-g { grid-template-columns: 1fr 620px; gap: 50px; } .intro { position: sticky; top: 110px; align-self: start; } .group { padding: 15px; margin-top: 60px; } .group:first-child { margin-top: 34px; } .gtag { top: -29px; left: 27px; } }

/* ---------- mots qui défilent (dessins de Jimmy : « ↳ ») ---------- */
.fleche { display: inline-block; width: .62em; height: .62em; margin-right: .12em; color: var(--blue); vertical-align: .02em; }
.rot { display: inline-grid; vertical-align: bottom; text-align: left; }
.rot > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s var(--ease), opacity .45s var(--ease); }
.js .rot > span { opacity: 0; transform: translateY(45%); }
.js .rot > span.on { opacity: 1; transform: none; }
.js .rot > span.out { opacity: 0; transform: translateY(-45%); }
.rot .sl { background-size: 100% .3em; animation: none !important; }
.hero .sous2 { margin-top: 12px; font: 400 clamp(18px, 4.6vw, 22px)/1.3 var(--display); letter-spacing: -.03em; color: var(--gray); }
.hero .sous2 b { color: var(--ink); font-weight: 600; }

/* ---------- les « 4 petits trucs » autour de la vidéo (comme le film sur zelystudio.fr) ---------- */
.film-w { position: relative; }
.film-w::before { content: ''; position: absolute; inset: -10px; border-radius: 26px; border: 2px dashed var(--b50); pointer-events: none; }
.fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .12); font: 500 14px var(--display); letter-spacing: -.03em; white-space: nowrap; }
.fchip b { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 12.5px var(--num); background: var(--blue); color: #fff; }
.fchip b.ok { background: #1E9E50; } .fchip b.nr { background: #000; }
@media (min-width: 1100px) {
  .fchips { margin: 0; }
  .film-w .fchip { position: absolute; z-index: 3; animation: flotte-c 5s ease-in-out infinite; }
  .film-w .fchip:nth-child(1) { left: -46px; top: 38%; }
  .film-w .fchip:nth-child(2) { right: -34px; top: 9%; animation-delay: -1.6s; }
  .film-w .fchip:nth-child(3) { right: -52px; bottom: 16%; animation-delay: -3.2s; }
  @keyframes flotte-c { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}
.film .duree { font-variant-numeric: tabular-nums; }
.js .rot { transition: width .5s var(--ease); }
.h1 .rot-l { display: block; margin-top: 6px; font-size: clamp(28px, 7vw, 46px); letter-spacing: -.06em; }
/* effet de défilement des artisans, réglé comme les sites du haut de page zelystudio.fr */
.crew { height: clamp(170px, 34vw, 430px); }
.crew-in { width: min(1300px, 120vw); }
.crew img { transform-origin: 50% 100%; }
.js .crew img { opacity: 0; transform: translateY(160px); }
.crew.pret img { animation: monte 1.4s cubic-bezier(.16, 1, .3, 1) forwards; }
.crew.pret img:nth-child(2) { animation-delay: .12s; } .crew.pret img:nth-child(3) { animation-delay: .24s; } .crew.pret img:nth-child(4) { animation-delay: .36s; } .crew.pret img:nth-child(5) { animation-delay: .48s; }
@keyframes monte { from { opacity: 0; transform: translateY(160px); } to { opacity: 1; transform: none; } }
.crew.suit img { animation: none; opacity: 1; transform: translateY(var(--dy, 0px)) rotate(var(--rz, 0deg)) scale(var(--sc, 1)); }
.hero-in { will-change: transform, opacity; }

/* artisans coupés net par le bas du héros, comme les captures de sites ZELY : on n'en voit que le haut, ils montent et se découvrent au défilement */
.crew { --cw: min(1300px, 120vw); --vu: .5; height: auto; overflow: visible; margin-top: 30px; }
.crew::after { display: none; }
.crew-win { position: relative; height: calc(var(--cw) * .249 * var(--vu)); }
.crew-in { position: absolute; left: 50%; top: 0; bottom: auto; width: var(--cw); height: calc(var(--cw) * .249); transform: translateX(-50%); }
.crew img { filter: drop-shadow(0 14px 22px rgba(12, 30, 70, .16)); }
.js .crew img { opacity: 0; transform: translateY(70%); }
@keyframes monte { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .crew { --cw: 150vw; --vu: .56; margin-top: 22px; } }
.trust { margin-top: 0; }
.trust .trust-card { margin-top: 26px; }
/* titre du héros sur une seule ligne : « Un projet d’entretien ? » (taille réglée sur la largeur de la colonne) */
.hero-g > * { min-width: 0; }
.hero-g > :first-child { container-type: inline-size; }
.h1.une-ligne { white-space: nowrap; font-size: min(64px, 8.6cqi); }
.js .crew.suit img { animation: none; opacity: 1; transform: translateY(var(--dy, 0px)) rotate(var(--rz, 0deg)); }
/* 11/10 : réserve au-dessus des artisans = leur course au défilement (ils ne touchent jamais le texte ni le film) */
.crew { --monte: calc(var(--cw) * .249 * (1 - var(--vu)) * .82); margin-top: calc(var(--monte) + 12px); }
/* coupe adoucie : fondu vers le crème sur le bas du héros (corps + bandes lumineuses), plus de ligne nette */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; height: clamp(56px, 7.5vw, 110px);
  background: linear-gradient(180deg, rgba(255, 253, 247, 0) 0%, rgba(255, 253, 247, .35) 30%, rgba(255, 253, 247, .78) 62%, rgba(255, 253, 247, .96) 85%, var(--cream) 100%); }
/* mot qui tourne : on ne voit plus l'ancien/le prochain mot déborder sous la ligne */
.hero .rot { clip-path: inset(-.12em -.3em -.22em -.3em); }
@media (max-width: 767px) { .crew { --cw: 165vw; --vu: .64; } .hero::after { height: 34px; } }

/* ===== 11/10 soir : nouveaux logos Primobat + Reflex Pro (fond transparent) ===== */
.logo { gap: 8px; padding: 0 4px; background: none; border-radius: 0; }
.logo img { width: auto; }
.logo .lg-p { height: 36px; }
.logo .lg-m { height: 17px; }
.cta .logo { min-height: 0; } .cta .logo .lg-p { height: 40px; } .cta .logo .lg-m { height: 19px; }
.lbl .mk.mk-p { background: none; width: 22px; height: 22px; } .mk-p img { width: 20px; height: auto; }
.orbit .core img { width: 42%; }
.f-brand .f-sig { width: 250px; height: auto; }
.logo-rx { gap: 8px; }
.logo-rx img { height: auto; }
.logo-rx .rx-main { width: 52px; } .logo-rx .rx-mot { width: 112px; }
.cta .logo-rx .rx-main { width: 60px; } .cta .logo-rx .rx-mot { width: 130px; }
.logo-rx.f-rx { padding: 0; } .logo-rx.f-rx .f-sig { width: 250px; }
.rx-acces { justify-content: center; } .rx-acces img { width: min(280px, 80vw); }
@media (min-width: 768px) { .logo .lg-p { height: 40px; } .logo .lg-m { height: 19px; } }

/* ===== bandeau d'artisans pleine largeur (une image, coupée par le bas du héros, monte au défilement) ===== */
.hero { --cw: 100vw; --ratio: .276; --vu: .46; --leve: .5; }
.crew { --cw: inherit; --vu: inherit; --monte: calc(var(--cw) * var(--ratio) * (1 - var(--vu)) * var(--leve)); margin-top: calc(var(--monte) + 20px); }
.crew-win { height: calc(var(--cw) * var(--ratio) * var(--vu)); }
.crew-in { width: var(--cw); height: calc(var(--cw) * var(--ratio)); }
.crew img.groupe { left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 16px 26px rgba(12, 30, 70, .14)); }
@media (max-width: 767px) { .hero { --cw: 180vw; --vu: .6; } }

/* ===== héros plus grand sur ordinateur : il remplit l'écran, artisans compris ===== */
@media (min-width: 1100px) {
  .hero { padding-top: 130px; }
  .hero-in.hero-g { width: min(1540px, 100% - 170px); grid-template-columns: 1.12fr 1fr; gap: 64px;
    min-height: calc(100svh - 130px - 20px - var(--cw) * var(--ratio) * (var(--vu) + (1 - var(--vu)) * var(--leve))); }
  .h1.une-ligne { font-size: min(92px, 8.6cqi); }
  .hero .h1 { margin-top: 22px; }
  .hero .sous { font-size: clamp(32px, 2.7vw, 46px); margin-top: 14px; }
  .astreinte { min-height: 42px; padding: 0 18px 0 12px; font-size: 15px; }
  .checks { gap: 12px; margin-top: 28px; }
  .checks li { font-size: clamp(17px, 1.3vw, 20px); }
  .checks li svg { width: 20px; height: 20px; }
  .hero .ctas { margin-top: 34px; }
  .hero .ctas .btn { min-height: 58px; padding: 0 30px; font-size: 16px; }
  .note-g { font-size: 15px; } .note-g b { font-size: 17px; }
  .film { border-radius: 22px; }
  .film-w .fchip { font-size: 15px; }
}
/* fondu du bas et hauteur plein écran : seulement le héros Primobat (celui qui a les artisans) */
.hero:not(.hero-crew)::after { content: none; }
@media (min-width: 1100px) { .hero:not(.hero-crew) .hero-in.hero-g { min-height: 0; } }
.hero:not(.hero-crew) .bands::after { height: 55%; background: linear-gradient(180deg, rgba(255, 253, 247, 0), var(--cream)); }
/* 11/10 : retour aux 5 artisans découpés (image d'avant), mêmes règles de coupe, fondu et réserve */
.hero { --cw: min(1300px, 120vw); --ratio: .249; --vu: .5; --leve: .82; }
@media (max-width: 767px) { .hero { --cw: 165vw; --vu: .64; } }
/* logo géant du pied de page (au lieu du mot écrit) */
.wm.wm-logo { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 34px); margin: 36px 0 0; padding-bottom: clamp(30px, 4vw, 60px); font-size: 0; line-height: 0; }
.wm-logo img { width: auto; display: block; }
.wm-logo .wp { height: clamp(44px, 10.5vw, 150px); }
.wm-logo .wt { height: clamp(34px, 8.2vw, 116px); }
.wm-rx .wp { height: clamp(40px, 9.5vw, 136px); }
.wm-rx .wt { height: clamp(38px, 9vw, 128px); }
/* touche orange du logo : astreinte / urgence */
.fchip b.nr { background: var(--orange); }

/* ===== 12/10 : pages services (construction de villa, piscines, rénovation et dépannage) ===== */
.phero { padding-bottom: 54px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 13.5px var(--display); color: var(--gray); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gray); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, .2); }
.fil a:hover { color: var(--ink); }
.fil [aria-current] { color: var(--ink); }
.phero .h1 { font-size: clamp(36px, 8.6vw, 72px); }
.phero .ctas { flex-wrap: wrap; }
.ph-photo { aspect-ratio: 4 / 3; background: #E9EEF3; }
.ph-photo picture, .ph-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-ui { position: absolute; left: 14px; bottom: 14px; width: min(250px, 70%); }
.duo { display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; }
.duo .cd .ph { height: 240px; }
.cd-lien { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.cd-lien::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.cd .btn { position: relative; z-index: 2; }
.nav-links a[aria-current] { color: var(--ink); font-weight: 600; }
.menu nav a[aria-current] { color: var(--blue); }
@media (min-width: 768px) { .duo { grid-template-columns: 1fr 1fr; gap: 18px; } .duo .cd .ph { height: 300px; } }
@media (min-width: 1100px) {
  .phero { padding-bottom: 80px; }
  .phero .h1 { font-size: clamp(56px, 4.6vw, 82px); }
  .ph-photo { aspect-ratio: 5 / 4; }
}
.nav-links a { white-space: nowrap; }
.phero .h1 .sl { white-space: nowrap; }
.duo .cd .vis { min-height: 240px; }
.duo .cd .vis .ui { max-width: 320px; font-size: 14px; padding: 16px; }
.duo .cd .vis .ui .row + .row { margin-top: 8px; }
@media (min-width: 768px) { .duo .cd .vis { min-height: 300px; } }
@media (min-width: 1100px) and (max-width: 1279px) { .nav-links a { padding-left: 9px; font-size: 13px; } }
@media (min-width: 1280px) { .nav { width: min(1060px, calc(100% - 40px)); } }

/* ===== 12/10 : pastille « Vous : un seul contact » sous l'orbite (ne chevauche plus les points) ===== */
.orbit { margin-bottom: 64px; }
.orbit .vous { bottom: auto; top: calc(100% + 14px); white-space: nowrap; }

/* ===== 12/10 : blocs animés ===== */
/* scènes piscine (coque qui descend dans la fouille / parpaings posés un à un) : état final = image fixe sans animation */
.vis-scene { padding: 18px 16px 6px; }
.scene { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.scene text { font: 600 15px var(--card); fill: #0A0A0A; }
.scene text.c { font-size: 12.5px; fill: #fff; text-anchor: middle; }
.scene .pop, .scene .cote, .scene .b { transform-box: fill-box; transform-origin: center; }
.scene .vague { transform-box: view-box; }
.in .scene .vague { animation: vague 2.4s linear infinite; }
@keyframes vague { to { transform: translateX(-60px); } }
.in .sc-coque .coque { animation: coque-pose 7s cubic-bezier(.45, 0, .2, 1) infinite; }
.in .sc-coque .cables { animation: cables 7s infinite; }
.in .sc-coque .eau { animation: remplit-c 7s var(--ease) infinite; }
.in .sc-coque .pop { animation: pastille 7s var(--ease) infinite; }
@keyframes coque-pose { 0%, 6% { transform: translateY(-160px); opacity: 0; } 11% { transform: translateY(-160px); opacity: 1; } 40% { transform: translateY(5px); } 46%, 93% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes cables { 0%, 42% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes remplit-c { 0%, 50% { transform: translateY(80px); } 76%, 100% { transform: none; } }
@keyframes pastille { 0%, 74% { opacity: 0; transform: scale(.6) translateY(8px); } 80% { opacity: 1; transform: scale(1.06); } 84%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.scene .b { fill: #D2CCC1; stroke: #ACA598; stroke-width: 1.2; }
.in .sc-maco .b { animation: parpaing 8s var(--ease) infinite; animation-delay: calc(var(--k) * .12s); }
.in .sc-maco .enduit { animation: enduit 8s infinite; }
.in .sc-maco .cote { animation: cote 8s var(--ease) infinite; }
.in .sc-maco .eau { animation: remplit-m 8s var(--ease) infinite; }
.in .sc-maco .pop { animation: pastille-m 8s var(--ease) infinite; }
@keyframes parpaing { 0% { opacity: 0; transform: translateY(-16px); } 4%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes enduit { 0%, 36% { opacity: 0; } 44%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes cote { 0%, 42% { opacity: 0; transform: scaleX(.55); } 50% { opacity: 1; transform: scaleX(1.06); } 56% { transform: scaleX(.88); } 62%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes remplit-m { 0%, 58% { transform: translateY(74px); } 80%, 88% { transform: none; opacity: 1; } 94%, 100% { transform: none; opacity: 0; } }
@keyframes pastille-m { 0%, 78% { opacity: 0; transform: scale(.6) translateY(8px); } 83% { opacity: 1; transform: scale(1.06); } 86%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

/* promesses : l'icône se dessine à l'apparition, halo qui respire, survol vivant */
.promesse { transition: transform .4s var(--spring), box-shadow .4s; }
.promesse:hover { transform: translateY(-4px); box-shadow: 0 14px 40px -12px rgba(var(--blue-rgb), .35); }
.promesse i { position: relative; }
.promesse i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--blue); opacity: 0; pointer-events: none; }
.promesse.in i::after { animation: halo 3.6s ease-out infinite; }
.promesse.in:nth-child(2) i::after { animation-delay: 1.2s; } .promesse.in:nth-child(3) i::after { animation-delay: 2.4s; }
.promesse.in i svg { animation: trace 1.5s var(--ease) .15s both; }
.promesse i svg { transition: transform .5s var(--spring); }
.promesse:hover i svg { transform: rotate(-8deg) scale(1.12); }
@keyframes halo { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes trace { 0% { stroke-dasharray: 90; stroke-dashoffset: 90; } 99% { stroke-dasharray: 90; stroke-dashoffset: 0; } 100% { stroke-dasharray: none; stroke-dashoffset: 0; } }

/* chiffres du bandeau de confiance qui défilent jusqu'à leur valeur */
.figs b { font-variant-numeric: tabular-nums; }

/* ===== 10/10 soir : retours de Jimmy (espace client ZELY, commande 1004) ===== */
:root { --sl-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M5 11 Q 100 3 195 9' fill='none' stroke='%23FC8228' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sl-o { background-image: var(--sl-o); color: var(--orange); }
/* héros centré : le texte au-dessus du film */
.hero-c { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-c .hc-texte { width: 100%; max-width: 1080px; container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
.hero-centre .h1.une-ligne { font-size: min(84px, 8.2cqi); }
.hero-centre .rot-o .sl { color: var(--orange); background-image: var(--sl-o); }
.hero-centre .checks { justify-items: center; }
.hero-centre .checks li { text-align: left; }
.hero-centre .checks u { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-centre .ctas { justify-content: center; }
/* « 1 Interlocuteur & 24 Corps de métier en 1 clic » : chiffres orange, « en 1 clic » dans un cadre orange qu'une main vient presser */
.hero-centre .sous { text-wrap: balance; }
.sous .o { color: var(--orange); }
.clic { position: relative; display: inline-block; margin-left: .12em; padding: 0 .3em .06em; border-radius: .3em; background: rgba(252, 130, 40, .1); color: var(--orange); white-space: nowrap; }
.clic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 3px dashed var(--orange); pointer-events: none; }
.clic .main { position: absolute; right: -.5em; bottom: -.82em; width: .86em; height: .86em; pointer-events: none; }
.clic .main svg { width: 100%; height: 100%; fill: none; stroke: #0B0B0B; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22)); overflow: visible; }
.clic .main .p { fill: #fff; }
.clic .onde { position: absolute; left: 27%; top: 0; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border-radius: 50%; border: 3px solid var(--orange); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .clic { animation: clic-appui 3.4s var(--ease) 1.2s infinite; }
  .clic .main { animation: clic-main 3.4s var(--ease) 1.2s infinite; opacity: 0; }
  .clic .onde { animation: clic-onde 3.4s ease-out 1.2s infinite; }
}
@keyframes clic-main { 0% { opacity: 0; transform: translate(55%, 70%); } 14% { opacity: 1; } 34% { transform: translate(0, 0); } 40% { transform: translate(0, 0) scale(.84); } 48% { transform: translate(0, 0) scale(1); } 78% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(40%, 55%); } }
@keyframes clic-appui { 0%, 38% { transform: none; } 42% { transform: scale(.94); } 52%, 100% { transform: none; } }
@keyframes clic-onde { 0%, 40% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(3.2); } }
.clic:hover { background: rgba(252, 130, 40, .18); }
/* film encadré comme sur zelystudio.fr : pointillés + carte blanche avec barre de navigateur */
.film-z { width: min(1000px, 100%); margin-top: 46px; }
.film-z::before { inset: -14px; border-radius: 36px; }
.film-card { position: relative; padding: 0 10px 10px; border-radius: 26px; background: #fff; box-shadow: 0 2px 3px rgba(16, 49, 77, .05), 0 18px 44px -6px rgba(16, 49, 77, .18); }
.film-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 40px; padding-left: 8px; }
.film-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.film-bar i:nth-child(2) { background: #febc2e; } .film-bar i:nth-child(3) { background: #28c840; }
.film-bar span { position: absolute; left: 66px; right: 66px; top: 7px; max-width: 280px; height: 26px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px; border-radius: 13px; background: #f2f3f5; color: var(--gray); font: 500 12.5px/26px var(--card); letter-spacing: -.01em; }
.film-z .film { border-radius: 16px; box-shadow: none; }
/* bulles : fond légèrement transparent, posées hors du film */
.film-z .fchip { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
/* texte discret sous le film (même style que « 30 minutes en visio · Sans engagement » sur zelystudio.fr) */
.film-s { margin-top: 30px; color: var(--gray); opacity: .8; font: 400 14px/20px var(--card); letter-spacing: -.01em; }
@media (min-width: 768px) { .film-s { font-size: 15px; } }
@media (min-width: 1100px) {
  .hero-centre { padding-top: 124px; }
  .hero-centre .hero-in.hero-c { width: min(1220px, 100% - 170px); }
  .film-z { width: min(980px, 100% - 300px); margin-top: 54px; }
  .film-z .fchip:nth-child(1) { left: auto; right: calc(100% - 4px); top: 34%; }
  .film-z .fchip:nth-child(2) { right: auto; left: calc(100% - 4px); top: 14%; }
  .film-z .fchip:nth-child(3) { right: auto; left: calc(100% - 4px); bottom: 20%; }
  .film-s { margin-top: 34px; }
}
@media (max-width: 1099px) { .film-z .fchips { margin-top: 26px; } }
/* bloc « un interlocuteur » : Jimmy au centre, « Coordination travaux » qui tourne autour, impulsions vers les 24 corps de métier */
.orbit .core.core-j { inset: 32%; overflow: hidden; background: #e9eef3; border: 4px solid #fff; box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .45), 0 0 0 7px rgba(252, 130, 40, .16); }
.orbit .core.core-j > img { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 50%; }
.orbit .coord { position: absolute; inset: 22%; width: 56%; height: 56%; overflow: visible; pointer-events: none; }
.orbit .coord text { font: 700 4.6px var(--display); letter-spacing: .06em; fill: var(--orange); }
.orbit .liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit .liens line { stroke: none; stroke-linecap: round; }
.orbit .liens .f { stroke: var(--b20); stroke-width: .35; stroke-dasharray: .5 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .orbit .coord { animation: tourne 28s linear infinite; }
  .in .orbit .liens line:not(.f) { stroke: var(--orange); stroke-width: .9; stroke-dasharray: 3 30; stroke-dashoffset: 3; opacity: 0; animation: impulsion 4.8s linear infinite; animation-delay: calc(var(--k) * .2s - .3s); }
}
@keyframes impulsion { 0% { stroke-dashoffset: 3; opacity: 0; } 1% { opacity: 1; } 6% { stroke-dashoffset: -11.5; opacity: 1; } 7%, 100% { stroke-dashoffset: -11.5; opacity: 0; } }
/* « en 1 clic » est un lien : zone tactile d'au moins 40 px de haut sur téléphone */
@media (max-width: 767px) { .clic { padding: 7px .3em 8px; margin-block: -7px -8px; } }