/* =================================================================
   Les Éligibles — interpellation des députés
   ================================================================= */

/* -- typographie : Clash Grotesk pour les titres --------------------- */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #B9337B;
  --primary-ink: #FFFFFF;
  --primary-soft: rgba(185, 51, 123, 0.10);
  --primary-soft-2: rgba(185, 51, 123, 0.18);
  --primary-dark: #9F2A6A;

  --secondary: #ED964D;
  --secondary-ink: #FFFFFF;
  --secondary-soft: rgba(237, 150, 77, 0.12);
  --secondary-dark: #D17F38;

  /* Couleur sémantique pour le vote "contre la loi" (alignée avec la
     posture de l'association : positif, soutenant) */
  --success: #2E8B57;
  --success-ink: #FFFFFF;
  --success-soft: rgba(46, 139, 87, 0.10);
  --success-dark: #226B41;

  /* Couleur sémantique pour le vote "pour la loi" : rouge d'alerte,
     éditorial (l'association s'inscrit en opposition à la légalisation).
     Distincte de --primary (rose de marque) pour ne pas mélanger
     identité visuelle et code couleur de vote.                       */
  --vote-pour: #C0392B;
  --vote-pour-ink: #FFFFFF;
  --vote-pour-soft: rgba(192, 57, 43, 0.10);
  --vote-pour-dark: #9C2A20;

  --ink: #1E293B;
  --ink-soft: #475569;
  --ink-mute: #94A3B8;

  --bg: #F8FAFC;
  --bg-deep: #EEF2F7;
  --surface: #FFFFFF;
  --surface-warm: #FFFBF8;
  --surface-cool: #F1F5F9;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 18px -8px rgba(15, 23, 42, 0.12), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px -16px rgba(15, 23, 42, 0.18), 0 6px 14px -6px rgba(15, 23, 42, 0.10);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-head: 'Clash Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --container-px-mobile: 18px;
  --container-px-tablet: 28px;
  --container-px-desktop: 40px;
  --container-max: 1280px;

  /* Rythme vertical — échelle 8 px, cohérent sur toute la page -------- */
  --space-section-y:    56px;   /* écart entre blocs majeurs */
  --space-band-y:       32px;   /* respiration interne share / support */
  --space-title-mb:     24px;   /* marge sous les titres de section */
  --space-stack:        16px;   /* gap entre items d'une section */
  --space-stack-lg:     28px;   /* gap entre catégories FAQ */
  --space-card-pad:     20px;   /* padding interne des cartes */
  --space-card-pad-lg:  32px;   /* cartes mises en avant */
  --space-hero-y:       52px;   /* padding haut du hero */
  --space-hero-block:   32px;   /* gap entre blocs du hero */
  --space-hero-stack:   16px;   /* gap serré (H1 ↔ chapô) */
}
@media (min-width: 768px) {
  :root {
    --space-section-y:    72px;
    --space-band-y:       40px;
    --space-title-mb:     28px;
    --space-stack:        18px;
    --space-stack-lg:     32px;
    --space-card-pad:     24px;
    --space-card-pad-lg:  40px;
    --space-hero-y:       68px;
    --space-hero-block:   40px;
    --space-hero-stack:   20px;
  }
}
@media (min-width: 1100px) {
  :root {
    --space-section-y:    88px;
    --space-band-y:       48px;
    --space-title-mb:     32px;
    --space-stack-lg:     36px;
    --space-hero-y:       84px;
    --space-hero-block:   48px;
    --space-hero-stack:   24px;
  }
}

/* -- reset minimal ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* coupe les débordements horizontaux des éléments décoratifs (blobs/floats)
     sans créer de containing block pour position:fixed (vs overflow:hidden) */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  overflow-x: clip;
  /* fond beige unifié, prolongement du hero, avec halos doux aux extrémités */
  background:
    radial-gradient(70% 50% at 100% 100%, rgba(237, 150, 77, 0.07) 0%, transparent 70%),
    radial-gradient(60% 40% at 0% 95%, rgba(185, 51, 123, 0.05) 0%, transparent 70%),
    #FFFBF8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
}
/* background-attachment:fixed n'est conservé qu'en desktop : il provoque
   du jank et un re-paint coûteux sur iOS Safari, Chrome mobile, etc.   */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body { background-attachment: fixed; }
}
button, input, select, textarea { font-family: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::placeholder { color: var(--ink-mute); opacity: 1; }

/* -- conteneur principal : pleine largeur, sans bordure --------------- */
#root {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  background: transparent;
}

/* helper de centrage de contenu (1280px max) --------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* navigation contextuelle (remplace l'ancien header global) */
.view-nav {
  padding: 18px var(--container-px-mobile) 0;
}
.view-nav__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.view-nav__back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 13.5px; font-weight: 600;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.view-nav__back:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.view-nav__back svg { color: var(--ink-mute); transition: color 0.15s ease, transform 0.15s ease; }
.view-nav__back:hover svg { color: var(--primary); transform: translateX(-2px); }
.view-nav__title {
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase;
}
@media (min-width: 768px) { .view-nav { padding-left: var(--container-px-tablet); padding-right: var(--container-px-tablet); padding-top: 22px; } }
@media (min-width: 1100px) { .view-nav { padding-left: var(--container-px-desktop); padding-right: var(--container-px-desktop); padding-top: 28px; } }

.icon-btn {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }

.app-main { flex: 1; }

/* =====================================================================
   ACCUEIL — hero (fond transparent, continu avec le body)
   ===================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  padding: var(--space-hero-y) var(--container-px-mobile) 0;
  min-height: auto;
  background: transparent;
}

.hero__inner {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero__inner > h1,
.hero__inner > .hero__lead,
.faq__head { max-width: 720px; }

/* -- décompte avant le vote (pill horizontale) ------------------------- */
.countdown {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 14px;
  margin-bottom: var(--space-hero-block);
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(237, 150, 77, 0.22);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 6px 22px -12px rgba(237, 150, 77, 0.28);
  cursor: help;
}
.countdown[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.countdown:hover::after,
.countdown:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .countdown[data-tooltip]::after { transition: opacity 0.18s ease; transform: translateX(-50%); }
}
.countdown__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #E11D2E; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.60);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .countdown__pulse { animation: none; } }
.countdown__text {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.countdown__text strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.countdown__sep {
  margin: 0 0.15em;
  color: var(--ink-mute);
  font-weight: 400;
}
.countdown.is-over .countdown__text { opacity: 0.65; }
@media (max-width: 520px) {
  .countdown { padding: 8px 12px 8px 11px; max-width: 100%; }
  .countdown__text { font-size: 12px; white-space: normal; text-align: center; }
}

/* -- barre de statut (députés à convaincre) --------------------------- */
.hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin: 0 0 var(--space-hero-block);
  min-width: 0;
}
.hero__status-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hero__status-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
  font-weight: 500;
}
.hero__status-text strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero__status-icon {
  display: block;
  flex-shrink: 0;
  color: var(--primary);
}
@media (max-width: 420px) {
  .hero__status-text { font-size: 13px; }
}

