/* voter2027.fr — home page, laid out like the claude.ai "accueil" artifact (docs/design-claude-ai/accueil/).
   Tokens from base.css only. No max-width on running text: columns come from the section grids. */

.hm { overflow-anchor: auto; }
.hm h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.hm .kicker { display: block; margin-bottom: var(--space-2); }
.hm-sec { padding: var(--space-5) 0; margin: 0; }
.hm-sec.band { margin: 0; }
.hm-sec-lede { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.hm-sec-foot { font-size: 0.9375rem; color: var(--color-text-muted); margin: var(--space-4) 0 0; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }

/* ---- hero */
.hm-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: center; padding: var(--space-4) 0 var(--space-3); }
@media (min-width: 52rem) { .hm-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; padding: var(--space-5) 0 var(--space-4); } .hm-h1-b { white-space: nowrap; } }
.hm-hero h1 { font-size: clamp(40px, 4.8vw, 66px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 0 -0.035em; }
.hm-h1-a, .hm-h1-b { display: block; }
.hm-h1-a { color: var(--color-accent-vivid); }
.hm-h1-c { color: var(--color-accent-2-vivid); }
.hm-lede { font-size: 18px; line-height: 1.55; margin: var(--space-4) 0 0; }
.hm-count { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.hm-count-n { display: flex; margin: 0; font-weight: 600; font-size: clamp(44px, 4.4vw, 60px); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.hm-count-n .d-first { color: var(--color-accent-vivid); }
.hm-count-n .d-last { color: var(--color-accent-2-vivid); }
.hm-count-t { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--color-text-muted); }
.hm-map-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-map-fig[hidden] { display: none; }
.hm-map { display: block; width: 100%; height: auto; aspect-ratio: 1 / 0.92; cursor: pointer; }
.hm-map-cap { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); min-height: 3em; }
.hm-map-cap a { color: inherit; }

/* ---- candidates: depth strip, hemicycle, in-place card */
.hm-cands { padding-top: var(--space-4); }
.hm-depth { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--space-5); font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.hm-depth strong { font-size: 0.9375rem; letter-spacing: 0; color: var(--color-text); }
.hm-cands-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: start; margin-top: var(--space-4); }
@media (min-width: 58rem) { .hm-cands-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.hm-hemi-wrap { min-width: 0; }
.hm-hemi { display: block; width: 100%; height: auto; overflow: visible; }
.hm-pole { font-size: 26px; letter-spacing: 0.08em; text-transform: uppercase; }
.hm-pole-l { fill: var(--color-accent); }
.hm-pole-r { fill: var(--color-accent-2); }
.hm-seat { cursor: pointer; outline: none; }
.hm-seat circle { fill: var(--color-text); stroke: var(--color-text); stroke-width: 2.5; transition: fill .15s, stroke .15s; }
.hm-seat text { fill: var(--color-bg); font-family: var(--font-serif); font-weight: 600; font-size: 24px; pointer-events: none; }
.hm-seat-est circle { fill: var(--color-bg); stroke-dasharray: 6 5; }
.hm-seat-est text { fill: var(--color-text); }
.hm-seat:hover circle, .hm-seat:focus-visible circle { stroke: var(--color-accent); stroke-width: 5; }
.hm-seat[aria-pressed="true"] circle { fill: var(--color-accent); stroke: var(--color-accent); stroke-dasharray: none; }
.hm-seat[aria-pressed="true"] text { fill: var(--color-accent-contrast); }
@media (prefers-reduced-motion: no-preference) {
  .hm-seat circle { transform-box: fill-box; transform-origin: center; transition: fill .15s, stroke .15s, transform .15s; }
  .hm-seat:hover circle { transform: scale(1.1); }
}
/* phone: the hemicycle stays as the picture, a snap row of initials carries the taps (44px targets) */
.hm-ribbon { list-style: none; margin: var(--space-3) 0 0; padding: 0 0 6px; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hm-ribbon::-webkit-scrollbar { display: none; }
.hm-ribbon li { scroll-snap-align: start; flex: 0 0 auto; }
.hm-rib { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; text-decoration: none; color: var(--color-text); font-size: 0.75rem; line-height: 1.2; text-align: center; }
.hm-rib-i { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-text); color: var(--color-bg); border: 1.5px solid var(--color-text); font-weight: 600; font-size: 0.875rem; }
.hm-rib-est { background: transparent; color: var(--color-text); border-style: dashed; }
.hm-rib[aria-pressed="true"] .hm-rib-i { background: var(--color-accent); border-color: var(--color-accent); border-style: solid; color: var(--color-accent-contrast); }
.hm-rib-n { overflow: hidden; text-overflow: ellipsis; max-width: 64px; white-space: nowrap; }


@media (min-width: 58rem) { .hm-pick { min-height: 14rem; } }
.hm-pick-empty { margin: 0; font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.45; color: var(--color-text-muted); }
.hm-card { display: flex; flex-direction: column; gap: 14px; }
.hm-card[hidden] { display: none; }
.hm-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hm-card-head h3 { margin: 0; font-size: 1.625rem; line-height: 1.2; }
.hm-card-party { font-size: 0.9375rem; color: var(--color-text-muted); }
.hm-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--space-4); margin: 0; }
.hm-card-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-card-stats dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.hm-card-stats dd { margin: 0; font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.lv-4 { color: var(--color-badge-4); } .lv-3 { color: var(--color-badge-3); } .lv-2 { color: var(--color-badge-2); } .lv-1 { color: var(--color-badge-1); } .lv-0 { color: var(--color-text-muted); }
.lv-g { font-size: 0.875em; }
.hm-card-note { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-text-muted); }
.hm-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-2) 0 0; font-size: 0.9375rem; }
.hm-card-links .btn { flex: 1 1 auto; font-size: 0.9375rem; }
.hm-card-links .btn:not(.btn-secondary) { order: -1; flex-basis: 100%; }
@media (min-width: 44rem) { .hm-card-links .btn:not(.btn-secondary) { flex-basis: auto; } }
.hm-mine[aria-pressed="true"] { font-weight: 600; }

