@layer reset, tokens, base, layout, components, utilities, pages;
@layer pages {
  .section--projets { padding-block: 0 var(--space-section); }
  html:not(.js) .filtres-wrap, html:not(.js) .carte__outils, html:not(.js) [data-js="voir-carte"] { display: none; }
  .filtres-wrap { margin-block-end: 1.5rem; }
  .filtres { background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-l); }
  .filtres__sum { display: flex; align-items: center; gap: 0.6rem; min-block-size: 3.5rem; padding: 0.5rem 1.25rem; font: 700 1.05rem/1.2 var(--font-display); list-style: none; }
  .filtres__sum::-webkit-details-marker { display: none; }
  .filtres__sum .ico { inline-size: 1.35rem; block-size: 1.35rem; }
  .filtres__chev { margin-inline-start: auto; transition: transform var(--dur-hover); }
  .filtres__det[open] .filtres__chev { transform: rotate(180deg); }
  .filtres__det.is-fixed > .filtres__sum { display: none; }
  .filtres__corps { display: grid; gap: 1.25rem; padding: 0.25rem 1.25rem 1.25rem; }
  .filtres__det.is-fixed .filtres__corps { padding-block-start: 1.25rem; }
  .chips-prog { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip-prog { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding: 0.25rem 0.85rem 0.25rem 0.3rem; border: 2px solid var(--field-border); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: 650 0.93rem/1.1 var(--font-display); transition: background var(--dur-state), transform var(--dur-hover) var(--ease-out); }
  .chip-prog .jeton { inline-size: 2rem; block-size: 2rem; border: 0; }
  .chip-prog:hover { border-color: var(--text); transform: translateY(-1px); }
  .chip-prog__n { display: grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: 0.35rem; border-radius: var(--r-pill); background: var(--bg-alt); font: 700 0.8rem/1 var(--font-display); }
  .chip-prog[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .chip-prog[aria-pressed="true"] .chip-prog__n { background: var(--bg); color: var(--text); }
  .chip-prog[aria-pressed="true"] .jeton { box-shadow: 0 0 0 2px var(--bg); }
  .filtres__ligne { display: grid; gap: 1.25rem; align-items: end; }
  @media (min-width: 48em) { .filtres__ligne { grid-template-columns: 15rem 1fr auto; } }
  .filtres__reset { display: flex; align-items: end; }
  .projets-layout { display: grid; gap: 2rem; align-items: start; }
  .projets-layout > .filtres-wrap { margin: 0; }
  @media (min-width: 64em) {
      .projets-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "carte filtres" "carte liste"; column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 1.25rem; }
      .projets-layout > .filtres-wrap { grid-area: filtres; }
      .carte-col { grid-area: carte; position: sticky; inset-block-start: calc(var(--header-h) + 1rem); }
      .liste-col { grid-area: liste; }
      .filtres__ligne { grid-template-columns: minmax(11rem, 13.75rem) 1fr; gap: 1rem; }
      .projets-layout .filtres__corps { gap: 1rem; padding: 1rem 1.1rem; }
      .projets-layout .chips-prog { gap: 0.4rem; }
      .projets-layout .chip-prog { gap: 0.4rem; min-block-size: 2.5rem; padding-inline-end: 0.6rem; font-size: 0.86rem; }
      .projets-layout .chip-prog .jeton { inline-size: 1.75rem; block-size: 1.75rem; }
      .projets-layout .segments { gap: 0.35rem; }
      .projets-layout .segment span { min-block-size: 2.5rem; padding-inline: 0.75rem; font-size: 0.88rem; }
      .filtres__reset { grid-column: 1 / -1; }
      .filtres__reset:has(> [hidden]) { display: none; }
    }
  .carte { display: grid; gap: 0.85rem; }
  .carte__cadre { position: relative; aspect-ratio: var(--ratio); inline-size: 100%; max-inline-size: 34rem; margin-inline: auto; background: color-mix(in srgb, var(--p-eau) 9%, var(--bg)); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--hairline); }
  @media (min-width: 64em) { .carte__cadre { max-inline-size: min(100%, max(20rem, calc((100svh - var(--header-h) - 12rem) / 1.48))); } }
  .carte__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .region { fill: var(--bg-alt); stroke: var(--bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transition: fill var(--dur-hover); }
  .region--on { fill: var(--leaf-bg); }
  .region.is-dim { fill: color-mix(in srgb, var(--bg-alt) 60%, var(--bg)); }
  .carte__lbl { font: 650 calc(9.5px * var(--zs, 1))/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-2); paint-order: stroke; stroke: var(--leaf-bg); stroke-width: calc(3px * var(--zs, 1)); pointer-events: none; }
  .carte__ville circle { fill: var(--text); r: calc(2.6px * var(--zs, 1)); }
  .carte__ville text { font: 600 calc(9.5px * var(--zs, 1))/1 var(--font-display); fill: var(--text); paint-order: stroke; stroke: var(--bg-alt); stroke-width: calc(3px * var(--zs, 1)); }
  .carte__mer { font: italic 400 calc(10px * var(--zs, 1))/1 var(--font-text); fill: var(--water); }
  .carte__epingles, .carte__groupes { position: absolute; inset: 0; pointer-events: none; }
  .epingle { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: 2.75rem; block-size: 2.75rem; translate: -50% -50%; display: grid; place-items: center; pointer-events: auto; z-index: 2; text-decoration: none; color: var(--c-on); transition: scale var(--dur-hover) var(--ease-out); }
  .epingle[hidden] { display: none; }
  .epingle__disque { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--c); color: var(--c-on); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--text), 0 3px 8px rgb(0 0 0 / 0.25); }
  .epingle__disque .ico { inline-size: 1.1rem; block-size: 1.1rem; stroke-width: 2; }
  .epingle[data-statut="a-financer"] .epingle__disque { background: #fff; color: var(--c); border: 3px solid var(--c); }
  .epingle[data-prog="cartable"][data-statut="a-financer"] .epingle__disque { color: #8a5d00; }
  .epingle__statut { position: absolute; inset-inline-end: 0.3rem; inset-block-end: 0.3rem; display: grid; place-items: center; inline-size: 0.95rem; block-size: 0.95rem; border-radius: 50%; background: var(--text); color: var(--bg); border: 1.5px solid var(--bg); }
  .epingle__statut .ico { inline-size: 0.6rem; block-size: 0.6rem; stroke-width: 3.4; }
  .epingle:hover, .epingle.is-hl { scale: 1.25; z-index: 5; }
  .epingle:focus-visible { outline: none; z-index: 5; }
  .epingle:focus-visible .epingle__disque { outline: 3px solid var(--focus); outline-offset: 3px; }
  .groupe { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: 2.75rem; block-size: 2.75rem; translate: -50% -50%; display: grid; place-items: center; padding: 0; border: 0; background: none; pointer-events: auto; z-index: 4; color: var(--bg); transition: scale var(--dur-hover) var(--ease-out); }
  .groupe:hover { scale: 1.12; }
  .groupe__disque { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--text); color: var(--bg); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--text), 0 3px 8px rgb(0 0 0 / 0.3); font: 800 1rem/1 var(--font-display); }
  .groupe:focus-visible { outline: none; }
  .groupe:focus-visible .groupe__disque { outline: 3px solid var(--focus); outline-offset: 3px; }
  .carte__bulle { position: absolute; z-index: 8; inline-size: max-content; max-inline-size: 15rem; padding: 0.7rem 0.95rem; border-radius: var(--r-m); background: var(--text); color: var(--bg); font: 500 0.88rem/1.4 var(--font-display); box-shadow: var(--shadow-lift); transform: translate(-50%, calc(-100% - 1.5rem)); pointer-events: auto; }
  .carte__bulle.is-below { transform: translate(-50%, 1.5rem); }
  .carte__bulle strong { display: block; font: 750 0.98rem/1.25 var(--font-display); margin-block-end: 0.2rem; }
  .carte__bulle[hidden] { display: none; }
  .carte__encart { padding: 0.85rem 1.1rem; border: 2px solid var(--text); border-radius: var(--r-m); background: var(--surface); font: 500 0.95rem/1.4 var(--font-display); }
  .carte__encart strong { display: block; font: 750 1rem/1.25 var(--font-display); }
  @media (min-width: 48em) { .carte__encart { display: none !important; } }
  .carte__outils { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .carte__aide { max-inline-size: 36rem; margin-inline: auto; text-align: center; }
  .legende-carte { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--hairline); }
  .legende-carte__t { font: 650 0.75rem/1.3 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin-block-end: 0.5rem; }
  .legende-carte ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; font: 500 0.9rem/1.3 var(--font-display); }
  .legende-carte li { display: flex; align-items: center; gap: 0.55rem; }
  .stat-glyph { display: inline-grid; place-items: center; flex: none; inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%; background: var(--text); color: var(--bg); }
  .stat-glyph .ico { inline-size: 0.8rem; block-size: 0.8rem; stroke-width: 3.2; }
  .liste-col { display: grid; gap: 1rem; align-content: start; min-inline-size: 0; }
  .liste-col:focus { outline: none; }
  .liste-col__t { font-size: var(--step-2); }
  .liste-projets { display: grid; gap: 1rem; }
  .projet { position: relative; display: grid; gap: 0.85rem; padding: 1.25rem; border: 1px solid var(--hairline); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-card); transition: background 600ms, border-color var(--dur-hover), box-shadow var(--dur-hover); }
  .projet[hidden] { display: none; }
  .projet.is-hl, .projet.is-flash { background: var(--sun-pale); border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun); }
  .projet__tete { display: flex; gap: 0.9rem; align-items: flex-start; }
  .projet__tete .jeton { border-color: var(--surface); margin-block-start: 0.15rem; }
  .projet__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; font: 500 0.85rem/1.3 var(--font-display); color: var(--text-2); margin-block-end: 0.4rem; }
  .statut { display: inline-flex; align-items: center; gap: 0.35rem; font: 700 0.82rem/1.3 var(--font-display); color: var(--text); }
  .projet h3 { font-size: var(--step-1); }
  .projet__lieu { display: flex; align-items: center; gap: 0.4rem; font: 600 0.95rem/1.3 var(--font-display); }
  .projet__lieu .ico { inline-size: 1.15rem; block-size: 1.15rem; color: var(--link); }
  .projet__resume { font-size: 1rem; line-height: 1.55; }
  .projet__faits { display: grid; gap: 0.6rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); padding-block: 0.9rem; border-block: 1px solid var(--hairline); }
  .projet__faits dt { font: 650 0.74rem/1.3 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
  .projet__faits dd { font: 500 0.93rem/1.4 var(--font-display); }
  .projet__fin p { font: 500 0.95rem/1.3 var(--font-display); margin-block-end: 0.4rem; }
  .barre { block-size: 0.75rem; border-radius: var(--r-pill); background: var(--bg-alt); border: 2px solid var(--text); overflow: hidden; }
  .barre span { display: block; inline-size: 100%; block-size: 100%; transform-origin: left center; transform: scaleX(var(--p, 0)); background: var(--sun); }
  .projet__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .methode { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  @media (min-width: 56em) { .methode { grid-template-columns: 0.8fr 1.2fr; } }
  .criteres { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
  .criteres li { display: flex; gap: 1rem; align-items: flex-start; }
  .critere__n { display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--text); color: var(--bg); font: 800 1.1rem/1 var(--font-display); }
  .criteres h3 { font-size: 1.1rem; margin-block-end: 0.2rem; }
  .criteres p { color: var(--text-2); font-size: 1rem; line-height: 1.55; }
  .liste-projets { contain: layout; }
  @media (forced-colors: active) {
      .epingle__disque, .groupe__disque { border: 2px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }
      .region { fill: Canvas; stroke: CanvasText; }
      .barre span { background: Highlight; }
    }
}