/* === Reveal animations — sobre, institutionnel ====================== */
/* Hero : séquence d'apparition au chargement (cascade discrète)        */
.hero__inner > .countdown,
.hero__inner > h1,
.hero__inner > .hero__lead,
.hero__inner > .hero__status,
.hero__inner > .hero__actions,
.hero__inner > .hero__chart {
  opacity: 0;
  transform: translateY(12px);
  animation: revealUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero__inner > .countdown     { animation-delay: 0.05s; }
.hero__inner > h1             { animation-delay: 0.17s; }
.hero__inner > .hero__lead    { animation-delay: 0.29s; }
.hero__inner > .hero__status  { animation-delay: 0.35s; }
.hero__inner > .hero__actions { animation-delay: 0.41s; }
.hero__inner > .hero__chart--waves { animation-delay: 0.52s; animation-duration: 0.85s; }




/* Sections : déclenchées via IntersectionObserver (.is-revealed)       */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Une fois le hero entièrement révélé au premier load, on neutralise les
   animations CSS du hero : sans ça, l'attribut `hidden` (display:none)
   posé sur la vue home pendant la navigation reset les animations, qui
   rejouent intégralement au retour. La classe `.hero--ready` est posée
   par initHeroFreeze() en JS après animationend du dernier reveal. */
.hero.hero--ready .hero__inner > .countdown,
.hero.hero--ready .hero__inner > h1,
.hero.hero--ready .hero__inner > .hero__lead,
.hero.hero--ready .hero__inner > .hero__status,
.hero.hero--ready .hero__inner > .hero__actions,
.hero.hero--ready .hero__inner > .hero__chart {
  animation: none !important;
  opacity: 1; transform: none;
}
.hero.hero--ready .hero__chart-grid line,
.hero.hero--ready .hero__chart-axis,
.hero.hero--ready .hero__chart-labels,
.hero.hero--ready .hero__chart-line,
.hero.hero--ready .hero__chart-point,
.hero.hero--ready .hero__chart-callout,
.hero.hero--ready .hero__chart-callout__arrow,
.hero.hero--ready .hero__chart-spark__line,
.hero.hero--ready .chart-gauge {
  animation: none !important;
  opacity: 1;
}
.hero.hero--ready .chart-gauge { transform: none; }
.hero.hero--ready .hero__chart-point { transform: none; }
.hero.hero--ready .chart-gauge__fill {
  animation: none !important;
  width: calc(var(--pct) * 1%);
}
.hero.hero--ready .waves-vote-gauge {
  animation: none !important;
  opacity: 1;
  transform: none;
}
.hero.hero--ready .waves-vote-gauge__fill {
  animation: none !important;
  width: calc(var(--pct) * 1%);
}
.hero.hero--ready .hero__chart--waves .waves-chart__vote[data-waves-vote],
.hero.hero--ready .hero__chart--waves .waves-chart__delta,
.hero.hero--ready .hero__chart--waves .waves-chart__markers .waves-chart__marker {
  opacity: 1 !important;
}
.hero.hero--ready .hero__chart--waves .waves-chart__pulses {
  opacity: 1 !important;
}
.hero.hero--ready .countdown__pulse { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hero__inner > .countdown,
  .hero__inner > h1,
  .hero__inner > .hero__lead,
  .hero__inner > .hero__status,
  .hero__inner > .hero__actions,
  .hero__inner > .hero__chart,
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.60); }
  70%  { box-shadow: 0 0 0 10px rgba(225, 29, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 46, 0); }
}

.hero h1,
.faq__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(28px, 5.6vw, 80px);
  line-height: 1.08; letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.hero h1 {
  margin: 0 0 var(--space-hero-stack);
}
.faq__title {
  margin: 0 0 var(--space-hero-stack);
}
.hero h1 .accent,
.faq__title .accent {
  background: linear-gradient(120deg, var(--primary) 0%, #D14794 45%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary);
}
.hero__lead,
.faq__lead {
  font-size: 16.5px; line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 640px;
}
.hero__lead {
  margin: 0 0 var(--space-hero-block);
}
.faq__lead {
  margin: 0 auto;
}
.hero__lead strong,
.faq__lead strong { color: var(--primary); font-weight: 600; }

/* -- graphique : bloc blanc, déborde légèrement sous le viewport (scroll) */
.hero__chart {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-hero-block) auto 0;
  padding: 0;
  pointer-events: none;
}

/* Couche glass (Billow framer-1llx42p) + bloc blanc par-dessus (framer-11f38er) */
.hero__chart-glass {
  position: relative;
  width: 100%;
  padding: 3px 5px;
  border-radius: calc(var(--radius-xl) + 3px);
  background: rgba(255, 255, 255, 0.22);
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    rgba(1, 27, 46, 0.05) 0 0.557px 1.672px -0.5px,
    rgba(1, 27, 46, 0.05) 0 1.69px 5.07px -1px,
    rgba(1, 27, 46, 0.06) 0 4.47px 13.4px -1.5px,
    rgba(1, 27, 46, 0.07) 0 14px 42px -2px;
  overflow: visible;
}
.hero__chart-glass::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -25px;
  right: -8px;
  bottom: -58px;
  left: -10%;
  border-radius: 46% 54% 52% 48% / 44% 50% 50% 56%;
  opacity: 0.62;
  background:
    radial-gradient(ellipse 95% 115% at 14% 40%, rgba(185, 51, 123, 0.58) 0%, rgba(185, 51, 123, 0) 68%),
    radial-gradient(ellipse 90% 105% at 86% 58%, rgba(185, 51, 123, 0.48) 0%, rgba(185, 51, 123, 0) 66%),
    radial-gradient(ellipse 130% 95% at 52% 78%, rgba(185, 51, 123, 0.32) 0%, transparent 72%);
  filter: blur(44px);
  transform: scale(1.03);
}
.hero__chart-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 0.5px solid rgba(0, 28, 46, 0.08);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 3vw, 28px) clamp(16px, 2.5vw, 24px) clamp(22px, 3.5vw, 32px);
  box-shadow:
    0 24px 48px -20px rgba(15, 23, 42, 0.14),
    0 8px 20px -10px rgba(185, 51, 123, 0.08);
  overflow: hidden;
}
.hero__chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.hero__chart-svg--landscape { display: block; }
.hero__chart-gauges { display: none; }

/* -- jauges mobile --------------------------------------------------- */
.hero__chart-gauges {
  flex-direction: column;
  gap: 14px;
}
.hero__chart-callout-mobile {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--primary);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
}
.hero__chart-callout-mobile__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--primary);
}
.hero__chart-callout-mobile__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}
.hero__chart-callout-mobile__text strong {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
}
.chart-gauges__scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 2px;
  padding: 0 1px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.chart-gauges__scale span:nth-child(1),