/* ---- calendar strip */
.hm-cal { padding: var(--space-2) 0 var(--space-4); }
.hm-cal-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px var(--space-5); padding: 12px 0; }
.hm-cal-row .kicker { margin: 0; color: var(--color-text-muted); }
.hm-cal-row .kicker a { color: inherit; }
.hm-cal-item { display: flex; align-items: baseline; gap: 8px; font-size: 0.9375rem; white-space: nowrap; }
.hm-cal-l { color: var(--color-text-muted); }
.hm-cal-item strong { font-size: 1.0625rem; }
.hm-cal-inscription strong { color: var(--color-accent-2); }
.hm-cal-premier-tour strong, .hm-cal-second-tour strong { color: var(--color-accent); }
@media (max-width: 43.99rem) { .hm-cal-row { flex-direction: column; align-items: flex-start; gap: 6px; } .hm-cal-item { white-space: normal; } }

/* ---- three steps */
.hm-steps-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: var(--space-4) var(--space-5); }
.hm-steps-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; align-content: start; }
.hm-num { font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--color-accent-vivid); }
.hm-steps-list h3 { margin: 0; font-size: 1.5rem; }
.hm-steps-list p, .hm-steps-list a { grid-column: 1 / -1; margin: 0; }
.hm-steps-list p { font-size: 0.97rem; line-height: 1.6; color: var(--color-text-muted); }

/* ---- the ballot explained */
.hm-scrutin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); }
@media (min-width: 52rem) { .hm-scrutin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hm-rounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.hm-rounds li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 6px 16px; align-items: baseline; }
.hm-rounds .tag { justify-self: start; }
.hm-rounds h3 { margin: 0; font-size: 1.375rem; line-height: 1.25; }
.hm-rounds p { grid-column: 2; margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--color-text-muted); }

/* ---- forming a view, priorities */
.hm-method { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--space-4) var(--space-5); }
.hm-method li { display: flex; flex-direction: column; gap: 6px; }
.hm-method h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.hm-method-n { font-size: 0.9375rem; color: var(--color-accent); margin-right: 4px; }
.hm-method-n.alt { color: var(--color-accent-2); }
.hm-method p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-text-muted); }
.hm-method a { font-size: 0.9375rem; margin-top: auto; }
/* ---- priorities picker: the page's one interactive tool, a paper panel inside the grey band.
   Left the chips (the questionnaire's own .chip control, pressed = accent fill + rank), right one
   compact row per picked theme that opens on its questions; the row just added is the open one,
   so a tap shows its result beside the chips (desktop) or right under them (phone). The foot
   (count + button) sticks to the bottom of the screen while the panel is in view. */
