/* ══════════════════════════════════════════════════════
   IKNO — jetons de marque.
   SMAB / O'lie : on ne remplace que ce bloc.
   ══════════════════════════════════════════════════════ */
:root{
  --m-primaire:#7A1E22; --m-accent:#E0752B; --m-brun:#5A3E2E;
  --m-page:#F4EFE7; --m-creux:#E7DFD3; --m-encre:#241412;

  --page:#FFFFFF; --creux:#F7F4F0; --sombre:#FBF8F4;
  --trait:#E4DED6; --trait-fin:#EFEAE4;
  --encre:#1F1412; --doux:#5E4A40; --faible:#9A8B7E;
  --primaire:var(--m-primaire); --accent:var(--m-accent);
  --sur-sombre:#1F1412; --vert:var(--m-accent); --wa:var(--m-primaire); --wa-fonce:#5E161A;

  --ar-t:'Noto Kufi Arabic',system-ui,sans-serif;
  --ar-b:'IBM Plex Sans Arabic','Noto Kufi Arabic',system-ui,sans-serif;
  --lat:'Zilla Slab',Georgia,serif;
  --tif:'Noto Sans Tifinagh',system-ui,sans-serif;
  --max:1280px; --gouttiere:24px;
}

:root{color-scheme:light only}
*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;background:var(--page);color:var(--encre);
  font-family:var(--ar-b);font-size:16.5px;line-height:1.75;
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere)}
[hidden]{display:none!important}

/* eyebrow latin — l'arabe n'a pas de capitales, l'accroche les porte */
.sur{font-family:var(--lat);font-weight:600;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faible);
  direction:ltr;text-align:right;display:block;margin-bottom:14px}
.nb{font-family:var(--lat);font-weight:700;direction:ltr;display:inline-block;
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'lnum' 1}

/* ─── bandeau + en-tête ─── */
.annonce{background:var(--page);color:var(--faible);font-size:11px;font-weight:600;letter-spacing:.12em;
  border-bottom:1px solid var(--trait)}
.annonce .w{display:flex;justify-content:space-between;gap:18px;
  min-height:36px;align-items:center;flex-wrap:wrap}
.annonce b{color:var(--primaire);font-weight:700}
@media(max-width:700px){.annonce .w span:last-child{display:none}
  .annonce .w{justify-content:center;text-align:center}}

header{position:sticky;top:0;z-index:30;background:var(--page);
  border-bottom:1px solid var(--trait)}
header .w{display:flex;align-items:center;gap:22px;min-height:72px}
.marque{display:flex;align-items:center;flex-shrink:0;direction:ltr}
.marque svg{height:50px;width:auto;display:block}
.pied-logo{margin-bottom:12px}.pied-logo svg{height:46px}
@media(max-width:400px){.marque svg{height:42px}}
.marque .n{font-family:var(--ar-t);font-weight:800;font-size:24px;
  color:var(--primaire);letter-spacing:-.6px;line-height:1}
.menu{display:flex;gap:24px;margin-inline-start:auto;
  font-family:var(--ar-t);font-weight:500;font-size:15px}
.menu a{padding:5px 0;border-bottom:2px solid transparent;color:var(--doux)}
.menu a:hover,.menu a.on{color:var(--encre);border-bottom-color:var(--accent)}
.tel{font-family:var(--lat);font-weight:700;font-size:16.5px;
  color:var(--primaire);direction:ltr;white-space:nowrap}
.burger{display:none;margin-inline-start:auto;background:none;border:1px solid var(--trait);
  border-radius:3px;padding:8px 12px;cursor:pointer;font-family:var(--ar-t);font-weight:700}
@media(max-width:900px){.menu,.tel{display:none}.burger{display:block}
  .menu.ouvert{display:flex;position:absolute;inset-inline:0;top:100%;background:var(--page);
    flex-direction:column;gap:0;padding:8px var(--gouttiere) 16px;border-bottom:1px solid var(--trait)}
  .menu.ouvert a{padding:11px 0;border-bottom:1px solid var(--trait-fin);font-size:17px}}

