/* =============================================================================
   npos.ma — feuille de style du site de présentation.

   LES JETONS SONT COPIÉS DE L'APPLICATION (client/src/index.css), à l'identique :
   mêmes teintes HSL, même rayon, même police. Le site et le produit doivent se
   ressembler — un prospect qui installe npos doit retrouver ce qu'il a vu.

   Les composants reprennent le vocabulaire visuel de shadcn/ui (cartes à bordure
   discrète, badges, boutons à deux niveaux) mais sont écrits en CSS simple :
   le site est STATIQUE, sans build ni dépendance réseau. Une page de vente qui
   attend un CDN est une page de vente qui s'affiche mal un jour.
   ========================================================================== */

:root {
  /* — Jetons de l'application — */
  color-scheme: dark;
  --background: 210 20% 10%;
  --foreground: 204 15% 92%;
  --border: 210 15% 18%;
  --card: 210 20% 12%;
  --card-border: 210 20% 16%;
  --muted: 210 15% 18%;
  --muted-foreground: 204 15% 70%;
  --primary: 204 64% 50%;
  --primary-foreground: 210 5% 98%;
  --secondary: 204 64% 44%;        /* #2980b9 — bleu */
  --secondary-foreground: 210 5% 98%;
  --accent: 204 64% 44%;
  --destructive: 0 72% 51%;
  --success: 145 63% 42%;
  --warning: 37 90% 51%;
  --radius: .5rem;
  /* Pile identique a celle de l'application (client/src/index.css).
     Inter n'ayant aucun glyphe arabe, le texte arabe tombe sur le generique
     sans-serif — exactement comme dans l'application. Ne pas y ajouter
     "Segoe UI" : cela changerait le rendu de l'arabe, pas celui du latin. */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / .3);
  --shadow: 0 4px 16px hsl(0 0% 0% / .35);
  --shadow-lg: 0 12px 40px hsl(0 0% 0% / .45);

  --max: 1160px;
}

/* MODE CLAIR : uniquement sur choix explicite du visiteur.
   Il n y a PLUS de `@media (prefers-color-scheme)` : elle imposerait le
   reglage du systeme par-dessus le defaut sombre voulu pour ce site. */
:root[data-theme="light"] {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 210 29% 20%;
  --border: 204 15% 90%;
  --card: 204 20% 96%;
  --card-border: 204 20% 88%;
  --muted: 204 15% 92%;
  --muted-foreground: 210 20% 40%;
  --primary: 210 29% 29%;          /* #34495e, bleu-gris foncé */
  --primary-foreground: 210 5% 98%;
  --shadow-sm: 0 1px 2px hsl(210 29% 20% / .06);
  --shadow: 0 4px 16px hsl(210 29% 20% / .08);
  --shadow-lg: 0 12px 40px hsl(210 29% 20% / .12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* — Typographie ----------------------------------------------------------- */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }

.lead { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: hsl(var(--muted-foreground)); }
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: .875rem; }

/* — Badge (shadcn) -------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .7rem;
  font-size: .78rem; font-weight: 600; line-height: 1;
  border-radius: 999px;
  border: 1px solid hsl(var(--card-border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
}
.badge--accent {
  border-color: hsl(var(--secondary) / .35);
  background: hsl(var(--secondary) / .1);
  color: hsl(var(--secondary));
}

/* — Boutons (shadcn) ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 2.9rem; padding: 0 1.35rem;
  border-radius: var(--radius);
  font-size: .95rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .08s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn--primary:hover { background: hsl(var(--secondary) / .9); }
.btn--outline {
  background: transparent;
  border-color: hsl(var(--card-border));
  color: hsl(var(--foreground));
}
.btn--outline:hover { background: hsl(var(--muted)); }
.btn--lg { height: 3.25rem; padding: 0 1.75rem; font-size: 1rem; }

/* — Carte (shadcn) -------------------------------------------------------- */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: calc(var(--radius) + .35rem);
  padding: 1.5rem;
}
.card--plain { background: hsl(var(--background)); }

.icon {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: hsl(var(--secondary) / .12);
  color: hsl(var(--secondary));
  margin-bottom: 1rem;
  flex: none;
}
.icon svg { width: 1.3rem; height: 1.3rem; }

