/* ==========================================================================
   SONOW — feuille de style
   Mobile d'abord. Fond sombre unique : l'orbe est la source de lumière de
   l'interface, tout le reste se pose dessus en verre.
   ========================================================================== */

/* ----------------------------- 1. Jetons ---------------------------------- */
:root {
  /* Les sept couleurs, dans l'ordre des centres */
  --ch1: #FF3B3B; --ch1-d: #B4121B;
  --ch2: #FF8A1F; --ch2-d: #C2410C;
  --ch3: #FACC15; --ch3-d: #CA8A04;
  --ch4: #34D399; --ch4-d: #047857;
  --ch5: #38BDF8; --ch5-d: #0369A1;
  --ch6: #818CF8; --ch6-d: #4338CA;
  --ch7: #C084FC; --ch7-d: #7E22CE;

  /* Accent dynamique : le script le remplace selon le chakra dominant */
  --accent: #818CF8;
  --accent-2: #C084FC;

  --bg: #060812;
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .085);
  --line: rgba(255, 255, 255, .10);
  --line-fort: rgba(255, 255, 255, .18);

  --texte: #EEF1FA;
  --texte-2: #A8B0C6;
  --texte-3: #737C96;

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-full: 999px;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;

  --ombre: 0 8px 32px rgba(0, 0, 0, .38);
  --ombre-haut: 0 18px 48px rgba(0, 0, 0, .5);
  --flou: blur(22px) saturate(150%);

  --duree: 240ms;
  --courbe: cubic-bezier(.22, .8, .3, 1);

  --police-titre: 'Outfit', ui-rounded, 'Segoe UI Variable Display', system-ui, sans-serif;
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --dock-h: 76px;
}

/* ----------------------------- 2. Base ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--bg);
  overflow-x: hidden;               /* aucun débordement horizontal, jamais */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; letter-spacing: -.015em; margin: 0; }

p { margin: 0; }

button, input { font: inherit; color: inherit; }

.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;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Un seul jeu d'icônes, une seule épaisseur de trait : c'est ce qui tient
   la cohérence visuelle de toute l'interface. */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;

}
svg.icon { overflow: visible; }
.icon use { transform-origin: center; }

/* ----------------------------- 3. Fond ------------------------------------ */
#orbe {
  position: fixed; inset: 0;
  width: 100%; height: 100dvh;
  z-index: 0;
  display: block;
  background: var(--bg);
}

/* Voile de lisibilité : laisse l'orbe respirer au centre de l'écran, mais
   assombrit le haut et le bas, là où se posent la barre de titre et les
   panneaux. Sans lui, le texte passe sur les zones claires de l'animation. */
.voile {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(118% 76% at 50% 32%, rgba(6, 8, 18, .22) 0%, rgba(6, 8, 18, .40) 54%, rgba(6, 8, 18, .78) 100%),
    linear-gradient(180deg, rgba(6, 8, 18, .58) 0%, transparent 20%, transparent 40%, rgba(6, 8, 18, .93) 100%);
}

/* Grain fin : casse les dégradés en bandes sur les écrans 8 bits. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ----------------------------- 4. Boutons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 48px; padding: 0 var(--esp-5);
  border: 1px solid var(--line-fort);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--texte);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;      /* supprime le délai de 300 ms */
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              transform 140ms var(--courbe);
}
.btn:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #0A0C16;
  font-weight: 600;
  box-shadow: 0 10px 34px -8px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--texte-2); }
.btn--icon { min-width: 48px; padding: 0; border-radius: var(--r-full); }
.btn--xl { min-height: 62px; padding: 0 var(--esp-6); font-size: 1.06rem; }

.chip {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 40px; padding: 0 var(--esp-4);
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--texte-2);
  font-size: .875rem; cursor: pointer;
  max-width: 58vw;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.chip:hover { background: var(--surface-2); color: var(--texte); }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------- 5. Écran d'entrée -------------------------- */
.intro {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: var(--esp-5);
  padding-bottom: max(var(--esp-5), env(safe-area-inset-bottom));
  overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 0%, rgba(129, 140, 248, .14), transparent 62%), rgba(6, 8, 18, .82);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  animation: apparait 600ms var(--courbe) both;
}
.intro[hidden] { display: none; }
.intro--sort { animation: disparait 520ms var(--courbe) forwards; }

.intro__inner { position: relative; max-width: 480px; text-align: center; padding: var(--esp-5) 0; }

