/* S·E·R·H — Maître Rahal Sabour El Alaoui
   Palette « Encre & Or » (inspirée de la carte de visite noir / blanc) */
:root{
  --ink:#101b25; --ink-2:#172633; --ink-3:#22364a;
  --gold:#c3a165; --gold-2:#dcc08a; --gold-d:#9a7a42;
  --paper:#f7f3ec; --paper-2:#efe8dc; --white:#fff;
  --text:#1b2530; --muted:#5c6773; --line:#e3dccf; --line-d:rgba(255,255,255,.12);
  --wa:#1fa855;
  --f-ar-d:"Amiri",serif; --f-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-fr-d:"Cormorant Garamond",Georgia,serif; --f-fr:"Inter",system-ui,sans-serif;
  --f-d:var(--f-fr-d); --f:var(--f-fr);
  --r:14px; --wrap:1200px;
  --shadow:0 30px 60px -25px rgba(16,27,37,.35);
}
[dir=rtl]{--f-d:var(--f-ar-d); --f:var(--f-ar)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16.5px/1.75 var(--f);color:var(--text);background:var(--white);overflow-x:hidden}
[dir=rtl] body{font-size:17px;line-height:1.9}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600}
p{margin:0 0 1em}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--gold);color:var(--ink);padding:8px 14px;z-index:99;border-radius:8px}
.skip:focus{inset-inline-start:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font:600 15px/1 var(--f);border:1px solid transparent;cursor:pointer;transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:var(--ink);box-shadow:0 12px 26px -12px rgba(195,161,101,.7)}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-3)}
.btn--line{border-color:var(--line);color:var(--ink);background:#fff}
.btn--line:hover{border-color:var(--gold)}
.btn--sm{padding:10px 18px;font-size:14px}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:14px 0;color:#fff}
.header.scrolled{background:rgba(16,27,37,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px -18px rgba(0,0,0,.6);padding:8px 0}
.header__in{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__logo{width:46px;height:42px;--logo-ink:var(--gold);--logo-paper:var(--ink)}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt strong{font:700 21px/1 var(--f-fr-d);letter-spacing:.14em}
.brand__txt small{font-size:12px;opacity:.7;margin-top:4px;letter-spacing:.04em}
.nav{display:flex;gap:26px;margin-inline-start:auto}
.nav a{font-size:15px;opacity:.82;position:relative;padding:6px 0;transition:opacity .2s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
.header__end{display:flex;align-items:center;gap:12px}
.lang{display:grid;place-items:center;min-width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font:600 14px/1 var(--f-fr);padding:0 10px;transition:border-color .2s,color .2s}
.lang[lang=ar]{font:700 18px/1 var(--f-ar-d)}
.lang:hover{border-color:var(--gold);color:var(--gold-2)}
.burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{width:18px;height:1.5px;background:#fff;transition:transform .3s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- héros ---------- */
.hero{position:relative;background:radial-gradient(1200px 600px at 85% 10%,#1d3245 0,transparent 60%),var(--ink);color:#fff;padding:150px 0 60px;overflow:hidden;isolation:isolate}
[dir=rtl] .hero{background:radial-gradient(1200px 600px at 15% 10%,#1d3245 0,transparent 60%),var(--ink)}
.hero__bg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.hero__mark{position:absolute;width:620px;height:570px;inset-inline-start:-160px;bottom:-160px;opacity:.05;--logo-ink:#fff;--logo-paper:var(--ink)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.kicker{display:flex;align-items:center;gap:14px;color:var(--gold-2);font-size:14px;letter-spacing:.06em;margin-bottom:22px}
.kicker__line{width:42px;height:1px;background:var(--gold)}
.hero__title{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.hero__pre{font:500 italic 26px/1.2 var(--f-fr-d);color:var(--gold)}
[dir=rtl] .hero__pre{font:400 28px/1.3 var(--f-ar-d);font-style:normal}
.hero__name{font:600 clamp(42px,6vw,76px)/1.02 var(--f-fr-d);letter-spacing:-.01em}
[dir=rtl] .hero__name{font:700 clamp(44px,6.2vw,80px)/1.25 var(--f-ar-d)}
.hero__alt{font:500 20px/1.4 var(--f-fr-d);color:rgba(255,255,255,.55);margin-bottom:22px}
.hero__alt[lang=ar]{font:400 24px/1.5 var(--f-ar-d)}
.hero__role{display:inline-flex;align-items:center;gap:12px;padding:10px 18px;border:1px solid rgba(195,161,101,.4);background:rgba(195,161,101,.08);border-radius:999px;color:var(--gold-2);font-weight:600;font-size:16px;margin-bottom:24px}
.seal-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(195,161,101,.25)}
.hero__text{max-width:56ch;color:rgba(255,255,255,.75);font-size:17.5px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* carte de visite 3D */
.hero__card{display:flex;flex-direction:column;align-items:center;gap:16px;perspective:1600px}
.card3d{all:unset;cursor:pointer;width:min(100%,500px);aspect-ratio:1.75;display:block;border-radius:12px}
.card3d:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.card3d__inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);transform:rotateY(-8deg) rotateX(6deg)}
.card3d:hover .card3d__inner{transform:rotateY(-2deg) rotateX(2deg)}
.card3d.flipped .card3d__inner{transform:rotateY(180deg)}
.bcard{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;background:#fdfcf9;color:var(--ink);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);font-family:var(--f-fr);display:flex;flex-direction:column}
.bcard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.55) 0,transparent 35%,transparent 70%,rgba(0,0,0,.04));pointer-events:none}
.bcard__band{background:var(--ink);color:#fff;padding:3.6cqw 6cqw 2.8cqw;display:flex;flex-direction:column;align-items:flex-end;gap:2px;border-bottom:3px solid var(--gold)}
.bcard__ar{font:700 5.2cqw/1.3 var(--f-ar-d)}
.bcard__fr{font:600 3cqw/1.2 var(--f-fr-d);letter-spacing:.06em;color:var(--gold-2);text-transform:uppercase}
.card3d{container-type:inline-size}
.bcard__body{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 6cqw 0;gap:3cqw}
.bcard__firm{display:flex;flex-direction:column;align-items:center;text-align:center}
.bcard__logo{width:12cqw;height:11cqw;--logo-ink:var(--ink);--logo-paper:#fdfcf9}
.bcard__firm b{font:700 4.2cqw/1 var(--f-fr-d);letter-spacing:.12em;margin-top:4px}
.bcard__firm small{font-size:1.9cqw;letter-spacing:.14em;border-top:1px solid var(--ink);padding-top:2px;margin-top:3px}
.bcard__title{display:flex;flex-direction:column;align-items:flex-end;text-align:end;gap:2px}
.bcard__title span:first-child{font:700 3.6cqw/1.4 var(--f-ar)}
.bcard__title span:last-child{font:500 2.35cqw/1.3 var(--f-fr);color:var(--muted)}
.bcard__rows{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw 4cqw;padding:0 6cqw 4cqw;margin-top:auto;font:500 2.45cqw/1.2 var(--f-fr)}
.bcard__rows span{display:flex;align-items:center;gap:1.6cqw;white-space:nowrap}
.bcard__rows svg{width:3.2cqw;height:3.2cqw;color:var(--gold-d);flex:none}
.bcard--back{transform:rotateY(180deg);align-items:center;justify-content:center;text-align:center;padding:6%;background:#fdfcf9}
.bcard__biglogo{width:26cqw;height:24cqw;--logo-ink:var(--ink);--logo-paper:#fdfcf9}
.bcard__serh{font:700 7cqw/1 var(--f-fr-d);letter-spacing:.14em;margin-top:2.5cqw}
.bcard__cab{font-size:2.8cqw;letter-spacing:.2em;border-top:1px solid var(--ink);padding-top:1cqw;margin-top:1.2cqw}
.bcard__addr{font:italic 500 3cqw/1.3 var(--f-fr-d);margin-top:5cqw;color:var(--muted)}
.bcard__addr sup{font-size:.6em}
.bcard--back::before{content:"";position:absolute;inset:3.2%;border:1px solid rgba(195,161,101,.6);border-radius:6px;pointer-events:none}
.hero__hint{display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.55);margin:0}
.hero__hint svg{width:16px;height:16px}

.facts{list-style:none;padding:0;margin:72px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-d)}
.facts li{padding:24px 22px 4px;border-inline-start:1px solid var(--line-d);display:flex;flex-direction:column;gap:4px}
.facts li:first-child{border-inline-start:0;padding-inline-start:0}
.facts strong{font:600 24px/1.2 var(--f-fr-d);color:var(--gold-2)}
[dir=rtl] .facts strong{font:700 24px/1.4 var(--f-ar-d)}
.facts span{font-size:14px;color:rgba(255,255,255,.6)}

/* ---------- sections ---------- */
.sec{padding:110px 0}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:#fff}
.head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:56px}
.head--center{display:block;text-align:center;max-width:720px;margin-inline:auto}
.label{display:inline-flex;align-items:center;gap:12px;color:var(--gold-d);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
[dir=rtl] .label{text-transform:none;letter-spacing:0;font-size:15px}
.label span{font:600 13px/1 var(--f-fr);padding:6px 9px;border:1px solid currentColor;border-radius:999px}
.label--gold{color:var(--gold-2)}
.h2{font:600 clamp(34px,4.4vw,54px)/1.08 var(--f-fr-d);letter-spacing:-.01em}
[dir=rtl] .h2{font:700 clamp(32px,4.2vw,50px)/1.4 var(--f-ar-d)}
.h2 em{font-style:italic;color:var(--gold-d)}
[dir=rtl] .h2 em{font-style:normal}
.sec--ink .h2 em{color:var(--gold-2)}
.lead{font-size:18.5px;color:var(--muted)}
.sec--ink .lead{color:rgba(255,255,255,.82)}
.note{margin-top:28px;font-size:14px;color:var(--muted);text-align:center}

.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.area{position:relative;padding:30px 26px 26px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:transform .35s,box-shadow .35s,border-color .35s;overflow:hidden}
.area::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .45s}
[dir=rtl] .area::before{--o:right}
.area:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.area:hover::before{transform:scaleX(1)}
.area__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--paper);color:var(--ink);margin-bottom:22px;transition:background .3s,color .3s}
.area__ic svg{width:27px;height:27px}
.area:hover .area__ic{background:var(--ink);color:var(--gold-2)}
.area__n{position:absolute;top:24px;inset-inline-end:24px;font:600 15px/1 var(--f-fr-d);color:var(--line)}
.area h3{font:600 23px/1.2 var(--f-fr-d);margin-bottom:10px}
[dir=rtl] .area h3{font:700 23px/1.4 var(--f-ar-d)}
.area p{font-size:15px;color:var(--muted);margin:0}
.area:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.area:first-child p{color:rgba(255,255,255,.7)}
.area:first-child .area__ic{background:rgba(195,161,101,.15);color:var(--gold-2)}
.area:first-child .area__n{color:rgba(255,255,255,.25)}

.cass{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center}
.cass__main .h2{margin-bottom:24px}
.cass__main p:not(.lead):not(.label){color:rgba(255,255,255,.66)}
.cass__main .btn{margin-top:14px}
.cass__side{display:flex;flex-direction:column;gap:16px}
.point{display:flex;gap:20px;padding:26px;border:1px solid var(--line-d);border-radius:var(--r);background:rgba(255,255,255,.03);transition:background .3s,border-color .3s}
.point:hover{background:rgba(195,161,101,.07);border-color:rgba(195,161,101,.4)}
.point__n{font:600 30px/1 var(--f-fr-d);color:var(--gold)}
.point h3{font:600 22px/1.2 var(--f-fr-d);margin-bottom:6px;color:var(--gold-2)}
[dir=rtl] .point h3{font:700 22px/1.4 var(--f-ar-d)}
.point p{margin:0;color:rgba(255,255,255,.7);font-size:15.5px}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:28px;inset-inline:12.5%;height:1px;background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 12px)}
.step{text-align:center;position:relative}
.step__n{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:#fff;border:1px solid var(--gold);font:600 24px/1 var(--f-fr-d);color:var(--gold-d);position:relative;transition:background .3s,color .3s}
.step:hover .step__n{background:var(--ink);color:var(--gold-2);border-color:var(--ink)}
.step h3{font:600 23px/1.2 var(--f-fr-d);margin-bottom:8px}
[dir=rtl] .step h3{font:700 23px/1.4 var(--f-ar-d)}
.step p{font-size:15px;color:var(--muted);margin:0}

.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq__side{position:sticky;top:110px}
.faq__side .h2{margin-bottom:18px}
.faq__side p:not(.label){color:var(--muted)}
.faq__list{display:flex;flex-direction:column;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:box-shadow .3s}
details[open]{box-shadow:0 20px 40px -28px rgba(16,27,37,.35)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;font-weight:600;font-size:17px}
summary::-webkit-details-marker{display:none}
summary i{position:relative;width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line);transition:transform .3s,background .3s}
summary i::before,summary i::after{content:"";position:absolute;inset:50% 8px auto;height:1.5px;background:var(--ink);transform:translateY(-50%)}
summary i::after{transform:translateY(-50%) rotate(90deg);transition:transform .3s}
details[open] summary i{background:var(--gold);border-color:var(--gold)}
details[open] summary i::after{transform:translateY(-50%) rotate(0)}
details p{padding:0 26px 22px;margin:0;color:var(--muted)}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch}
.contact__info .h2{margin-bottom:30px}
address{font-style:normal}
.infos{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column}
.infos li{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.infos svg{width:22px;height:22px;flex:none;color:var(--gold-d);margin-top:4px}
.infos small{display:block;font-size:13px;color:var(--muted);letter-spacing:.02em}
.infos a,.infos span{font-weight:600;font-size:16.5px}
.infos a:hover{color:var(--gold-d)}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px}
.contact__map{border-radius:20px;overflow:hidden;min-height:440px;box-shadow:var(--shadow);border:1px solid var(--line)}
.contact__map iframe{width:100%;height:100%;min-height:440px;border:0;filter:grayscale(.6) contrast(1.05)}

.band{background:var(--ink);color:#fff;padding:64px 0;position:relative;overflow:hidden;border-bottom:1px solid var(--line-d)}
.band__in{display:flex;align-items:center;gap:36px}
.band__logo{width:84px;height:78px;flex:none;--logo-ink:var(--gold);--logo-paper:var(--ink)}
.band h2{font:600 clamp(28px,3vw,38px)/1.2 var(--f-fr-d);margin-bottom:6px}
[dir=rtl] .band h2{font:700 clamp(28px,3vw,38px)/1.4 var(--f-ar-d)}
.band p{margin:0;color:rgba(255,255,255,.7)}
.band__btns{display:flex;flex-wrap:wrap;gap:12px;margin-inline-start:auto}

.footer{background:#0b131b;color:rgba(255,255,255,.65);padding:44px 0 34px;font-size:14px}
.footer__in{display:grid;grid-template-columns:auto 1fr;gap:18px 40px;align-items:center}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__brand strong{display:block;color:#fff;font-size:16px}
.footer__legal{margin:0;text-align:end;max-width:60ch;justify-self:end}
.footer__copy{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid var(--line-d)}
.footer__copy a{color:var(--gold-2)}

.wa-float{position:fixed;bottom:22px;inset-inline-end:22px;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(31,168,85,.7);transition:transform .3s}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.08)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ping 2.4s infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(1.6);opacity:0}}

/* ---------- animations ---------- */
.rise{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.1s + .1s)}
@keyframes rise{to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*.08s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.js .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .areas{grid-template-columns:repeat(2,1fr)}
  .nav{gap:18px}
}
@media (max-width:960px){
  .burger{display:flex}
  .header__cta span{display:none}
  .header__cta{padding:10px;width:42px;height:42px;justify-content:center}
  .nav{position:fixed;inset:0 0 auto;top:0;padding:96px 24px 30px;background:var(--ink);flex-direction:column;gap:6px;transform:translateY(-105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
  .nav.open{transform:none}
  .nav a{font-size:20px;padding:12px 0;border-bottom:1px solid var(--line-d);opacity:1}
  .header__end{margin-inline-start:auto}
  .hero{padding:120px 0 50px}
  .hero__grid,.cass,.faq,.contact{grid-template-columns:1fr;gap:48px}
  .head{grid-template-columns:1fr;gap:16px}
  .faq__side{position:static}
  .facts{grid-template-columns:repeat(2,1fr);margin-top:56px}
  .facts li:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .steps::before{display:none}
  .band__in{flex-direction:column;text-align:center}
  .band__btns{margin-inline:auto;justify-content:center}
  .footer__in{grid-template-columns:1fr}
  .footer__legal{text-align:start;justify-self:start}
}
@media (max-width:600px){
  .sec{padding:76px 0}
  .areas{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .hero__role{font-size:14.5px}
  .facts strong{font-size:20px}
  .facts li{padding:18px 12px 4px}
  .brand__txt small{display:none}
  .contact__map,.contact__map iframe{min-height:320px}
  .contact__btns .btn{flex:1 1 100%;justify-content:center}
  summary{padding:18px 20px;font-size:16px}
  details p{padding:0 20px 18px}
}