/* Atba Immobilier: shared styles (tokens, header extras, cards, forms, footer) and the homepage sections.
   Colours, fonts, buttons and the container width are Blocksy Customizer settings; the tokens below read them,
   so a change in Appearance > Customize reaches these templates too. */

:root {
  --paper: var(--theme-palette-color-7);
  --surface: var(--theme-palette-color-8);
  --ink: var(--theme-palette-color-3);
  --line: var(--theme-palette-color-5);
  --cobalt: var(--theme-palette-color-1);
  --cobalt-dark: var(--theme-palette-color-2);
  --muted: #5D6168; /* secondary text, AA on paper and white */
  --photo-bg: #dfe3e6;
  --error: #B3261E;

  --font: var(--theme-font-family);
  --gutter: 4vw; /* Blocksy's edge spacing (Customizer > General > Layout) */
  --header-h: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { -webkit-font-smoothing: antialiased; }
.site-main :where(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; }
.site-main :where(ul, ol) { padding: 0; list-style: none; }
.site-main img { display: block; max-width: 100%; height: auto; }
.site-main :where(a) { color: inherit; }
.site-main :where(a:hover) { color: var(--cobalt); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.site-main [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The same container as Blocksy's header and footer */
.wrap { width: var(--theme-container-width); max-width: var(--theme-normal-container-max-width); margin-inline: auto; }

/* Shared type */
.eyebrow { font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.section-title { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
.lede { font-size: 1.1875rem; color: var(--muted); max-width: 42ch; }
.price { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-spoken { display: block; font-size: .9375rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.more { font-size: .9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; white-space: nowrap; }
.more:hover { color: var(--cobalt); }

/* Word-split headings (filled by site.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }

/* Buttons: Blocksy's button settings (square, cobalt); .btn-line is the outlined variant */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--theme-button-min-height, 48px); padding: 0 26px;
  background: var(--theme-button-background-initial-color); color: var(--theme-button-text-initial-color);
  border: 0; border-radius: 0; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s var(--ease), transform .15s var(--ease);
}
.btn:hover { background: var(--theme-button-background-hover-color); color: var(--theme-button-text-hover-color); }
.btn:active { transform: translateY(1px); }
.btn-line, .btn-line:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; }
.btn-line:hover { color: var(--cobalt); }
.icon { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* Header (Blocksy builder): the arch before the site title, the language / WhatsApp / phone group */
.site-branding .site-title-container { display: flex; align-items: baseline; gap: 8px; }
.site-branding .site-title-container::before {
  content: ""; width: 15px; height: 20px; align-self: center; transform: translateY(-1px); background: var(--cobalt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M0 26V10a10 10 0 0 1 20 0v16z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M0 26V10a10 10 0 0 1 20 0v16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-branding .site-description { margin: 0; }
#header { border-bottom: 1px solid transparent; transition: border-color .3s; }
.is-scrolled #header { border-bottom-color: var(--line); }
.nav-extra { display: flex; align-items: center; gap: 24px; }
.nav-extra a { text-decoration: none; color: var(--ink); }
.nav-extra a:hover { color: var(--cobalt); }
.nav-extra .wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.nav-extra .phone { font-variant-numeric: tabular-nums; }
#header .nav-extra { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
#offcanvas .nav-extra { flex-wrap: wrap; gap: 20px; padding-top: 20px; font-size: 1.0625rem; }
[lang="ar"] { font-family: "Readex Pro", var(--font); }
[lang="fr"] { font-family: var(--font); }

/* WhatsApp demo dialog */
.wa-dialog { width: min(92vw, 460px); padding: 32px; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); }
.wa-dialog::backdrop { background: rgba(20, 22, 26, .55); }
.wa-dialog h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.025em; margin: 0 0 12px; }
.wa-dialog p { margin: 0; }
.wa-dialog blockquote { margin: 16px 0; padding: 14px 16px; background: var(--paper); border: 0; border-inline-start: 2px solid var(--cobalt); font-size: 1rem; font-style: normal; }
.wa-note { font-size: .9375rem; color: var(--muted); margin-bottom: 24px !important; }

/* Fields: label above, square, AA contrast */
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: .875rem; font-weight: 500; margin: 0; }
.site-main .field :is(select, input, textarea) {
  width: 100%; height: 48px; padding: 0 14px; background: var(--surface); border: 1px solid #8C9097; border-radius: 0;
  font: inherit; color: var(--ink); appearance: none;
}
.site-main .field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.site-main .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314161A' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 38px; }
.field input::placeholder { color: #6B6F76; }
.site-main .field :is(select, input, textarea):focus { border-color: var(--cobalt); outline: 2px solid var(--cobalt); outline-offset: -1px; }
.site-main .field [aria-invalid="true"] { border-color: var(--error); }
.error { font-size: .875rem; color: var(--error); }
.optional { font-weight: 400; color: var(--muted); }
.form-note { flex-basis: 100%; font-size: .9375rem; color: var(--muted); }
.form-note:empty { display: none; }

/* Breadcrumb */
.crumbs { padding-top: 20px; font-size: .875rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--ink); }

/* Hero: photo bleeds to the start edge over 7/12 (left in French, right in Arabic), text column at the end.
   Height leaves room for the search box (--search-h) on the first screen. */
:root { --search-h: 224px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* min-height, not height: on short screens the text wins and the search slips just below */
  min-height: clamp(400px, calc(100dvh - var(--header-h) - var(--search-h)), 980px);
}
.hero-media { position: relative; overflow: hidden; background: var(--photo-bg); }
.site-main .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-body {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding-block: clamp(24px, 3vw, 40px);
  /* End padding lines the text up with the container edge. Percentages here are of this 5/12 column,
     so the page width is 240%: max(4% of the page, half of what the page has beyond the container). */
  padding-inline: clamp(32px, 4.5vw, 72px) max(9.6%, calc(120% - var(--theme-normal-container-max-width) / 2));
}
.hero-head .eyebrow { margin-bottom: 14px; }
.hero-title { font-size: clamp(3rem, min(6.4vw, 10.5vh), 7rem); font-weight: 500; letter-spacing: -.05em; line-height: .92; margin-inline-start: -.04em; }
.hero-aside { display: grid; gap: 18px; justify-items: start; }
.hero-lede { color: var(--muted); max-width: 34ch; font-size: 1.125rem; }

/* Search */
.search { position: relative; z-index: 2; padding-top: 16px; }
.search-box { background: var(--surface); border: 1px solid var(--line); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] {
  position: relative; background: none; border: 0; border-radius: 0; padding: 16px 24px; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; min-height: 0;
}
.tabs [role="tab"]::after { content: ""; position: absolute; inset-inline: 24px; bottom: -1px; height: 2px; background: var(--cobalt); transform: scaleX(0); transition: transform .35s var(--ease); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tabs [role="tab"]:hover { color: var(--ink); background: none; }
.search-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 20px 24px 24px; }
.search-form .field { flex: 1 1 180px; }
.search-form .field-small { flex: 0 1 120px; }
.btn-search { flex: 0 0 auto; min-width: 160px; }

/* Sections */
.section { padding-block: clamp(72px, 10vw, 136px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }

/* Cards: name, place, price. Nothing else. */
.card a { display: block; text-decoration: none; color: var(--ink); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--photo-bg); margin-bottom: 16px; }
.site-main .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.card-media .alt { opacity: 0; }
.card a:hover .card-media .alt, .card a:focus-visible .card-media .alt { opacity: 1; }
.card a:hover .card-media img { transform: scale(1.03); }
.card-name { font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.card a:hover .card-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.card-place { color: var(--muted); margin-top: 2px !important; }
.card-price { margin-top: 6px !important; font-weight: 500; font-variant-numeric: tabular-nums; }
.card-price span, .ete-price span { color: var(--muted); font-weight: 400; }

/* Featured: 7 / 4, the small one drops lower */
.featured-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.card-lg .card-name { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.card-sm { margin-top: clamp(80px, 16vw, 240px); }

/* Latest: four across, snap row on phones */
.latest { padding-top: 0; }
.latest-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: var(--theme-container-width); max-width: var(--theme-normal-container-max-width); margin-inline: auto; }

/* Par quartier: 4 columns x 2 rows, Hydra and Oran tall */
.areas { padding-top: 0; }
.areas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(220px, 21vw, 320px)); gap: 16px; }
.area { position: relative; display: block; overflow: hidden; background: var(--photo-bg); text-decoration: none; color: var(--ink); }
.site-main .area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.area:hover img { transform: scale(1.04); }
.area-label { position: absolute; inset-inline-start: 0; bottom: 0; display: grid; padding-block: 12px; padding-inline: 0 18px; background: var(--paper); min-width: 55%; }
.area-name { font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.area-count { font-size: .9375rem; color: var(--muted); }
.area:hover .area-name { color: var(--cobalt); }
.area-hydra { grid-column: 1; grid-row: 1 / 3; }
.area-elbiar { grid-column: 2; grid-row: 1; }
.area-cheraga { grid-column: 3; grid-row: 1; }
.area-oran { grid-column: 4; grid-row: 1 / 3; }
.area-centre { grid-column: 2; grid-row: 2; }
.area-cote { grid-column: 3; grid-row: 2; }

/* Biens vérifiés: sticky statement, three promises */
.verified { background: var(--surface); }
.verified-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 8vw, 128px); align-items: start; }
.verified-head { position: sticky; top: calc(var(--header-h) + 40px); }
.verified-head .lede { margin-top: 20px; }
.verified-list li { padding: 28px 0 36px; border-top: 1px solid var(--line); }
.verified-list li:last-child { padding-bottom: 0; }
.verified-list h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 10px; }
.verified-list p { color: var(--muted); max-width: 46ch; }

/* Atba Été */
.ete { position: relative; display: grid; }
.ete-media, .ete-wrap { grid-area: 1 / 1; }
.ete-media { overflow: hidden; min-height: clamp(640px, 88vh, 920px); background: var(--photo-bg); }
.site-main .ete-media img { width: 100%; height: 116%; object-fit: cover; }
.ete-wrap { position: relative; align-self: end; padding-bottom: clamp(32px, 5vw, 72px); }
.ete-panel { position: relative; background: var(--paper); width: min(100%, 620px); padding: clamp(28px, 4vw, 48px); }
.ete-panel .eyebrow { margin-bottom: 10px; }
.ete-list { margin: 28px 0 24px !important; border-top: 1px solid var(--line); }
.ete-list a { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--line); color: var(--ink); }
.ete-name { font-weight: 500; font-size: 1.125rem; }
.ete-place { grid-row: 2; color: var(--muted); font-size: .9375rem; }
.ete-price { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.ete-list a:hover .ete-name { color: var(--cobalt); }

/* Owners */
.owners-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7vw, 112px); align-items: center; }
.owners-media { overflow: hidden; aspect-ratio: 11 / 13; background: var(--photo-bg); }
.site-main .owners-media img { width: 100%; height: 100%; object-fit: cover; }
.owners-body .lede { margin: 18px 0 32px; }
.owners-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.owners-form .field:first-child { grid-column: 1 / -1; }
.owners-form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.owners-form .form-note { grid-column: 1 / -1; }
.owners-rent { margin-top: 28px !important; color: var(--muted); }
.owners-rent a { color: var(--ink); text-underline-offset: .2em; }

