/* WOURI ESTATE — accueil (FR, EN) et page 404 : héros, carte de recherche, sections d'accueil.
   Direction artistique « Cadastre & calcaire » : calcaire, encre, olive, rouille. Gloock + Schibsted Grotesk. */
@layer layout {
  .stack > * + * { margin-block-start: var(--stack, var(--space-s)); }
}
@layer components {
  .cadre-bornage { position: relative; }
  .cadre-bornage > svg.cadre { position: absolute; inset: -10px; inline-size: calc(100% + 20px); block-size: calc(100% + 20px); overflow: visible; pointer-events: none; color: var(--encre-2); }
  .cadre-bornage .cadre rect.fil { fill: none; stroke: currentColor; stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
  .cadre-bornage .cadre .borne rect { fill: var(--rouille); }
  .cadre-bornage .cadre .borne text { font: 600 10px var(--font-text); fill: var(--encre-2); }
}
@layer pages {
  /* ---------- Héros de l'accueil ---------- */
  .hero { padding-block: var(--space-m) var(--space-xl); overflow: clip; }
  .hero__grid { display: grid; gap: var(--space-l); }
  .hero__media { order: -1; padding: 10px; }
  @media (min-width: 64em) {
    .hero { padding-block: var(--space-l) var(--space-2xl); }
    .hero__grid { grid-template-columns: repeat(12, 1fr); align-items: center; gap: var(--space-m-xl) var(--space-m); }
    .hero__text { grid-column: 1 / span 6; }
    .hero__media { grid-column: 7 / span 6; order: 0; }
  }
  .hero h1 { font-size: var(--step-6); line-height: 1.04; margin-block: var(--space-2xs) var(--space-s); }
  .hero h1 em { font-style: normal; color: var(--rouille); }
  .hero__lead { font-size: var(--step-0); color: var(--encre-2); max-inline-size: 56ch; margin-block-end: var(--space-m); }
  .hero__media figure { position: relative; margin: 0; }
  .hero__media picture, .hero__media img { display: block; inline-size: 100%; }
  .hero__media img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
  @media (min-width: 48em) {
    .hero__media img { aspect-ratio: 16 / 9; }
  }
  @media (min-width: 64em) {
    .hero__media img { aspect-ratio: 5 / 4; }
  }
  .hero__tag { position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 2; display: grid; gap: .25rem; max-inline-size: min(22rem, 92%); padding: .85rem 1rem; background: var(--chaux); color: var(--encre); text-decoration: none; border-radius: 0 var(--radius) 0 0; box-shadow: var(--shadow-1); }
  .hero__tag:hover { color: var(--encre); background: #fff; }
  .hero__tag strong { font-size: var(--step--1); line-height: 1.35; }
  .hero__tag .link-action { align-self: start; border: 0; font-size: var(--step--1); padding: 0; }
  .search-card { background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); padding: var(--space-s); box-shadow: var(--shadow-1); display: grid; gap: var(--space-xs); }
  .search-card .seg { justify-self: start; }
  .search-card__grid { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); align-items: end; }
  .search-card__go { min-block-size: 2.75rem; grid-column: 1 / -1; }
  @media (min-width: 40em) {
    .search-card__go { grid-column: auto; }
  }
  .search-card label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
  .shortcuts { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: var(--space-xs) 0 0; padding: 0; list-style: none; font-size: var(--step--1); align-items: center; }
  .shortcuts li:first-child { color: var(--encre-2); font-weight: 600; }
  .shortcuts a { display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: .1rem .7rem; border: 1px solid var(--bordure-forte); border-radius: 999px; color: var(--encre); text-decoration: none; font-weight: 600; background: transparent; }
  .shortcuts a:hover { background: var(--encre); color: var(--calcaire); }
  .micro-proofs { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; padding: 0; margin: var(--space-s) 0 0; font-size: var(--step--1); font-weight: 600; color: var(--encre-2); }
  .micro-proofs li { display: inline-flex; align-items: center; gap: .4rem; }
  .micro-proofs .icon { color: var(--olive); inline-size: 1.1rem; block-size: 1.1rem; }
  .proofs { background: var(--chaux); border-block: 1px solid var(--bordure); }
  .proofs ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .proofs li { display: flex; align-items: center; gap: .85rem; padding: var(--space-s) var(--space-xs); font-weight: 600; font-size: var(--step--1); line-height: 1.35; }
  .proofs .icon { inline-size: 1.75rem; block-size: 1.75rem; color: var(--olive); }
  @media (min-width: 64em) {
    .proofs li + li { border-inline-start: 1px solid var(--bordure); padding-inline-start: var(--space-s); }
  }
  /* ---------- Sections d'accueil ---------- */
  .more-row { display: flex; justify-content: flex-end; margin-block-start: var(--space-m); }
  .frise { list-style: none; padding: 0; margin: var(--space-l) 0; display: grid; gap: var(--space-s); counter-reset: etape; }
  .frise li { position: relative; padding-block-start: var(--space-s); border-block-start: 1px dashed color-mix(in srgb, var(--calcaire) 45%, transparent); }
  .frise li::before { content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 0; inline-size: 7px; block-size: 7px; background: var(--rouille-sur-sombre); }
  .frise .n { display: block; font-family: var(--font-display); font-size: var(--step-3); color: var(--rouille-sur-sombre); line-height: 1; margin-block-end: .3rem; }
  .frise strong { display: block; font-size: var(--step-0); }
  .frise span.d { font-size: var(--step--1); color: color-mix(in srgb, var(--calcaire) 78%, transparent); }
  @media (min-width: 40em) {
    .frise { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 64em) {
    .frise { grid-template-columns: repeat(6, 1fr); gap: var(--space-m); }
  }
  a.tile:hover { box-shadow: var(--shadow-1); border-color: var(--bordure-forte); color: var(--encre); translate: 0 -2px; }
  .tile .price { font-weight: 700; color: var(--rouille-fonce); font-size: var(--step--1); }
  .tile .icon--l { color: var(--olive); }
  .tile__parcel { inline-size: 100%; block-size: 5.5rem; color: var(--encre-2); margin-block-end: .35rem; }
  .tile__parcel .fill { fill: var(--calcaire-2); }
  .tile__parcel .liseré { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 5 3; opacity: .6; vector-effect: non-scaling-stroke; }
  .tile__parcel .borne { fill: var(--rouille); }
  .tile__parcel .vert { fill: var(--olive-clair); }
  .tile .go { position: absolute; inset-block-end: var(--space-s); inset-inline-end: var(--space-s); color: var(--rouille); transition: translate var(--dur-2) var(--ease-out); }
  a.tile:hover .go { translate: 3px 0; }
  .rules { display: grid; gap: var(--space-m); padding: var(--space-m); background: var(--chaux); border: 1px solid var(--bordure); border-inline-start: 6px solid var(--olive); border-radius: var(--radius); }
  @media (min-width: 64em) {
    .rules { grid-template-columns: 1.25fr 1fr; padding: var(--space-l); gap: var(--space-l); }
  }
  .rules ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); counter-reset: regle; }
  .rules li { counter-increment: regle; display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: baseline; font-weight: 600; font-size: var(--step-1); line-height: 1.3; }
  .rules li::before { content: "R" counter(regle); font-family: var(--font-display); color: var(--olive); font-size: var(--step-2); min-inline-size: 2.2ch; }
  .rules__verify { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-s); background: var(--olive-clair); border-radius: var(--radius); color: var(--olive-fonce); }
  .rules__verify p { margin: 0; font-weight: 600; font-size: var(--step--1); color: var(--olive-fonce); }
  .rules__verify form { display: flex; flex-wrap: wrap; gap: .5rem; }
  .rules__verify input { flex: 1 1 11rem; }
  .cta-final .eyebrow { color: var(--olive-sur-sombre); }
  .cta-final .eyebrow::before { background: var(--rouille-sur-sombre); }
  .e404 { padding-block: var(--space-2xl); display: grid; gap: var(--space-m); max-inline-size: 46rem; }
  .e404 .big { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 10rem); line-height: .9; color: var(--rouille); margin: 0; }
  /* en-tête avec filets de bornage */
  .hero__media .cadre { inset: 0; inline-size: 100%; block-size: 100%; }
  .hero__tag .cartouche { justify-self: start; }
  .cadre-bornage .cadre .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .cadre-bornage .cadre .draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: trace 900ms var(--ease-out) 250ms forwards; }
    .cadre-bornage .cadre .borne { opacity: 0; animation: borne-in 320ms var(--ease-out) forwards; animation-delay: calc(1000ms + var(--i, 0) * 60ms); }
  }
  .cadre-bornage .cadre .borne text { font-size: 10px; }
  /* mises en page des sections */
  .stack > * + * { margin-block-start: var(--space-s); }
  @media (min-width: 64em) {
    .split--map > :first-child { grid-column: 1 / span 7; }
    .split--map > :last-child { grid-column: 8 / span 5; align-self: center; }
    /* trois colonnes pour les sélections de six éléments */
    .results--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .carte--static { max-inline-size: 100%; }
  .carte--static .carte__stage { aspect-ratio: 10 / 7; }
  a.bulle:hover { color: var(--calcaire); }
  .e404__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
  .e404 .search-card { max-inline-size: 40rem; }
  .e404 .lead { font-size: var(--step-1); color: var(--encre-2); }
  .more-row .link-action { margin-inline-start: auto; }
}
/* héros mobile : le cartouche du bien passe sous la photo au lieu de la masquer */
@layer pages {
  @media (max-width: 47.99em) {
    .hero__tag { position: relative; max-inline-size: none; padding: .7rem .85rem; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .7rem; border-radius: 0 0 var(--radius-photo) var(--radius-photo); box-shadow: none; }
    .hero__tag .cartouche { grid-row: span 2; align-self: center; }
    .hero__media img { border-radius: var(--radius-photo) var(--radius-photo) 0 0; }
  }
}