/* — En-tête --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: hsl(var(--background) / .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.25rem; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.15rem; }
.brand img { width: 2rem; height: 2rem; border-radius: .45rem; }
.brand span small {
  display: block; font-size: .68rem; font-weight: 500;
  color: hsl(var(--muted-foreground)); letter-spacing: .02em;
}
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { font-size: .92rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.nav a:hover { color: hsl(var(--foreground)); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.lbl-court { display: none; }

.icon-btn {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: var(--radius); border: 1px solid hsl(var(--card-border));
  background: transparent; color: hsl(var(--foreground)); cursor: pointer;
}
.icon-btn:hover { background: hsl(var(--muted)); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

/* — Sections -------------------------------------------------------------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
/* — Titres centres --------------------------------------------------------
   Les titres de section et le heros sont centres. `margin-inline: auto` est
   indispensable en plus de `text-align` : sans lui le bloc garde sa largeur
   maximale mais reste colle au bord, et seul le texte se centre A L INTERIEUR
   — le titre paraitrait alors decale vers la gauche sur les grands ecrans.

   `margin-inline` est une propriete LOGIQUE : elle se retourne d elle-meme en
   arabe. Un `margin-left` aurait du etre double d une regle RTL. */
.section-head {
  max-width: 46rem; margin-bottom: 3rem;
  margin-inline: auto;
  text-align: center;
}
.section-head h2 { margin: .85rem 0 .9rem; }

.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* — Héros ----------------------------------------------------------------- */
.hero {
  /* Bandeau volontairement haut : la photo a besoin de surface pour se lire,
     et un visiteur doit voir le titre, la promesse et les boutons sans
     defiler. On reste sous la hauteur de l ecran pour qu il reste visible
     qu il y a une suite. */
  min-height: min(82vh, 780px);
  padding-top: clamp(5rem, 12vw, 9rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  position: relative; overflow: hidden;
  /* Grille plutot que flex : un element de grille s etire en largeur par
     defaut, donc .wrap garde exactement la mise en page qu il avait. En flex
     il se serait reduit a la largeur de son contenu. Les pseudo-elements sont
     absolus, ils ne deviennent pas des elements de grille. */
  display: grid;
  align-content: center;
}
/* — Photo de fond du bandeau ---------------------------------------------
   La couche image et la couche voile sont SEPAREES (::before et ::after) :
   reunies dans un seul fond, le voile serait redimensionne par le `cover` de
   l'image au lieu de couvrir toute la surface. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("hero-mobile.jpg");
  background-size: cover;
  /* 62% et non 50% : la personne est dans la partie droite de la photo, et un
     cadrage centre la couperait sur les ecrans etroits. */
  background-position: 62% center;
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    hsl(210 29% 8% / .58) 0%,
    hsl(210 29% 8% / .80) 58%,
    hsl(var(--background)) 100%
  );
  pointer-events: none;
}
/* Au-dela de 900 px d'affichage, la version large. Un telephone n'a aucune
   raison de telecharger 1800 px pour un ecran qui en montre 375. */
@media (min-width: 901px) {
  .hero::before {
    background-image: url("hero.jpg");
    /* Sur large ecran on decale le cadrage vers la droite pour que la
       personne ne se retrouve pas juste derriere le titre centre. */
    background-position: 78% center;
  }
}

/* LE TEXTE DU BANDEAU EST FORCE EN CLAIR, DANS LES DEUX THEMES.
   Les jetons --foreground et --muted-foreground s'inversent avec le theme ;
   par-dessus une photo sombre, la variante claire du theme donnerait du texte
   sombre sur fond sombre. On ecrit donc les couleurs en dur ici. */