/* Recent: compact, quiet */
.recent { padding-top: 0; }
.recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mini { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.site-main .mini img { width: 112px; height: 84px; object-fit: cover; filter: saturate(.6); }
.status { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.mini-name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; }
.mini-name a { text-decoration: none; }
.mini .card-place { font-size: .9375rem; }

/* Journal */
.journal { background: var(--surface); }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.post { display: grid; align-content: start; gap: 10px; padding-top: 20px; border-top: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.post-topic { font-size: .875rem; color: var(--muted); }
.post-title { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.post-sum { color: var(--muted); }
.post:hover .post-title { color: var(--cobalt); }

/* Footer (Blocksy builder: widget areas and copyright row) */
.ct-footer { border-top: 1px solid var(--line); }
.footer-brand p { margin: 16px 0 0; color: var(--muted); }
.footer-brand a:not(.wordmark) { text-decoration: none; color: var(--muted); }
.footer-brand p a { display: inline-block; padding-block: 6px; } /* 24px+ tap targets for the stacked contacts */
.footer-brand a:not(.wordmark):hover { color: var(--cobalt); }
.wordmark { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); }
.wordmark-mark { width: 15px; height: 20px; fill: var(--cobalt); align-self: center; transform: translateY(-1px); }
.wordmark-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -.04em; }
.wordmark-sub { font-size: .875rem; color: var(--muted); }
.social { display: flex; gap: 8px; margin: 20px 0 0 !important; padding: 0 !important; list-style: none; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--ink) !important; }
.social a:hover { color: var(--cobalt) !important; border-color: var(--cobalt); }
.ct-footer .widget-title { font-size: .875rem; font-weight: 400; color: var(--muted); margin-bottom: 12px; }
.ct-footer .widget_nav_menu li + li { margin-top: 8px; }
.ct-footer .widget_nav_menu a { text-decoration: none; }
.ct-footer-copyright a { text-decoration: underline; text-underline-offset: .2em; }