.chart-gauges__scale span:nth-child(6) {
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chart-gauge {
  opacity: 0;
  transform: translateY(8px);
  animation: gaugeIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.58s + var(--gauge-i) * 0.1s);
}
.chart-gauge__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.chart-gauge__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chart-gauge__year {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.chart-gauge__ctx {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.chart-gauge__ctx sup {
  font-size: 0.72em;
}
.chart-gauge__val {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.chart-gauge__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}
.chart-gauge__fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--primary);
  animation: gaugeFill 0.75s cubic-bezier(0.37, 0, 0.18, 1) forwards;
  animation-delay: calc(0.68s + var(--gauge-i) * 0.1s);
}
.chart-gauge--last .chart-gauge__fill {
  background: var(--primary);
}
.chart-gauge--last .chart-gauge__val {
  color: var(--secondary);
}
.chart-gauges__legend {
  margin: 4px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@keyframes gaugeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gaugeFill {
  to { width: calc(var(--pct) * 1%); }
}
.hero__chart-grid line {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 1;
  opacity: 0;
  animation: chartGridIn 0.35s ease forwards;
}
.hero__chart-grid line:nth-child(1) { animation-delay: 0.48s; }
.hero__chart-grid line:nth-child(2) { animation-delay: 0.54s; }
.hero__chart-grid line:nth-child(3) { animation-delay: 0.60s; }
.hero__chart-grid line:nth-child(4) { animation-delay: 0.66s; }
.hero__chart-axis,
.hero__chart-labels {
  opacity: 0;
  animation: chartFadeIn 0.5s ease forwards;
  animation-delay: 1.65s;
}
.hero__chart-axis-y,
.hero__chart-tick {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-mute);
  font-weight: 500;
}
.hero__chart-axis-y {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__chart-tick { text-anchor: end; }
.hero__chart-line {
  stroke: var(--primary);
  vector-effect: non-scaling-stroke;
  opacity: 1;
}
.hero__chart-callout {
  opacity: 0;
  animation: chartFadeIn 0.55s ease forwards;
  animation-delay: 1.58s;
}
.hero__chart-callout__arrow {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: chartFadeIn 0.55s ease forwards;
  animation-delay: 1.52s;
}
.hero__chart-callout__box {
  fill: rgba(255, 255, 255, 0.94);
  stroke: var(--primary);
  stroke-width: 2;
}
.hero__chart-callout__icon polyline {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__chart-callout__text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  fill: var(--primary);
}
.hero__chart-callout__stat {
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
}
.hero__chart-spark__line {
  stroke: var(--secondary);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0;
  animation: chartSparkIn 0.3s ease forwards;
  animation-delay: 1.72s;
}
.hero__chart-spark__line:nth-child(2) { animation-delay: 1.78s; }
.hero__chart-spark__line:nth-child(3) { animation-delay: 1.84s; }
@keyframes chartSparkIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes chartGridIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes chartFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__chart-point {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: chartPointIn 0.42s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}
.hero__chart-point[data-i="0"] { animation-delay: 0.62s; }
.hero__chart-point[data-i="1"] { animation-delay: 0.82s; }
.hero__chart-point[data-i="2"] { animation-delay: 1.02s; }
.hero__chart-point[data-i="3"] { animation-delay: 1.22s; }
.hero__chart-point[data-i="4"] { animation-delay: 1.38s; }
.hero__chart-point[data-i="5"] { animation-delay: 1.52s; }
@keyframes chartPointIn {
  from { opacity: 0; transform: scale(0.35); }
  to   { opacity: 1; transform: scale(1); }
}
.hero__chart-dot {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 3;
}
.hero__chart-dot--last { fill: var(--secondary); }
.hero__chart-val {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  fill: var(--primary);
  text-anchor: middle;
}
.hero__chart-val--last { fill: var(--secondary); }
.hero__chart-year {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}
.hero__chart-ctx {
  font-family: var(--font-body);
  font-size: 8px;
  fill: var(--ink-soft);
  text-anchor: middle;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .hero__chart-grid line,
  .hero__chart-axis,
  .hero__chart-labels,
  .hero__chart-line,
  .hero__chart-point,
  .hero__chart-callout,
  .hero__chart-callout__arrow,
  .hero__chart-spark__line,
  .chart-gauge,
  .chart-gauge__fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .chart-gauge__fill { width: calc(var(--pct) * 1%); }
  .waves-vote-gauge,
  .waves-vote-gauge__fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .waves-vote-gauge__fill { width: calc(var(--pct) * 1%); }
  .hero__chart--waves .waves-chart__vote[data-waves-vote],
  .hero__chart--waves .waves-chart__delta,
  .hero__chart--waves .waves-chart__markers .waves-chart__marker {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (min-width: 768px) {
  .hero__chart {
    width: 100%;
  }
  .hero__chart-glass::after {
    left: -8%;
    filter: blur(52px);
  }
  .hero__chart-val { font-size: 16px; }
  .hero__chart-ctx { font-size: 8.5px; }
}
@media (max-width: 640px) {
  .hero__chart-svg--landscape { display: none; }
  .hero__chart-gauges {
    display: flex;
  }
  .hero__chart-callout-mobile {
    display: flex;
  }
  .hero__chart-card {
    padding: 16px 14px 14px;
  }
}
@media (max-width: 520px) {
  .hero__chart-glass::after {
    top: -18px;
    bottom: -42px;
    left: -14%;
    filter: blur(36px);
    opacity: 0.55;
  }
  .hero__chart-svg--landscape .hero__chart-val { font-size: 12px; }
  .hero__chart-svg--landscape .hero__chart-year { font-size: 11px; }
  .hero__chart-svg--landscape .hero__chart-ctx { font-size: 7px; }
  .hero__chart-svg--landscape .hero__chart-dot { r: 8; stroke-width: 2.5; }
  .chart-gauge__val { font-size: 13px; }
  .chart-gauge__year { font-size: 12px; }
  .chart-gauge__ctx { font-size: 9px; }
  .hero__chart-gauges { gap: 12px; }
}

/* -- graphique vagues (aires superposées) ---------------------------- */
.hero__chart--waves .hero__chart-glass::after {
  opacity: 0.45;
  filter: blur(40px);
}
.hero__chart--waves .hero__chart-card {
  padding: clamp(16px, 2.5vw, 24px);
  overflow: visible;
  --waves-inset-left: calc(72 / 812 * 100%);
  --waves-inset-right: calc(20 / 812 * 100%);
}
.waves-chart__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 20px;
  row-gap: 12px;
  margin: 0 0 clamp(12px, 2vw, 16px);
  padding-inline: var(--waves-inset-left) var(--waves-inset-right);
}
.waves-chart__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.waves-chart__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(13px, 2.2vw, 15px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.waves-chart__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-mute);
}
.waves-chart__head-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  justify-self: end;
}
.waves-chart__legend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  padding: 0;
  text-align: right;
}
.waves-chart__legend-item {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-mute);
}
.waves-chart__legend-key {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.waves-chart__legend-key--pour { color: var(--vote-pour); }
.waves-chart__legend-key--contre { color: var(--success); }
.waves-chart__gauges {
  display: none;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.waves-vote-gauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  animation: gaugeIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.58s + var(--gauge-i) * 0.1s);
}
.waves-vote-gauge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.waves-vote-gauge__year {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.waves-vote-gauge__ctx {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-soft);
  text-align: right;
}
.waves-vote-gauge__ctx sup {
  font-size: 0.72em;
}
.waves-vote-gauge__delta {
  margin: -2px 0 0;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-mute);
}
.waves-vote-gauge__stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.waves-vote-gauge__stat {
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.waves-vote-gauge__label {
  font-size: 10.5px;
  letter-spacing: -0.01em;
}
.waves-vote-gauge__stat--pour { color: var(--vote-pour); }
.waves-vote-gauge__stat--contre { color: var(--success); }
.waves-vote-gauge__track {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.14);
}
.waves-vote-gauge__fill {
  width: 0;
  height: 100%;
  flex-shrink: 0;
  animation: gaugeFill 0.75s cubic-bezier(0.37, 0, 0.18, 1) forwards;
  animation-delay: calc(0.68s + var(--gauge-i) * 0.1s);
}
.waves-vote-gauge__fill--contre {
  animation-delay: calc(0.74s + var(--gauge-i) * 0.1s);
}
.waves-vote-gauge__fill--pour {
  background: linear-gradient(90deg, rgba(192, 57, 43, 0.92), var(--vote-pour));
}
.waves-vote-gauge__fill--contre {
  background: linear-gradient(90deg, rgba(46, 139, 87, 0.92), var(--success));
}
.waves-vote-gauge--last {
  padding-bottom: 2px;
}
.waves-chart__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  overflow: visible;
}
.waves-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.waves-chart__plot-bg {
  display: none;
}
.waves-chart__grid-line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.waves-chart__tick {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  fill: var(--ink-mute);
  text-anchor: end;
  font-variant-numeric: tabular-nums;
}
.waves-chart__vote-val {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2.5px;
}
.waves-chart__vote-val--pour { fill: var(--vote-pour); }
.waves-chart__vote-val--contre { fill: var(--success); }
.waves-chart__vote-stem {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 0.75;
  stroke-linecap: round;
}
.waves-chart__vote-stem--date {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-dasharray: 1.5 3.5;
}
.waves-chart__delta {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 500;
  fill: var(--ink-mute);
  text-anchor: middle;
  letter-spacing: 0.01em;
  opacity: 0;
}
.waves-chart__vote-year {
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}
.waves-chart__vote-ctx {
  font-family: var(--font-body);
  font-size: 7px;
  fill: var(--ink-mute);
  text-anchor: middle;
}
.waves-chart__area--contre {
  fill: url(#waves-grad-contre);
}
.waves-chart__area--pour {
  fill: url(#waves-grad-pour);
}
.waves-chart__line {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.waves-chart__line--contre {
  stroke: var(--success);
  stroke-width: 1.75;
  opacity: 0.9;
}
.waves-chart__line--pour {
  stroke: var(--vote-pour);
  stroke-width: 2;
}
.waves-chart__marker {
  stroke: #fff;
  stroke-width: 1;
}
.waves-chart__marker--pour { fill: var(--vote-pour); }
.waves-chart__marker--contre {
  fill: var(--success);
  stroke-width: 1.25;
}
.waves-chart__pulses {
  opacity: 0;
  pointer-events: none;
}
.hero__chart--waves.waves-final-pulse .waves-chart__pulses {
  opacity: 1;
}
.waves-chart__pulse {
  fill: none;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: wavesPulse 3s ease-out infinite;
}
.waves-chart__pulse--pour { stroke: var(--vote-pour); stroke-opacity: 0.45; }
.waves-chart__pulse--contre { stroke: var(--success); stroke-opacity: 0.45; }
@keyframes wavesPulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* -- séquence d'animation : pilotée en JS (initWavesChartAnim) -------- */
.hero__chart--waves .waves-chart__vote[data-waves-vote],
.hero__chart--waves .waves-chart__markers .waves-chart__marker {
  opacity: 0;
}
.hero__chart--waves.waves-seq-done .waves-chart__vote[data-waves-vote],
.hero__chart--waves.waves-seq-done .waves-chart__markers .waves-chart__marker {
  opacity: 1;
}
.hero__chart--waves.waves-final-pulse .waves-chart__delta,
.hero__chart--waves.waves-seq-done .waves-chart__delta {
  animation: wavesDeltaIn 0.4s ease forwards;
}
@keyframes wavesDeltaIn {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .waves-chart__pulse { animation: none !important; opacity: 0 !important; }
}
@media (max-width: 720px) {
  .waves-chart__tick { font-size: 8px; }
  .waves-chart__vote-val { font-size: 8.5px; stroke-width: 2px; }
  .waves-chart__vote-year { font-size: 9.5px; }
  .waves-chart__vote-ctx { font-size: 6.5px; }
  .waves-chart__delta { font-size: 7px; }
}
@media (max-width: 640px) {
  .waves-chart__head {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 10px;
    padding-inline: 0;
  }
  .waves-chart__svg {
    display: none;
  }
  .waves-chart__gauges {
    display: flex;
  }
  .waves-chart__head-end {
    align-items: flex-start;
    justify-self: start;
    width: 100%;
  }
  .waves-chart__legend {
    align-items: flex-start;
    text-align: left;
  }
  .waves-chart__legend-item { font-size: 10px; }
  .waves-chart__title { font-size: 13px; }
  .waves-chart__note { font-size: 10px; }
  .waves-vote-gauge__stat { font-size: 11px; }
  .waves-vote-gauge__label { font-size: 10px; }
  .waves-vote-gauge__track { height: 9px; }
  .waves-chart__gauges { gap: 12px; }
}

/* -- actions : pills côte à côte (colonne en mobile) ------------------ */
.hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.hero-cta__title {
  font: inherit;
  letter-spacing: inherit;
}
.hero-cta__title strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero-cta--primary {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 28px -10px rgba(185, 51, 123, 0.5);
}
.hero-cta--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 16px 36px -12px rgba(185, 51, 123, 0.58);
}
.hero-cta--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 6px 16px -8px rgba(159, 42, 106, 0.45);
}

.hero-cta--secondary {
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
.hero-cta--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(15, 23, 42, 0.16);
}
.hero-cta--secondary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.12);
}