/* ─── héros ─── */
.heros{border-bottom:1px solid var(--trait-fin)}
.heros .w{display:grid;gap:34px;padding-top:52px;padding-bottom:52px;align-items:center}
@media(min-width:900px){.heros .w{grid-template-columns:1.05fr .95fr;gap:56px;
  padding-top:76px;padding-bottom:76px}}
.heros h1{font-family:var(--ar-t);font-weight:800;
  font-size:clamp(36px,7.2vw,62px);line-height:1.24;letter-spacing:-1.4px;
  margin:0 0 20px;text-wrap:balance}
.heros h1 em{font-style:normal;color:var(--primaire)}
.heros p{font-size:18px;color:var(--doux);max-width:44ch;margin:0 0 30px}
.heros-img{background:var(--creux);overflow:hidden}
.heros-img img{width:100%;aspect-ratio:4/3.4;object-fit:cover}

.duo{display:flex;gap:12px;flex-wrap:wrap}
.bt{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  font-family:var(--ar-t);font-weight:700;font-size:17px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,color .15s}
.bt-wa{background:var(--wa);color:#fff}
.bt-wa:hover{background:var(--wa-fonce)}
.bt-wa svg{width:21px;height:21px;fill:currentColor;flex-shrink:0}
.bt-fant{border-color:var(--encre);background:none;color:var(--encre)}
.bt-fant:hover{background:var(--encre);color:var(--page)}

/* ─── accueil réel ─── */
.hero{border-bottom:1px solid var(--trait)}
.hero .w{display:grid;gap:30px;padding-top:44px;padding-bottom:44px;align-items:center}
@media(min-width:900px){.hero .w{grid-template-columns:1fr 1fr;gap:56px;padding-top:56px;padding-bottom:56px}}
.hero h1{font-family:var(--ar-t);font-weight:800;font-size:clamp(34px,6.4vw,58px);line-height:1.25;letter-spacing:-1.2px;margin:0 0 16px;color:var(--primaire)}
.hero p{font-size:18px;color:var(--doux);max-width:46ch;margin:0 0 26px}
.hero .img{background:#fff;border:1px solid var(--trait-fin);border-radius:4px;overflow:hidden}
.hero .img img{width:100%;aspect-ratio:1;object-fit:cover}
.vedettes{display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.vedettes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cats2{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.cats2{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.cats2{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cat2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 12px 16px;border:1px solid var(--trait-fin);border-radius:4px;background:#fff;transition:border-color .15s}
.cat2:hover{border-color:var(--primaire)}
.cat2 img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.cat2 b{font-family:var(--ar-t);font-weight:700;font-size:15px;color:var(--encre)}
.cat2 small{font-family:var(--lat);font-size:10.5px;letter-spacing:.14em;color:var(--faible);direction:ltr}
/* fiche enrichie */
.forts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:14px}
.forts div{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--doux)}
.forts i{font-style:normal;color:var(--accent);font-weight:800;flex-shrink:0}
#pdf-modal{position:fixed;inset:0;background:rgba(31,20,18,.82);z-index:999;display:none;flex-direction:column}
#pdf-modal.ouvert{display:flex}
#pdf-modal .pm-barre{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:#7A1E22;color:#fff;font-size:15px}
#pdf-modal .pm-barre button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
#pdf-modal .pm-pages{overflow:auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px}
#pdf-modal canvas{width:min(820px,100%);height:auto;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.35)}
#pdf-modal .pm-att{color:#fff;margin-top:40px}
/* Produits et usages : vignettes « imprimées à la main » (2 encres IKNO) */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;margin-top:14px}
.app{margin:0;text-align:center}
.app img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:10px;background:#FBF8F4;border:1px solid var(--trait-fin)}
.app figcaption{margin-top:6px;font-size:14px;line-height:1.4;color:var(--doux)}
.usages{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.usage{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:var(--sombre);border:1px solid var(--trait-fin);border-radius:8px;padding:12px}
.usage img{display:block;width:96px;height:96px;border-radius:8px;border:1px solid var(--trait-fin)}
.usage .k{font-family:var(--lat);font-weight:700;font-size:12px;color:var(--accent);letter-spacing:.08em}
.usage h3{font-family:var(--ar-t);font-weight:700;font-size:18px;margin:2px 0 4px}
.usage p{margin:0;color:var(--doux);font-size:14.5px;line-height:1.55}
@media(max-width:520px){.apps{grid-template-columns:repeat(3,1fr);gap:10px}.app figcaption{font-size:12.5px}}
.desc{font-size:16px;line-height:1.85;color:var(--doux);max-width:64ch;margin:12px 0 0}
.note{font-size:12.5px;color:var(--faible);margin-top:10px}

/* ─── bande de confiance ─── */
.confiance{border-bottom:1px solid var(--trait-fin)}
.confiance .w{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;padding-top:0;padding-bottom:0}
@media(min-width:820px){.confiance .w{grid-template-columns:repeat(5,1fr)}}
.confiance .w>div{padding-block:22px;padding-inline:20px 12px;border-inline-start:1px solid var(--trait-fin)}
.confiance .w>div:first-child{border-inline-start:none;padding-inline-start:0}
@media(max-width:819px){.confiance .w>div:nth-child(odd){border-inline-start:none;padding-inline-start:0}
  .confiance .w>div:nth-child(-n+4){border-bottom:1px solid var(--trait-fin)}.confiance .w>div:last-child{grid-column:1/-1}}
.confiance b{display:flex;align-items:center;gap:9px;font-family:var(--ar-t);font-weight:700;font-size:16px;margin-bottom:2px;color:var(--encre)}
.confiance b::before{content:'';width:7px;height:7px;background:var(--accent);flex-shrink:0}
.confiance span{font-size:13.5px;color:var(--doux);line-height:1.5;display:block;padding-inline-start:16px}

/* ─── sections ─── */
.sec{padding:66px 0;border-bottom:1px solid var(--trait-fin)}
.sec.creuse{background:var(--creux)}
.sec.noire{background:var(--creux);color:var(--encre);border-bottom:none}
.tete{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:34px;flex-wrap:wrap}
h2{font-family:var(--ar-t);font-weight:800;font-size:clamp(26px,4.6vw,38px);
  letter-spacing:-1px;margin:0;line-height:1.3;text-wrap:balance;color:var(--primaire)}
.tete p{margin:8px 0 0;color:var(--doux);font-size:16px;max-width:56ch}
.lien-plus{font-family:var(--ar-t);font-weight:700;font-size:15px;color:var(--primaire);
  border-bottom:1px solid var(--primaire);padding-bottom:2px;white-space:nowrap}

/* ─── catégories : typographiques, sans photo ─── */
.cats{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait)}
@media(min-width:820px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{background:var(--page);padding:34px 28px 30px;display:flex;flex-direction:column;
  gap:6px;min-height:212px;transition:background .18s}
.cat:hover{background:var(--creux)}
.cat .num{font-family:var(--lat);font-weight:600;font-size:12px;color:var(--faible);
  letter-spacing:.14em;direction:ltr;text-align:right}
.cat h3{font-family:var(--ar-t);font-weight:800;font-size:29px;margin:2px 0 4px;
  letter-spacing:-.7px;line-height:1.25}
.cat p{margin:0;font-size:14.5px;color:var(--doux);line-height:1.6}
.cat .depuis{margin-top:auto;padding-top:14px;font-size:14px;color:var(--primaire);font-weight:600}

/* ═══ le cartouche : la marque, une seule fois, en trois écritures ═══ */
.cartouche{border-bottom:1px solid var(--trait)}
.cartouche .w{display:grid;gap:20px;padding-top:30px;padding-bottom:26px;align-items:end}
@media(min-width:860px){.cartouche .w{grid-template-columns:auto 1fr;gap:52px;
  padding-top:38px;padding-bottom:32px}}
.cartouche .nom{font-family:var(--ar-t);font-weight:800;
  font-size:clamp(40px,7.5vw,64px);line-height:1;letter-spacing:-2px;
  color:var(--primaire);margin:0}
.cartouche .trois{font-family:var(--lat);font-weight:600;font-size:12px;
  letter-spacing:.3em;color:var(--faible);direction:ltr;text-align:right;margin:12px 0 0}
.cartouche .trois .tif{font-family:var(--tif);letter-spacing:.16em}
.cartouche .dit{margin:0;font-size:17.5px;color:var(--doux);max-width:50ch;line-height:1.7}
.cartouche .dit b{color:var(--encre);font-weight:600}
.promesse{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  background:var(--creux);padding:8px 14px}
.promesse .pt{width:7px;height:7px;background:var(--accent);flex-shrink:0}
.promesse span{font-family:var(--ar-t);font-weight:700;font-size:15px;color:var(--primaire)}

/* ═══ barre de tri ═══ */
.tri{border-bottom:1px solid var(--trait);position:sticky;top:72px;z-index:20;background:var(--page)}

.tri .w{display:flex;align-items:center;gap:8px;padding-top:0;padding-bottom:0;
  overflow-x:auto;scrollbar-width:none;min-height:54px}
.tri .w::-webkit-scrollbar{display:none}
.tri a{font-family:var(--ar-t);font-weight:600;font-size:15.5px;color:var(--doux);
  padding:7px 15px;white-space:nowrap;border:1px solid transparent}
.tri a:hover{color:var(--encre)}
.tri a.on{color:var(--page);background:var(--encre)}
.tri .cpt{margin-inline-start:auto;font-size:13px;color:var(--faible);white-space:nowrap;
  padding-inline-start:16px}

/* ═══ catalogue : colonne de filtres + grille dense, sans bordures ═══ */
.cat-page{display:grid;gap:40px;padding:28px 0 60px}
.cat-page>*{min-width:0}

.filtres{font-size:14px}
.filtres h4{font-family:var(--ar-t);font-weight:700;font-size:13.5px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--trait)}
.filtres ul{list-style:none;margin:0 0 26px;padding:0}
.filtres li a,.filtres li label{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;color:var(--doux);cursor:pointer}
.filtres li a.on{color:var(--primaire);font-weight:700}
.filtres li a:hover{color:var(--encre)}
.filtres .n{font-family:var(--lat);font-size:12px;color:var(--faible);direction:ltr}
.filtres input{accent-color:var(--primaire);width:15px;height:15px;margin:0}
@media(max-width:899px){.filtres{display:none}}
.tri-haut{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:8px;font-size:13.5px;color:var(--faible)}
.tri-haut .chips{display:flex;gap:6px;flex-wrap:wrap}
.tri-haut .chips button{background:none;border:1px solid var(--trait);padding:6px 12px;font-family:var(--ar-t);font-weight:600;font-size:13px;cursor:pointer;color:var(--doux);border-radius:3px}
.tri-haut .chips button[aria-pressed="true"]{background:var(--encre);color:var(--page);border-color:var(--encre)}
.grille{display:grid;gap:26px 16px;grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
@media(min-width:640px){.grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){.grille{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 18px}}
.prod{display:flex;flex-direction:column;text-decoration:none;height:100%;min-width:0}
.prod .ph{background:#fff;border-radius:4px;overflow:hidden;position:relative;margin-bottom:10px;border:1px solid var(--trait-fin)}
.prod .ph img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .45s ease}
.prod:hover .ph img{transform:scale(1.04)}
.prod .badge{position:absolute;top:8px;inset-inline-start:8px;background:rgba(255,255,255,.94);color:var(--primaire);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:2px}
.prod .wa{position:absolute;bottom:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;background:var(--primaire);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(36,20,18,.25);transition:transform .15s}
.prod .wa svg{width:19px;height:19px;fill:currentColor}
.prod:hover .wa{transform:scale(1.08)}
.prod h3{font-family:var(--ar-b);font-weight:600;font-size:14.5px;margin:0;line-height:1.5;color:var(--encre);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .refl{font-family:var(--lat);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faible);direction:ltr;text-align:right;display:block;margin-top:3px}
.prod .spec{font-size:12.5px;color:var(--faible);margin:4px 0 0;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod .liv{display:block;margin-top:6px;font-size:11.5px;color:var(--doux);font-weight:600}
.prod .liv i{font-style:normal;color:var(--primaire)}

/* ═══ interruption WhatsApp dans la grille ═══ */
.coupure{background:var(--creux);padding:34px 24px;
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.coupure h3{font-family:var(--ar-t);font-weight:800;font-size:23px;margin:0;
  line-height:1.35;color:var(--encre)}
.coupure p{margin:0;font-size:15px;color:var(--doux);line-height:1.65}
.coupure .bt{align-self:flex-start}

/* ─── pourquoi : liste à filets ─── */
.raisons{display:grid;gap:0}
@media(min-width:900px){.raisons{grid-template-columns:1fr 1fr;column-gap:56px}}
.raison{display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:24px 0;border-top:1px solid var(--trait-fin)}
.raison .k{font-family:var(--lat);font-weight:700;font-size:13px;color:var(--accent);
  direction:ltr;padding-top:6px;letter-spacing:.1em}
.raison h3{font-family:var(--ar-t);font-weight:700;font-size:19px;margin:0 0 4px}
.raison p{margin:0;color:var(--doux);font-size:15.5px;line-height:1.65}

/* ─── parcours : éditorial ─── */
.parcours{display:grid;gap:34px;align-items:stretch}
@media(min-width:900px){.parcours{grid-template-columns:.9fr 1.1fr;gap:64px}}
.parcours-photo{margin:0;background:#fff;border:1px solid var(--trait);border-radius:4px;overflow:hidden;position:relative;min-height:320px}
.parcours-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;display:block}
@media(min-width:900px){.parcours-photo img{position:absolute;inset:0;aspect-ratio:auto}}
.parcours-photo figcaption{position:absolute;bottom:0;inset-inline:0;background:rgba(255,255,255,.92);padding:10px 16px;font-size:12.5px;color:var(--doux);border-top:1px solid var(--trait-fin)}
.parcours-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center}
.parcours-liste li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:22px 0;border-top:1px solid var(--trait)}
.parcours-liste li:last-child{border-bottom:1px solid var(--trait)}
.parcours-liste .num{font-family:var(--lat);font-weight:700;font-size:clamp(40px,5vw,56px);line-height:1;color:var(--accent);direction:ltr;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-2px;min-width:2.2ch;padding-top:2px}
.parcours-liste h3{font-family:var(--ar-t);font-weight:800;font-size:clamp(20px,2.4vw,26px);margin:4px 0 6px;color:var(--primaire);letter-spacing:-.4px}
.parcours-liste p{margin:0;font-size:16px;color:var(--doux);line-height:1.65;max-width:46ch}
@media(max-width:899px){.parcours-liste li{padding:18px 0;gap:16px}.parcours-liste .num{font-size:38px}}

/* ─── appel final ─── */
.appel{padding:64px 0}
.appel .w{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.appel .w{grid-template-columns:1.2fr auto}}
.appel h2{font-size:clamp(26px,4.4vw,38px)}
.appel p{margin:10px 0 0;color:var(--doux);font-size:16.5px;max-width:52ch}

/* ─── fiche produit ─── */
.fil{font-size:13px;color:var(--faible);padding:18px 0 0}
.fil i{font-style:normal;margin:0 7px;opacity:.5}
.fiche{display:grid;gap:34px;padding:20px 0 60px}
@media(min-width:920px){.fiche{grid-template-columns:1fr 1.02fr;gap:56px;align-items:start;padding-top:26px}}
.visuel{background:var(--creux);overflow:hidden;position:relative}
.visuel img{width:100%;aspect-ratio:1;object-fit:cover}
.etiq{position:absolute;top:14px;inset-inline-start:14px;background:var(--encre);color:#fff;
  font-size:12px;font-weight:700;padding:5px 11px}
.vign{display:flex;gap:8px;margin-top:9px}
.vign button{flex:1;aspect-ratio:1;background:var(--creux);border:1px solid var(--trait-fin);
  padding:0;cursor:pointer;overflow:hidden}
.vign button[aria-current="true"]{border-color:var(--primaire);border-width:2px}
.vign img{width:100%;height:100%;object-fit:cover}
.fiche h1{font-family:var(--ar-t);font-weight:800;font-size:clamp(29px,5.6vw,42px);color:var(--primaire);
  line-height:1.3;margin:6px 0 5px;letter-spacing:-1px}
.ref{font-family:var(--lat);font-size:15px;color:var(--faible);direction:ltr;
  text-align:right;margin:0 0 22px}
.ref b{color:var(--doux)}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.puce{background:var(--creux);padding:6px 13px;font-size:14px;font-weight:600;color:var(--doux)}
.prix-bloc{border:2px solid var(--primaire);padding:20px 22px;margin-bottom:18px}
.prix-bloc .n{font-family:var(--lat);font-weight:700;font-size:clamp(37px,8.6vw,50px);
  color:var(--primaire);direction:ltr;line-height:1;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-1.4px}
.prix-bloc .u{font-family:var(--ar-t);font-weight:700;font-size:19px;
  color:var(--primaire);margin-inline-start:8px}
.prix-bloc .notes{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--trait);font-size:14px;font-weight:600;color:var(--doux)}
.prix-bloc .notes i{font-style:normal;color:var(--vert);font-weight:800;margin-inline-end:5px}
.bt-bloc{width:100%;justify-content:center}
.sous-bt{text-align:center;font-size:13.5px;color:var(--faible);margin:9px 0 0}
.sous-bt a{font-family:var(--lat);font-weight:700;color:var(--primaire);direction:ltr;display:inline-block}
.assur{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--trait-fin);
  border:1px solid var(--trait-fin);margin-top:24px}
.assur div{background:var(--page);padding:14px 16px}
.assur dt{font-family:var(--ar-t);font-weight:700;font-size:14.5px}
.assur dd{margin:1px 0 0;font-size:13.5px;color:var(--faible);line-height:1.5}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{padding:13px 4px;border-bottom:1px solid var(--trait-fin);vertical-align:top}
th{width:42%;font-family:var(--ar-t);font-weight:700;color:var(--doux);text-align:right;font-size:15px}
td{font-weight:500}
.tbl{overflow-x:auto}

/* ─── listing : filtres ─── */
.listing{display:grid;gap:34px;padding:26px 0 0}
@media(min-width:900px){.listing{grid-template-columns:212px 1fr;gap:44px}}
.filtres h4{font-family:var(--ar-t);font-weight:700;font-size:13px;letter-spacing:.06em;
  color:var(--faible);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--trait)}
.filtres button{display:block;width:100%;text-align:right;background:none;border:none;
  padding:8px 0;cursor:pointer;font-size:15.5px;color:var(--doux);font-weight:500}
.filtres button[aria-pressed="true"]{color:var(--primaire);font-weight:700}
.compte{font-size:13.5px;color:var(--faible);margin:0 0 18px}

/* ─── à propos / contact ─── */
.texte{max-width:66ch}
.texte p{font-size:17px;line-height:1.85;color:var(--doux);margin:0 0 18px}
.texte p strong{color:var(--encre);font-weight:600}
.contact{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait)}
@media(min-width:760px){.contact{grid-template-columns:repeat(3,1fr)}}
.contact div{background:var(--page);padding:28px 24px}
.contact h3{font-family:var(--ar-t);font-weight:700;font-size:18px;margin:0 0 8px}
.contact p{margin:0 0 4px;color:var(--doux);font-size:15px}
.contact .gros{font-family:var(--lat);font-weight:700;font-size:26px;color:var(--primaire);
  direction:ltr;text-align:right;display:block;margin-bottom:4px}

