/* Emblèmes partagés et couche interactive de la grille publique. */
.criterion-emblem { width: 100%; height: 100%; display: block; }
.grid-guide h2 span { display: block; }

.family-nav a:nth-child(1) { --nav-family: #247fa7; }
.family-nav a:nth-child(2) { --nav-family: #b86d32; }
.family-nav a:nth-child(3) { --nav-family: #7753a4; }
.family-nav a:nth-child(4) { --nav-family: #2e8064; }
.family-nav a:nth-child(5) { --nav-family: #bd554e; }
.family-nav a span { width: 34px; height: 34px; padding: 7px; background: color-mix(in srgb, var(--nav-family) 13%, white); color: var(--nav-family); }
.family-nav a:hover, .family-nav a.active { border-color: color-mix(in srgb, var(--nav-family) 24%, transparent); background: color-mix(in srgb, var(--nav-family) 7%, white); }

.family-section { background: linear-gradient(145deg, color-mix(in srgb, var(--family) 7%, #fffef9), #fffef9 32%); }
.family-section .family-mark { padding: 14px; }
.family-section .family-mark .criterion-emblem { color: white; }
.family-section .level-list { background: linear-gradient(110deg, color-mix(in srgb, var(--family) 4%, white), rgba(255, 254, 249, .88) 44%); }
.family-section .level-card { position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--family) 5%, transparent), transparent 42%); box-shadow: inset 4px 0 color-mix(in srgb, var(--family) 32%, transparent); transition: background .18s ease, box-shadow .18s ease; }
.family-section .level-card:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--family) 9%, transparent), transparent 52%); box-shadow: inset 5px 0 color-mix(in srgb, var(--family) 54%, transparent); }

.criteria-emblems { margin: 25px 0; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 50% 58%, rgba(184, 214, 74, .13), transparent 21rem), rgba(255, 254, 249, .88); box-shadow: var(--shadow); }
.emblems-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 36px; align-items: end; }
.emblems-heading h2 { max-width: 720px; margin: 0; font-size: clamp(29px, 4vw, 48px); line-height: 1.02; letter-spacing: -.047em; }
.emblems-heading > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.emblem-stage { position: relative; width: min(800px, 100%); height: 585px; margin: 18px auto 0; }
.emblem-orbit-line { position: absolute; left: 50%; top: 51%; width: 440px; height: 440px; border: 1px dashed rgba(16, 35, 31, .18); border-radius: 50%; transform: translate(-50%, -50%); }
.emblem-orbit-line::before, .emblem-orbit-line::after { content: ""; position: absolute; inset: 48px; border: 1px solid rgba(16, 35, 31, .06); border-radius: 50%; }
.emblem-orbit-line::after { inset: 102px; }
.emblem-core { position: absolute; z-index: 2; left: 50%; top: 51%; width: 145px; height: 145px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(184, 214, 74, .42); border-radius: 50%; background: #0d1715; color: white; transform: translate(-50%, -50%); box-shadow: 0 24px 55px rgba(7, 38, 30, .22); }
.emblem-core strong { color: var(--lime); font-size: 45px; line-height: .9; }
.emblem-core span { margin-top: 8px; color: #aebdb8; font-size: 10px; font-weight: 850; line-height: 1.3; text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.emblem-item { --emblem: var(--forest); position: absolute; z-index: 3; width: 150px; display: grid; justify-items: center; color: var(--ink); text-decoration: none; transform: translate(-50%, -50%); }
.emblem-item:hover .emblem-medallion { transform: translateY(-5px) rotate(3deg); box-shadow: 0 20px 45px color-mix(in srgb, var(--emblem) 28%, transparent); }
.emblem-medallion { width: 104px; height: 104px; display: grid; place-items: center; padding: 24px; border: 1px solid color-mix(in srgb, var(--emblem) 36%, transparent); border-radius: 34% 66% 57% 43% / 44% 38% 62% 56%; background: color-mix(in srgb, var(--emblem) 13%, white); color: var(--emblem); box-shadow: 0 12px 32px color-mix(in srgb, var(--emblem) 16%, transparent); transition: transform .24s ease, box-shadow .24s ease; }
.emblem-item:nth-of-type(even) .emblem-medallion { border-radius: 58% 42% 36% 64% / 43% 61% 39% 57%; }
.emblem-item b { margin-top: 11px; font-size: 15px; letter-spacing: -.02em; }
.emblem-item small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.emblem-aquatique { left: 50%; top: 16%; }
.emblem-exiguite { left: 82%; top: 39%; }
.emblem-equipement { left: 70%; top: 80%; }
.emblem-progression { left: 30%; top: 80%; }
.emblem-cheminement { left: 18%; top: 39%; }
.emblems-hint { margin: -8px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.grid-pitch { position: relative; margin: 25px 0; padding: clamp(30px, 5vw, 56px); overflow: hidden; border: 1px solid rgba(64, 91, 34, .15); border-radius: 28px; background: linear-gradient(135deg, #edf3d2, #dce8aa); color: var(--ink); }
.grid-pitch::after { content: "05"; position: absolute; right: -10px; bottom: -70px; color: rgba(9, 47, 38, .045); font-size: 250px; font-weight: 950; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.grid-pitch .eyebrow { color: var(--forest); }
.grid-pitch h2 { position: relative; z-index: 1; max-width: 860px; margin: 0; font-size: clamp(34px, 5.5vw, 65px); line-height: .98; letter-spacing: -.055em; }
.grid-pitch > p:not(.eyebrow) { position: relative; z-index: 1; max-width: 760px; margin: 22px 0; color: #40534c; font-size: 16px; line-height: 1.6; }
.pitch-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; }
.pitch-actions a { padding: 12px 17px; border: 1px solid var(--forest-dark); border-radius: 999px; background: var(--forest-dark); color: white; text-decoration: none; font-size: 12px; font-weight: 850; }
.pitch-actions a.secondary { background: transparent; color: var(--forest-dark); }

.radar-lab { margin: 25px 0 75px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 28px; background: radial-gradient(circle at 88% 8%, rgba(184, 214, 74, .13), transparent 22rem), #0d1715; color: white; box-shadow: var(--shadow); }
.radar-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .65fr); gap: 35px; align-items: end; padding: 36px 39px 26px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.radar-heading .eyebrow { color: var(--lime); }
.radar-heading h2 { margin: 0; color: white; font-size: clamp(32px, 4.5vw, 55px); line-height: 1; letter-spacing: -.05em; }
.radar-heading > p { margin: 0; color: #aebdb8; font-size: 13px; line-height: 1.6; }
.radar-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); }
.radar-stage { min-width: 0; padding: 22px 20px 16px; border-right: 1px solid rgba(255, 255, 255, .09); background: rgba(0, 0, 0, .12); }
.rating-radar { width: 100%; max-height: 510px; display: block; overflow: visible; touch-action: manipulation; }
.radar-ring { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.radar-ring.outer { stroke: rgba(184, 214, 74, .32); }
.radar-axis { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.radar-axis-label { fill: #dce5e1; font-size: 12px; font-weight: 850; letter-spacing: .02em; pointer-events: none; }
.radar-axis-mark { fill: rgba(255, 255, 255, .36); font-size: 9px; font-weight: 900; pointer-events: none; }
.radar-shape { fill: rgba(184, 214, 74, .17); stroke: #b8d64a; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 7px 18px rgba(184, 214, 74, .13)); pointer-events: none; }
.radar-hit { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .34); stroke-width: 1; cursor: pointer; pointer-events: all; transition: fill .15s ease, stroke .15s ease; }
.radar-hit:hover, .radar-hit:focus { fill: color-mix(in srgb, var(--point-color) 66%, transparent); stroke: white; stroke-width: 2; outline: none; }
.radar-hit.selected { fill: var(--point-color); stroke: white; stroke-width: 2; }
.radar-selected-dot { fill: var(--point-color); stroke: #0d1715; stroke-width: 3; pointer-events: none; }
.radar-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px 0 0; color: #899994; font-size: 10px; }
.radar-hint span { width: 10px; height: 10px; border: 2px solid #b8d64a; border-radius: 50%; }

.radar-dashboard { min-width: 0; padding: 30px; }
.profile-intro { padding: 20px; border: 1px solid rgba(184, 214, 74, .2); border-radius: 18px; background: rgba(184, 214, 74, .07); }
.profile-intro > span { display: block; color: var(--lime); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.profile-intro strong { display: block; margin: 7px 0; font-size: 25px; letter-spacing: -.03em; }
.profile-intro p { margin: 0; color: #afbfba; font-size: 12px; line-height: 1.55; }
.radar-selections { display: grid; gap: 8px; margin-top: 14px; }
.radar-selection { --selection: var(--lime); display: grid; grid-template-columns: 39px minmax(0, 1fr) 30px; gap: 11px; align-items: start; padding: 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.radar-selection .selection-mark { width: 39px; height: 39px; display: grid; place-items: center; padding: 8px; border-radius: 11px; background: color-mix(in srgb, var(--selection) 23%, #14201c); color: color-mix(in srgb, var(--selection) 72%, white); }
.radar-selection .selection-copy { min-width: 0; }
.radar-selection .selection-label { display: block; color: #869791; font-size: 9px; }
.radar-selection b { display: block; margin-top: 2px; color: #e7eeeb; font-size: 12px; line-height: 1.3; white-space: normal; }
.radar-selection small { display: block; margin-top: 5px; color: #a8b7b2; font-size: 10px; line-height: 1.45; }
.radar-selection > strong { padding-top: 4px; color: var(--selection); font-size: 20px; text-align: center; }
.radar-controls { display: grid; gap: 8px; margin-top: 16px; }
.radar-control { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: center; }
.radar-control > span { display: flex; align-items: center; gap: 7px; color: #aebdb8; font-size: 10px; font-weight: 750; }
.radar-control > span i { width: 23px; height: 23px; display: grid; padding: 4px; border-radius: 7px; background: color-mix(in srgb, var(--control-color) 20%, #14201c); color: var(--control-color); font-style: normal; }
.radar-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.radar-buttons button { min-height: 34px; padding: 4px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 8px; background: rgba(255, 255, 255, .04); color: #aebdb8; font-size: 10px; font-weight: 850; cursor: pointer; }
.radar-buttons button:hover, .radar-buttons button[aria-pressed="true"] { border-color: var(--control-color); background: color-mix(in srgb, var(--control-color) 30%, #14201c); color: white; transform: none; }
.radar-buttons button:focus-visible { outline: 2px solid var(--control-color); outline-offset: 2px; }

@media (max-width: 850px) {
  .emblems-heading { grid-template-columns: 1fr; gap: 13px; }
  .emblem-stage { width: auto; height: auto; display: flex; gap: 11px; margin: 24px -34px 0; padding: 6px 34px 15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .emblem-stage::-webkit-scrollbar { display: none; }
  .emblem-orbit-line, .emblem-core { display: none; }
  .emblem-item { position: relative; left: auto; top: auto; flex: 0 0 145px; min-height: 190px; align-content: center; padding: 16px 10px; border: 1px solid color-mix(in srgb, var(--emblem) 18%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--emblem) 6%, white); transform: none; scroll-snap-align: center; animation: emblemFloat 4s ease-in-out infinite; }
  .emblem-item:nth-of-type(2n) { animation-delay: -.9s; }
  .emblem-item:nth-of-type(3n) { animation-delay: -1.8s; }
  .emblem-medallion { width: 86px; height: 86px; padding: 20px; }
  .emblems-hint { margin-top: 3px; text-align: left; }
  @keyframes emblemFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

  .grid-guide { overflow: visible; }
  .grid-guide h2 span { display: inline; }
  .family-nav { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; padding: 0; overflow: visible; }
  .family-nav a { width: 100%; min-width: 0; }
  .family-nav a:hover, .family-nav a.active { transform: none; }

  .radar-heading { grid-template-columns: 1fr; gap: 13px; }
  .radar-layout { grid-template-columns: 1fr; }
  .radar-stage { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
}

@media (max-width: 520px) {
  .criteria-emblems { padding: 24px 19px; border-radius: 21px; }
  .emblems-heading h2 { font-size: 31px; }
  .emblems-heading > p { font-size: 12px; }
  .emblem-stage { margin-inline: -19px; padding-inline: 19px; }
  .emblem-item { flex-basis: 132px; min-height: 176px; }
  .grid-guide h2 { font-size: 27px; line-height: 1.12; }
  .grid-guide h2 span { display: block; }
  .grid-pitch { border-radius: 21px; padding: 29px 22px; }
  .grid-pitch h2 { font-size: 39px; }
  .grid-pitch > p:not(.eyebrow) { font-size: 14px; }
  .pitch-actions { display: grid; }
  .pitch-actions a { text-align: center; }
  .radar-lab { border-radius: 21px; }
  .radar-heading { padding: 27px 21px 20px; }
  .radar-heading h2 { font-size: 38px; }
  .radar-stage { padding: 15px 5px 13px; }
  .rating-radar { margin-inline: auto; max-width: 100%; }
  .radar-dashboard { padding: 20px 15px 24px; }
  .profile-intro { padding: 17px; }
  .radar-control { grid-template-columns: 108px 1fr; }
  .radar-selection { grid-template-columns: 37px minmax(0, 1fr) 25px; }
}

@media (prefers-reduced-motion: reduce) { .emblem-item { animation: none !important; } }
@media print { .criteria-emblems, .grid-pitch, .radar-lab { display: none !important; } }