@media (max-width: 767px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 360px;
  }
  .hero-cta {
    width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (min-width: 768px) {
  .hero { padding-left: var(--container-px-tablet); padding-right: var(--container-px-tablet); }
  .hero__actions { gap: 12px; }
  .hero-cta {
    min-height: 56px;
    padding: 15px 32px;
    font-size: 15.5px;
  }
}
/* === Shimmer text (Transitions.dev) ================================== */
:root {
  --shimmer-dur: 2000ms;
  --shimmer-base: #6e6e6e;
  --shimmer-highlight: #ededed;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
}
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent              0%,
    transparent             40%,
    var(--shimmer-highlight) 50%,
    transparent             60%,
    transparent            100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

@media (min-width: 1100px) {
  .hero { padding-left: var(--container-px-desktop); padding-right: var(--container-px-desktop); }
}

/* -- section "priorité" ----------------------------------------------- */
.priority-card {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.priority-card:hover { border-color: var(--secondary); transform: translateY(-1px); }
.priority-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--secondary-soft); color: var(--secondary-dark);
  display: grid; place-items: center; flex-shrink: 0;
}
.priority-card__body { flex: 1; min-width: 0; }
.priority-card__title { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.priority-card__hint { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.priority-card__chevron { color: var(--ink-mute); flex-shrink: 0; }

/* -- sections accueil : un seul écart entre blocs (--space-section-y) ----
   Chaque .section ajoute son padding-top ; pas de margin-top cumulatif. */
.section {
  padding: var(--space-section-y) var(--container-px-mobile) 0;
}
.section__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; }

.section__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-title-mb);
}

.steps { display: grid; gap: var(--space-stack); }
.step {
  display: flex; gap: 14px;
  padding: var(--space-card-pad);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(185, 51, 123, 0.08);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 4px 16px -10px rgba(185, 51, 123, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.step:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 24px -10px rgba(185, 51, 123, 0.18);
}
.step__num {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(237, 150, 77, 0.18) 0%, rgba(185, 51, 123, 0.14) 100%);
  color: var(--primary);
  border-radius: 12px; display: grid; place-items: center;
}
.step__num span {
  position: absolute; top: -6px; left: -6px;
  width: 20px; height: 20px; border-radius: 20px;
  background: var(--primary); color: var(--primary-ink);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px -2px rgba(185, 51, 123, 0.35);
}
.step__title { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.step__desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

/* -- responsive accueil ----------------------------------------------- */
@media (min-width: 768px) {
  .section { padding-left: var(--container-px-tablet); padding-right: var(--container-px-tablet); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { flex-direction: column; }
}
@media (min-width: 1100px) {
  .section { padding-left: var(--container-px-desktop); padding-right: var(--container-px-desktop); }
}

/* =====================================================================
   FAQ — liquid glass
   ===================================================================== */

.faq__head {
  width: 100%;
  margin: 0 auto var(--space-hero-block);
  text-align: center;
}
.faq__kicker {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--space-hero-stack);
  line-height: 1.3;
}

.faq-cats {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
}

/* === Niveau 1 : catégorie — carte glass englobante ================== */
.faq-cat {
  position: relative;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  backdrop-filter: blur(12px) saturate(165%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 24px -14px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.faq-cat:hover {
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 12px 28px -12px rgba(15, 23, 42, 0.14);
}
.faq-cat[open] {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 16px 36px -14px rgba(15, 23, 42, 0.16);
}

/* couleur d'accent injectée selon la modifier (--pink ou --orange)     */
.faq-cat--pink {
  --faq-color: var(--primary);
  --faq-color-dark: var(--primary-dark);
  --faq-color-faint: rgba(185, 51, 123, 0.06);
  --faq-color-soft: rgba(185, 51, 123, 0.14);
  --faq-color-strong: rgba(185, 51, 123, 0.22);
  --faq-color-grad: linear-gradient(135deg, rgba(185, 51, 123, 0.16) 0%, rgba(237, 150, 77, 0.10) 100%);
  --faq-glass-border: rgba(185, 51, 123, 0.10);
}
.faq-cat--orange {
  --faq-color: var(--secondary-dark);
  --faq-color-dark: #B36830;
  --faq-color-faint: rgba(237, 150, 77, 0.06);
  --faq-color-soft: rgba(237, 150, 77, 0.14);
  --faq-color-strong: rgba(237, 150, 77, 0.22);
  --faq-color-grad: linear-gradient(135deg, rgba(237, 150, 77, 0.18) 0%, rgba(185, 51, 123, 0.08) 100%);
  --faq-glass-border: rgba(237, 150, 77, 0.12);
}
.faq-cat--pink,
.faq-cat--orange {
  border-color: color-mix(in srgb, var(--faq-glass-border) 55%, rgba(255, 255, 255, 0.72));
}
.faq-cat--pink[open],
.faq-cat--orange[open] {
  border-color: color-mix(in srgb, var(--faq-glass-border) 70%, rgba(255, 255, 255, 0.82));
}

.faq-cat__head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.faq-cat__head::-webkit-details-marker { display: none; }
.faq-cat__head::marker { display: none; content: ""; }

.faq-cat__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  font-size: 20px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.faq-cat__icon .emoji { width: 22px; height: 22px; display: block; }

.emoji {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.18em;
  object-fit: contain;
}
.faq-cat__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.faq-cat__meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  color: var(--faq-color);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.20s ease, border-color 0.20s ease;
}
.faq-cat__meta-count { line-height: 1; }
.faq-cat__meta-arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-cat:hover .faq-cat__meta {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.72);
}
.faq-cat[open] .faq-cat__meta-arrow { transform: rotate(180deg); }

.faq-cat__body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: faqFadeIn 0.28s ease;
}
@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Niveau 2 : question — carte glass imbriquée ==================== */
.faq-q {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px) saturate(155%);
  backdrop-filter: blur(10px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 14px -12px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  transition: box-shadow 0.20s ease, border-color 0.18s ease, background 0.18s ease;
}
.faq-q:hover {
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 18px -10px rgba(15, 23, 42, 0.12);
}
.faq-q[open] {
  background: rgba(255, 255, 255, 0.74);
  border-color: color-mix(in srgb, var(--faq-glass-border) 45%, rgba(255, 255, 255, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 8px 22px -12px rgba(15, 23, 42, 0.14);
}

.faq-q__head {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.003em;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease;
}
.faq-q__head:hover { color: var(--ink); }
.faq-q__head::-webkit-details-marker { display: none; }
.faq-q__head::marker { display: none; content: ""; }
.faq-q__head > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.faq-q__chev {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: var(--ink-soft);
  margin-top: 1px;
  transition: transform 0.25s ease, background 0.20s ease, color 0.20s ease, border-color 0.20s ease;
}
.faq-q__head:hover .faq-q__chev {
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
}
.faq-q[open] .faq-q__chev {
  transform: rotate(45deg);
  background: var(--faq-color);
  border-color: transparent;
  color: #FFFFFF;
}
.faq-q[open] .faq-q__head { color: var(--ink); }

.faq-q__answer {
  padding: 0 16px 16px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  animation: faqFadeIn 0.28s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  font-feature-settings: 'kern' 1, 'liga' 1;
}
.faq-q__answer > p { margin: 0 0 12px; text-wrap: pretty; }
.faq-q__answer > p:last-child { margin-bottom: 0; }
.faq-q__answer strong { color: var(--ink); font-weight: 600; }
.faq-q__answer em { color: var(--ink); font-style: italic; }

/* === Tabs — pilule glass ============================================ */
.faq-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 12px 0 14px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.10s ease, box-shadow 0.18s ease;
}
.faq-tab svg { flex-shrink: 0; }
.faq-tab:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}
.faq-tab.is-active {
  background: var(--faq-color);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.18);
}
.faq-tab.is-active:hover { filter: brightness(1.05); }
.faq-tab:active { transform: scale(0.97); }