/* Arabic (RTL). Layout flips by itself (grid, flex, logical properties); these fix type and the few physical bits. */
[dir="rtl"] body, [dir="rtl"] :is(h1, h2, h3, p, span, a, button, label, dt, dd) { letter-spacing: 0; }
[dir="rtl"] body { --theme-font-family: "Readex Pro", "Schibsted Grotesk", system-ui, sans-serif; line-height: 1.7; }
[dir="rtl"] .hero-title { line-height: 1.2; margin-inline-start: 0; font-weight: 600; }
[dir="rtl"] .section-title { line-height: 1.3; font-weight: 600; }
[dir="rtl"] :is(.card-name, .area-name, .post-title, .verified-list h3, .mini-name) { line-height: 1.45; }
[dir="rtl"] .wordmark-name { font-weight: 600; }
[dir="rtl"] .eyebrow { font-size: .875rem; }
/* Arabic dots below the baseline (ي ب ج) need more room inside the word mask */
[dir="rtl"] .w { padding-bottom: .5em; margin-bottom: -.5em; padding-top: .15em; margin-top: -.15em; }
[dir="rtl"] .site-main .field select { background-position: left 14px center; }
[dir="rtl"] .more { text-underline-offset: .45em; }
[dir="rtl"] input[type="number"], [dir="rtl"] .phone { unicode-bidi: plaintext; }

