/* ==========================================================================
   Épargne et impôt — Page « Étudiants »
   Héro sombre avec les quatre chiffres de l'offre, sélecteur de programme,
   « combien tu vaux », six avantages, la fenêtre, prêts et bourses, FAQ.
   Sans JavaScript : le tableau complet et tous les textes restent visibles.
   ========================================================================== */

.etu {
  --etu-nuit: #0f2a2e; --etu-nuit-2: #0a1c1f; --etu-creme: #e6d8b6;
  --etu-or: #a8853f; --etu-or-fonce: #6f5320; --etu-texte-clair: #cfd6d0;
}
.etu-in { max-width: 1080px; margin: 0 auto; }
.etu h1, .etu h2, .etu h3 { text-wrap: balance; }

/* ---------- Héro ---------- */
.etu-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-10) 0 var(--space-12, 4rem);
  color: #eef0ea;
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(168,133,63,.22) 0%, rgba(168,133,63,0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(47,111,116,.35) 0%, rgba(47,111,116,0) 60%),
    linear-gradient(100deg, rgba(10,28,31,.94) 0%, rgba(10,28,31,.86) 45%, rgba(10,28,31,.55) 100%),
    url('../assets/images/panoramas/fjord-large.webp') center 40% / cover no-repeat,
    linear-gradient(180deg, var(--etu-nuit) 0%, var(--etu-nuit-2) 100%);
}
.etu-hero .container { position: relative; z-index: 1; }
.etu-kicker {
  font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--etu-creme); margin: 0 0 var(--space-4);
}
.etu-hero h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em;
  max-width: 20ch; margin: 0 0 var(--space-5); color: #fff;
}
.etu-hero h1 em { font-style: italic; color: var(--etu-creme); }
.etu-sous { font-size: var(--font-size-lg); line-height: 1.55; color: var(--etu-texte-clair); max-width: 58ch; margin: 0 0 var(--space-8); }

