/* ==========================================================================
   BeNamedByAI, la boutique
   Une seule feuille pour les deux langues. Le sens d'ecriture arabe est traite
   par les proprietes logiques (margin-inline, padding-inline, text-align:start)
   plutot que par un second jeu de regles : il n'y a ainsi qu'un endroit a
   corriger.
   Creee le dimanche 20 septembre 2026.
   ========================================================================== */

:root{
  --ink:#0a1330; --ink-2:#101d47;
  --paper:#f7f5f0; --paper-2:#f0eee7; --line:#e3e0d6;
  --flame:#ff7a45; --pink:#ff3d81; --violet:#7c5cff; --cyan:#12d4c4;
  --text-on-ink:#f1eee7; --text-on-ink-muted:#a7b0c6;
  --text-on-paper:#17203a; --text-on-paper-muted:#6f7689;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --radius:18px; --radius-sm:12px;
  --shadow-card:0 26px 60px -30px rgba(10,19,48,.35),0 2px 6px rgba(10,19,48,.04);
  --shadow-lift:0 34px 70px -30px rgba(10,19,48,.45);
  --grad:linear-gradient(100deg,var(--flame) 0%,var(--pink) 52%,var(--violet) 100%);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--text-on-paper);
  font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;}
html[dir="rtl"] body{font-family:'Noto Sans Arabic','Noto Kufi Arabic',var(--sans);}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
img{max-width:100%;height:auto;}

/* --- en-tete -------------------------------------------------------------- */
header{background:var(--ink);color:var(--text-on-ink);padding:16px 0;}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.brand{font-family:var(--serif);font-weight:700;font-size:1.32rem;line-height:1.1;
  letter-spacing:-.01em;text-decoration:none;color:inherit;}
html[dir="rtl"] .brand{font-family:'Noto Kufi Arabic',var(--serif);}
.brand small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-on-ink-muted);margin-top:5px;}
html[dir="rtl"] .brand small{font-family:'Noto Sans Arabic',var(--mono);letter-spacing:0;font-size:.66rem;}
header nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
header nav a{color:var(--text-on-ink-muted);text-decoration:none;font-size:.9rem;
  padding:8px 11px;border-radius:9px;transition:.16s;}
header nav a:hover{color:var(--text-on-ink);background:rgba(241,238,231,.09);}
header nav a.actif{color:var(--text-on-ink);background:rgba(241,238,231,.13);font-weight:600;}
header nav a.lang-switch{border:1px solid rgba(241,238,231,.35);border-radius:999px;
  padding:7px 17px;color:var(--text-on-ink);font-weight:600;}
header nav a.lang-switch:hover{background:rgba(241,238,231,.12);}

/* --- banniere ------------------------------------------------------------- */
.hero{background:var(--ink);color:var(--text-on-ink);padding:52px 0 66px;}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,4.8vw,3.2rem);line-height:1.07;
  margin:0 0 16px;font-weight:700;letter-spacing:-.02em;max-width:22ch;}
html[dir="rtl"] .hero h1{font-family:'Noto Kufi Arabic',var(--serif);}
.hero .chapo{font-size:1.12rem;color:var(--text-on-ink-muted);max-width:66ch;margin:0;}
.hero .note-prix{margin:22px 0 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cyan);}
html[dir="rtl"] .hero .note-prix{font-family:'Noto Sans Arabic',var(--mono);
  letter-spacing:0;text-transform:none;font-size:.9rem;}

/* --- sections ------------------------------------------------------------- */
section{padding:62px 0;}
section.alt{background:var(--paper-2);}
.section-title{font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.15rem);
  margin:0 0 30px;font-weight:700;letter-spacing:-.02em;}
html[dir="rtl"] .section-title{font-family:'Noto Kufi Arabic',var(--serif);}
section.alt .section-title{margin-top:54px;}

/* --- la grille des produits ---------------------------------------------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px;}
.produit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s;scroll-margin-top:24px;}
.produit:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.produit > img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--ink);}
.produit-vedette{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,92,255,.16),var(--shadow-card);}
.corps{padding:24px;display:flex;flex-direction:column;flex:1;}
.ref{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-on-paper-muted);display:block;margin-bottom:9px;}
html[dir="rtl"] .ref{direction:rtl;}
.produit h3{font-family:var(--serif);font-size:1.28rem;line-height:1.2;margin:0 0 10px;
  font-weight:700;letter-spacing:-.01em;}
html[dir="rtl"] .produit h3{font-family:'Noto Kufi Arabic',var(--serif);}
.accroche{margin:0 0 16px;color:var(--text-on-paper-muted);font-size:.96rem;}
.points{list-style:none;margin:0 0 16px;padding:0;}
.points li{position:relative;padding-inline-start:23px;margin-bottom:8px;font-size:.93rem;}
.points li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--grad);}
.delai{margin:0 0 18px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cyan);filter:brightness(.72);}
html[dir="rtl"] .delai{font-family:'Noto Sans Arabic',var(--mono);letter-spacing:0;
  text-transform:none;font-size:.86rem;}

.prix{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.prix strong{font-family:var(--serif);font-size:1.85rem;font-weight:700;letter-spacing:-.02em;}
html[dir="rtl"] .prix strong{font-family:'Noto Kufi Arabic',var(--serif);}
.par-mois{font-size:.92rem;color:var(--text-on-paper-muted);}
.prix .usd{margin-inline-start:auto;font-family:var(--mono);font-size:.78rem;
  color:var(--text-on-paper-muted);white-space:nowrap;direction:ltr;unicode-bidi:isolate;}

.achat{margin:16px 0 0;}
.btn-achat{display:block;width:100%;text-align:center;background:var(--grad);color:#fff;
  border:none;border-radius:999px;padding:14px 26px;font-family:var(--sans);font-size:1rem;
  font-weight:700;cursor:pointer;text-decoration:none;transition:.18s;margin-top:16px;}
html[dir="rtl"] .btn-achat{font-family:'Noto Sans Arabic',var(--sans);}
.achat .btn-achat{margin-top:0;}
.btn-achat:hover{transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(255,61,129,.7);}
.btn-demande{background:var(--ink-2);}
.btn-demande:hover{box-shadow:0 18px 34px -18px rgba(16,29,71,.8);}
/* --- l'abonnement -----------------------------------------------------------
   PayPal dessine lui-meme son bouton et ses regles de marque interdisent de le
   deguiser. On lui donne la meme largeur et la meme place que nos boutons, et
   on reserve sa hauteur pour que la carte ne saute pas pendant le chargement. */