.intro__halo {
  position: absolute; left: 50%; top: -60px; translate: -50% 0;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 62%);
  opacity: .30; filter: blur(38px);
  animation: respire 7s ease-in-out infinite;
}

.intro__eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--texte-3); margin-bottom: var(--esp-3);
}
/* SONOW ne fait que cinq lettres : c'est un logotype, pas un titre courant.
   Il supporte donc un large interlettrage — que l'on rattrape à droite, sinon
   l'espacement de la dernière lettre décentre tout le bloc. */
.intro__title {
  font-size: clamp(3rem, 15vw, 4.4rem); font-weight: 300; line-height: 1.02;
  letter-spacing: .17em; margin-right: -.17em;
  background: linear-gradient(100deg, var(--ch1), var(--ch2), var(--ch3), var(--ch4), var(--ch5), var(--ch6), var(--ch7));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: arcEnCiel 16s linear infinite;
}
.intro__lead {
  margin: var(--esp-4) 0 var(--esp-6);
  color: var(--texte); font-size: 1.08rem; font-family: var(--police-titre); font-weight: 300;
}
/* Les deux appels a l'action, empiles. `stretch` leur donne la meme largeur :
   deux boutons de largeurs differentes, centres l'un sous l'autre, donnent
   l'impression que le second est un repentir. */
.intro__actions {
  display: grid; justify-content: center; gap: var(--esp-3);
}
/* Le lien porte la classe .btn : il faut lui retirer le soulignement que le
   navigateur ajoute d'office aux ancres. */
.intro__actions a.btn { text-decoration: none; }
.intro__actions .icon { width: 20px; height: 20px; }

.intro__desc {
  margin: var(--esp-5) 0 0;
  font-size: .875rem; color: var(--texte-2); line-height: 1.65; text-align: left;
}
/* Placée juste sous l'appel à l'action : c'est la promesse de l'application,
   elle doit être lue sans avoir à faire défiler l'écran. */
.intro__signature {
  margin-top: var(--esp-5);
  font-family: var(--police-titre); font-size: 1rem; font-weight: 400;
  letter-spacing: .05em;
  background: linear-gradient(100deg, var(--ch4), var(--ch5), var(--ch6), var(--ch7));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: arcEnCiel 14s linear infinite;
}

.intro__perms {
  list-style: none; margin: var(--esp-6) 0 var(--esp-4); padding: 0;
  display: grid; gap: var(--esp-2); text-align: left;
  font-size: .875rem; color: var(--texte-2);
}
.intro__perms li { display: flex; align-items: center; gap: var(--esp-3); }
.intro__perms .icon { width: 18px; height: 18px; color: var(--accent); }

.intro__note { font-size: .8rem; color: var(--texte-3); line-height: 1.6; }
.intro__hint { margin-top: var(--esp-3); font-size: .8rem; color: var(--texte-3); font-style: italic; }

/* ----------------------------- 6. Structure ------------------------------- */
.app { position: relative; z-index: 2; min-height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: max(var(--esp-3), env(safe-area-inset-top)) var(--esp-4) var(--esp-3);
  background: linear-gradient(rgba(6, 8, 18, .82), rgba(6, 8, 18, .30) 70%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.topbar__brand {
  display: flex; align-items: center; gap: var(--esp-2);
  font-family: var(--police-titre); font-size: .95rem;
}
.topbar__nom { letter-spacing: .13em; font-weight: 500; }
.topbar__brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: pulse 3.4s ease-in-out infinite;
}

.main {
  max-width: 1180px; margin: 0 auto;
  padding: 0 var(--esp-4);
  /* Réserve pour la barre de commande : rien ne se cache dessous. */
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + var(--esp-7));
}

