/* La vue du relevé (14/11/2026, dossier/43 § 3.5, js/vue-claude-ui.js) : le sélecteur « Sans Claude | Avec Claude » de la
   barre haute, la note fixe d'un relevé fait sans Claude, le bandeau de vue en tête du contenu, le logo de Claude dans le
   sélecteur de relevé et au bas du rail. Un interrupteur à deux segments, un curseur qui glisse sous le choix : neutre
   sur « Sans Claude », réchauffé du corail de Claude sur « Avec Claude ». Jetons de l'application ; la teinte de Claude
   arrive par --teinte-claude (logos-ia.js), posée sur la racine du contrôle et du bandeau. */

/* ---------- Le sélecteur ---------- */
.vue-claude { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.vue-claude[hidden], .vc[hidden], .vc-raison[hidden], .vc-note[hidden] { display: none; }

.vc {
  --vc-claude: var(--teinte-claude);
  --vc-pas: 3px;
  position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: var(--bouton-hauteur-compacte); padding: var(--vc-pas); box-sizing: border-box;
  border-radius: var(--rayon-pilule); background: var(--voile-2); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
  transition: border-color var(--duree-normale) var(--courbe);
}
.vc[data-choix="claude"] { border-color: color-mix(in srgb, var(--vc-claude) 38%, var(--trait)); }

/* Le curseur : la moitié du contrôle (les deux segments ont la même largeur), il glisse d'un choix à l'autre. */
.vc-curseur {
  position: absolute; z-index: 0; top: var(--vc-pas); bottom: var(--vc-pas); left: var(--vc-pas); width: calc(50% - var(--vc-pas));
  border-radius: inherit; background: var(--panneau-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: transform var(--duree-normale) var(--courbe), background-color var(--duree-normale) var(--courbe), box-shadow var(--duree-normale) var(--courbe);
  pointer-events: none;
}
.vc[data-choix="claude"] .vc-curseur {
  transform: translateX(100%);
  background: color-mix(in srgb, var(--vc-claude) 26%, var(--panneau-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc-claude) 62%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 18px color-mix(in srgb, var(--vc-claude) 32%, transparent);
}

.vc-option {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
  margin: 0; padding: 0 14px; border: 0; border-radius: var(--rayon-pilule); background: transparent;
  color: var(--encre-2); font: inherit; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); line-height: 1; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--duree-rapide) var(--courbe), background-color var(--duree-rapide) var(--courbe), transform 120ms var(--courbe);
}
.vc-option:not([aria-checked="true"]):not([aria-disabled="true"]):hover { color: var(--encre); background: var(--voile-1); }
.vc-option[aria-checked="true"] { color: var(--encre); cursor: default; }
.vc-option:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
.vc-option:active:not([aria-disabled="true"]):not([aria-checked="true"]) { transform: scale(0.96); }
.vc-option[aria-disabled="true"] { color: var(--encre-3); cursor: not-allowed; }

/* Le logo de Claude : toujours là, jamais seul (le nom est écrit) ; il s'éveille au survol et brille quand la vue est choisie. */
.vc-logo { flex: none; width: 16px; height: 16px; transition: transform var(--duree-normale) var(--courbe), filter var(--duree-normale) var(--courbe), opacity var(--duree-normale) var(--courbe); opacity: 0.85; }
.vc-option:not([aria-disabled="true"]):hover .vc-logo { transform: rotate(30deg); opacity: 1; }
.vc[data-choix="claude"] .vc-logo { opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--vc-claude) 75%, transparent)); }
.vc-option[aria-disabled="true"] .vc-logo { filter: grayscale(1); opacity: 0.45; }
.vc-partiel {
  padding: 3px 6px; border-radius: var(--rayon-pilule); background: var(--attention-fond); color: var(--attention);
  font-size: 11px; font-weight: var(--graisse-moyenne); letter-spacing: 0.01em;
}

.vc-raison { max-width: 26ch; font-size: var(--taille-etiquette); line-height: 1.25; color: var(--encre-2); }

/* La note fixe d'un relevé fait sans Claude : un repère, pas un bouton (trait pointillé, aucun survol). */
.vc-note {
  display: inline-flex; align-items: center; gap: 7px; height: var(--bouton-hauteur-compacte); box-sizing: border-box; padding: 0 12px;
  border: 1px dashed var(--trait-fort); border-radius: var(--rayon-pilule); color: var(--encre-2); font-size: var(--taille-etiquette); white-space: nowrap; cursor: default;
}
.vc-note-logo { flex: none; width: 14px; height: 14px; filter: grayscale(1); opacity: 0.55; }

