/* BravRez service pages: layout and animated visuals.
   Every element's resting style is its final state: animations only run under .svc-on (block on screen),
   so a visitor who asks for less motion, or a browser without JavaScript, sees a complete static picture. */

:root { --svc-o: #FF7634; --svc-o2: #FFA97A; --svc-c: #4FD1FF; --svc-c2: #7fe0ff; --svc-v: #3ddc97; --svc-m: #9aa3b2; }

/* ---------- layout ---------- */
.svc-hero { padding: 56px 0 30px; }
.svc-hero-grid { display: grid; grid-template-columns: 42% 58%; align-items: center; gap: 10px; }
.svc-kicker { font-size: 13px; letter-spacing: .2em; color: var(--svc-o2); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.svc-hero h1 { font-size: 3rem; line-height: 1.1; margin-bottom: 18px; }
.svc-hero .svc-chapo { font-size: 1.12rem; line-height: 1.6; margin-bottom: 22px; }
.svc-puces { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-puces li { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; color: #d6dae3; }
.svc-puces li::before { content: '\2713'; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--svc-o); color: var(--svc-o2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.svc-boutons { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.svc-boutons .tf-btn { height: 44px; padding-left: 22px; padding-right: 22px; white-space: nowrap; }
@media (max-width: 575px) { .svc-boutons { display: grid; grid-auto-flow: row; width: 100%; } }
.svc-hero--dessous .svc-hero-texte { text-align: center; max-width: 900px; margin: 0 auto; }
.svc-hero--dessous .svc-puces { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.svc-hero--dessous .svc-scene { margin-top: 34px; }
.svc-scene { position: relative; width: 100%; }
.svc-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.svc-scene--large svg { overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: radial-gradient(ellipse at 50% 40%, #0c0f17, #05060a 75%); }

.svc-section h2 { margin-bottom: 28px; }
.svc-prose { max-width: 860px; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; }
.svc-prose p { margin-bottom: 1.1em; }
.svc-prose ul { margin: 0 0 1.2em 1.2em; list-style: disc; }
.svc-prose b, .svc-prose strong { color: #fff; }
.svc-prose a, .svc-carte-texte a { color: var(--svc-o2); text-decoration: underline; text-underline-offset: 3px; }
.svc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0 30px; }
.svc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-carte { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; }
.svc-carte h3 { font-size: 1.22rem; line-height: 1.35; margin: 16px 0 10px; color: #fff; }
.svc-pv { aspect-ratio: 300 / 170; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #0e1219, #07080d); display: flex; flex-direction: column; justify-content: center; }
.svc-pv > .svc-shot { aspect-ratio: auto; height: 100%; border-radius: 0; }
.svc-pv .svc-pic { background: none; border-radius: 0; }
.svc-pv .svc-ba { padding: 10px 16px; }
.svc-carte-texte { font-size: .98rem; line-height: 1.65; flex: 1; }
.svc-carte-texte p { margin-bottom: .8em; }
.svc-prix { display: inline-block; margin-top: 12px; padding: 5px 14px; border-radius: 30px; border: 1px solid var(--svc-o); color: var(--svc-o2); font-size: .88rem; font-weight: 700; align-self: flex-start; }
.svc-lien { margin-top: 12px; font-size: .92rem; }
.svc-note { font-size: .92rem; text-align: center; margin-top: 22px; }

/* ---------- figures ---------- */
.svc-big { font-size: 3.4rem; font-weight: 800; line-height: 1; color: #fff; }
.svc-big small { font-size: 1.4rem; color: var(--svc-o2); font-weight: 700; }
.svc-cap { color: #d6dae3; margin: 10px 0 16px; font-size: 1rem; line-height: 1.5; }
.svc-people { display: flex; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
.svc-person { width: 30px; height: 46px; position: relative; }
.svc-person svg { width: 100%; height: 100%; display: block; }
.svc-person .b { fill: #2a2f3a; transition: fill .4s; }
.svc-person.on .b { fill: var(--svc-o); }
.svc-person .eur { position: absolute; right: -6px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--svc-c); color: #05060a; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.svc-person.pay .eur { transform: scale(1); }
.svc-legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--svc-m); }
.svc-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.svc-barre { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 12px; margin: 14px 0; }
.svc-barre span { font-size: .92rem; color: #d6dae3; }
.svc-piste { height: 16px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.svc-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--svc-c), var(--svc-o)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.svc-pct { font-weight: 800; font-size: 1.1rem; color: #fff; text-align: right; white-space: nowrap; }
.svc-sits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 8px 0 28px; }
.svc-sit { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px 12px; text-align: center; font-size: .9rem; color: #cfd4dd; line-height: 1.4; }
.svc-sit svg { width: 64px; height: 52px; display: block; margin: 0 auto 10px; }

/* ---------- offer pictures ---------- */
.svc-pic { width: 100%; height: auto; aspect-ratio: 300 / 120; display: block; border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, #0e1219, #07080d); }
.svc-pic .ln { stroke: rgba(255,255,255,.18); fill: none; }
.svc-pic .bx { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.2); }
.svc-pic .ob { fill: rgba(255,118,52,.15); stroke: var(--svc-o); }
.svc-pic .cb { fill: rgba(79,209,255,.12); stroke: var(--svc-c); }
.svc-pic text, .svc-sit text { font-family: inherit; font-size: 10px; fill: #cfd4dd; }
.svc-pic .tw { fill: #fff; font-weight: 700; }
.svc-pic .tm { fill: var(--svc-m); }
.svc-pic .to { fill: var(--svc-o2); font-weight: 700; }
.svc-pic .tv { fill: var(--svc-v); font-weight: 700; }
.svc-pic .tc { fill: #bfeeff; }
.pop, .shake, .grow, .lock, .spin, .bob { transform-box: fill-box; }
.pop { transform-origin: center; }
.grow { transform-origin: bottom; }
.shake { transform-origin: top center; }
.spin { transform-origin: center; }
.draw { stroke-dasharray: 300; stroke-dashoffset: 0; }
.svc-on .pop { animation: svc-pop 6s infinite; }
.svc-on .svc-fd { animation: svc-fade 6s infinite; }
.svc-on .scan { animation: svc-scan 6s infinite; }
.svc-on .hl { animation: svc-hl 6s infinite; }
.svc-on .grow { animation: svc-grow 6s infinite; }
.svc-on .draw { animation: svc-draw 6s infinite; }
.svc-on .shake { animation: svc-shake 6s infinite; }
.svc-on .lock { animation: svc-lock 6s infinite; }
.svc-on .blink { animation: svc-blink 1.2s infinite; }
.svc-on .pulse { animation: svc-pulse 2s infinite; }
.svc-on .spin { animation: svc-spin 6s linear infinite; }
.svc-on .bob { animation: svc-bob 3s ease-in-out infinite; }
.svc-on .rise { animation: svc-rise 6s infinite; }
.svc-on .slide { animation: svc-slide 6s infinite; }
.d1 { animation-delay: .3s !important; } .d2 { animation-delay: .6s !important; } .d3 { animation-delay: .9s !important; } .d4 { animation-delay: 1.2s !important; }
@keyframes svc-pop { 0%, 48% { transform: scale(0); } 54% { transform: scale(1.25); } 58%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes svc-fade { 0%, 40% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svc-scan { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 45% { transform: translateX(220px); opacity: 1; } 50%, 100% { transform: translateX(220px); opacity: 0; } }
@keyframes svc-hl { 0%, 30% { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.2); } 36%, 92% { fill: rgba(255,118,52,.25); stroke: #FF7634; } 100% { fill: rgba(255,255,255,.04); } }
@keyframes svc-grow { 0% { transform: scaleY(0); } 30%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes svc-draw { 0% { stroke-dashoffset: 300; } 45%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 300; } }
@keyframes svc-shake { 0%, 50% { transform: rotate(0); } 53% { transform: rotate(18deg); } 56% { transform: rotate(-18deg); } 59% { transform: rotate(12deg); } 62% { transform: rotate(-8deg); } 65%, 100% { transform: rotate(0); } }
@keyframes svc-lock { 0%, 45% { transform: translateY(-7px); } 52%, 92% { transform: translateY(0); } 100% { transform: translateY(-7px); } }
@keyframes svc-blink { 50% { opacity: .25; } }
@keyframes svc-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes svc-spin { to { transform: rotate(360deg); } }
@keyframes svc-bob { 50% { transform: translateY(-4px); } }
@keyframes svc-rise { 0% { transform: translateY(30px); opacity: 0; } 30%, 92% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes svc-slide { 0%, 20% { transform: translateX(-24px); opacity: 0; } 35%, 92% { transform: translateX(0); opacity: 1; } 100% { opacity: 0; } }
.svc-pulse-ring { transform-box: fill-box; transform-origin: center; }
.svc-on .svc-pulse-ring { animation: svc-pulse 2s infinite; }

/* ---------- proofs ---------- */
.svc-shot { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 300 / 170; background: #0e1219; }
.svc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .6; display: block; }
.svc-chat { position: absolute; right: 10px; bottom: 10px; width: 64%; border-radius: 12px; background: rgba(8,10,16,.95); border: 1px solid var(--svc-o); padding: 10px; font-size: 12px; line-height: 1.4; }
.svc-chat .q { background: rgba(79,209,255,.15); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; color: #dff6ff; }
.svc-chat .a { color: #fff; min-height: 34px; }
.svc-chat .s { display: inline-block; margin-top: 5px; font-size: 10px; border: 1px solid var(--svc-c); border-radius: 10px; padding: 1px 7px; color: #bfeeff; transition: opacity .4s; }
.svc-shot .svc-legende-shot { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 12px; color: #fff; background: rgba(8,10,16,.85); border-radius: 8px; padding: 6px 10px; }
.svc-ba { padding: 6px 2px 0; }
.svc-ba .row { margin: 6px 0 14px; font-size: .88rem; color: #cfd4dd; line-height: 1.4; }
.svc-ba .t2 { height: 16px; border-radius: 8px; background: rgba(255,255,255,.06); margin-top: 6px; overflow: hidden; }
.svc-ba .f2 { height: 100%; border-radius: 8px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.svc-ba .chiffre { font-size: 1.9rem; font-weight: 800; color: var(--svc-v); }
.svc-ba .chiffre span { font-size: .95rem; color: #cfd4dd; font-weight: 600; }

/* ---------- method timeline ---------- */
.svc-frise { position: relative; padding-top: 10px; }
.svc-frise-ligne { position: absolute; left: 12.5%; right: 12.5%; top: 42px; height: 3px; background: linear-gradient(90deg, var(--svc-c), var(--svc-o)); }
.svc-frise-ligne i { display: none; }
.svc-on .svc-frise-ligne { background: rgba(255,255,255,.08); }
.svc-on .svc-frise-ligne i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--svc-c), var(--svc-o)); animation: svc-mfill 10s infinite linear; }
@keyframes svc-mfill { 0% { width: 0; } 85%, 100% { width: 100%; } }
.svc-etapes4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; position: relative; }
.svc-etape4 .ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; border: 2px solid rgba(255,118,52,.55); background: #0b0d13; display: flex; align-items: center; justify-content: center; }
.svc-etape4 .ic svg { width: 30px; height: 30px; }
.svc-on .svc-etape4 .ic { animation: svc-stepon 10s infinite; }
.svc-on .svc-etape4:nth-child(2) .ic { animation-delay: -7.2s; }
.svc-on .svc-etape4:nth-child(3) .ic { animation-delay: -4.4s; }
.svc-on .svc-etape4:nth-child(4) .ic { animation-delay: -1.6s; }
@keyframes svc-stepon { 0% { border-color: rgba(255,255,255,.15); box-shadow: none; } 3%, 27% { border-color: #FF7634; box-shadow: 0 0 22px rgba(255,118,52,.55); } 30%, 100% { border-color: rgba(255,118,52,.5); box-shadow: none; } }
.svc-etape4 h3 { font-size: 1.1rem; margin-bottom: 8px; color: #fff; }
.svc-etape4 p { font-size: .95rem; line-height: 1.6; margin: 0 auto; max-width: 270px; }
.svc-etape4 .svc-prix { align-self: center; }

/* ---------- counters ---------- */
.svc-stat { text-align: center; padding: 28px 16px; }
.svc-stat .n { font-size: 3.6rem; font-weight: 800; color: #fff; line-height: 1; }
.svc-stat .n em { font-style: normal; color: var(--svc-o); }
.svc-stat .l { margin-top: 12px; color: #aab2c0; font-size: .95rem; line-height: 1.5; }

/* ---------- map ---------- */
.svc-carte-zone svg { width: 100%; height: auto; display: block; border-radius: 14px; background: radial-gradient(ellipse at 60% 40%, #0d121b, #05060a 75%); }
.svc-carte-zone text { font-family: inherit; font-size: 13px; fill: #e8eaf0; font-weight: 600; }
.svc-carte-zone text.sm { font-size: 11px; fill: var(--svc-m); font-weight: 500; }
.svc-carte-zone .svc-legende { margin: 12px 0 24px; justify-content: center; }

/* ---------- FAQ, others ---------- */
.svc-faq { max-width: 860px; margin: 0 auto; }
.svc-faq details { border-bottom: 1px solid rgba(255,255,255,.12); padding: 18px 0; }
.svc-faq summary { cursor: pointer; font-size: 1.1rem; font-weight: 600; color: #fff; list-style: none; padding-right: 30px; position: relative; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: '+'; position: absolute; right: 0; top: 0; color: var(--svc-o); font-size: 1.4rem; line-height: 1; }
.svc-faq details[open] summary::after { content: '\2212'; }
.svc-faq .svc-reponse { margin-top: 12px; line-height: 1.7; }
.svc-autres { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 1199px) {
  .svc-grid3 { grid-template-columns: repeat(2, 1fr); }
  .svc-sits { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-hero-grid .svc-scene { max-width: 640px; margin: 10px auto 0; }
  .svc-etapes4 { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .svc-frise-ligne { display: none; }
}
@media (max-width: 767px) {
  .svc-hero { padding: 34px 0 20px; }
  .svc-hero h1 { font-size: 2.1rem; }
  .svc-hero .svc-chapo { font-size: 1rem; }
  .svc-grid2, .svc-grid3 { grid-template-columns: 1fr; }
  .svc-sits { grid-template-columns: 1fr 1fr; }
  .svc-barre { grid-template-columns: 110px 1fr 52px; }
  .svc-big { font-size: 2.8rem; }
  .svc-prose { font-size: 1rem; }
  .svc-etapes4 { grid-template-columns: 1fr; }
  .svc-stat .n { font-size: 3rem; }
}
/* ---------- booking proof (capture-rdv) ---------- */
.svc-rdv .svc-rdv-cal { position: absolute; left: 10px; top: 10px; width: 70px; height: auto; }
.svc-rdv-carte { position: absolute; right: 10px; bottom: 10px; width: 70%; border-radius: 12px; background: rgba(8,10,16,.95); border: 1px solid var(--svc-o); padding: 9px 11px; font-size: 12px; line-height: 1.35; }
.svc-rdv-carte .t { color: #fff; font-weight: 700; margin-bottom: 7px; }
.svc-rdv-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.svc-rdv-etapes li { font-size: 10.5px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--svc-o); color: #FFD9C5; }
.svc-rdv-etapes li:last-child { border-color: var(--svc-v); color: #bff5dc; }
.svc-on .svc-rdv-etapes li:nth-child(1) { animation: svc-rdv1 7.5s infinite; }
.svc-on .svc-rdv-etapes li:nth-child(2), .svc-on .svc-rdv-cal .k2 { animation: svc-rdv2 7.5s infinite; }
.svc-on .svc-rdv-etapes li:nth-child(3), .svc-on .svc-rdv-cal .k3 { animation: svc-rdv3 7.5s infinite; }
@keyframes svc-rdv1 { 0%, 6% { opacity: .2; } 10%, 92% { opacity: 1; } 100% { opacity: .2; } }
@keyframes svc-rdv2 { 0%, 28% { opacity: .2; } 32%, 92% { opacity: 1; } 100% { opacity: .2; } }
@keyframes svc-rdv3 { 0%, 52% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- overlays on captures (redirections, local listing) ---------- */
.svc-panneau { position: absolute; left: 10px; right: 10px; bottom: 10px; border-radius: 12px; background: rgba(8,10,16,.94); border: 1px solid var(--svc-o); padding: 8px 10px; font-size: 10.5px; line-height: 1.3; }
.svc-panneau--droite { left: auto; width: 62%; }
.svc-panneau ul { list-style: none; margin: 0; padding: 0; }
.svc-redir li { margin-bottom: 5px; }
.svc-redir s, .svc-redir span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-redir s { color: #8f98a8; }
.svc-redir span { color: #FFD9C5; }
.svc-redir b { display: inline-block; background: var(--svc-o); color: #111; border-radius: 8px; padding: 0 6px; margin-right: 6px; font-size: 9.5px; }
.svc-panneau .n { color: #8f98a8; font-size: 9.5px; }
.svc-coches li { position: relative; padding-left: 17px; margin: 3px 0; color: #e8eaf0; }
.svc-coches li::before { content: "\2713"; position: absolute; left: 0; color: var(--svc-v); font-weight: 800; }
.svc-epingle { position: absolute; left: 12%; top: 12%; width: 34px; height: auto; }
.svc-on .svc-seq > :nth-child(1) { animation: svc-seq1 8s infinite; }
.svc-on .svc-seq > :nth-child(2) { animation: svc-seq2 8s infinite; }
.svc-on .svc-seq > :nth-child(3) { animation: svc-seq3 8s infinite; }
.svc-on .svc-seq > :nth-child(4) { animation: svc-seq4 8s infinite; }
@keyframes svc-seq1 { 0%, 4% { opacity: .12; transform: translateX(-10px); } 9%, 92% { opacity: 1; transform: none; } 100% { opacity: .12; } }
@keyframes svc-seq2 { 0%, 20% { opacity: .12; transform: translateX(-10px); } 25%, 92% { opacity: 1; transform: none; } 100% { opacity: .12; } }
@keyframes svc-seq3 { 0%, 36% { opacity: .12; transform: translateX(-10px); } 41%, 92% { opacity: 1; transform: none; } 100% { opacity: .12; } }
@keyframes svc-seq4 { 0%, 52% { opacity: .12; transform: translateX(-10px); } 57%, 92% { opacity: 1; transform: none; } 100% { opacity: .12; } }

@media (prefers-reduced-motion: reduce) {
  .svc-anim *, .svc-anim *::before, .svc-anim *::after { animation: none !important; transition: none !important; }
  .svc-smil { display: none; }
}