/* ----------------------------- 7. Indice de résonance --------------------- */
.hero {
  text-align: center;
  padding: clamp(28px, 11vh, 76px) 0 var(--esp-6);
}
.hero__score { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.hero__value {
  font-family: var(--police-titre);
  font-size: clamp(4.4rem, 22vw, 7rem); font-weight: 200; line-height: 1;
  font-variant-numeric: tabular-nums;   /* le chiffre ne fait plus sauter la ligne */
  background: linear-gradient(160deg, #fff, var(--accent) 55%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .5));
}
.hero__unit { font-size: 1.1rem; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.hero__label {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texte-2); margin-top: var(--esp-2);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .85);
}
.hero__chakra, .hero__unit { text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
.hero__chakra {
  margin-top: var(--esp-3); font-family: var(--police-titre);
  font-size: 1.18rem; color: var(--texte);
}
.hero__now {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2);
  margin-top: var(--esp-5);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: var(--r-full);
  background: rgba(11, 14, 27, .62); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .82rem; color: var(--texte-2);
}
.pill b { color: var(--texte); font-weight: 600; }
.pill .icon { width: 15px; height: 15px; color: var(--accent); }

/* ----------------------------- 8. Panneaux -------------------------------- */
/* Fond assez opaque pour que le texte reste lisible par-dessus l'orbe :
   un simple voile blanc translucide ne tiendrait pas le contraste minimal
   sur les zones claires de l'animation. */
.panel {
  background: rgba(11, 14, 27, .66);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--esp-5);
  margin-bottom: var(--esp-4);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre);
}
.panel__head { margin-bottom: var(--esp-5); }
.panel__head h2 { font-size: 1.06rem; }
.panel__head p { font-size: .85rem; color: var(--texte-3); margin-top: 3px; }
.panel__status { font-size: .85rem; color: var(--texte-3); }

.grid { display: grid; gap: var(--esp-4); }

/* ----------------------------- 9. Les sept centres ------------------------ */
.chakras { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--esp-2); }

.chakra {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-2);
  min-height: 44px; padding: var(--esp-2) 2px;
  border: 0; background: none; cursor: pointer; border-radius: var(--r-sm);
  transition: background var(--duree) var(--courbe);
}
.chakra:hover, .chakra:focus-visible { background: var(--surface-2); }
.chakra:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }

/* Une sphère, pas un disque : le dégradé décentré et l'ombre portée
   suffisent à donner le volume. */
.chakra__bille {
  position: relative;
  width: clamp(24px, 7.6vw, 34px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6, transparent 42%), radial-gradient(circle at 62% 68%, var(--c-d), var(--c) 68%);
  box-shadow: 0 3px 12px -2px var(--c), inset 0 -2px 6px rgba(0, 0, 0, .45);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.chakra__bille::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid var(--c); opacity: calc(var(--niveau) * .8);
  transform: scale(calc(.82 + var(--niveau) * .3));
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}
.chakra__jauge {
  width: 100%; height: 4px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .09); overflow: hidden;
}
.chakra__jauge i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--c-d), var(--c));
  width: calc(var(--niveau) * 100%);
  transition: width 900ms var(--courbe);
}
/* Hauteur fixe : « Plexus solaire » passe sur deux lignes, les pourcentages
   des sept centres doivent malgré tout rester alignés. */
.chakra__nom {
  font-size: .58rem; color: var(--texte-3); text-align: center; line-height: 1.25;
  hyphens: auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5em;
}
.chakra__val { font-size: .62rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.chakra[data-dominant='true'] .chakra__bille { transform: scale(1.16); }
.chakra[data-dominant='true'] .chakra__nom { color: var(--c); font-weight: 600; }

/* ----------------------------- 10. Indices -------------------------------- */
.indices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
.indice {
  padding: var(--esp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.indice__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-2); }
.indice__nom { font-size: .82rem; color: var(--texte-2); }
.indice__val { font-family: var(--police-titre); font-size: 1.32rem; font-variant-numeric: tabular-nums; }
.indice__jauge { margin-top: var(--esp-3); height: 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, .08); overflow: hidden; }
.indice__jauge i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 900ms var(--courbe);
}

/* ----------------------------- 11. Mesures -------------------------------- */
.metrics { display: grid; gap: var(--esp-4); }

.metric { display: flex; gap: var(--esp-3); align-items: flex-start; }
.metric__icone {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--accent);
}
.metric__corps { flex: 1; min-width: 0; }
.metric__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.metric__nom { font-size: .9rem; color: var(--texte); }
.metric__valeur {
  font-family: var(--police-titre); font-size: .98rem; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.metric__jauge { margin-top: 7px; height: 5px; border-radius: var(--r-full); background: rgba(255, 255, 255, .08); overflow: hidden; }
.metric__jauge i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 800ms var(--courbe);
}
.metric__pourquoi { margin-top: 7px; font-size: .78rem; color: var(--texte-3); line-height: 1.5; }