.faq-tab-panel { display: none; }
.faq-tab-panel.is-active { display: block; animation: faqFadeIn 0.22s ease; }
.faq-tab-panel p {
  margin: 0 0 12px;
  text-wrap: pretty;
  line-height: 1.7;
}
.faq-tab-panel p:last-child { margin-bottom: 0; }
.faq-tab-panel strong { color: var(--ink); font-weight: 600; }
.faq-tab-panel em { color: var(--ink); font-style: italic; }

.faq-tab-panel--ecrire {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.faq-tab-panel--ecrire > p:not(.faq-ecrire__intro) {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.7;
}
.faq-tab-panel--ecrire .btn { margin-top: 14px; }

.faq-ecrire__intro {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faq-color);
  margin: 0 0 10px;
  line-height: 1.3;
}

/* CTA du panneau écrire — reprend la couleur d'accent de la catégorie
   (rose pour les cats pink, orange pour les cats orange) au lieu du
   primary global. Spécificité (0,2,0) > .btn--primary (0,1,0).
   Reprend également l'animation du hero-cta--primary :
   lift + icône qui se penche + shimmer texte.                         */
.btn.faq-ecrire__cta {
  position: relative;
  overflow: hidden;
  background: var(--faq-color);
  border-color: var(--faq-color);
  color: #FFFFFF;
  width: 100%;
  transition:
    transform    0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background   0.18s ease,
    border-color 0.18s ease,
    box-shadow   0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.faq-ecrire__cta:hover {
  background: var(--faq-color-dark);
  border-color: var(--faq-color-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px var(--faq-color-strong);
}
.btn.faq-ecrire__cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.10s;
}
.btn.faq-ecrire__cta svg {
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.faq-ecrire__cta:hover svg {
  transform: translateX(2px) rotate(-6deg);
}

/* shimmer texte — repris du hero-cta--primary (bande crème qui défile
   sur le texte blanc, accélérée au hover).                            */
.btn.faq-ecrire__cta .t-shimmer {
  --shimmer-base: #FFFFFF;
  --shimmer-highlight: #FFE5B0;
  --shimmer-dur: 3000ms;
}
.btn.faq-ecrire__cta:hover .t-shimmer {
  --shimmer-dur: 1200ms;
}

@media (min-width: 768px) {
  .btn.faq-ecrire__cta { width: auto; }
}

/* === Ressource à partager ============================================
   Carte attachée au panneau « Écrire » : un trombone + un titre,
   parfois cliquable (article), parfois listing de références sans URL.
   Reprend l'esthétique glass des autres cartes du site.               */
.faq-resource {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(155%);
  backdrop-filter: blur(10px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 4px 14px -12px rgba(15, 23, 42, 0.10);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
a.faq-resource:hover {
  background: rgba(255, 255, 255, 0.68);
  border-color: color-mix(in srgb, var(--faq-glass-border) 55%, rgba(255, 255, 255, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 24px -12px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}
a.faq-resource:active { transform: translateY(0) scale(0.995); }

.faq-resource__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  margin-top: 1px;
}
.faq-resource__icon .emoji { width: 16px; height: 16px; }

.faq-resource__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-resource__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faq-color);
  line-height: 1.2;
}
.faq-resource__title {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.003em;
  text-wrap: pretty;
}
a.faq-resource:hover .faq-resource__title { color: var(--faq-color); }

.faq-resource__arrow {
  flex-shrink: 0;
  color: var(--faq-color);
  margin-top: 8px;
  opacity: 0.7;
  transition: transform 0.20s ease, opacity 0.18s ease;
}
a.faq-resource:hover .faq-resource__arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* variante « liste » : plusieurs références, parfois sans URL --------- */
.faq-resource--list { align-items: flex-start; }
.faq-resource__refs {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.faq-resource__refs li { margin-bottom: 8px; }
.faq-resource__refs li:last-child { margin-bottom: 0; }
.faq-resource__refs li::marker { color: var(--faq-color); }
.faq-resource__refs a {
  color: var(--faq-color);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--faq-color-soft);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
.faq-resource__refs a:hover {
  text-decoration-color: var(--faq-color);
}
.faq-resource__refs em { font-style: italic; color: var(--ink); }
/* em à l'intérieur d'un lien : hérite de la couleur du lien (sinon
   « Globe and Mail » devenait noir au milieu d'un lien rose).        */
.faq-resource__refs a em { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .faq-cat__body, .faq-q__answer { animation: none; }
  .faq-cat__meta-arrow, .faq-q__chev { transition: none; }
  .faq-resource, .faq-resource__arrow { transition: none; }
}

@media (min-width: 768px) {
  .faq__head { margin-bottom: var(--space-hero-block); }

  .faq-cats { gap: 18px; }

  .faq-cat__head { padding: 16px 20px; gap: 14px; }
  .faq-cat__icon { width: 40px; height: 40px; border-radius: 12px; }
  .faq-cat__icon .emoji { width: 24px; height: 24px; }
  .faq-cat__title { font-size: 16.5px; }
  .faq-cat__meta { padding: 5px 11px 5px 12px; font-size: 11.5px; gap: 7px; }
  .faq-cat__body { padding: 0 16px 16px; gap: 10px; }

  .faq-q__head { font-size: 15px; padding: 16px 18px; line-height: 1.5; }
  .faq-q__answer { font-size: 15px; padding: 0 18px 18px; }
  .faq-tabs { margin: 14px 0 16px; }
  .faq-tab { padding: 9px 16px; font-size: 14px; }
  .faq-tab-panel p { margin: 0 0 14px; }

  .faq-tab-panel--ecrire > p:not(.faq-ecrire__intro) { font-size: 15px; }
  .faq-ecrire__intro { font-size: 11px; margin: 0 0 10px; }
  .faq-tab-panel--ecrire .btn { margin-top: 16px; }

  .faq-resource { margin-top: 16px; padding: 14px 16px; gap: 12px; }
  .faq-resource__title { font-size: 14.5px; }
  .faq-resource__refs { font-size: 14.5px; line-height: 1.65; }
}

/* =====================================================================
   SECTION PARTAGE — liquid glass
   ===================================================================== */

.share__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 22px 18px 20px;
  max-width: 720px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  backdrop-filter: blur(12px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 24px -16px rgba(15, 23, 42, 0.12);
  transition: box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.share__panel:hover {
  background: rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 12px 28px -14px rgba(15, 23, 42, 0.14);
}

.share__lead {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.share__lead strong { color: var(--ink); font-weight: 600; }

.share__url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  width: fit-content;
  max-width: 100%;
}
.share__url strong { color: var(--primary); font-weight: 700; }

.share__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-size: 13.5px; font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.005em;
  cursor: pointer;
  color: #FFFFFF;
  background: #000;
  text-decoration: none;
  min-height: 38px;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.share-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.22);
}
.share-btn svg { flex-shrink: 0; }

.share-btn--twitter  { background: #0F1419; }
.share-btn--facebook { background: #1877F2; }
.share-btn--whatsapp { background: #25D366; }
.share-btn--email    { background: var(--primary); }
.share-btn--copy {
  background: rgba(255, 255, 255, 0.52);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.share-btn--copy:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 16px -8px rgba(15, 23, 42, 0.16);
  filter: none;
}
.share-btn.is-done {
  background: var(--primary);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 16px -6px rgba(185, 51, 123, 0.45);
}

@media (min-width: 768px) {
  .share__panel { padding: 28px 28px 24px; }
  .share__lead { font-size: 15px; margin-bottom: 20px; }
  .share-btn { font-size: 14px; padding: 10px 18px; }
  .share-btn svg { width: 16px; height: 16px; }
}
/* sur petit écran, les 5 boutons sont rangés en grille 2 colonnes
   (largeur uniforme, alignement net), et "Copier le lien" — le seul
   libellé long — prend la pleine largeur sur la dernière ligne.    */
@media (max-width: 560px) {
  .share__panel { padding: 18px 14px 16px; }
  .share__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
    max-width: 360px;
    margin: 0 auto;
  }
  .share-btn { padding: 11px 12px; font-size: 13px; width: 100%; }
  .share-btn--copy { grid-column: 1 / -1; }
}

/* =====================================================================
   SECTION SOUTENIR L'ASSOCIATION — adhésion + don
   ---------------------------------------------------------------------
   Deux cartes-liens jumelles, l'une teintée primary (adhésion), l'autre
   secondary (don). Reprend le pattern .faq-resource (icône + body +
   chevron) pour rester cohérent avec le reste de la page.
   ===================================================================== */

.support__title {
  font-family: var(--font-head);
  font-weight: 700; font-size: 24px;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--ink);
  margin: 0 0 var(--space-stack);
}
.support__lead {
  text-align: center;
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--space-title-mb);
  letter-spacing: 0.005em;
}
.support__lead strong { color: var(--primary); font-weight: 600; }

.support__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-stack);
}

.support-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    transform     0.22s cubic-bezier(0.4, 0, 0.2, 1),
    border-color  0.18s ease,
    box-shadow    0.22s ease;
}
.support-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.support-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.support-card--membership .support-card__icon {
  background: var(--primary-soft);
  color: var(--primary);
}
.support-card--donation .support-card__icon {
  background: var(--secondary-soft);
  color: var(--secondary);
}
.support-card--membership:hover { border-color: var(--primary); }
.support-card--donation:hover   { border-color: var(--secondary); }

