/* WOURI ESTATE — parcours en étapes (Pass Diaspora, propriétaires) : frise, formules, formulaires à étapes, fuseaux.
   Direction artistique « Cadastre & calcaire » : calcaire, encre, olive, rouille. Gloock + Schibsted Grotesk. */
@layer components {
  /* ---------- Accordéons ---------- */
  .faq { display: grid; gap: 0; border-block-start: 1px solid var(--bordure-forte); }
  .faq details { border-block-end: 1px solid var(--bordure-forte); }
  .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-s) 0; font-weight: 600; font-size: var(--step-0); min-block-size: 3.25rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; inline-size: 1.5rem; block-size: 1.5rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%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 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--dur-3) var(--ease-out); color: var(--rouille); }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq summary:hover { color: var(--rouille-fonce); }
  .faq .faq__a { padding-block-end: var(--space-s); max-inline-size: 70ch; color: var(--encre-2); }
}
@layer pages {
  .timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-m); counter-reset: step; position: relative; }
  .timeline > li { position: relative; display: grid; gap: .4rem; padding-inline-start: 3.5rem; padding-block-end: var(--space-xs); }
  .timeline > li::before { content: counter(step); counter-increment: step; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; background: var(--encre); color: var(--calcaire); font-family: var(--font-display); font-size: var(--step-1); }
  .timeline > li::after { content: ""; position: absolute; inset-inline-start: 1.25rem; inset-block-start: 2.75rem; inset-block-end: -.5rem; border-inline-start: 1px dashed var(--bordure-forte); }
  .timeline > li:last-child::after { display: none; }
  .timeline h3 { font-size: var(--step-2); }
  @media (min-width: 48em) {
    .timeline > li { padding-inline-start: 4.5rem; }
    .timeline > li::before { inline-size: 3rem; block-size: 3rem; }
    .timeline > li::after { inset-inline-start: 1.5rem; inset-block-start: 3.25rem; }
  }
  .formules { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
  .formule { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-m); background: var(--chaux); border: 1px solid var(--bordure); border-radius: var(--radius); }
  .formule--star { border-color: var(--encre); box-shadow: inset 0 4px 0 var(--rouille); }
  .formule h3 { font-size: var(--step-2); }
  .formule .px { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; color: var(--rouille-fonce); margin: 0; }
  .formule .px small { display: block; font-family: var(--font-text); font-size: var(--step--1); color: var(--encre-2); font-weight: 500; }
  .formule ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .3rem; font-size: var(--step--1); }
  /* Formulaires par étapes */
  .stepper { display: grid; gap: var(--space-m); }
  .stepper__bar { display: grid; gap: .4rem; }
  .stepper__bar p { margin: 0; font-weight: 700; font-size: var(--step--1); color: var(--encre-2); }
  .stepper__track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
  .stepper__track i { block-size: 6px; background: var(--bordure); }
  .stepper__track i.is-done { background: var(--olive); }
  .stepper__track i.is-now { background: var(--rouille); }
  .step { display: grid; gap: var(--space-s); }
  .step > legend { font-family: var(--font-display); font-size: var(--step-2); margin-block-end: var(--space-xs); padding: 0; }
  .step > legend:focus { outline: none; }
  .step[hidden] { display: none; }
  .stepper__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; margin-block-start: var(--space-s); }
  @media (min-width: 64em) {
    .split--gest > :first-child { grid-column: 1 / span 7; }
    .split--gest > :last-child { grid-column: 8 / span 5; }
  }
  /* gestion locative : rapport mensuel (maquette) */
  .report { margin: 0; display: grid; gap: .6rem; }
  .report__cap { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
  .report__sheet { background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); padding: var(--space-m); box-shadow: var(--shadow-1); display: grid; gap: var(--space-xs); position: relative; }
  .report__sheet::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--bordure); pointer-events: none; }
  .report__sheet h3 { font-size: var(--step-1); }
  .report__rows { display: grid; margin: 0; }
  .report__rows > div { display: flex; justify-content: space-between; gap: var(--space-s); padding: .55rem 0; border-block-start: 1px dashed var(--bordure); font-size: var(--step--1); }
  .report__rows dt { color: var(--encre-2); }
  .report__rows dd { margin: 0; font-weight: 700; white-space: nowrap; }
  .report__rows .is-total { border-block-start: 2px solid var(--encre); font-size: var(--step-0); }
  .report__ok { margin: 0; display: flex; gap: .5rem; align-items: center; color: var(--olive-fonce); font-weight: 600; font-size: var(--step--1); }
}
/* Pass Diaspora : en-tête sombre, lignes de vol, arnaques, frise (déplacé depuis simulateurs.css) */
@layer pages {
  .flights { position: relative; padding: var(--space-s); background: var(--encre); color: var(--calcaire); border-radius: var(--radius); }
  .flights__cities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
  .flights__city { display: grid; gap: 0; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--calcaire) 28%, transparent); border-radius: var(--radius); font-size: .8125rem; }
  .flights__city b { font-size: var(--step-1); font-weight: 600; line-height: 1.2; }
  .flights__city span { opacity: .85; }
  .flights__dest { margin-block-start: var(--space-s); padding: .75rem 1rem; border: 1.5px solid var(--rouille-sur-sombre); border-radius: var(--radius); display: grid; gap: .1rem; background: color-mix(in srgb, var(--rouille-sur-sombre) 10%, transparent); }
  .flights__dest b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); }
  .flights svg { display: none; }
  .flights__link { display: block; inline-size: 0; block-size: 2rem; margin-inline: auto; border-inline-start: 2px dashed var(--rouille-sur-sombre); margin-block-start: var(--space-xs); }
  @media (min-width: 48em) {
    .flights { display: grid; grid-template-columns: 1fr 9rem 1fr; align-items: center; padding: var(--space-m); }
    .flights__cities { grid-template-columns: 1fr; }
    .flights__link { display: none; }
    .flights svg { display: block; inline-size: 100%; block-size: 100%; min-block-size: 18rem; color: var(--rouille-sur-sombre); }
    .flights svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 5; }
    .flights__dest { margin: 0; }
  }
  @media (min-width: 48em) and (prefers-reduced-motion: no-preference) {
    .flights svg path { stroke-dasharray: 5 5; animation: vol 1.2s var(--ease-out) both; }
  }
  .scams { display: grid; gap: 0; border: 1px solid var(--bordure-forte); border-radius: var(--radius); overflow: hidden; background: var(--chaux); }
  .scam-row { display: grid; gap: var(--space-xs) var(--space-m); padding: var(--space-s) var(--space-m); border-block-start: 1px solid var(--bordure); }
  .scam-row:first-child { border-block-start: 0; }
  .scam-row h3 { font-family: var(--font-text); font-size: var(--step-0); font-weight: 700; letter-spacing: 0; color: var(--erreur); }
  .scam-row p { margin: 0; font-size: var(--step--1); }
  .scam-row .ctrl { color: var(--olive-fonce); font-weight: 600; }
  @media (min-width: 48em) {
    .scam-row { grid-template-columns: 1fr 1.2fr; }
    .scam-row h3 { grid-column: 1; }
  }
  .scam-head { display: none; }
  @media (min-width: 48em) {
    .scam-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-m); padding: .6rem var(--space-m); background: var(--calcaire-2); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-2); }
  }
  .timeline dl { display: grid; gap: .5rem var(--space-m); margin: .25rem 0 0; }
  .timeline dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--olive); }
  .timeline dd { margin: 0; font-size: var(--step--1); max-inline-size: 60ch; }
  .timeline .delai { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: var(--step--1); color: var(--rouille-fonce); }
  @media (min-width: 48em) {
    .timeline dl { grid-template-columns: 1fr 1fr; }
  }
  .section--dark .numlist li { border-color: color-mix(in srgb, var(--calcaire) 30%, transparent); }
  .section--dark .numlist li::before { color: var(--rouille-sur-sombre); }
  .recap { display: grid; gap: var(--space-xs); }
  /* en-tête de page sombre (Pass Diaspora) */
  .page-hero--dark { background: var(--encre); color: var(--calcaire); padding-block-end: var(--space-2xl); }
  .page-hero--dark h1 { color: #fff; }
  .page-hero--dark .crumbs, .page-hero--dark .crumbs a, .page-hero--dark .crumbs li + li::before { color: color-mix(in srgb, var(--calcaire) 75%, transparent); }
  .page-hero--dark .crumbs [aria-current] { color: var(--calcaire); }
  .page-hero--dark .proofs3 .icon { color: var(--olive-sur-sombre); }
  .page-hero--dark :focus-visible { outline-color: var(--rouille-sur-sombre); }
  .page-hero--dark .flights { border: 1px dashed color-mix(in srgb, var(--calcaire) 40%, transparent); background: color-mix(in srgb, var(--calcaire) 5%, var(--encre)); }
  .flights__dest > span { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rouille-sur-sombre); }
  .flights__dest .statut { margin: 0; color: var(--calcaire); font-size: var(--step--1); }
  .flights__city span { font-size: .8125rem; }
  .flights__arcs { display: none; }
  @media (min-width: 48em) {
    .flights__arcs { display: block; position: relative; align-self: stretch; min-block-size: 18rem; }
    .flights__arcs svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; }
  }
  @media (min-width: 64em) {
    .flights { grid-template-columns: minmax(12rem, 18rem) minmax(8rem, 1fr) minmax(15rem, 20rem); }
    .flights__dest { justify-self: end; inline-size: 100%; }
  }
  @media (min-width: 48em) and (max-width: 63.99em) {
    .flights { grid-template-columns: minmax(10rem, 1fr) 6rem minmax(12rem, 1fr); }
  }
}
/* Pass Diaspora : à partir de 80em, les horloges et les lignes de vol occupent la colonne droite du héros */
@layer pages {
  @media (max-width: 79.99em) {
    .page-hero__grid--pass > .flights { grid-column: 1 / -1; }
  }
  @media (min-width: 80em) {
    .page-hero__grid--pass { align-items: center; }
    .page-hero__grid--pass > :first-child { grid-column: 1 / span 7; }
    .page-hero__grid--pass > .flights { grid-column: 8 / span 5; grid-template-columns: minmax(9rem, 10.5rem) minmax(2.5rem, 1fr) minmax(10rem, 12rem); padding: var(--space-s); }
    .page-hero__grid--pass .flights__arcs { min-block-size: 15rem; }
    .page-hero__grid--pass .flights__city { padding: .45rem .65rem; }
    .page-hero__grid--pass .flights__dest { padding: .7rem .8rem; }
    .page-hero__grid--pass .flights__dest > span { letter-spacing: .06em; }
  }
}