/* Tablet */
@media (max-width: 1100px) {
  #header .nav-extra .phone { display: none; }
  .latest-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .recent-grid { grid-template-columns: 1fr 1fr; }

  /* More air between the hero's button and the search box */
  .search { padding-top: 48px; }

  /* Par quartier: equal tiles, label under the photo so nothing covers it */
  .areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 32px 16px; }
  .areas-grid .area { grid-column: auto; grid-row: auto; overflow: visible; background: none; }
  .site-main .area img { position: static; height: auto; aspect-ratio: 4 / 3; background: var(--photo-bg); }
  .area:hover img { transform: none; }
  .area-label { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 0 0; background: none; min-width: 0; }
}

/* Phones: everything collapses to one column */
@media (max-width: 860px) {
  :root { --header-h: 60px; }

  .hero { display: block; min-height: 0; }
  .hero-title { font-size: clamp(3rem, 13vw, 4.5rem); }
  .hero-media { height: min(58dvh, 520px); }
  .hero-body { gap: 18px; padding: 20px var(--gutter) 0; }
  .hero-head .eyebrow { margin-bottom: 6px; }

  .tabs [role="tab"] { flex: 1; padding: 14px 8px; }
  .tabs [role="tab"]::after { inset-inline: 8px; }
  .search-form { padding: 16px; }
  .search-form .field, .search-form .field-small { flex: 1 1 100%; }
  .btn-search { width: 100%; }

  .section-head { flex-wrap: wrap; }
  .featured-grid { grid-template-columns: 1fr; gap: 48px; }
  .card-sm { margin-top: 0; }

  .latest-track {
    /* overflow-y must be hidden explicitly: overflow-x:auto alone makes the row
       vertically scrollable too, which traps the page's vertical swipe */
    display: flex; gap: 16px; width: 100%; max-width: none; padding-inline: var(--gutter);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); touch-action: pan-x pan-y;
    padding-bottom: 8px; scrollbar-width: none;
  }
  .latest-track::-webkit-scrollbar { display: none; }
  .latest-track .card { flex: 0 0 78%; scroll-snap-align: start; }

  .ete { display: block; }
  .ete-media { min-height: 0; height: 62vh; }
  .ete-wrap { margin-top: -96px; padding: 0; width: 100%; }
  .ete-panel { width: 100%; padding: 28px var(--gutter); }

  .areas-grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .area-label { display: grid; gap: 0; }
  .area-name { font-size: 1.0625rem; }

  .verified-grid { grid-template-columns: 1fr; }
  .verified-head { position: static; }

  .owners-grid { grid-template-columns: 1fr; }
  .owners-media { aspect-ratio: 4 / 3; }
  .owners-form { grid-template-columns: 1fr; }

  .recent-grid, .journal-grid { grid-template-columns: 1fr; }
  .journal-grid { gap: 32px; }
}

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