/* État d'un capteur : jamais la couleur seule — un mot l'accompagne toujours. */
.etat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--texte-3);
}
.etat::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--texte-3);
}
.etat[data-etat='actif'] { color: var(--ch4); }
.etat[data-etat='actif']::before { background: var(--ch4); box-shadow: 0 0 8px var(--ch4); }
.etat[data-etat='refuse'], .etat[data-etat='echec'], .etat[data-etat='erreur'] { color: var(--ch2); }
.etat[data-etat='refuse']::before, .etat[data-etat='echec']::before, .etat[data-etat='erreur']::before { background: var(--ch2); }
.etat[data-etat='demande'], .etat[data-etat='chargement'], .etat[data-etat='recherche'] { color: var(--ch3); }
.etat[data-etat='demande']::before, .etat[data-etat='chargement']::before, .etat[data-etat='recherche']::before {
  background: var(--ch3); animation: pulse 1.3s ease-in-out infinite;
}

.metric__action {
  margin-top: var(--esp-3);
  min-height: 40px; padding: 0 var(--esp-4);
  font-size: .82rem;
}

/* ----------------------------- 12. Règles musicales ----------------------- */
.rules { display: grid; gap: var(--esp-3); }
.rule {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-3);
  align-items: start;
  padding: var(--esp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.rule__cle {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-3); padding-top: 3px; white-space: nowrap;
}
.rule__txt { font-size: .88rem; color: var(--texte-2); line-height: 1.55; }
.rule__txt b { color: var(--texte); font-weight: 600; }

/* ----------------------------- 13. Barre de commande ---------------------- */
.dock {
  position: fixed; z-index: 30;
  left: 50%; translate: -50% 0;
  bottom: max(var(--esp-3), env(safe-area-inset-bottom));
  width: min(calc(100vw - 24px), 620px);
  display: flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-2);
  border-radius: var(--r-full);
  background: rgba(14, 17, 32, .74);
  border: 1px solid var(--line-fort);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre-haut);
}

.dock__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;   /* au-delà du minimum tactile de 44 px */
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--texte-2);
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe), transform 130ms var(--courbe);
}
.dock__btn:hover { background: var(--surface-2); color: var(--texte); }
.dock__btn:active { transform: scale(.92); }
.dock__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dock__btn[aria-pressed='true'] {
  color: #0A0C16;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 18px -4px var(--accent);
}
.dock__btn[data-etat='indisponible'], .dock__btn[data-etat='non pris en charge'] {
  opacity: .38; cursor: not-allowed;
}
.dock__btn--main {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0A0C16;
  box-shadow: 0 6px 22px -6px var(--accent);
}
.dock__btn--main .icon { width: 22px; height: 22px; stroke-width: 1.8; }

.dock__volume { display: flex; align-items: center; gap: var(--esp-2); flex: 1; min-width: 0; padding: 0 var(--esp-2); color: var(--texte-3); }
.dock__sensors { display: flex; gap: 2px; }

input[type='range'] {
  flex: 1; min-width: 40px; height: 44px;    /* la zone tactile fait 44 px de haut */
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
input[type='range']::-moz-range-track { height: 4px; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
input[type='range']::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; margin-top: -6.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
input[type='range']::-moz-range-thumb { width: 17px; height: 17px; border: 0; border-radius: 50%; background: #fff; }
input[type='range']:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-full); }

/* ----------------------------- 14. Pied de page --------------------------- */
/* Bloc de texte long posé tout en bas, là où l'orbe est au plus clair : il lui
   faut son propre fond, comme aux panneaux, sinon le gris de bas de page devient
   illisible dès que la couleur dominante s'éclaircit. */
.footer {
  margin-top: var(--esp-4);
  padding: var(--esp-5);
  border-radius: var(--r-lg);
  background: rgba(11, 14, 27, .62);
  border: 1px solid var(--line);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  color: var(--texte-2); font-size: .8rem; line-height: 1.65;
}
.footer p + p { margin-top: var(--esp-3); }
.footer__baseline {
  font-family: var(--police-titre); font-size: 1.02rem; font-weight: 400;
  letter-spacing: .03em; margin-bottom: var(--esp-3);
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__meta { margin-top: var(--esp-4); font-variant-numeric: tabular-nums; opacity: .8; }

/* ----------------------------- 15. Dialogue ------------------------------- */
.dialog {
  border: 0; padding: 0; color: var(--texte);
  background: transparent;
  max-width: min(440px, calc(100vw - 32px));
  margin: auto;
}
.dialog::backdrop { background: rgba(4, 6, 14, .68); backdrop-filter: blur(8px); }
.dialog__inner {
  background: rgba(16, 19, 34, .96);
  border: 1px solid var(--line-fort);
  border-radius: var(--r-lg);
  padding: var(--esp-5);
  box-shadow: var(--ombre-haut);
}
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.dialog__head h2 { font-size: 1.1rem; }
.dialog__lead { font-size: .875rem; color: var(--texte-2); margin-bottom: var(--esp-5); }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; margin-top: var(--esp-5); }

.field { display: block; }
.field__label { display: block; font-size: .82rem; color: var(--texte-2); margin-bottom: 6px; }
.field__box {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: 0 var(--esp-4);
  border: 1px solid var(--line-fort); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: var(--texte-3);
  transition: border-color var(--duree) var(--courbe);
}
.field__box:focus-within { border-color: var(--accent); }
.field__box input {
  flex: 1; min-width: 0;
  height: 50px;                    /* confortable au doigt, et pas de zoom sur iOS */
  border: 0; background: transparent; outline: none;
  font-size: 16px; color: var(--texte);
}
.field__help { display: block; margin-top: 6px; font-size: .76rem; color: var(--texte-3); }
.field__error { margin-top: var(--esp-3); font-size: .82rem; color: var(--ch2); }

/* ----------------------------- 16. Chargement et messages ----------------- */
.loader {
  position: fixed; z-index: 45; left: 50%; translate: -50% 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 20px);
  width: min(320px, calc(100vw - 40px));
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--r-lg);
  background: rgba(14, 17, 32, .82);
  border: 1px solid var(--line);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  animation: monte 420ms var(--courbe) both;
}
.loader[hidden] { display: none; }
.loader__ring {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .14);
  border-top-color: var(--accent);
  animation: tourne 900ms linear infinite;
}
.loader__text { font-size: .84rem; color: var(--texte-2); text-align: center; }
.loader__bar { width: 100%; height: 3px; border-radius: var(--r-full); background: rgba(255, 255, 255, .1); overflow: hidden; }
.loader__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 400ms var(--courbe);
}

