/* Socle commun aux 5 variantes du site : la DA « Désert » de l'app, une seule ambiance (pas de mode sombre :
   le site garde les couleurs de Nuqta). Titres en Unbounded (moderne, « jeu »), texte en Figtree,
   arabe en Noto Naskh Arabic (vocalisé) et Reem Kufi (lettres monumentales). */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Figtree:wght@400;600;800&family=Noto+Naskh+Arabic:wght@500;700&family=Reem+Kufi:wght@500;700&display=swap");

:root {
  --creme: #FBF6EF;
  --sable: #F2D16B;
  --sable-doux: #F6E6B8;
  --abricot: #E59A5B;
  --terracotta: #B5452B;
  --terra-fonce: #923520;
  --petrole: #2F7D78;
  --petrole-fonce: #1F5C58;
  --encre: #2A1A14;
  --brun: #6E5A50;
  --titre: "Unbounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --texte: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
  --arabe: "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --kufi: "Reem Kufi", "Noto Naskh Arabic", "Geeza Pro", serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0; overflow-x: clip }
body { font-family: var(--texte); color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased }
.ar { font-family: var(--arabe); direction: rtl }
h1, h2, h3 { font-family: var(--titre); text-wrap: balance; margin: 0 }
img { max-width: 100% }

/* barre du haut : le nom, et le bouton de l'App Store */
.barre {
  position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 14px max(18px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.barre > * { pointer-events: auto }
.logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit }
.logo .ar { font-size: 26px; font-weight: 700; line-height: 1 }
.logo b { font-family: var(--titre); font-size: 15px; letter-spacing: .02em }

.store {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: var(--encre); color: #fff;
  border-radius: 999px; padding: 11px 18px 11px 14px; font-weight: 800; font-size: 14px; line-height: 1.1;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.store:hover { transform: translateY(-2px) }
.store:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--sable); outline-offset: 3px }
.store small { display: block; font-weight: 600; font-size: 10.5px; opacity: .75; letter-spacing: .04em; text-transform: uppercase }
.store .losange { width: 18px; height: 18px; border-radius: 4px; background: var(--terracotta); transform: rotate(45deg); flex: none }
.store.grand { font-size: 18px; padding: 16px 26px 16px 20px }
.store.grand .losange { width: 22px; height: 22px }
.store.clair { background: #fff; color: var(--encre) }

/* un iPhone 16 Pro en titane noir, de face, qui montre une vraie capture de l'app (maquettes_iphone_site.html, B).
   .iphone est le conteneur : tout est en cqw (sa largeur), donc il garde ses proportions à toutes les tailles.
   Le cadre est dessiné sur l'image elle-même (bord en titane, verre noir), qui arrondit la capture d'autant :
   écran 402 × 874 pt aux coins de 62 pt (15,4 % de sa largeur). L'ombre se met avec filter: drop-shadow. */
.iphone { --t1: #3A3A3C; --t2: #1E1E20; --t3: #5C5C5F; container-type: inline-size; position: relative; width: 240px; filter: drop-shadow(0 22px 26px rgba(42, 26, 20, .35)) }
.iphone img { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 3.1cqw; border: 1.15cqw solid transparent; border-radius: 18.4cqw;
  background: linear-gradient(#0B0B0C, #0B0B0C) padding-box,
              linear-gradient(135deg, var(--t3) 0%, var(--t1) 22%, var(--t2) 50%, var(--t1) 74%, var(--t3) 100%) border-box;
  box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .06) }
/* les boutons : action et volume à gauche, marche et contrôle de l'appareil photo à droite */
.iphone::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.8cqw; right: -.8cqw; pointer-events: none;
  background:
    linear-gradient(90deg, var(--t2), var(--t1)) left 0 top 18% / .85cqw 5.5% no-repeat,
    linear-gradient(90deg, var(--t2), var(--t1)) left 0 top 28% / .85cqw 9% no-repeat,
    linear-gradient(90deg, var(--t2), var(--t1)) left 0 top 40.1% / .85cqw 9% no-repeat,
    linear-gradient(90deg, var(--t1), var(--t2)) right 0 top 31.4% / .85cqw 14% no-repeat,
    linear-gradient(90deg, var(--t1), var(--t2)) right 0 top 62.7% / .7cqw 7.5% no-repeat }
/* le reflet de la vitre */
.iphone::after { content: ""; position: absolute; inset: 4.25cqw; border-radius: 14.15cqw; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 28%, transparent 42%) }

.toile3d { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 }

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