/* DR RAMI BEN ARAB — IMMERSIVE 3D DESIGN
   Progressive enhancement, no third-party scripts or WebGL required.
   Applies only to public editorial pages, not patient or admin pages. */
.is-immersive-3d{
  --i3d-dark:#24221e;--i3d-gold:#a9854b;--i3d-glow:#e2c995;
  --i3d-border:rgba(163,130,78,.26);
  background:linear-gradient(165deg,#faf8f3 0%,#f3efe6 44%,#faf8f4 100%);
  overflow-x:clip;
}
.is-immersive-3d .topline{
  background:#25231f;
  background-image:linear-gradient(90deg,#25231f 0%,#453a2b 50%,#25231f 100%);
  color:#ead9ba;
}
.is-immersive-3d .site-header{position:sticky;top:0;z-index:60;background:rgba(252,250,247,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 1px 0 rgba(145,118,76,.13)}
.is-immersive-3d .brand-mark{position:relative;isolation:isolate;box-shadow:inset 0 0 0 3px #f7f3e9,0 6px 17px rgba(57,39,14,.12);background:linear-gradient(130deg,#faf6ed,#e9d9b6);color:#76592e}
.is-immersive-3d .brand-mark:after{content:'';position:absolute;inset:-4px;border:1px solid rgba(169,133,75,.28);z-index:-1}
.is-immersive-3d .nav-patient,.is-immersive-3d .btn-gold{
 background:linear-gradient(125deg,#aa874e,#d8ba7f 55%,#a17a42);border:1px solid #ac8950;color:#25211a;
 box-shadow:0 12px 25px rgba(107,77,30,.15),inset 0 1px 0 rgba(255,255,255,.35);
}
.is-immersive-3d .nav-patient:hover,.is-immersive-3d .btn-gold:hover{background:linear-gradient(120deg,#b39359,#eed6a3);color:#25211a;box-shadow:0 14px 30px rgba(107,77,30,.22)}
/* First-fold art direction: two-column interactive installation */
.is-immersive-3d .hero-immersive{
 max-width:1600px;min-height:755px;grid-template-columns:1fr 1.02fr;
 background:linear-gradient(115deg,#f9f6f0 0%,#f7f3eb 46%,#efe6d5 100%);
 position:relative;isolation:isolate;overflow:hidden;
}
.is-immersive-3d .hero-immersive::before{content:'';pointer-events:none;position:absolute;inset:0;
 background:radial-gradient(circle at 4% 20%,rgba(255,255,255,.92),transparent 35%),
 repeating-linear-gradient(135deg,transparent 0,transparent 86px,rgba(136,112,74,.028) 87px,transparent 88px);
}
.is-immersive-3d .hero-copy{position:relative;z-index:8;justify-content:center;padding:70px clamp(28px,6vw,98px) 48px clamp(28px,7vw,122px)}
.is-immersive-3d .hero-edition{font-size:9px;letter-spacing:.18em;font-weight:700;color:#827359;display:flex;align-items:center;gap:12px;margin-bottom:50px;white-space:nowrap}
.is-immersive-3d .hero-edition-dot{height:7px;width:7px;border-radius:50%;background:#c6a371;box-shadow:0 0 0 5px rgba(198,163,113,.13)}
.is-immersive-3d .hero-edition-number{margin-left:auto;color:#b2a38b}
.is-immersive-3d .hero h1{font-size:clamp(53px,5.6vw,92px);letter-spacing:-.06em;line-height:1.12;color:#24201d;margin-bottom:28px}
.is-immersive-3d .hero h1 em{color:#a17b42;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.is-immersive-3d .hero-copy>p{font-size:15px;line-height:1.95;color:#6d655a;max-width:510px}
.is-immersive-3d .hero-actions{margin-top:35px;position:relative;z-index:3}
.is-immersive-3d .btn{border-radius:2px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;will-change:auto}
.is-immersive-3d .btn:hover{transform:translateY(-3px)}
.is-immersive-3d .hero-foot{margin-top:42px;padding-top:27px;border-top:1px solid rgba(163,134,89,.24);width:100%;gap:25px;color:#887e70}
.is-immersive-3d .motion-toggle{background:none;border:0;border-bottom:1px solid #bca980;color:#8b734e;padding:0 0 3px;font:600 11px var(--sans);align-self:flex-start;margin-top:30px;cursor:pointer}
.is-immersive-3d .motion-toggle[hidden]{display:none}
.is-immersive-3d .motion-toggle:hover{color:#3f3425}
.is-immersive-3d .hero-visual{
 position:relative;isolation:isolate;min-height:740px;background:radial-gradient(ellipse at 55% 48%,#f8ebd4 0%,#e9dbc2 40%,#d7c3a0 100%);
 perspective:1300px;perspective-origin:55% 45%;padding:60px 5% 25px;overflow:hidden;
}
.is-immersive-3d .hero-visual::before{content:'';position:absolute;inset:0;z-index:-1;background:
 linear-gradient(90deg,rgba(255,255,255,.5),transparent 24%,rgba(78,53,24,.04)),
 radial-gradient(circle at 42% 26%,rgba(255,255,255,.95),transparent 48%)}
.is-immersive-3d .hero-visual::after{content:'';position:absolute;z-index:0;width:68%;height:75px;bottom:80px;left:16%;border-radius:50%;background:rgba(75,55,23,.25);filter:blur(30px);pointer-events:none}
.is-immersive-3d .spatial-light{position:absolute;width:550px;height:550px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:0;background:radial-gradient(circle,#fff9e8 0%,rgba(250,233,195,.75) 35%,transparent 72%);filter:blur(15px)}
.is-immersive-3d .spatial-grid{position:absolute;inset:25% -60% -18%;z-index:0;opacity:.45;transform:rotateX(70deg) translateY(115px);transform-origin:bottom center;
 background-image:linear-gradient(rgba(111,82,39,.21) 1px,transparent 1px),linear-gradient(90deg,rgba(111,82,39,.21) 1px,transparent 1px);background-size:65px 65px;
 mask-image:linear-gradient(to bottom,transparent,#000 55%);pointer-events:none}
.is-immersive-3d .spatial-orbit{position:absolute;z-index:1;top:46%;left:50%;width:550px;height:550px;margin-left:-275px;margin-top:-275px;border-radius:50%;pointer-events:none;
 border:1px solid rgba(255,255,255,.68);box-shadow:0 0 30px rgba(255,255,255,.25),inset 0 0 16px rgba(255,255,255,.2);transform-style:preserve-3d}
.is-immersive-3d .spatial-orbit-a{transform:rotateX(72deg) rotateZ(-28deg);border-width:2px;border-color:rgba(252,247,228,.78);animation:orbitA 22s linear infinite}
.is-immersive-3d .spatial-orbit-b{width:610px;height:610px;margin-left:-305px;margin-top:-305px;transform:rotateY(65deg) rotateX(38deg);border-color:rgba(145,98,43,.52);animation:orbitB 27s linear infinite reverse}
.is-immersive-3d .spatial-orbit-c{width:470px;height:470px;margin-left:-235px;margin-top:-235px;transform:rotateX(64deg) rotateZ(55deg);border:1px dashed rgba(142,102,52,.35);animation:orbitC 18s linear infinite}
@keyframes orbitA{to{transform:rotateX(72deg) rotateZ(332deg)}}
@keyframes orbitB{to{transform:rotateY(65deg) rotateX(38deg) rotateZ(360deg)}}
@keyframes orbitC{to{transform:rotateX(64deg) rotateZ(415deg)}}
.is-immersive-3d .spatial-monogram{position:absolute;z-index:1;right:3%;top:3%;font:400 clamp(150px,25vw,420px)/1 var(--serif);letter-spacing:-.12em;color:rgba(255,255,255,.15);user-select:none;pointer-events:none;transform:translateZ(-120px) rotate(-12deg)}
.is-immersive-3d .portrait-frame{width:min(76%,445px);height:555px;flex:none;margin:auto;z-index:3;
 background:#d8c6ab;border:1px solid rgba(255,255,255,.92);border-radius:210px 210px 14px 14px;
 padding:9px;overflow:visible;position:relative;
 box-shadow:0 40px 65px rgba(67,44,17,.24),0 4px 18px rgba(67,44,17,.12),inset 0 0 0 2px rgba(180,150,108,.28);
 transform-style:preserve-3d;transform:rotateY(var(--scene-ry, -6deg)) rotateX(var(--scene-rx,2deg)) translate3d(0,0,35px);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.is-immersive-3d .portrait-frame::before{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);pointer-events:none}
.is-immersive-3d .portrait-frame img{border-radius:205px 205px 7px 7px;height:100%;width:100%;object-fit:cover;object-position:center 18%;filter:saturate(.76) contrast(1.04);box-shadow:inset 0 0 0 4px #fff}
.is-immersive-3d .portrait-tag{bottom:19px;left:-22px;z-index:5;border:1px solid rgba(192,170,132,.65);backdrop-filter:blur(11px);background:rgba(255,254,251,.91);border-radius:3px;box-shadow:0 12px 30px rgba(33,27,19,.12);transform:translateZ(60px);padding:17px 25px}
.is-immersive-3d .portrait-tag span{font-size:28px}
.is-immersive-3d .visual-caption{position:relative;z-index:4;align-self:flex-end;color:#6a573b;font-size:9px;letter-spacing:.19em;padding-top:30px;display:flex;gap:12px;align-items:center}
.is-immersive-3d .visual-caption-line{display:inline-block;width:36px;height:1px;background:#ad874e}
.is-immersive-3d .spatial-note{position:absolute;z-index:6;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:15px 20px 14px;box-shadow:0 18px 45px rgba(91,63,30,.16);pointer-events:none;border-radius:5px;animation:levitate 6s ease-in-out infinite}
.is-immersive-3d .spatial-note span{display:block;color:#95713c;font-size:9px;letter-spacing:.16em;font-weight:700}
.is-immersive-3d .spatial-note strong{font-size:12px;color:#41362b;font-weight:600;white-space:nowrap}
.is-immersive-3d .spatial-note-one{top:26%;left:2%;transform:translateZ(80px) rotate(-4deg)}
.is-immersive-3d .spatial-note-two{right:2%;bottom:22%;transform:translateZ(100px) rotate(4deg);animation-delay:-3s}
@keyframes levitate{0%,100%{translate:0 0}50%{translate:0 -13px}}
/* Depth, reflection and motion on editorial cards */
.is-immersive-3d .intro-section{position:relative}
.is-immersive-3d .intro-section::before{content:'01';position:absolute;left:2%;top:25px;color:rgba(176,142,89,.14);font:italic 110px var(--serif);pointer-events:none}
.is-immersive-3d .specialties{perspective:1100px}
.is-immersive-3d :is(.specialty-card,.new-procedure-card,.procedure-card,.seo-topic){
 position:relative;isolation:isolate;transition:transform .3s cubic-bezier(.16,.7,.25,1),box-shadow .3s,border-color .3s;
 transform-style:preserve-3d;will-change:auto;
 box-shadow:0 12px 20px rgba(80,62,36,.04),0 20px 45px rgba(80,62,36,.035);
}
.is-immersive-3d :is(.specialty-card,.new-procedure-card,.procedure-card,.seo-topic):hover{border-color:rgba(166,127,67,.5);box-shadow:0 28px 50px rgba(83,58,27,.12),0 6px 10px rgba(83,58,27,.06)}
.is-immersive-3d :is(.specialty-card,.new-procedure-card)[data-tilt-card]{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--card-y,0px))}
.is-immersive-3d :is(.specialty-card,.new-procedure-card)[data-tilt-card]:hover{--card-y:-6px}
.is-immersive-3d :is(.specialty-card,.new-procedure-card)[data-tilt-card]::after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;opacity:var(--shine-opacity,0);background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(221,194,142,.25),transparent 44%);transition:opacity .25s}
.is-immersive-3d .specialty-symbol{filter:drop-shadow(0 15px 12px rgba(151,119,67,.14));font-size:70px}
.is-immersive-3d .new-procedure-art{overflow:hidden;isolation:isolate}
.is-immersive-3d .new-procedure-art::before{filter:drop-shadow(0 12px 5px rgba(255,255,255,.6))}
.is-immersive-3d .new-procedure-art span{position:relative;z-index:3;text-shadow:7px 11px 0 rgba(255,255,255,.28),-5px -3px 0 rgba(113,84,46,.08);transform:translateZ(25px);transition:transform .4s}
.is-immersive-3d .new-procedure-card:hover .new-procedure-art span{transform:translateZ(45px) rotate(-6deg) scale(1.08)}
.is-immersive-3d .new-list-hero,.is-immersive-3d .page-hero,.is-immersive-3d .new-detail-hero{
 background:radial-gradient(ellipse at 75% 22%,rgba(220,190,137,.27),transparent 42%),linear-gradient(135deg,#fdfbf7,#efe7d9 80%);position:relative;overflow:hidden}
.is-immersive-3d .new-list-hero::before,.is-immersive-3d .page-hero::before{content:'';position:absolute;inset:-180px -80px;pointer-events:none;opacity:.35;background:repeating-radial-gradient(ellipse at 80% 30%,transparent 0,transparent 31px,rgba(165,128,77,.14) 32px,transparent 33px);transform:rotate(-12deg)}
.is-immersive-3d .new-detail-art{box-shadow:inset 0 0 45px rgba(169,126,60,.15)}
.is-immersive-3d .experience-photo{overflow:hidden;isolation:isolate}
.is-immersive-3d .experience-photo img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.is-immersive-3d .experience-photo:hover img{transform:scale(1.035)}
.is-immersive-3d .cta-section{position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 115%,rgba(216,182,124,.22),transparent 55%)}
.is-immersive-3d .cta-section::before,.is-immersive-3d .cta-section::after{content:'';position:absolute;z-index:-1;width:260px;height:260px;border:1px solid rgba(166,128,68,.17);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(65deg) rotate(30deg)}
.is-immersive-3d .cta-section::after{width:400px;height:400px;transform:translate(-50%,-50%) rotateY(68deg) rotate(-20deg)}
/* Reveal only when JS successfully initializes. Without JS, everything remains readable. */
.js-immersive .reveal-3d{opacity:0;translate:0 28px;transition:opacity .75s ease,translate .75s cubic-bezier(.15,.7,.3,1)}
.js-immersive .reveal-3d.is-visible{opacity:1;translate:0 0}
@media (max-width:1180px){
 .is-immersive-3d .hero h1{font-size:clamp(49px,5.4vw,72px)}
 .is-immersive-3d .hero-copy{padding:65px 6%}
 .is-immersive-3d .hero-visual{padding:70px 3% 30px}
 .is-immersive-3d .portrait-frame{width:76%;height:500px}
 .is-immersive-3d .spatial-orbit{scale:.8}
 .is-immersive-3d .spatial-note-one{left:0}
}
@media (max-width:950px){
 .is-immersive-3d .hero-immersive{grid-template-columns:1fr}
 .is-immersive-3d .hero-copy{padding:70px 7% 50px}
 .is-immersive-3d .hero h1{max-width:760px}
 .is-immersive-3d .hero-edition{margin-bottom:33px}
 .is-immersive-3d .hero-visual{min-height:630px}
 .is-immersive-3d .portrait-frame{width:min(70%,420px);height:500px}
 .is-immersive-3d .spatial-orbit{scale:.96}
 .is-immersive-3d .site-header{position:relative}
}
@media(max-width:600px){
 .is-immersive-3d .hero-immersive{min-height:auto}
 .is-immersive-3d .hero-copy{padding:53px 7% 45px}
 .is-immersive-3d .hero h1{font-size:clamp(43px,11.4vw,60px)}
 .is-immersive-3d .hero-edition{font-size:8px;white-space:normal;line-height:1.6;gap:8px;margin-bottom:30px}
 .is-immersive-3d .hero-edition-number{display:none}
 .is-immersive-3d .hero-foot{gap:12px;margin-top:36px}
 .is-immersive-3d .hero-visual{min-height:530px;padding:45px 5% 18px}
 .is-immersive-3d .portrait-frame{width:78%;height:390px;transform:none;border-radius:150px 150px 11px 11px}
 .is-immersive-3d .portrait-frame img{border-radius:143px 143px 6px 6px}
 .is-immersive-3d .spatial-orbit{scale:.66}
 .is-immersive-3d .spatial-note{padding:8px 11px}
 .is-immersive-3d .spatial-note-one{top:18%;left:1%}
 .is-immersive-3d .spatial-note-two{right:1%;bottom:24%}
 .is-immersive-3d .spatial-note span{font-size:7px}
 .is-immersive-3d .spatial-note strong{font-size:10px}
 .is-immersive-3d .portrait-tag{padding:10px 12px;left:-9px;bottom:14px}
 .is-immersive-3d .portrait-tag span{font-size:20px}
 .is-immersive-3d .portrait-tag strong{font-size:10px}
 .is-immersive-3d .visual-caption{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .is-immersive-3d *, .is-immersive-3d *::before,.is-immersive-3d *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
 .is-immersive-3d .portrait-frame{transform:none!important}
 .js-immersive .reveal-3d{opacity:1!important;translate:none!important}
}
.is-immersive-3d.motion-reduced .spatial-orbit,.is-immersive-3d.motion-reduced .spatial-note{animation:none!important}
.is-immersive-3d.motion-reduced .portrait-frame{transform:none!important}
.is-immersive-3d.motion-reduced :is(.specialty-card,.new-procedure-card)[data-tilt-card]{transform:none!important}
.is-immersive-3d.motion-reduced .reveal-3d{opacity:1!important;translate:none!important}

/* ACCUEIL – alignement des contenus, sans toucher aux autres pages. */
.is-immersive-3d .hero-immersive .hero-copy{align-items:center;text-align:center;padding-left:clamp(25px,6vw,82px);padding-right:clamp(25px,6vw,82px)}
.is-immersive-3d .hero-immersive .hero-copy h1{max-width:670px;margin-left:auto;margin-right:auto;font-size:clamp(45px,5vw,76px);overflow-wrap:normal}
.is-immersive-3d .hero-immersive .hero-copy>p{max-width:535px;margin-left:auto;margin-right:auto}
.is-immersive-3d .hero-immersive .hero-edition{justify-content:center;flex-wrap:wrap;white-space:normal;margin-bottom:32px}
.is-immersive-3d .hero-immersive .hero-edition-number{margin-left:6px}
.is-immersive-3d .hero-immersive .hero-actions{justify-content:center}
.is-immersive-3d .hero-immersive .hero-foot{justify-content:center;text-align:center}
.is-immersive-3d .hero-immersive .motion-toggle{align-self:center}
.is-immersive-3d .intro-section .section-kicker{text-align:center}
.is-immersive-3d .intro-section .intro-grid{max-width:940px;margin-inline:auto;grid-template-columns:minmax(0,1fr);gap:20px;text-align:center}
.is-immersive-3d .intro-section .intro-grid h2{max-width:800px;margin-inline:auto}
.is-immersive-3d .intro-section .intro-grid p{max-width:730px;margin-inline:auto}
.is-immersive-3d .seo-home .seo-heading{text-align:center;margin-inline:auto}
.is-immersive-3d .seo-home .seo-home-links{justify-content:center}
@media(max-width:600px){.is-immersive-3d .hero-immersive .hero-copy h1{font-size:clamp(37px,9vw,52px)}.is-immersive-3d .hero-immersive .hero-actions{gap:13px}.is-immersive-3d .hero-immersive .hero-foot{gap:12px}}