/* ─── pied ─── */
footer{background:var(--creux);color:var(--doux);padding:52px 0 108px;
  font-size:14.5px;border-top:1px solid var(--trait)}
@media(min-width:920px){footer{padding-bottom:52px}}
.pied{display:grid;gap:28px}
@media(min-width:760px){.pied{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pied h4{font-family:var(--ar-t);font-weight:700;font-size:15px;color:var(--sur-sombre);margin:0 0 10px}
.pied p,.pied a{margin:0 0 5px;display:block;line-height:1.7}
.pied a:hover{color:var(--accent)}
.pied .gros{font-family:var(--lat);font-weight:700;font-size:21px;color:var(--primaire);direction:ltr;text-align:right}
.bas{margin-top:34px;padding-top:18px;border-top:1px solid var(--trait);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--faible)}
.bas .tif{font-family:var(--tif);letter-spacing:.12em}

/* ─── barre collée mobile ─── */
.collee{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--page);
  border-top:1px solid var(--trait);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:13px;box-shadow:0 -6px 22px rgba(36,20,18,.14)}
.collee .p .n{font-family:var(--lat);font-weight:700;font-size:22px;color:var(--primaire);
  direction:ltr;display:block;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.collee .p .s{font-size:11.5px;color:var(--faible);font-weight:600}
.collee .bt{flex:1;justify-content:center;padding:13px 16px;font-size:16.5px}
@media(min-width:920px){.collee{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ─── fiche : PDF + limites ─── */
.pdfs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pdfs .bt{justify-content:center;padding:11px 12px;font-size:14px}
.pdfs svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:480px){.pdfs{grid-template-columns:1fr}}
td.partiel{color:var(--doux);font-style:italic;background:var(--creux)}
.limites{margin:10px 0 0;padding:0;list-style:none;max-width:760px}
.limites li{position:relative;padding-inline-start:18px;margin-bottom:8px;color:var(--doux);font-size:15px;line-height:1.65}
.limites li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* ─── FAQ / comparatif / guide ─── */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--trait);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;font-family:var(--ar-t);font-weight:700;font-size:16.5px;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--encre)}
.faq summary::after{content:'+';font-family:var(--lat);color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{margin:0 0 14px;color:var(--doux);font-size:15.5px;line-height:1.75;max-width:62ch}
/* formulaire « demande par e-mail » : fenêtre ouverte par le bouton de la fiche machine */
.ouvrir-devis svg{width:20px;height:20px;flex-shrink:0}
.modal-devis{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px 28px;
  border:none;border-top:4px solid var(--primaire);border-radius:4px;background:var(--page);color:var(--encre);box-shadow:0 24px 60px rgba(31,20,18,.25)}
.modal-devis::backdrop{background:rgba(31,20,18,.55)}
.md-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.md-tete h2{margin:0;font-family:var(--ar-t);font-size:22px;line-height:1.35;color:var(--primaire)}
.md-machine{margin:4px 0 0;font-weight:600;color:var(--encre);font-size:15px}
.fermer-devis{flex-shrink:0;width:38px;height:38px;border:1px solid var(--trait);border-radius:50%;background:var(--page);
  font-size:24px;line-height:1;cursor:pointer;color:var(--doux)}
.fermer-devis:hover{border-color:var(--encre);color:var(--encre)}
.f-intro{margin:0 0 18px;color:var(--doux);font-size:15px}
.devis{display:grid;gap:14px}
.devis .f-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.devis label{display:grid;gap:6px;font-family:var(--ar-t);font-weight:700;font-size:14.5px;color:var(--encre)}
.devis label small{font-weight:400;color:var(--faible);font-size:12.5px}
.devis input,.devis textarea{font:inherit;font-family:var(--ar-b);font-weight:400;font-size:16px;color:var(--encre);background:var(--page);
  border:1px solid var(--trait);border-radius:3px;padding:11px 13px;width:100%}
.devis input[dir=ltr]{text-align:left}
html[lang=ar] .devis input[dir=ltr]{text-align:right}
.devis input:focus,.devis textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.devis textarea{resize:vertical;min-height:110px}
.devis .bt{justify-self:start}
.devis .bt[disabled]{opacity:.6;cursor:wait}
.devis .f-pot{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.devis .f-etat{margin:0;font-weight:600;min-height:1.5em}
.devis .f-etat.f-ok{color:var(--primaire)}
.devis .f-etat.f-ko{color:var(--accent)}
.devis .f-rgpd{margin:0;font-size:13px;color:var(--faible)}
.devis .f-rgpd a{text-decoration:underline}
@media (max-width:640px){.devis .f-grille{grid-template-columns:1fr}.devis .bt{justify-self:stretch;justify-content:center}
  .modal-devis{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0;padding:20px 16px}}
.tete-p{margin:8px 0 22px;color:var(--doux);font-size:16px;max-width:56ch}
.compar table{max-width:900px;table-layout:fixed}.compar tbody th{width:22%}.compar thead th{text-align:center;vertical-align:bottom;padding-bottom:12px}
.compar thead img{width:96px;height:96px;object-fit:cover;border-radius:4px;border:1px solid var(--trait);margin:0 auto 8px;display:block;background:#fff}
.compar thead span{font-family:var(--lat);font-weight:700;color:var(--primaire);font-size:16px}
.compar tbody td{text-align:center;font-weight:500}
.guide h3{font-family:var(--ar-t);font-weight:700;font-size:18px;margin:26px 0 8px;color:var(--primaire)}
.guide h3:first-child{margin-top:0}
.guide p{font-size:16px;line-height:1.8;color:var(--doux);margin:0 0 12px}
.guide strong{color:var(--encre);font-weight:600}

/* ─── légal ─── */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.legal h3{font-family:var(--ar-t);font-weight:700;font-size:17px;margin:26px 0 8px;color:var(--primaire)}
.legal h3:first-child{margin-top:0}
.legal p{font-size:15.5px;line-height:1.8;color:var(--doux);margin:0 0 10px}
.legal strong{color:var(--encre);font-weight:600}
.legal-nav{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--trait);display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.legal-nav a{color:var(--doux);border-bottom:1px solid transparent}.legal-nav a.on{color:var(--primaire);border-bottom-color:var(--primaire)}
.pied .adr b{color:var(--encre);font-weight:600}
@media(min-width:760px){.pied{grid-template-columns:1.3fr .9fr .9fr 1.1fr}}

/* ─── langue ─── */
.lang{display:inline-flex;border:1px solid var(--trait);border-radius:3px;overflow:hidden;white-space:nowrap}
.lang button{background:none;border:none;padding:6px 10px;cursor:pointer;color:var(--doux);font-size:13px;line-height:1.2}
.lang button[data-lang=ar]{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700}
.lang button[data-lang=fr]{font-family:var(--lat);font-weight:700;letter-spacing:.08em}
.lang button+button{border-inline-start:1px solid var(--trait)}
.lang button[aria-pressed=true]{background:var(--primaire);color:#fff}
.lang-m{display:none}
@media(max-width:900px){.lang-m{display:inline-flex;margin-top:14px;align-self:flex-start}.lang-m button{padding:9px 16px;font-size:15px}}
html[lang=fr]{--ar-t:'Zilla Slab',Georgia,serif;--ar-b:'IBM Plex Sans Arabic',system-ui,sans-serif}
html[lang=fr] body{direction:ltr;text-align:left}
html[lang=fr] .sur,html[lang=fr] .cat .num,html[lang=fr] .cartouche .trois,html[lang=fr] .etape .n,html[lang=fr] .ref,
html[lang=fr] th,html[lang=fr] .filtres button,html[lang=fr] .contact .gros,html[lang=fr] .pied .gros,html[lang=fr] .prod .refl{text-align:left}
html[lang=fr] h1,html[lang=fr] h2,html[lang=fr] .hero h1{letter-spacing:-.3px}
html[lang=fr] body{line-height:1.6}

.chips .chip{display:inline-block;border:1px solid var(--trait);padding:6px 12px;font-family:var(--ar-t);font-weight:600;font-size:13px;color:var(--doux);border-radius:3px}.chips .chip[aria-pressed="true"]{background:var(--encre);color:var(--page);border-color:var(--encre)}
.lang a{padding:6px 10px;color:var(--doux);font-size:13px;line-height:1.2}.lang a[data-lang=ar]{font-family:'Noto Kufi Arabic',sans-serif;font-weight:700}.lang a[data-lang=fr]{font-family:var(--lat);font-weight:700;letter-spacing:.08em}.lang a+a{border-inline-start:1px solid var(--trait)}.lang a[aria-pressed=true]{background:var(--primaire);color:#fff}