.hero h1,
.hero-points b { color: hsl(210 5% 98%); }
.hero .lead,
.hero-points { color: hsl(210 10% 82%); }
.hero-points { border-top-color: hsl(210 5% 98% / .18); }
.hero .badge--accent {
  color: hsl(204 80% 80%);
  border-color: hsl(204 64% 70% / .45);
  background: hsl(204 64% 44% / .22);
}
.hero .btn--outline {
  color: hsl(210 5% 98%);
  border-color: hsl(210 5% 98% / .45);
}
.hero .btn--outline:hover { background: hsl(210 5% 98% / .12); }
/* z-index INDISPENSABLE : .hero::before et .hero::after sont positionnes et
   peints APRES le contenu. Sans ce cran, le voile recouvre le texte au lieu
   de se glisser dessous — le titre disparaissait derriere le degrade. */
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { margin: 1.15rem 0 1.15rem; }
.hero .wrap { text-align: center; }
.hero .lead { max-width: 38rem; margin-inline: auto; }
/* Les boutons et les arguments suivent le titre : un titre centre au-dessus
   d une rangee de boutons alignes a gauche se lit comme une erreur. */
.hero-cta { justify-content: center; }
.hero-points { justify-content: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-points {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
  font-size: .9rem; color: hsl(var(--muted-foreground));
}
.hero-points b { color: hsl(var(--foreground)); font-weight: 700; }

/* — Maquettes d'interface (dessinées, pas des captures) ------------------- */
.mock {
  border: 1px solid hsl(var(--card-border));
  border-radius: calc(var(--radius) + .4rem);
  background: hsl(var(--card));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: .72rem; font-weight: 600;
}
.mock-bar i { width: .55rem; height: .55rem; border-radius: 999px; background: hsl(0 0% 100% / .35); }
.mock-bar span { margin-inline-start: .5rem; opacity: .9; }
.mock-body { display: grid; gap: .5rem; padding: .7rem; }

.mock-supermarche { grid-template-columns: 1.1fr 1.4fr; }
.mock-lignes { display: grid; gap: .35rem; align-content: start; }
.mock-ligne {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .5rem; border-radius: .4rem;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border));
  font-size: .66rem;
}
.mock-ligne .q {
  min-width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
  border-radius: .3rem; background: hsl(var(--muted)); font-weight: 700;
}
.mock-ligne .n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock-ligne .p { font-weight: 700; font-variant-numeric: tabular-nums; }
.mock-total {
  margin-top: .3rem; padding: .5rem;
  border-radius: .4rem; background: hsl(var(--secondary) / .1);
  border: 1px solid hsl(var(--secondary) / .25);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .68rem; font-weight: 700;
}
.mock-total b { font-size: 1.05rem; color: hsl(var(--secondary)); }

.mock-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; align-content: start; }
.mock-tuile {
  aspect-ratio: 1 / .82;
  border-radius: .45rem;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 700; color: #fff;
  text-align: center; padding: .25rem; line-height: 1.2;
}
.mock-pave { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .4rem; }
.mock-pave div {
  padding: .45rem 0; text-align: center; font-weight: 700; font-size: .7rem;
  border-radius: .35rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}

.mock-vitrine { grid-template-columns: repeat(3, 1fr); }
.mock-produit {
  border-radius: .5rem; overflow: hidden;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background));
}
.mock-photo { aspect-ratio: 4 / 3; }
.mock-produit p { padding: .35rem .45rem 0; font-size: .64rem; font-weight: 600; line-height: 1.25; }
.mock-produit span { display: block; padding: 0 .45rem .45rem; font-size: .66rem; font-weight: 800; color: hsl(var(--secondary)); }

/* — Listes de fonctionnalités --------------------------------------------- */
.feature-list { list-style: none; display: grid; gap: .55rem; margin-top: 1rem; }
.feature-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.feature-list svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .22rem; color: hsl(var(--secondary)); }

.modules { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.module h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.module h3 svg { width: 1.1rem; height: 1.1rem; color: hsl(var(--secondary)); }
.module ul { list-style: none; display: grid; gap: .3rem; }
.module li { font-size: .875rem; color: hsl(var(--muted-foreground)); padding-inline-start: .9rem; position: relative; }
.module li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6rem;
  width: .28rem; height: .28rem; border-radius: 999px; background: hsl(var(--secondary) / .6);
}

