/* ============================================================
   NOVABARD — DESIGN SYSTEM « TACTILE ARCHITECTURAL »
   tokens.css — source unique de vérité (novabard.com + shop.novabard.com)
   Phase 1 : tokens + typographie. RTL-safe : propriétés logiques uniquement.
   ============================================================ */

/* ------------------------------------------------------------
   1. POLICES AUTO-HÉBERGÉES
   Titres    : Fraunces (variable opsz 9–144 / wght 300–900) + Amiri Bold (AR)
   UI/corps  : IBM Plex Sans (variable) + IBM Plex Sans Arabic (AR)
   Specs/prix: IBM Plex Mono (chiffres tabulaires par construction)
   Les unicode-range font le routage FR/AR automatiquement :
   une seule pile de polices sert les deux langues.
   ------------------------------------------------------------ */

@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight:300 900;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Amiri';
  src:url('fonts/amiri-700-arabic.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Amiri';
  src:url('fonts/amiri-700-latin.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('fonts/plexsans-var-latin.woff2') format('woff2');
  font-weight:100 700;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('fonts/plexsansarabic-400-arabic.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('fonts/plexsansarabic-500-arabic.woff2') format('woff2');
  font-weight:500;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('fonts/plexsansarabic-700-arabic.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/plexmono-500-latin.woff2') format('woff2');
  font-weight:500;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/plexmono-600-latin.woff2') format('woff2');
  font-weight:600;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
}

/* ------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------ */
:root{
  /* -- Surfaces ------------------------------------------------
     Papier architectural mat. Jamais de blanc pur, jamais de #000. */
  --bg:#FBF9F6;               /* albâtre chaud — fond principal */
  --bg-2:#F3EFE8;             /* albâtre appuyé — sections alternées, cellules */
  --bg-3:#EAE4D9;             /* pierre claire — hover, zones actives */
  --ink:#1C1A17;              /* obsidienne-espresso — texte principal */
  --ink-2:#57503F;            /* texte secondaire */
  --ink-3:#8A8272;            /* texte tertiaire, mentions */

  /* Sections inversées (bande tarifs, bande Flexible Stone) */
  --bg-inverse:#211D18;       /* charbon profond */
  --bg-inverse-2:#2B2620;     /* charbon relevé — cartes sur fond inverse */
  --ink-inverse:#F3EEE5;      /* texte sur charbon */
  --ink-inverse-2:#B5AC9C;    /* texte secondaire sur charbon */

  /* -- Lignes --------------------------------------------------
     La profondeur = superposition + filets 1px + variation de fond.
     AUCUNE ombre portée floue dans tout le système. */
  --line:#2B2620;                                /* filet structurel plein */
  --line-soft:color-mix(in srgb,#2B2620 22%,transparent); /* filet discret */
  --line-inverse:color-mix(in srgb,#F3EEE5 22%,transparent);

  /* -- Accents (finitions réellement vendues) -------------------
     UN SEUL accent par vue, via --accent. Jamais deux accents côte à côte. */
  --teak:#B4793B;             /* teck miel — défaut, services intérieur */
  --cedar:#8C5230;            /* cèdre — bardage extérieur, badil-chipboard */
  --oak:#C2A374;              /* chêne brut — galerie, matériaux */
  --spruce:#33473C;           /* épicéa profond — shop, Flexible Stone */
  --accent:var(--teak);
  --accent-ink:#FFFDFA;       /* texte posé sur l'accent */

  /* WhatsApp : UNIQUEMENT sur les CTA WhatsApp, nulle part ailleurs. */
  --wa:#25D366;
  --wa-deep:#128C7E;          /* état pressé / bordure */
  --wa-ink:#06281C;           /* texte sur vert WA (contraste AA) */

  /* -- Typographie --------------------------------------------- */
  --font-display:'Fraunces','Amiri',Georgia,'Times New Roman',serif;
  --font-ui:'IBM Plex Sans','IBM Plex Sans Arabic',-apple-system,'Segoe UI',sans-serif;
  --font-spec:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,'SF Mono',monospace;

  /* Échelle éditoriale (clamp = fluide mobile→desktop) */
  --text-masthead:clamp(2.5rem,9.5vw,5.25rem);   /* une du magazine — hero uniquement */
  --text-h1:clamp(2rem,6vw,3.5rem);
  --text-h2:clamp(1.55rem,4vw,2.375rem);
  --text-h3:clamp(1.2rem,2.6vw,1.5rem);
  --text-lead:clamp(1.05rem,2vw,1.25rem);        /* chapô sous les titres */
  --text-body:1rem;
  --text-small:.875rem;
  --text-micro:.72rem;                           /* micro-étiquettes de spec */
  --text-price:clamp(1.6rem,3.5vw,2.25rem);      /* 990 MAD/m² — en --font-spec */

  --leading-display:1.04;
  --leading-tight:1.15;
  --leading-body:1.6;
  --tracking-micro:.14em;     /* majuscules espacées — remis à 0 en arabe */
  --weight-display:560;       /* Fraunces variable : gras éditorial, pas lourd */

  /* -- Espacement (base 4px) ----------------------------------- */
  --sp-1:.25rem;  --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;
  --sp-section:clamp(3.5rem,9vw,7rem);           /* rythme vertical des sections */
  --wrap-max:75rem;                              /* 1200px */
  --wrap-pad:clamp(1rem,4vw,2rem);

  /* -- Rayons : règle binaire ----------------------------------
     0 sur tout bloc structurel (section, carte, panneau, image).
     Pilule intégrale sur micro-éléments seuls (chip, badge, pastille,
     bouton WhatsApp). RIEN entre les deux — pas de 8–12px « SaaS ». */
  --r-0:0;
  --r-pill:999px;

  /* -- Interaction --------------------------------------------- */
  --tap-min:48px;             /* cible tactile minimale (budget QA) */
  --focus-ring:2px solid var(--accent);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:150ms;
  --dur-base:280ms;

  /* -- Grain ---------------------------------------------------
     Tuile SVG feTurbulence en data-URI, opacité ≤4%. Calque statique
     composité : coût GPU nul au scroll, conservé sur mobile. */
  --grain-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-opacity:.035;
}

/* Variante d'accent par vue : <body data-accent="cedar"> etc. */
[data-accent="teak"]{--accent:var(--teak)}
[data-accent="cedar"]{--accent:var(--cedar)}
[data-accent="oak"]{--accent:var(--oak);--accent-ink:#1C1A17} /* chêne clair : encre sombre */
[data-accent="spruce"]{--accent:var(--spruce)}

/* Contexte inversé : poser class="inverse" sur une section charbon
   remappe les tokens — les composants enfants n'ont rien à savoir. */
.inverse{
  --bg:var(--bg-inverse);
  --bg-2:var(--bg-inverse-2);
  --bg-3:#352F27;
  --ink:var(--ink-inverse);
  --ink-2:var(--ink-inverse-2);
  --ink-3:#867D6D;
  --line:color-mix(in srgb,#F3EEE5 38%,transparent);
  --line-soft:var(--line-inverse);
  background:var(--bg);
  color:var(--ink);
}

/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* Grain de surface — papier architectural mat */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483647;
  pointer-events:none;
  background:var(--grain-url) repeat;
  opacity:var(--grain-opacity);
}
.no-grain body::before,body.no-grain::before{content:none} /* interrupteur si besoin */

img,svg,video{max-inline-size:100%;block-size:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:var(--focus-ring);outline-offset:2px}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-inline-size:var(--wrap-max);margin-inline:auto;padding-inline:var(--wrap-pad)}
section{scroll-margin-block-start:84px}

/* ------------------------------------------------------------
   4. TYPOGRAPHIE — CLASSES DE RÉFÉRENCE
   ------------------------------------------------------------ */
.t-masthead,.t-h1,.t-h2,.t-h3{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  line-height:var(--leading-tight);
  letter-spacing:-.015em;
  font-variation-settings:'opsz' 144;   /* corps optique « affiche » de Fraunces */
}
.t-masthead{font-size:var(--text-masthead);line-height:var(--leading-display);letter-spacing:-.02em}
.t-h1{font-size:var(--text-h1);line-height:var(--leading-display)}
.t-h2{font-size:var(--text-h2)}
.t-h3{font-size:var(--text-h3);font-variation-settings:'opsz' 40}
.t-lead{font-size:var(--text-lead);line-height:1.5;color:var(--ink-2);max-inline-size:38em}

/* Micro-étiquette de spec : « HABILLAGE MURAL TV » / « 8 MM RIGIDE » */
.t-micro{
  font-family:var(--font-spec);
  font-size:var(--text-micro);
  font-weight:500;
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--ink-2);
}

/* Chiffres alignés : prix, specs, compteurs.
   « 990 MAD/m² » et « 900 DHS / PCS » partagent la même grille de chiffres. */
.t-num{
  font-family:var(--font-spec);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.t-price{
  font-family:var(--font-spec);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-price);
  font-weight:600;
  line-height:1.1;
}
.t-price small{font-size:.45em;font-weight:500;color:var(--ink-2)}

/* ------------------------------------------------------------
   5. ARABE / RTL
   Amiri et Plex Sans Arabic arrivent seuls via unicode-range ;
   ne restent à corriger que métriques et interlettrage.
   ------------------------------------------------------------ */
[dir="rtl"]{
  /* Le Naskh monte et descend davantage : interlignes plus généreux */
  --leading-display:1.25;
  --leading-tight:1.4;
  --leading-body:1.85;
  --weight-display:700;       /* Amiri n'existe qu'en 700 — rendu net */
}
[dir="rtl"] .t-masthead,
[dir="rtl"] .t-h1,
[dir="rtl"] .t-h2,
[dir="rtl"] .t-h3{
  letter-spacing:0;                    /* jamais d'interlettrage en arabe */
  font-variation-settings:normal;      /* axe optique : Latin uniquement */
}
[dir="rtl"] .t-micro{
  letter-spacing:0;
  text-transform:none;                 /* pas de capitales en arabe */
  font-family:var(--font-ui);          /* Plex Mono n'a pas d'arabe */
  font-weight:700;
  font-size:var(--text-small);
}
/* Les prix restent en chiffres latins (usage marocain) et gardent
   Plex Mono : la pile --font-spec route déjà l'arabe vers Plex Arabic. */

/* ------------------------------------------------------------
   6. ACCESSIBILITÉ / PERFORMANCE
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}