.support-card__body { min-width: 0; }
.support-card__kicker {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 4px;
}
.support-card--membership .support-card__kicker { color: var(--primary); }
.support-card--donation   .support-card__kicker { color: var(--secondary); }
.support-card__title {
  font-family: var(--font-head);
  font-weight: 600; font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}
.support-card__desc {
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 4px;
}

.support-card__arrow {
  color: var(--ink-mute);
  display: grid; place-items: center;
  transition: transform 0.22s ease, color 0.18s ease;
}
.support-card:hover .support-card__arrow { transform: translateX(3px); }
.support-card--membership:hover .support-card__arrow { color: var(--primary); }
.support-card--donation:hover   .support-card__arrow { color: var(--secondary); }

@media (min-width: 768px) {
  .support__title { font-size: 28px; }
  .support__lead { font-size: 15px; }
  .support__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .support-card { padding: 20px 22px; gap: 18px; }
  .support-card__title { font-size: 17px; }
}

/* =====================================================================
   FOOTER — minimal, centré autour du logo
   ===================================================================== */
.footer {
  padding: var(--space-section-y) var(--container-px-mobile) var(--space-band-y);
  background: transparent;
  border-top: none;
}
.footer__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  text-align: center;
}
.footer__logo {
  width: 38px; height: auto;
  display: block;
  opacity: 0.95;
}
.footer__brand {
  font-family: var(--font-head); font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.01em;
}
.footer__brand span { color: var(--ink-soft); font-weight: 400; }
.footer__note {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin: 0;
  letter-spacing: 0.02em;
}
.footer__legal {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-mute);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 160ms ease;
}
.footer__legal:hover,
.footer__legal:focus-visible { color: var(--ink); }

@media (min-width: 768px) {
  .footer { padding-left: var(--container-px-tablet); padding-right: var(--container-px-tablet); }
  .footer__logo { width: 42px; }
}

/* =====================================================================
   LISTE
   ===================================================================== */
/* En-tête unifiée : nav-bar + recherche + filtres dans un même bloc
   sticky avec un seul fond crème (aligné sur --surface-warm de la page)
   et une seule séparation en bas. */
.list-header {
  position: sticky; top: 0; z-index: 20;
  padding: 12px var(--container-px-mobile) 14px;
  background: rgba(255, 251, 248, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.list-header__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}

/* Nav embarquée dans la list-header : pas de padding propre, pas de
   margin, hérite du conteneur. */
.view-nav--embedded {
  padding: 0;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 2px;
}

.search-row { display: flex; gap: 10px; }
.search-box {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-box svg { color: var(--ink-soft); flex-shrink: 0; }
.search-box input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--ink);
}
.search-box__clear {
  border: none; background: transparent; color: var(--ink-mute);
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px;
}
.search-box__clear:hover { color: var(--ink); background: var(--line); }

.filter-btn {
  position: relative;
  flex-shrink: 0;
  min-width: 48px; padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.filter-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-btn.is-open {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.filter-btn.has-filters:not(.is-open) {
  border-color: var(--primary);
  background: var(--surface);
  color: var(--primary);
}
.filter-btn__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--primary); color: var(--primary-ink);
  font-size: 11px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--surface-warm);
}
.filter-btn__count[hidden] { display: none; }

.chips {
  display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  transition: all 0.15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.chip.is-active.is-accent { background: var(--secondary); border-color: var(--secondary); color: var(--secondary-ink); }

.filters-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
.filters-grid[hidden] { display: none; }
@media (min-width: 640px) {
  /* 2 selects (département + groupe) → 2 colonnes équilibrées,
     pas de col vide résiduelle comme avec repeat(3, 1fr).            */
  .filters-grid { grid-template-columns: repeat(2, 1fr); }
}

.field {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  transition: border-color 0.15s ease;
}
.field:focus-within { border-color: var(--primary); }
.field__label {
  position: absolute; top: 7px; left: 13px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft);
  pointer-events: none;
}
.field select, .field input {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 22px 32px 8px 12px;
  border: none; outline: none; background: transparent;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  border-radius: 11px;
}
.field--select::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}


/* ── Filtres "pill" par position de vote ───────────────────────────── */
.vote-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  /* sur petits écrans, les 3 boutons peuvent enrouler proprement
     sans qu'aucun ne devienne disproportionné. */
}
.vote-filter__btn {
  flex: 0 1 auto;
}
.vote-filter__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.vote-filter__btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.vote-filter__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 7px;
  opacity: 0;
  margin-right: -8px;
  transform: scale(0.6);
  transition: opacity 0.15s ease, margin 0.15s ease, transform 0.15s ease;
}
.vote-filter__btn.is-active .vote-filter__dot {
  opacity: 1;
  margin-right: 0;
  transform: scale(1);
}

/* États actifs : alignés sur la palette du site
   - Indécis  → secondary orange (= cible prioritaire de la campagne)
   - Pour     → vote-pour rouge (= ce que l'asso veut éviter, alerte)
   - Contre   → success (= ce que l'asso soutient, couleur positive) */
.vote-filter__btn.is-active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.vote-filter__btn--indecis.is-active {
  color: var(--secondary-dark);
  border-color: var(--secondary);
  background: var(--secondary-soft);
}
.vote-filter__btn--pour.is-active {
  color: var(--vote-pour-dark);
  border-color: var(--vote-pour);
  background: var(--vote-pour-soft);
}
.vote-filter__btn--contre.is-active {
  color: var(--success-dark);
  border-color: var(--success);
  background: var(--success-soft);
}

@media (max-width: 560px) {
  .vote-filter { gap: 6px; }
  .vote-filter__btn { padding: 7px 12px; font-size: 13px; gap: 6px; }
}
/* ultra-small (≤ 380px) : on resserre les pills sans tronquer les labels,
   le wrap propre les fait passer sur 2 lignes au pire. */
@media (max-width: 380px) {
  .vote-filter { gap: 5px; }
  .vote-filter__btn { padding: 7px 10px; font-size: 12.5px; min-height: 34px; }
}

.list-summary {
  padding: 14px var(--container-px-mobile) 4px;
  color: var(--ink-soft);
}
.list-summary__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 4px;
}
.list-summary__head {
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
}
.list-summary__head strong {
  color: var(--ink); font-weight: 700;
}
.list-summary em { font-style: normal; color: var(--primary); font-weight: 600; }