/* — Bandeau d'appel ------------------------------------------------------- */
.cta {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: calc(var(--radius) + .5rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}
.cta h2 { color: inherit; }
.cta p { opacity: .82; max-width: 34rem; margin: .9rem auto 1.75rem; }
.cta .btn--primary { background: hsl(var(--secondary)); }
.cta .btn--outline { border-color: hsl(0 0% 100% / .3); color: inherit; }
.cta .btn--outline:hover { background: hsl(0 0% 100% / .1); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* — Pied ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.site-footer p { font-size: .85rem; color: hsl(var(--muted-foreground)); }

/* — Adaptation mobile ----------------------------------------------------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .mock-supermarche { grid-template-columns: 1fr; }
  .hero-points { gap: .9rem 1.4rem; }
}

/* Respect d'un réglage système : pas d'animation imposée. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* — Sélecteur de langue --------------------------------------------------
   Un lien, pas un bouton : chaque langue a sa propre URL, donc sa propre
   page indexable. Un basculement en JavaScript aurait laissé une seule
   adresse pour deux contenus — invisible pour les moteurs de recherche. */
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.4rem; padding: 0 .75rem;
  border-radius: var(--radius); border: 1px solid hsl(var(--card-border));
  font-size: .85rem; font-weight: 600; color: hsl(var(--foreground));
}
.lang:hover { background: hsl(var(--muted)); }

/* — Lecture de droite à gauche ------------------------------------------
   Le reste de la feuille utilise déjà des propriétés logiques (inset-inline,
   margin-inline), qui se retournent seules. Ne restent que les quelques
   valeurs PHYSIQUES, à refléter explicitement. */
[dir="rtl"] .mock-ligne .p,
[dir="rtl"] .mock-produit span { direction: ltr; }

/* Les MONTANTS et les nombres restent en lecture latine, isolés du texte
   arabe qui les entoure : sans cette isolation, l’algorithme bidi réordonne
   « 180.50 د.م. » et le montant sort à l’envers. */
[dir="rtl"] .mock-total b { direction: ltr; unicode-bidi: isolate; }

/* — Questions fréquentes -------------------------------------------------
   Balise <details> native : le dépliage fonctionne sans JavaScript, et le
   contenu des réponses reste dans la page — donc lisible par un moteur de
   recherche, ce qu’un accordéon en script cache souvent. */
details.card { padding: 1.1rem 1.25rem; }
details.card summary {
  cursor: pointer; font-weight: 700; font-size: .98rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 400; line-height: 1;
  color: hsl(var(--secondary)); flex: none;
}
details.card[open] summary::after { content: "\2212"; }
details.card p { margin-top: .7rem; }

/* Les cartes « secteur » sont plus compactes : un titre et une ligne. */
.card--plain h3 { margin-bottom: .35rem; }

/* — Bandeau d’annonce ----------------------------------------------------
   Au-dessus de l’en-tête, et NON collant : il se lit une fois puis libère
   la place. Un bandeau qui suit le défilement vole de la hauteur à chaque
   écran, sur des tablettes qui n’en ont déjà pas beaucoup. */
.topbar {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: .85rem;
}
.topbar .wrap {
  display: flex; align-items: center; gap: .75rem;
  min-height: 2.5rem; flex-wrap: wrap; justify-content: center;
  padding-top: .4rem; padding-bottom: .4rem;
}
.topbar-tag {
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  padding: .15rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.topbar a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.topbar a:hover { opacity: .85; }

/* — Appel à l’action intermédiaire --------------------------------------- */
.midcta { padding: clamp(2rem, 4vw, 3rem) 0; border-block: 1px solid hsl(var(--border)); }
.midcta .wrap {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
}
.midcta h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.midcta p { margin-top: .4rem; }

@media (max-width: 620px) {
  .topbar .wrap { font-size: .8rem; }
  .midcta .wrap { justify-content: flex-start; }

  /* L'EN-TETE DEBORDAIT SUR TELEPHONE.
     A 375 px, la marque (55) + le selecteur de langue + le theme + le bouton
     d'appel (195) totalisaient 427 px : la page entiere se decalait
     horizontalement, defaut que l'on ne voit pas en redimensionnant une
     fenetre de bureau, car le navigateur y ajoute une barre de defilement au
     lieu d'elargir la page.

     On retire la signature sous le nom — decorative, et elle se brisait deja
     sur trois lignes — et on resserre le bouton. La cible tactile reste au
     dessus des 44 px recommandes. */
  /* La marque ne doit PAS retrecir : flexbox la comprimait a 55 px alors que
     son contenu en fait 86, et le nom debordait sous le selecteur de langue.
     Un element flex retreci en dessous de son contenu ne coupe pas le texte,
     il le laisse depasser — le chevauchement etait la, pas dans les marges. */
  .brand { flex-shrink: 0; }
  .brand span small { display: none; }

  /* Libelle court pour le bouton de l'en-tete. La place manque sur telephone,
     mais le supprimer couterait le seul appel a l'action visible une fois la
     banniere defilee, l'en-tete etant collant. */
  .lbl-long { display: none; }
  .lbl-court { display: inline; }
  .header-actions { gap: .4rem; }
  .site-header .btn--primary { padding: .6rem .75rem; font-size: .82rem; }
}

/* — Nombres latins en contexte arabe -------------------------------------
   Un numero de telephone ecrit en groupes (06 63 08 75 63) est pose GROUPE
   PAR GROUPE de droite a gauche dans un paragraphe arabe, ce qui l inverse.
   L isolation le coupe du contexte et retablit l ordre ecrit. */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* — Titres en arabe -------------------------------------------------------
   Les titres du site sont en poids 800. En latin c'est sans conséquence :
   Inter est une fonte variable qui possède réellement ce poids. En arabe,
   non — Inter n'a aucun glyphe arabe, le texte tombe sur la fonte système, et
   celle-ci n'a pas de 800. Le navigateur FABRIQUE alors le gras en épaississant
   les traits, ce qui empâte les lettres et les détache visuellement du reste
   du site.

   Deuxième problème, propre à l'arabe : c'est une écriture LIÉE. Un
   interlettrage négatif de −1,25 px écrase les liaisons entre les lettres.

   On reprend donc exactement la règle de l'application
   (client/src/index.css, bloc html[dir="rtl"]) : poids 600, interlettrage
   −0.02em. Le latin du site n'est pas touché. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* — Pastille du bandeau, en arabe -----------------------------------------
   Deux defauts cumules, le second etant le plus visible :

   1. font-weight 800. Inter ne couvre pas l arabe, le texte tombe sur la
      fonte systeme, qui n a pas ce poids : le navigateur le FABRIQUE en
      epaississant les traits.

   2. letter-spacing POSITIF. L arabe est une ecriture LIEE : ecarter les
      lettres coupe les liaisons qui les attachent entre elles. Le mot se lit
      alors comme une suite de fragments. En latin le meme reglage aere une
      capitale ; en arabe il casse le mot. */
[dir="rtl"] .topbar-tag {
  font-weight: 600;
  letter-spacing: normal;
}

/* — Captures réelles de l’application ------------------------------------
   Le cadre et l’ombre détachent la capture du fond sombre du site, qui est
   très proche de celui de l’application : sans cette bordure, on ne verrait
   pas où finit la page et où commence le logiciel. */
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-lg, 0 18px 40px hsl(210 29% 8% / .45));
  background: hsl(var(--card));
}
.shot figcaption {
  margin-top: .7rem; font-size: .82rem; line-height: 1.5;
  color: hsl(var(--muted-foreground)); text-align: center;
}

/* — Documents imprimés ---------------------------------------------------
   Le ticket et le bon sont des images de PAPIER : fond blanc, format haut
   et étroit. On les pose sur un fond sombre avec une ombre portée pour
   qu’ils se lisent comme des feuilles posées, pas comme des rectangles
   blancs collés à la page.

   `align-items: start` est nécessaire : sans lui, la grille étire les deux
   figures à la hauteur de la plus grande et le papier le plus court se
   retrouve déformé. */
.papiers {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.paper { margin: 0; display: flex; flex-direction: column; align-items: center; }
.paper img {
  display: block; width: 100%; max-width: 300px; height: auto;
  border-radius: 6px;
  box-shadow: 0 14px 34px hsl(210 29% 6% / .55), 0 2px 6px hsl(210 29% 6% / .4);
  background: #fff;
}
.paper figcaption {
  margin-top: 1rem; max-width: 34ch;
  font-size: .84rem; line-height: 1.6;
  color: hsl(var(--muted-foreground)); text-align: center;
}
.paper figcaption b { color: hsl(var(--foreground)); font-weight: 700; }