/* =========================================================================
   ITHAR DIGITAL — /catalog
   French + Arabic on one page. Both languages live in the markup as sibling
   [data-l] elements; html[lang] decides which one shows. No JS is needed to
   read the page, and ?lang=ar is a real, shareable URL.
   Built on styles.css + code.css tokens. Uses logical properties so the same
   rules hold in RTL.
   ========================================================================= */

/* ---------------------------------------------------------- language switch */
html[lang="fr"] [data-l="ar"],
html[lang="ar"] [data-l="fr"]{display:none !important}

/* ---------------------------------------------------------- nav, RTL-safe */
.cat .nav__links{margin-left:0; margin-inline-start:auto}
.cat .nav__actions{margin-left:0; margin-inline-start:auto}


/* The base .link-arrow animates EVERY span inside it; here the label is
   itself a span, so only the arrow may move. The arrow also flips in RTL. */
.cat .link-arrow span{transition:none; transform:none}
.cat .link-arrow .arr{display:inline-block; transition:transform .25s var(--ease)}
.cat .link-arrow:hover .arr{transform:translateX(5px)}
html[dir="rtl"] .cat .link-arrow .arr,
html[dir="rtl"] .link-arrow .arr{transform:scaleX(-1)}
html[dir="rtl"] .link-arrow:hover .arr{transform:scaleX(-1) translateX(5px)}


/* ---------------------------------------------------------- hero */
.cat-hero .hero__inner{padding-bottom:clamp(56px,7vw,90px)}
.cat-title{font-size:clamp(2.1rem,5.2vw,3.7rem); max-width:20ch; margin-inline:auto}
html[lang="ar"] .cat-title{font-size:clamp(2rem,4.8vw,3.4rem); max-width:22ch}