.list-grid { padding: 8px var(--container-px-mobile) 24px; }
.list-grid__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .list-header { padding: 16px var(--container-px-tablet) 18px; }
  .list-summary { padding: 16px var(--container-px-tablet) 8px; }
  .list-grid { padding: 8px var(--container-px-tablet) 36px; }
  .list-grid__inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 960px) {
  .list-header { padding: 18px var(--container-px-desktop) 20px; }
  .list-summary { padding: 18px var(--container-px-desktop) 10px; }
  .list-grid { padding: 10px var(--container-px-desktop) 48px; }
}

.dep-card {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  width: 100%;
}
.dep-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dep-card__avatar {
  width: 52px; height: 52px; border-radius: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}

/* -- avatar générique : photo officielle en couverture, initiales en
   fallback. Le span parent porte déjà les initiales centrées. Si la
   photo ne charge pas (404, hors-ligne, etc.), l'<img> est retirée
   par onerror dans le HTML et seules les initiales restent visibles. */
.avatar { position: relative; overflow: hidden; }
.avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  background: inherit;
}
.dep-card__body { flex: 1 1 auto; min-width: 0; }
.dep-card__top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
  min-width: 0;
}
.dep-card__name {
  flex: 1 1 auto; min-width: 0;
  font-weight: 600; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dep-card__circo {
  font-size: 12.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dep-card__chevron { color: var(--ink-mute); flex-shrink: 0; }

/* -- étiquette parti --------------------------------------------------- */
.parti-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.parti-tag__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.parti-tag--full {
  padding: 4px 9px;
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px;
}

/* -- état vide --------------------------------------------------------- */
.empty {
  text-align: center; padding: 56px 20px; color: var(--ink-soft);
  grid-column: 1 / -1;
}
.empty svg { display: inline-block; margin-bottom: 12px; opacity: 0.6; }
.empty p { font-size: 14px; margin: 0; }

/* =====================================================================
   FICHE DÉPUTÉ (profil)
   ===================================================================== */
.profile {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 120px; /* place pour le CTA fixe en bas */
}
@media (min-width: 720px) { .profile { padding-bottom: 140px; } }
@media (min-width: 960px) { .profile { padding-bottom: 180px; } }

/* — header sticky, même fond crème que la list-header pour unifier ---- */
.profile-header {
  position: sticky; top: 0; z-index: 20;
  padding: 12px var(--container-px-mobile);
  background: rgba(255, 251, 248, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.profile-header__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; }

/* — hero non sticky : identité + badge de vote --------------------- */
.profile-hero {
  padding: 28px var(--container-px-mobile) 24px;
}
.profile-hero__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
}
.profile-hero__identity {
  display: flex; align-items: center; gap: 18px;
  min-width: 0;
}
.profile-hero__avatar {
  width: 76px; height: 76px; border-radius: 50%;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 26px;
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.profile-hero__info { min-width: 0; flex: 1; }
.profile-hero__name {
  font-family: var(--font-head);
  font-size: clamp(22px, 4.5vw, 34px);
  font-weight: 700; color: var(--ink);
  margin: 0 0 8px; line-height: 1.12;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.profile-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 6px;
}
.profile-hero__location {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 0;
  font-size: 13.5px; color: var(--ink-soft);
}
.profile-hero__location svg { flex-shrink: 0; }

/* — badge "position de vote" mis en avant -------------------------- */
.profile-vote {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid;
  background: var(--surface);
}
.profile-vote__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.profile-vote__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-vote__label {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.profile-vote__sub {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.profile-vote__sub strong { color: var(--ink); font-weight: 700; }

.profile-vote--indecis { color: var(--secondary); border-color: var(--secondary); background: var(--secondary-soft); }
.profile-vote--nouveau { color: var(--secondary); border-color: var(--secondary); background: var(--secondary-soft); }
.profile-vote--pour    { color: var(--vote-pour); border-color: var(--vote-pour); background: var(--vote-pour-soft); }
.profile-vote--contre  { color: var(--success);   border-color: var(--success);   background: var(--success-soft); }

/* — corps : sections de contenu ----------------------------------- */
.profile-body {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-px-mobile);
  display: flex; flex-direction: column; gap: 18px;
}
@media (min-width: 720px) {
  .profile-body { padding: 0 var(--container-px-tablet); gap: 22px; }
}
@media (min-width: 960px) {
  .profile-body { padding: 0; }
}
.profile-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
}
.profile-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.profile-section__title {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.profile-section__head .profile-section__title { margin: 0; }
.profile-section__hint {
  font-size: 12px; color: var(--ink-mute);
  font-style: italic;
}
.profile-section__lead {
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-soft);
}
.profile-section__lead strong {
  font-weight: 700; color: var(--ink);
}

/* — liste de contacts unifiée ------------------------------------- */
.profile-contacts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.profile-contact {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.profile-contact:last-child { border-bottom: none; }
.profile-contact__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-warm);
  color: var(--ink-soft);
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.profile-contact__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 4px;
  background: none; border: none;
  text-align: left; text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.profile-contact__main:hover { background: var(--surface-warm); }
.profile-contact__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.profile-contact__value {
  font-size: 13.5px; color: var(--ink);
  /* coupe seulement aux limites raisonnables (entre lettres) si vraiment
     nécessaire — évite la coupure systématique syllabe-par-syllabe de
     `word-break: break-all`, particulièrement laide sur les e-mails.    */
  overflow-wrap: anywhere;
  word-break: normal;
  display: block;
  min-width: 0;
}
.profile-contact__value span { font-weight: 500; }
.profile-contact__copy {
  width: 32px; height: 32px; border-radius: 9px; border: none;
  background: transparent; color: var(--ink-mute);
  display: grid; place-items: center;
  flex-shrink: 0; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.profile-contact__copy:hover { background: var(--surface-warm); color: var(--ink); }
.profile-contact__copy.is-done { color: var(--success-dark); }

.profile-contacts-empty {
  margin: 0; padding: 14px;
  background: var(--surface-warm);
  border-radius: 10px;
  font-size: 13.5px; color: var(--ink-soft);
  text-align: center;
}

/* — CTA fixe en bas du viewport ----------------------------------- */
.profile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 14px var(--container-px-mobile) calc(14px + env(safe-area-inset-bottom));
  background: rgba(255, 251, 248, 0.95);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}
.profile-cta__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; }

@media (min-width: 720px) {
  .profile-header { padding: 14px var(--container-px-tablet); }
  .profile-hero { padding: 32px var(--container-px-tablet) 26px; }
  .profile-cta { padding: 16px var(--container-px-tablet) calc(16px + env(safe-area-inset-bottom)); }
  .profile-hero__avatar { width: 88px; height: 88px; font-size: 30px; }
}
@media (min-width: 960px) {
  .profile-header { padding: 16px var(--container-px-desktop); }
  .profile-hero { padding: 40px var(--container-px-desktop) 30px; }
  .profile-hero__inner { gap: 26px; }
  .profile-cta {
    padding: 18px var(--container-px-desktop) calc(18px + env(safe-area-inset-bottom));
  }
  .profile-cta__inner { display: flex; justify-content: center; }
  .profile-cta__inner .btn { width: auto; min-width: 320px; }
}

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 13px 18px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  line-height: 1.1; cursor: pointer; text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn--full { width: 100%; }
.btn--lg { padding: 15px 22px; font-size: 16px; border-radius: 14px; }
.btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }

.btn--primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--secondary { background: var(--secondary); color: var(--secondary-ink); border-color: var(--secondary); }
.btn--secondary:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); }
.btn--ghost { background: var(--surface-cool); color: var(--ink); border-color: transparent; }
.btn--ghost:hover { background: var(--line); }

/* =====================================================================
   MODALE (recherche par code)
   ===================================================================== */
