/* Site Tasvisio : même identité que l'app TV (bleu nuit, craie, ambre pour les chiffres). */
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url(fonts/AtkinsonHyperlegible-400.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url(fonts/AtkinsonHyperlegible-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(fonts/BarlowCondensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/BarlowCondensed-600.woff2) format('woff2'); }

:root {
  --nuit: #0E1A2B; --ardoise: #17263A; --ligne: #22344D; --brume: #8FA3BA; --craie: #EEF2F6;
  --ambre: #FFB547; --corail: #FF6B5E; --vert: #3ECF8E;
  --digits: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Atkinson Hyperlegible', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* l'attribut hidden l'emporte sur .btn & co */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit); color: var(--craie); font: 400 18px/1.6 var(--text); }
a { color: var(--craie); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* En-tête */
.top { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; }
.logo { display: inline-flex; align-items: center; font: 600 30px/1 var(--digits); letter-spacing: 3px; text-decoration: none; }
.logo img { width: 46px; height: 46px; margin-right: 10px; }
.nav a { color: var(--brume); text-decoration: none; margin-left: 28px; }
.nav a:hover { color: var(--craie); }
.nav .btn { margin-left: 28px; }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } .nav .btn { padding: 10px 14px; font-size: 15px; } }

/* Boutons */
.btn { display: inline-block; padding: 14px 26px; border-radius: 10px; border: 0; background: var(--craie); color: var(--nuit);
  font: 700 17px/1.2 var(--text); text-decoration: none; cursor: pointer; }
.btn:hover { background: #fff; }
.btn.ghost { background: transparent; color: var(--craie); box-shadow: inset 0 0 0 2px var(--ligne); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--brume); }
.btn[disabled] { opacity: .5; cursor: default; }
/* Plus précis que « .nav a » : sinon le texte du bouton prend la couleur des liens du menu (blanc sur blanc au survol). */
.nav .btn, .nav .btn:hover { color: var(--nuit); }
.nav .btn.ghost, .nav .btn.ghost:hover { color: var(--craie); }

/* Titres */
h1, h2, h3 { font-family: var(--digits); font-weight: 600; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(44px, 7vw, 84px); }
h2 { font-size: clamp(34px, 4.5vw, 52px); margin-bottom: 16px; }
h3 { font-size: 28px; margin-bottom: 8px; }
.lead { font-size: 21px; color: var(--brume); max-width: 34em; }
.muted { color: var(--brume); }
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--ligne); }

/* Menu déroulant (site.js) : le select natif reste dessous, invisible */
.dd { position: relative; }
.dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 14px; border-radius: 10px;
  border: 2px solid var(--ligne); background: var(--nuit); color: var(--craie); font: 18px/1.3 var(--text); text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s; }
.dd-btn:hover { border-color: var(--brume); }
.dd.open .dd-btn { border-color: var(--ambre); }
.dd-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-chevron { flex: none; width: 12px; height: 8px; margin-left: 12px; fill: none; stroke: var(--brume); stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .18s ease; }
.dd.open .dd-chevron { transform: rotate(180deg); stroke: var(--ambre); }
.dd-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 288px; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; border-radius: 12px; background: #1B2D45; border: 1px solid #2E4562;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65); animation: dd-in .14s ease-out; scrollbar-width: thin; scrollbar-color: #3A5474 transparent; }
.dd.up .dd-list { top: auto; bottom: calc(100% + 6px); }
.dd-list[hidden] { display: none; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } }
.dd-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 34px;
  border-radius: 8px; font-size: 17px; color: var(--craie); cursor: pointer; }
.dd-item.on { background: rgba(238, 242, 246, .1); }
.dd-item small { flex: none; color: var(--brume); font-size: 14px; }
.dd-item[aria-selected="true"] { font-weight: 700; }
.dd-item[aria-selected="true"]::before { content: ''; position: absolute; left: 13px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid var(--ambre); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .dd-list { animation: none; } .dd-chevron, .dd-btn { transition: none; } }

/* Petits écrans : logo et bouton tiennent sur une ligne */
@media (max-width: 420px) {
  .logo { font-size: 24px; letter-spacing: 2px; }
  .logo img { width: 36px; height: 36px; margin-right: 8px; }
  .nav .btn { padding: 9px 12px; font-size: 14px; white-space: nowrap; }
}