.sectors{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.sectors li{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 18px 9px 14px; box-shadow:var(--shadow-sm); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-weight:600; font-size:.94rem; color:var(--ink-800);
}
html[dir="rtl"] .sectors li{padding:9px 14px 9px 18px}
.sectors svg{width:20px; height:20px; fill:none; stroke:var(--one); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------------------------------------------------------- before / after */
.ba{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-md);
}
.ba__head, .ba__row{display:grid; grid-template-columns:170px 1fr 1fr}
.ba__head{background:var(--bg-soft); border-bottom:1px solid var(--line)}
.ba__head > span{padding:14px 20px; font-family:var(--font-display); font-weight:700; font-size:.95rem}
.ba__head b{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  font-family:var(--font-mono); font-size:.85rem; margin-inline-end:8px; color:#fff;
}
.ba__before-h{color:var(--ink-500)}
.ba__before-h b{background:var(--ink-300)}
.ba__after-h{color:var(--one)}
.ba__after-h b{background:var(--grad)}
.ba__row + .ba__row{border-top:1px solid var(--line-soft)}
.ba__row > span{padding:18px 20px; font-size:.95rem; line-height:1.6}
.ba__topic{font-family:var(--font-display); font-weight:700; color:var(--ink-900)}
.ba__before{color:var(--ink-400); background:#FCFCFD; position:relative}
.ba__before > span:first-child::before, .ba__before > span::before{content:none}
.ba__after{color:var(--ink-800); background:linear-gradient(90deg,rgba(21,84,240,.035),rgba(0,191,165,.04))}
html[dir="rtl"] .ba__after{background:linear-gradient(270deg,rgba(21,84,240,.035),rgba(0,191,165,.04))}
.fineprint{margin:14px 0 0; font-size:.84rem; color:var(--ink-400)}

/* ---------------------------------------------------------- sector packs */
.packs{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:20px}
.pack{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.pack:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.pack--accent{border-color:var(--one-100); background:linear-gradient(180deg,#fff,#F8FAFF)}
.pack__tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:.72rem; color:var(--one);
  background:var(--one-100); border-radius:6px; padding:3px 9px; margin-bottom:14px;
}
.pack h3{font-size:1.22rem; margin-bottom:14px}
.pack ul{display:grid; gap:10px; margin-bottom:16px}
.pack li{position:relative; padding-inline-start:26px; font-size:.93rem; color:var(--ink-500); line-height:1.55}
.pack li::before{
  content:""; position:absolute; inset-inline-start:0; top:.45em; width:15px; height:15px; border-radius:5px;
  background:var(--zero-100) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3.2L11 1.5' fill='none' stroke='%2300BFA5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
}
.pack__proof{margin:auto 0 0; padding-top:14px; border-top:1px dashed var(--line); font-size:.86rem; color:var(--ink-400)}
.pack__proof a{font-weight:600; direction:ltr; unicode-bidi:isolate}

.included{
  margin-top:28px; background:var(--ink-900); color:#fff; border-radius:var(--r-lg);
  padding:24px 26px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.included h3{color:#fff; font-size:1.05rem; margin:0}
.included ul{display:flex; flex-wrap:wrap; gap:8px}
.included li{
  font-size:.86rem; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill); padding:6px 13px;
}

/* ---------------------------------------------------------- demos */
.demo-flag{
  display:inline-block; margin:18px 0 0; font-size:.86rem; font-weight:600;
  color:#7A5A10; background:#FFF6DC; border:1px solid #F1D79A; border-radius:10px; padding:8px 14px;
}
.demos{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.demo{margin:0}
.browser{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-md);
}
.browser__screen{height:318px; position:relative; overflow:hidden}
.demo figcaption{padding:16px 4px 0; font-size:.9rem; color:var(--ink-500); line-height:1.6}
.demo figcaption b{display:block; font-family:var(--font-display); color:var(--ink-900); font-size:1.02rem; margin-bottom:3px}

.mock{padding:14px 16px; font-size:.8rem}
.mock__nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.mock__nav b{font-family:var(--font-display); font-size:.86rem; color:var(--ink-900)}
.mock__pill{font-size:.7rem; font-weight:600; color:#fff; background:var(--ink-900); border-radius:var(--r-pill); padding:4px 10px}
.mock__h{font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.25; color:var(--ink-900); margin:0 0 12px}
html[lang="ar"] .mock__h{font-family:"Tajawal",sans-serif; line-height:1.5}

.mock--dent{background:linear-gradient(180deg,#F0FAF8,#fff 55%)}
.mock--dent .mock__pill{background:var(--zero)}
.mock__book{background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px; box-shadow:var(--shadow-sm)}
.mock__label{display:block; font-size:.72rem; color:var(--ink-400); margin-bottom:8px}
.mock__slots{display:flex; gap:6px; margin-bottom:10px}
.mock__slots span{flex:1; text-align:center; font-family:var(--font-mono); font-size:.72rem; border:1px solid var(--line); border-radius:7px; padding:5px 0; color:var(--ink-700)}
.mock__slots .is-on{background:var(--zero); border-color:var(--zero); color:#fff}
.mock__btn{display:block; text-align:center; background:var(--ink-900); color:#fff; border-radius:8px; padding:6px; font-weight:600; font-size:.74rem}
.mock__chat{
  margin-top:10px; background:#E7F8EE; border-radius:12px 12px 12px 3px; padding:9px 11px;
  max-width:88%; box-shadow:var(--shadow-sm);
}
html[dir="rtl"] .mock__chat{border-radius:12px 12px 3px 12px}
.mock__chat p{margin:0; font-size:.76rem; color:var(--ink-800); line-height:1.5}
.mock__wa{display:block; font-size:.64rem; font-weight:700; color:#128C4B; margin-bottom:2px}
.mock__chat--q{background:#fff; border:1px solid var(--line); margin-inline-start:auto; border-radius:12px 12px 3px 12px}
html[dir="rtl"] .mock__chat--q{border-radius:12px 12px 12px 3px}

.mock--law{background:linear-gradient(180deg,#F4F3EF,#fff 60%)}
.mock--law .mock__pill{background:#1C2B45}
.mock--law .mock__h{font-family:Georgia,"Times New Roman",serif; font-weight:600}
html[lang="ar"] .mock--law .mock__h{font-family:"Tajawal",sans-serif}
.mock__areas{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px}
.mock__areas > span{background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 9px; font-size:.73rem; color:var(--ink-700); font-weight:500}
.mock__doc{display:flex; align-items:center; gap:8px; background:#fff; border:1px dashed #B9C3D6; border-radius:10px; padding:9px 10px; font-size:.72rem; color:var(--ink-500)}
.mock__doc svg{width:18px; height:18px; flex:none; fill:none; stroke:#1C2B45; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

.mock--immo{background:linear-gradient(180deg,#F3F5FC,#fff 60%)}
.mock__listings{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px}
.mock__home{
  height:98px; border-radius:10px; position:relative; overflow:hidden; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end; padding:8px;
}
.mock__home::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(6,10,20,.72))}
.mock__home > *{position:relative}
.mock__home span{font-size:.66rem; opacity:.9}
.mock__home b{font-family:var(--font-mono); font-size:.7rem; direction:ltr; unicode-bidi:isolate}
.mock__home--a{background:linear-gradient(135deg,#9FB7E8,#4F6FB8 60%,#2B3F77)}
.mock__home--b{background:linear-gradient(135deg,#8ED9C9,#2E9C8A 60%,#1D5F5A)}
.mock--immo .mock__chat{background:#EEF2FF}
.mock--immo .mock__wa{color:var(--one)}

/* ---------------------------------------------------------- guarantees */
.guarantees{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px}
.g{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 24px 22px}
.g__n{
  display:block; font-family:var(--font-mono); font-size:2rem; font-weight:600; line-height:1; margin-bottom:12px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.g:nth-child(even) .g__n{background:linear-gradient(135deg,var(--zero),#00A9DE); -webkit-background-clip:text; background-clip:text}
.g h3{font-size:1.08rem; margin-bottom:.4em}
.g p{color:var(--ink-500); font-size:.93rem; margin:0}

/* ---------------------------------------------------------- contact */
.btn--wa{background:#25D366; color:#fff; margin-top:8px; box-shadow:0 10px 24px -12px rgba(37,211,102,.8)}
.btn--wa:hover{transform:translateY(-2px); background:#1FBE5B}
.btn--wa svg{width:20px; height:20px; fill:#fff}
.cat .contact__aside{top:96px}

/* footer: the catalog carries only the base row */
.cat .footer{padding-top:8px}

/* ---------------------------------------------------------- responsive */
@media (max-width:1100px){
  .demos{grid-template-columns:1fr 1fr}
  .demos .demo:last-child{grid-column:1 / -1; max-width:560px; justify-self:center; width:100%}
}
@media (max-width:980px){
  .cat .nav__actions > .btn--solid{display:none}
}
@media (max-width:820px){
  .ba__head{display:none}
  .ba__row{grid-template-columns:1fr; border-top:1px solid var(--line)}
  .ba__row > span{padding:12px 18px}
  .ba__topic{background:var(--bg-soft); padding-block:10px !important}
  .ba__before::before{content:"0 · "; font-family:var(--font-mono); color:var(--ink-300)}
  .ba__after::before{content:"1 · "; font-family:var(--font-mono); color:var(--one)}
}
@media (max-width:700px){
  .demos{grid-template-columns:1fr}
  .demos .demo:last-child{max-width:none}
  .included{flex-direction:column; align-items:flex-start}
}

/* ---------------------------------------------------------- PDF download link */
.pdf-dl{margin:22px 0 0; text-align:center}
.pdf-dl a{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem;
  color:var(--ink-700); border-bottom:1px dashed var(--ink-200); padding-bottom:2px;
}
.pdf-dl a:hover{color:var(--one); border-bottom-color:var(--one)}
.pdf-dl svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pdf-dl--aside{text-align:start; margin-top:18px}
.print-only{display:none}

/* =========================================================================
   PRINT / PDF — A4. Used by scripts/catalog-pdf.py and by anyone who presses
   Ctrl+P. Must come last: it overrides the responsive rules above, because an
   A4 page is ~700 CSS px wide and would otherwise get the MOBILE layout
   (single-column cards, stacked before/after table).
   ========================================================================= */
@media print{
  @page{size:A4; margin:11mm 11mm 13mm}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  html, body{background:#fff !important}
  /* Chromium drops any element with backdrop-filter from a printed page
     entirely - it took the cover's eyebrow and sector chips with it. */
  *{-webkit-backdrop-filter:none !important; backdrop-filter:none !important}
  /* Gradient-clipped text prints transparent: "trouvé" vanished from the
     cover title. Solid brand blue on paper instead. */
  .one{background:none !important; -webkit-text-fill-color:var(--one) !important; color:var(--one) !important}

  /* chrome that means nothing on paper */
  .nav, .hero__rain, .hero__glow, .scan, .to-top, .skip-link, .consent, .wa-fab,
  .hero__cta, .pdf-dl, #catForm, #waLink{display:none !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .print-only{display:block !important}

  .wrap{max-width:none; padding-inline:0}

  /* Density comes from CSS zoom, NOT from the PDF "scale" option: Chromium
     applies that scale from the left edge, and right-to-left content is
     anchored to the right, so the Arabic PDF came out shifted left and cut
     off. zoom works at layout level and is direction-neutral. The cover is
     not zoomed so it still fills the sheet (100vh = page height). */
  .cat main > section:not(.cat-hero), .cat .footer, .cat-hero .hero__inner{zoom:.86}

  .section{padding:8mm 0 !important; border:0 !important}
  .section--soft{background:#fff !important}
  .sec-head{margin-bottom:7mm}
  .card, .pack, .work__card, .g, .step, .browser, .ba, .codewin{box-shadow:none !important}
  .pack:hover, .work__card:hover, .g:hover{transform:none}

  /* one idea per page: each part of the pitch starts on a fresh sheet */
  #avant-apres, #services, #realisations, #demos, #methode, #contact{break-before:page}
  .ba__row, .pack, .work__card, .demo, .step, .g, .included, .print-contact{break-inside:avoid}
  h2, h3{break-after:avoid}

  /* cover */
  .cat-hero{
    /* 100vh = the printable page height, whatever print scale is in use;
       a fixed mm height shrank with the PDF's scale and stopped short */
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    border-radius:0; padding:0 !important; box-sizing:border-box;
    background:linear-gradient(165deg, var(--one-100) 0%, #fff 42%, #fff 62%, var(--pulse-100) 100%) !important;
  }
  .cat-hero .hero__inner{padding:0 14mm !important}
  .cat-title{font-size:42pt}
  .print-brand{
    display:flex !important; align-items:center; justify-content:center; gap:10px;
    margin:0 0 16mm; direction:ltr;
  }
  .print-brand svg{width:44px; height:44px}
  .print-brand span{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20pt; color:var(--ink-900)}
  .print-brand em{font-style:normal; font-weight:500; color:var(--ink-400); margin-left:.3em}
  .sectors{margin-top:10mm}
  .print-cover-url{margin:12mm 0 0; font-size:11pt; color:var(--ink-500)}
  .print-cover-url a{color:var(--one); font-weight:700; direction:ltr; unicode-bidi:isolate}

  /* keep the desktop grids */
  .ba__head{display:grid !important}
  .ba__head, .ba__row{grid-template-columns:120px 1fr 1fr !important}
  .ba__row{border-top:0}
  .ba__row + .ba__row{border-top:1px solid var(--line-soft)}
  .ba__row > span{padding:9px 14px !important; font-size:10pt}
  .ba__topic{background:transparent !important}
  .ba__before::before, .ba__after::before{content:none !important}

  .packs{grid-template-columns:1fr 1fr !important; gap:5mm}
  .pack{padding:16px 18px}
  .pack li{font-size:9.5pt}
  .included{margin-top:6mm}

  .work{grid-template-columns:repeat(3,1fr) !important; gap:5mm}
  /* shorter screenshots so all six cards fit under their heading on one
     sheet; at full height the grid jumped to the next page and left the
     heading alone on an empty one */
  .work__shot img{aspect-ratio:16/10 !important}
  .work__bar{padding:6px 10px}
  .work__body{padding:12px 14px 14px}
  .work__body h3{font-size:13pt}
  .work__body p{font-size:9pt; margin-bottom:8px}
  .work__built{margin-bottom:8px}
  .work__body .link-arrow{font-size:9pt}

  .demos{grid-template-columns:repeat(3,1fr) !important; gap:5mm}
  .demos .demo:last-child{grid-column:auto !important; max-width:none}
  .browser__screen{height:300px}

  .steps{grid-template-columns:repeat(4,1fr) !important; gap:4mm}
  .step{padding:16px 14px}
  .step p{font-size:9pt}
  #garanties{padding-top:4mm !important}
  .guarantees{grid-template-columns:repeat(3,1fr) !important; gap:4mm}
  .g{padding:16px 16px 14px}
  .g p{font-size:9pt}

  /* contact page: the QR replaces the form */
  .contact{display:block}
  .contact__aside{position:static; max-width:none}
  .print-contact{
    display:flex !important; align-items:center; gap:10mm; margin-top:10mm;
    border:1.5px solid var(--one-100); border-radius:18px; padding:9mm 10mm; background:var(--bg-tint) !important;
  }
  .print-qr{width:42mm; height:42mm; flex:none; background:#fff; border-radius:10px; padding:3mm}
  .print-contact__title{font-family:var(--font-display); font-weight:700; font-size:16pt; color:var(--ink-900); margin:0 0 3mm}
  html[lang="ar"] .print-contact__title{font-family:"Tajawal",sans-serif}
  .print-contact__text{font-size:10.5pt; color:var(--ink-500); margin:0 0 4mm}
  .print-contact__url{margin:0; font-size:12pt}
  .print-contact__url a{color:var(--one); font-weight:700; direction:ltr; unicode-bidi:isolate}
  .print-qr-link{flex:none; line-height:0}

  /* base styles.css hides the footer in print; the catalog wants its sign-off */
  .cat .footer{display:block !important; background:#fff !important; color:var(--ink-400); padding:6mm 0 0}
  .cat .footer .footer__legal{display:none}
  .cat .footer p{font-size:9pt}
  a{text-decoration:none}
}