.toast {
  position: fixed; z-index: 50; left: 50%; translate: -50% 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 20px);
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--r-full);
  background: rgba(20, 24, 42, .95);
  border: 1px solid var(--line-fort);
  box-shadow: var(--ombre-haut);
  font-size: .86rem; text-align: center;
  animation: monte 300ms var(--courbe) both;
}
.toast[hidden] { display: none; }

/* ----------------------------- 17. Animations ----------------------------- */
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes disparait { to { opacity: 0; visibility: hidden; } }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes respire { 0%, 100% { transform: scale(1); opacity: .30; } 50% { transform: scale(1.14); opacity: .46; } }
@keyframes arcEnCiel { to { background-position: 260% 50%; } }

/* Entrée décalée des panneaux : 60 ms d'écart, assez pour être perçu
   comme un enchaînement, trop court pour faire attendre. */
.panel { animation: monte 520ms var(--courbe) both; }
.panel:nth-of-type(1) { animation-delay: 40ms; }
.panel:nth-of-type(2) { animation-delay: 100ms; }
.grid .panel:nth-child(1) { animation-delay: 160ms; }
.grid .panel:nth-child(2) { animation-delay: 220ms; }
.grid .panel:nth-child(3) { animation-delay: 280ms; }

/* ----------------------------- 18. Écrans larges -------------------------- */
@media (min-width: 620px) {
  .indices { grid-template-columns: repeat(4, 1fr); }
  .chakra__nom { font-size: .68rem; }
  .main { padding-inline: var(--esp-5); }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .panel--wide { grid-column: 1 / -1; }
  .rules { grid-template-columns: 1fr 1fr; }
  .main { padding-inline: var(--esp-6); }
  .hero { padding-top: clamp(40px, 14vh, 110px); }
}

@media (min-width: 1200px) {
  .rules { grid-template-columns: repeat(3, 1fr); }
}

/* En paysage sur mobile, la hauteur manque : on comprime l'en-tête. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: var(--esp-5) 0 var(--esp-4); }
  .hero__value { font-size: 3.2rem; }
  .intro__inner { padding-block: var(--esp-3); }
}

/* ----------------------------- 19. Préférences système -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .intro__halo, .topbar__brand .dot { animation: none; }
}

/* Certains navigateurs de bureau n'ont pas le flou : on rend les surfaces
   plus opaques pour que le texte reste lisible sur l'orbe. */
@supports not (backdrop-filter: blur(2px)) {
  .panel { background: rgba(14, 17, 32, .90); }
  .dock { background: rgba(14, 17, 32, .96); }
  .topbar { background: rgba(6, 8, 18, .94); }
}

/* Ligne secondaire de l'en-tête : le centre dominant, en retrait de la note. */
.hero__chakra b { font-weight: 600; color: var(--accent); }
/* Cette ligne se lit par-dessus la zone la plus claire de l'orbe : le gris de
   troisième niveau n'y tient pas le contraste, il faut monter d'un cran. */
