/* base.css — tokens (couleurs, typo), reset, boutons, titres, toast, placeholders.
   ➜ Pour changer l'identité visuelle: modifier SEULEMENT le bloc :root. */

:root{
  /* ── Identité (palette ivoire & or) ── */
  --ink:        #17130d;      /* texte + fonds sombres */
  --bg:         #f6f1e7;      /* fond de page */
  --paper:      #fbf7ee;      /* fond doux */
  --white:      #fffdf8;      /* cartes, champs */
  --mist:       #e4dbc7;      /* bordures */
  --dim:        #7d7462;      /* texte secondaire */
  --dim2:       #a39a86;
  --accent:     #a67c2e;      /* or foncé (texte sur clair) */
  --accent-2:   #e2c284;      /* or clair (sur fond sombre) */
  --gold:       #c39a4f;      /* or principal (prix, liserés) */
  --accent-soft:#f2e6cc;
  --red:        #b4443c;
  --green:      #3d7a4f;
  --orange:     #a67c2e;

  --f-display: 'Changa', 'Outfit', system-ui, sans-serif;   /* titres, prix, chiffres */
  --f-sans:    'Outfit', system-ui, sans-serif;               /* texte courant */
  --f-ar:      'Lateef', 'Changa', serif;                     /* arabe */

  --radius: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --nav-h: 76px;
  --nav-h-cat: 46px;
  --container: 1280px;

  --shadow-sm: 0 6px 22px rgba(23,19,13,.10);
  --shadow-md: 0 12px 34px rgba(23,19,13,.14);
  --shadow-lg: 0 18px 50px rgba(23,19,13,.18);

  /* ── Alias (cart / checkout / admin) — ne pas supprimer ── */
  --black: var(--ink);
  --gold-2: var(--accent-2);
  --gold-light: var(--accent-soft);
  --gold-soft: var(--accent-soft);
  --blue: var(--ink);
  --blue-2: var(--accent);
  --blue-light: var(--accent-soft);
  --yellow: var(--accent);
  --yellow-2: var(--accent-2);
  --f-accent: var(--f-sans);
  --f-mono: var(--f-sans);
  --f-thin: var(--f-sans);
  --ink2: #221c13;
  --ink3: #efe8d8;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
  width: 100%;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; cursor: pointer; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
button, input, select, textarea{
  font-family: inherit; font-size: inherit; color: inherit;
  border: none; background: none; outline: none;
}
button{ cursor: pointer; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
h1,h2,h3,h4,h5,h6{ margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: 0; }
p{ margin: 0; }
::selection{ background: var(--accent); color: var(--white); }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: var(--paper); }
::-webkit-scrollbar-thumb{ background: var(--mist); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

.pg{ display: none; }
.pg.on{ display: block; }
.hidden{ display: none !important; }
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.muted-sm{ font-size: 12.5px; color: var(--dim); }
.btn-block{ width: 100%; justify-content: center; }
.ar{ direction: rtl; unicode-bidi: isolate; font-family: var(--f-ar); font-size: 1.5em; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.perk-sub.ar{ font-weight: 500; font-size: 1.4em; }

/* ── Boutons ── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px;
  font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
  border-radius: 999px; border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .15s;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-fill{ background: linear-gradient(120deg, var(--gold), var(--accent-2) 55%, var(--gold)); background-size: 200%; color: #1c1508; box-shadow: 0 8px 22px rgba(195,154,79,.32); }
.btn-fill:hover{ background-position: 100% 0; transform: translateY(-2px); }
.btn-accent{ background: var(--ink); color: var(--accent-2); }
.btn-accent:hover{ background: var(--accent); color: var(--white); }
.btn-ghost{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--white); }
.btn-light{ background: var(--white); color: var(--ink); }
.btn-light:hover{ background: var(--accent-2); }

/* ── Titres de section ── */
.eyebrow{
  font-size: 10.5px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--accent);
}
.section-title{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 32px; font-weight: 600; letter-spacing: 1.5px; text-align: center; margin-top: 6px;
}
.section-title::before, .section-title::after{
  content: ''; flex: 1 1 40px; max-width: 80px; height: 1px; background: var(--accent-2);
}
.section-title.left{ justify-content: flex-start; text-align: left; }
.section-title.left::before{ display: none; }
.section-title.left::after{ max-width: 60px; flex: 0 0 60px; }
.section-sub{ font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); text-align: center; margin-top: 8px; }
.sec-head{ padding: 52px 20px 24px; text-align: center; }
.sec-foot{ text-align: center; padding: 26px 20px 0; }
.link-more{
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.link-more:hover{ color: var(--accent); border-color: var(--accent); }

/* ── Reveal (actif seulement si JS tourne) ── */
.js .rv{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .js .rv{ opacity: 1; transform: none; transition: none; }
  html{ scroll-behavior: auto; }
}

/* ── Placeholder image (affiché si l'image manque: affiche le nom du fichier attendu) ── */
.img-ph{ position: relative; background: var(--paper); }
.img-ph::before{
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 49.4%, var(--mist) 49.4%, var(--mist) 50.6%, transparent 50.6%),
    linear-gradient(45deg,  transparent 49.4%, var(--mist) 49.4%, var(--mist) 50.6%, transparent 50.6%);
  background-size: 100% 100%;
  opacity: .55;
}
.img-ph::after{
  content: attr(data-ph);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 86%; padding: 6px 12px;
  background: var(--white); border: 1px solid var(--mist);
  font-size: 10.5px; letter-spacing: .5px; color: var(--dim);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 1;
}
.hero-slide.img-ph{ background: #2a2723; }
.hero-slide.img-ph::before{ opacity: .12; }

/* ── Toast ── */
#toast{
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--white);
  padding: 13px 24px; border: 1px solid var(--accent-2); border-radius: var(--radius);
  font-size: 13px; z-index: 500; opacity: 0; pointer-events: none; transition: all .3s ease;
  max-width: 92vw; text-align: center;
}
#toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Pages À propos (page dédiée) ── */
.about-page{ max-width: 780px; margin: 0 auto; padding: 0 20px 70px; }
.about-hero{ background: var(--ink); color: var(--white); text-align: center; padding: 54px 20px; margin: 0 -20px 40px; }
.about-hero h1{ font-size: 30px; letter-spacing: 2px; color: var(--accent-2); }
.about-hero-sub{ font-size: 12px; letter-spacing: 1.5px; color: rgba(255,255,255,.65); margin-top: 10px; text-transform: uppercase; }
.about-body p{ font-size: 14.5px; line-height: 1.9; margin-bottom: 18px; }
.about-h2{ font-size: 22px; margin: 34px 0 12px; }
.about-values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 30px; }
.about-value{ border: 1px solid var(--mist); border-radius: var(--radius); padding: 20px 16px; text-align: center; background: var(--white); }
.about-value-title{ font-family: var(--f-display); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.about-value-sub{ font-size: 12px; line-height: 1.6; color: var(--dim); }

@media (max-width: 860px){
  input, select, textarea{ font-size: 16px !important; }   /* évite le zoom iOS */
  .section-title{ font-size: 22px; letter-spacing: 1px; }
  .section-title::before, .section-title::after{ max-width: 28px; }
  .sec-head{ padding: 40px 16px 18px; }
}
@media (max-width: 640px){
  .about-values{ grid-template-columns: 1fr; }
  .about-hero{ padding: 38px 20px; }
  .about-hero h1{ font-size: 22px; }
}