.achat-abo{margin-top:16px;min-height:52px;}
.achat-abo > div{max-width:100%;}
html[dir="rtl"] .achat-abo{direction:ltr;}

.paiement{display:block;text-align:center;margin-top:11px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.06em;color:var(--text-on-paper-muted);}

/* --- blocs de bas de page ------------------------------------------------- */
.conseil{background:var(--ink);color:var(--text-on-ink);border-radius:var(--radius);
  padding:34px 36px;margin-bottom:12px;}
.conseil h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 10px;font-weight:700;}
html[dir="rtl"] .conseil h2{font-family:'Noto Kufi Arabic',var(--serif);}
.conseil p{margin:0 0 20px;color:var(--text-on-ink-muted);max-width:72ch;}
.btn-conseil{display:inline-block;background:var(--grad);color:#fff;border-radius:999px;
  padding:13px 28px;font-weight:700;text-decoration:none;font-size:.98rem;transition:.18s;
  margin-inline-end:10px;margin-bottom:8px;}
.btn-conseil:hover{transform:translateY(-2px);}
.btn-mail{background:transparent;border:1px solid rgba(241,238,231,.4);font-family:var(--mono);
  font-size:.88rem;font-weight:500;}
.conseil-aide{margin-top:12px;}

.trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;}
.trois .bloc,.trois .etape{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);}
.trois h3{margin:0 0 8px;font-size:1.06rem;}
.trois p{margin:0;color:var(--text-on-paper-muted);font-size:.95rem;}
.trois .etape .n{display:inline-block;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink-2);
  border-radius:999px;padding:5px 13px;margin-bottom:12px;}
html[dir="rtl"] .trois .etape .n{font-family:'Noto Sans Arabic',var(--mono);
  letter-spacing:0;text-transform:none;font-size:.78rem;}

/* --- pied ----------------------------------------------------------------- */
footer{background:var(--ink);color:var(--text-on-ink-muted);padding:46px 0 34px;font-size:.93rem;}
footer a{color:var(--text-on-ink-muted);text-decoration:none;}
footer a:hover{color:var(--text-on-ink);}
footer p{max-width:78ch;}
.pied-marque{font-family:var(--serif);font-weight:700;font-size:1.22rem;
  color:var(--text-on-ink);margin-bottom:8px;}
html[dir="rtl"] .pied-marque{font-family:'Noto Kufi Arabic',var(--serif);}
.pied-editeur{font-size:.88rem;}
.pied-bas{margin-top:22px;padding-top:20px;border-top:1px solid rgba(241,238,231,.14);font-size:.85rem;}
.pied-bas .legal{margin-inline-end:16px;}
.pied-sign{margin-top:12px;}
.pied-depot{margin-top:8px;font-size:.78rem;color:rgba(167,176,198,.7);}

/* --- pied repete a l'impression, pour qu'une feuille egaree se rattache ---- */
.pied-impression{display:none;}
@media print{
  header nav,.btn-achat,.achat,.btn-conseil,.paiement{display:none !important;}
  body{background:#fff;font-size:11pt;}
  header,.hero,footer,.conseil{background:#fff !important;color:#000 !important;}
  .hero .chapo,.conseil p,footer,.pied-depot{color:#333 !important;}
  .brand,.pied-marque,.hero h1,.conseil h2{color:#000 !important;}
  .hero .note-prix,.delai{color:#555 !important;}
  .produit{box-shadow:none;border-color:#bbb;page-break-inside:avoid;}
  .grille{grid-template-columns:repeat(2,1fr);gap:14px;}
  .pied-impression{display:block;position:fixed;bottom:0;left:0;right:0;
    font-family:var(--mono);font-size:8pt;color:#555;border-top:1px solid #bbb;
    padding-top:4px;text-align:center;}
  @page{margin:14mm 12mm 18mm;}
}

@media (max-width:640px){
  .hero{padding:40px 0 48px;}
  .conseil{padding:26px 22px;}
  header nav a{padding:7px 9px;font-size:.85rem;}
}