.etu-stats {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: rgba(230,216,182,.22); border: 1px solid rgba(230,216,182,.22); border-radius: var(--radius-xl);
  overflow: hidden; max-width: 960px;
}
.etu-stats li { background: rgba(10,28,31,.72); padding: 1.4rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.etu-stats b {
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1;
  color: var(--etu-creme); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.etu-stats b small, .etu-levier-n small { font-size: .5em; letter-spacing: 0; margin-left: .1em; }
.etu-stats span { font-size: var(--font-size-sm); line-height: 1.4; color: var(--etu-texte-clair); }

.etu-cta-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin: 0; }
.etu-lien-clair {
  color: #fff; font-weight: var(--font-weight-semibold); text-decoration: underline;
  text-decoration-color: var(--etu-or); text-underline-offset: 5px; text-decoration-thickness: 2px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.etu-lien-clair:hover { color: var(--etu-creme); }

/* ---------- Sections ---------- */
.etu-section { padding: var(--space-12, 4rem) 0; }
.etu-section:nth-of-type(even) { background: var(--color-neutral-50, #fbf9f4); }
.etu-eyebrow {
  font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--etu-or-fonce); margin: 0 0 .7rem;
}
.etu-eyebrow-clair { color: var(--etu-creme); }
.etu h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.06; letter-spacing: -.015em;
  margin: 0 0 var(--space-6); color: var(--etu-nuit); max-width: 24ch;
}
.etu-intro { font-size: 1.15rem; line-height: 1.6; color: #2f3937; max-width: 64ch; margin: var(--space-6) 0 0; }
.etu-petit { font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-neutral-500); margin: var(--space-4) 0 0; max-width: 72ch; }
.etu-lien { color: var(--etu-or-fonce); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Sélecteur ---------- */
.etu-choix { display: none; }
html.js .etu-choix.etu-choix-actif {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: start;
}
.etu-lbl { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); margin: 0 0 .7rem; }
.etu-lbl[hidden], .etu-pastilles[hidden] { display: none; }
.etu-pastilles { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 var(--space-6); }
.etu-pastille {
  min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--etu-nuit); background: #fff; border: 1.5px solid var(--color-border-actif, #8a8173);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.etu-pastille:hover { border-color: var(--etu-nuit); transform: translateY(-1px); }
.etu-pastille:focus-visible { outline: 3px solid var(--etu-or); outline-offset: 2px; }
.etu-pastille[aria-pressed="true"] { background: var(--etu-nuit); border-color: var(--etu-nuit); color: #fff; }

.etu-resultat {
  position: sticky; top: calc(var(--header-height) + 1rem);
  background: linear-gradient(160deg, #17383d 0%, var(--etu-nuit-2) 100%); color: #eef0ea;
  border-radius: var(--radius-xl); padding: 1.7rem 1.7rem 1.5rem;
  box-shadow: 0 24px 60px -24px rgba(10,28,31,.55);
}
.etu-resultat.etu-flash { animation: etuFlash .5s ease-out; }
@keyframes etuFlash { from { transform: scale(.985); box-shadow: 0 0 0 3px rgba(230,216,182,.5), 0 24px 60px -24px rgba(10,28,31,.55); } to { transform: none; } }
.etu-r-titre { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.15; margin: 0 0 var(--space-5); color: #fff; }
.etu-r-grille { margin: 0; display: grid; gap: .1rem; }
.etu-r-grille > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(230,216,182,.18); }
.etu-r-grille dt { font-size: var(--font-size-sm); color: var(--etu-texte-clair); max-width: 22ch; line-height: 1.35; }
.etu-r-grille dd { margin: 0; text-align: right; white-space: nowrap; }
.etu-r-grille b { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--etu-creme); font-variant-numeric: tabular-nums; }
.etu-jusqu { display: block; font-size: var(--font-size-xs); color: #96a19b; letter-spacing: .04em; }
.etu-r-vide .etu-jusqu { display: none; }
.etu-r-vide b { font-family: var(--font-sans); font-size: 1.05rem; }
.etu-r-note { font-size: var(--font-size-sm); line-height: 1.5; color: var(--etu-texte-clair); margin: var(--space-4) 0 var(--space-5); }
.etu-r-cta { width: 100%; }
.etu-r-pied { font-size: var(--font-size-xs); line-height: 1.5; color: #96a19b; margin: .8rem 0 0; text-align: center; }

.etu-tableau-plie { margin-top: var(--space-8); }
html:not(.js) .etu-tableau-plie { margin-top: 0; }
.etu details > summary, .etu-tableau-plie > summary {
  cursor: pointer; list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: .6rem;
  font-weight: var(--font-weight-semibold); color: var(--etu-or-fonce);
}
.etu details > summary::-webkit-details-marker { display: none; }
.etu-tableau-plie > summary::after, .etu-plus > summary::after {
  content: ''; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.etu-tableau-plie[open] > summary::after, .etu-plus[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.etu-tableau-wrap { overflow-x: auto; margin-top: var(--space-4); }
.etu-tableau { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.etu-tableau caption { text-align: left; font-size: var(--font-size-sm); color: var(--color-neutral-500); padding: 0 0 .6rem; }
.etu-tableau th, .etu-tableau td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
.etu-tableau thead th { background: var(--etu-nuit); color: #fff; font-weight: var(--font-weight-semibold); }
.etu-tableau td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.etu-tableau td[colspan] { font-family: var(--font-sans); color: var(--color-neutral-700); }

/* ---------- Combien tu vaux ---------- */
.etu-valeur {
  position: relative; overflow: hidden; isolation: isolate; color: #eef0ea;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(168,133,63,.2) 0%, rgba(168,133,63,0) 60%),
    linear-gradient(180deg, rgba(15,42,46,.9) 0%, rgba(10,28,31,.84) 100%),
    url('../assets/images/panoramas/valin-fantomes.webp') center 55% / cover no-repeat,
    linear-gradient(180deg, #17383d 0%, var(--etu-nuit-2) 100%) !important;
}
.etu-valeur .container { position: relative; z-index: 1; }
.etu-valeur h2 { color: #fff; }
.etu-valeur-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-10); align-items: center; }
.etu-intro-clair { font-size: 1.12rem; line-height: 1.6; color: var(--etu-texte-clair); max-width: 52ch; margin: 0; }
.etu-calc {
  background: rgba(255,255,255,.05); border: 1px solid rgba(230,216,182,.24); border-radius: var(--radius-xl);
  padding: 1.6rem 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .5rem;
}
.etu-calc label { font-size: var(--font-size-sm); color: var(--etu-texte-clair); }
.etu-calc output { font-family: var(--font-mono); font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
.etu-calc input[type=range] {
  --p: 33%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
.etu-calc input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--etu-creme) var(--p), rgba(255,255,255,.18) var(--p)); }
.etu-calc input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--etu-creme) var(--p), rgba(255,255,255,.18) var(--p)); }
.etu-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--etu-or); margin-top: -9px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.etu-calc input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--etu-or); }
.etu-calc input[type=range]:focus-visible { outline: 3px solid var(--etu-creme); outline-offset: 2px; border-radius: 4px; }
.etu-calc-res { font-size: var(--font-size-sm); color: var(--etu-texte-clair); margin: .4rem 0 0; }
.etu-total {
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.8rem, 7vw, 4.4rem); line-height: 1; margin: 0;
  color: var(--etu-creme); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.etu-petit-clair { font-size: var(--font-size-xs); color: #96a19b; margin: .3rem 0 0; }

/* ---------- Six avantages ---------- */
.etu-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.etu-carte {
  position: relative; background: #fff; border: 1px solid var(--color-neutral-200, #d8d2c6); border-radius: var(--radius-xl);
  padding: 1.5rem 1.5rem 1.4rem; transition: border-color .25s, box-shadow .25s, transform .25s;
}
.etu-carte:hover { border-color: var(--etu-or); box-shadow: 0 18px 40px -22px rgba(15,42,46,.35); transform: translateY(-2px); }
.etu-carte-n { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--etu-or-fonce); letter-spacing: .1em; }
.etu-carte h3 { font-size: 1.2rem; line-height: 1.25; margin: .5rem 0 .5rem; color: var(--etu-nuit); }
.etu-carte p { margin: 0; font-size: var(--font-size-base); line-height: 1.55; color: var(--color-neutral-700); }
.etu-plus { margin-top: var(--space-6); }
.etu-liste { margin: var(--space-4) 0 0; padding-left: 1.2rem; display: grid; gap: .8rem; max-width: 72ch; }
.etu-liste li { line-height: 1.6; color: #2f3937; }

/* ---------- La fenêtre ---------- */
.etu-ligne {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  counter-reset: f;
}
.etu-ligne li { position: relative; padding: 2.2rem 1rem 0 0; }
.etu-ligne li::before { content: ''; position: absolute; left: 0; right: 0; top: .55rem; height: 4px; background: var(--etu-or); }
.etu-ligne li:first-child::before { border-radius: 2px 0 0 2px; }
.etu-ligne li::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--color-page, #f4f0e8); border: 4px solid var(--etu-or);
}
.etu-ligne .etu-cle::after { background: var(--etu-or); box-shadow: 0 0 0 6px rgba(168,133,63,.22); }
.etu-ligne .etu-ferme::before { background: repeating-linear-gradient(90deg, #b9b2a5 0 8px, transparent 8px 14px); }
.etu-ligne .etu-ferme::after { border-color: #8a8173; }
.etu-ligne b { display: block; font-size: 1.05rem; color: var(--etu-nuit); margin-bottom: .35rem; }
.etu-ligne span { display: block; font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-neutral-700); }
.etu-ligne .etu-ferme b { color: var(--color-neutral-500); }

/* ---------- Prêts et bourses ---------- */
.etu-leviers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.etu-levier { border-top: 3px solid var(--etu-nuit); padding: 1.2rem 0 0; }
.etu-levier-n { display: block; font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3rem); line-height: 1; color: var(--etu-nuit); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.etu-levier h3 { font-size: 1.1rem; margin: .5rem 0 .6rem; color: var(--etu-or-fonce); }
.etu-levier p { margin: 0; font-size: var(--font-size-base); line-height: 1.55; color: var(--color-neutral-700); }
.etu-piege {
  margin-top: var(--space-8); padding: 1.3rem 1.5rem; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--color-neutral-200, #d8d2c6); border-left: 5px solid var(--color-error, #8e3b2f);
}
.etu-piege-t { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-error, #8e3b2f); margin: 0 0 .4rem; }
.etu-piege p:last-child { margin: 0; line-height: 1.6; color: #2f3937; }

/* ---------- FAQ ---------- */
.etu-faq { border-top: 1px solid var(--color-neutral-200, #d8d2c6); }
.etu-faq details { border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
.etu-faq summary {
  display: flex !important; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.05rem 0; color: var(--etu-nuit) !important; font-size: 1.08rem;
}
.etu-faq summary::after { content: '+'; font-family: var(--font-mono); font-size: 1.4rem; line-height: 1; color: var(--etu-or-fonce); transition: transform .2s; }
.etu-faq details[open] summary::after { transform: rotate(45deg); }
.etu-faq p { margin: 0 0 1.1rem; line-height: 1.6; color: var(--color-neutral-700); max-width: 70ch; }

/* ---------- Appel final ---------- */
.etu-final {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #eef0ea;
  padding: var(--space-12, 4rem) 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(168,133,63,.28) 0%, rgba(168,133,63,0) 60%),
    linear-gradient(180deg, rgba(15,42,46,.84) 0%, rgba(10,28,31,.9) 100%),
    url('../assets/images/panoramas/foret-reflet.webp') center 60% / cover no-repeat,
    linear-gradient(180deg, #17383d 0%, var(--etu-nuit-2) 100%);
}
.etu-final .container { position: relative; z-index: 1; }
.etu-final h2 { color: #fff; margin: 0 auto var(--space-4); max-width: 18ch; font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.etu-final p { color: var(--etu-texte-clair); font-size: 1.12rem; line-height: 1.6; max-width: 56ch; margin: 0 auto var(--space-6); }
.etu-final .etu-cta-ligne { justify-content: center; }

/* ---------- Sources ---------- */
.etu-sources h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.2rem; margin-bottom: var(--space-3); }
.etu-sources ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-neutral-700); }
.etu-sources a { color: var(--color-primary-500); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  html.js .etu-choix.etu-choix-actif, .etu-valeur-g { grid-template-columns: 1fr; gap: var(--space-6); }
  .etu-resultat { position: static; }
  .etu-cartes, .etu-leviers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .etu-hero { padding: var(--space-8) 0 var(--space-10); background-position: center, center, 70% 40%, center, center; }
  .etu-stats { grid-template-columns: 1fr 1fr; }
  .etu-stats li { padding: 1.1rem 1rem; }
  .etu-cartes, .etu-leviers { grid-template-columns: 1fr; }
  .etu-section { padding: var(--space-10) 0; }
  .etu-ligne { grid-template-columns: 1fr; gap: 0; }
  .etu-ligne li { padding: 0 0 1.3rem 2.2rem; }
  .etu-ligne li::before { left: .45rem; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .etu-ligne .etu-ferme::before { background: repeating-linear-gradient(180deg, #b9b2a5 0 8px, transparent 8px 14px); }
  .etu-ligne li::after { top: .1rem; }
  .etu-cta-ligne .btn { width: 100%; }
  .etu-r-grille dt { max-width: 16ch; }
}
@media (prefers-reduced-motion: reduce) {
  .etu-resultat.etu-flash { animation: none; }
  .etu-carte, .etu-pastille { transition: none; }
}

/* ---------- Tous les programmes ----------
   Avec JavaScript : bulles « domaine », puis bulles « programme » du domaine
   choisi, puis « où t'en es » (génie); la carte à droite.
   Sans JavaScript : la liste complète, en lignes, avec rabais et montant. */
.etu-intro-haut { margin: calc(-1 * var(--space-3)) 0 var(--space-6); }
.etu-choix-g2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); align-items: start; }
html:not(.js) .etu-choix-g2 { grid-template-columns: 1fr; }
html:not(.js) .etu-choix-g2 .etu-resultat, html:not(.js) .etu-js { display: none; }
.etu-js[hidden] { display: none !important; }
.etu-familles { display: grid; gap: var(--space-6); }
.etu-famille h3 {
  font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--etu-or-fonce); margin: 0 0 .5rem;
}
.etu-famille ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-neutral-200, #d8d2c6); }
.etu-famille li { border-bottom: 1px solid var(--color-neutral-200, #d8d2c6); }
.etu-prog {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .75rem; margin: 0; border: 0; border-radius: 10px; background: transparent;
  font: inherit; text-align: left; color: var(--etu-nuit);
}
.etu-prog-nom { font-weight: 600; line-height: 1.3; }
.etu-prog-chiffres { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.etu-prog-chiffres i { font-style: normal; font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; color: var(--color-neutral-700); }
.etu-prog-chiffres i:first-child { padding: .15rem .5rem; border-radius: 999px; background: var(--color-accent-100, #e6d8b6); color: var(--etu-or-fonce); font-weight: 600; }
.etu-prog-voir i:first-child { background: transparent; padding: 0; color: var(--color-neutral-500); font-family: var(--font-sans); font-weight: 400; }

/* Mode bulles (JavaScript actif) */
.etu-choix-actif .etu-familles { display: block; margin: 0 0 var(--space-6); }
.etu-choix-actif .etu-famille { display: none; }
.etu-choix-actif .etu-famille.etu-famille-active { display: block; }
.etu-choix-actif .etu-famille h3 { display: none; }
.etu-choix-actif .etu-famille ul { display: flex; flex-wrap: wrap; gap: .55rem; border: 0; }
.etu-choix-actif .etu-famille li { border: 0; }
.etu-choix-actif .etu-prog {
  width: auto; min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--color-border-actif, #8a8173);
  font-size: var(--font-size-sm); transition: background .2s, border-color .2s, color .2s;
}
.etu-choix-actif .etu-prog .etu-prog-chiffres { display: none; }
.etu-choix-actif .etu-prog .etu-prog-nom { font-weight: 600; }
.etu-choix-actif .etu-prog:hover { border-color: var(--etu-nuit); }
.etu-choix-actif .etu-prog:focus-visible { outline: 3px solid var(--etu-or); outline-offset: 2px; }
.etu-choix-actif .etu-prog[aria-pressed="true"] { background: var(--etu-nuit); border-color: var(--etu-nuit); color: #fff; }
#etu-domaines .etu-pastille { font-size: 1rem; padding: .65rem 1.2rem; }
.etu-compte {
  display: inline-block; margin-left: .45rem; padding: 0 .45rem; border-radius: 999px; min-width: 1.5rem; text-align: center;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.5rem; background: var(--color-accent-100, #e6d8b6); color: var(--etu-or-fonce);
}
.etu-pastille[aria-pressed="true"] .etu-compte { background: var(--etu-creme); color: var(--etu-nuit); }
.etu-resultat[hidden] { display: none; }
@media (max-width: 900px) {
  .etu-choix-g2 { grid-template-columns: 1fr; gap: var(--space-4); }
  .etu-choix-actif .etu-famille ul { gap: .4rem; }
  .etu-choix-actif .etu-prog { padding: .45rem .85rem; font-size: .85rem; }
  #etu-domaines .etu-pastille { font-size: .95rem; padding: .55rem 1rem; }
  .etu-resultat { scroll-margin-top: calc(var(--header-height) + .75rem); }
}