/* =========================================================
   Maître Naziha Massaoudi — Avocate à Tanger
   Bleu nuit + or, inspiré du site de référence fourni par la cliente
   ========================================================= */
:root {
  --ink: #1b1f2a;          /* en-tête, pied de page */
  --navy: #152c52;         /* accueil */
  --navy-2: #1d3a68;
  --gold: #a9844f;
  --gold-l: #c9a66b;
  --paper: #ffffff;
  --light: #f4f6f9;
  --text: #2b3240;
  --muted: #667085;
  --line: #e3e7ee;
  --wa: #25d366;
  --r: 14px;
  --head: 84px;
  --ff: "Poppins", "Tajawal", system-ui, sans-serif;
}
html[dir="rtl"] { --ff: "Tajawal", "Poppins", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--head); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.75 var(--ff); color: var(--text); background: var(--paper); overflow-x: hidden; }
html[dir="rtl"] body { font-size: 1.06rem; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
svg { width: 1.1em; height: 1.1em; flex: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0 0 1rem; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--gold); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { inset-inline-start: 8px; }
:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .85em 1.6em; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1.5px solid transparent; transition: .25s; cursor: pointer; white-space: nowrap; }
.btn--sm { padding: .55em 1.2em; font-size: .88rem; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-l); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { filter: brightness(1.06); }
.btn--line { border-color: var(--navy); color: var(--navy); }
.btn--line:hover { background: var(--navy); color: #fff; }
html[dir="rtl"] .btn--line svg { transform: scaleX(-1); }

/* ---------- En-tête ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; transition: box-shadow .3s; }
.header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.header__in { height: var(--head); display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; color: #fff; }
.logo__ar { font-family: "Aref Ruqaa", serif; font-size: 1.9rem; font-weight: 700; display: flex; align-items: flex-start; gap: .3em; direction: rtl; }
.logo__ar small { font-family: "Tajawal", sans-serif; font-size: .7rem; font-weight: 500; opacity: .85; margin-top: .3em; }
.logo__fr { font-family: "Poppins", sans-serif; font-size: .74rem; letter-spacing: .06em; margin-top: 4px; direction: ltr; }
.logo__fr b { font-weight: 700; }
.nav { display: flex; align-items: center; gap: 26px; margin-inline-start: auto; font-size: .95rem; }
.nav > a:not(.btn) { position: relative; opacity: .85; padding: 6px 0; transition: opacity .2s; }
.nav > a:not(.btn):hover, .nav > a.active { opacity: 1; }
.nav > a.active::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--gold-l); }
.header__end { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; }
.lang button { background: none; border: 0; color: #fff; font: 600 .8rem/1 var(--ff); padding: 7px 11px; cursor: pointer; opacity: .7; }
.lang button.on { background: var(--gold); opacity: 1; }
.burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px 8px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 3px; border-radius: 2px; background: #3fbf5a; transition: .3s; }
.burger.open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* ---------- Accueil ---------- */
.hero { position: relative; isolation: isolate; background: var(--navy); color: #fff; min-height: min(640px, calc(100svh - var(--head))); display: flex; align-items: center; padding: 90px 0; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; opacity: .12; filter: grayscale(1); }
.hero__grid { display: grid; grid-template-columns: 1fr minmax(0, 460px); align-items: center; gap: 56px; }

/* Carte de visite 3D */
.vcard { position: relative; perspective: 1400px; width: 100%; aspect-ratio: 1.75; cursor: pointer; }
.vcard__inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(10deg) rotateY(-18deg) rotateZ(2deg); transition: transform .9s cubic-bezier(.2,.7,.2,1); animation: vfloat 6s ease-in-out infinite; }
html[dir="rtl"] .vcard__inner { transform: rotateX(10deg) rotateY(18deg) rotateZ(-2deg); }
.vcard:hover .vcard__inner, .vcard.flip .vcard__inner { transform: rotateX(4deg) rotateY(180deg); animation-play-state: paused; }
@keyframes vfloat { 50% { translate: 0 -12px; } }
.vcard__face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px rgba(0,0,0,.45); }
.vcard__front { background: linear-gradient(135deg, #fffdf8, #f1ece2); color: #2a2a2a; padding: 8% 9%; display: flex; flex-direction: column; justify-content: center; gap: 4%; }
.vcard__front::before, .vcard__front::after { content: ""; position: absolute; inset-inline: 0; height: 5px; background: linear-gradient(90deg, #8a6430, #e6c27a 45%, #a9844f); }
.vcard__front::before { top: 0; } .vcard__front::after { bottom: 0; }
.vcard__scale { position: absolute; width: 30%; height: auto; aspect-ratio: 1; inset-inline-start: 6%; top: 50%; translate: 0 -50%; color: #2a2a2a; opacity: .12; }
.vcard__ar, .vcard__fr { display: flex; flex-direction: column; position: relative; }
.vcard__ar { text-align: right; font-family: "Aref Ruqaa", serif; }
.vcard__ar b { font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.3; }
.vcard__ar span { font-family: "Tajawal", sans-serif; font-size: .85rem; color: #8a6430; }
.vcard__rule { height: 2px; background: linear-gradient(90deg, transparent, #a9844f, transparent); }
.vcard__fr { text-align: left; font-family: Georgia, "Times New Roman", serif; }
.vcard__fr b { font-size: clamp(1rem, 1.8vw, 1.3rem); color: #152c52; }
.vcard__fr span { font-size: .8rem; color: #555; }
.vcard__back { transform: rotateY(180deg); background: radial-gradient(circle at 20% 0%, #24457a, #152c52 60%); color: #fff; padding: 8% 9%; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(201,166,107,.5); }
.vcard__mono { font-family: "Aref Ruqaa", serif; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--gold-l); text-align: center; margin-bottom: 6%; }
.vcard__back ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 500 .9rem/1.45 "Poppins", sans-serif; }
.vcard__back li { display: flex; align-items: flex-start; gap: 10px; }
.vcard__back li[lang="ar"] { font-family: "Tajawal", sans-serif; font-size: .82rem; }
.vcard__back svg { color: var(--gold-l); margin-top: 3px; }
.vcard__shadow { position: absolute; inset-inline: 10%; bottom: -14%; height: 14%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter: blur(6px); animation: vshadow 6s ease-in-out infinite; }
@keyframes vshadow { 50% { transform: scale(.88); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .vcard__inner, .vcard__shadow { animation: none; } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--navy) 35%, rgba(21,44,82,.6)); }
html[dir="rtl"] .hero::before { background: linear-gradient(-90deg, var(--navy) 35%, rgba(21,44,82,.6)); }
.hero__kicker { font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 500; margin: 0 0 .4rem; opacity: .95; }
.hero__title { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; line-height: 1.15; margin-bottom: 2rem; max-width: 12em; }
.hero__title em { font-style: normal; display: block; }
html[lang^="fr"] .hero__title em { font-style: italic; }
.hero__phone { display: inline-flex; align-items: center; gap: .5em; border: 2px solid var(--gold); border-radius: 999px; padding: .35em 1.1em; font: 700 clamp(1.5rem, 4vw, 2.1rem)/1.3 "Poppins", sans-serif; transition: .25s; }
.hero__phone svg { width: .95em; height: .95em; }
.hero__phone:hover { background: var(--gold); }
.hero__phone--sm { font-size: 1.3rem; }
.hero__mail { margin: 1.4rem 0 .3rem; font-size: 1.05rem; opacity: .92; }
.hero__mail a:hover { color: var(--gold-l); }
.hero__hours { font-size: .85rem; opacity: .8; margin: 0; }

/* ---------- Sections ---------- */
.sec { padding: clamp(64px, 9vw, 110px) 0; }
.sec--light { background: var(--light); }
.sec__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.eyebrow { color: var(--gold); font-weight: 600; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6rem; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 1rem; }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--navy); margin-bottom: 1rem; }

/* Présentation */
.about { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about__img { margin: 0; position: relative; }
.about__img { max-width: 440px; width: 100%; justify-self: center; }
.about__img img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 60%; border-radius: var(--r); }
.about__img::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--gold); border-radius: var(--r); z-index: -1; }
html[dir="rtl"] .about__img::after { inset: 18px 18px -18px -18px; }
.about__img { isolation: isolate; }
.about__sub { color: var(--gold); font-weight: 600; font-size: 1.1rem; margin-top: -.4rem; }
.about__txt > p:not(.eyebrow):not(.about__sub) { color: var(--muted); }
.deg__h { font-size: 1.05rem; color: var(--navy); margin: 1.8rem 0 .9rem; }
.deg { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 10px; }
.deg li { display: flex; gap: 16px; align-items: center; background: var(--light); border-inline-start: 3px solid var(--gold); border-radius: 10px; padding: 12px 18px; }
.deg__n { font: 700 1.1rem/1 "Poppins", sans-serif; color: var(--gold); }
.deg b { display: block; color: var(--navy); }
.deg span:not(.deg__n) { color: var(--muted); font-size: .95rem; }

/* Domaines */
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(21,44,82,.1); border-color: var(--gold-l); }
.card__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: var(--navy); color: var(--gold-l); margin-bottom: 18px; }
.card__ic svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.12rem; color: var(--navy); margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .93rem; margin: 0; line-height: 1.65; }

/* Bandeau */
.band { position: relative; isolation: isolate; color: #fff; text-align: center; padding: clamp(80px, 11vw, 130px) 0; overflow: hidden; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; background: rgba(21,44,82,.86); z-index: -1; }
.band__in { max-width: 760px; }
.band__ic { width: 52px; height: 52px; color: var(--gold-l); margin: 0 auto 1rem; }
.band .h2 { color: #fff; }
.band p { opacity: .9; font-size: 1.08rem; margin-bottom: 2rem; }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.contact__list { margin: 0 0 2rem; display: grid; gap: 18px; }
.contact__list div { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.contact__list dt { display: flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.contact__list dd { margin: 0; color: var(--text); font-style: normal; }
.contact__list a:hover { color: var(--gold); }
address { font-style: normal; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__map { min-height: 420px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; min-height: 420px; }

/* Pied de page */
.footer { background: var(--ink); color: #fff; padding: 36px 0 28px; }
.footer__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__copy { margin: 0; font-size: .85rem; opacity: .7; }

/* WhatsApp flottant */
.wa-float { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .25s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; }

/* Apparition */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .08s; }
.js .reveal[data-d="2"] { transition-delay: .16s; }
.js .reveal[data-d="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  :root { --head: 76px; }
  .burger { display: flex; }
  .nav { position: fixed; inset: var(--head) 0 auto; background: var(--ink); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 24px; transform: translateY(-120%); transition: transform .35s; box-shadow: 0 20px 30px rgba(0,0,0,.3); z-index: -1; }
  .nav.open { transform: none; }
  .nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav > a.active::after { display: none; }
  .nav__cta { margin-top: 16px; }
  .header__end { margin-inline-start: auto; }
  .about, .contact, .hero__grid { grid-template-columns: 1fr; }
  .hero__grid { gap: 64px; }
  .vcard { max-width: 420px; margin-inline: auto; }
  .about__img { max-width: 520px; }
  .about__img img { aspect-ratio: 16/10; object-position: 50% 55%; }
  .contact__map, .contact__map iframe { min-height: 340px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .logo__ar { font-size: 1.55rem; }
  .logo__fr { font-size: .64rem; }
  .hero { text-align: center; padding: 70px 0; }
  .hero::before { background: rgba(21,44,82,.82) !important; }
  .hero__title { margin-inline: auto; }
  .cards { grid-template-columns: 1fr; }
  .card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 20px; }
  .card__ic { grid-row: span 2; margin: 0; width: 48px; height: 48px; }
  .about__img::after { display: none; }
  .contact__btns .btn { flex: 1 1 100%; }
  .footer__in { flex-direction: column; text-align: center; }
  .footer .logo { align-items: center; }
  .wa-float { width: 54px; height: 54px; bottom: 16px; inset-inline-end: 16px; }
}