:root{
  --bg:#05070b;--panel:#0b0f16;--panel2:#111721;--text:#f4f7fb;--muted:#9ba8b9;
  --blue:#137cff;--blue2:#42c7ff;--line:#233047;--white:#fff;--shadow:0 22px 70px rgba(0,0,0,.28);
  --radius:22px;--shell:min(1180px,calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f7f8fa;color:#111827;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.shell{width:var(--shell);margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:10px;background:#fff;color:#000;padding:10px;z-index:999}
.skip-link:focus{left:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.site-header{position:sticky;top:0;z-index:50;background:rgba(5,7,11,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{width:220px;display:block}
.brand img{width:100%;height:58px;object-fit:contain;object-position:left center}
.main-nav{display:flex;align-items:center;gap:26px;color:#d7deea;font-weight:650;font-size:.94rem}
.main-nav a{position:relative}
.main-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:.25s}
.main-nav a:hover::after{width:100%}
.nav-cta{padding:11px 17px;border:1px solid rgba(66,199,255,.45);border-radius:999px;background:rgba(19,124,255,.12)}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.menu-toggle span:not(.sr-only){display:block;width:26px;height:2px;margin:5px;background:#fff}

.hero{min-height:720px;background:
radial-gradient(circle at 70% 28%,rgba(19,124,255,.2),transparent 29%),
linear-gradient(145deg,#05070b 0%,#08101c 55%,#030507 100%);color:var(--text);overflow:hidden}
.hero-grid{min-height:720px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:70px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:800;color:#137cff;margin:0 0 14px}
.hero h1,.page-hero h1{font-size:clamp(3.2rem,6.4vw,6.3rem);line-height:.96;letter-spacing:-.055em;margin:0 0 25px;max-width:900px}
.hero h1 span{color:var(--blue2)}
.hero-lead,.page-hero p{font-size:1.13rem;color:#b8c2d0;max-width:700px}
.hero-actions{display:flex;gap:13px;margin:34px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:12px;font-weight:800;transition:.22s}
.btn-primary{background:linear-gradient(135deg,#0b65e8,#1b9dff);color:#fff;box-shadow:0 12px 35px rgba(19,124,255,.24)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(19,124,255,.33)}
.btn-ghost{border:1px solid #324056;color:#e8edf5;background:rgba(255,255,255,.03)}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;color:#aab5c4;font-size:.86rem}
.hero-points span{border:1px solid #263348;border-radius:999px;padding:7px 11px}
.hero-visual{position:relative}
.hero-photo{border-radius:30px;overflow:hidden;transform:rotate(1.2deg);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.hero-photo img{width:100%;height:510px;object-fit:cover}
.hero-card{position:absolute;right:-18px;bottom:-25px;background:#fff;color:#111827;padding:17px 20px;border-radius:16px;box-shadow:var(--shadow);display:grid}
.hero-card span{font-size:.82rem;color:#6b7280}

.section{padding:95px 0}
.section-heading{max-width:760px;margin-bottom:38px}
.section-heading h2,.dark-band h2,.pro-banner h2,.contact-section h2,.two-col h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.035em;margin:.15em 0 .35em}
.section-heading p:last-child{color:#657185}
.heading-row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:30px}
.text-link{font-weight:800;color:#0b65e8}

.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.service-grid.three{grid-template-columns:repeat(3,1fr)}
.service-card{position:relative;background:#fff;border:1px solid #e1e6ed;border-radius:var(--radius);padding:32px;min-height:270px;box-shadow:0 12px 35px rgba(15,23,42,.04);overflow:hidden}
.service-card.feature{background:linear-gradient(145deg,#07111f,#0b1728);color:#fff;border-color:#1d3451}
.service-card h2,.service-card h3{font-size:1.45rem;margin:18px 0 8px}
.service-card p{color:#697588}
.service-card.feature p{color:#afbed1}
.service-card a{font-weight:800;color:#1679ee;display:inline-block;margin-top:10px}
.service-index{font-size:.8rem;letter-spacing:.14em;color:#3e9dff;font-weight:900}

.dark-band{padding:95px 0;background:#06080d;color:#f5f7fb;position:relative;overflow:hidden}
.dark-band::before{content:"";position:absolute;width:550px;height:550px;border-radius:50%;background:rgba(13,111,236,.13);filter:blur(80px);right:-140px;top:-250px}
.split{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}
.dark-band p{color:#aeb8c6}
.process-list{display:grid;gap:10px}
.process-list>div{display:grid;grid-template-columns:52px 1fr;gap:15px;align-items:center;padding:18px;border:1px solid #202a38;background:#0b0f16;border-radius:15px}
.process-list b{font-size:1.35rem;color:#218cff}
.process-list span{display:grid}
.process-list small{color:#8d99a9}
.spec-cards{display:grid;gap:12px}
.spec-cards div{background:#0c111a;border:1px solid #1d2938;border-radius:15px;padding:20px;display:grid;gap:4px}
.spec-cards span{color:#9da9ba}

.gallery-preview{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.gallery-tile{border-radius:18px;overflow:hidden;background:#0b0f16}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery-tile:hover img{transform:scale(1.04)}
.gallery-tile.wide{grid-column:span 2}
.gallery-tile.tall{grid-row:span 2}

.pro-banner{background:linear-gradient(135deg,#eaf2ff,#fff);border:1px solid #d6e3f5;border-radius:28px;padding:45px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.pro-banner p{max-width:700px;color:#667386}
.contact-section{background:#eef2f7}
.contact-grid{display:grid;grid-template-columns:1fr .7fr;gap:70px;align-items:center}
.contact-card{background:#07111d;color:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.contact-phone{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;letter-spacing:-.04em;color:#43b4ff}
.contact-card p{color:#c0cad7}
.contact-card .muted{color:#77869a}

.page-hero{padding:100px 0 70px;background:#070a10;color:#fff;width:auto;max-width:none;padding-left:max(20px,calc((100% - 1180px)/2));padding-right:max(20px,calc((100% - 1180px)/2))}
.page-hero h1{max-width:1000px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.check-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:13px}
.check-list li{position:relative;padding-left:29px}
.check-list li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:3px;background:#1679ee;box-shadow:0 0 0 5px #e9f3ff}
.media-frame{margin:0;border-radius:24px;overflow:hidden;background:#0b0f16;box-shadow:var(--shadow)}
.media-frame img{width:100%;height:520px;object-fit:cover}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-strip img{width:100%;height:320px;object-fit:cover;border-radius:18px}
.center-action{text-align:center;margin-top:30px}

.gallery-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.gallery-filters button{border:1px solid #d7dde6;background:#fff;color:#334155;border-radius:999px;padding:9px 14px;cursor:pointer;font-weight:750}
.gallery-filters button.is-active{background:#07111d;color:#fff;border-color:#07111d}
.work-grid{columns:3 290px;column-gap:14px}
.work-card{width:100%;break-inside:avoid;margin:0 0 14px;padding:0;background:#fff;border:1px solid #e2e7ee;border-radius:18px;overflow:hidden;text-align:left;cursor:pointer}
.work-card[hidden]{display:none}
.work-card img{width:100%;height:auto}
.work-card span{padding:15px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.work-card small{color:#1478ec;font-weight:800}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:50px 20px;color:#fff}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1200px,94vw);max-height:82vh;border-radius:12px}
.lightbox p{position:absolute;bottom:15px;margin:0;color:#cdd6e3}
.lightbox-close{position:absolute;right:24px;top:17px;border:0;background:none;color:#fff;font-size:2.5rem;cursor:pointer}

.legal-copy{max-width:850px}
.legal-copy h2{font-size:1.6rem;margin-top:40px}
.legal-copy p{color:#556274}
.legal-hero{padding-bottom:45px}
.not-found{padding:140px 0;min-height:65vh}
.not-found h1{font-size:clamp(3rem,8vw,7rem);line-height:.95;letter-spacing:-.06em;margin:10px 0 20px}

.site-footer{background:#05070b;color:#c6d0dd;padding:65px 0 25px;border-top:1px solid #172031}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr .7fr;gap:60px}
.footer-grid h2{font-size:1rem;color:#fff}
.footer-grid p{color:#8e9aad}
.footer-logo{width:250px;max-height:92px;object-fit:contain;object-position:left;margin-bottom:15px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #1b2533;margin-top:45px;padding-top:22px;color:#687588;font-size:.8rem}

@media(max-width:900px){
  :root{--shell:min(100% - 28px,1180px)}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:78px;left:0;right:0;background:#06090f;border-top:1px solid #1d2634;padding:20px;flex-direction:column;align-items:stretch}
  .main-nav.is-open{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:35px;padding:80px 0;min-height:auto}
  .hero{min-height:auto}
  .hero-visual{max-width:720px}
  .hero-photo img{height:420px}
  .split,.two-col,.contact-grid{grid-template-columns:1fr;gap:40px}
  .service-grid,.service-grid.three{grid-template-columns:1fr}
  .gallery-preview{grid-template-columns:repeat(2,1fr)}
  .pro-banner{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav-wrap{height:70px}
  .brand{width:175px}.brand img{height:50px}
  .main-nav{top:70px}
  .hero h1,.page-hero h1{font-size:clamp(2.7rem,14vw,4.6rem)}
  .section{padding:70px 0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-photo img{height:330px}
  .hero-card{right:8px}
  .gallery-preview{grid-template-columns:1fr;grid-auto-rows:230px}
  .gallery-tile.wide,.gallery-tile.tall{grid-column:auto;grid-row:auto}
  .heading-row{align-items:flex-start;flex-direction:column}
  .photo-strip{grid-template-columns:1fr}
  .photo-strip img{height:300px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .pro-banner{padding:28px}
}


/* ===== V2 dynamique DXF ===== */
body.site-body{
  background:
    linear-gradient(180deg,#05070b 0,#080b11 21%,#f6f7f9 35%,#f7f8fa 100%);
}

.site-header{
  background:
    radial-gradient(circle at 16% 0%,rgba(20,126,255,.13),transparent 24%),
    linear-gradient(180deg,rgba(2,5,9,.98),rgba(3,7,12,.96));
  border-bottom:1px solid rgba(40,134,255,.22);
  box-shadow:0 8px 35px rgba(0,0,0,.38);
}
.site-header::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(20,126,255,.15) 14%,#1788ff 48%,rgba(20,126,255,.15) 84%,transparent 100%);
  animation:headerSweep 6.5s linear infinite;
}
@keyframes headerSweep{
  0%{transform:translateX(-30%);opacity:.35}
  50%{opacity:1}
  100%{transform:translateX(30%);opacity:.35}
}
.nav-wrap{height:94px}
.brand{width:330px;min-width:280px}
.brand img{
  width:100%;height:74px;object-fit:contain;object-position:left center;
  filter:drop-shadow(0 0 9px rgba(20,126,255,.28));
  transition:transform .3s ease,filter .3s ease;
}
.brand:hover img{transform:scale(1.025);filter:drop-shadow(0 0 16px rgba(20,126,255,.48))}
.main-nav{gap:22px}

.hero{
  position:relative;
  background:
    radial-gradient(circle at 71% 22%,rgba(18,116,255,.20),transparent 25%),
    radial-gradient(circle at 25% 72%,rgba(20,72,145,.13),transparent 32%),
    linear-gradient(145deg,#02050a 0%,#07111f 50%,#020408 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(40,110,195,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,110,195,.08) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to right,transparent,#000 34%,#000 100%);
}
.hero-grid{grid-template-columns:.92fr 1.08fr;gap:48px}
.hero-copy{position:relative;z-index:2}
.hero-copy::after{
  content:"";position:absolute;left:-30px;top:10%;width:3px;height:62%;
  background:linear-gradient(180deg,transparent,#1688ff,transparent);
  filter:drop-shadow(0 0 8px #1688ff);
}
.hero-lead{max-width:650px}

.hero-visual-live{position:relative;min-height:570px;perspective:1300px}
.hero-stage{
  position:relative;height:570px;width:100%;
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
}
.hero-panel{
  position:absolute;margin:0;overflow:hidden;border-radius:24px;
  border:1px solid rgba(74,155,255,.22);
  background:#05090f;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025) inset;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.hero-panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(95,187,255,.18) 46%,transparent 67%);
  transform:translateX(-120%);transition:transform .9s ease;
}
.hero-panel:hover::after{transform:translateX(120%)}
.hero-panel:hover{border-color:rgba(86,185,255,.58);box-shadow:0 30px 75px rgba(0,0,0,.62),0 0 35px rgba(17,118,255,.15)}
.hero-panel img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.hero-panel:hover img{transform:scale(1.045);filter:saturate(1.08) brightness(1.05)}
.hero-panel-main{left:8%;top:2%;width:72%;height:67%;transform:translateZ(40px) rotate(-.5deg)}
.hero-panel-repair{left:0;bottom:5%;width:47%;height:36%;transform:translateZ(78px) rotate(-1.2deg)}
.hero-panel-pro{right:0;bottom:1%;width:44%;height:34%;transform:translateZ(92px) rotate(1.2deg)}
.hero-panel-label{
  position:absolute;left:16px;bottom:14px;padding:7px 10px;border-radius:999px;
  background:rgba(2,8,16,.76);border:1px solid rgba(59,153,255,.32);
  color:#dcecff;font-size:.68rem;font-weight:900;letter-spacing:.15em;
  backdrop-filter:blur(10px);box-shadow:0 0 18px rgba(19,124,255,.12)
}
.hero-scanline{
  position:absolute;left:4%;right:2%;top:48%;height:1px;
  background:linear-gradient(90deg,transparent,#42c7ff,transparent);
  box-shadow:0 0 18px #137cff;
  animation:scanline 4.6s ease-in-out infinite;
  opacity:.8;pointer-events:none
}
@keyframes scanline{0%,100%{transform:translateY(-180px);opacity:.15}50%{transform:translateY(180px);opacity:.9}}
.hero-glow{position:absolute;border-radius:50%;filter:blur(35px);pointer-events:none;mix-blend-mode:screen;animation:floatGlow 7s ease-in-out infinite}
.hero-glow-one{width:190px;height:190px;background:rgba(25,111,255,.18);right:8%;top:10%}
.hero-glow-two{width:140px;height:140px;background:rgba(28,199,255,.13);left:8%;bottom:3%;animation-delay:-3s}
@keyframes floatGlow{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-16px,0) scale(1.12)}}
.hero-orbit{
  position:absolute;border:1px solid rgba(48,140,255,.20);border-radius:50%;
  pointer-events:none;animation:orbitPulse 5.5s ease-in-out infinite
}
.hero-orbit-a{width:360px;height:360px;right:-40px;top:60px}
.hero-orbit-b{width:240px;height:240px;left:30px;bottom:30px;animation-delay:-2s}
@keyframes orbitPulse{0%,100%{transform:scale(.96);opacity:.18}50%{transform:scale(1.04);opacity:.45}}

.signal-strip{
  position:relative;margin-top:-1px;color:#eaf3ff;
  background:linear-gradient(180deg,#03070c 0%,#07111d 68%,#111922 100%);
  border-top:1px solid rgba(34,126,236,.16);
  border-bottom:1px solid rgba(34,126,236,.14);
}
.signal-strip::after{
  content:"";position:absolute;left:0;right:0;bottom:-70px;height:70px;
  background:linear-gradient(180deg,#111922 0%,rgba(247,248,250,.80) 65%,#f7f8fa 100%);
  pointer-events:none
}
.signal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:2}
.signal-item{padding:23px 22px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;border-right:1px solid rgba(255,255,255,.07)}
.signal-item:last-child{border-right:0}
.signal-item strong{font-size:.9rem}
.signal-item small{grid-column:2;color:#8291a5;font-size:.76rem}
.signal-dot{width:8px;height:8px;border-radius:50%;background:#2196ff;box-shadow:0 0 0 5px rgba(33,150,255,.09),0 0 16px rgba(33,150,255,.7);animation:signalPulse 2.4s ease-in-out infinite}
@keyframes signalPulse{50%{box-shadow:0 0 0 8px rgba(33,150,255,.03),0 0 24px rgba(33,150,255,.95)}}
.section-soft{padding-top:125px}

.section{position:relative}
.section::before{
  content:"";position:absolute;left:50%;top:0;width:min(900px,80%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(18,123,255,.10),transparent)
}
.service-card,.pro-banner,.contact-card,.work-card,.gallery-tile,.media-frame{
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease;
}
.service-card:hover,.work-card:hover,.media-frame:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 52px rgba(16,40,80,.12);
  border-color:rgba(27,124,255,.30)
}
.service-card::after{
  content:"";position:absolute;left:-35%;bottom:-70%;width:80%;height:120%;
  background:radial-gradient(circle,rgba(26,132,255,.11),transparent 66%);
  transition:transform .6s ease;pointer-events:none
}
.service-card:hover::after{transform:translate(70%,-28%)}
.gallery-tile{position:relative}
.gallery-tile::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,rgba(100,191,255,.18),transparent 68%);
  transform:translateX(-120%);transition:transform .75s ease
}
.gallery-tile:hover::after{transform:translateX(120%)}
.gallery-tile:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(10,37,78,.18)}
.gallery-tile img{transition:transform .65s ease,filter .4s ease}
.gallery-tile:hover img{transform:scale(1.06);filter:saturate(1.08) contrast(1.03)}

.dark-band{
  background:
    radial-gradient(circle at 75% 5%,rgba(18,108,232,.12),transparent 25%),
    linear-gradient(180deg,#f7f8fa 0%,#e8edf3 4%,#111722 15%,#06080d 28%,#06080d 85%,#111722 94%,#eef2f6 100%);
  padding-top:145px;padding-bottom:145px;
}
.dark-band::after{
  content:"";position:absolute;left:0;right:0;top:0;height:95px;
  background:linear-gradient(180deg,#f7f8fa,rgba(247,248,250,.15),transparent);
  pointer-events:none
}
.contact-section{
  background:linear-gradient(180deg,#f7f8fa 0%,#edf2f7 30%,#e7edf4 100%)
}

.main-nav a{transition:color .25s ease,text-shadow .25s ease}
.main-nav a:hover{color:#fff;text-shadow:0 0 12px rgba(34,146,255,.45)}

@media(max-width:1100px){
  .brand{width:260px;min-width:230px}
  .main-nav{gap:15px;font-size:.86rem}
}
@media(max-width:900px){
  .nav-wrap{height:78px}
  .brand{width:230px}.brand img{height:60px}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual-live{min-height:500px}
  .hero-stage{height:500px}
  .signal-grid{grid-template-columns:repeat(2,1fr)}
  .signal-item:nth-child(2){border-right:0}
  .signal-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.07)}
}
@media(max-width:600px){
  .brand{width:200px;min-width:180px}
  .hero-visual-live{min-height:430px}
  .hero-stage{height:430px}
  .hero-panel-main{left:4%;width:83%;height:62%}
  .hero-panel-repair{width:52%;height:34%}
  .hero-panel-pro{width:47%;height:31%}
  .signal-grid{grid-template-columns:1fr}
  .signal-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}


/* =========================================================
   V3 — ACCUEIL FIDÈLE À LA MAQUETTE DXF
   ========================================================= */
.mock-home{background:#02060c;color:#fff}
.mock-home .site-header{position:sticky}
.mock-header{height:112px;background:rgba(2,6,12,.97)!important;border:0!important;overflow:visible}
.mock-header::after{display:none!important}
.mock-nav{height:108px;display:flex;align-items:center;gap:22px;max-width:1440px}
.brand-neon{position:relative;width:285px;min-width:285px;height:96px;display:flex;align-items:center;z-index:2}
.brand-neon img{width:100%;height:88px;object-fit:contain;filter:brightness(1.18) contrast(1.12) drop-shadow(0 0 5px rgba(32,131,255,.7)) drop-shadow(0 0 15px rgba(10,91,255,.38));animation:logoNeon 4.4s ease-in-out infinite}
.brand-neon::after{content:"";position:absolute;inset:16px 2px;border-radius:50%;background:radial-gradient(ellipse,rgba(20,112,255,.19),transparent 66%);filter:blur(15px);z-index:-1;animation:logoAura 4.4s ease-in-out infinite}
.brand-glow{position:absolute;left:8%;right:8%;bottom:9px;height:2px;background:linear-gradient(90deg,transparent,#42c7ff,#176cff,#42c7ff,transparent);filter:blur(.2px) drop-shadow(0 0 8px #137cff);animation:logoSweep 3.6s linear infinite}
@keyframes logoNeon{0%,100%{filter:brightness(1.08) contrast(1.12) drop-shadow(0 0 4px rgba(32,131,255,.5)) drop-shadow(0 0 11px rgba(10,91,255,.25))}50%{filter:brightness(1.35) contrast(1.16) drop-shadow(0 0 7px rgba(72,183,255,.9)) drop-shadow(0 0 22px rgba(10,91,255,.6))}}
@keyframes logoAura{50%{opacity:.95;transform:scale(1.05)}}
@keyframes logoSweep{0%{transform:translateX(-25%) scaleX(.4);opacity:.25}50%{opacity:1;transform:translateX(0) scaleX(1)}100%{transform:translateX(25%) scaleX(.4);opacity:.25}}
.brand-separator{height:54px;width:1px;background:linear-gradient(transparent,#667489,transparent)}
.brand-tagline{white-space:nowrap;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:#e6edf7}
.brand-tagline i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#1595ff;box-shadow:0 0 7px #1595ff;margin:0 7px 2px}
.mock-main-nav{margin-left:auto;gap:34px;font-size:.82rem;font-weight:800}
.mock-main-nav a{padding:40px 0 30px}
.mock-main-nav a.active{color:#34a7ff;text-shadow:0 0 13px rgba(30,135,255,.55)}
.mock-main-nav a.active::after{width:100%;box-shadow:0 0 8px #148cff}
.nav-neon-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#0a1a31 0,#168cff 23%,#15385f 47%,#0c1b2d 100%)}
.nav-neon-line span{display:block;width:180px;height:2px;background:linear-gradient(90deg,transparent,#70d9ff,transparent);filter:drop-shadow(0 0 8px #178bff);animation:navSweep 8s linear infinite}
@keyframes navSweep{from{transform:translateX(-180px)}to{transform:translateX(calc(100vw + 180px))}}

.mock-hero{position:relative;min-height:540px;overflow:hidden;background:radial-gradient(circle at 74% 40%,rgba(16,94,202,.16),transparent 31%),linear-gradient(118deg,#03070c 0%,#050b15 48%,#07101e 100%)}
.mock-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#168cff,transparent);opacity:.35}
.mock-hero-grid{max-width:1440px;min-height:540px;display:grid;grid-template-columns:.47fr .53fr;align-items:center;gap:18px}
.mock-hero-copy{z-index:3;padding:52px 0 45px}
.mock-kicker{margin:0 0 10px;color:#27a6ff;font-weight:850;letter-spacing:.16em;font-size:.86rem}
.mock-hero h1{font-size:clamp(2.5rem,3.7vw,4.25rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 18px;font-weight:900}
.mock-hero h1 span{color:#328dff;text-shadow:0 0 28px rgba(23,115,255,.24)}
.mock-lead{color:#d3dae4;font-size:1rem;line-height:1.45;margin:0 0 27px}
.mock-benefits{display:flex;align-items:stretch;margin:0 0 27px}
.mock-benefits>div{display:flex;align-items:center;gap:12px;padding:0 25px;border-right:1px solid #283445}
.mock-benefits>div:first-child{padding-left:0}
.mock-benefits>div:last-child{border:0}
.mock-benefits span{display:grid}
.mock-benefits strong{color:#36a6ff;font-size:.9rem}
.mock-benefits small{font-size:.72rem;color:#c1cad7;line-height:1.35}
.benefit-icon{width:42px;height:42px;border:2px solid #158fff;border-radius:50%;display:grid;place-items:center;color:#35bdff;font-size:1.15rem;box-shadow:0 0 15px rgba(21,143,255,.2)}
.mock-actions{display:flex;gap:18px}
.mock-btn{height:48px;min-width:210px;padding:0 18px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:.84rem;border:1px solid #435169;transition:.25s}
.mock-btn-blue{background:linear-gradient(135deg,#0b57d4,#167dff);border-color:#45a8ff;box-shadow:0 0 22px rgba(20,115,255,.25)}
.mock-btn-dark{background:rgba(5,9,15,.72)}
.mock-btn:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(28,139,255,.38)}

.mock-hero-visual{position:relative;height:540px;transform-style:preserve-3d;transition:transform .12s ease-out}
.visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(34,115,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,115,220,.05) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,transparent,#000)}
.hero-pc-image{position:absolute;inset:15px 0 22px 0;margin:0;overflow:hidden;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 24%);filter:drop-shadow(0 20px 35px rgba(0,0,0,.55))}
.hero-pc-image img{width:100%;height:100%;object-fit:cover;object-position:55% 45%;filter:saturate(1.15) contrast(1.08) brightness(.92);animation:heroBreath 7s ease-in-out infinite}
@keyframes heroBreath{50%{transform:scale(1.025);filter:saturate(1.25) contrast(1.09) brightness(1.02)}}
.hero-service-sign{position:absolute;right:5%;top:78px;padding:15px 24px;border:1px solid #198cff;border-radius:7px;background:rgba(2,11,25,.82);display:grid;text-align:center;color:#3caeff;letter-spacing:.14em;line-height:1.7;box-shadow:0 0 24px rgba(16,123,255,.24),inset 0 0 18px rgba(14,92,200,.09);animation:signGlow 4s ease-in-out infinite}
@keyframes signGlow{50%{box-shadow:0 0 38px rgba(16,123,255,.42),inset 0 0 24px rgba(14,92,200,.15)}}
.hero-monitor{position:absolute;right:7%;bottom:75px;width:210px;height:108px;border:1px solid #1a64ae;background:linear-gradient(135deg,#041022,#071a36);display:grid;place-items:center;align-content:center;transform:perspective(600px) rotateY(-8deg);box-shadow:0 0 25px rgba(14,107,255,.15)}
.monitor-logo{font-size:2.5rem;font-style:italic;font-weight:950;color:#208cff;text-shadow:0 0 10px #126eff;letter-spacing:-.1em}
.hero-monitor small{font-size:.55rem;letter-spacing:.35em;color:#5dbbff}
.blue-beam{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#42c7ff,transparent);box-shadow:0 0 12px #147cff;pointer-events:none}
.beam-a{left:2%;right:0;top:65%;animation:beamMove 5s ease-in-out infinite}
.beam-b{left:25%;right:3%;top:24%;animation:beamMove 6s ease-in-out infinite reverse}
@keyframes beamMove{50%{transform:translateY(24px);opacity:.35}}

.mock-services{max-width:1440px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 0 22px;margin-top:-2px}
.mock-service-card{position:relative;min-height:260px;border:1px solid #334155;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#09101b,#05090f);box-shadow:0 12px 35px rgba(0,0,0,.28);transition:.35s}
.mock-service-card:hover{transform:translateY(-7px);border-color:#2498ff;box-shadow:0 15px 45px rgba(0,0,0,.45),0 0 24px rgba(22,126,255,.16)}
.service-photo{height:130px;overflow:hidden}
.service-photo img{width:100%;height:100%;object-fit:cover;transition:.6s}
.mock-service-card:hover .service-photo img{transform:scale(1.055);filter:saturate(1.12)}
.service-card-body{display:grid;grid-template-columns:70px 1fr;gap:13px;padding:18px 22px}
.round-icon{width:58px;height:58px;margin-top:-46px;border:2px solid #1c9dff;border-radius:50%;display:grid;place-items:center;background:#071226;color:#fff;font-size:1.6rem;box-shadow:0 0 22px rgba(20,137,255,.42)}
.service-card-body h2{font-size:1rem;margin:0 0 7px}
.service-card-body p{font-size:.78rem;color:#b6c0cf;line-height:1.45;margin:0 0 8px}
.service-card-body strong{font-size:.7rem;color:#2ba3ff}

.mock-trust{max-width:1440px;border-top:1px solid #263143;border-bottom:1px solid #263143;display:grid;grid-template-columns:repeat(5,1fr);padding:18px 0;margin-bottom:0}
.trust-item{display:flex;gap:12px;align-items:center;padding:0 22px;border-right:1px solid #263143}
.trust-item:last-child{border:0}
.trust-item>b{font-size:1.9rem;color:#249eff;text-shadow:0 0 15px rgba(23,140,255,.55)}
.trust-item span{display:grid}
.trust-item strong{font-size:.75rem}
.trust-item small{font-size:.68rem;color:#a8b3c2;line-height:1.3}

.mock-gallery{max-width:1440px;padding:46px 0 55px}
.mock-section-title{text-align:center;margin-bottom:24px}
.mock-section-title span{color:#188fff;font-size:.7rem;letter-spacing:.18em;font-weight:900}
.mock-section-title h2{font-size:1.65rem;margin:3px 0}
.mock-section-title a{font-size:.7rem;color:#35aaff;font-weight:800}
.mock-gallery-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mock-gallery-row a{height:180px;border-radius:9px;overflow:hidden;border:1px solid #1c2c42;transition:.35s}
.mock-gallery-row img{width:100%;height:100%;object-fit:cover;transition:.55s}
.mock-gallery-row a:hover{transform:translateY(-5px);border-color:#208cff;box-shadow:0 0 24px rgba(22,126,255,.17)}
.mock-gallery-row a:hover img{transform:scale(1.06)}

.mock-contact{border-top:1px solid #182536;border-bottom:1px solid #182536;background:linear-gradient(180deg,#07101a,#08121d)}
.mock-contact-grid{max-width:1200px;display:grid;grid-template-columns:repeat(3,1fr);padding:17px 0}
.mock-contact-grid>div,.mock-contact-grid>a{display:grid;grid-template-columns:52px 1fr;align-items:center;padding:5px 35px;border-right:1px solid #243143}
.mock-contact-grid>*:last-child{border:0}
.contact-icon{grid-row:1/3;font-size:1.6rem;color:#1d98ff}
.mock-contact-grid strong{font-size:.8rem}
.mock-contact-grid small{font-size:.7rem;color:#96a4b7}

.mock-footer{padding:20px 0 13px!important;background:#04080d!important}
.mock-footer-grid{max-width:1440px;display:grid;grid-template-columns:1.35fr .8fr .7fr 1fr;align-items:center;gap:25px}
.footer-brand{display:flex;align-items:center;gap:22px}
.mock-footer .footer-logo{width:165px;margin:0;filter:brightness(1.2) drop-shadow(0 0 8px rgba(24,125,255,.5));animation:logoNeon 4.4s ease-in-out infinite}
.footer-brand>div,.footer-contact,.footer-legal{display:grid;font-size:.68rem;color:#aeb9c7}
.footer-brand span{color:#7f8b9b}
.footer-contact{gap:5px}
.footer-legal{gap:5px}
.footer-copy{font-size:.65rem;color:#7d8999;text-align:right}

@media(max-width:1150px){
  .brand-tagline{display:none}.brand-separator{display:none}.mock-main-nav{gap:17px}
  .mock-hero-grid{grid-template-columns:1fr 1fr}.mock-benefits>div{padding:0 12px}
}
@media(max-width:900px){
  .mock-header{height:80px}.mock-nav{height:78px}.brand-neon{width:230px;min-width:230px;height:72px}.brand-neon img{height:66px}
  .mock-main-nav{top:78px!important}
  .mock-hero-grid{grid-template-columns:1fr}.mock-hero-copy{padding-bottom:0}.mock-hero-visual{height:480px}
  .mock-services{grid-template-columns:1fr;padding-top:20px}.mock-trust{grid-template-columns:1fr 1fr}
  .trust-item{padding:15px;border-bottom:1px solid #263143}.mock-gallery-row{grid-template-columns:1fr 1fr}
  .mock-footer-grid{grid-template-columns:1fr 1fr}.footer-copy{text-align:left}
}
@media(max-width:600px){
  .mock-benefits{display:grid;gap:14px}.mock-benefits>div{border:0;padding:0}
  .mock-actions{display:grid}.mock-btn{width:100%}.mock-hero-visual{height:390px}
  .hero-service-sign{font-size:.7rem;right:2%;top:45px}.hero-monitor{width:150px;height:80px}
  .mock-trust{grid-template-columns:1fr}.mock-gallery-row{grid-template-columns:1fr}
  .mock-contact-grid{grid-template-columns:1fr}.mock-contact-grid>div,.mock-contact-grid>a{border-right:0;border-bottom:1px solid #243143}
  .mock-footer-grid{grid-template-columns:1fr}.footer-brand{align-items:flex-start}
}


/* =========================================================
   V4 — CORRECTIONS VISUELLES ACCUEIL
   Le logo + animation néon V3 restent inchangés.
   ========================================================= */

/* Le fond de la home doit rester sombre partout */
body.site-body.mock-home{
  background:#02060c !important;
  color:#fff !important;
}
body.site-body.mock-home main{
  background:
    radial-gradient(circle at 78% 13%, rgba(19,116,255,.08), transparent 23%),
    linear-gradient(180deg,#02060c 0%,#040913 42%,#02060b 100%) !important;
}

/* HERO : visuel intégré au fond, plus de sensation "image posée" */
.mock-hero{
  min-height:560px !important;
  background:
    radial-gradient(circle at 70% 43%,rgba(18,105,230,.20),transparent 29%),
    radial-gradient(circle at 46% 30%,rgba(14,67,148,.09),transparent 38%),
    linear-gradient(105deg,#02060b 0%,#040913 47%,#07111f 100%) !important;
}
.mock-hero-grid{
  min-height:560px !important;
  grid-template-columns:.43fr .57fr !important;
  gap:0 !important;
  max-width:1500px !important;
}
.mock-hero-copy{
  padding:50px 0 48px !important;
  position:relative;
}
.mock-hero-copy::after{
  content:"";
  position:absolute;
  right:-120px;
  top:4%;
  width:230px;
  height:92%;
  background:linear-gradient(90deg,transparent,rgba(4,9,18,.88));
  pointer-events:none;
  z-index:-1;
}
.mock-hero-visual{
  height:560px !important;
  overflow:visible;
}

/* Le visuel principal devient une vraie "scène" fusionnée */
.hero-pc-image{
  inset:-8px -7vw -4px -2vw !important;
  clip-path:none !important;
  border:0 !important;
  border-radius:0 !important;
  filter:
    saturate(1.12)
    contrast(1.08)
    drop-shadow(-30px 18px 35px rgba(0,0,0,.42)) !important;
  opacity:.98;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.42) 7%, #000 20%, #000 87%, rgba(0,0,0,.75) 94%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.42) 7%, #000 20%, #000 87%, rgba(0,0,0,.75) 94%, transparent 100%);
}
.hero-pc-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,6,12,.98) 0%,rgba(2,6,12,.30) 10%,transparent 25%),
    linear-gradient(180deg,rgba(2,6,12,.20),transparent 18%,transparent 78%,rgba(2,6,12,.45));
}
.hero-pc-image img{
  object-position:50% 48% !important;
  transform:scale(1.08);
  filter:saturate(1.2) contrast(1.1) brightness(.94) !important;
}
@keyframes heroBreath{
  0%,100%{transform:scale(1.08);filter:saturate(1.17) contrast(1.09) brightness(.92)}
  50%{transform:scale(1.105);filter:saturate(1.28) contrast(1.11) brightness(1.01)}
}

/* Le panneau assemblage/gaming/dépannage se pose dans la scène */
.hero-service-sign{
  right:4% !important;
  top:72px !important;
  z-index:5;
  background:linear-gradient(180deg,rgba(2,12,28,.86),rgba(3,8,18,.72)) !important;
  backdrop-filter:blur(8px);
}
.hero-monitor{
  right:4% !important;
  bottom:82px !important;
  z-index:5;
  background:
    radial-gradient(circle at 50% 45%,rgba(27,119,255,.13),transparent 55%),
    linear-gradient(135deg,rgba(3,15,36,.94),rgba(4,11,22,.93)) !important;
}

/* Cartes services collées visuellement au hero comme sur la maquette */
.mock-services{
  max-width:1440px !important;
  margin-top:-8px !important;
  padding:0 0 18px !important;
  background:transparent !important;
}
.mock-service-card{
  background:
    linear-gradient(180deg,rgba(10,17,29,.96),rgba(3,7,13,.97)) !important;
  border-color:#26364c !important;
}
.mock-service-card:hover{
  border-color:#279dff !important;
}

/* Bandeau 5 points : sombre et lisible */
.mock-trust{
  color:#fff !important;
  background:
    linear-gradient(180deg,rgba(5,11,19,.98),rgba(4,8,14,.98)) !important;
  border-top:1px solid #243247 !important;
  border-bottom:1px solid #243247 !important;
  padding:17px 8px !important;
  margin-top:0 !important;
}
.trust-item strong{
  color:#f3f7fc !important;
}
.trust-item small{
  color:#9eabba !important;
}
.trust-item>b{
  color:#26a3ff !important;
}

/* Réalisations : plus jamais blanc sur blanc */
.mock-gallery{
  max-width:none !important;
  width:100% !important;
  padding:52px max(20px,calc((100% - 1440px)/2)) 58px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(18,103,226,.08),transparent 31%),
    linear-gradient(180deg,#03070c 0%,#06101b 58%,#040912 100%) !important;
  border-top:1px solid rgba(37,97,164,.20);
  border-bottom:1px solid rgba(37,97,164,.20);
}
.mock-section-title span{
  color:#278fff !important;
}
.mock-section-title h2{
  color:#f5f8fc !important;
  text-shadow:0 0 24px rgba(20,114,255,.10);
}
.mock-section-title a{
  color:#38a9ff !important;
}
.mock-gallery-row a{
  background:#07101b !important;
  border-color:#23354d !important;
}

/* Contact + footer toujours dans le même univers sombre */
.mock-contact{
  background:linear-gradient(180deg,#07111d,#040912) !important;
}
.mock-footer{
  background:#03070c !important;
}

/* Lumières discrètes qui traversent la home */
.mock-home main::before{
  content:"";
  position:fixed;
  width:420px;
  height:420px;
  left:-180px;
  top:38vh;
  border-radius:50%;
  background:rgba(18,111,255,.06);
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}
.mock-home main > *{
  position:relative;
  z-index:1;
}

/* Liseré animé entre hero et cartes */
.mock-services::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:-2px;
  height:1px;
  background:linear-gradient(90deg,transparent,#1e8eff 35%,#57ccff 50%,#1e8eff 65%,transparent);
  filter:drop-shadow(0 0 7px #178cff);
  animation:serviceLinePulse 4.5s ease-in-out infinite;
}
@keyframes serviceLinePulse{
  0%,100%{opacity:.28;transform:scaleX(.82)}
  50%{opacity:.95;transform:scaleX(1)}
}

/* responsive */
@media(max-width:900px){
  .mock-hero-grid{grid-template-columns:1fr !important}
  .mock-hero-visual{height:470px !important}
  .hero-pc-image{inset:0 -10vw 0 -8vw !important}
  .mock-hero-copy::after{display:none}
}
@media(max-width:600px){
  .mock-hero-visual{height:390px !important}
  .hero-pc-image{inset:0 -32vw 0 -10vw !important}
}

.hero-scene-fade{
  position:absolute;
  inset:-6% -10% -8% -14%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse at 54% 50%,rgba(19,110,255,.12),transparent 40%),
    linear-gradient(90deg,#030811 0%,rgba(3,8,17,.68) 13%,transparent 31%,transparent 86%,rgba(3,7,14,.55) 100%);
}


/* =========================================================
   V5 — PLUS AÉRÉ, PLUS CLAIR, PLUS DISTINCT DE SAFE ACTIVITY
   Animation néon du logo conservée STRICTEMENT.
   ========================================================= */

.mock-home{
  --dxf-bg:#080b0f;
  --dxf-panel:#11171d;
  --dxf-panel-2:#151d24;
  --dxf-line:#33404b;
  --dxf-text:#d8dee5;
  --dxf-muted:#9ca6af;
  --dxf-accent:#4fb7c7;
  --dxf-accent-soft:#78cdd8;
  background:
    radial-gradient(circle at 72% 15%,rgba(64,128,145,.08),transparent 24%),
    linear-gradient(180deg,#080b0f 0%,#0c1116 48%,#090d11 100%) !important;
}

/* Plus de respiration générale */
.mock-nav,
.mock-hero-grid,
.mock-services,
.mock-trust,
.mock-gallery,
.mock-contact-grid,
.mock-footer-grid{
  max-width:1480px !important;
}

.mock-header{
  background:linear-gradient(180deg,#0a0d11,#080b0f) !important;
  border-bottom:1px solid rgba(130,156,170,.16) !important;
}

.brand-tagline{color:#aeb8c0 !important}
.mock-main-nav a{color:#b9c2ca !important}
.mock-main-nav a.active{color:#dfe7ec !important;text-shadow:none !important}
.mock-main-nav a.active::after{
  background:linear-gradient(90deg,#77848d,#59b6c4) !important;
  box-shadow:0 0 8px rgba(79,183,199,.38) !important;
}

/* HERO - image intégrée, sans "bloc posé" */
.mock-hero{
  min-height:625px !important;
  background:
    radial-gradient(ellipse at 73% 42%,rgba(62,115,128,.13),transparent 33%),
    linear-gradient(110deg,#090c10 0%,#0d1218 44%,#10171e 100%) !important;
  padding-bottom:34px;
}
.mock-hero-grid{
  min-height:625px !important;
  grid-template-columns:.46fr .54fr !important;
  gap:54px !important;
  padding-top:24px;
  padding-bottom:22px;
}
.mock-hero-copy{
  padding:64px 0 60px !important;
}
.mock-kicker{
  color:#7fc6d1 !important;
  letter-spacing:.22em !important;
  font-size:.78rem !important;
}
.mock-hero h1{
  color:#d5dbe1 !important;
  font-weight:820 !important;
  letter-spacing:-.025em !important;
  font-size:clamp(2.8rem,3.55vw,4.25rem) !important;
}
.mock-hero h1 span{
  color:#9eaeb8 !important;
  text-shadow:none !important;
}
.mock-lead{
  color:#aeb8c0 !important;
  max-width:610px;
  line-height:1.65 !important;
  margin-top:24px !important;
  margin-bottom:36px !important;
}
.mock-benefits{
  margin-bottom:38px !important;
  gap:4px;
}
.mock-benefits>div{
  padding:0 30px !important;
}
.mock-benefits>div:first-child{padding-left:0 !important}
.mock-benefits strong{color:#c8d2d9 !important;font-weight:760}
.mock-benefits small{color:#89959e !important}
.benefit-icon{
  color:#9bcbd2 !important;
  border-color:#526c75 !important;
  box-shadow:none !important;
  background:#10171c !important;
}
.mock-actions{gap:16px !important}
.mock-btn{
  min-width:220px !important;
  height:52px !important;
  border-radius:8px !important;
}
.mock-btn-blue{
  background:linear-gradient(135deg,#28343d,#364953) !important;
  border-color:#5d7680 !important;
  box-shadow:0 10px 30px rgba(0,0,0,.24) !important;
}
.mock-btn-blue:hover{
  border-color:#72c6d1 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 0 1px rgba(114,198,209,.14) inset !important;
}
.mock-btn-dark{
  background:#0c1116 !important;
  border-color:#3c4650 !important;
}

/* Vraie incrustation visuelle du PC */
.mock-hero-visual{
  height:575px !important;
  overflow:hidden !important;
  border-radius:42px 0 42px 0;
  position:relative;
  background:
    radial-gradient(circle at 56% 48%,rgba(48,100,114,.12),transparent 36%),
    linear-gradient(90deg,rgba(12,17,22,.95) 0%,rgba(12,17,22,.32) 12%,transparent 31%);
}
.mock-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(90deg,#0d1218 0%,rgba(13,18,24,.70) 7%,transparent 24%,transparent 86%,rgba(13,18,24,.32) 100%),
    linear-gradient(180deg,rgba(13,18,24,.28),transparent 18%,transparent 80%,rgba(13,18,24,.45));
}
.hero-pc-image{
  inset:-2% -2% -3% -8% !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.60) 11%,#000 26%,#000 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.60) 11%,#000 26%,#000 100%) !important;
  filter:none !important;
}
.hero-pc-image img{
  object-fit:cover !important;
  object-position:center 48% !important;
  transform:scale(1.03) !important;
  filter:saturate(.92) contrast(1.03) brightness(.86) !important;
  animation:heroBreathSoft 9s ease-in-out infinite !important;
}
@keyframes heroBreathSoft{
  0%,100%{transform:scale(1.03);filter:saturate(.92) contrast(1.03) brightness(.86)}
  50%{transform:scale(1.055);filter:saturate(.98) contrast(1.04) brightness(.91)}
}
.hero-scene-fade{
  background:
    radial-gradient(ellipse at 58% 46%,rgba(84,148,160,.08),transparent 43%),
    linear-gradient(90deg,#0d1218 0%,rgba(13,18,24,.68) 12%,transparent 33%,transparent 100%) !important;
}
.visual-grid{opacity:.22 !important}

/* Suppression totale de l'ancienne petite bande lumineuse animée */
.blue-beam,.beam-a,.beam-b{display:none !important}

/* Panneau plus discret, davantage intégré */
.hero-service-sign{
  color:#bed8dd !important;
  border-color:#496670 !important;
  background:rgba(13,20,26,.72) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.28) !important;
  animation:none !important;
  letter-spacing:.12em !important;
}
.hero-monitor{
  border-color:#425862 !important;
  box-shadow:0 12px 34px rgba(0,0,0,.28) !important;
}
.monitor-logo{
  color:#8fc6ce !important;
  text-shadow:none !important;
}

/* SERVICES - plus d'espace + pas de doublon */
.mock-services{
  gap:34px !important;
  padding:46px 0 46px !important;
  margin-top:0 !important;
}
.mock-services::before{display:none !important}
.mock-service-card{
  min-height:335px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#151b21,#0e1318) !important;
  border:1px solid #2a353e !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;
}
.mock-service-card:hover{
  transform:translateY(-5px) !important;
  border-color:#58737c !important;
  box-shadow:0 24px 48px rgba(0,0,0,.25) !important;
}
.service-photo{
  height:190px !important;
  background:#0c1115;
}
.service-photo img{
  filter:saturate(.92) brightness(.90);
}
.mock-service-card:hover .service-photo img{
  transform:scale(1.035) !important;
  filter:saturate(1) brightness(.96) !important;
}
.service-card-body{
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding:28px 30px 30px !important;
}
.round-icon{
  display:none !important; /* retire le doublon visible sur dépannage/pro */
}
.service-card-body h2{
  color:#d3dbe1 !important;
  font-size:1.02rem !important;
  letter-spacing:.015em;
}
.service-card-body p{
  color:#8f9ba4 !important;
  font-size:.82rem !important;
  line-height:1.62 !important;
}
.service-card-body strong{
  color:#83c0c9 !important;
  font-size:.72rem !important;
}

/* Bandeau de confiance plus clair, mais sans blanc agressif */
.mock-trust{
  margin-top:18px !important;
  margin-bottom:30px !important;
  padding:28px 10px !important;
  border-radius:16px;
  background:linear-gradient(180deg,#131a20,#10161b) !important;
  border:1px solid #2a343c !important;
}
.trust-item{padding:0 30px !important;border-right-color:#34404a !important}
.trust-item>b{
  color:#7ebfc9 !important;
  text-shadow:none !important;
}
.trust-item strong{color:#cad3da !important}
.trust-item small{color:#84919a !important}

/* Réalisations : claires, distinctes, plus aérées */
.mock-gallery{
  margin-top:52px !important;
  padding-top:72px !important;
  padding-bottom:80px !important;
  background:
    linear-gradient(180deg,#11171c 0%,#161e24 48%,#11171c 100%) !important;
  border-top:1px solid #29343d !important;
  border-bottom:1px solid #29343d !important;
}
.mock-section-title{margin-bottom:36px !important}
.mock-section-title span{
  color:#79bec8 !important;
}
.mock-section-title h2{
  color:#d4dce2 !important;
  font-weight:760 !important;
  letter-spacing:-.015em;
}
.mock-section-title a{
  color:#93cbd2 !important;
}
.mock-gallery-row{
  gap:22px !important;
}
.mock-gallery-row a{
  height:210px !important;
  border-radius:15px !important;
  border-color:#33404a !important;
  background:#0e1318 !important;
}
.mock-gallery-row a:hover{
  border-color:#64818b !important;
  box-shadow:0 18px 36px rgba(0,0,0,.22) !important;
}

/* Contact/footer un peu plus clair */
.mock-contact{
  margin-top:0 !important;
  background:#0d1318 !important;
  border-color:#2d3942 !important;
}
.mock-contact-grid{padding:24px 0 !important}
.mock-contact-grid strong{color:#d0d8de !important}
.mock-contact-grid small{color:#85929b !important}
.contact-icon{color:#78bbc5 !important}
.mock-footer{background:#090d11 !important}
.footer-brand>div,.footer-contact,.footer-legal{color:#aab4bc !important}

/* Responsive V5 */
@media(max-width:900px){
  .mock-hero{padding-bottom:20px}
  .mock-hero-grid{gap:26px !important}
  .mock-hero-visual{height:490px !important;border-radius:28px}
  .mock-services{padding-top:34px !important}
}
@media(max-width:600px){
  .mock-hero-copy{padding-top:42px !important}
  .mock-hero-visual{height:390px !important}
  .mock-benefits{gap:18px !important}
  .mock-services{gap:22px !important}
  .service-photo{height:220px !important}
  .mock-trust{margin-inline:14px !important}
  .mock-gallery{margin-top:34px !important}
}


/* =========================================================
   V6 — HERO INTÉGRÉ, PLUS LUMINEUX ET PLUS PROFESSIONNEL
   Le logo néon de l'en-tête reste inchangé.
   ========================================================= */

.mock-home{
  --dxf-bg:#0b1015;
  --dxf-panel:#121a21;
  --dxf-panel-soft:#182229;
  --dxf-border:#34434d;
  --dxf-text:#e2e7eb;
  --dxf-muted:#a7b0b7;
  --dxf-accent:#76b7c1;
  background:#0b1015 !important;
}

/* Hero pleine largeur, tout intégré dans une seule scène */
.mock-hero{
  position:relative !important;
  min-height:650px !important;
  padding:0 !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,rgba(11,16,21,.98) 0%,rgba(11,16,21,.94) 30%,rgba(11,16,21,.62) 49%,rgba(11,16,21,.18) 68%,rgba(11,16,21,.08) 100%),
    radial-gradient(circle at 72% 36%,rgba(77,132,146,.18),transparent 28%),
    linear-gradient(180deg,#0d1319 0%,#111a21 55%,#0c1217 100%) !important;
}
.mock-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:52px 52px;
  opacity:.34;
}
.mock-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:120px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(11,16,21,.68) 58%,#0b1015);
}

.mock-hero-grid{
  position:relative !important;
  z-index:2 !important;
  max-width:1500px !important;
  min-height:650px !important;
  display:grid !important;
  grid-template-columns:minmax(520px,.48fr) minmax(0,.52fr) !important;
  align-items:center !important;
  gap:48px !important;
  padding:34px 44px 58px !important;
}

/* Texte mieux respiré */
.mock-hero-copy{
  padding:30px 0 34px !important;
  z-index:5 !important;
}
.mock-kicker{
  color:#9fcbd2 !important;
  font-size:.82rem !important;
  letter-spacing:.22em !important;
  margin-bottom:18px !important;
}
.mock-hero h1{
  color:#edf1f4 !important;
  font-size:clamp(3.1rem,4vw,4.85rem) !important;
  line-height:.98 !important;
  max-width:650px !important;
  margin-bottom:28px !important;
}
.mock-hero h1 span{
  color:#bdc9cf !important;
}
.mock-lead{
  color:#bec7cd !important;
  font-size:1.04rem !important;
  line-height:1.72 !important;
  max-width:650px !important;
  margin-bottom:38px !important;
}
.mock-benefits{
  gap:0 !important;
  margin-bottom:38px !important;
}
.mock-benefits>div{
  min-width:0;
  padding:0 28px !important;
}
.mock-benefits>div:first-child{padding-left:0 !important}
.mock-benefits>div:last-child{padding-right:0 !important}
.benefit-icon{
  width:46px !important;height:46px !important;
  background:#162127 !important;
  border-color:#64818b !important;
  color:#add4db !important;
}
.mock-benefits strong{color:#e1e7ea !important}
.mock-benefits small{color:#9faab2 !important}
.mock-actions{gap:18px !important}
.mock-btn{min-width:238px !important;height:54px !important}
.mock-btn-blue{
  background:linear-gradient(135deg,#35464f,#455d67) !important;
  border-color:#6f8c96 !important;
}
.mock-btn-dark{
  background:rgba(13,19,24,.82) !important;
  border-color:#48555f !important;
}

/* Visuel à droite = scène fondue dans la page, pas une image rectangulaire */
.mock-hero-visual{
  position:absolute !important;
  z-index:2 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:45% !important;
  width:auto !important;
  height:auto !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:transparent !important;
  pointer-events:auto;
}
.hero-scene-fade{
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,#0b1015 0%,rgba(11,16,21,.94) 9%,rgba(11,16,21,.62) 19%,rgba(11,16,21,.18) 34%,transparent 52%),
    linear-gradient(180deg,rgba(11,16,21,.10),transparent 20%,transparent 73%,rgba(11,16,21,.68) 100%) !important;
}
.hero-pc-image{
  position:absolute !important;
  inset:-3% -2% -4% -5% !important;
  margin:0 !important;
  z-index:1 !important;
  opacity:.98 !important;
  filter:none !important;
  clip-path:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.hero-pc-image::before{display:none !important}
.hero-pc-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 44% !important;
  transform:scale(1.055) !important;
  filter:saturate(.96) contrast(1.05) brightness(1.02) !important;
  animation:heroBreathPro 10s ease-in-out infinite !important;
}
@keyframes heroBreathPro{
  0%,100%{transform:scale(1.055);filter:saturate(.96) contrast(1.05) brightness(1.02)}
  50%{transform:scale(1.075);filter:saturate(1) contrast(1.06) brightness(1.07)}
}

/* On garde les éléments de la maquette, mais plus discrets et lisibles */
.hero-service-sign{
  top:85px !important;
  right:5.5% !important;
  z-index:7 !important;
  padding:16px 24px !important;
  color:#d2e3e7 !important;
  background:rgba(15,23,29,.84) !important;
  border:1px solid rgba(124,168,178,.55) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
  animation:none !important;
}
.hero-monitor{
  right:5.5% !important;
  bottom:92px !important;
  z-index:7 !important;
  width:235px !important;
  height:120px !important;
  background:rgba(14,22,28,.88) !important;
  border:1px solid rgba(112,150,160,.45) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.3) !important;
}
.monitor-logo{color:#afd5db !important}
.hero-monitor small{color:#7fa9b2 !important}

/* Aucune bande bleue animée dans le visuel */
.blue-beam,.beam-a,.beam-b,.hero-scanline{display:none !important}

/* Services un peu plus clairs et espacés */
.mock-services{
  position:relative;
  z-index:3;
  max-width:1480px !important;
  padding:54px 34px 58px !important;
  gap:34px !important;
}
.mock-service-card{
  background:linear-gradient(180deg,#172128,#10171c) !important;
  border-color:#35434c !important;
  box-shadow:0 16px 42px rgba(0,0,0,.18) !important;
}
.service-photo img{filter:saturate(.96) brightness(.98) !important}
.service-card-body h2{color:#e1e6e9 !important}
.service-card-body p{color:#aeb8bf !important}

/* Bandeau avantages plus clair et professionnel */
.mock-trust{
  max-width:1440px !important;
  background:linear-gradient(180deg,#151e24,#11181d) !important;
  border-color:#35424a !important;
  padding:30px 12px !important;
  margin-bottom:52px !important;
}
.trust-item strong{color:#e0e5e8 !important}
.trust-item small{color:#a1abb2 !important}

/* Réalisations */
.mock-gallery{
  margin-top:0 !important;
  padding-top:70px !important;
  background:linear-gradient(180deg,#12191f 0%,#172128 45%,#10171c 100%) !important;
}
.mock-section-title h2{color:#e3e8eb !important}
.mock-gallery-row a{height:230px !important}

/* Responsive */
@media(max-width:1100px){
  .mock-hero-grid{
    grid-template-columns:1fr !important;
    padding-right:34px !important;
  }
  .mock-hero-visual{
    position:absolute !important;
    left:40% !important;
    opacity:.52;
  }
  .mock-hero-copy{
    position:relative;
    z-index:8 !important;
    max-width:720px;
  }
}
@media(max-width:800px){
  .mock-hero{
    min-height:auto !important;
  }
  .mock-hero-grid{
    min-height:760px !important;
    padding:38px 24px 52px !important;
  }
  .mock-hero-visual{
    left:28% !important;
    opacity:.34;
  }
  .mock-hero-copy{
    max-width:100%;
  }
}
@media(max-width:600px){
  .mock-hero-grid{
    min-height:760px !important;
    padding:28px 20px 48px !important;
  }
  .mock-hero-visual{
    left:15% !important;
    opacity:.28;
  }
  .mock-hero h1{font-size:clamp(2.7rem,13vw,4rem) !important}
  .mock-actions{display:grid !important}
  .mock-btn{width:100% !important}
}


/* =========================================================
   V7 — HERO PLEINE LARGEUR + SITE PLUS CLAIR
   Animation du logo néon conservée inchangée.
   ========================================================= */

.mock-home{
  background:
    radial-gradient(circle at 72% 18%,rgba(92,145,157,.11),transparent 28%),
    linear-gradient(180deg,#0e1419 0%,#121a20 48%,#0d1318 100%) !important;
}

/* En-tête légèrement plus clair sans toucher au logo */
.mock-header{
  background:linear-gradient(180deg,#0d1217,#0a0f14) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}

/* Hero vraiment plein écran */
.mock-hero{
  width:100vw !important;
  max-width:none !important;
  min-height:650px !important;
  margin:0 !important;
  background:
    radial-gradient(circle at 73% 38%,rgba(81,137,151,.18),transparent 31%),
    linear-gradient(100deg,#0d1318 0%,#111920 42%,#17222a 100%) !important;
}

.mock-hero-grid{
  width:min(1600px,calc(100% - 40px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  min-height:650px !important;
  grid-template-columns:minmax(560px,.46fr) minmax(0,.54fr) !important;
  gap:44px !important;
  padding-left:10px !important;
  padding-right:10px !important;
}

/* Le visuel remplit réellement toute la partie droite jusqu'au bord de l'écran */
.mock-hero-visual{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:46% !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}

.hero-pc-image{
  inset:-2% -1% -3% -4% !important;
}

.hero-pc-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 44% !important;
  filter:saturate(1.0) contrast(1.02) brightness(1.08) !important;
}

.hero-scene-fade{
  background:
    linear-gradient(90deg,#111920 0%,rgba(17,25,32,.92) 9%,rgba(17,25,32,.55) 19%,rgba(17,25,32,.12) 37%,transparent 58%),
    linear-gradient(180deg,rgba(17,25,32,.06),transparent 24%,transparent 78%,rgba(13,19,24,.48) 100%) !important;
}

/* Texte plus lumineux */
.mock-kicker{color:#9bd0d8 !important}
.mock-hero h1{color:#f0f3f5 !important}
.mock-hero h1 span{color:#cfd8dd !important}
.mock-lead{color:#c4ccd2 !important}
.mock-benefits strong{color:#e8edef !important}
.mock-benefits small{color:#aeb7be !important}
.benefit-icon{
  background:#1b272d !important;
  border-color:#6f8d97 !important;
  color:#b8d9de !important;
}

/* Boutons plus clairs */
.mock-btn-blue{
  background:linear-gradient(135deg,#455a64,#5f7983) !important;
  border-color:#7f9da7 !important;
  color:#fff !important;
}
.mock-btn-dark{
  background:#182127 !important;
  border-color:#53616a !important;
  color:#eef2f4 !important;
}

/* Services : plus de clarté et d'air */
.mock-services{
  padding-top:64px !important;
  padding-bottom:68px !important;
  gap:38px !important;
}
.mock-service-card{
  background:linear-gradient(180deg,#1a252c,#121a20) !important;
  border-color:#3d4b54 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.16) !important;
}
.service-card-body h2{color:#eef2f4 !important}
.service-card-body p{color:#b3bdc3 !important}
.service-card-body strong{color:#8fc7cf !important}

/* Bandeau avantages */
.mock-trust{
  background:linear-gradient(180deg,#1a252c,#141d23) !important;
  border-color:#43515a !important;
}
.trust-item strong{color:#e9edef !important}
.trust-item small{color:#aab4bb !important}
.trust-item>b{color:#8ec4cc !important}

/* Galerie plus claire */
.mock-gallery{
  background:
    radial-gradient(circle at 50% 0%,rgba(85,143,156,.09),transparent 35%),
    linear-gradient(180deg,#172128 0%,#1d2930 50%,#141d23 100%) !important;
}
.mock-section-title h2{color:#f0f3f4 !important}
.mock-section-title span,
.mock-section-title a{color:#93cbd2 !important}

/* Contact et footer */
.mock-contact{
  background:linear-gradient(180deg,#182229,#11191f) !important;
}
.mock-footer{
  background:#0d1318 !important;
}

/* Cartes/images légèrement moins sombres */
.service-photo img,
.mock-gallery-row img{
  filter:saturate(.98) brightness(1.03) !important;
}

/* Séparations plus douces */
.mock-services,
.mock-gallery,
.mock-contact{
  border-color:rgba(123,151,163,.18) !important;
}

@media(max-width:1200px){
  .mock-hero-grid{
    width:min(100% - 28px,1500px) !important;
    grid-template-columns:minmax(500px,.5fr) minmax(0,.5fr) !important;
  }
  .mock-hero-visual{left:48% !important}
}

@media(max-width:900px){
  .mock-hero{
    min-height:760px !important;
  }
  .mock-hero-grid{
    grid-template-columns:1fr !important;
    width:min(100% - 28px,900px) !important;
  }
  .mock-hero-visual{
    left:32% !important;
    opacity:.42 !important;
  }
  .mock-hero-copy{
    position:relative !important;
    z-index:8 !important;
    max-width:720px !important;
  }
}

@media(max-width:600px){
  .mock-hero-visual{
    left:12% !important;
    opacity:.30 !important;
  }
}


/* =========================================================
   V8 — HEADER ÉPURÉ + HERO SANS RECTANGLES
   Animation néon du logo conservée.
   ========================================================= */

/* HEADER : logo à gauche + navigation claire, sans répétition de mots */
.mock-header{
  height:102px !important;
  background:
    linear-gradient(180deg,#11181e 0%,#0d1318 100%) !important;
  border-bottom:1px solid rgba(121,151,162,.25) !important;
}
.mock-nav{
  height:100px !important;
  max-width:1540px !important;
  padding:0 34px !important;
  gap:34px !important;
}
.brand-neon{
  width:300px !important;
  min-width:300px !important;
  height:92px !important;
}
.brand-neon img{height:82px !important}

/* anciennes accroches masquées au cas où */
.brand-separator,.brand-tagline{display:none !important}

.mock-main-nav{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:36px !important;
  font-size:.80rem !important;
  font-weight:750 !important;
  letter-spacing:.025em !important;
}
.mock-main-nav a{
  color:#c4cdd3 !important;
  padding:39px 0 31px !important;
  white-space:nowrap !important;
}
.mock-main-nav a:hover{
  color:#fff !important;
  text-shadow:none !important;
}
.mock-main-nav a.active{
  color:#fff !important;
}
.mock-main-nav a.active::after{
  height:2px !important;
  background:linear-gradient(90deg,transparent,#8bcbd3,transparent) !important;
  box-shadow:none !important;
}
.nav-neon-line{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(117,177,188,.45),transparent) !important;
}
.nav-neon-line span{
  background:linear-gradient(90deg,transparent,#a4dbe2,transparent) !important;
  filter:drop-shadow(0 0 5px rgba(126,202,213,.45)) !important;
}

/* HERO : une seule image fondue, aucun panneau rectangulaire par-dessus */
.hero-service-sign,.hero-monitor{
  display:none !important;
}

.mock-hero{
  min-height:670px !important;
  background:
    radial-gradient(ellipse at 72% 38%,rgba(103,153,164,.17),transparent 34%),
    linear-gradient(100deg,#11181e 0%,#151e25 47%,#18242c 100%) !important;
}
.mock-hero-grid{
  min-height:670px !important;
  width:min(1580px,calc(100% - 48px)) !important;
  padding:42px 24px 62px !important;
  grid-template-columns:minmax(560px,.47fr) minmax(0,.53fr) !important;
  gap:50px !important;
}
.mock-hero-visual{
  left:47% !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  overflow:hidden !important;
}

/* masque continu : fini les rectangles sombres entre gauche/droite */
.hero-scene-fade{
  inset:0 !important;
  background:
    linear-gradient(90deg,
      #151e25 0%,
      rgba(21,30,37,.97) 5%,
      rgba(21,30,37,.86) 12%,
      rgba(21,30,37,.58) 20%,
      rgba(21,30,37,.26) 30%,
      rgba(21,30,37,.06) 42%,
      transparent 56%) !important;
}
.mock-hero-visual::before{
  background:
    linear-gradient(90deg,
      rgba(21,30,37,.92) 0%,
      rgba(21,30,37,.45) 13%,
      transparent 31%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(17,24,30,.10),
      transparent 20%,
      transparent 78%,
      rgba(17,24,30,.42)) !important;
}
.hero-pc-image{
  inset:-2% 0 -3% -6% !important;
}
.hero-pc-image img{
  object-position:center 46% !important;
  filter:saturate(.94) contrast(1.01) brightness(1.12) !important;
}

/* Le contenu gauche est plus clair et moins massif */
.mock-hero-copy{
  padding:40px 0 !important;
}
.mock-kicker{
  color:#a8cdd3 !important;
}
.mock-hero h1{
  color:#f2f4f5 !important;
  font-size:clamp(2.9rem,3.75vw,4.45rem) !important;
}
.mock-hero h1 span{
  color:#d0d9de !important;
}
.mock-lead{
  color:#c5cdd2 !important;
}
.mock-benefits>div{
  border-right-color:#46545d !important;
}
.benefit-icon{
  background:#202d34 !important;
  border-color:#718e98 !important;
}

/* Plus de clarté sur le reste du site */
.mock-services{
  background:#11181e !important;
  padding-top:70px !important;
  padding-bottom:74px !important;
}
.mock-service-card{
  background:linear-gradient(180deg,#202c33,#172027) !important;
  border-color:#46545c !important;
}
.mock-service-card:hover{
  background:linear-gradient(180deg,#25333b,#1a252c) !important;
  border-color:#78949e !important;
}
.service-card-body p{
  color:#bec6cb !important;
}

.mock-trust{
  background:linear-gradient(180deg,#202b32,#192229) !important;
  border-color:#4a5961 !important;
}
.trust-item{
  border-right-color:#4a5961 !important;
}

.mock-gallery{
  background:
    radial-gradient(circle at 50% 0%,rgba(112,163,174,.09),transparent 35%),
    linear-gradient(180deg,#1a242b,#222f36 48%,#182229) !important;
}
.mock-gallery-row a{
  border-color:#4a5962 !important;
}

.mock-contact{
  background:linear-gradient(180deg,#1b262d,#141d23) !important;
}
.mock-footer{
  background:#10171c !important;
}

/* Responsive header */
@media(max-width:1150px){
  .mock-main-nav{gap:20px !important;font-size:.74rem !important}
  .brand-neon{width:260px !important;min-width:260px !important}
}
@media(max-width:900px){
  .mock-header{height:82px !important}
  .mock-nav{height:80px !important;padding:0 20px !important}
  .brand-neon{width:225px !important;min-width:225px !important;height:74px !important}
  .brand-neon img{height:66px !important}
  .mock-main-nav{top:81px !important}
  .mock-hero-visual{left:35% !important}
}


/* =========================================================
   V9 — FUSION CONTINUE / SUPPRESSION DES GROS RECTANGLES
   ========================================================= */

/* Une seule toile continue pour toute la page */
.mock-home main{
  overflow:hidden !important;
  background:
    radial-gradient(ellipse at 78% 10%,rgba(87,137,149,.13),transparent 28%),
    radial-gradient(ellipse at 18% 48%,rgba(71,107,117,.07),transparent 31%),
    linear-gradient(180deg,#11191f 0%,#162128 34%,#18242b 63%,#121a20 100%) !important;
}

/* HERO : aucune cassure rectangulaire entre texte et image */
.mock-hero{
  background:transparent !important;
  isolation:isolate;
}
.mock-hero::before{
  background:
    radial-gradient(ellipse at 73% 42%,rgba(104,164,177,.12),transparent 36%),
    linear-gradient(90deg,rgba(18,27,33,.45),transparent 55%) !important;
  opacity:1 !important;
}
.mock-hero::after{
  height:170px !important;
  background:linear-gradient(180deg,transparent,rgba(20,30,36,.42),transparent) !important;
}
.mock-hero-grid{
  background:transparent !important;
}
.mock-hero-copy{
  background:transparent !important;
}

/* Suppression des couches qui formaient les gros rectangles verticaux */
.mock-hero-visual{
  background:transparent !important;
  overflow:hidden !important;
}
.mock-hero-visual::before{
  background:
    linear-gradient(90deg,
      rgba(20,30,36,.96) 0%,
      rgba(20,30,36,.78) 7%,
      rgba(20,30,36,.48) 14%,
      rgba(20,30,36,.22) 23%,
      rgba(20,30,36,.06) 33%,
      transparent 45%),
    linear-gradient(180deg,
      rgba(17,25,31,.10) 0%,
      transparent 16%,
      transparent 82%,
      rgba(18,27,33,.34) 100%) !important;
}
.hero-scene-fade{
  background:
    linear-gradient(90deg,
      rgba(20,30,36,1) 0%,
      rgba(20,30,36,.82) 8%,
      rgba(20,30,36,.52) 16%,
      rgba(20,30,36,.24) 25%,
      rgba(20,30,36,.08) 34%,
      transparent 46%) !important;
}
.hero-pc-image{
  inset:-4% -2% -5% -10% !important;
}
.hero-pc-image img{
  filter:saturate(.94) contrast(1.01) brightness(1.13) !important;
}

/* SERVICES : la section n'est plus un grand rectangle dans la page */
.mock-services{
  position:relative !important;
  max-width:1480px !important;
  background:transparent !important;
  padding:74px 34px 82px !important;
}
.mock-services::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(112,158,168,.055),transparent 45%),
    linear-gradient(180deg,rgba(20,30,36,.18),rgba(24,36,43,.34),rgba(20,30,36,.12));
  pointer-events:none;
}

/* Les cartes restent identifiables, mais mieux fondues */
.mock-service-card{
  overflow:hidden !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,rgba(38,52,60,.90),rgba(25,36,43,.92)) !important;
  border:1px solid rgba(118,143,153,.42) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.14) !important;
}
.service-photo{
  height:205px !important;
  overflow:hidden !important;
  background:#172128 !important;
}
.service-photo::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:54px;
  background:linear-gradient(180deg,transparent,rgba(31,44,52,.96));
  pointer-events:none;
}
.service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.02);
  filter:saturate(.94) brightness(1.08) !important;
}
.mock-service-card:hover .service-photo img{
  transform:scale(1.055) !important;
}

/* Plus aucun ancien pictogramme rond par-dessus les photos */
.round-icon{
  display:none !important;
}

/* Bande avantages : intégrée, sans grand pavé */
.mock-trust{
  position:relative !important;
  max-width:1440px !important;
  background:rgba(35,49,57,.58) !important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(119,143,153,.30) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.10) !important;
}

/* Réalisations : fond pleine largeur sans rectangle de largeur "shell" */
.mock-gallery{
  position:relative !important;
  max-width:1480px !important;
  background:transparent !important;
}
.mock-gallery::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 10%,rgba(102,153,164,.08),transparent 42%),
    linear-gradient(180deg,rgba(28,41,48,.26),rgba(35,49,57,.40),rgba(24,35,42,.18));
}

/* Contact lui aussi en pleine continuité */
.mock-contact{
  background:rgba(26,38,45,.58) !important;
  border-top:1px solid rgba(121,145,154,.20) !important;
  border-bottom:1px solid rgba(121,145,154,.20) !important;
}

/* Évite toute barre/coupure nette entre sections */
.mock-hero + .mock-services,
.mock-services + .mock-trust,
.mock-trust + .mock-gallery{
  border-top:0 !important;
}


/* =========================================================
   V10 — HERO CALÉ SUR LA MAQUETTE / AUCUN RECTANGLE
   ========================================================= */

/* Neutralisation explicite de toutes les anciennes couches V4-V9
   responsables des pavés visibles. */
.mock-hero-copy::before,
.mock-hero-copy::after,
.mock-hero-visual::before,
.mock-hero-visual::after,
.hero-scene-fade,
.visual-grid,
.hero-ambient,
.hero-ambient-a,
.hero-ambient-b{
  display:none !important;
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* Comme sur la maquette : une seule grande scène sombre et continue. */
.mock-hero{
  width:100% !important;
  max-width:none !important;
  min-height:610px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    radial-gradient(ellipse at 72% 43%,rgba(22,83,126,.19),transparent 34%),
    radial-gradient(ellipse at 47% 46%,rgba(10,38,61,.16),transparent 28%),
    linear-gradient(90deg,#07101a 0%,#08121e 39%,#07111d 100%) !important;
}

/* La largeur du contenu suit la maquette mais sans créer de fond propre. */
.mock-hero-grid{
  position:relative !important;
  z-index:2 !important;
  width:min(1540px,calc(100% - 72px)) !important;
  max-width:none !important;
  min-height:610px !important;
  margin:0 auto !important;
  padding:38px 0 48px !important;
  display:grid !important;
  grid-template-columns:minmax(520px,42%) minmax(0,58%) !important;
  align-items:center !important;
  gap:0 !important;
  background:transparent !important;
}

/* Colonne texte transparente : plus aucun grand rectangle noir. */
.mock-hero-copy{
  position:relative !important;
  z-index:8 !important;
  padding:36px 28px 36px 0 !important;
  margin:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* La photo occupe réellement tout le côté droit et passe derrière le raccord. */
.mock-hero-visual{
  position:absolute !important;
  z-index:1 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:40% !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

/* La photo elle-même n'a plus aucun cadre, clip ou masque rectangulaire. */
.hero-pc-image{
  position:absolute !important;
  inset:-3% -1% -4% -4% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  filter:none !important;
  box-shadow:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.hero-pc-image::before,
.hero-pc-image::after{
  display:none !important;
  content:none !important;
}

/* Netteté renforcée et cadrage proche de la maquette. */
.hero-pc-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:55% 47% !important;
  transform:scale(1.01) !important;
  filter:saturate(1.10) contrast(1.08) brightness(1.06) !important;
  animation:heroBreathV10 11s ease-in-out infinite !important;
}
@keyframes heroBreathV10{
  0%,100%{transform:scale(1.01)}
  50%{transform:scale(1.025)}
}

/* Fondu uniquement par gradient global, sans élément rectangulaire superposé. */
.mock-hero-grid::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:4 !important;
  pointer-events:none !important;
  top:0 !important;
  bottom:0 !important;
  left:35% !important;
  width:25% !important;
  background:linear-gradient(90deg,
    #08121e 0%,
    rgba(8,18,30,.94) 20%,
    rgba(8,18,30,.68) 48%,
    rgba(8,18,30,.28) 76%,
    transparent 100%) !important;
}

/* Typographie et proportions plus proches de la maquette. */
.mock-kicker{
  margin-bottom:12px !important;
  color:#50b7e8 !important;
  font-size:.76rem !important;
  letter-spacing:.19em !important;
}
.mock-hero h1{
  margin:0 0 17px !important;
  max-width:590px !important;
  color:#f1f3f5 !important;
  font-size:clamp(2.65rem,3.45vw,4rem) !important;
  line-height:1.01 !important;
  letter-spacing:-.035em !important;
}
.mock-hero h1 span{
  color:#68aee8 !important;
  text-shadow:none !important;
}
.mock-lead{
  max-width:590px !important;
  margin-bottom:27px !important;
  color:#c4cbd0 !important;
  font-size:.96rem !important;
  line-height:1.58 !important;
}
.mock-benefits{
  max-width:590px !important;
  margin-bottom:27px !important;
}
.mock-benefits>div{
  padding:0 20px !important;
}
.mock-benefits>div:first-child{padding-left:0 !important}
.mock-actions{gap:17px !important}
.mock-btn{
  min-width:205px !important;
  height:49px !important;
}

/* Les services remontent juste sous le hero comme sur la maquette. */
.mock-services{
  position:relative !important;
  z-index:9 !important;
  margin-top:-5px !important;
  padding-top:24px !important;
  padding-bottom:34px !important;
  background:
    linear-gradient(180deg,rgba(7,16,26,.98),rgba(9,19,30,.98)) !important;
}
.mock-services::before,
.mock-services::after{
  display:none !important;
  content:none !important;
}

/* Cartes : image propre, aucun ancien logo/pictogramme coupé. */
.service-photo{
  position:relative !important;
  height:178px !important;
  overflow:hidden !important;
}
.service-photo::before,
.service-photo::after{
  display:none !important;
  content:none !important;
}
.service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:scale(1.015) !important;
}
.round-icon{display:none !important}

/* Pas de grands pavés latéraux dans les sections suivantes. */
.mock-trust,
.mock-gallery,
.mock-contact{
  box-shadow:none !important;
}
.mock-gallery::before,
.mock-gallery::after{
  display:none !important;
  content:none !important;
}
.mock-gallery{
  max-width:none !important;
  width:100% !important;
  background:linear-gradient(180deg,#101b25,#14222d,#0e1923) !important;
}

/* Responsive */
@media(max-width:1000px){
  .mock-hero-grid{
    width:min(100% - 38px,900px) !important;
    grid-template-columns:1fr !important;
    min-height:690px !important;
  }
  .mock-hero-visual{
    left:30% !important;
    opacity:.45 !important;
  }
  .mock-hero-grid::after{
    left:22% !important;
    width:36% !important;
  }
  .mock-hero-copy{
    max-width:650px !important;
  }
}
@media(max-width:650px){
  .mock-hero-visual{
    left:10% !important;
    opacity:.32 !important;
  }
  .mock-hero-grid::after{
    left:0 !important;
    width:60% !important;
  }
}


/* =========================================================
   V12 — MAQUETTE RECONSTRUITE EN HTML/CSS NET
   Même composition que la référence, mais sans texte rasterisé.
   ========================================================= */

body.site-body.mock-home{
  background:#050a11 !important;
  color:#f5f7f9 !important;
}

.mock-home main{
  background:
    radial-gradient(circle at 68% 13%,rgba(24,92,181,.16),transparent 25%),
    linear-gradient(180deg,#050a11 0%,#07101a 62%,#09131e 100%) !important;
}

/* ---------- HERO : proportions de la maquette ---------- */
.mock-hero{
  position:relative !important;
  width:100% !important;
  min-height:430px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 54% 45%,rgba(23,81,156,.13),transparent 24%),
    linear-gradient(90deg,#040912 0%,#050b14 40%,#07101b 100%) !important;
}

.mock-hero-grid{
  position:relative !important;
  width:min(1520px,calc(100% - 64px)) !important;
  max-width:none !important;
  min-height:430px !important;
  margin:0 auto !important;
  padding:26px 0 20px !important;
  display:grid !important;
  grid-template-columns:39% 61% !important;
  align-items:center !important;
  gap:0 !important;
  background:transparent !important;
}

/* Aucun rectangle sombre derrière le texte */
.mock-hero-copy,
.mock-hero-copy::before,
.mock-hero-copy::after{
  background:transparent !important;
  box-shadow:none !important;
}
.mock-hero-copy{
  position:relative !important;
  z-index:8 !important;
  padding:8px 22px 8px 0 !important;
}

.mock-kicker{
  margin:0 0 8px !important;
  color:#3aa9f4 !important;
  font-size:.74rem !important;
  line-height:1 !important;
  letter-spacing:.17em !important;
  font-weight:800 !important;
}

.mock-hero h1{
  margin:0 0 12px !important;
  max-width:560px !important;
  color:#f5f7f9 !important;
  font-size:clamp(2.15rem,3.15vw,3.35rem) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  font-weight:900 !important;
}
.mock-hero h1 span{
  color:#4f9cff !important;
  text-shadow:0 0 22px rgba(48,118,255,.20) !important;
}

.mock-lead{
  max-width:540px !important;
  margin:0 0 19px !important;
  color:#d4d9df !important;
  font-size:.89rem !important;
  line-height:1.45 !important;
}

.mock-benefits{
  max-width:555px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  margin:0 0 20px !important;
  gap:0 !important;
}
.mock-benefits>div{
  display:grid !important;
  grid-template-columns:42px 1fr !important;
  gap:9px !important;
  align-items:center !important;
  min-width:0 !important;
  padding:0 14px !important;
  border-right:1px solid rgba(123,146,171,.24) !important;
}
.mock-benefits>div:first-child{padding-left:0 !important}
.mock-benefits>div:last-child{border-right:0 !important}

.benefit-icon{
  width:39px !important;
  height:39px !important;
  display:grid !important;
  place-items:center !important;
  color:#42a7ff !important;
  border:2px solid #258cf2 !important;
  border-radius:50% !important;
  background:rgba(4,16,31,.76) !important;
  box-shadow:0 0 18px rgba(26,126,255,.22) !important;
  font-size:1.1rem !important;
}
.mock-benefits strong{
  display:block !important;
  color:#6bb5ff !important;
  font-size:.74rem !important;
  line-height:1.2 !important;
  margin-bottom:3px !important;
}
.mock-benefits small{
  display:block !important;
  color:#c2cbd4 !important;
  font-size:.62rem !important;
  line-height:1.35 !important;
}

.mock-actions{
  display:flex !important;
  gap:18px !important;
}
.mock-btn{
  width:180px !important;
  min-width:180px !important;
  height:44px !important;
  border-radius:6px !important;
  font-size:.70rem !important;
  letter-spacing:.02em !important;
}
.mock-btn-blue{
  color:#fff !important;
  background:linear-gradient(135deg,#173f9e,#2453c7) !important;
  border:1px solid #3e79ff !important;
  box-shadow:
    0 0 0 1px rgba(93,130,255,.20) inset,
    0 0 20px rgba(42,92,255,.32) !important;
}
.mock-btn-dark{
  color:#eef3f8 !important;
  background:rgba(8,13,20,.82) !important;
  border:1px solid #3b4653 !important;
}

/* ---------- PHOTO PRINCIPALE : nette et sans rectangle parasite ---------- */
.mock-hero-visual{
  position:absolute !important;
  z-index:1 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:37% !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.hero-ambient,
.visual-grid,
.hero-scene-fade,
.mock-hero-visual::before,
.mock-hero-visual::after,
.hero-pc-image::before,
.hero-pc-image::after{
  display:none !important;
  content:none !important;
}

.hero-pc-image{
  position:absolute !important;
  inset:-12% -2% -13% -4% !important;
  margin:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:none !important;
}

.hero-pc-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:54% 48% !important;
  transform:scale(1.005) !important;
  filter:saturate(1.18) contrast(1.11) brightness(1.13) !important;
  image-rendering:auto !important;
  animation:heroV12Breath 10s ease-in-out infinite !important;
}
@keyframes heroV12Breath{
  0%,100%{transform:scale(1.005)}
  50%{transform:scale(1.018)}
}

/* Fondu large, doux et continu entre texte et photo */
.mock-hero-grid::after{
  content:"" !important;
  position:absolute !important;
  z-index:5 !important;
  pointer-events:none !important;
  top:-30px !important;
  bottom:-30px !important;
  left:32% !important;
  width:25% !important;
  background:linear-gradient(90deg,
    #050b14 0%,
    rgba(5,11,20,.96) 16%,
    rgba(5,11,20,.78) 38%,
    rgba(5,11,20,.45) 62%,
    rgba(5,11,20,.15) 82%,
    transparent 100%) !important;
}

/* ---------- 3 CARTES : comme la maquette ---------- */
.mock-services{
  position:relative !important;
  z-index:10 !important;
  width:min(1520px,calc(100% - 64px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:0 0 18px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:20px !important;
  background:transparent !important;
}
.mock-services::before,
.mock-services::after{display:none !important;content:none !important}

.mock-service-card{
  min-height:218px !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:8px !important;
  border:1px solid #2b6093 !important;
  background:linear-gradient(180deg,rgba(10,21,34,.96),rgba(5,12,22,.98)) !important;
  box-shadow:0 0 18px rgba(14,74,146,.12) !important;
  transform:none !important;
}
.mock-service-card:hover{
  transform:translateY(-3px) !important;
  border-color:#348dff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 22px rgba(31,113,255,.16) !important;
}

.service-photo{
  position:relative !important;
  height:105px !important;
  overflow:hidden !important;
  background:#07111d !important;
}
.service-photo::before,
.service-photo::after{display:none !important;content:none !important}
.service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:scale(1.01) !important;
  filter:saturate(1.10) contrast(1.05) brightness(1.10) !important;
}
.mock-service-card:hover .service-photo img{
  transform:scale(1.035) !important;
}

.service-card-body{
  position:relative !important;
  display:block !important;
  padding:19px 22px 17px 68px !important;
  min-height:112px !important;
}
.round-icon{
  display:grid !important;
  position:absolute !important;
  left:18px !important;
  top:-28px !important;
  width:52px !important;
  height:52px !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#dcecff !important;
  border:2px solid #348dff !important;
  background:#081424 !important;
  box-shadow:
    0 0 0 4px rgba(19,64,117,.32),
    0 0 18px rgba(45,113,255,.46) !important;
  font-size:1.18rem !important;
}
.service-card-body h2{
  margin:0 0 6px !important;
  color:#f2f5f8 !important;
  font-size:.84rem !important;
  line-height:1.2 !important;
}
.service-card-body p{
  margin:0 0 7px !important;
  color:#c2cad3 !important;
  font-size:.65rem !important;
  line-height:1.42 !important;
}
.service-card-body strong{
  color:#3aa5ff !important;
  font-size:.60rem !important;
  font-weight:750 !important;
}

/* ---------- BANDEAU 5 AVANTAGES ---------- */
.mock-trust{
  width:min(1520px,calc(100% - 64px)) !important;
  max-width:none !important;
  margin:0 auto 22px !important;
  padding:14px 10px !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  border:0 !important;
  border-top:1px solid rgba(73,116,164,.35) !important;
  border-bottom:1px solid rgba(73,116,164,.22) !important;
  border-radius:0 !important;
  background:rgba(4,10,17,.42) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.trust-item{
  display:grid !important;
  grid-template-columns:40px 1fr !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 18px !important;
  border-right:1px solid rgba(94,118,145,.28) !important;
}
.trust-item:last-child{border-right:0 !important}
.trust-item>b{
  width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  color:#3ca4ff !important;
  font-size:1.1rem !important;
  text-shadow:0 0 12px rgba(47,132,255,.42) !important;
}
.trust-item strong{
  display:block !important;
  color:#eef3f7 !important;
  font-size:.65rem !important;
  line-height:1.2 !important;
}
.trust-item small{
  display:block !important;
  margin-top:3px !important;
  color:#c2cbd3 !important;
  font-size:.57rem !important;
  line-height:1.3 !important;
}

/* ---------- Reste du site : un peu plus clair ---------- */
.mock-gallery{
  margin-top:0 !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(46,106,165,.10),transparent 34%),
    linear-gradient(180deg,#0b1520,#101e2b,#0a151f) !important;
}
.mock-section-title h2{color:#f4f6f8 !important}
.mock-section-title span,
.mock-section-title a{color:#55adf4 !important}

.mock-contact{
  background:linear-gradient(180deg,#111e29,#0c1721) !important;
}
.mock-footer{
  background:#07111a !important;
}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .mock-hero-grid{
    width:min(100% - 36px,980px) !important;
    grid-template-columns:48% 52% !important;
  }
  .mock-hero-visual{left:44% !important}
  .mock-services,
  .mock-trust{width:min(100% - 36px,980px) !important}
}

@media(max-width:800px){
  .mock-hero{
    min-height:650px !important;
  }
  .mock-hero-grid{
    min-height:650px !important;
    grid-template-columns:1fr !important;
  }
  .mock-hero-visual{
    left:24% !important;
    opacity:.44 !important;
  }
  .mock-hero-grid::after{
    left:8% !important;
    width:48% !important;
  }
  .mock-hero-copy{
    max-width:620px !important;
  }
  .mock-services{
    grid-template-columns:1fr !important;
  }
  .mock-trust{
    grid-template-columns:1fr 1fr !important;
    gap:16px 0 !important;
  }
}

@media(max-width:520px){
  .mock-benefits{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .mock-benefits>div{
    border-right:0 !important;
    padding:0 !important;
  }
  .mock-actions{
    display:grid !important;
  }
  .mock-btn{
    width:100% !important;
  }
  .mock-trust{
    grid-template-columns:1fr !important;
  }
  .trust-item{
    border-right:0 !important;
  }
}


/* =========================================================
   V13 — PHOTO EXACTE DE LA MAQUETTE / AUCUN BLOC DE COUPURE
   ========================================================= */

/* La photo validée est maintenant LE fond du hero, pas une image posée. */
.mock-hero{
  position:relative !important;
  min-height:610px !important;
  background:
    linear-gradient(90deg,
      #050a11 0%,
      #050a11 34%,
      rgba(5,10,17,.97) 40%,
      rgba(5,10,17,.82) 47%,
      rgba(5,10,17,.50) 56%,
      rgba(5,10,17,.20) 66%,
      rgba(5,10,17,.05) 77%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(5,10,17,.08) 0%,
      transparent 16%,
      transparent 82%,
      rgba(5,10,17,.30) 100%),
    url("../img/hero-reference-exacte-hd.webp") right center / auto 100% no-repeat,
    #050a11 !important;
  overflow:hidden !important;
}

/* Aucune couche graphique supplémentaire : fin des rectangles/coupures. */
.mock-hero::before,
.mock-hero::after,
.mock-hero-grid::before,
.mock-hero-grid::after,
.mock-hero-visual,
.hero-scene-fade,
.visual-grid,
.hero-ambient,
.blue-beam,
.hero-service-sign,
.hero-monitor{
  display:none !important;
  content:none !important;
}

/* Colonne de contenu purement transparente. */
.mock-hero-grid{
  width:min(1520px,calc(100% - 64px)) !important;
  max-width:none !important;
  min-height:610px !important;
  margin:0 auto !important;
  padding:38px 0 34px !important;
  display:block !important;
  background:transparent !important;
}
.mock-hero-copy{
  width:42% !important;
  max-width:600px !important;
  min-width:520px !important;
  padding:26px 20px 26px 0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Rendu plus clair et net */
.mock-kicker{
  color:#4db1ee !important;
}
.mock-hero h1{
  color:#f5f7f8 !important;
  font-size:clamp(2.65rem,3.4vw,3.95rem) !important;
}
.mock-hero h1 span{
  color:#5aa6f3 !important;
}
.mock-lead{
  color:#d4d9dd !important;
}
.mock-benefits strong{
  color:#75bbfb !important;
}
.mock-benefits small{
  color:#c4ccd3 !important;
}

/* Le reste de la page reste plus lumineux, sans pavés latéraux. */
.mock-services,
.mock-trust,
.mock-gallery,
.mock-contact{
  position:relative !important;
  z-index:2 !important;
}

.mock-services{
  margin-top:0 !important;
  padding-top:34px !important;
  background:
    linear-gradient(180deg,#07101a 0%,#0a1520 100%) !important;
}

.mock-service-card{
  background:linear-gradient(180deg,#16232d,#0f1a23) !important;
  border-color:#36516a !important;
}
.service-photo img{
  filter:saturate(1.04) contrast(1.04) brightness(1.10) !important;
}

/* Responsive : même photo, toujours en fond. */
@media(max-width:1000px){
  .mock-hero{
    background:
      linear-gradient(90deg,
        #050a11 0%,
        rgba(5,10,17,.98) 42%,
        rgba(5,10,17,.78) 57%,
        rgba(5,10,17,.38) 72%,
        rgba(5,10,17,.10) 86%,
        transparent 100%),
      url("../img/hero-reference-exacte-hd.webp") right center / auto 100% no-repeat,
      #050a11 !important;
  }
  .mock-hero-copy{
    width:58% !important;
    min-width:0 !important;
  }
}

@media(max-width:700px){
  .mock-hero{
    min-height:720px !important;
    background:
      linear-gradient(90deg,
        rgba(5,10,17,.99) 0%,
        rgba(5,10,17,.93) 55%,
        rgba(5,10,17,.60) 75%,
        rgba(5,10,17,.30) 100%),
      url("../img/hero-reference-exacte-hd.webp") 65% center / auto 100% no-repeat,
      #050a11 !important;
  }
  .mock-hero-copy{
    width:100% !important;
    max-width:560px !important;
  }
}


/* =========================================================
   V14 — CARTES & BANDEAU PLUS AÉRÉS ET PLUS LISIBLES
   ========================================================= */

/* Plus d'espace entre le hero et les cartes */
.mock-services{
  width:min(1480px,calc(100% - 64px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:64px 0 52px !important;
  gap:30px !important;
  background:transparent !important;
}

/* Cartes plus hautes, plus respirantes */
.mock-service-card{
  min-height:390px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#16232d,#111b23) !important;
  border:1px solid #3e5362 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.18) !important;
}

/* Les images ne sont plus écrasées ni coupées en deux */
.service-photo{
  position:relative !important;
  height:225px !important;
  overflow:hidden !important;
  background:#0d1720 !important;
}
.service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  filter:saturate(1.02) contrast(1.03) brightness(1.08) !important;
}
.mock-service-card:hover .service-photo img{
  transform:scale(1.035) !important;
}

/* Aucun pictogramme ne vient mordre sur l'image */
.round-icon{
  display:none !important;
}

/* Texte plus grand, plus lisible */
.service-card-body{
  display:block !important;
  padding:28px 30px 30px !important;
  min-height:165px !important;
}
.service-card-body h2{
  margin:0 0 12px !important;
  color:#f1f4f6 !important;
  font-size:1.08rem !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
}
.service-card-body p{
  margin:0 0 18px !important;
  color:#c4cdd4 !important;
  font-size:.90rem !important;
  line-height:1.62 !important;
}
.service-card-body strong{
  color:#7fc4d0 !important;
  font-size:.80rem !important;
  letter-spacing:.025em !important;
}

/* Bandeau avantages plus grand et plus respirant */
.mock-trust{
  width:min(1480px,calc(100% - 64px)) !important;
  max-width:none !important;
  margin:12px auto 48px !important;
  padding:28px 18px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#1a252d,#141d24) !important;
  border:1px solid #40505a !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:0 !important;
}
.trust-item{
  display:grid !important;
  grid-template-columns:44px 1fr !important;
  gap:14px !important;
  align-items:center !important;
  padding:4px 24px !important;
  border-right:1px solid #43515a !important;
}
.trust-item:last-child{border-right:0 !important}

.trust-item>b{
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  color:#78c2cd !important;
  font-size:1.25rem !important;
  text-shadow:none !important;
}
.trust-item strong{
  display:block !important;
  color:#e8edf0 !important;
  font-size:.78rem !important;
  line-height:1.25 !important;
  margin-bottom:5px !important;
}
.trust-item small{
  display:block !important;
  color:#aeb8bf !important;
  font-size:.72rem !important;
  line-height:1.45 !important;
}

/* Un peu plus d'air avant la suite */
.mock-gallery{
  padding-top:82px !important;
}

/* Responsive */
@media(max-width:1100px){
  .mock-services{
    grid-template-columns:1fr 1fr !important;
  }
  .mock-service-card:last-child{
    grid-column:1 / -1 !important;
  }
  .mock-trust{
    grid-template-columns:repeat(2,1fr) !important;
    gap:22px 0 !important;
  }
  .trust-item{
    border-right:0 !important;
    border-bottom:1px solid #3b4851 !important;
    padding:12px 20px !important;
  }
}

@media(max-width:720px){
  .mock-services{
    width:min(100% - 28px,700px) !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding-top:42px !important;
  }
  .mock-service-card:last-child{
    grid-column:auto !important;
  }
  .service-photo{
    height:240px !important;
  }
  .service-card-body{
    padding:24px !important;
  }
  .mock-trust{
    width:min(100% - 28px,700px) !important;
    grid-template-columns:1fr !important;
  }
  .trust-item{
    padding:14px 16px !important;
  }
}


/* =========================================================
   V15 — IDENTITÉ DXF PRO / CLAIRE / DISTINCTE DE SAFE ACTIVITY
   L'animation du logo du header n'est pas modifiée.
   ========================================================= */
:root{
  --dxf-paper:#edf1f3;
  --dxf-silver:#bcc7cc;
  --dxf-steel:#7f929b;
  --dxf-cyan:#59c7d4;
  --dxf-ice:#a8e2e8;
  --dxf-panel:#17232a;
  --dxf-panel2:#202e35;
}

/* Hero plus clair, accent cyan/acier et non bleu Safe Activity */
.mock-hero{
  min-height:610px!important;
  background:
    linear-gradient(90deg,#111a20 0%,#111a20 34%,rgba(17,26,32,.96) 41%,rgba(17,26,32,.68) 52%,rgba(17,26,32,.22) 64%,transparent 75%),
    url("../img/hero-dxf-pro-v15.webp") right center/auto 100% no-repeat,
    #111a20!important;
}
.mock-hero-grid{min-height:610px!important}
.mock-hero-copy{width:43%!important;max-width:620px!important;background:transparent!important}

.mock-kicker{
  color:var(--dxf-cyan)!important;
  letter-spacing:.22em!important;
  font-size:.72rem!important;
}
.mock-hero h1{
  color:var(--dxf-paper)!important;
  font-size:clamp(2.65rem,3.25vw,3.9rem)!important;
  line-height:1.02!important;
}
.mock-hero h1 span{
  color:var(--dxf-silver)!important;
  text-shadow:none!important;
}
.mock-lead{
  color:#cbd3d7!important;
  font-size:1rem!important;
  line-height:1.65!important;
}

/* Arguments : style industriel, sans cercles bleus façon Safe Activity */
.mock-benefits{gap:14px!important}
.mock-benefits>div{
  grid-template-columns:5px 1fr!important;
  padding:4px 18px!important;
  border-right:0!important;
  border-left:2px solid rgba(89,199,212,.42)!important;
}
.mock-benefits>div:first-child{padding-left:18px!important}
.benefit-icon{display:none!important}
.mock-benefits strong{
  color:var(--dxf-ice)!important;
  font-size:.78rem!important;
  letter-spacing:.04em!important;
}
.mock-benefits small{
  color:#b9c4c9!important;
  font-size:.68rem!important;
}

/* CTA acier/cyan : plus sobre */
.mock-btn{
  border-radius:4px!important;
  font-size:.74rem!important;
}
.mock-btn-blue{
  background:linear-gradient(135deg,#49616b,#607a84)!important;
  border:1px solid #78949d!important;
  box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
}
.mock-btn-blue:hover{background:linear-gradient(135deg,#58727c,#6d8993)!important}
.mock-btn-dark{
  background:rgba(20,29,35,.82)!important;
  border-color:#50616a!important;
}

/* Cartes : acier/graphite, cyan seulement en détail */
.mock-services{background:linear-gradient(180deg,#111a20,#152128)!important}
.mock-service-card{
  background:linear-gradient(180deg,#23323a,#18242b)!important;
  border-color:#52646d!important;
}
.mock-service-card:hover{
  border-color:#79a0a8!important;
  box-shadow:0 18px 40px rgba(0,0,0,.20)!important;
}
.service-card-body h2{color:#eef2f3!important}
.service-card-body p{color:#c0c9cd!important}
.service-card-body strong{color:var(--dxf-cyan)!important}

/* Bandeau avantages sans pictogrammes bleus dominants */
.mock-trust{
  background:linear-gradient(180deg,#202e35,#18242a)!important;
  border-color:#50616a!important;
}
.trust-item>b{
  color:var(--dxf-cyan)!important;
  text-shadow:none!important;
}
.trust-item strong{color:#e9edef!important}
.trust-item small{color:#b5c0c5!important}

/* Sections suivantes plus lumineuses */
.mock-gallery{
  background:linear-gradient(180deg,#1b282f,#23323a 52%,#172229)!important;
}
.mock-section-title span,.mock-section-title a{color:var(--dxf-cyan)!important}
.mock-contact{background:linear-gradient(180deg,#202d34,#172229)!important}
.mock-footer{background:#11191e!important}

/* Menu : neutre/acier, cyan discret */
.mock-main-nav a{color:#c7d0d4!important}
.mock-main-nav a:hover,.mock-main-nav a.active{color:#fff!important}
.mock-main-nav a.active::after{
  background:linear-gradient(90deg,transparent,var(--dxf-cyan),transparent)!important;
}

/* Responsive */
@media(max-width:900px){
  .mock-hero{
    background:
      linear-gradient(90deg,rgba(17,26,32,.98),rgba(17,26,32,.86) 62%,rgba(17,26,32,.55)),
      url("../img/hero-dxf-pro-v15.webp") 60% center/auto 100% no-repeat,
      #111a20!important;
  }
  .mock-hero-copy{width:72%!important}
}
@media(max-width:650px){.mock-hero-copy{width:100%!important}}


/* =========================================================
   V16 — HERO FONDU + CONTENU PLUS AÉRÉ
   Le logo et son animation dans le header restent inchangés.
   ========================================================= */

/* On garde une seule scène continue, sans coupure verticale nette */
.mock-hero{
  position:relative !important;
  min-height:620px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 73% 35%,rgba(91,166,184,.10),transparent 30%),
    linear-gradient(90deg,
      #111a20 0%,
      #111a20 26%,
      rgba(17,26,32,.98) 34%,
      rgba(17,26,32,.88) 42%,
      rgba(17,26,32,.66) 51%,
      rgba(17,26,32,.36) 61%,
      rgba(17,26,32,.12) 72%,
      transparent 82%),
    url("../img/hero-dxf-pro-v15.webp") right center / auto 100% no-repeat,
    #111a20 !important;
}

/* Grand fondu souple entre texte et image */
.mock-hero::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:37% !important;
  width:28% !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:
    radial-gradient(ellipse at 35% 50%,rgba(17,26,32,.72),transparent 65%),
    linear-gradient(90deg,
      rgba(17,26,32,.96) 0%,
      rgba(17,26,32,.78) 22%,
      rgba(17,26,32,.48) 48%,
      rgba(17,26,32,.20) 72%,
      transparent 100%) !important;
}

/* Le contenu ne colle plus au bord gauche */
.mock-hero-grid{
  width:min(1480px,calc(100% - 96px)) !important;
  max-width:none !important;
  min-height:620px !important;
  margin:0 auto !important;
  padding:46px 0 52px !important;
  display:block !important;
  background:transparent !important;
  position:relative !important;
  z-index:5 !important;
}

.mock-hero-copy{
  width:43% !important;
  max-width:640px !important;
  min-width:520px !important;
  padding:18px 24px 18px 18px !important;
  margin:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Titre moins compact, plus élégant */
.mock-kicker{
  margin-bottom:16px !important;
  color:#92c9d0 !important;
  font-size:.76rem !important;
  letter-spacing:.20em !important;
}

.mock-hero h1{
  margin:0 0 24px !important;
  max-width:620px !important;
  color:#f0f3f4 !important;
  font-size:clamp(2.75rem,3.35vw,4.05rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.026em !important;
  font-weight:820 !important;
}
.mock-hero h1 span{
  color:#c6d1d5 !important;
  text-shadow:none !important;
}

.mock-lead{
  max-width:600px !important;
  margin:0 0 34px !important;
  color:#c7d0d4 !important;
  font-size:1.02rem !important;
  line-height:1.72 !important;
}

/* Les trois arguments respirent davantage */
.mock-benefits{
  max-width:600px !important;
  margin:0 0 36px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:22px !important;
}

.mock-benefits>div{
  display:block !important;
  min-width:0 !important;
  padding:0 0 0 16px !important;
  border-left:2px solid rgba(124,187,198,.42) !important;
  border-right:0 !important;
}

.mock-benefits strong{
  display:block !important;
  margin-bottom:6px !important;
  color:#dce5e8 !important;
  font-size:.82rem !important;
  line-height:1.25 !important;
  letter-spacing:.015em !important;
}

.mock-benefits small{
  display:block !important;
  color:#9eabb1 !important;
  font-size:.72rem !important;
  line-height:1.5 !important;
}

/* Boutons avec plus de présence mais sans gros pavé bleu */
.mock-actions{
  display:flex !important;
  gap:18px !important;
}

.mock-btn{
  min-width:224px !important;
  height:52px !important;
  padding:0 20px !important;
  border-radius:6px !important;
}

.mock-btn-blue{
  background:linear-gradient(135deg,#3f535c,#57717b) !important;
  border:1px solid #718a93 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.20) !important;
}

.mock-btn-dark{
  background:rgba(20,29,35,.82) !important;
  border:1px solid #47565e !important;
}

/* On évite toute couche rectangulaire parasite issue des anciennes versions */
.hero-scene-fade,
.visual-grid,
.hero-ambient,
.mock-hero-visual,
.hero-pc-image,
.hero-service-sign,
.hero-monitor,
.blue-beam{
  display:none !important;
}

/* Responsive */
@media(max-width:1100px){
  .mock-hero{
    background:
      linear-gradient(90deg,
        rgba(17,26,32,.99) 0%,
        rgba(17,26,32,.94) 47%,
        rgba(17,26,32,.72) 62%,
        rgba(17,26,32,.34) 78%,
        rgba(17,26,32,.08) 90%),
      url("../img/hero-dxf-pro-v15.webp") 70% center / auto 100% no-repeat,
      #111a20 !important;
  }

  .mock-hero::after{
    left:42% !important;
    width:34% !important;
  }

  .mock-hero-grid{
    width:min(100% - 56px,1050px) !important;
  }

  .mock-hero-copy{
    width:55% !important;
    min-width:0 !important;
  }
}

@media(max-width:760px){
  .mock-hero{
    min-height:730px !important;
    background:
      linear-gradient(90deg,
        rgba(17,26,32,.99) 0%,
        rgba(17,26,32,.96) 58%,
        rgba(17,26,32,.68) 78%,
        rgba(17,26,32,.28) 100%),
      url("../img/hero-dxf-pro-v15.webp") 70% center / auto 100% no-repeat,
      #111a20 !important;
  }

  .mock-hero::after{
    display:none !important;
  }

  .mock-hero-grid{
    width:min(100% - 32px,720px) !important;
    padding-top:36px !important;
  }

  .mock-hero-copy{
    width:100% !important;
    max-width:620px !important;
    padding-left:0 !important;
  }

  .mock-benefits{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .mock-actions{
    display:grid !important;
  }

  .mock-btn{
    width:100% !important;
  }
}


/* =========================================================
   V17 — HERO CONTINU / SUPPRESSION DES RECTANGLES
   ========================================================= */

/* Une seule surface sur toute la largeur.
   La photo couvre tout le hero et le sombre est uniquement un voile progressif. */
.mock-hero{
  position:relative !important;
  isolation:isolate !important;
  width:100% !important;
  min-height:620px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:
    url("../img/hero-dxf-pro-v17.webp") 73% center / cover no-repeat !important;
}

/* Voile continu sans aucune limite verticale franche */
.mock-hero::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse 70% 120% at 5% 50%,
      rgba(13,22,28,.98) 0%,
      rgba(13,22,28,.95) 34%,
      rgba(13,22,28,.78) 52%,
      rgba(13,22,28,.42) 70%,
      rgba(13,22,28,.10) 88%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(8,15,20,.14) 0%,
      transparent 25%,
      transparent 72%,
      rgba(8,15,20,.18) 100%) !important;
}

/* Suppression complète du second voile V16 qui créait encore une bande */
.mock-hero::after{
  display:none !important;
  content:none !important;
}

/* Aucun ancien conteneur d'image ou décor ne peut réapparaître */
.mock-hero-visual,
.hero-pc-image,
.hero-scene-fade,
.visual-grid,
.hero-ambient,
.hero-service-sign,
.hero-monitor,
.blue-beam{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
}

/* Contenu posé naturellement dans la scène, sans panneau rectangulaire */
.mock-hero-grid{
  position:relative !important;
  z-index:2 !important;
  width:min(1500px,calc(100% - 80px)) !important;
  max-width:none !important;
  min-height:620px !important;
  margin:0 auto !important;
  padding:54px 0 58px !important;
  display:flex !important;
  align-items:center !important;
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
}

.mock-hero-copy{
  position:relative !important;
  width:47% !important;
  max-width:650px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
}
.mock-hero-copy::before,
.mock-hero-copy::after,
.mock-hero-grid::before,
.mock-hero-grid::after{
  display:none !important;
  content:none !important;
}

/* Transitions entre les grandes zones : plus aucun grand rectangle latéral */
.mock-services{
  position:relative !important;
  width:min(1480px,calc(100% - 64px)) !important;
  margin:0 auto !important;
  padding:70px 0 54px !important;
  background:transparent !important;
}
.mock-services::before,
.mock-services::after{
  display:none !important;
  content:none !important;
}

.mock-home main{
  overflow:hidden !important;
  background:
    radial-gradient(circle at 75% 8%,rgba(69,131,144,.08),transparent 28%),
    linear-gradient(180deg,#101a20 0%,#132027 48%,#17242b 100%) !important;
}

/* Le fond du bandeau avantages est contenu et non plus un grand pavé bord à bord */
.mock-trust{
  width:min(1480px,calc(100% - 64px)) !important;
  margin:10px auto 54px !important;
}

/* Le hero rejoint visuellement la zone suivante par un fondu vertical doux */
.mock-hero{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.82) 97%,transparent 100%) !important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.82) 97%,transparent 100%) !important;
  margin-bottom:-24px !important;
  padding-bottom:24px !important;
}

@media(max-width:1000px){
  .mock-hero{
    background-position:68% center !important;
  }
  .mock-hero::before{
    background:
      radial-gradient(ellipse 88% 120% at 0% 50%,
        rgba(13,22,28,.99) 0%,
        rgba(13,22,28,.96) 42%,
        rgba(13,22,28,.74) 64%,
        rgba(13,22,28,.28) 84%,
        transparent 100%) !important;
  }
  .mock-hero-copy{width:58% !important}
}

@media(max-width:760px){
  .mock-hero{
    min-height:730px !important;
    background-position:63% center !important;
  }
  .mock-hero::before{
    background:linear-gradient(90deg,
      rgba(13,22,28,.99) 0%,
      rgba(13,22,28,.96) 56%,
      rgba(13,22,28,.72) 78%,
      rgba(13,22,28,.34) 100%) !important;
  }
  .mock-hero-grid{
    width:min(100% - 34px,720px) !important;
    min-height:730px !important;
    align-items:flex-start !important;
    padding-top:44px !important;
  }
  .mock-hero-copy{width:100% !important;max-width:600px !important}
}


/* =========================================================
   V18 — AJUSTEMENTS DEMANDÉS
   ========================================================= */

/* Hero : vrai logo intégré dans l'écran + texte plus généreux */
.mock-hero{
  background:
    url("../img/hero-dxf-pro-v17.webp") 73% center / cover no-repeat !important;
}

/* Plus de place pour le texte à gauche */
.mock-hero-grid{
  width:min(1540px,calc(100% - 84px)) !important;
}
.mock-hero-copy{
  width:52% !important;
  max-width:760px !important;
  padding-right:38px !important;
}
.mock-hero h1{
  max-width:720px !important;
  font-size:clamp(3rem,3.75vw,4.45rem) !important;
  line-height:1.03 !important;
}
.mock-lead{
  max-width:690px !important;
  font-size:1.05rem !important;
}
.mock-benefits{
  max-width:690px !important;
}
.mock-actions{
  margin-top:2px !important;
}

/* La petite ligne DXF INFORMATIQUE n'existe plus */
.mock-kicker{display:none !important}

/* Animation 3D très légère de la scène, sans bouger la mise en page */
.mock-hero{
  perspective:1400px;
}
.mock-hero::before{
  animation:heroLightShift 9s ease-in-out infinite;
}
@keyframes heroLightShift{
  0%,100%{opacity:1}
  50%{opacity:.90}
}

/* Cartes : supprimer la ligne visible au-dessus des photos */
.mock-service-card{
  border-top:0 !important;
  overflow:hidden !important;
}
.service-photo{
  border-top:0 !important;
  border-radius:18px 18px 0 0 !important;
  margin-top:0 !important;
}
.service-photo img{
  display:block !important;
  margin:0 !important;
}

/* Recréer le contour proprement uniquement autour du bas de la carte */
.service-card-body{
  border-left:1px solid rgba(112,137,148,.46) !important;
  border-right:1px solid rgba(112,137,148,.46) !important;
  border-bottom:1px solid rgba(112,137,148,.46) !important;
  border-radius:0 0 18px 18px !important;
}

/* Pas de liseré parasite sur la première ligne des cartes */
.mock-services{
  border-top:0 !important;
}

/* Responsive */
@media(max-width:1100px){
  .mock-hero-copy{
    width:62% !important;
    max-width:690px !important;
  }
}
@media(max-width:760px){
  .mock-hero-copy{
    width:100% !important;
    padding-right:0 !important;
  }
}

.legal-provider{
  display:flex;
  align-items:center;
  gap:28px;
  margin:18px 0 30px;
  padding:24px;
  border:1px solid #d8e0e5;
  border-radius:16px;
  background:#fff;
}
.provider-logo{
  width:170px;
  height:auto;
  flex:0 0 auto;
  border-radius:12px;
}
@media(max-width:620px){
  .legal-provider{flex-direction:column;align-items:flex-start}
  .provider-logo{width:150px}
}


/* =========================================================
   V20 — RESTAURATION IMAGE PROPRE + LOGO ÉCRAN EN OVERLAY
   ========================================================= */

/* On revient à l'image propre de la V17 : aucune modification pixel destructive. */
.mock-hero{
  background:
    url("../img/hero-dxf-pro-v17.webp") 73% center / cover no-repeat !important;
}

/* Neutraliser tout ancien fichier ou effet de la V18/V19 */
.mock-hero[style*="hero-dxf-pro-v18"],
.mock-hero[style*="hero-dxf-pro-v19"]{
  background-image:url("../img/hero-dxf-pro-v17.webp") !important;
}

/* Le vrai logo est posé uniquement sur l'écran du moniteur.
   Il n'est jamais ajouté ailleurs dans la photo. */
.screen-logo-overlay{
  position:absolute;
  z-index:6;
  right:7.4%;
  top:27.8%;
  width:15.2%;
  height:auto;
  pointer-events:none;
  transform:
    perspective(900px)
    rotateY(-7deg)
    rotateX(1deg);
  transform-origin:center;
  opacity:.96;
  filter:
    drop-shadow(0 0 4px rgba(47,134,255,.65))
    drop-shadow(0 0 12px rgba(29,92,214,.32));
}

.screen-logo-overlay img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:transparent;
}

/* Aucune animation parasite sur la photo. */
.screen-logo-overlay{
  animation:screenLogoPulse 4.8s ease-in-out infinite;
}
@keyframes screenLogoPulse{
  0%,100%{
    opacity:.90;
    filter:drop-shadow(0 0 3px rgba(47,134,255,.45))
           drop-shadow(0 0 8px rgba(29,92,214,.20));
  }
  50%{
    opacity:1;
    filter:drop-shadow(0 0 5px rgba(88,178,255,.72))
           drop-shadow(0 0 14px rgba(29,92,214,.36));
  }
}

/* Le header/logo principal garde son animation existante. */

/* Responsive : masquer l'overlay si le cadrage du fond devient trop différent. */
@media(max-width:1100px){
  .screen-logo-overlay{display:none !important}
}


/* =========================================================
   V21 — CORRECTION LOGO ÉCRAN
   ========================================================= */

/* Suppression définitive du logo HTML superposé.
   On conserve uniquement le logo qui fait déjà partie de l'image du moniteur. */
.screen-logo-overlay,
.screen-logo-overlay img{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  animation:none !important;
  filter:none !important;
  transform:none !important;
}

/* Image principale propre, sans aucun élément ajouté par-dessus. */
.mock-hero{
  background:
    url("../img/hero-dxf-pro-v17.webp") 73% center / cover no-repeat !important;
}


/* =========================================================
   V22 — RESPONSIVE COMPLET TABLETTE / MOBILE
   ========================================================= */

/* Sécurité globale contre les débordements horizontaux */
html, body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
body *{
  min-width:0;
}
img, video, svg{
  max-width:100%;
  height:auto;
}

/* HEADER RESPONSIVE */
@media(max-width:900px){
  .mock-header{
    height:auto !important;
    min-height:78px !important;
    overflow:visible !important;
  }

  .mock-nav{
    position:relative !important;
    width:min(100% - 24px, 860px) !important;
    max-width:none !important;
    height:78px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  .brand-neon{
    width:205px !important;
    min-width:0 !important;
    height:66px !important;
    flex:0 1 205px !important;
  }

  .brand-neon img{
    height:60px !important;
    width:100% !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .menu-toggle{
    display:flex !important;
    width:48px !important;
    height:44px !important;
    flex:0 0 48px !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:7px !important;
    margin:0 !important;
    border:1px solid rgba(145,170,180,.20) !important;
    border-radius:8px !important;
    background:rgba(14,22,28,.86) !important;
    cursor:pointer !important;
    z-index:102 !important;
  }

  .menu-toggle span:not(.sr-only){
    width:24px !important;
    height:2px !important;
    margin:3px 0 !important;
    background:#e8eef1 !important;
    transition:transform .25s ease, opacity .25s ease !important;
  }

  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1){
    transform:translateY(8px) rotate(45deg) !important;
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2){
    opacity:0 !important;
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3){
    transform:translateY(-8px) rotate(-45deg) !important;
  }

  .mock-main-nav{
    position:absolute !important;
    top:78px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 14px !important;
    background:rgba(8,13,18,.985) !important;
    border:1px solid rgba(108,132,142,.22) !important;
    border-top:0 !important;
    border-radius:0 0 14px 14px !important;
    box-shadow:0 20px 45px rgba(0,0,0,.30) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:max-height .3s ease, opacity .22s ease, padding .3s ease !important;
    z-index:100 !important;
  }

  .mock-main-nav.is-open{
    max-height:420px !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:10px 14px 16px !important;
  }

  .mock-main-nav a{
    width:100% !important;
    display:block !important;
    text-align:left !important;
    padding:14px 10px !important;
    margin:0 !important;
    font-size:.92rem !important;
    line-height:1.2 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    white-space:normal !important;
  }

  .mock-main-nav a:last-child{
    border-bottom:0 !important;
  }

  .mock-main-nav a::after{
    display:none !important;
  }

  .nav-neon-line{
    bottom:0 !important;
  }
}

/* HERO RESPONSIVE */
@media(max-width:900px){
  .mock-hero{
    min-height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:
      linear-gradient(180deg,
        rgba(13,22,28,.88) 0%,
        rgba(13,22,28,.82) 48%,
        rgba(13,22,28,.94) 100%),
      url("../img/hero-dxf-pro-v17.webp") 66% center / cover no-repeat !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .mock-hero::before,
  .mock-hero::after{
    display:none !important;
  }

  .mock-hero-grid{
    width:min(100% - 28px, 860px) !important;
    max-width:none !important;
    min-height:auto !important;
    margin:0 auto !important;
    padding:46px 0 44px !important;
    display:block !important;
  }

  .mock-hero-copy{
    width:100% !important;
    max-width:650px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .mock-hero h1{
    max-width:100% !important;
    font-size:clamp(2.45rem,8vw,4rem) !important;
    line-height:1.02 !important;
  }

  .mock-lead{
    max-width:100% !important;
    font-size:1rem !important;
  }

  .mock-benefits{
    max-width:100% !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:16px !important;
  }

  .mock-actions{
    flex-wrap:wrap !important;
  }

  .mock-btn{
    flex:1 1 210px !important;
    min-width:0 !important;
  }
}

/* CARTES SERVICES */
@media(max-width:1100px){
  .mock-services{
    width:min(100% - 28px, 1000px) !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:24px !important;
  }

  .mock-service-card:last-child{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:720px){
  .mock-services{
    width:min(100% - 24px, 680px) !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
    padding-top:36px !important;
  }

  .mock-service-card,
  .mock-service-card:last-child{
    grid-column:auto !important;
    min-height:0 !important;
  }

  .service-photo{
    height:220px !important;
  }

  .service-card-body{
    padding:24px !important;
  }

  .service-card-body h2{
    font-size:1.05rem !important;
  }

  .service-card-body p{
    font-size:.92rem !important;
  }
}

/* BANDEAU 5 AVANTAGES */
@media(max-width:1100px){
  .mock-trust{
    width:min(100% - 28px,1000px) !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:0 !important;
  }

  .trust-item{
    border-right:0 !important;
    border-bottom:1px solid rgba(100,120,130,.25) !important;
    padding:16px 18px !important;
  }
}

@media(max-width:620px){
  .mock-trust{
    width:min(100% - 24px,600px) !important;
    grid-template-columns:1fr !important;
  }

  .trust-item:last-child{
    border-bottom:0 !important;
  }
}

/* GALERIE */
@media(max-width:900px){
  .mock-gallery{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .mock-gallery-row{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:560px){
  .mock-gallery-row{
    grid-template-columns:1fr !important;
  }

  .mock-gallery-row a{
    height:220px !important;
  }
}

/* CONTACT */
@media(max-width:800px){
  .mock-contact-grid{
    width:min(100% - 24px,760px) !important;
    grid-template-columns:1fr !important;
  }

  .mock-contact-grid>div,
  .mock-contact-grid>a{
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    padding:16px 10px !important;
  }

  .mock-contact-grid>*:last-child{
    border-bottom:0 !important;
  }
}

/* FOOTER */
@media(max-width:900px){
  .mock-footer-grid{
    width:min(100% - 24px,860px) !important;
    grid-template-columns:1fr 1fr !important;
    gap:28px !important;
  }
}

@media(max-width:620px){
  .mock-footer-grid{
    grid-template-columns:1fr !important;
  }

  .footer-brand{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .footer-copy{
    text-align:left !important;
  }
}

/* PAGES INTERNES */
@media(max-width:900px){
  .page-hero{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .two-col,
  .split,
  .contact-grid{
    grid-template-columns:1fr !important;
  }

  .service-grid,
  .service-grid.three{
    grid-template-columns:1fr !important;
  }

  .photo-strip{
    grid-template-columns:1fr 1fr !important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:560px){
  .photo-strip{
    grid-template-columns:1fr !important;
  }

  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .page-hero h1{
    font-size:clamp(2.4rem,11vw,3.8rem) !important;
  }
}


/* =========================================================
   V23 — BANDEAU AVANTAGES PLUS PREMIUM ET INTÉGRÉ
   ========================================================= */

/* Le bloc n'est plus une grosse "boîte" posée : il flotte dans la page */
.mock-trust{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  width:min(1480px,calc(100% - 64px)) !important;
  margin:28px auto 66px !important;
  padding:18px 18px !important;
  border:0 !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg,rgba(30,43,50,.82),rgba(21,31,37,.78)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(10px);
}

/* Halo général très léger */
.mock-trust::before{
  content:"" !important;
  position:absolute !important;
  inset:-40% -10% !important;
  z-index:-2 !important;
  background:
    radial-gradient(circle at 18% 50%,rgba(93,207,220,.10),transparent 24%),
    radial-gradient(circle at 80% 50%,rgba(84,158,190,.08),transparent 22%),
    linear-gradient(90deg,transparent,rgba(103,190,203,.05),transparent);
  animation:trustAmbient 9s ease-in-out infinite;
}
@keyframes trustAmbient{
  0%,100%{transform:translateX(-2%);opacity:.62}
  50%{transform:translateX(2%);opacity:1}
}

/* Ligne lumineuse mobile très discrète */
.mock-trust::after{
  content:"" !important;
  position:absolute !important;
  left:-18% !important;
  top:0 !important;
  width:26% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,#7bd4de,transparent) !important;
  box-shadow:0 0 12px rgba(105,210,221,.55) !important;
  animation:trustSweep 8s linear infinite;
}
@keyframes trustSweep{
  from{transform:translateX(0)}
  to{transform:translateX(500%)}
}

/* Chaque élément devient une mini-zone indépendante */
.trust-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:48px 1fr !important;
  gap:14px !important;
  align-items:center !important;
  padding:18px 20px !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:14px !important;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    background .32s ease,
    box-shadow .32s ease !important;
}

.trust-item::before{
  content:"" !important;
  position:absolute !important;
  inset:6px !important;
  z-index:-1 !important;
  border-radius:12px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)) !important;
  border:1px solid rgba(122,151,161,.11) !important;
  opacity:.8;
  transition:opacity .28s ease,border-color .28s ease !important;
}

.trust-item:hover{
  transform:translateY(-4px) !important;
  background:rgba(91,131,142,.07) !important;
  box-shadow:0 14px 26px rgba(0,0,0,.13) !important;
}
.trust-item:hover::before{
  opacity:1;
  border-color:rgba(109,198,210,.28) !important;
}

/* Icônes plus élégantes et plus visibles */
.trust-item>b{
  position:relative !important;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  color:#9bd6dd !important;
  font-size:1.30rem !important;
  text-shadow:0 0 12px rgba(86,199,212,.28) !important;
  transition:transform .32s ease,color .32s ease,text-shadow .32s ease !important;
}
.trust-item>b::before{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:12px !important;
  border:1px solid rgba(105,191,202,.28) !important;
  background:rgba(20,39,46,.62) !important;
  box-shadow:inset 0 0 12px rgba(72,177,190,.05) !important;
  z-index:-1 !important;
}
.trust-item:hover>b{
  transform:translateY(-2px) scale(1.06) !important;
  color:#c2eef2 !important;
  text-shadow:0 0 18px rgba(96,215,227,.48) !important;
}

/* Texte mieux hiérarchisé */
.trust-item span{
  display:block !important;
}
.trust-item strong{
  display:block !important;
  margin:0 0 5px !important;
  color:#edf2f4 !important;
  font-size:.79rem !important;
  line-height:1.25 !important;
  letter-spacing:.02em !important;
}
.trust-item small{
  display:block !important;
  color:#aab6bc !important;
  font-size:.71rem !important;
  line-height:1.48 !important;
}

/* Espacement entre les 5 items */
.mock-trust{
  grid-template-columns:repeat(5,1fr) !important;
  gap:10px !important;
}

/* Responsive */
@media(max-width:1100px){
  .mock-trust{
    width:min(100% - 28px,1000px) !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
    padding:14px !important;
  }
  .trust-item{
    padding:17px 18px !important;
  }
}
@media(max-width:620px){
  .mock-trust{
    width:min(100% - 22px,600px) !important;
    grid-template-columns:1fr !important;
    margin-bottom:48px !important;
  }
  .trust-item{
    grid-template-columns:44px 1fr !important;
    padding:16px !important;
  }
}

/* Accessibilité : pas d'animation forcée si réduction des mouvements demandée */
@media (prefers-reduced-motion:reduce){
  .mock-trust::before,
  .mock-trust::after{
    animation:none !important;
  }
}


/* =========================================================
   V24 — PAGES INTERNES ALIGNÉES SUR L'IDENTITÉ DE L'ACCUEIL
   ========================================================= */

.site-footer .footer-neon-logo{
  filter:brightness(1.16) contrast(1.12)
    drop-shadow(0 0 5px rgba(32,131,255,.65))
    drop-shadow(0 0 15px rgba(10,91,255,.32)) !important;
  animation:logoNeon 4.4s ease-in-out infinite !important;
  transform-origin:center;
}
.site-footer .footer-neon-logo:hover{
  transform:scale(1.025);
}

/* Hero des pages internes */
.visual-page-hero{
  position:relative;
  width:100%;
  padding:0 !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 30%,rgba(89,199,212,.10),transparent 30%),
    linear-gradient(110deg,#0c141a 0%,#111c23 48%,#14232b 100%) !important;
  border-bottom:1px solid rgba(105,180,192,.18);
}
.visual-page-grid{
  min-height:520px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:58px;
  padding:70px 0;
}
.visual-page-copy{position:relative;z-index:3}
.visual-page-copy .eyebrow{
  color:#8ed0d9 !important;
  letter-spacing:.20em;
}
.visual-page-copy h1{
  color:#f3f5f6 !important;
  font-size:clamp(3rem,5.6vw,5.4rem) !important;
  line-height:.98 !important;
  max-width:780px !important;
  margin-bottom:24px !important;
}
.visual-page-copy>p:last-child{
  color:#b9c4ca !important;
  font-size:1.08rem !important;
  line-height:1.65 !important;
  max-width:680px;
}
.visual-page-media{
  position:relative;
  margin:0;
  min-height:390px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(112,149,160,.30);
  box-shadow:0 30px 70px rgba(0,0,0,.30);
  transform:perspective(1100px) rotateY(-2deg);
}
.visual-page-media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,transparent 55%,rgba(5,11,16,.80)),
    linear-gradient(110deg,rgba(7,15,20,.10),transparent 40%);
  pointer-events:none;
}
.visual-page-media img{
  width:100%;height:100%;min-height:390px;object-fit:cover;
  filter:saturate(.98) contrast(1.04) brightness(1.04);
  transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.visual-page-media:hover img{
  transform:scale(1.045);
  filter:saturate(1.04) brightness(1.10);
}
.visual-page-media figcaption{
  position:absolute;left:24px;right:24px;bottom:22px;z-index:2;
  display:grid;gap:3px;color:#fff;
}
.visual-page-media figcaption strong{font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:#b7e4e9}
.visual-page-media figcaption span{font-size:.82rem;color:#c1ccd1}

/* Sections internes moins "Safe Activity", plus graphite/cyan */
body:not(.mock-home) main{
  background:
    radial-gradient(circle at 85% 15%,rgba(68,130,145,.07),transparent 24%),
    linear-gradient(180deg,#111920,#162128 52%,#111a20 100%);
}
body:not(.mock-home) .section{
  background:transparent;
}
body:not(.mock-home) .service-card{
  background:linear-gradient(180deg,#202d35,#172229);
  color:#edf1f3;
  border-color:#465761;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}
body:not(.mock-home) .service-card p{color:#b5c0c6}
body:not(.mock-home) .service-card h2,
body:not(.mock-home) .service-card h3{color:#f3f5f6}
body:not(.mock-home) .service-index{color:#83c8d1}
body:not(.mock-home) .check-list li{color:#c7d0d5}
body:not(.mock-home) .check-list li::before{
  background:#73bec8;box-shadow:0 0 0 5px rgba(115,190,200,.10)
}
body:not(.mock-home) .media-frame{
  border:1px solid #485a64;
  background:#172229;
}
body:not(.mock-home) .dark-band{
  background:
    radial-gradient(circle at 75% 20%,rgba(76,147,161,.10),transparent 24%),
    linear-gradient(180deg,#17242b,#0e171d 55%,#17242b) !important;
}
body:not(.mock-home) .dark-band::after{display:none}
body:not(.mock-home) .spec-cards div{
  background:#1c2930;border-color:#485a63;
}
body:not(.mock-home) .pro-banner{
  background:linear-gradient(135deg,#23323a,#17242b);
  color:#eff3f5;
  border-color:#4b5e67;
}
body:not(.mock-home) .pro-banner p{color:#b7c1c7}
body:not(.mock-home) .btn-primary{
  background:linear-gradient(135deg,#47616a,#63808a);
  box-shadow:0 12px 30px rgba(0,0,0,.20);
}

/* Galerie */
body:not(.mock-home) .gallery-filters button{
  background:#1a252c;color:#cbd4d8;border-color:#485861;
}
body:not(.mock-home) .gallery-filters button.is-active{
  background:#6b8992;color:#fff;border-color:#7da0aa;
}
body:not(.mock-home) .work-card{
  background:#1b272e;border-color:#41535d;color:#eef2f4;
}
body:not(.mock-home) .work-card small{color:#7ec6d0}

/* Pages légales */
.legal-visual-hero{
  padding:90px max(20px,calc((100% - 1180px)/2)) 70px !important;
  background:
    radial-gradient(circle at 80% 20%,rgba(84,156,170,.12),transparent 28%),
    linear-gradient(110deg,#0e171d,#18262d) !important;
}
.legal-visual-hero h1{color:#f1f4f5 !important}
.legal-copy{
  max-width:960px !important;
  padding:70px 0 100px;
  color:#c7d0d5;
}
.legal-copy h2{color:#f0f3f5;border-top:1px solid rgba(116,146,158,.22);padding-top:28px}
.legal-copy p{color:#aebac0 !important}
.legal-provider,.mediator-card{
  display:grid !important;
  grid-template-columns:180px 1fr;
  gap:30px;
  align-items:center;
  padding:28px !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,#202d34,#172229) !important;
  border:1px solid #455862 !important;
  color:#e8edef;
}
.legal-provider p,.mediator-card p{color:#b8c3c8 !important}
.mediator-mark{
  width:150px;height:110px;border-radius:18px;
  display:grid;place-items:center;
  background:
    radial-gradient(circle,rgba(87,196,208,.14),transparent 62%),
    #111a20;
  border:1px solid #45616a;
}
.mediator-mark span{
  font-size:4rem;color:#8bd0d8;
  text-shadow:0 0 18px rgba(75,188,202,.30)
}
.mediator-card h3{margin:0 0 12px;color:#f1f4f5}
.legal-action{
  display:inline-flex;margin-top:8px;padding:10px 15px;border-radius:8px;
  border:1px solid #63838c;background:#1b2d34;color:#cbe8ec;font-weight:800
}

/* Apparition douce des éléments internes */
.visual-page-media,.service-card,.media-frame,.spec-cards>div,.work-card{
  animation:pageFadeIn .65s ease both;
}
@keyframes pageFadeIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:900px){
  .visual-page-grid{
    grid-template-columns:1fr;
    min-height:auto;
    gap:34px;
    padding:52px 0;
  }
  .visual-page-media{min-height:320px;transform:none}
  .visual-page-media img{min-height:320px}
  .legal-provider,.mediator-card{grid-template-columns:1fr}
}


/* =========================================================
   V25 — BANDEAU AVANTAGES REDESSINÉ EN "LIGNE DE CONFIANCE"
   ========================================================= */

/* Le gros pavé disparaît : on crée une ligne de confiance intégrée au fond. */
.mock-trust{
  position:relative !important;
  isolation:isolate !important;
  width:min(1460px,calc(100% - 72px)) !important;
  max-width:none !important;
  margin:42px auto 76px !important;
  padding:36px 8px 24px !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:24px !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:visible !important;
}

/* Rail horizontal fin qui relie visuellement les 5 engagements. */
.mock-trust::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:7% !important;
  right:7% !important;
  top:58px !important;
  height:1px !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(91,137,149,.22) 7%,
      rgba(116,182,194,.38) 50%,
      rgba(91,137,149,.22) 93%,
      transparent 100%) !important;
  box-shadow:0 0 12px rgba(82,164,178,.08) !important;
}

/* Petit point lumineux qui circule lentement sur le rail. */
.mock-trust::after{
  content:"" !important;
  position:absolute !important;
  left:6% !important;
  top:55px !important;
  z-index:2 !important;
  width:70px !important;
  height:7px !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse,#b9f0f4 0%,rgba(103,211,221,.64) 22%,transparent 72%) !important;
  filter:blur(.3px) drop-shadow(0 0 8px rgba(96,205,216,.45)) !important;
  opacity:.66 !important;
  animation:trustRailLight 10s ease-in-out infinite !important;
}
@keyframes trustRailLight{
  0%,100%{transform:translateX(0);opacity:.26}
  50%{transform:translateX(calc(1250px - 100%));opacity:.76}
}

/* Chaque engagement devient une vraie unité éditoriale, sans mini-carte. */
.trust-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:72px auto !important;
  align-items:start !important;
  justify-items:center !important;
  gap:14px !important;
  padding:0 18px !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1) !important;
}

/* Neutraliser les anciennes pseudo-cartes. */
.trust-item::before,
.trust-item::after{
  display:none !important;
  content:none !important;
}

.trust-item:hover{
  transform:translateY(-5px) !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Icône : médaillon hexagonal/tech sobre, suspendu au-dessus du rail. */
.trust-item>b{
  position:relative !important;
  z-index:4 !important;
  width:58px !important;
  height:58px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 auto !important;

  color:#bfe7eb !important;
  font-size:1.32rem !important;
  line-height:1 !important;
  border:1px solid rgba(118,181,191,.52) !important;
  border-radius:16px !important;
  background:
    linear-gradient(145deg,rgba(38,57,65,.98),rgba(20,31,37,.98)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 6px rgba(79,137,148,.035) !important;
  text-shadow:none !important;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .32s ease,
    box-shadow .32s ease,
    color .32s ease !important;
}

/* Supprimer l'ancien cadre interne de l'icône. */
.trust-item>b::before,
.trust-item>b::after{
  display:none !important;
  content:none !important;
}

.trust-item:hover>b{
  transform:translateY(-3px) scale(1.055) !important;
  color:#eefcfd !important;
  border-color:rgba(139,220,229,.78) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 24px rgba(83,184,197,.14),
    0 0 0 7px rgba(79,137,148,.045) !important;
}

/* Bloc texte centré et hiérarchisé. */
.trust-item span{
  display:block !important;
  width:100% !important;
  text-align:center !important;
}

.trust-item strong{
  display:block !important;
  margin:0 0 7px !important;
  color:#eef2f4 !important;
  font-size:.79rem !important;
  line-height:1.28 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}

.trust-item small{
  display:block !important;
  max-width:190px !important;
  margin:0 auto !important;
  color:#9caab1 !important;
  font-size:.73rem !important;
  line-height:1.55 !important;
}

/* Fine séparation verticale entre les engagements, très discrète. */
.trust-item:not(:last-child) span{
  position:relative !important;
}
.trust-item:not(:last-child) span::after{
  content:"" !important;
  position:absolute !important;
  top:-5px !important;
  right:-30px !important;
  width:1px !important;
  height:48px !important;
  background:linear-gradient(180deg,transparent,rgba(106,132,142,.20),transparent) !important;
}

/* Halo local au survol pour donner de la vie sans "gaming excessif". */
.trust-item:hover span{
  text-shadow:0 0 18px rgba(111,194,204,.06);
}

/* Variante responsive tablette : 2 colonnes puis 1 colonne,
   sans casser le rail. */
@media(max-width:1100px){
  .mock-trust{
    width:min(100% - 30px,980px) !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:30px 24px !important;
    padding:24px 0 10px !important;
  }

  .mock-trust::before,
  .mock-trust::after{
    display:none !important;
  }

  .trust-item{
    grid-template-columns:68px 1fr !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    justify-items:start !important;
    gap:18px !important;
    padding:18px 20px !important;
    border:1px solid rgba(100,127,138,.20) !important;
    border-radius:16px !important;
    background:rgba(28,41,48,.48) !important;
  }

  .trust-item span{
    text-align:left !important;
  }

  .trust-item small{
    max-width:none !important;
    margin:0 !important;
  }

  .trust-item:not(:last-child) span::after{
    display:none !important;
  }
}

@media(max-width:620px){
  .mock-trust{
    width:min(100% - 22px,600px) !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:28px auto 50px !important;
  }

  .trust-item{
    grid-template-columns:58px 1fr !important;
    gap:15px !important;
    padding:16px !important;
  }

  .trust-item>b{
    width:50px !important;
    height:50px !important;
    border-radius:14px !important;
  }

  .trust-item strong{
    font-size:.76rem !important;
  }

  .trust-item small{
    font-size:.72rem !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mock-trust::after{
    animation:none !important;
  }
}


/* =========================================================
   V26 — LÉGAL COMPLET + CONTACT PREMIUM
   ========================================================= */

.legal-pro{max-width:1000px !important}
.legal-pro a{color:#9edbe2;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-pro h2{margin-top:46px !important}
.legal-pro h3{color:#edf2f4;margin-top:28px}
.legal-summary-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 48px;
}
.legal-summary-grid article{
  padding:20px;border:1px solid #43545e;border-radius:15px;
  background:linear-gradient(145deg,#1d2a31,#172229);display:grid;gap:4px;
}
.legal-summary-grid span{font-size:.68rem;letter-spacing:.14em;color:#87cbd4;text-transform:uppercase;font-weight:800}
.legal-summary-grid strong{color:#eef2f4}
.legal-summary-grid small{color:#9eabb1}
.legal-note{padding:10px 13px;border-left:2px solid #6daeb8;background:rgba(75,130,140,.07)}
.legal-callout,.privacy-intro{
  padding:22px 24px;border:1px solid #4c616a;border-radius:17px;
  background:linear-gradient(145deg,#213038,#172229);margin-bottom:42px;color:#e7edef;
}
.legal-callout strong,.privacy-intro strong{color:#9fdbe2;text-transform:uppercase;letter-spacing:.08em}
.legal-callout p,.privacy-intro p{margin-bottom:0;color:#bac5ca !important}
.withdrawal-box{
  padding:24px;border:1px dashed #66808a;border-radius:14px;
  background:#141f25;margin:16px 0 32px;
}
.legal-table-wrap{overflow-x:auto;border:1px solid #40535d;border-radius:14px}
.legal-table{width:100%;border-collapse:collapse;background:#172229;color:#c8d1d5}
.legal-table th,.legal-table td{padding:15px 17px;text-align:left;border-bottom:1px solid #354750}
.legal-table th{background:#202f36;color:#eaf0f2}
.legal-table tr:last-child td{border-bottom:0}

/* Contact premium */
.contact-premium{
  position:relative;padding:72px 0 64px;overflow:hidden;
  background:
    radial-gradient(circle at 15% 10%,rgba(86,173,188,.10),transparent 28%),
    radial-gradient(circle at 85% 90%,rgba(58,111,143,.10),transparent 25%),
    linear-gradient(180deg,#0e181f,#131f26);
  border-top:1px solid rgba(105,153,165,.20);
  border-bottom:1px solid rgba(105,153,165,.17);
}
.contact-premium::before{
  content:"";position:absolute;left:-20%;right:-20%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#89d3dc,transparent);
  filter:drop-shadow(0 0 7px rgba(99,199,211,.45));
  animation:contactSweep 9s linear infinite;
}
@keyframes contactSweep{from{transform:translateX(-18%)}to{transform:translateX(18%)}}
.contact-premium-head{
  display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:30px
}
.contact-premium-head>div:first-child span{
  display:block;color:#80c7d1;font-size:.68rem;letter-spacing:.18em;font-weight:900;margin-bottom:7px
}
.contact-premium-head h2{margin:0 0 8px;color:#eff3f4;font-size:clamp(1.9rem,3vw,3rem);letter-spacing:-.03em}
.contact-premium-head p{margin:0;color:#9eabb1;max-width:680px}
.contact-status{display:grid;grid-template-columns:10px 1fr;column-gap:10px;align-items:center;padding:13px 17px;border:1px solid #455962;border-radius:13px;background:rgba(27,41,48,.55)}
.contact-status i{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#72c5cf;box-shadow:0 0 14px rgba(95,205,217,.65)}
.contact-status strong{color:#e9edef;font-size:.78rem}
.contact-status small{color:#87959c;font-size:.68rem}
.contact-premium-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.contact-premium-card{
  min-height:116px;display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;
  padding:22px;border:1px solid #43565f;border-radius:18px;
  background:linear-gradient(145deg,rgba(36,52,60,.92),rgba(22,33,39,.94));
  color:inherit;text-decoration:none !important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease;
}
.contact-premium-card:hover{transform:translateY(-5px);border-color:#6e929c;box-shadow:0 18px 36px rgba(0,0,0,.20)}
.cp-icon{
  width:52px;height:52px;display:grid;place-items:center;border-radius:15px;
  border:1px solid #5a7a84;background:#17262d;color:#aee4e9;font-size:1.25rem;
  box-shadow:inset 0 0 12px rgba(88,190,201,.05)
}
.gmail-mark{font-weight:900;font-family:Arial,sans-serif}
.contact-premium-card span:nth-child(2){display:grid;gap:3px}
.contact-premium-card small{font-size:.62rem;letter-spacing:.13em;color:#82c5ce;font-weight:900}
.contact-premium-card strong{font-size:.94rem;color:#f0f3f4}
.contact-premium-card em{font-size:.69rem;color:#919fa6;font-style:normal}
.contact-premium-card b{color:#9edbe2;font-size:1.1rem}
.contact-email-line{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;color:#809098;font-size:.70rem}
.contact-email-line i{width:4px;height:4px;border-radius:50%;background:#6fc0ca}
.contact-email-line span:first-child{color:#aacdd2}

/* Footer plus riche */
.site-footer .footer-grid{grid-template-columns:1.2fr .8fr .75fr !important}
.footer-legal{gap:6px}

/* responsive */
@media(max-width:900px){
  .legal-summary-grid{grid-template-columns:1fr}
  .contact-premium-head{align-items:flex-start;flex-direction:column}
  .contact-premium-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .contact-premium{padding:54px 0 46px}
  .contact-premium-card{grid-template-columns:48px 1fr auto;padding:17px}
  .cp-icon{width:46px;height:46px}
  .contact-email-line{flex-wrap:wrap;text-align:center}
}
@media(prefers-reduced-motion:reduce){.contact-premium::before{animation:none !important}}


/* =========================================================
   V28 — CONTACT ÉPURÉ / FOOTER COMPACT / LUMIÈRE SOURIS
   ========================================================= */

/* --- Suppression visuelle du petit bloc isolé --- */
.contact-status{
  display:none !important;
}

/* Le titre du contact utilise toute la largeur désormais. */
.contact-premium-head{
  display:block !important;
  max-width:980px !important;
}
.contact-premium-head>div:first-child{
  max-width:860px !important;
}

/* Email affiché directement dans la carte "Écrire". */
.mail-card strong{
  font-size:.86rem !important;
  overflow-wrap:anywhere !important;
}
.contact-email-line{
  display:none !important;
}

/* --- Footer beaucoup plus fin et plus propre --- */
.compact-footer{
  padding:18px 0 10px !important;
  background:
    linear-gradient(180deg,#0b1217,#080d11) !important;
  border-top:1px solid rgba(105,145,158,.18) !important;
}

.compact-footer-main{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:34px !important;
  min-height:62px !important;
}

.compact-footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
}

.compact-footer-brand .footer-logo{
  width:132px !important;
  height:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

.compact-footer-brand span{
  color:#8d9aa1 !important;
  font-size:.70rem !important;
  white-space:nowrap !important;
}

.compact-footer-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:18px !important;
}

.compact-footer-links a{
  color:#aab4ba !important;
  font-size:.69rem !important;
  text-decoration:none !important;
  transition:color .24s ease,text-shadow .24s ease !important;
}

.compact-footer-links a:hover{
  color:#dff7f9 !important;
  text-shadow:0 0 10px rgba(103,205,217,.20) !important;
}

.compact-footer-bottom{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:20px !important;
  padding-top:10px !important;
  margin-top:8px !important;
  border-top:1px solid rgba(255,255,255,.045) !important;
  color:#65737a !important;
  font-size:.61rem !important;
}

/* On conserve l'animation néon du logo dans le footer. */
.compact-footer .footer-neon-logo{
  animation:logoNeon 4.4s ease-in-out infinite !important;
  filter:
    brightness(1.14)
    contrast(1.10)
    drop-shadow(0 0 5px rgba(32,131,255,.58))
    drop-shadow(0 0 13px rgba(10,91,255,.26)) !important;
}

/* --- Halo de lumière qui suit la souris --- */
.pointer-glow{
  position:fixed !important;
  z-index:9998 !important;
  left:0 !important;
  top:0 !important;
  width:380px !important;
  height:380px !important;
  margin-left:-190px !important;
  margin-top:-190px !important;
  border-radius:50% !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    radial-gradient(circle,
      rgba(130,220,230,.115) 0%,
      rgba(90,180,195,.070) 28%,
      rgba(62,125,145,.030) 50%,
      transparent 72%) !important;
  mix-blend-mode:screen !important;
  filter:blur(2px) !important;
  transition:opacity .22s ease !important;
  transform:translate3d(-1000px,-1000px,0);
}

.pointer-glow.is-visible{
  opacity:1 !important;
}

/* Un peu de vie supplémentaire sur les cartes au passage de la souris. */
.contact-premium-card,
.mock-service-card,
.trust-item,
.work-card,
.service-card{
  position:relative !important;
}

.contact-premium-card::after,
.mock-service-card::after,
.work-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    radial-gradient(circle at var(--local-x,50%) var(--local-y,50%),
      rgba(123,216,226,.09),
      transparent 38%) !important;
  opacity:0 !important;
  transition:opacity .25s ease !important;
}

.contact-premium-card:hover::after,
.mock-service-card:hover::after,
.work-card:hover::after{
  opacity:1 !important;
}

@media(max-width:900px){
  .compact-footer-main{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .compact-footer-links{
    justify-content:flex-start !important;
    gap:14px 18px !important;
  }

  .compact-footer-bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:5px !important;
  }

  .compact-footer-brand span{
    white-space:normal !important;
  }
}

@media(max-width:620px){
  .compact-footer{
    padding-top:14px !important;
  }

  .compact-footer-brand .footer-logo{
    width:118px !important;
  }

  .compact-footer-links{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
  }
}

@media(pointer:coarse), (prefers-reduced-motion:reduce){
  .pointer-glow{
    display:none !important;
  }
}


/* =========================================================
   V29 — PAGE PC SUR MESURE : LISIBILITÉ + ANIMATIONS
   ========================================================= */

/* ---------- TITRES : beaucoup plus lisibles ---------- */
.pc-custom-page .section h2,
.pc-custom-page .section h3,
.pc-custom-page .dark-band h2,
.pc-custom-page .dark-band h3,
.pc-custom-page .spec-cards h3{
  color:#f4f7f8 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 0 18px rgba(109,194,205,.08) !important;
}

.pc-custom-page .section .eyebrow,
.pc-custom-page .dark-band .eyebrow{
  color:#8fd2da !important;
}

.pc-custom-page .section p,
.pc-custom-page .dark-band p,
.pc-custom-page .section li{
  color:#b9c4ca !important;
}

/* Gros titre de section mieux détaché du fond */
.pc-custom-page .split h2,
.pc-custom-page .section-copy h2{
  font-size:clamp(2rem,3.6vw,3.6rem) !important;
  line-height:1.06 !important;
  letter-spacing:-.025em !important;
  color:#f3f6f7 !important;
  max-width:760px !important;
  margin-bottom:22px !important;
}

/* Ajout d'un fond local doux derrière le texte sombre */
.pc-custom-page .split-copy,
.pc-custom-page .section-copy{
  position:relative !important;
  z-index:2 !important;
}
.pc-custom-page .split-copy::before,
.pc-custom-page .section-copy::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-28px -34px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 20% 20%,rgba(90,159,171,.065),transparent 38%),
    linear-gradient(145deg,rgba(20,31,37,.56),rgba(18,28,34,.18)) !important;
  border:1px solid rgba(103,133,143,.08) !important;
  pointer-events:none !important;
}

/* ---------- LES 3 BLOCS : PLUS VIVANTS ---------- */
.pc-custom-page .spec-cards{
  gap:18px !important;
}

.pc-custom-page .spec-cards > div{
  position:relative !important;
  overflow:hidden !important;
  padding:28px 30px !important;
  border-radius:18px !important;
  background:
    linear-gradient(145deg,#223139 0%,#182329 100%) !important;
  border:1px solid #465a64 !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s ease,
    border-color .38s ease,
    background .38s ease !important;
}

.pc-custom-page .spec-cards > div::before{
  content:"" !important;
  position:absolute !important;
  inset:-60% -30% !important;
  background:
    linear-gradient(120deg,
      transparent 35%,
      rgba(125,218,227,.09) 48%,
      transparent 61%) !important;
  transform:translateX(-55%) rotate(7deg);
  transition:transform .85s ease !important;
  pointer-events:none !important;
}

.pc-custom-page .spec-cards > div::after{
  content:"" !important;
  position:absolute !important;
  left:24px !important;
  right:24px !important;
  bottom:0 !important;
  height:1px !important;
  background:
    linear-gradient(90deg,transparent,#79c8d1,transparent) !important;
  opacity:.22 !important;
  filter:drop-shadow(0 0 6px rgba(91,194,206,.34)) !important;
  transition:opacity .3s ease,transform .3s ease !important;
}

.pc-custom-page .spec-cards > div:hover{
  transform:translateY(-8px) !important;
  border-color:#6e8c95 !important;
  background:
    linear-gradient(145deg,#283a43 0%,#1b282e 100%) !important;
  box-shadow:
    0 26px 54px rgba(0,0,0,.24),
    0 0 24px rgba(78,164,177,.075) !important;
}

.pc-custom-page .spec-cards > div:hover::before{
  transform:translateX(55%) rotate(7deg) !important;
}

.pc-custom-page .spec-cards > div:hover::after{
  opacity:.72 !important;
  transform:scaleX(1.05) !important;
}

.pc-custom-page .spec-cards h3{
  margin-bottom:10px !important;
  font-size:1.07rem !important;
}

.pc-custom-page .spec-cards p{
  margin:0 !important;
  font-size:.93rem !important;
  line-height:1.55 !important;
  color:#b8c4c9 !important;
}

/* Apparition progressive des 3 blocs */
.pc-custom-page .spec-cards > div{
  opacity:0;
  transform:translateY(20px);
}
.pc-custom-page .spec-cards > div.is-visible{
  opacity:1;
  transform:translateY(0);
}
.pc-custom-page .spec-cards > div:nth-child(2){transition-delay:.08s !important}
.pc-custom-page .spec-cards > div:nth-child(3){transition-delay:.16s !important}

/* ---------- PHOTOS : ZOOM AU SURVOL ---------- */
.pc-custom-page .media-frame,
.pc-custom-page .photo-strip > *,
.pc-custom-page .gallery-tile,
.pc-custom-page .work-card,
.pc-custom-page .visual-page-media{
  overflow:hidden !important;
}

.pc-custom-page .media-frame img,
.pc-custom-page .photo-strip img,
.pc-custom-page .gallery-tile img,
.pc-custom-page .work-card img,
.pc-custom-page .visual-page-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:
    transform .72s cubic-bezier(.2,.8,.2,1),
    filter .45s ease !important;
  will-change:transform;
}

.pc-custom-page .media-frame:hover img,
.pc-custom-page .photo-strip > *:hover img,
.pc-custom-page .gallery-tile:hover img,
.pc-custom-page .work-card:hover img,
.pc-custom-page .visual-page-media:hover img{
  transform:scale(1.075) !important;
  filter:brightness(1.08) saturate(1.06) contrast(1.03) !important;
}

/* petit halo au passage */
.pc-custom-page .media-frame,
.pc-custom-page .photo-strip > *,
.pc-custom-page .visual-page-media{
  position:relative !important;
}
.pc-custom-page .media-frame::after,
.pc-custom-page .photo-strip > *::after,
.pc-custom-page .visual-page-media::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at var(--photo-x,50%) var(--photo-y,50%),
      rgba(140,224,232,.10),
      transparent 38%) !important;
  opacity:0 !important;
  transition:opacity .3s ease !important;
}
.pc-custom-page .media-frame:hover::after,
.pc-custom-page .photo-strip > *:hover::after,
.pc-custom-page .visual-page-media:hover::before{
  opacity:1 !important;
}

/* Listes : mieux lisibles */
.pc-custom-page .check-list{
  gap:12px !important;
}
.pc-custom-page .check-list li{
  font-size:.99rem !important;
  line-height:1.45 !important;
}
.pc-custom-page .check-list li::before{
  background:#8ad1da !important;
  box-shadow:
    0 0 0 6px rgba(107,189,200,.10),
    0 0 14px rgba(105,198,209,.15) !important;
}

/* Bouton réalisations un peu plus vivant */
.pc-custom-page .btn-primary{
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease !important;
}
.pc-custom-page .btn-primary:hover{
  transform:translateY(-3px) !important;
  background:linear-gradient(135deg,#59747e,#71909a) !important;
  box-shadow:
    0 15px 32px rgba(0,0,0,.22),
    0 0 20px rgba(100,196,207,.08) !important;
}

/* Responsive */
@media(max-width:900px){
  .pc-custom-page .split-copy::before,
  .pc-custom-page .section-copy::before{
    inset:-20px !important;
  }
  .pc-custom-page .spec-cards{
    grid-template-columns:1fr !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .pc-custom-page .spec-cards > div{
    opacity:1 !important;
    transform:none !important;
  }
  .pc-custom-page .media-frame img,
  .pc-custom-page .photo-strip img,
  .pc-custom-page .visual-page-media img{
    transition:none !important;
  }
}


/* =========================================================
   V30 — CONTACT / FOOTER / PAGE PROFESSIONNELS
   ========================================================= */

/* ---------------------------------------------------------
   CONTACT : éviter le mot "message" isolé sur une deuxième ligne
   --------------------------------------------------------- */
.contact-premium-head{
  max-width:1180px !important;
}
.contact-premium-head>div:first-child{
  max-width:1100px !important;
}
.contact-premium-head p{
  max-width:1050px !important;
  white-space:nowrap !important;
}

@media(max-width:1080px){
  .contact-premium-head p{
    white-space:normal !important;
  }
}

/* ---------------------------------------------------------
   FOOTER : dernière ligne centrée
   --------------------------------------------------------- */
.compact-footer-bottom{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding-top:10px !important;
  margin-top:8px !important;
}
.compact-footer-bottom span{
  width:100% !important;
  text-align:center !important;
}

/* ---------------------------------------------------------
   PROFESSIONNELS : refonte complète des 4 services
   --------------------------------------------------------- */
.pro-services-section{
  padding-top:84px !important;
  padding-bottom:96px !important;
}

.pro-services-intro{
  max-width:850px;
  margin:0 auto 46px;
  text-align:center;
}
.pro-services-intro .eyebrow{
  color:#87cbd4 !important;
  letter-spacing:.18em;
}
.pro-services-intro h2{
  margin:8px 0 14px !important;
  color:#f2f5f6 !important;
  font-size:clamp(2rem,3.5vw,3.5rem) !important;
  line-height:1.06 !important;
  letter-spacing:-.03em !important;
}
.pro-services-intro p:last-child{
  max-width:720px;
  margin:0 auto;
  color:#abb7bd !important;
  font-size:1rem;
  line-height:1.7;
}

.pro-service-showcase{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}

.pro-service-card{
  position:relative;
  min-height:430px;
  overflow:hidden;
  display:grid;
  grid-template-rows:230px 1fr;
  border-radius:24px;
  border:1px solid rgba(104,139,151,.38);
  background:
    linear-gradient(150deg,rgba(34,49,57,.98),rgba(20,30,36,.98));
  box-shadow:
    0 24px 55px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.025);
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .62s ease,
    transform .62s cubic-bezier(.2,.8,.2,1),
    border-color .36s ease,
    box-shadow .36s ease;
}

.pro-service-card.is-visible{
  opacity:1;
  transform:translateY(0);
}
.pro-service-card:nth-child(2){transition-delay:.07s}
.pro-service-card:nth-child(3){transition-delay:.12s}
.pro-service-card:nth-child(4){transition-delay:.17s}

.pro-service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(124,196,207,.66);
  box-shadow:
    0 30px 68px rgba(0,0,0,.27),
    0 0 28px rgba(83,172,186,.08);
}

/* image */
.pro-card-media{
  position:relative;
  overflow:hidden;
  background:#0b141a;
}
.pro-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 52%,rgba(14,23,29,.68) 100%),
    radial-gradient(circle at var(--pro-x,50%) var(--pro-y,50%),
      rgba(141,225,233,.12),
      transparent 36%);
  opacity:.7;
  transition:opacity .32s ease;
}
.pro-service-card:hover .pro-card-media::after{
  opacity:1;
}
.pro-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.95) contrast(1.04) brightness(.97);
  transform:scale(1.01);
  transition:
    transform .85s cubic-bezier(.2,.8,.2,1),
    filter .5s ease;
}
.pro-service-card:hover .pro-card-media img{
  transform:scale(1.075);
  filter:saturate(1.04) contrast(1.05) brightness(1.07);
}

.pro-card-index{
  position:absolute;
  z-index:2;
  top:18px;
  right:20px;
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0 10px;
  border-radius:13px;
  border:1px solid rgba(134,205,215,.38);
  background:rgba(10,21,27,.76);
  color:#a9e2e8;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  backdrop-filter:blur(7px);
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}

/* contenu */
.pro-card-content{
  position:relative;
  padding:30px 32px 32px;
}
.pro-card-kicker{
  display:block;
  margin-bottom:8px;
  color:#81c7d0;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.pro-card-content h2{
  margin:0 0 11px !important;
  color:#f2f5f6 !important;
  font-size:1.45rem !important;
  line-height:1.18 !important;
}
.pro-card-content p{
  margin:0;
  max-width:570px;
  color:#b4bfc4 !important;
  font-size:.94rem !important;
  line-height:1.65 !important;
}
.pro-card-line{
  position:absolute;
  left:32px;
  bottom:20px;
  width:70px;
  height:1px;
  background:linear-gradient(90deg,#8ad2db,transparent);
  box-shadow:0 0 8px rgba(110,209,220,.25);
  transition:width .4s ease,opacity .4s ease;
  opacity:.45;
}
.pro-service-card:hover .pro-card-line{
  width:135px;
  opacity:.9;
}

/* variante lumineuse discrète au survol */
.pro-service-card::before{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  inset:-60% -45%;
  background:
    linear-gradient(115deg,
      transparent 40%,
      rgba(134,224,233,.07) 49%,
      transparent 58%);
  transform:translateX(-65%) rotate(4deg);
  transition:transform 1s ease;
}
.pro-service-card:hover::before{
  transform:translateX(65%) rotate(4deg);
}

/* Page approche : transition plus naturelle après les cartes */
.pro-custom-page .dark-band{
  margin-top:0 !important;
  border-top:1px solid rgba(94,136,148,.15);
}

/* Responsive */
@media(max-width:900px){
  .pro-services-section{
    padding-top:58px !important;
    padding-bottom:70px !important;
  }
  .pro-service-showcase{
    grid-template-columns:1fr;
    gap:22px;
  }
  .pro-service-card{
    min-height:0;
    grid-template-rows:210px auto;
  }
}

@media(max-width:560px){
  .pro-service-card{
    border-radius:18px;
    grid-template-rows:190px auto;
  }
  .pro-card-content{
    padding:24px 22px 28px;
  }
  .pro-card-line{
    left:22px;
    bottom:16px;
  }
}

/* Mouvement réduit */
@media(prefers-reduced-motion:reduce){
  .pro-service-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .pro-card-media img{
    transition:none !important;
  }
}


/* =========================================================
   V31 — FOOTER INTÉGRÉ + APPROCHE PROFESSIONNELS + HTACCESS
   ========================================================= */

/* Footer : tout dans le même bloc, meta centrée au milieu. */
.compact-footer{
  padding:14px 0 12px !important;
}
.compact-footer-main{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  grid-template-areas:
    "brand links"
    "meta meta" !important;
  align-items:center !important;
  gap:10px 30px !important;
  min-height:0 !important;
}
.compact-footer-brand{grid-area:brand !important}
.compact-footer-links{grid-area:links !important}
.compact-footer-meta{
  grid-area:meta !important;
  width:100% !important;
  padding-top:8px !important;
  margin-top:4px !important;
  border-top:1px solid rgba(255,255,255,.045) !important;
  text-align:center !important;
  color:#66757d !important;
  font-size:.61rem !important;
}
.compact-footer-bottom{display:none !important}

/* ---------------------------------------------------------
   APPROCHE PROFESSIONNELS
   --------------------------------------------------------- */
.pro-approach-section{
  position:relative;
  overflow:hidden;
  padding:92px 0 72px;
  background:
    radial-gradient(circle at 78% 32%,rgba(77,155,168,.10),transparent 31%),
    linear-gradient(180deg,#162128 0%,#111a20 100%);
  border-top:1px solid rgba(91,135,146,.16);
}
.pro-approach-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(107,189,200,.025),transparent);
}

.pro-approach-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:58px;
  align-items:center;
}

.pro-approach-copy h2{
  margin:10px 0 22px;
  max-width:720px;
  color:#f2f5f6;
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:1.03;
  letter-spacing:-.035em;
}
.pro-approach-lead{
  max-width:690px;
  margin:0 0 34px;
  color:#b4c0c6;
  font-size:1.02rem;
  line-height:1.7;
}

.pro-approach-points{
  display:grid;
  gap:14px;
}
.pro-approach-points article{
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  align-items:start;
  padding:17px 18px;
  border-radius:15px;
  border:1px solid rgba(95,130,140,.20);
  background:rgba(26,39,46,.44);
  transition:transform .32s ease,border-color .32s ease,background .32s ease;
}
.pro-approach-points article:hover{
  transform:translateX(7px);
  border-color:rgba(117,193,204,.45);
  background:rgba(31,47,54,.66);
}
.pro-approach-points article>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#a9e2e8;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  border:1px solid rgba(121,191,201,.34);
  background:#16262d;
}
.pro-approach-points strong{
  display:block;
  margin:1px 0 5px;
  color:#e9edef;
  font-size:.88rem;
}
.pro-approach-points p{
  margin:0;
  color:#9eabb2;
  font-size:.76rem;
  line-height:1.52;
}

/* grand visuel */
.pro-approach-visual{
  position:relative;
  min-height:500px;
  margin:0;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(103,144,155,.34);
  background:#0e171d;
  box-shadow:0 28px 68px rgba(0,0,0,.27);
}
.pro-approach-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 53%,rgba(6,12,17,.82)),
    radial-gradient(circle at var(--approach-x,50%) var(--approach-y,50%),rgba(130,220,229,.11),transparent 35%);
}
.pro-approach-visual img{
  width:100%;
  height:100%;
  min-height:500px;
  object-fit:cover;
  display:block;
  filter:saturate(.98) contrast(1.04) brightness(1.02);
  transition:transform .85s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.pro-approach-visual:hover img{
  transform:scale(1.065);
  filter:saturate(1.04) contrast(1.04) brightness(1.09);
}
.pro-approach-visual figcaption{
  position:absolute;
  left:28px;
  right:28px;
  bottom:26px;
  z-index:3;
  display:grid;
  gap:5px;
}
.pro-approach-visual figcaption span{
  color:#83cbd4;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.pro-approach-visual figcaption strong{
  max-width:600px;
  color:#f0f3f4;
  font-size:1.05rem;
  line-height:1.4;
}

/* bandeau inférieur */
.pro-approach-strip{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.pro-approach-strip>div{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:66px;
  padding:15px 18px;
  border-top:1px solid rgba(112,160,170,.23);
  background:linear-gradient(180deg,rgba(29,43,50,.36),transparent);
}
.pro-approach-strip span{
  color:#83cad3;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.16em;
}
.pro-approach-strip strong{
  color:#cbd4d8;
  font-size:.77rem;
  font-weight:700;
}

/* Responsive footer et approche */
@media(max-width:900px){
  .compact-footer-main{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "brand"
      "links"
      "meta" !important;
  }

  .pro-approach-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .pro-approach-section{
    padding:64px 0 54px;
  }
  .pro-approach-visual{
    min-height:380px;
  }
  .pro-approach-visual img{
    min-height:380px;
  }
}

@media(max-width:620px){
  .pro-approach-strip{
    grid-template-columns:1fr;
  }
  .pro-approach-points article{
    grid-template-columns:48px 1fr;
  }
  .pro-approach-visual{
    border-radius:20px;
    min-height:320px;
  }
  .pro-approach-visual img{
    min-height:320px;
  }
}

@media(prefers-reduced-motion:reduce){
  .pro-approach-points article,
  .pro-approach-visual img{
    transition:none !important;
  }
}


/* =========================================================
   V32 — FOOTER SUR UNE LIGNE + VISUELS PROFESSIONNELS
   ========================================================= */

/* Footer : logo à gauche, mentions au centre, liens à droite */
.compact-footer-one-line{
  display:grid !important;
  grid-template-columns:minmax(360px,1fr) auto minmax(360px,1fr) !important;
  align-items:center !important;
  gap:26px !important;
  padding:2px 0 !important;
}

.compact-footer-one-line .compact-footer-brand{
  justify-self:start !important;
}
.compact-footer-one-line .compact-footer-meta{
  justify-self:center !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border-top:0 !important;
  white-space:nowrap !important;
  color:#6f7f87 !important;
  font-size:.60rem !important;
  text-align:center !important;
}
.compact-footer-one-line .compact-footer-links{
  justify-self:end !important;
}

.compact-footer{
  padding:12px 0 !important;
}

/* Les deux nouveaux visuels professionnels : plus nets et sobres */
.pro-card-workstation .pro-card-media img,
.pro-card-advice .pro-card-media img{
  filter:saturate(.92) contrast(1.05) brightness(1.03) !important;
  object-position:center center !important;
}

.pro-card-workstation:hover .pro-card-media img,
.pro-card-advice:hover .pro-card-media img{
  filter:saturate(.97) contrast(1.06) brightness(1.08) !important;
}

/* Responsive footer */
@media(max-width:1150px){
  .compact-footer-one-line{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    gap:10px !important;
  }
  .compact-footer-one-line .compact-footer-brand,
  .compact-footer-one-line .compact-footer-meta,
  .compact-footer-one-line .compact-footer-links{
    justify-self:center !important;
  }
  .compact-footer-one-line .compact-footer-brand{
    flex-direction:column !important;
    gap:8px !important;
    text-align:center !important;
  }
  .compact-footer-one-line .compact-footer-links{
    justify-content:center !important;
  }
}


/* =========================================================
   V33 — FOOTER CORRIGÉ
   ========================================================= */

.compact-footer{
  padding:14px 0 12px !important;
  background:linear-gradient(180deg,#0b1217,#080d11) !important;
  border-top:1px solid rgba(105,145,158,.18) !important;
}

.footer-v33{
  width:min(1480px,calc(100% - 56px)) !important;
  max-width:none !important;
  margin:0 auto !important;
}

.footer-v33-top{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:32px !important;
  min-height:64px !important;
}

.footer-v33-brand{
  display:flex !important;
  align-items:center !important;
  gap:20px !important;
  min-width:0 !important;
}

.footer-v33-brand .footer-logo{
  width:145px !important;
  height:auto !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

.footer-v33-brand span{
  color:#94a1a7 !important;
  font-size:.70rem !important;
  line-height:1.35 !important;
  white-space:nowrap !important;
}

.footer-v33-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:22px !important;
  flex-wrap:wrap !important;
}

.footer-v33-links a{
  color:#b0bbc0 !important;
  font-size:.70rem !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  transition:color .25s ease,text-shadow .25s ease !important;
}

.footer-v33-links a:hover{
  color:#e6fafc !important;
  text-shadow:0 0 10px rgba(103,205,217,.20) !important;
}

.footer-v33-meta{
  width:100% !important;
  padding-top:10px !important;
  margin-top:4px !important;
  border-top:1px solid rgba(255,255,255,.05) !important;
  text-align:center !important;
  color:#6f7d84 !important;
  font-size:.61rem !important;
  line-height:1.35 !important;
}

/* On neutralise les anciennes règles de footer des versions précédentes */
.compact-footer-main,
.compact-footer-one-line,
.compact-footer-bottom,
.compact-footer-meta,
.compact-footer-brand,
.compact-footer-links{
  grid-template-areas:unset !important;
}

.compact-footer-bottom{
  display:none !important;
}

/* Tablette */
@media(max-width:1050px){
  .footer-v33-top{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-items:center !important;
  }

  .footer-v33-brand{
    justify-content:center !important;
    text-align:center !important;
  }

  .footer-v33-links{
    justify-content:center !important;
  }

  .footer-v33-brand span{
    white-space:normal !important;
  }
}

/* Mobile */
@media(max-width:620px){
  .footer-v33{
    width:min(100% - 26px,600px) !important;
  }

  .footer-v33-brand{
    flex-direction:column !important;
    gap:8px !important;
  }

  .footer-v33-brand .footer-logo{
    width:125px !important;
  }

  .footer-v33-links{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px 18px !important;
    width:100% !important;
    text-align:center !important;
  }

  .footer-v33-meta{
    font-size:.58rem !important;
  }
}


/* V34 — suppression totale des numéros 01 / 02 / 03 / 04 */
.pro-card-number,
.pro-step-number,
.pro-card-index,
.pro-card-badge,
.pro-number,
.pro-index{
  display:none !important;
}


/* =========================================================
   V35 — CONTACT PLUS CLAIR / PLUS LISIBLE
   Animations conservées
   ========================================================= */

/* Section contact légèrement plus lumineuse */
.contact-premium{
  background:
    radial-gradient(circle at 16% 0%,rgba(133,210,220,.12),transparent 30%),
    radial-gradient(circle at 88% 92%,rgba(95,155,180,.11),transparent 28%),
    linear-gradient(180deg,#17252c 0%,#142128 100%) !important;
}

/* Titre et texte d'introduction plus lisibles */
.contact-premium-head h2{
  color:#f5f7f8 !important;
}
.contact-premium-head p{
  color:#bdc7cc !important;
}
.contact-premium-head>div:first-child span{
  color:#9bd7de !important;
}

/* Les 3 blocs deviennent nettement plus clairs sans passer au blanc */
.contact-premium-card{
  background:
    linear-gradient(145deg,
      rgba(52,69,77,.96) 0%,
      rgba(39,55,63,.97) 52%,
      rgba(29,43,50,.98) 100%) !important;
  border:1px solid rgba(137,171,181,.50) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* halo interne doux pour donner plus de lumière */
.contact-premium-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 18%,
      rgba(161,226,233,.085),
      transparent 28%) !important;
  opacity:.85 !important;
}

/* l'ancien effet local de souris reste actif */
.contact-premium-card::after{
  background:
    radial-gradient(circle at var(--local-x,50%) var(--local-y,50%),
      rgba(151,227,235,.15),
      transparent 40%) !important;
}

/* Survol plus lumineux, animation conservée */
.contact-premium-card:hover{
  transform:translateY(-6px) !important;
  border-color:#86b5bf !important;
  background:
    linear-gradient(145deg,
      rgba(61,82,91,.98),
      rgba(44,63,71,.98)) !important;
  box-shadow:
    0 24px 50px rgba(0,0,0,.22),
    0 0 28px rgba(98,192,204,.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Icônes plus visibles */
.cp-icon{
  background:
    linear-gradient(145deg,#223941,#182b32) !important;
  border:1px solid #6f9aa4 !important;
  color:#d0f2f5 !important;
  box-shadow:
    inset 0 0 14px rgba(105,205,216,.07),
    0 8px 20px rgba(0,0,0,.15) !important;
}
.contact-premium-card:hover .cp-icon{
  border-color:#9cd6dd !important;
  color:#f1ffff !important;
  box-shadow:
    inset 0 0 18px rgba(105,205,216,.10),
    0 0 20px rgba(104,205,216,.16) !important;
}

/* Hiérarchie du texte */
.contact-premium-card small{
  color:#a7dce2 !important;
  font-size:.65rem !important;
}
.contact-premium-card strong{
  color:#ffffff !important;
  font-size:.98rem !important;
}
.contact-premium-card em{
  color:#b7c2c7 !important;
  font-size:.72rem !important;
}
.contact-premium-card b{
  color:#c8edf1 !important;
}

/* gmail : garder un accent discret différent */
.gmail-card .gmail-mark{
  color:#d9f3f6 !important;
}

/* légère variation entre les 3 cartes pour éviter l'effet copier/coller */
.phone-card{
  background:
    linear-gradient(145deg,#344850,#273a42) !important;
}
.mail-card{
  background:
    linear-gradient(145deg,#394c54,#293c43) !important;
}
.gmail-card{
  background:
    linear-gradient(145deg,#354a52,#263940) !important;
}

/* Mobile : conserver la lisibilité */
@media(max-width:700px){
  .contact-premium-card{
    min-height:104px !important;
  }
}


/* =========================================================
   V36 — ICONOGRAPHIE CONTACT
   ========================================================= */
.cp-icon svg{
  width:27px;
  height:27px;
  display:block;
  overflow:visible;
}
.cp-icon-phone svg{
  fill:#d8f7f8;
  filter:drop-shadow(0 0 7px rgba(120,225,232,.28));
}
.cp-icon-mail svg{
  fill:none;
  stroke:#d8f7f8;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(120,225,232,.22));
}
.cp-icon-gmail{
  background:linear-gradient(145deg,#f7fafb,#dce5e8) !important;
  border-color:rgba(215,232,235,.8) !important;
}
.cp-icon-gmail svg{
  width:31px;
  height:24px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));
}
.contact-premium-card:hover .cp-icon-phone svg,
.contact-premium-card:hover .cp-icon-mail svg{
  filter:drop-shadow(0 0 10px rgba(153,239,245,.55));
  transform:scale(1.08);
}
.contact-premium-card:hover .cp-icon-gmail svg{
  transform:scale(1.08);
}
.cp-icon svg{
  transition:transform .28s ease,filter .28s ease;
}


/* =========================================================
   V37 — CONTACT + VISUELS PROFESSIONNELS
   ========================================================= */
.cp-icon{
  position:relative;
  overflow:hidden;
}
.cp-icon-phone,
.cp-icon-mail{
  background:
    radial-gradient(circle at 35% 25%,rgba(124,230,238,.18),transparent 42%),
    linear-gradient(145deg,#213b43,#142a31) !important;
  box-shadow:
    inset 0 0 18px rgba(94,218,228,.08),
    0 0 0 1px rgba(128,225,233,.12),
    0 8px 22px rgba(0,0,0,.18) !important;
}
.cp-icon-phone svg,
.cp-icon-mail svg{
  width:38px !important;
  height:38px !important;
}
.cp-icon-gmail{
  background:#fff !important;
  border-color:rgba(255,255,255,.78) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
.cp-icon-gmail svg{
  width:39px !important;
  height:30px !important;
}
.contact-premium-card:hover .cp-icon{
  transform:translateY(-2px) scale(1.04);
}

/* Les cartes professionnelles utilisent maintenant des photos seules :
   aucun texte ni numéro n'est incrusté dans l'image. */
.pro-service-card .pro-service-media{
  overflow:hidden;
}
.pro-service-card .pro-service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.pro-service-card:hover .pro-service-media img{
  transform:scale(1.045);
  filter:brightness(1.05) contrast(1.03);
}


/* =========================================================
   V39 — HERO : retour à la photo propre, sans surcouche écran
   ========================================================= */
.mock-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(5,13,20,.76) 0%,
      rgba(5,13,20,.57) 30%,
      rgba(5,13,20,.22) 48%,
      rgba(5,13,20,.04) 68%,
      rgba(5,13,20,.00) 100%),
    radial-gradient(circle at 78% 42%,
      rgba(65,142,212,.08),
      transparent 35%);
}

.mock-hero > *{
  position:relative;
  z-index:2;
}

/* Le visuel original reste intact : aucun logo ou faux écran par-dessus. */
.hero-screen-demo{
  display:none !important;
}


/* =========================================================
   V40 — Animation discrète du texte sur le moniteur du HERO
   ========================================================= */

/* Le logo reste celui déjà intégré dans la photo.
   Ce petit voile suit uniquement la ligne "INFORMATIQUE" et donne
   l'impression qu'elle s'atténue puis réapparaît doucement. */
.monitor-text-fade{
  position:absolute !important;
  z-index:3 !important;
  pointer-events:none !important;

  /* position calibrée sur l'écran de hero-dxf-pro-v17.webp */
  right:7.0% !important;
  top:43.0% !important;
  width:15.8% !important;
  height:5.2% !important;

  border-radius:10px;
  background:
    radial-gradient(ellipse at center,
      rgba(4,15,35,.92) 0%,
      rgba(4,15,35,.78) 52%,
      rgba(4,15,35,.22) 82%,
      transparent 100%);
  filter:blur(2px);
  opacity:0;
  transform:
    perspective(900px)
    rotateY(-7deg)
    rotateX(1deg);
  transform-origin:center;
  animation:monitorTextBreath 7.2s ease-in-out infinite;
}

@keyframes monitorTextBreath{
  0%,18%,100% { opacity:0; }
  38%,58%     { opacity:.86; }
  78%         { opacity:0; }
}

/* Sur tablette/mobile le cadrage du background change :
   on supprime l'effet plutôt que de risquer un mauvais positionnement. */
@media(max-width:1100px){
  .monitor-text-fade{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .monitor-text-fade{
    display:none !important;
    animation:none !important;
  }
}


/* V42 — quelques LED discrètes uniquement, base V40 inchangée */
.hero-led-fx{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.hero-led{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#a7efff;
  opacity:.22;
  box-shadow:0 0 4px #8de8ff, 0 0 10px rgba(84,185,255,.55);
  animation:dxfLedGlow 3.8s ease-in-out infinite;
}
.hero-led-a{left:26.8%;top:35.5%;animation-delay:-.4s}
.hero-led-b{left:29.7%;top:48.2%;animation-delay:-1.7s}
.hero-led-c{left:31.3%;top:57.0%;animation-delay:-2.6s}
.hero-led-d{left:24.9%;top:62.5%;animation-delay:-3.1s}

@keyframes dxfLedGlow{
  0%,100%{opacity:.12;transform:scale(.85)}
  45%{opacity:.7;transform:scale(1.18)}
  60%{opacity:.32;transform:scale(1)}
}

/* L'image de fond se recadre sur mobile : on évite tout décalage des LED. */
@media(max-width:1100px){
  .hero-led-fx{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-led{animation:none;opacity:.25}
}


/* ============================================================
   V43 — Validation première version / audit animations
   ============================================================ */

/* PC sur mesure : zoom net et fluide sur les 3 réalisations */
.pc-custom-page .photo-strip > img{
  display:block;
  width:100%;
  transform:scale(1);
  transform-origin:center;
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .45s ease,
    box-shadow .45s ease;
  will-change:transform;
}
.pc-custom-page .photo-strip > img:hover{
  transform:scale(1.045);
  filter:brightness(1.08) saturate(1.07);
  box-shadow:0 18px 42px rgba(0,0,0,.30),0 0 24px rgba(92,202,218,.13);
}

/* Le conteneur garde des coins propres pendant le zoom */
.pc-custom-page .photo-strip{
  overflow:visible;
}
.pc-custom-page .photo-strip > img{
  overflow:hidden;
}

/* Cohérence : toutes les photos principales des pages internes réagissent au survol */
body:not(.mock-home) .visual-page-media img,
body:not(.mock-home) .media-frame img,
body:not(.mock-home) .pro-card-media img,
body:not(.mock-home) .gallery-tile img{
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
body:not(.mock-home) .visual-page-media:hover img,
body:not(.mock-home) .media-frame:hover img,
body:not(.mock-home) .pro-card-media:hover img,
body:not(.mock-home) .gallery-tile:hover img{
  transform:scale(1.035);
  filter:brightness(1.06) saturate(1.04);
}

@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .pc-custom-page .photo-strip > img:hover,
  body:not(.mock-home) .visual-page-media:hover img,
  body:not(.mock-home) .media-frame:hover img,
  body:not(.mock-home) .pro-card-media:hover img,
  body:not(.mock-home) .gallery-tile:hover img{
    transform:none;
    filter:none;
  }
}


/* =========================================================
   V46 — DÉPANNAGE : CARTES PHOTO + ANIMATIONS
   ========================================================= */

.repair-services-section{
  padding-top:78px !important;
  padding-bottom:94px !important;
}

.repair-services-intro{
  max-width:900px;
  margin:0 auto 42px;
  text-align:center;
}
.repair-services-intro .eyebrow{
  color:#8fd0d8 !important;
  letter-spacing:.18em;
}
.repair-services-intro h2{
  margin:8px 0 14px !important;
  color:#f3f6f7 !important;
  font-size:clamp(2rem,3.4vw,3.4rem) !important;
  line-height:1.07 !important;
  letter-spacing:-.03em !important;
}
.repair-services-intro p:last-child{
  max-width:760px;
  margin:0 auto;
  color:#aebac0 !important;
  font-size:1rem;
  line-height:1.7;
}

.repair-service-showcase{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.repair-service-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(105,140,151,.38);
  background:linear-gradient(155deg,#22313a,#172229);
  box-shadow:
    0 22px 48px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .62s ease,
    transform .62s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}
.repair-service-card.is-visible{
  opacity:1;
  transform:translateY(0);
}
.repair-service-card:nth-child(2){transition-delay:.08s}
.repair-service-card:nth-child(3){transition-delay:.16s}

.repair-service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(128,198,208,.66);
  box-shadow:
    0 30px 62px rgba(0,0,0,.28),
    0 0 26px rgba(86,176,190,.08);
}

.repair-card-media{
  position:relative;
  height:225px;
  overflow:hidden;
  background:#0d161c;
}
.repair-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 48%,rgba(10,18,24,.72) 100%),
    radial-gradient(circle at var(--rx,50%) var(--ry,50%),
      rgba(142,226,234,.12),
      transparent 38%);
  opacity:.7;
  transition:opacity .3s ease;
}
.repair-service-card:hover .repair-card-media::after{
  opacity:1;
}
.repair-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  filter:brightness(.98) contrast(1.04) saturate(.96);
  transition:
    transform .75s cubic-bezier(.2,.8,.2,1),
    filter .42s ease;
}
.repair-service-card:hover .repair-card-media img{
  transform:scale(1.075);
  filter:brightness(1.08) contrast(1.05) saturate(1.04);
}

.repair-card-body{
  padding:28px 28px 30px;
}
.repair-kicker{
  display:block;
  margin-bottom:8px;
  color:#87cad3;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.15em;
}
.repair-card-body h2{
  margin:0 0 10px !important;
  color:#f2f5f6 !important;
  font-size:1.42rem !important;
}
.repair-card-body>p{
  margin:0 0 18px;
  color:#b2bec4 !important;
  font-size:.91rem;
  line-height:1.6;
}
.repair-card-body ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:9px;
}
.repair-card-body li{
  position:relative;
  padding-left:18px;
  color:#9eabb1;
  font-size:.78rem;
  line-height:1.45;
}
.repair-card-body li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#85d3dc;
  box-shadow:0 0 9px rgba(111,207,218,.32);
}

/* léger balayage lumineux */
.repair-service-card::before{
  content:"";
  position:absolute;
  inset:-70% -45%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(144,224,232,.065) 50%,transparent 58%);
  transform:translateX(-65%) rotate(5deg);
  transition:transform 1s ease;
}
.repair-service-card:hover::before{
  transform:translateX(65%) rotate(5deg);
}

@media(max-width:1000px){
  .repair-service-showcase{
    grid-template-columns:1fr;
  }
  .repair-service-card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
  }
  .repair-card-media{
    height:100%;
    min-height:250px;
  }
}

@media(max-width:650px){
  .repair-service-card{
    display:block;
  }
  .repair-card-media{
    height:210px;
    min-height:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .repair-service-card{
    opacity:1 !important;
    transform:none !important;
  }
  .repair-card-media img{
    transition:none !important;
  }
}


/* =========================================================
   V47 — DÉPANNAGE : CORRECTIONS D'AFFICHAGE + MICROSOFT
   ========================================================= */

/* Aucun texte ne doit sortir des cartes */
.repair-service-showcase{
  align-items:stretch !important;
}
.repair-service-card{
  min-width:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}
.repair-card-media{
  flex:0 0 225px !important;
  width:100% !important;
  min-width:0 !important;
}
.repair-card-body{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:28px 28px 30px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.repair-card-body h2,
.repair-card-body p,
.repair-card-body li,
.repair-card-body strong,
.repair-card-body small{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.repair-card-body ul{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Première photo : couvre toute la vignette sans laisser de vide */
.repair-service-card:first-child .repair-card-media{
  background:#101a20 !important;
}
.repair-service-card:first-child .repair-card-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.025) !important;
}
.repair-service-card:first-child:hover .repair-card-media img{
  transform:scale(1.085) !important;
}

/* Les cartes ont assez de hauteur pour leurs contenus */
.repair-service-card{
  min-height:610px !important;
}
.repair-service-card:nth-child(3){
  min-height:690px !important;
}

/* Bloc Microsoft proprement intégré */
.microsoft-license-panel{
  margin-top:22px !important;
  padding:18px !important;
  border-radius:15px !important;
  border:1px solid rgba(112,161,174,.28) !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(93,188,201,.09),transparent 34%),
    linear-gradient(145deg,rgba(31,48,56,.92),rgba(20,32,38,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.ms-panel-label{
  display:block !important;
  margin-bottom:12px !important;
  color:#8fd4dc !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
}
.ms-license-grid{
  display:grid !important;
  gap:10px !important;
}
.ms-license-grid>div{
  padding:12px 13px !important;
  border-radius:11px !important;
  background:rgba(14,25,31,.55) !important;
  border:1px solid rgba(107,143,153,.18) !important;
}
.ms-license-grid strong{
  display:block !important;
  margin-bottom:4px !important;
  color:#eef3f5 !important;
  font-size:.79rem !important;
}
.ms-license-grid small{
  display:block !important;
  color:#a8b5bb !important;
  font-size:.69rem !important;
  line-height:1.45 !important;
}
.microsoft-license-panel>p{
  margin:12px 0 0 !important;
  color:#809097 !important;
  font-size:.64rem !important;
  line-height:1.45 !important;
}

/* Tablette : cartes horizontales sans écrasement ni débordement */
@media(max-width:1000px){
  .repair-service-card{
    display:grid !important;
    grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr) !important;
    min-height:0 !important;
  }
  .repair-card-media{
    height:100% !important;
    min-height:320px !important;
    flex:none !important;
  }
  .repair-card-body{
    min-height:320px !important;
  }
}

/* Mobile : tout repasse verticalement */
@media(max-width:700px){
  .repair-service-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }
  .repair-card-media{
    min-height:0 !important;
    height:220px !important;
    flex:0 0 220px !important;
  }
  .repair-card-body{
    min-height:0 !important;
    padding:23px 21px 25px !important;
  }
}


/* =========================================================
   V48 — PC SUR MESURE : CARTES GAMING AVEC IMAGES
   ========================================================= */
.spec-cards-visual{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}
body:not(.mock-home) .spec-cards-visual .spec-visual-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:190px minmax(0,1fr) !important;
  min-height:150px !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  border:1px solid rgba(112,145,156,.55) !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(125,210,220,.11),transparent 34%),
    linear-gradient(135deg,#213139,#19262d) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.14) !important;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease !important;
}
.spec-visual-card::after{
  content:"";
  position:absolute;
  inset:-70% -35%;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.12) 50%,transparent 57%);
  transform:translateX(-70%) rotate(8deg);
  transition:transform .7s ease;
}
.spec-visual-card:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(137,211,221,.85) !important;
  box-shadow:0 22px 45px rgba(0,0,0,.22),0 0 24px rgba(111,204,218,.08) !important;
}
.spec-visual-card:hover::after{transform:translateX(70%) rotate(8deg)}
.spec-visual-media{
  position:relative;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:#101a20;
}
.spec-visual-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(25,38,45,.82));
  pointer-events:none;
}
.spec-visual-media img{
  width:100% !important;
  height:100% !important;
  min-height:150px;
  object-fit:cover !important;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease !important;
}
.spec-visual-card:hover .spec-visual-media img{
  transform:scale(1.075);
  filter:brightness(1.08) contrast(1.03);
}
.spec-visual-copy{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:24px 27px 24px 22px !important;
}
.spec-visual-copy .spec-kicker{
  margin:0 0 7px !important;
  color:#86d1db !important;
  font-size:.67rem !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
}
.spec-visual-copy strong{
  margin:0 0 7px !important;
  color:#f3f6f7 !important;
  font-size:1.16rem !important;
  line-height:1.2 !important;
}
.spec-visual-copy>span:last-child{
  color:#b7c3c8 !important;
  font-size:.92rem !important;
  line-height:1.55 !important;
  overflow-wrap:anywhere;
}

@media(max-width:760px){
  body:not(.mock-home) .spec-cards-visual .spec-visual-card{
    grid-template-columns:1fr !important;
  }
  .spec-visual-media{height:190px}
  .spec-visual-media::after{
    background:linear-gradient(180deg,transparent 62%,rgba(25,38,45,.88));
  }
  .spec-visual-copy{padding:21px !important}
}


/* =========================================================
   V49 — CORRECTION CADRAGE DES IMAGES PROFESSIONNELS
   ========================================================= */

/* Cartes : aucune zone vide ni fragment parasite possible */
.pro-card-media{
  position:relative !important;
  overflow:hidden !important;
  width:100% !important;
  height:230px !important;
  min-height:230px !important;
  background:#101920 !important;
  isolation:isolate !important;
}
.pro-card-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:scale(1.015) !important;
}
.pro-service-card:hover .pro-card-media img{
  transform:scale(1.075) !important;
}

/* Ajustements spécifiques par carte */
.pro-card-workstation .pro-card-media img{object-position:center 48% !important}
.pro-card-upgrade .pro-card-media img{object-position:center 48% !important}
.pro-card-repair .pro-card-media img{object-position:center 50% !important}
.pro-card-advice .pro-card-media img{object-position:center 50% !important}

/* Grand exemple de réalisation : l'image occupe 100 % du cadre */
.pro-approach-visual{
  position:relative !important;
  overflow:hidden !important;
}
.pro-approach-visual > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:scale(1.01) !important;
}
.pro-approach-visual:hover > img{
  transform:scale(1.065) !important;
}

/* Garder les textes de légende au-dessus de l'image */
.pro-approach-visual figcaption{
  z-index:4 !important;
}
.pro-approach-visual::after{
  z-index:2 !important;
}

/* Tablette : hauteur stable, sans étirement bizarre */
@media(max-width:1000px){
  .pro-card-media{
    height:220px !important;
    min-height:220px !important;
  }
}

/* Mobile */
@media(max-width:650px){
  .pro-card-media{
    height:200px !important;
    min-height:200px !important;
  }
  .pro-approach-visual{
    min-height:360px !important;
  }
}


/* =========================================================
   V50 — LOGO + HERO PROFESSIONNELS
   ========================================================= */

/* La barre bleue animée sous INFORMATIQUE est supprimée.
   Le halo et l'animation du logo lui-même restent conservés. */
.brand-neon .brand-glow,
.brand-glow{
  display:none !important;
}

/* Hero Professionnels : pas de rotation/perspective susceptible de créer
   une cassure ou un jour en haut du cadre. */
.pro-page-hero .visual-page-media{
  transform:none !important;
  min-height:410px !important;
  background:#111c22 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.pro-page-hero .visual-page-media > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center 50% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:scale(1.005) !important;
  filter:brightness(1.04) contrast(1.04) saturate(.96) !important;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .45s ease !important;
}

.pro-page-hero .visual-page-media:hover > img{
  transform:scale(1.055) !important;
  filter:brightness(1.09) contrast(1.05) saturate(1.00) !important;
}

/* Légende lisible mais discrète */
.pro-page-hero .visual-page-media figcaption{
  left:28px !important;
  right:28px !important;
  bottom:24px !important;
  padding:16px 18px !important;
  border-radius:14px !important;
  background:linear-gradient(90deg,rgba(7,17,23,.82),rgba(7,17,23,.38),transparent) !important;
  backdrop-filter:blur(3px) !important;
}


/* =========================================================
   V51 — BUREAU PRO + WATERCOOLING ANIMÉ
   ========================================================= */

/* Hero professionnels : image nette, cadrage plein cadre */
.pro-page-hero .visual-page-media > img{
  object-position:center 52% !important;
  filter:brightness(1.04) contrast(1.05) saturate(.98) !important;
}

/* LEDs actives dans la baie de brassage */
.pro-rack-leds{
  position:absolute;
  z-index:5;
  top:20%;
  right:3.6%;
  width:6.5%;
  height:55%;
  pointer-events:none;
}
.pro-rack-leds i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#7dff80;
  box-shadow:0 0 5px #7dff80,0 0 10px rgba(67,255,107,.42);
  animation:rackLedBlink 2.8s steps(1,end) infinite;
}
.pro-rack-leds i:nth-child(1){top:11%;left:36%;animation-delay:-.2s}
.pro-rack-leds i:nth-child(2){top:27%;left:61%;background:#52a8ff;box-shadow:0 0 5px #52a8ff,0 0 10px rgba(82,168,255,.42);animation-delay:-1.1s}
.pro-rack-leds i:nth-child(3){top:44%;left:28%;animation-delay:-1.8s}
.pro-rack-leds i:nth-child(4){top:62%;left:58%;background:#ffd35a;box-shadow:0 0 5px #ffd35a,0 0 10px rgba(255,211,90,.35);animation-delay:-.7s}
.pro-rack-leds i:nth-child(5){top:78%;left:40%;animation-delay:-2.1s}

@keyframes rackLedBlink{
  0%,18%,38%,57%,79%,100%{opacity:.25}
  19%,37%,58%,68%,80%,92%{opacity:1}
  69%,78%,93%,99%{opacity:.45}
}

/* Petite animation type vidéo sous le texte PC gamer */
.cooling-live-card{
  position:relative;
  overflow:hidden;
  margin-top:34px;
  max-width:650px;
  border-radius:22px;
  border:1px solid rgba(105,153,166,.42);
  background:linear-gradient(145deg,#1b2a32,#132028);
  box-shadow:0 20px 44px rgba(0,0,0,.20);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.cooling-live-card:hover{
  transform:translateY(-5px);
  border-color:rgba(133,205,215,.70);
  box-shadow:0 27px 58px rgba(0,0,0,.28),0 0 24px rgba(95,194,208,.08);
}
.cooling-live-media{
  position:relative;
  height:260px;
  overflow:hidden;
  background:#07121a;
}
.cooling-live-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(1.03) contrast(1.04) saturate(1.04);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}
.cooling-live-card:hover .cooling-live-media img{
  transform:scale(1.045);
  filter:brightness(1.09) contrast(1.05) saturate(1.08);
}

/* Bulles lumineuses : simulation du liquide en mouvement */
.cooling-flow{
  position:absolute;
  z-index:3;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#91f5ff;
  box-shadow:0 0 5px #91f5ff,0 0 12px rgba(55,200,255,.60);
  opacity:.75;
  animation:coolantFlow 4.6s linear infinite;
}
.cooling-flow-1{left:-5%;top:62%;animation-delay:0s}
.cooling-flow-2{left:-9%;top:67%;animation-delay:-1.1s;transform:scale(.7)}
.cooling-flow-3{left:-12%;top:57%;animation-delay:-2.2s;transform:scale(.55)}
.cooling-flow-4{left:-7%;top:70%;animation-delay:-3.3s;transform:scale(.85)}

@keyframes coolantFlow{
  0%{left:-7%;opacity:0}
  12%{opacity:.8}
  55%{top:50%}
  88%{opacity:.75}
  100%{left:104%;top:38%;opacity:0}
}

/* reflet mouvant très discret */
.cooling-scan{
  position:absolute;
  z-index:2;
  inset:-30% -45%;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(145,229,255,.08) 50%,transparent 58%);
  transform:translateX(-55%);
  animation:coolingScan 7s ease-in-out infinite;
}
@keyframes coolingScan{
  0%,20%{transform:translateX(-55%)}
  70%,100%{transform:translateX(55%)}
}

.cooling-live-copy{
  padding:20px 22px 22px;
}
.cooling-live-kicker{
  display:block;
  margin-bottom:7px;
  color:#82d2dc;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.14em;
}
.cooling-live-copy strong{
  display:block;
  margin-bottom:7px;
  color:#f1f5f6;
  font-size:1.04rem;
}
.cooling-live-copy p{
  margin:0 !important;
  color:#aebac0 !important;
  font-size:.82rem !important;
  line-height:1.55 !important;
}

/* Mobile/tablette : on garde l'image mais on coupe les overlays très précis */
@media(max-width:1100px){
  .pro-rack-leds{display:none}
}
@media(max-width:760px){
  .cooling-live-media{height:220px}
}
@media(prefers-reduced-motion:reduce){
  .pro-rack-leds i,
  .cooling-flow,
  .cooling-scan{
    animation:none !important;
  }
}


/* =========================================================
   V52 — WATERCOOLING : VIDÉO EN BOUCLE
   ========================================================= */
.cooling-video-block{
  position:relative;
  margin-top:34px;
  max-width:650px;
}
.cooling-video-title{
  display:block;
  margin:0 0 11px 3px;
  color:#82d2dc;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.17em;
}
.cooling-video-frame{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(105,153,166,.46);
  background:#07121a;
  box-shadow:0 20px 44px rgba(0,0,0,.22);
  aspect-ratio:16/9;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.cooling-video-frame:hover{
  transform:translateY(-4px);
  border-color:rgba(133,205,215,.72);
  box-shadow:0 27px 58px rgba(0,0,0,.29),0 0 25px rgba(95,194,208,.09);
}
.cooling-video-frame video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(max-width:760px){
  .cooling-video-block{max-width:100%}
}


/* =========================================================
   V53 — HERO PROFESSIONNELS : PHOTO NETTOYÉE / ÉCRANS VARIÉS
   ========================================================= */
.pro-page-hero .visual-page-media{
  overflow:hidden !important;
  isolation:isolate !important;
  background:#101b22 !important;
}
.pro-page-hero .visual-page-media > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.01) !important;
}
.pro-page-hero .visual-page-media:hover > img{
  transform:scale(1.045) !important;
}

/* V54 — alignement vidéo watercooling + renouvellement parc */
@media (min-width: 901px){
  .pc-custom-page #gaming .split{align-items:stretch}
  .pc-custom-page #gaming .split > div:first-child{display:flex;flex-direction:column;min-width:0}
  .pc-custom-page #gaming .cooling-video-block{margin-top:30px;max-width:none;display:flex;flex-direction:column;flex:1;min-height:0}
  .pc-custom-page #gaming .cooling-video-frame{flex:1;min-height:390px;aspect-ratio:auto}
  .pc-custom-page #gaming .cooling-video-frame video{object-fit:cover}
}
.pro-card-upgrade .pro-card-media img{object-position:center 48% !important}


/* =========================================================
   V55 — HERO PC SUR MESURE : VIDÉO GAMING EN BOUCLE
   ========================================================= */
.pc-hero-video{
  position:relative !important;
  overflow:hidden !important;
  background:#0b141a !important;
}
.pc-hero-video > video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:scale(1.005) !important;
}
.pc-hero-video figcaption{
  position:absolute !important;
  z-index:3 !important;
}
.pc-hero-video::after{
  z-index:2 !important;
}
@media(prefers-reduced-motion:reduce){
  .pc-hero-video > video{
    animation:none !important;
  }
}


/* =========================================================
   V56 — PAGE 404 IMMERSIVE / DXF
   ========================================================= */

.error404-main{
  min-height:calc(100vh - 90px);
  background:#081118;
}

.error404-scene{
  position:relative;
  min-height:760px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 22% 28%,rgba(30,105,173,.17),transparent 28%),
    radial-gradient(circle at 78% 72%,rgba(28,160,180,.10),transparent 24%),
    linear-gradient(135deg,#071018 0%,#0d1a22 52%,#081118 100%);
}

.error404-grid{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(117,190,204,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,190,204,.08) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
}

.error404-scan{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  height:2px;
  top:-5%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(105,232,245,.62),transparent);
  box-shadow:0 0 14px rgba(82,205,226,.32);
  animation:errorScan 7s linear infinite;
}
@keyframes errorScan{
  to{top:105%}
}

/* Vidéos d'ambiance : jamais posées en gros bloc, elles se fondent dans le décor */
.error404-video{
  position:absolute;
  overflow:hidden;
  z-index:1;
  border:1px solid rgba(105,159,173,.22);
  box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 40px rgba(51,137,189,.08);
  opacity:.48;
  filter:saturate(.88) contrast(1.06);
}
.error404-video::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,13,19,.05),rgba(5,13,19,.50)),
    radial-gradient(circle at 50% 45%,transparent 35%,rgba(5,13,19,.48) 100%);
}
.error404-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.error404-video-gaming{
  width:35vw;
  height:44vh;
  min-height:300px;
  max-width:610px;
  left:-7vw;
  top:9%;
  border-radius:0 34px 34px 0;
  transform:rotate(-2deg);
}
.error404-video-water{
  width:31vw;
  height:39vh;
  min-height:270px;
  max-width:540px;
  right:-6vw;
  bottom:5%;
  border-radius:34px 0 0 34px;
  transform:rotate(2deg);
}

/* petites LEDs pour rappeler les machines / baies */
.error404-leds{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.error404-leds i{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7eeaf4;
  box-shadow:0 0 5px #7eeaf4,0 0 13px rgba(72,203,226,.56);
  animation:errorLed 3.4s steps(1,end) infinite;
}
.error404-leds i:nth-child(1){left:12%;top:28%;animation-delay:-.5s}
.error404-leds i:nth-child(2){left:20%;top:66%;animation-delay:-1.2s;background:#6fff9a}
.error404-leds i:nth-child(3){left:77%;top:19%;animation-delay:-2s}
.error404-leds i:nth-child(4){left:87%;top:58%;animation-delay:-.9s;background:#ffd164}
.error404-leds i:nth-child(5){left:68%;top:82%;animation-delay:-2.6s}
.error404-leds i:nth-child(6){left:31%;top:17%;animation-delay:-1.6s}
@keyframes errorLed{
  0%,18%,46%,70%,100%{opacity:.14}
  19%,35%,47%,62%,71%,88%{opacity:1}
  36%,45%,63%,69%,89%,99%{opacity:.38}
}

.error404-shell{
  position:relative;
  z-index:5;
  width:100%;
  display:flex;
  justify-content:center;
  padding-top:88px;
  padding-bottom:88px;
}

.error404-panel{
  position:relative;
  width:min(900px,100%);
  padding:46px 48px 42px;
  border-radius:28px;
  border:1px solid rgba(111,158,171,.40);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(107,210,220,.07),transparent 32%),
    linear-gradient(145deg,rgba(18,34,43,.95),rgba(10,20,27,.96));
  box-shadow:
    0 34px 90px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
  overflow:hidden;
}

.error404-panel::before{
  content:"";
  position:absolute;
  inset:-80% -40%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 43%,rgba(156,235,241,.07) 50%,transparent 57%);
  transform:translateX(-70%) rotate(5deg);
  animation:errorPanelSweep 8s ease-in-out infinite;
}
@keyframes errorPanelSweep{
  0%,35%{transform:translateX(-70%) rotate(5deg)}
  70%,100%{transform:translateX(70%) rotate(5deg)}
}

.error404-status{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  color:#9acbd2;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.15em;
}
.error404-status b{
  margin-left:auto;
  color:#68d4e0;
}
.error404-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#65d8e3;
  box-shadow:0 0 10px rgba(101,216,227,.66);
  animation:errorPulse 2s ease-in-out infinite;
}
@keyframes errorPulse{
  50%{opacity:.35;transform:scale(.82)}
}

.error404-code{
  position:absolute;
  right:30px;
  top:54px;
  z-index:0;
  font-size:clamp(8rem,18vw,16rem);
  line-height:.8;
  font-weight:950;
  letter-spacing:-.08em;
  color:rgba(98,178,193,.035);
  user-select:none;
}

.error404-kicker{
  position:relative;
  z-index:2;
  margin:46px 0 10px;
  color:#76d1db;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
}

.error404-panel h1{
  position:relative;
  z-index:2;
  max-width:720px;
  margin:0;
  color:#f3f6f7;
  font-size:clamp(2.8rem,6vw,5.7rem);
  line-height:.94;
  letter-spacing:-.055em;
}

.error404-lead{
  position:relative;
  z-index:2;
  max-width:690px;
  margin:24px 0 0;
  color:#b7c2c7;
  font-size:1rem;
  line-height:1.72;
}

.error404-diagnostic{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:30px 0;
}
.error404-diagnostic>div{
  padding:15px 16px;
  border-radius:14px;
  border:1px solid rgba(106,145,155,.23);
  background:rgba(12,23,29,.52);
}
.error404-diagnostic span{
  display:block;
  color:#829198;
  font-size:.67rem;
  margin-bottom:6px;
}
.error404-diagnostic strong{
  color:#91dfb1;
  font-size:.72rem;
  letter-spacing:.08em;
}
.error404-diagnostic .is-error strong{
  color:#ffcb74;
}

.error404-actions{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.error404-actions .btn{
  min-width:160px;
  justify-content:center;
}

.error404-hint{
  position:relative;
  z-index:2;
  margin:22px 0 0;
  color:#718088;
  font-size:.72rem;
}

@media(max-width:900px){
  .error404-scene{min-height:720px}
  .error404-video{opacity:.28}
  .error404-video-gaming{width:52vw}
  .error404-video-water{width:48vw}
  .error404-panel{padding:38px 30px}
  .error404-diagnostic{grid-template-columns:1fr}
}

@media(max-width:620px){
  .error404-shell{padding-top:62px;padding-bottom:62px}
  .error404-panel{padding:30px 22px;border-radius:22px}
  .error404-status{flex-wrap:wrap}
  .error404-status b{margin-left:0;width:100%}
  .error404-kicker{margin-top:34px}
  .error404-video-gaming{width:78vw;left:-30vw}
  .error404-video-water{width:76vw;right:-34vw}
  .error404-actions{display:grid}
  .error404-actions .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .error404-scan,
  .error404-leds i,
  .error404-panel::before,
  .error404-dot{
    animation:none !important;
  }
}


/* =========================================================
   V58 — WATERCOOLING : TITRE CENTRÉ / EFFET LIQUIDE
   ========================================================= */
.cooling-video-block{
  text-align:center !important;
}
.cooling-liquid-title{
  position:relative !important;
  display:inline-block !important;
  margin:0 auto 14px !important;
  padding:0 9px 4px !important;
  text-align:center !important;
  font-size:.80rem !important;
  font-weight:950 !important;
  letter-spacing:.20em !important;

  /* Le texte est rempli par un dégradé en mouvement */
  color:transparent !important;
  background:
    linear-gradient(
      90deg,
      #72dce8 0%,
      #d9fbff 18%,
      #60cce1 38%,
      #a6f6ff 55%,
      #3aa9d2 72%,
      #b7f8ff 88%,
      #72dce8 100%
    ) !important;
  background-size:220% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter:
    drop-shadow(0 0 5px rgba(83,204,224,.24))
    drop-shadow(0 0 12px rgba(65,159,220,.10));
  animation:coolingLiquidFlow 4.8s linear infinite !important;
}

/* petite ondulation lumineuse sous le mot */
.cooling-liquid-title::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(103,225,239,.78),
      rgba(203,251,255,.95),
      rgba(67,167,221,.72),
      transparent
    );
  background-size:180% 100%;
  box-shadow:
    0 0 6px rgba(96,216,235,.30),
    0 0 14px rgba(64,159,222,.14);
  animation:coolingLiquidWave 3.7s ease-in-out infinite;
}

@keyframes coolingLiquidFlow{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}

@keyframes coolingLiquidWave{
  0%,100%{
    transform:scaleX(.72) translateY(0);
    opacity:.42;
    background-position:0% 50%;
  }
  50%{
    transform:scaleX(1) translateY(1px);
    opacity:1;
    background-position:180% 50%;
  }
}

@media(prefers-reduced-motion:reduce){
  .cooling-liquid-title,
  .cooling-liquid-title::after{
    animation:none !important;
  }
}


/* =========================================================
   V59 — FOOTER CLIQUABLE / BACK TO TOP / CRÉDIT WEBMASTER
   ========================================================= */

/* Logo footer cliquable */
.footer-logo-link{
  display:inline-flex;
  align-items:center;
  border-radius:12px;
  text-decoration:none;
  transition:transform .28s ease,filter .28s ease;
}
.footer-logo-link:hover,
.footer-logo-link:focus-visible{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.08) drop-shadow(0 0 9px rgba(75,159,255,.22));
}
.footer-logo-link:focus-visible{
  outline:2px solid rgba(126,222,233,.75);
  outline-offset:4px;
}

/* Crédit webmaster intégré à la ligne basse du footer */
.footer-v33-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 16px;
}
.webmaster-credit{
  position:relative;
  color:#6f828b;
  font-size:.70rem;
  white-space:nowrap;
}
.webmaster-credit::before{
  content:"•";
  margin-right:16px;
  color:#35505c;
}
.webmaster-credit strong{
  color:#8ea4ad;
  font-weight:700;
}
.webmaster-credit a{
  color:#78cbd5;
  text-decoration:none;
  font-weight:700;
  transition:color .25s ease,text-shadow .25s ease;
}
.webmaster-credit a:hover{
  color:#b9f5fb;
  text-shadow:0 0 8px rgba(87,198,218,.28);
}

/* Bouton retour haut : style petit module informatique */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:16px;
  border:1px solid rgba(104,167,181,.45);
  background:
    radial-gradient(circle at 35% 25%,rgba(102,210,223,.14),transparent 38%),
    linear-gradient(145deg,rgba(22,39,48,.96),rgba(10,20,27,.97));
  color:#dffcff;
  box-shadow:
    0 16px 34px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(84,177,194,.04);
  cursor:pointer;
  opacity:0;
  transform:translateY(12px) scale(.92);
  pointer-events:none;
  transition:
    opacity .28s ease,
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}
.back-to-top.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.back-to-top:hover,
.back-to-top:focus-visible{
  transform:translateY(-4px) scale(1.025);
  border-color:rgba(126,220,232,.80);
  box-shadow:
    0 20px 40px rgba(0,0,0,.36),
    0 0 20px rgba(75,194,216,.14),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.back-to-top:focus-visible{
  outline:2px solid rgba(134,229,239,.70);
  outline-offset:4px;
}
.back-to-top-icon{
  position:relative;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
}
.bt-cpu{
  position:absolute;
  inset:4px;
  border-radius:7px;
  border:1px solid rgba(110,213,224,.50);
  background:
    linear-gradient(90deg,transparent 47%,rgba(112,212,223,.16) 48% 52%,transparent 53%),
    linear-gradient(transparent 47%,rgba(112,212,223,.16) 48% 52%,transparent 53%),
    rgba(13,28,35,.88);
  box-shadow:
    inset 0 0 9px rgba(80,195,211,.08),
    0 0 8px rgba(80,195,211,.10);
}
.bt-cpu::before,
.bt-cpu::after{
  content:"";
  position:absolute;
  background:repeating-linear-gradient(
    90deg,
    rgba(111,213,224,.48) 0 2px,
    transparent 2px 6px
  );
  left:3px;
  right:3px;
  height:2px;
}
.bt-cpu::before{top:-4px}
.bt-cpu::after{bottom:-4px}
.bt-arrow{
  position:relative;
  z-index:2;
  color:#a8edf3;
  font-size:1.05rem;
  line-height:1;
  font-weight:900;
  text-shadow:0 0 8px rgba(103,220,231,.33);
  transform:translateY(-1px);
}

@media(max-width:720px){
  .back-to-top{
    right:15px;
    bottom:15px;
    width:49px;
    height:49px;
    border-radius:14px;
  }
  .webmaster-credit{
    width:100%;
    white-space:normal;
    text-align:center;
    margin-top:2px;
  }
  .webmaster-credit::before{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .back-to-top,
  .footer-logo-link{
    transition:none !important;
  }
}


/* =========================================================
   V60 — BOUTON PAGE UP : TOUCHE CLAVIER RÉTROÉCLAIRÉE
   ========================================================= */
.back-to-top{
  width:62px !important;
  height:62px !important;
  border-radius:15px !important;
  border:1px solid rgba(87,205,229,.62) !important;
  background:
    radial-gradient(circle at 35% 18%,rgba(102,226,245,.18),transparent 38%),
    linear-gradient(145deg,#172c36 0%,#0b1921 55%,#071218 100%) !important;
  box-shadow:
    0 13px 28px rgba(0,0,0,.34),
    inset 0 1px 1px rgba(255,255,255,.10),
    inset 0 -4px 8px rgba(0,0,0,.34),
    0 0 0 1px rgba(89,203,224,.08),
    0 0 15px rgba(65,188,218,.11) !important;
  overflow:visible;
}
.back-to-top::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:18px;
  border:1px solid rgba(81,209,233,0);
  opacity:0;
  pointer-events:none;
}
.back-to-top:hover,
.back-to-top:focus-visible{
  transform:translateY(-5px) scale(1.045) !important;
  border-color:rgba(123,235,249,.92) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.40),
    inset 0 1px 1px rgba(255,255,255,.13),
    inset 0 -4px 8px rgba(0,0,0,.28),
    0 0 16px rgba(67,205,235,.28),
    0 0 30px rgba(55,161,230,.12) !important;
}
.back-to-top:hover::after{
  animation:pageUpPulse 1.55s ease-out infinite;
}
.back-to-top-icon.pageup-key{
  width:46px !important;
  height:46px !important;
  display:grid !important;
  grid-template-columns:18px 1fr;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:5px 4px;
  border-radius:9px;
  border:1px solid rgba(131,225,238,.22);
  background:
    linear-gradient(145deg,rgba(31,61,71,.88),rgba(10,27,35,.90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 4px rgba(0,0,0,.24);
}
.pageup-arrow{
  display:block;
  font-size:1.52rem;
  line-height:1;
  font-weight:900;
  color:#7ee7f1;
  transform:translateY(-1px);
  text-shadow:
    0 0 5px rgba(91,224,239,.75),
    0 0 12px rgba(55,175,232,.40);
  animation:pageUpArrow 2.1s ease-in-out infinite;
}
.pageup-label{
  display:block;
  color:#d7f9fc;
  font-size:.48rem;
  line-height:1.02;
  letter-spacing:.045em;
  font-weight:900;
  text-align:left;
  text-shadow:0 0 5px rgba(91,219,233,.25);
}
@keyframes pageUpArrow{
  0%,100%{
    transform:translateY(2px);
    opacity:.72;
  }
  45%{
    transform:translateY(-4px);
    opacity:1;
    color:#c7fbff;
    text-shadow:
      0 0 7px rgba(124,236,247,.95),
      0 0 17px rgba(55,183,235,.58);
  }
}
@keyframes pageUpPulse{
  0%{
    inset:-3px;
    opacity:.75;
    border-color:rgba(87,222,241,.58);
  }
  100%{
    inset:-12px;
    opacity:0;
    border-color:rgba(87,222,241,0);
  }
}
@media(max-width:720px){
  .back-to-top{
    width:56px !important;
    height:56px !important;
  }
  .back-to-top-icon.pageup-key{
    width:42px !important;
    height:42px !important;
  }
  .pageup-arrow{font-size:1.38rem}
  .pageup-label{font-size:.43rem}
}
@media(prefers-reduced-motion:reduce){
  .pageup-arrow,
  .back-to-top:hover::after{
    animation:none !important;
  }
}


/* =========================================================
   V61 — DÉPANNAGE : CADRAGE / CONTENUS / RESPONSIVE
   ========================================================= */
.repair-service-showcase{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}

.repair-service-card{
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.repair-card-media{
  position:relative !important;
  flex:0 0 245px !important;
  width:100% !important;
  height:245px !important;
  min-height:245px !important;
  overflow:hidden !important;
  background:#0c171e !important;
}

.repair-card-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:scale(1.01) !important;
}

.repair-service-card:nth-child(1) .repair-card-media img{object-position:center 50% !important}
.repair-service-card:nth-child(2) .repair-card-media img{object-position:center 48% !important}
.repair-service-card:nth-child(3) .repair-card-media img{object-position:center 52% !important}

.repair-service-card:hover .repair-card-media img{
  transform:scale(1.065) !important;
}

.repair-card-body{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  padding:28px 28px 30px !important;
  box-sizing:border-box !important;
}

.repair-card-body h2,
.repair-card-body p,
.repair-card-body ul,
.repair-card-body li,
.repair-card-body strong,
.repair-card-body small{
  max-width:100% !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}

.repair-card-body ul{
  margin:18px 0 0 !important;
  padding:0 !important;
  display:grid !important;
  gap:12px !important;
}

.repair-card-body li{
  position:relative !important;
  display:block !important;
  padding-left:20px !important;
  color:#aebcc2 !important;
  font-size:.80rem !important;
  line-height:1.55 !important;
}

.repair-card-body li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.64em !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#83d8e1 !important;
  box-shadow:0 0 9px rgba(113,211,222,.28) !important;
}

.repair-card-body li strong{
  color:#dce9ec !important;
  font-weight:800 !important;
}

/* éviter les hauteurs forcées héritées des anciennes versions */
.repair-service-card:nth-child(3){
  min-height:0 !important;
}

/* tablette */
@media(max-width:1050px){
  .repair-service-showcase{
    grid-template-columns:1fr !important;
  }

  .repair-service-card{
    display:grid !important;
    grid-template-columns:minmax(270px,.85fr) minmax(0,1.15fr) !important;
  }

  .repair-card-media{
    height:100% !important;
    min-height:100% !important;
    flex:none !important;
  }

  .repair-card-media img{
    min-height:100% !important;
  }
}

/* mobile */
@media(max-width:720px){
  .repair-service-card{
    display:flex !important;
    flex-direction:column !important;
  }

  .repair-card-media{
    height:220px !important;
    min-height:220px !important;
    flex:0 0 220px !important;
  }

  .repair-card-body{
    padding:23px 21px 25px !important;
  }

  .repair-card-body li{
    font-size:.78rem !important;
  }
}


/* =========================================================
   V62 — DÉPANNAGE HERO / CTA / LOGO ACCUEIL
   ========================================================= */

/* ---------- HERO DÉPANNAGE : aucun crop bizarre / aucune tranche ---------- */
.repair-page-hero .visual-page-grid{
  grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr) !important;
  gap:52px !important;
  overflow:visible !important;
}
.repair-page-hero .visual-page-copy,
.repair-page-hero .visual-page-media{
  min-width:0 !important;
}
.repair-page-hero .visual-page-media{
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  min-height:410px !important;
  height:410px !important;
  margin:0 !important;
  transform:none !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#0d171d !important;
}
.repair-page-hero .visual-page-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center 48% !important;
  margin:0 !important;
  padding:0 !important;
  transform:scale(1.01) !important;
}
.repair-page-hero .visual-page-media:hover img{
  transform:scale(1.045) !important;
}
.repair-page-hero .visual-page-media figcaption{
  left:22px !important;
  right:22px !important;
  bottom:20px !important;
  padding:15px 17px !important;
  border-radius:14px !important;
  background:linear-gradient(90deg,rgba(5,13,18,.88),rgba(5,13,18,.55),rgba(5,13,18,.16)) !important;
  backdrop-filter:blur(3px) !important;
}

@media(max-width:980px){
  .repair-page-hero .visual-page-grid{
    grid-template-columns:1fr !important;
  }
  .repair-page-hero .visual-page-media{
    height:360px !important;
    min-height:360px !important;
  }
}
@media(max-width:620px){
  .repair-page-hero .visual-page-media{
    height:270px !important;
    min-height:270px !important;
    border-radius:20px !important;
  }
  .repair-page-hero .visual-page-media figcaption{
    left:14px !important;
    right:14px !important;
    bottom:13px !important;
  }
}

/* ---------- CTA DÉPANNAGE : plus léger et professionnel ---------- */
.repair-help-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:48px;
  padding:38px 42px;
  border-radius:26px;
  border:1px solid rgba(96,151,164,.42);
  background:
    radial-gradient(circle at 10% 0%,rgba(90,194,208,.10),transparent 30%),
    linear-gradient(135deg,#203038 0%,#18262d 58%,#132027 100%);
  box-shadow:
    0 22px 54px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.repair-help-card::after{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-100px;
  top:-135px;
  border-radius:50%;
  border:1px solid rgba(107,205,216,.11);
  box-shadow:
    0 0 0 34px rgba(107,205,216,.025),
    0 0 0 70px rgba(107,205,216,.014);
  pointer-events:none;
}
.repair-help-copy{
  position:relative;
  z-index:2;
  max-width:900px;
}
.repair-help-kicker{
  display:block;
  margin-bottom:10px;
  color:#87d7e0;
  font-size:.70rem;
  font-weight:900;
  letter-spacing:.18em;
}
.repair-help-copy h2{
  margin:0 0 14px !important;
  color:#f3f6f7 !important;
  font-size:clamp(2rem,4.1vw,4rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}
.repair-help-copy p{
  margin:0 !important;
  max-width:780px !important;
  color:#afbdc3 !important;
  font-size:.98rem !important;
  line-height:1.65 !important;
}
.repair-help-action{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:15px;
  min-width:300px;
  padding:18px 21px;
  border-radius:18px;
  border:1px solid rgba(116,198,208,.38);
  background:
    linear-gradient(145deg,rgba(39,64,73,.90),rgba(21,39,47,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 13px 28px rgba(0,0,0,.16);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.repair-help-action:hover{
  transform:translateY(-3px);
  border-color:rgba(129,224,234,.70);
  box-shadow:
    0 18px 34px rgba(0,0,0,.23),
    0 0 22px rgba(77,196,214,.09);
}
.repair-help-phone-icon{
  display:grid;
  place-items:center;
  flex:0 0 50px;
  width:50px;
  height:50px;
  border-radius:15px;
  color:#b9f8fd;
  font-size:1.35rem;
  border:1px solid rgba(124,216,226,.34);
  background:#142a33;
  box-shadow:inset 0 0 12px rgba(89,204,218,.06);
}
.repair-help-action>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.repair-help-action small{
  color:#83cdd6;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.14em;
}
.repair-help-action a{
  display:block;
  margin:3px 0 3px;
  color:#f4f7f8;
  font-size:1.22rem;
  line-height:1.15;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap !important;
}
.repair-help-action>div>span{
  color:#87979e;
  font-size:.67rem;
  white-space:nowrap;
}

@media(max-width:920px){
  .repair-help-card{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .repair-help-action{
    width:max-content;
    max-width:100%;
  }
}
@media(max-width:560px){
  .repair-help-card{
    padding:28px 22px !important;
  }
  .repair-help-action{
    min-width:0;
    width:100%;
  }
  .repair-help-action a{
    font-size:1.08rem;
  }
  .repair-help-action>div>span{
    white-space:normal;
  }
}

/* ---------- LOGO PRINCIPAL PAGE ACCUEIL : légèrement plus présent ---------- */
.mock-home .site-header .brand{
  width:385px !important;
  min-width:335px !important;
}
.mock-home .site-header .brand img{
  height:84px !important;
}
.mock-home .site-header .nav-wrap{
  min-height:102px !important;
}
@media(max-width:1150px){
  .mock-home .site-header .brand{
    width:330px !important;
    min-width:280px !important;
  }
  .mock-home .site-header .brand img{
    height:76px !important;
  }
}
@media(max-width:760px){
  .mock-home .site-header .brand{
    width:230px !important;
    min-width:0 !important;
  }
  .mock-home .site-header .brand img{
    height:62px !important;
  }
  .mock-home .site-header .nav-wrap{
    min-height:82px !important;
  }
}


/* =========================================================
   V63 FINAL — DÉPANNAGE : VISUELS PROFESSIONNELS / HERO ZOOM
   ========================================================= */

/* Supprime visuellement la petite bande sombre située en haut du visuel hero */
.repair-page-hero .visual-page-media img{
  transform:scale(1.085) !important;
  object-position:center 54% !important;
}
.repair-page-hero .visual-page-media:hover img{
  transform:scale(1.115) !important;
}

/* Diagnostic et Matériel : images dédiées, plein cadre, sans bord parasite */
.repair-service-card:nth-child(1) .repair-card-media img,
.repair-service-card:nth-child(2) .repair-card-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.025) !important;
}
.repair-service-card:nth-child(1):hover .repair-card-media img,
.repair-service-card:nth-child(2):hover .repair-card-media img{
  transform:scale(1.075) !important;
}


/* =========================================================
   V64 — DÉPANNAGE : IMAGES DISTINCTES / CTA TYPO CORRIGÉ
   ========================================================= */

/* Hero distinct : léger zoom pour ne laisser aucun bord sombre visible */
.repair-page-hero .visual-page-media img{
  object-fit:cover !important;
  object-position:center 52% !important;
  transform:scale(1.055) !important;
}
.repair-page-hero .visual-page-media:hover img{
  transform:scale(1.085) !important;
}

/* Diagnostic / Matériel : crop plein cadre, sans icône dessinée qui déborde */
.repair-service-card:nth-child(1) .repair-card-media,
.repair-service-card:nth-child(2) .repair-card-media{
  overflow:hidden !important;
}
.repair-service-card:nth-child(1) .repair-card-media img,
.repair-service-card:nth-child(2) .repair-card-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.02) !important;
}
.repair-service-card:nth-child(1):hover .repair-card-media img,
.repair-service-card:nth-child(2):hover .repair-card-media img{
  transform:scale(1.07) !important;
}

/* Le point d'interrogation ne peut plus se retrouver seul sur une ligne */
.repair-help-copy h2{
  max-width:980px !important;
  font-size:clamp(2rem,3.55vw,3.6rem) !important;
}
.repair-help-line{
  display:block !important;
}
.repair-help-question{
  white-space:nowrap !important;
}

@media(max-width:760px){
  .repair-help-question{
    white-space:normal !important;
  }
  .repair-help-copy h2{
    font-size:clamp(2rem,9vw,3rem) !important;
  }
}


/* =========================================================
   V66 FINAL — BLOC CONTACT DÉPANNAGE
   Images et autres sections volontairement inchangées.
   ========================================================= */

.repair-help{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(111,213,231,.16), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(49,119,177,.16), transparent 30%),
    linear-gradient(118deg, #18313a 0%, #142a34 42%, #102431 72%, #122b39 100%) !important;
  border:1px solid rgba(139,218,232,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 20px 55px rgba(0,0,0,.18) !important;
}

.repair-help::before{
  content:"" !important;
  position:absolute !important;
  width:430px !important;
  height:430px !important;
  right:-160px !important;
  top:-245px !important;
  border:1px solid rgba(129,216,232,.09) !important;
  border-radius:50% !important;
  box-shadow:
    0 0 0 42px rgba(129,216,232,.025),
    0 0 0 86px rgba(129,216,232,.018) !important;
  pointer-events:none !important;
}

.repair-help::after{
  content:"" !important;
  position:absolute !important;
  left:5% !important;
  bottom:-1px !important;
  width:36% !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(124,222,239,.7), transparent) !important;
  opacity:.7 !important;
  pointer-events:none !important;
}

.repair-help > *{
  position:relative !important;
  z-index:1 !important;
}

/* Carte téléphone : plus premium, sans modifier sa structure */
.repair-help a[href^="tel:"],
.repair-help .repair-help-phone,
.repair-help .repair-help-contact{
  background:
    linear-gradient(135deg, rgba(39,76,87,.94), rgba(25,52,63,.96)) !important;
  border-color:rgba(137,220,235,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 32px rgba(0,0,0,.16) !important;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease !important;
}

.repair-help a[href^="tel:"]:hover,
.repair-help .repair-help-phone:hover,
.repair-help .repair-help-contact:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(148,230,244,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 38px rgba(0,0,0,.22),
    0 0 28px rgba(92,196,219,.10) !important;
}

@media(max-width:760px){
  .repair-help::before{
    width:300px !important;
    height:300px !important;
    right:-150px !important;
    top:-165px !important;
  }
}


/* =========================================================
   V68 — TRANSITIONS DOUCES ENTRE LES GRANDES SECTIONS
   Supprime les cassures nettes noir / gris sans modifier
   le contenu ni les animations existantes.
   ========================================================= */

.mock-services,
.mock-trust,
.mock-gallery,
.contact-premium,
.site-footer{
  position:relative;
}

/* Fondu supérieur de la zone Réalisations :
   le gris apparaît progressivement depuis le fond sombre. */
.mock-gallery::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:-120px;
  width:100vw;
  height:150px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,13,20,0) 0%,
    rgba(12,24,31,.22) 24%,
    rgba(21,34,41,.55) 62%,
    rgba(35,49,57,.40) 100%
  );
}

/* Adoucit également les autres changements de grandes zones. */
.mock-trust{
  box-shadow:
    0 -28px 55px rgba(18,31,38,.20),
    0 28px 55px rgba(18,31,38,.18) !important;
}

.contact-premium::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-90px;
  height:90px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(24,35,42,0) 0%,
    rgba(20,32,39,.50) 58%,
    rgba(16,28,35,.92) 100%
  );
}

/* Mobile : fondu un peu plus court pour éviter de manger l'espace. */
@media (max-width: 760px){
  .mock-gallery::after{
    top:-72px;
    height:92px;
  }
  .contact-premium::before{
    top:-56px;
    height:56px;
  }
}


/* =========================================================
   V69 — FOND CONTINU / SUPPRESSION DES CASSURES VISUELLES
   ========================================================= */

/* On laisse le fond général du <main> assurer la continuité.
   Les grandes zones n'ont plus de rectangle de couleur à bord net. */
.mock-services,
.mock-gallery,
.mock-contact,
.contact-premium{
  background:transparent !important;
}

/* Le bandeau avantages doit réellement flotter dans le fond :
   aucun pavé sombre, aucune ombre rectangulaire. */
.mock-trust{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* Annule uniquement les artifices de transition ajoutés en V68. */
.mock-gallery::after,
.contact-premium::before{
  content:none !important;
  display:none !important;
}

/* Fond général plus lumineux et surtout progressif :
   sombre en haut, acier au centre, puis retour doux au sombre. */
body.site-body.mock-home main{
  background:
    radial-gradient(circle at 76% 12%,rgba(75,142,157,.10),transparent 28%),
    radial-gradient(circle at 18% 58%,rgba(70,122,136,.07),transparent 34%),
    linear-gradient(
      180deg,
      #071018 0%,
      #0b151c 18%,
      #101d24 36%,
      #17262d 52%,
      #1b2a31 63%,
      #142229 76%,
      #0c171e 90%,
      #081118 100%
    ) !important;
}

/* Les cartes conservent leur contraste sans assombrir toute la section. */
.mock-service-card{
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Bandeau confiance : texte un peu plus lisible sur le nouveau fond. */
.trust-item strong{
  color:#f0f4f5 !important;
}
.trust-item small{
  color:#b8c5ca !important;
}

/* Pas de rectangle perceptible autour de la ligne de confiance. */
.mock-trust::before{
  z-index:0 !important;
}
.mock-trust::after{
  z-index:1 !important;
}
.mock-trust > *{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:760px){
  body.site-body.mock-home main{
    background:
      linear-gradient(
        180deg,
        #081119 0%,
        #0f1c23 35%,
        #18272e 58%,
        #101d24 78%,
        #09131a 100%
      ) !important;
  }
}


/* =========================================================
   V70 — HEADER UNIFIÉ SUR TOUTES LES PAGES
   Même présence visuelle que la page d'accueil :
   logo plus grand + fond plus clair + contraste renforcé.
   ========================================================= */

/* Fond du bandeau supérieur : plus clair que le reste du site */
.site-header{
  background:
    radial-gradient(circle at 18% 0%, rgba(63,142,166,.16), transparent 34%),
    linear-gradient(180deg, #17242c 0%, #132029 58%, #101a21 100%) !important;
  border-bottom:1px solid rgba(111,190,205,.22) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.02) !important;
}

/* Toutes les pages internes utilisent la même hauteur générale que l'accueil */
.site-header .nav-wrap{
  min-height:102px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
  align-items:center !important;
}

/* Logo principal : même taille que sur la page d'accueil */
.site-header .brand{
  width:385px !important;
  min-width:335px !important;
  display:flex !important;
  align-items:center !important;
}

.site-header .brand img{
  height:84px !important;
  width:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  filter:
    brightness(1.08)
    drop-shadow(0 0 7px rgba(52,128,255,.28))
    drop-shadow(0 0 16px rgba(24,84,220,.12)) !important;
}

/* Le fond immédiat du logo gagne encore un peu de lumière,
   sans créer de bloc rectangulaire visible. */
.site-header .brand::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  left:-24px !important;
  top:50% !important;
  width:390px !important;
  height:86px !important;
  transform:translateY(-50%) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 35% 50%,rgba(77,144,180,.16),transparent 55%) !important;
  filter:blur(2px) !important;
  pointer-events:none !important;
}

.site-header .brand{
  position:relative !important;
  z-index:1 !important;
}

/* Navigation légèrement plus lisible sur ce fond */
.site-header .nav a{
  color:#d9e2e6 !important;
}
.site-header .nav a:hover,
.site-header .nav a.is-active{
  color:#ffffff !important;
}

/* Tablette */
@media(max-width:1150px){
  .site-header .brand{
    width:330px !important;
    min-width:280px !important;
  }
  .site-header .brand img{
    height:76px !important;
  }
  .site-header .nav-wrap{
    min-height:94px !important;
  }
}

/* Mobile */
@media(max-width:760px){
  .site-header .brand{
    width:230px !important;
    min-width:0 !important;
  }
  .site-header .brand img{
    height:62px !important;
  }
  .site-header .nav-wrap{
    min-height:82px !important;
  }
  .site-header .brand::before{
    width:240px !important;
    height:70px !important;
    left:-10px !important;
  }
}


/* =========================================================
   CLIENT V1 — PRIORITÉ DÉPANNAGE / RÉPARATION / MAINTENANCE
   ========================================================= */

/* Téléphone dans le menu */
.mock-main-nav{
  gap:24px !important;
}
.mock-main-nav .nav-phone{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:0 13px !important;
  margin:0 0 0 2px !important;
  border:1px solid rgba(114,202,218,.35) !important;
  border-radius:10px !important;
  background:linear-gradient(145deg,rgba(37,65,76,.90),rgba(19,38,47,.92)) !important;
  color:#eef8fa !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
.mock-main-nav .nav-phone::after{
  display:none !important;
}
.mock-main-nav .nav-phone:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(130,228,241,.68) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18),0 0 18px rgba(79,190,213,.08) !important;
}

/* Nouveau logo métal : animation du logo conservée */
.brand-neon img{
  filter:brightness(1.14) contrast(1.08) drop-shadow(0 0 5px rgba(32,131,255,.62)) drop-shadow(0 0 15px rgba(10,91,255,.30)) !important;
}

/* Hero : réparation / PC fixe + portable */
.mock-hero{
  background:
    radial-gradient(circle at 75% 34%,rgba(67,144,170,.10),transparent 32%),
    linear-gradient(90deg,
      #101a20 0%,
      #101a20 26%,
      rgba(16,26,32,.98) 34%,
      rgba(16,26,32,.88) 43%,
      rgba(16,26,32,.62) 53%,
      rgba(16,26,32,.29) 64%,
      rgba(16,26,32,.08) 74%,
      transparent 84%),
    url("../img/hero-depannage-fixe-portable-v1.webp") right center / auto 100% no-repeat,
    #101a20 !important;
}
.mock-hero h1{
  font-size:clamp(2.55rem,3.3vw,3.9rem) !important;
}
.mock-hero h1 span{
  color:#91cbd4 !important;
}
.mock-kicker{
  display:block !important;
}
.mock-btn-blue{
  min-width:270px !important;
}

/* Les 3 services principaux restent au premier plan */
.mock-services{
  margin-bottom:20px !important;
}
.mock-service-card:first-child{
  border-color:rgba(125,214,226,.52) !important;
  box-shadow:0 20px 46px rgba(0,0,0,.19),0 0 24px rgba(79,183,205,.06) !important;
}
.service-photo{
  height:190px !important;
}

/* Branche secondaire assemblage / gaming */
.secondary-offer-card{
  width:min(1440px,calc(100% - 64px));
  margin:0 auto 34px;
  min-height:190px;
  display:grid;
  grid-template-columns:minmax(280px,.42fr) minmax(0,.58fr);
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(111,151,162,.30);
  background:linear-gradient(135deg,rgba(25,39,47,.86),rgba(15,27,34,.92));
  text-decoration:none;
  box-shadow:0 16px 38px rgba(0,0,0,.13);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.secondary-offer-card:hover{
  transform:translateY(-4px);
  border-color:rgba(113,204,218,.55);
  box-shadow:0 22px 48px rgba(0,0,0,.20),0 0 25px rgba(77,184,204,.07);
}
.secondary-offer-media{
  min-height:190px;
  overflow:hidden;
}
.secondary-offer-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.86) brightness(.87);
  transition:transform .6s ease,filter .45s ease;
}
.secondary-offer-card:hover .secondary-offer-media img{
  transform:scale(1.045);
  filter:saturate(.96) brightness(.94);
}
.secondary-offer-copy{
  padding:30px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.secondary-offer-copy>span{
  color:#85c9d2;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.16em;
}
.secondary-offer-copy h2{
  margin:8px 0 8px;
  color:#f0f4f5;
  font-size:1.35rem;
}
.secondary-offer-copy p{
  margin:0 0 14px;
  color:#aebbc0;
  line-height:1.55;
  font-size:.87rem;
}
.secondary-offer-copy strong{
  color:#81d3dc;
  font-size:.70rem;
  letter-spacing:.04em;
}

/* Navigation responsive avec numéro de téléphone */
@media(max-width:1260px){
  .mock-main-nav{gap:14px !important;font-size:.70rem !important}
  .mock-main-nav .nav-phone{font-size:.66rem !important;padding:0 10px !important}
  .brand-neon{width:255px !important;min-width:255px !important}
}
@media(max-width:980px){
  .mock-main-nav .nav-phone{
    width:100% !important;
    margin:8px 0 4px !important;
    min-height:44px !important;
  }
}
@media(max-width:760px){
  .mock-hero{
    background:
      linear-gradient(90deg,
        rgba(16,26,32,.99) 0%,
        rgba(16,26,32,.96) 58%,
        rgba(16,26,32,.68) 78%,
        rgba(16,26,32,.28) 100%),
      url("../img/hero-depannage-fixe-portable-v1.webp") 65% center / auto 100% no-repeat,
      #101a20 !important;
  }
  .secondary-offer-card{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
  }
  .secondary-offer-media{
    min-height:210px;
    height:210px;
  }
  .secondary-offer-copy{
    padding:24px 22px;
  }
}


/* =========================================================
   CLIENT V2 — CORRECTIONS APRÈS RETOUR CLIENT
   ========================================================= */

/* --- HERO ACCUEIL : visuel et présentation d'origine conservés --- */
.mock-hero{
  background:
    radial-gradient(circle at 74% 40%,rgba(16,94,202,.16),transparent 31%),
    linear-gradient(118deg,#03070c 0%,#050b15 48%,#07101e 100%) !important;
}
/* Le visuel original est géré par ses pseudo/overlays existants : on annule
   l'image de dépannage ajoutée en CLIENT V1. */
.mock-hero{
  background-image:
    radial-gradient(circle at 74% 40%,rgba(16,94,202,.16),transparent 31%),
    linear-gradient(118deg,#03070c 0%,#050b15 48%,#07101e 100%) !important;
}

/* --- MENU : plus d'air entre les rubriques --- */
.mock-main-nav{
  gap:0 !important;
  column-gap:0 !important;
  display:flex !important;
  align-items:center !important;
}
.mock-main-nav > a:not(.nav-phone){
  margin:0 13px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  white-space:nowrap !important;
}
.mock-main-nav .nav-phone{
  margin-left:18px !important;
  flex:0 0 auto !important;
}
@media(max-width:1320px){
  .mock-main-nav > a:not(.nav-phone){
    margin-left:9px !important;
    margin-right:9px !important;
    font-size:.70rem !important;
  }
  .mock-main-nav .nav-phone{
    margin-left:11px !important;
  }
}
@media(max-width:1080px){
  .mock-main-nav > a:not(.nav-phone){
    margin-left:6px !important;
    margin-right:6px !important;
  }
}

/* --- LOGO : mot INFORMATIQUE plus lumineux --- */
.brand-neon img{
  filter:
    brightness(1.08)
    contrast(1.08)
    drop-shadow(0 0 5px rgba(32,131,255,.58))
    drop-shadow(0 0 14px rgba(10,91,255,.24)) !important;
}

/* --- CARTES ACCUEIL : supprimer définitivement l'effet de double cadre --- */
.mock-service-card{
  min-height:0 !important;
  height:auto !important;
  border:1px solid rgba(92,133,148,.48) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.18) !important;
}
.mock-service-card::before,
.mock-service-card::after{
  content:none !important;
  display:none !important;
}
.service-card-body{
  min-height:0 !important;
  height:auto !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.service-card-body::before,
.service-card-body::after{
  content:none !important;
  display:none !important;
}
.mock-service-card > *:last-child{
  margin-bottom:0 !important;
}

/* On garde les cartes lisibles sans une seconde bordure fantôme en bas. */
.mock-services{
  align-items:stretch !important;
}
.mock-services .mock-service-card{
  align-self:stretch !important;
  overflow:hidden !important;
}

/* Restore original hero image rule from reference */
.mock-hero[style*="hero-dxf-pro-v18"],
.mock-hero[style*="hero-dxf-pro-v19"]{
  background-image:url("../img/hero-dxf-pro-v17.webp") !important;
}
.mock-hero{
  background:
    url("../img/hero-dxf-pro-v17.webp") 73% center / cover no-repeat !important;
}
.mock-hero{
    min-height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:
      linear-gradient(180deg,
        rgba(13,22,28,.88) 0%,
        rgba(13,22,28,.82) 48%,
        rgba(13,22,28,.94) 100%),
      url("../img/hero-dxf-pro-v17.webp") 66% center / cover no-repeat !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }


/* =========================================================
   CLIENT V2 — VERROUILLAGE FINAL DU HERO D'ORIGINE
   ========================================================= */

/* Desktop : exactement le visuel principal d'origine du ZIP SITE DXF */
@media(min-width:761px){
  .mock-hero{
    position:relative !important;
    isolation:isolate !important;
    width:100% !important;
    min-height:620px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:
      url("../img/hero-dxf-pro-v17.webp") 73% center / cover no-repeat !important;
  }
  .mock-hero-grid{
    min-height:620px !important;
  }
}

/* Mobile : même photo principale, avec voile pour garder le texte lisible */
@media(max-width:760px){
  .mock-hero{
    min-height:730px !important;
    background:
      linear-gradient(90deg,
        rgba(17,26,32,.99) 0%,
        rgba(17,26,32,.96) 58%,
        rgba(17,26,32,.68) 78%,
        rgba(17,26,32,.28) 100%),
      url("../img/hero-dxf-pro-v17.webp") 70% center / cover no-repeat !important;
  }
}


/* =========================================================
   CLIENT V3 — HEADER AÉRÉ / LOGO UNIFIÉ / CARTES CORRIGÉES
   ========================================================= */

.unified-header{
  min-height:122px !important;
  height:auto !important;
  background:
    radial-gradient(circle at 15% 0%,rgba(61,139,161,.14),transparent 31%),
    linear-gradient(180deg,#18262e 0%,#132129 62%,#101b22 100%) !important;
  border-bottom:1px solid rgba(123,196,208,.23) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.16) !important;
}

.unified-nav{
  min-height:120px !important;
  height:auto !important;
  max-width:1580px !important;
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  align-items:center !important;
  gap:38px !important;
  padding:10px 34px !important;
}

.unified-header .brand-neon{
  width:300px !important;
  min-width:300px !important;
  height:96px !important;
  position:relative !important;
}
.unified-header .brand-neon img{
  width:100% !important;
  height:88px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.unified-main-nav{
  position:static !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:12px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  max-height:none !important;
}

.header-primary{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:clamp(22px,2.3vw,42px) !important;
  min-height:34px !important;
}
.header-utility{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:14px !important;
  min-height:42px !important;
}

.unified-main-nav .header-primary > a,
.unified-main-nav .header-contact{
  margin:0 !important;
  padding:8px 0 !important;
  color:#cbd5d9 !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.025em !important;
  white-space:nowrap !important;
}
.unified-main-nav .header-primary > a:hover,
.unified-main-nav .header-primary > a.active,
.unified-main-nav .header-contact:hover{
  color:#f5fafb !important;
}
.unified-main-nav .header-primary > a.active::after{
  bottom:1px !important;
}

.unified-main-nav .header-contact{
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 16px !important;
  border-radius:10px !important;
  border:1px solid rgba(105,162,175,.26) !important;
  background:rgba(21,39,47,.68) !important;
}
.unified-main-nav .nav-phone{
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 16px !important;
  margin:0 !important;
  border-radius:10px !important;
  border:1px solid rgba(123,210,223,.40) !important;
  background:linear-gradient(145deg,rgba(42,75,86,.92),rgba(23,47,57,.94)) !important;
  color:#f0f8fa !important;
  font-size:.75rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.phone-symbol{
  color:#a8edf3 !important;
  font-size:.90rem !important;
}

.mock-services .mock-service-card{
  border:1px solid rgba(93,137,151,.48) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#223139 0%,#19262d 100%) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.16) !important;
}
.mock-services .mock-service-card::before,
.mock-services .mock-service-card::after{
  content:none !important;
  display:none !important;
}
.mock-services .service-photo{
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
}
.mock-services .service-card-body{
  border:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  margin:0 !important;
}
.mock-services .service-card-body::before,
.mock-services .service-card-body::after{
  content:none !important;
  display:none !important;
}

@media(max-width:1120px){
  .unified-nav{
    grid-template-columns:245px minmax(0,1fr) !important;
    gap:22px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .unified-header .brand-neon{
    width:245px !important;
    min-width:245px !important;
  }
  .header-primary{gap:18px !important}
  .unified-main-nav .header-primary > a{font-size:.70rem !important}
}

@media(max-width:900px){
  .unified-header{min-height:78px !important}
  .unified-nav{
    position:relative !important;
    width:min(100% - 24px,860px) !important;
    min-height:78px !important;
    height:78px !important;
    margin:0 auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .unified-header .brand-neon{
    width:215px !important;
    min-width:0 !important;
    height:68px !important;
    flex:0 1 215px !important;
  }
  .unified-header .brand-neon img{height:62px !important}

  .unified-main-nav{
    position:absolute !important;
    top:78px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:0 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:0 14px !important;
    background:rgba(8,15,20,.988) !important;
    border:1px solid rgba(108,145,156,.24) !important;
    border-top:0 !important;
    border-radius:0 0 14px 14px !important;
    box-shadow:0 20px 45px rgba(0,0,0,.30) !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:max-height .3s ease,opacity .22s ease,padding .3s ease !important;
    z-index:100 !important;
  }
  .unified-main-nav.is-open{
    max-height:620px !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:10px 14px 16px !important;
  }
  .header-primary,
  .header-utility{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
  }
  .unified-main-nav .header-primary > a,
  .unified-main-nav .header-contact,
  .unified-main-nav .nav-phone{
    width:100% !important;
    min-height:46px !important;
    margin:0 !important;
    padding:14px 10px !important;
    justify-content:flex-start !important;
    text-align:left !important;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.065) !important;
    background:transparent !important;
    font-size:.90rem !important;
  }
  .unified-main-nav .nav-phone{border-bottom:0 !important}
  .unified-main-nav a::after{display:none !important}
}

/* V4 — Diaporama Réalisations dans l'activité complémentaire */
.secondary-offer-media{position:relative;overflow:hidden;background:#07131c}
.secondary-offer-media img.secondary-slideshow-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease,transform 4.8s ease;transform:scale(1.015)}
.secondary-offer-media img.secondary-slideshow-image.is-active{opacity:1;transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.secondary-offer-media img.secondary-slideshow-image{transition:none;transform:none}.secondary-offer-media img.secondary-slideshow-image.is-active{transform:none}}


/* =========================================================
   CLIENT V5 — DIAPORAMA RÉALISATIONS SUR PC SUR MESURE
   ========================================================= */
.assembly-random-slideshow{
  position:relative !important;
  overflow:hidden !important;
  min-height:560px !important;
  background:#101b22 !important;
}
.assembly-random-slideshow .secondary-slideshow-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:0 !important;
  transform:scale(1.015) !important;
  transition:opacity .9s ease, transform 4.8s ease !important;
}
.assembly-random-slideshow .secondary-slideshow-image.is-active{
  opacity:1 !important;
  transform:scale(1.055) !important;
}
.new-realisation-card{
  animation:newRealisationReveal .6s ease both;
}
@keyframes newRealisationReveal{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media(max-width:900px){
  .assembly-random-slideshow{
    min-height:420px !important;
  }
}
@media(max-width:620px){
  .assembly-random-slideshow{
    min-height:330px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .assembly-random-slideshow .secondary-slideshow-image{
    transition:none !important;
    transform:none !important;
  }
  .new-realisation-card{
    animation:none !important;
  }
}


/* =========================================================
   CLIENT V6 — AVIS GOOGLE STATIQUES
   ========================================================= */

/* Bouton Avis Google dans l'entête */
.header-google-reviews{
  min-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 15px !important;
  border-radius:10px !important;
  border:1px solid rgba(242,183,45,.38) !important;
  background:
    linear-gradient(145deg,rgba(63,54,31,.78),rgba(31,37,38,.88)) !important;
  color:#f3f6f7 !important;
  font-size:.73rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
.header-google-reviews::after{display:none !important}
.google-review-star{
  color:#fbbc04 !important;
  font-size:1.02rem !important;
  line-height:1 !important;
  text-shadow:0 0 10px rgba(251,188,4,.28);
}
.header-google-reviews:hover,
.header-google-reviews.active{
  transform:translateY(-2px) !important;
  border-color:rgba(251,188,4,.68) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16),0 0 18px rgba(251,188,4,.08) !important;
}

/* Hero Avis */
.reviews-hero{
  position:relative;
  overflow:hidden;
  padding:86px 0 78px;
  background:
    radial-gradient(circle at 78% 25%,rgba(66,133,244,.13),transparent 27%),
    radial-gradient(circle at 65% 78%,rgba(251,188,4,.07),transparent 24%),
    linear-gradient(135deg,#101c23 0%,#14242c 56%,#0d1820 100%);
}
.reviews-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
}
.reviews-glow-a{width:330px;height:330px;right:7%;top:-160px;background:rgba(66,133,244,.08)}
.reviews-glow-b{width:280px;height:280px;left:4%;bottom:-190px;background:rgba(52,168,83,.05)}

.reviews-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.75fr);
  align-items:center;
  gap:72px;
}
.reviews-kicker{
  display:block;
  margin-bottom:12px;
  color:#86d3dc;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.18em;
}
.reviews-hero h1{
  margin:0 0 20px;
  max-width:850px;
  color:#f2f5f6;
  font-size:clamp(2.8rem,5.2vw,5.3rem);
  line-height:.98;
  letter-spacing:-.05em;
}
.reviews-hero h1 span{
  color:#a8d5dc;
}
.reviews-hero-copy>p{
  max-width:760px;
  color:#b4c1c6;
  line-height:1.7;
  font-size:1rem;
}
.reviews-rating-panel{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  max-width:100%;
  margin:30px 0 26px;
  padding:17px 22px;
  border:1px solid rgba(135,173,183,.34);
  border-radius:18px;
  background:rgba(29,48,57,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.reviews-score{
  color:#fff;
  font-size:2.35rem;
  font-weight:950;
  line-height:1;
}
.reviews-score span{
  color:#8da0a7;
  font-size:.92rem;
}
.reviews-stars,
.review-card-stars{
  color:#fbbc04;
  letter-spacing:.08em;
  text-shadow:0 0 9px rgba(251,188,4,.13);
}
.reviews-rating-panel strong{
  display:block;
  margin-top:4px;
  color:#eaf0f2;
}
.reviews-rating-panel small{
  display:block;
  margin-top:3px;
  color:#82969e;
  font-size:.68rem;
}
.reviews-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
}
.review-main-btn,
.review-secondary-btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 20px;
  border-radius:11px;
  font-weight:900;
  font-size:.78rem;
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.review-main-btn{
  border:1px solid rgba(251,188,4,.48);
  background:linear-gradient(135deg,#324249,#1d3038);
  color:#fff;
}
.review-main-btn:hover{
  transform:translateY(-3px);
  border-color:#fbbc04;
  box-shadow:0 14px 30px rgba(0,0,0,.20),0 0 20px rgba(251,188,4,.08);
}
.review-secondary-btn{
  border:1px solid rgba(121,169,180,.32);
  color:#c8d8dd;
  background:rgba(18,33,41,.62);
}

.reviews-google-visual{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:30px;
  border:1px solid rgba(123,171,182,.26);
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.055),transparent 44%),
    linear-gradient(145deg,rgba(33,54,63,.75),rgba(16,29,36,.86));
  box-shadow:0 30px 60px rgba(0,0,0,.20);
  overflow:hidden;
}
.google-visual-halo{
  position:absolute;
  width:310px;
  height:310px;
  border-radius:50%;
  background:
    conic-gradient(from 45deg,
      rgba(66,133,244,.10),
      rgba(234,67,53,.07),
      rgba(251,188,4,.08),
      rgba(52,168,83,.07),
      rgba(66,133,244,.10));
  filter:blur(35px);
  animation:googleHaloRotate 12s linear infinite;
}
@keyframes googleHaloRotate{to{transform:rotate(360deg)}}
.google-reviews-logo{
  position:relative;
  z-index:2;
  width:min(360px,80%);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.26));
}
.review-trust-chip{
  position:absolute;
  z-index:3;
  right:24px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,20,25,.78);
  backdrop-filter:blur(7px);
}
.review-trust-chip img{width:28px;height:28px;object-fit:contain}
.review-trust-chip span{display:grid}
.review-trust-chip strong{font-size:.74rem;color:#f5f7f8}
.review-trust-chip small{font-size:.61rem;color:#91a0a6}

/* Grille avis */
.reviews-static-section{
  padding:78px 0 82px;
  background:
    radial-gradient(circle at 50% 0%,rgba(72,140,157,.07),transparent 30%),
    #111e25;
}
.reviews-section-title{
  max-width:830px;
  margin:0 auto 36px;
  text-align:center;
}
.reviews-section-title>span{
  color:#83d0da;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.18em;
}
.reviews-section-title h2{
  margin:8px 0 12px;
  color:#f0f4f5;
  font-size:clamp(2rem,3.6vw,3.4rem);
  letter-spacing:-.035em;
}
.reviews-section-title p{
  color:#9cadb4;
  line-height:1.65;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.review-card{
  position:relative;
  min-height:285px;
  display:flex;
  flex-direction:column;
  padding:27px;
  border-radius:22px;
  border:1px solid rgba(105,151,164,.34);
  background:
    radial-gradient(circle at 0 0,rgba(92,185,201,.06),transparent 34%),
    linear-gradient(145deg,#22323a,#18262d);
  box-shadow:0 18px 38px rgba(0,0,0,.15);
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.review-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,207,219,.55);
  box-shadow:0 24px 48px rgba(0,0,0,.22),0 0 24px rgba(75,185,205,.06);
}
.review-card-top{
  display:flex;
  align-items:center;
  gap:12px;
}
.review-google-g{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#f7f8f9;
  color:#4285f4;
  font-size:1.35rem;
  font-weight:950;
  font-family:Arial,sans-serif;
}
.review-card-top small{
  color:#82969d;
  font-size:.62rem;
}
.review-card blockquote{
  margin:25px 0;
  color:#e0e7e9;
  font-size:1.02rem;
  line-height:1.65;
  font-style:normal;
}
.review-card-footer{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.07);
}
.review-card-footer span{
  color:#8dcbd3;
  font-size:.67rem;
  font-weight:800;
}
.review-card-footer strong{
  color:#fbbc04;
  font-size:.70rem;
}
.reviews-source-note{
  margin-top:30px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  border-radius:18px;
  border:1px solid rgba(106,151,163,.26);
  background:rgba(20,35,43,.72);
}
.source-note-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid rgba(117,204,216,.36);
  color:#93dce5;
  font-weight:950;
}
.reviews-source-note strong{color:#e7edef}
.reviews-source-note p{margin:3px 0 0;color:#899ba2;font-size:.75rem;line-height:1.5}
.reviews-source-note>a{color:#90d7df;font-size:.72rem;font-weight:900;text-decoration:none;white-space:nowrap}

/* CTA */
.reviews-cta-section{
  padding:0 0 72px;
  background:#111e25;
}
.reviews-cta-card{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:34px 40px;
  border-radius:24px;
  border:1px solid rgba(127,181,193,.30);
  background:
    radial-gradient(circle at 85% 20%,rgba(251,188,4,.07),transparent 24%),
    linear-gradient(120deg,#1e323b,#17272f);
}
.reviews-cta-card span{
  color:#88d3dc;font-size:.66rem;font-weight:950;letter-spacing:.16em
}
.reviews-cta-card h2{margin:7px 0;color:#f0f4f5;font-size:1.8rem}
.reviews-cta-card p{margin:0;color:#96a7ae}
.reviews-cta-card>a{
  flex:0 0 auto;
  padding:15px 20px;
  border-radius:12px;
  background:#fbbc04;
  color:#172027;
  text-decoration:none;
  font-size:.76rem;
  font-weight:950;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

/* Responsive */
@media(max-width:1120px){
  .header-utility{flex-wrap:wrap !important}
  .reviews-hero-grid{grid-template-columns:1fr 390px;gap:35px}
}
@media(max-width:900px){
  .header-google-reviews{
    width:100% !important;
    min-height:46px !important;
    margin:0 !important;
    padding:14px 10px !important;
    justify-content:flex-start !important;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.065) !important;
    background:transparent !important;
    font-size:.90rem !important;
  }
  .reviews-hero-grid{grid-template-columns:1fr}
  .reviews-google-visual{min-height:320px}
  .reviews-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .reviews-hero{padding:58px 0 54px}
  .reviews-rating-panel{width:100%;align-items:flex-start}
  .reviews-google-visual{min-height:275px;border-radius:22px}
  .reviews-source-note{grid-template-columns:38px 1fr}
  .reviews-source-note>a{grid-column:2}
  .reviews-cta-card{flex-direction:column;align-items:flex-start;padding:28px 24px}
}
@media(prefers-reduced-motion:reduce){
  .google-visual-halo{animation:none !important}
}


/* =========================================================
   CLIENT V7 — AVIS CLIENTS : HEADER + VISUEL + 10 CARTES
   ========================================================= */

/* Bouton Avis Google : même hauteur que Contact et Téléphone */
.header-utility{
  align-items:center !important;
}
.header-google-reviews{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  width:auto !important;
  min-width:154px !important;
  padding:0 17px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  line-height:1 !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
}
.header-google-reviews .google-review-star{
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
}
.unified-main-nav .header-contact,
.unified-main-nav .nav-phone{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  box-sizing:border-box !important;
}

/* Nouveau visuel Google entièrement net : aucun bitmap agrandi */
.reviews-google-visual{
  min-height:430px !important;
  padding:34px !important;
}
.google-review-composition{
  position:relative;
  z-index:2;
  width:100%;
  min-height:350px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.google-wordmark{
  display:flex;
  align-items:baseline;
  justify-content:center;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(4rem,7vw,7.3rem);
  font-weight:600;
  line-height:.95;
  letter-spacing:-.08em;
  text-shadow:0 8px 22px rgba(0,0,0,.16);
}
.google-wordmark span{display:inline-block}
.g-blue{color:#4285f4}
.g-red{color:#ea4335}
.g-yellow{color:#fbbc05}
.g-green{color:#34a853}
.google-big-stars{
  margin-top:24px;
  color:#fbbc04;
  font-size:clamp(2.3rem,4.5vw,4.3rem);
  line-height:1;
  letter-spacing:.08em;
  text-shadow:0 0 16px rgba(251,188,4,.12);
}
.google-review-label{
  margin-top:16px;
  color:#e7ecee;
  font-size:1.55rem;
  font-weight:850;
  letter-spacing:.01em;
}
.google-score-chip{
  margin-top:27px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(9,20,26,.72);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}
.chip-star{
  color:#fbbc04;
  font-size:2rem;
  line-height:1;
}
.google-score-chip span:last-child{
  display:flex;
  flex-direction:column;
}
.google-score-chip strong{
  color:#f4f7f8;
  font-size:.80rem;
}
.google-score-chip small{
  margin-top:2px;
  color:#90a1a8;
  font-size:.64rem;
}

/* 10 avis : identités visibles */
.reviews-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
}
.review-card{
  min-height:310px !important;
}
.review-card-top{
  align-items:center !important;
}
.review-avatar{
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:.88rem;
  font-weight:950;
  letter-spacing:.03em;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.review-avatar-1{background:linear-gradient(145deg,#457b9d,#1d3557)}
.review-avatar-2{background:linear-gradient(145deg,#6a4c93,#3c1642)}
.review-avatar-3{background:linear-gradient(145deg,#2a9d8f,#176b60)}
.review-avatar-4{background:linear-gradient(145deg,#e76f51,#9b3d2c)}
.review-avatar-5{background:linear-gradient(145deg,#4f6d7a,#263a43)}
.review-avatar-6{background:linear-gradient(145deg,#3a86ff,#2457a7)}
.review-identity{
  min-width:0;
}
.review-identity>strong{
  display:block;
  margin-bottom:3px;
  color:#f1f5f6;
  font-size:.90rem;
}
.review-identity .review-card-stars{
  margin-bottom:3px;
}
.review-identity small{
  color:#82969d;
  font-size:.64rem;
}
.review-card blockquote{
  margin-top:22px !important;
  font-size:.96rem !important;
}

/* Note informative, plus de discours technique */
.reviews-source-note{
  grid-template-columns:46px minmax(0,1fr) auto !important;
}
.reviews-source-note .source-note-icon{
  color:#fbbc04 !important;
  border-color:rgba(251,188,4,.30) !important;
}

/* Responsive */
@media(max-width:1000px){
  .reviews-grid{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:900px){
  .header-google-reviews,
  .unified-main-nav .header-contact,
  .unified-main-nav .nav-phone{
    height:46px !important;
    min-height:46px !important;
    max-height:none !important;
  }
  .header-google-reviews{
    min-width:0 !important;
  }
}


/* =========================================================
   CLIENT V8 — CORRECTION BOUTON AVIS GOOGLE + COULEURS GOOGLE
   ========================================================= */

/* Même gabarit exact pour Avis Google, Contact et Téléphone.
   Spécificité volontairement forte pour neutraliser les anciennes
   règles .mock-main-nav a qui ajoutaient un gros padding vertical. */
.unified-header .unified-main-nav .header-utility > a.header-google-reviews,
.unified-header .unified-main-nav .header-utility > a.header-contact,
.unified-header .unified-main-nav .header-utility > a.nav-phone{
  box-sizing:border-box !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  border-radius:11px !important;
  vertical-align:middle !important;
}

/* Avis Google peut être plus large, mais jamais plus épais. */
.unified-header .unified-main-nav .header-utility > a.header-google-reviews{
  width:auto !important;
  min-width:178px !important;
  padding-left:19px !important;
  padding-right:19px !important;
  gap:9px !important;
}

/* Contact reste plus court */
.unified-header .unified-main-nav .header-utility > a.header-contact{
  min-width:118px !important;
  padding-left:18px !important;
  padding-right:18px !important;
}

/* Téléphone */
.unified-header .unified-main-nav .header-utility > a.nav-phone{
  min-width:180px !important;
  padding-left:17px !important;
  padding-right:17px !important;
}

/* L'étoile ne modifie jamais la hauteur du bouton */
.unified-header .header-google-reviews .google-review-star{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  font-size:1rem !important;
  line-height:18px !important;
  flex:0 0 18px !important;
}

/* Mot Google : couleurs officielles, lettre par lettre.
   Sélecteurs plus spécifiques pour empêcher tout héritage bleu. */
.reviews-google-visual .google-wordmark .google-c-blue{
  color:#4285F4 !important;
}
.reviews-google-visual .google-wordmark .google-c-red{
  color:#EA4335 !important;
}
.reviews-google-visual .google-wordmark .google-c-yellow{
  color:#FBBC05 !important;
}
.reviews-google-visual .google-wordmark .google-c-green{
  color:#34A853 !important;
}
.reviews-google-visual .google-wordmark span{
  -webkit-text-fill-color:currentColor !important;
}

/* Un rendu un peu plus proche du mot Google original */
.reviews-google-visual .google-wordmark{
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:-.075em !important;
}

/* Mobile : garder le comportement du menu déroulant */
@media(max-width:900px){
  .unified-header .unified-main-nav .header-utility > a.header-google-reviews,
  .unified-header .unified-main-nav .header-utility > a.header-contact,
  .unified-header .unified-main-nav .header-utility > a.nav-phone{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    padding:0 10px !important;
    justify-content:flex-start !important;
    border-radius:0 !important;
  }
}


/* =========================================================
   CLIENT V9 — "GOOGLE" MULTICOLORE DANS LE BOUTON AVIS
   ========================================================= */

.header-google-reviews .google-btn-avis{
  color:#f2f5f6 !important;
  font-weight:900 !important;
}

.header-google-reviews .google-btn-word{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:0 !important;
  margin-left:2px !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
  line-height:1 !important;
}

.header-google-reviews .google-btn-word > span{
  display:inline-block !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
}

.header-google-reviews .google-btn-blue{
  color:#4285F4 !important;
}
.header-google-reviews .google-btn-red{
  color:#EA4335 !important;
}
.header-google-reviews .google-btn-yellow{
  color:#FBBC05 !important;
}
.header-google-reviews .google-btn-green{
  color:#34A853 !important;
}

/* Garder le bouton bien aligné malgré les lettres séparées */
.unified-header .unified-main-nav .header-utility > a.header-google-reviews{
  gap:7px !important;
}


/* =========================================================
   CLIENT V10 — LOGO PRINCIPAL PLUS LARGE, SANS DÉFORMATION
   ========================================================= */
@media (min-width: 900px){
  .unified-header .brand,
  .unified-header .logo,
  .unified-header .site-logo,
  .unified-header .brand-logo{
    width:auto !important;
    max-width:none !important;
  }

  .unified-header .brand img,
  .unified-header .logo img,
  .unified-header .site-logo img,
  .unified-header .brand-logo img,
  .unified-header img.logo,
  .unified-header img.brand-logo{
    width:auto !important;
    height:auto !important;
    max-height:108px !important;
    max-width:430px !important;
    object-fit:contain !important;
  }
}


/* =========================================================
   CLIENT V15 — ASSISTANCE À DISTANCE
   ========================================================= */
.header-remote{
  min-height:48px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:0 16px !important;
  border-radius:11px !important;
  border:1px solid rgba(86,185,207,.42) !important;
  background:linear-gradient(145deg,rgba(23,56,68,.90),rgba(17,38,47,.95)) !important;
  color:#eaf7fa !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}
.header-remote::after{display:none !important}
.header-remote:hover,.header-remote.active{
  border-color:rgba(102,220,239,.76) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.16),0 0 18px rgba(58,192,220,.10) !important;
  transform:translateY(-2px) !important;
}
.remote-icon{
  width:19px;height:19px;display:grid;place-items:center;
  border:1px solid rgba(122,225,241,.48);
  border-radius:5px;color:#8de8f3;font-size:.78rem;
}

.remote-page{
  padding:62px 0 76px;
  background:
    radial-gradient(circle at 16% 10%,rgba(37,126,159,.10),transparent 28%),
    linear-gradient(135deg,#0d1820,#12222b 58%,#0b161d);
}
.remote-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
  gap:36px;
  align-items:stretch;
}
.remote-visual,.remote-panel{
  border-radius:26px;
  border:1px solid rgba(104,163,176,.30);
  background:linear-gradient(145deg,#182831,#101c23);
  box-shadow:0 24px 55px rgba(0,0,0,.20);
}
.remote-visual{
  position:relative;
  overflow:hidden;
  min-height:680px;
}
.remote-visual img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(.95) brightness(.83);
  transition:transform .7s ease,filter .4s ease;
}
.remote-visual:hover img{transform:scale(1.035);filter:saturate(1) brightness(.89)}
.remote-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(5,13,18,.42) 68%,rgba(5,13,18,.92) 100%);
}
.remote-visual-caption{
  position:absolute;z-index:2;left:34px;right:34px;bottom:32px;
}
.remote-visual-caption>span,.remote-kicker{
  color:#76d8e7;font-size:.68rem;font-weight:950;letter-spacing:.18em;
}
.remote-visual-caption h1{
  margin:8px 0 12px;color:#f3f6f7;font-size:clamp(2.4rem,4.6vw,4.7rem);
  line-height:.98;letter-spacing:-.045em;
}
.remote-visual-caption p{max-width:680px;margin:0;color:#b3c2c8;line-height:1.6}

.remote-panel{padding:34px}
.remote-panel h2{
  margin:8px 0 8px;color:#f0f4f5;font-size:2rem;letter-spacing:-.025em
}
.remote-intro{margin:0 0 22px;color:#9eafb6;line-height:1.55}
.remote-steps{display:grid;gap:12px}
.remote-steps article{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:15px;
  padding:17px 18px;border-radius:16px;
  border:1px solid rgba(92,144,158,.30);
  background:linear-gradient(145deg,rgba(28,48,57,.82),rgba(17,31,38,.88));
}
.remote-steps article>b{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:#fff;background:linear-gradient(145deg,#1fb3ee,#167ed5);
  box-shadow:0 8px 18px rgba(14,126,198,.22);
}
.remote-steps h3{margin:1px 0 5px;color:#edf3f5;font-size:.95rem}
.remote-steps p{margin:0;color:#9dacb2;line-height:1.48;font-size:.80rem}

.remote-download-btn{
  width:100%;height:58px;margin:18px 0 8px;border:1px solid rgba(107,201,219,.44);
  border-radius:13px;background:linear-gradient(90deg,#1baad4,#176bcf);
  color:#eef9fb;font-weight:950;font-size:.86rem;cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.17),0 0 20px rgba(32,157,212,.08);
  transition:transform .25s ease,filter .25s ease;
}
.remote-download-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.remote-coming-message{
  display:none;margin:0 0 12px;padding:10px 12px;text-align:center;border-radius:10px;
  color:#8edce7;background:rgba(24,57,68,.55);border:1px solid rgba(101,198,215,.28);
  font-size:.74rem;font-weight:800;
}
.remote-coming-message.is-visible{display:block}

.remote-info{
  margin-top:12px;padding:15px 17px;border-radius:14px;
}
.remote-info strong{display:block;margin-bottom:4px;font-size:.78rem}
.remote-info p{margin:0;font-size:.73rem;line-height:1.48}
.remote-info-blue{border:1px solid rgba(48,174,226,.38);background:rgba(17,49,64,.65)}
.remote-info-blue strong{color:#66d3f0}.remote-info-blue p{color:#a5b8c0}
.remote-info-warn{border:1px solid rgba(226,170,45,.45);background:rgba(74,57,22,.34)}
.remote-info-warn strong{color:#f0bf4d}.remote-info-warn p{color:#c7b994}
.remote-legal{margin:15px 0 0;color:#7f9299;font-size:.67rem;line-height:1.5}

@media(max-width:1050px){
  .remote-grid{grid-template-columns:1fr}
  .remote-visual{min-height:570px}
}
@media(max-width:900px){
  .header-remote{
    width:100% !important;height:46px !important;min-height:46px !important;
    justify-content:flex-start !important;border-radius:0 !important;border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.065) !important;background:transparent !important;
    padding:0 10px !important;font-size:.90rem !important;
  }
}
@media(max-width:620px){
  .remote-page{padding:34px 0 48px}
  .remote-visual{min-height:430px}
  .remote-visual-caption{left:22px;right:22px;bottom:22px}
  .remote-panel{padding:22px}
}


/* =========================================================
   CLIENT V16 — CORRECTIONS ASSISTANCE À DISTANCE
   ========================================================= */
/* Même hauteur exacte que Avis Google / Contact / téléphone */
.unified-header .unified-main-nav .header-utility > a.header-remote{
  box-sizing:border-box !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  min-width:210px !important;
  padding:0 17px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  line-height:1 !important;
  border-radius:11px !important;
  white-space:nowrap !important;
}
.unified-header .header-remote .remote-icon{
  width:19px !important;height:19px !important;min-width:19px !important;
  line-height:19px !important;flex:0 0 19px !important;
}

.remote-grid{align-items:start !important;grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr) !important}
.remote-left{display:grid;gap:18px;min-width:0}
.remote-visual{
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:16/10 !important;
  overflow:hidden !important;
  background:#13232c !important;
}
.remote-visual::after{display:none !important}
.remote-visual img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center 46% !important;
  filter:brightness(1.12) saturate(1.04) contrast(1.02) !important;
}
.remote-visual:hover img{filter:brightness(1.15) saturate(1.06) contrast(1.02) !important}
.remote-visual-caption{display:none !important}
.remote-visual-text{
  padding:25px 28px 27px;border-radius:22px;
  border:1px solid rgba(104,163,176,.28);
  background:linear-gradient(135deg,rgba(27,48,58,.96),rgba(15,29,36,.96));
}
.remote-visual-text h1{
  margin:7px 0 9px;color:#f3f6f7;font-size:clamp(2rem,3.2vw,3.2rem);
  line-height:1.02;letter-spacing:-.035em;
}
.remote-visual-text p{margin:0;color:#adbdc3;line-height:1.58;max-width:720px}
.remote-mini-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.remote-mini-points span{
  padding:8px 11px;border-radius:999px;border:1px solid rgba(102,206,223,.25);
  background:rgba(22,59,70,.55);color:#aee4ec;font-size:.69rem;font-weight:800;
}
.remote-panel{padding:30px !important}
.remote-panel h2{font-size:1.78rem !important}

@media(max-width:1050px){
  .remote-grid{grid-template-columns:1fr !important}
  .remote-visual{aspect-ratio:16/9 !important}
}
@media(max-width:900px){
  .unified-header .unified-main-nav .header-utility > a.header-remote{
    width:100% !important;height:46px !important;min-height:46px !important;max-height:46px !important;
    min-width:0 !important;justify-content:flex-start !important;border-radius:0 !important;
    padding:0 10px !important;
  }
}
@media(max-width:620px){
  .remote-visual{aspect-ratio:4/3 !important}
  .remote-visual-text{padding:20px}
  .remote-panel{padding:20px !important}
}

/* V17 — Assistance : cadre photo unique */
.remote-page .remote-visual{
  border:1px solid rgba(104,163,176,.38) !important;
  box-shadow:0 24px 55px rgba(0,0,0,.20) !important;
  outline:0 !important;
}
.remote-page .remote-visual img{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}