#finder-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh;
  z-index: 200;
  pointer-events: none;
}
#finder-root:not(:empty) {
  pointer-events: auto;
  background: var(--surface);
}
.sheet-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
}
html.is-finder-open,
html.is-finder-open body {
  overflow: hidden;
}
html.is-finder-open #root {
  visibility: hidden;
}
.sheet {
  width: 100%;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 50px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  animation: slideUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 719px) {
  .sheet-overlay {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: stretch;
    align-items: stretch;
    padding: 0;
    background: var(--surface);
    animation: none;
  }
  .sheet {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .sheet__inner {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding-top: max(14px, env(safe-area-inset-top, 0px));
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .finder-results {
    flex: 1 1 auto;
    min-height: 0;
  }
}
.sheet__head,
.sheet__lead,
.finder-search,
.finder-selected,
.sheet__noresult {
  flex-shrink: 0;
}
.sheet__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 14px 22px max(28px, env(safe-area-inset-bottom));
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet__title { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }
.sheet__lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.45; }
.sheet__input {
  width: 100%; padding: 16px 18px; font-size: 22px;
  letter-spacing: 0.18em; font-weight: 700; text-align: center;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface-warm); color: var(--ink); outline: none;
}
.sheet__input:focus { border-color: var(--primary); }
.sheet__hint { font-size: 13px; color: var(--ink-soft); text-align: center; margin: 14px 0 4px; }
.sheet__results { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sheet__results-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.sheet__noresult { text-align: center; padding: 18px 8px; }
.sheet__noresult p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; }

/* -- champ de recherche unifié (code OU nom) -------------------------- */
.finder-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-warm); border: 1.5px solid var(--line); border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.finder-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  background: var(--surface);
}
.finder-search__icon { color: var(--ink-soft); display: grid; place-items: center; flex-shrink: 0; }
.finder-search__input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.finder-search__clear {
  width: 26px; height: 26px; border-radius: 8px; border: none;
  background: var(--surface-cool); color: var(--ink-soft);
  display: grid; place-items: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.finder-search__clear:hover { background: var(--line); color: var(--ink); }

/* -- conteneur résultats : seul bloc scrollable dans la sheet flex --- */
.finder-results {
  margin-top: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.finder-results__head {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 4px 10px;
}
.finder-results__head strong { color: var(--ink); }

/* -- liste des départements ------------------------------------------- */
.finder-dept-list { display: flex; flex-direction: column; gap: 6px; }
.finder-dept {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  text-align: left; width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
  cursor: pointer;
}
.finder-dept:hover {
  border-color: var(--primary);
  background: var(--surface-warm);
  transform: translateY(-1px);
}
.finder-dept__code {
  display: grid; place-items: center;
  height: 32px; min-width: 38px; padding: 0 8px;
  border-radius: 9px;
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.finder-dept__name {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finder-dept__count {
  font-size: 12.5px; color: var(--ink-soft); font-weight: 500;
  white-space: nowrap;
}
.finder-dept__chevron { color: var(--ink-mute); display: grid; place-items: center; }

/* -- étape 2 : département sélectionné -------------------------------- */
.finder-selected {
  display: grid;
  grid-template-columns: 32px 44px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface-warm);
  border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 14px;
}
.finder-selected__back {
  width: 32px; height: 32px; border-radius: 9px; border: none;
  background: var(--surface); color: var(--ink-soft);
  display: grid; place-items: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.finder-selected__back:hover { color: var(--ink); background: var(--line); }
.finder-selected__code {
  display: grid; place-items: center;
  height: 32px; min-width: 38px; padding: 0 8px;
  border-radius: 9px;
  background: var(--primary); color: var(--primary-ink);
  font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.finder-selected__name {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finder-selected__count {
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: 999px;
  white-space: nowrap;
}

.mini-dep {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  text-align: left; width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  cursor: pointer;
  min-width: 0;
}
.mini-dep + .mini-dep { margin-top: 6px; }
.mini-dep:hover { border-color: var(--primary); background: var(--surface-warm); transform: translateY(-1px); }
.mini-dep__avatar {
  width: 40px; height: 40px; border-radius: 40px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.mini-dep__body { flex: 1 1 auto; min-width: 0; }
.mini-dep__name { font-weight: 600; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-dep__circo {
  font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-dep__chevron { color: var(--ink-mute); display: grid; place-items: center; flex-shrink: 0; }
/* sur écran étroit, le parti-tag à droite du mini-dep peut bouffer
   trop d'espace : on le masque dans le contexte « finder », l'info
   parti est de toute façon redondante avec la carte de détail.    */
@media (max-width: 480px) {
  .mini-dep > .parti-tag { display: none; }
}

@media (max-width: 719px) {
  .sheet__title { font-size: 20px; }
  .sheet__lead {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.4;
  }
}

@media (min-width: 720px) {
  .sheet-overlay {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--surface);
    animation: none;
  }
  .sheet {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .sheet__inner {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    height: 100%;
    padding-top: 24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .finder-results {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
@keyframes pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* =====================================================================
   SR ONLY (accessibilité)
   ===================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   RESPONSIVE FIXES — corrections transversales mobile / tablette
   =====================================================================
   Cette section regroupe les ajustements globaux qui ne tiennent pas
   à un composant unique : politique anti-zoom iOS sur les champs,
   cibles tactiles minimales, ajustements ultra-small (≤ 380px).      */

/* iOS Safari déclenche un zoom automatique sur le focus d'un input dont
   le font-size visuel est < 16px. On force 16px sur tous les champs
   en deçà du desktop. */
@media (max-width: 1023px) {
  .search-box input,
  .field select,
  .field input,
  .finder-search__input,
  .sheet__input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* Cibles tactiles minimales (WCAG 2.5.5 / Apple HIG) : au moins 38–44 px
   pour les actions secondaires (close/clear/copy).                    */
@media (hover: none) and (pointer: coarse) {
  .icon-btn { width: 42px; height: 42px; }
  .search-box__clear { width: 32px; height: 32px; }
  .finder-search__clear { width: 32px; height: 32px; }
  .finder-selected__back { width: 36px; height: 36px; }
  .profile-contact__copy { width: 38px; height: 38px; }
}

/* Empêche les inputs/selects de provoquer un débordement horizontal en
   cas de placeholder ou d'option très longue. */
input, select, textarea { max-width: 100%; }

/* Comportement de défilement plus naturel + ancre toujours visible
   sous les en-têtes sticky. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
:target { scroll-margin-top: 96px; }

/* Sticky safety : la list-header et la profile-header sont sticky, on
   garde une réserve de min-height pour ne pas qu'elles flickerent en
   passant la transition étendue→compacte sur Safari iOS. */
.list-header, .profile-header { contain: layout style; }

/* Petits écrans (≤ 380px) : on rétrécit les paddings de page pour
   maximiser la largeur utile, en gardant un confort de lecture. */
@media (max-width: 380px) {
  :root { --container-px-mobile: 14px; }
  .hero h1,
  .faq__title { font-size: 26px; line-height: 1.1; }
  .hero__lead,
  .faq__lead { font-size: 15.5px; }
  .hero-cta { padding: 13px 22px; font-size: 14.5px; }
  .faq__head { margin-bottom: var(--space-hero-block); }
  .faq-cat__head { padding: 12px 14px; gap: 10px; }
  .faq-cat__icon { width: 32px; height: 32px; border-radius: 10px; }
  .faq-cat__icon .emoji { width: 18px; height: 18px; }
  .faq-cat__title { font-size: 14px; }
  .faq-cat__meta { padding: 3px 8px 3px 9px; font-size: 10.5px; gap: 5px; }
  .faq-cat__body { padding: 0 10px 10px; gap: 7px; }
  .faq-q__head { padding: 12px 14px; font-size: 14px; gap: 8px; }
  .faq-q__answer { padding: 0 14px 14px; font-size: 14px; }
  .faq-tabs { margin: 10px 0 12px; }
  .faq-tab { padding: 7px 12px; font-size: 13px; }
  .faq-resource { padding: 10px 12px; gap: 10px; margin-top: 12px; }
  .faq-resource__title { font-size: 13.5px; }
  .section__title { font-size: 17px; }
  .profile-hero__avatar { width: 64px; height: 64px; font-size: 22px; }
  .profile-hero__identity { gap: 14px; }
  .profile-section { padding: 16px; }
  .profile-contact__value { font-size: 13px; }
  .footer__brand { font-size: 13px; }
  .footer__note { font-size: 11px; }
}

/* Mode paysage très court (téléphones tournés) : on raccourcit le
   padding vertical du hero pour ne pas pousser le contenu hors écran. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --space-hero-y: 32px; --space-hero-block: 20px; --space-hero-stack: 12px; }
}

/* La fixation absolue du CTA fiche-député doit toujours laisser un
   espace de défilement suffisant en bas (déjà fait via .profile
   padding-bottom), mais on s'assure que le bouton occupe la pleine
   largeur visible sans dépasser. */
.profile-cta__inner .btn { max-width: 100%; }

/* Sécurité : aucun élément ne doit provoquer un débordement
   horizontal de la page. */
.app-main, #root, .view { max-width: 100vw; }