/* Le sélecteur prend sa place dans la barre : la marque et le relevé gardent leur nom. Tant qu'il est là, « Site
   Hypervisible » garde son icône seule (son nom reste dans l'info-bulle et pour les lecteurs d'écran), puis
   « Nouvelle marque » (toujours dans l'espace) s'efface, comme sous 1 100 px. */
@media (max-width: 1640px) and (min-width: 901px) {
  .haut:has(.vue-claude:not([hidden])) .haut-site-nom { display: none; }
  .haut:has(.vue-claude:not([hidden])) .haut-site { padding-inline: 8px; }
}
@media (max-width: 1440px) and (min-width: 901px) {
  .haut:has(.vue-claude:not([hidden])) .haut-nouveau { display: none; }
}
/* Largeur moyenne : la barre ne se chevauche jamais ; la raison reste dite (description du groupe, info-bulle). */
@media (max-width: 1640px) and (min-width: 901px) {
  .vc-raison { display: none; }
}
@media (max-width: 1280px) and (min-width: 901px) {
  .vc-option { padding: 0 11px; }
}
/* Écran étroit : la barre haute passe sur plusieurs lignes ; le sélecteur prend la sienne, sous le fil. */
@media (max-width: 900px) {
  .vue-claude { order: 4; }
}
/* Téléphone (sous 720 px) : pleine largeur, cibles de 44 px, la raison dessous ; aucun défilement horizontal à 320 px. */
@media (max-width: 719px) {
  .vue-claude { width: 100%; flex-wrap: wrap; row-gap: 6px; }
  /* Chaque option mesure 44 px de haut (le contrôle grandit de son liseré), jamais 44 px pour l'ensemble. */
  .vc { display: grid; width: 100%; height: auto; }
  .vc-option { min-height: 44px; padding: 0 8px; }
  .bv-retour, .cl-voir { min-height: 44px; }
  .vc-raison { max-width: none; flex-basis: 100%; }
  .vc-note { height: 36px; }
}

/* ---------- Le bandeau de vue ---------- */
.bandeau-vue { padding: 16px var(--pad-contenu) 0; }
.bandeau-vue[hidden] { display: none; }
.bv {
  position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  padding: 10px 12px 10px 16px; border-radius: var(--rayon-3);
  background: linear-gradient(90deg, color-mix(in srgb, var(--teinte-claude) 13%, transparent), var(--voile-1) 55%);
  border: 1px solid color-mix(in srgb, var(--teinte-claude) 28%, var(--trait)); box-shadow: var(--trait-lumiere);
}
.bv::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teinte-claude); }
.bv-logo {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--panneau-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teinte-claude) 45%, transparent), 0 0 16px color-mix(in srgb, var(--teinte-claude) 28%, transparent);
}
.bv-logo img { display: block; width: 18px; height: 18px; }
.bv-texte { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; font-size: var(--taille-petit); line-height: 1.45; color: var(--encre-2); }
.bv-texte b { color: var(--encre); font-weight: var(--graisse-moyenne); }
.bv-poids { min-width: 0; }
.bv-partiel { flex-basis: 100%; color: var(--encre); }
.bv-retour { flex: none; }
@media (max-width: 900px) { .bandeau-vue { padding-top: 12px; } }
@media (max-width: 640px) {
  .bv { flex-wrap: wrap; align-items: flex-start; }
  .bv-texte { flex-basis: calc(100% - 46px); }
  .bv-retour { width: 100%; }
}

/* ---------- Le logo de Claude ailleurs dans la coquille ---------- */
/* Le sélecteur de relevé (liste maison, data-ld-ia) : devant « avec Claude ». */
.ld-detail .ld-ia { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
/* Le bas du rail : Claude après les IA de la marque, son logo à la place de la pastille. */
.rail-surfaces .rail-claude img { flex: none; width: 12px; height: 12px; margin-inline: -2px; }

@media (prefers-reduced-motion: reduce) {
  .vc, .vc-curseur, .vc-option, .vc-logo { transition: none; }
  .vc-option:not([aria-disabled="true"]):hover .vc-logo, .vc-option:active { transform: none; }
}