.hero__second {
  display: inline-block; margin-top: 4px;
  font-size: .84rem; color: var(--texte-2); font-family: var(--police);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8);
}

/* ----------------------------- 20. Vérification --------------------------- */
/* Fenêtre volontairement sans échappatoire tant que l'adresse n'est pas saisie :
   pas de croix, pas de fermeture au clic extérieur, touche d'échappement neutralisée.
   Le seul chemin qui en sort est le formulaire — c'est le propre d'un passage obligé. */
.dialog--verif::backdrop { background: rgba(4, 6, 14, .86); backdrop-filter: blur(14px); }
.dialog--verif .dialog__inner { text-align: center; padding: var(--esp-6) var(--esp-5); }
.dialog--verif h2 { font-size: 1.5rem; margin-bottom: var(--esp-3); }
.dialog--verif .dialog__lead { text-align: left; margin-bottom: var(--esp-5); }
.dialog--verif .field { text-align: left; }

.verif__pastille {
  width: 62px; height: 62px; margin: 0 auto var(--esp-4);
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px -8px var(--accent);
  color: #0A0C16;
}
.verif__pastille .icon { width: 27px; height: 27px; stroke-width: 1.9; }
.verif__pastille--attente { background: linear-gradient(140deg, var(--ch3), var(--ch2)); box-shadow: 0 10px 30px -8px var(--ch2); }
.verif__pastille--ok { background: linear-gradient(140deg, var(--ch4), var(--ch5)); box-shadow: 0 10px 30px -8px var(--ch4); }

.btn--bloc { width: 100%; margin-top: var(--esp-4); }

.verif__mention {
  margin-top: var(--esp-4); font-size: .74rem; color: var(--texte-3);
  line-height: 1.6; text-align: left;
}
.verif__astuce {
  margin-bottom: var(--esp-4); padding: var(--esp-3) var(--esp-4);
  border-radius: var(--r-md); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  font-size: .8rem; color: var(--texte-2); text-align: left;
}
.verif__liens { display: flex; flex-wrap: wrap; gap: var(--esp-4); justify-content: center; margin-top: var(--esp-4); }

/* Bouton textuel : zone tactile de 44 px conservée malgré l'apparence de lien. */
.lien {
  min-height: 44px; padding: 0 var(--esp-2);
  border: 0; background: none; cursor: pointer;
  color: var(--texte-2); font-size: .84rem; text-decoration: underline;
  text-underline-offset: 3px; touch-action: manipulation;
}
.lien:hover { color: var(--accent); }
.lien:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

#verif-adresse { color: var(--accent); overflow-wrap: anywhere; }

/* Attente de confirmation : la fenêtre étant sans issue, un signe de vie
   permanent évite qu'elle ne paraisse figée ou en panne. */
.verif__attente {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  font-size: .84rem; color: var(--accent);
}
.verif__points { display: inline-flex; gap: 4px; }
.verif__points i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: respireLent 1.4s ease-in-out infinite;
}
.verif__points i:nth-child(2) { animation-delay: .18s; }
.verif__points i:nth-child(3) { animation-delay: .36s; }
@keyframes respireLent { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Mention discrète dans la liste des capteurs de l'écran d'entrée. */
.intro__perms em { font-style: normal; color: var(--texte-3); font-size: .95em; }

/* ----------------------------- 21. Manière d'écouter ---------------------- */
/* Choix central de l'application : il mérite d'être visible sous l'indice,
   pas relégué dans un menu. Deux options exclusives, jamais aucune. */
.bascule {
  display: inline-flex; gap: 4px; margin: var(--esp-5) auto 0;
  padding: 4px; border-radius: var(--r-full);
  background: rgba(11, 14, 27, .72); border: 1px solid var(--line);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
}
.bascule__opt {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 48px; padding: 7px var(--esp-5);
  border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--texte-2);
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.bascule__opt:hover { color: var(--texte); }
.bascule__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bascule__opt[aria-checked='true'] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0A0C16;
  box-shadow: 0 4px 18px -6px var(--accent);
}
.bascule__nom { font-family: var(--police-titre); font-size: .95rem; font-weight: 600; }
.bascule__sous { font-size: .68rem; opacity: .8; }

.hero__ecoute {
  max-width: 34ch; margin: var(--esp-3) auto 0;
  font-size: .8rem; color: var(--texte-2); line-height: 1.55;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}