/* Lbasi — site vitrine. Direction visuelle A « Zellige »
   (`specs/lbasi-directions-visuelles.html`). Les jetons de couleur et de
   typographie sont ceux de l'application ; ne pas en inventer ici. */

/* ------------------------------------------------------------------ polices */
/* Auto-hébergées et sous-ensemblées : aucun appel à un CDN tiers, donc aucune
   adresse IP de visiteur transmise à un service externe sans consentement. */
@font-face{font-family:'Bodoni Moda';src:url('/fonts/bodoni-moda-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Noto Kufi Arabic';src:url('/fonts/noto-kufi-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Kufi Arabic';src:url('/fonts/noto-kufi-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');font-weight:600;font-display:swap}

/* ------------------------------------------------------------------ jetons */
:root{
  --canvas:#F7F3EC; --surface:#FFFFFF; --ink:#2A2C2B; --muted:#6E7472;
  --primary:#0B4F3F; --deep:#06302A; --gold:#B08D4F; --wine:#7A2233;
  --line:#E4DCCE;
  --display:'Bodoni Moda',Georgia,serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --radius:10px; --radius-lg:16px;
  --page:1080px;
  --touch:44px;
}
:root:lang(ar),[dir="rtl"]{
  --display:'Noto Kufi Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  /* L'arabe est plus haut de ligne que le latin : +12 % comme dans l'application. */
  --line-height:1.75;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:var(--line-height,1.6);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--primary)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-weight:700;letter-spacing:0}

.page{max-width:var(--page);margin:0 auto;padding-inline:24px}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------- ornement zellige */
/* Étoile à huit branches (khatam), motif signature de la direction A.
   Elle est décorative : `aria-hidden`, et jamais porteuse d'information. */
.zellige{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23B08D4F' stroke-width='1.1'%3E%3Cpath d='M36 6 44 20 60 16 56 32 70 40 56 48 60 64 44 60 36 74 28 60 12 64 16 48 2 40 16 32 12 16 28 20Z'/%3E%3Ccircle cx='36' cy='40' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
  opacity:.13;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
}

/* ------------------------------------------------------------------ entête */
.masthead{position:relative;z-index:1}
.masthead .page{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-block:20px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--primary)}
.brand img{width:36px;height:36px;border-radius:9px;border:1px solid var(--line)}
.brand span{font-family:var(--display);font-size:22px;line-height:1}

.lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch);min-width:var(--touch);padding-inline:16px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:14px;font-weight:600;color:var(--primary);text-decoration:none;
}
.lang:hover{border-color:var(--gold)}

/* -------------------------------------------------------------------- héros */
.hero{position:relative;overflow:hidden;text-align:center;padding-block:16px 52px}
.hero > .page{position:relative;z-index:1}
.hero .mark{
  width:180px;height:180px;margin:0 auto 36px;border-radius:40px;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 18px 44px rgba(6,48,42,.14);
}
.hero h1{
  max-width:20ch;margin:0 auto;font-size:clamp(30px,5.2vw,52px);
  line-height:1.15;color:var(--primary);
}
.hero .places{margin:14px auto 0;color:var(--muted);font-size:15px;max-width:46ch}

/* Bandeau or entre le nom et la promesse, écho de la barre du logo. */
.rule{
  width:120px;height:1px;margin:28px auto;border:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ------------------------------------------------------------------ stores */
.stores{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.stores a{display:block;border-radius:10px}
.stores img{height:52px;width:auto}
/* Sans fiche boutique ouverte, le badge officiel n'a pas lieu d'être affiché :
   il promettrait un lien. Une pastille sobre annonce l'attente à sa place. */
.stores .soon{
  display:inline-flex;align-items:center;min-height:52px;padding-inline:24px;
  border:1px dashed var(--gold);border-radius:10px;
  color:var(--muted);font-size:15px;font-weight:600;letter-spacing:.01em;
}
.availability{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* ------------------------------------------------------------------ usages */
.uses{padding-block:64px}
.uses h2{font-size:clamp(26px,4vw,36px);color:var(--primary);text-align:center}
.uses .grid{
  display:grid;gap:16px;margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px 24px;
}
.card .star{width:30px;height:30px;color:var(--gold)}
.card h3{font-size:22px;margin:14px 0 8px;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

/* --------------------------------------------------------------- promesses */
.promises{background:var(--deep);color:#E9E3D8;padding-block:56px;position:relative;overflow:hidden}
.promises .zellige{opacity:.07;mask-image:none;-webkit-mask-image:none}
.promises > .page{position:relative;z-index:1}
.promises ul{
  list-style:none;margin:0;padding:0;display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.promises b{
  display:block;font-family:var(--display);font-size:19px;font-weight:400;
  color:#F2ECE2;margin-bottom:6px;
}
[dir="rtl"] .promises b{font-weight:700}
.promises span{font-size:15px;color:#A9A196;line-height:1.6}

/* ------------------------------------------------------------------ légal */
.legal{padding-block:48px 72px;max-width:760px}
.legal h1{font-size:clamp(30px,5vw,44px);color:var(--primary)}
.legal .updated{margin:12px 0 0;font-size:14px;color:var(--muted)}
.legal h2{
  font-family:var(--body);font-size:19px;font-weight:700;color:var(--ink);
  margin:44px 0 12px;
}
.legal p,.legal li{color:var(--ink);font-size:16px;line-height:1.7}
.legal ul{padding-inline-start:22px}
.legal li{margin-bottom:8px}
.legal table{width:100%;border-collapse:collapse;font-size:15px;margin-top:12px}
.legal th,.legal td{
  text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;
}
.legal th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* ------------------------------------------------------------------- pied */
.foot{border-top:1px solid var(--line);padding-block:40px;background:var(--canvas)}
.foot .page{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{
  display:inline-flex;align-items:center;min-height:var(--touch);
  color:var(--primary);text-decoration:none;font-size:15px;font-weight:600;
}
.foot a:hover{text-decoration:underline}
.foot .copy{color:var(--muted);font-size:14px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}