#priorites { scroll-margin-top: calc(var(--sticky-top) + var(--space-2)); }
.hm-prio { margin-top: var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-top: 4px solid var(--color-accent-vivid); border-radius: var(--radius); padding: var(--space-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
@media (min-width: 52rem) { .hm-prio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); padding: var(--space-4); } }
.hm-prio-h { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.1; letter-spacing: -0.015em; }
.hm-prio .hm-sec-lede { margin-top: var(--space-2); font-size: 1rem; line-height: 1.5; }
.hm-prio-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.hm-prio-chip[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.hm-prio-chip[aria-disabled="true"]:hover { border-color: var(--color-border-strong); }
.hm-prio-chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.hm-prio-nojs { margin: var(--space-3) 0 0; font-size: 0.875rem; color: var(--color-text-muted); }
.hm-prio-out { display: flex; flex-direction: column; min-width: 0; }
.hm-prio-empty { margin: 0; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; color: var(--color-text-muted); }
.hm-prio-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-rule); }
.hm-prio-theme { border-bottom: 1px solid var(--color-divider); }
.hm-prio-theme summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 0; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.hm-prio-theme summary::-webkit-details-marker { display: none; }
.hm-prio-theme summary:hover .hm-prio-label { color: var(--color-accent); }
.hm-prio-theme summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.hm-prio-rank { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--color-text); color: var(--color-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-variant-numeric: lining-nums; }
.hm-prio-label { flex: 1 1 auto; min-width: 0; }
.hm-prio-n { flex: 0 0 auto; font-weight: 400; font-size: 0.8125rem; color: var(--color-text-muted); }
.hm-prio-body { padding: 0 0 12px; }
@media (min-width: 52rem) { .hm-prio-body { padding-left: 36px; } }
.hm-prio-body ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-prio-body li { font-size: 0.9375rem; line-height: 1.45; }
.hm-prio-body > a { font-size: 0.875rem; }
.hm-prio-note { margin: var(--space-2) 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); }
.hm-prio-foot { position: sticky; bottom: 0; z-index: 1; margin-top: var(--space-2); padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--color-bg); border-top: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.hm-prio-count { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.hm-prio-list[hidden], .hm-prio-theme[hidden], .hm-prio-foot[hidden], .hm-prio-empty[hidden], .hm-prio-note[hidden] { display: none; }
.hm-prio-theme.is-new { animation: hm-prio-new 1.4s ease-out; }
@keyframes hm-prio-new { from { background: var(--color-accent-100); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .hm-prio-theme.is-new { animation: none; } }

/* ---- frequent questions */
.hm-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6); }
@media (min-width: 52rem) { .hm-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.hm-faq-list { display: flex; flex-direction: column; min-width: 0; }
.hm-faq-item { border-bottom: 1px solid var(--color-divider); padding: 12px 0; }
.hm-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.hm-faq-item summary::-webkit-details-marker { display: none; }
.hm-faq-item summary:hover { color: var(--color-accent); }
.hm-faq-item p { margin: 8px 0 2px; font-size: 0.97rem; line-height: 1.6; color: var(--color-text-muted); }
.hm-faq-item .hm-faq-src { font-size: 0.8125rem; }
.hm-faq-item .hm-faq-see { font-size: 0.875rem; }

/* ---- closing band */
.hm-close h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0 -0.035em; }
@media (min-width: 52rem) { .hm-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); align-items: end; } .hm-close h2 { grid-row: span 2; } .hm-close .hm-actions { grid-column: 2; } }

/* « Comment décider ? » in the hero: the site's magenta (owner, 6 Oct 2026; Marianne red from 28 Sep until then, too close to a
   party colour and to a State look). White text on #d6006c is AA; darker on hover. */
.btn-magenta { background: #d6006c; border-color: #d6006c; color: #fff; }
.btn-magenta:hover, .btn-magenta:focus-visible { background: #aa0b56; border-color: #aa0b56; color: #fff; }

/* Hero: one line of theme links under the buttons (every theme, same weight, site order). */
.hm-themes { margin-top: var(--space-3); font-size: 0.9375rem; line-height: 1.9; }
.hm-themes-l { color: var(--color-text-muted); margin-right: 4px; }
.hm-themes a { margin-right: 10px; white-space: nowrap; }

/* Duolecto block (owner, 2 Oct 2026): text left, the button right on wide screens. */
.hm-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-6); align-items: center; }
@media (min-width: 52rem) { .hm-duo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.hm-duo-go { margin: 0; }
.hm-duo .btn.hm-duo-btn { background: var(--color-accent-2-700); border-color: var(--color-accent-2-700); color: #fff; }