/* Claude sur les écrans d'une marque (14/11/2026, dossier/43-VUE-AVEC-CLAUDE.md § 3.5, lot D). Les blocs « Claude à côté »
   du 12/11 sont fondus : en vue « Avec Claude », Claude prend les styles des autres IA ; restent ici la carte courte de la
   vue « Sans Claude », la mention « sur vos {n} IA », le logo d'un relevé fait avec Claude, sa ligne pendant un relevé en
   cours et sa réponse lue à côté (rendreReponsesClaude). Jetons de tokens.css seulement. */

/* Le logo de Claude, décoratif : son nom est toujours écrit à côté. */
.cl-logo { display: inline-flex; flex: none; align-items: center; }
.cl-logo .ia-jeton { width: 22px; height: 22px; }
.cl-logo .ia-jeton img { width: 14px; height: 14px; }

/* La carte courte du Résumé, en vue « Sans Claude ». */
.cl-courte:focus { outline: none; }
.cl-courte:focus-visible { box-shadow: var(--anneau-focus); }
.cl-courte-corps { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; }
.cl-courte-corps > .cl-logo .ia-jeton { width: 32px; height: 32px; }
.cl-courte-corps > .cl-logo .ia-jeton img { width: 20px; height: 20px; }
.cl-courte-titre { font-size: 15px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.cl-courte-phrase { margin-top: 2px; max-width: 64ch; font-size: var(--taille-petit); line-height: 1.55; color: var(--encre-2); }
.cl-courte-phrase b { color: var(--encre); }
.cl-courte-corps .lien-carte { margin-top: 6px; }
.cl-courte-geste { display: grid; justify-items: end; gap: 6px; text-align: right; }
.cl-courte-geste .tertiaire, .cl-courte-indispo { max-width: 32ch; font-size: var(--taille-etiquette); line-height: 1.45; }
.cl-voir { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.cl-voir:focus-visible { box-shadow: var(--anneau-focus); }

/* « Mesuré sur vos {n} IA, sans Claude » : sous un chiffre que la première vague mesure sans Claude. */
.cl-hors { font-size: var(--taille-etiquette); line-height: 1.45; color: var(--encre-2); }
.heros-hors { margin-top: 2px; }
.cl-premiere { margin-top: 6px; max-width: 60ch; font-size: var(--taille-etiquette); line-height: 1.45; }
.carte-ton > .cl-hors { margin-top: 12px; }
.section-tete .cl-hors { display: block; margin-top: 4px; }
.cl-hors-serie { color: var(--encre-2); }

/* Accueil et groupes : le relevé montré a été fait avec Claude. */
.cl-avec { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle; font-size: var(--taille-etiquette); color: var(--encre-2); }
.cl-avec .ia-jeton { width: 18px; height: 18px; }
.cl-avec .ia-jeton img { width: 12px; height: 12px; }
.groupe-releve .cl-avec { margin-left: 6px; }

/* Pendant un relevé : la ligne de Claude dans « IA par IA » et sa phrase. */
.direct-ia li[data-surface="claude"] { grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) auto; }
.direct-ia li[data-surface="claude"] .direct-ia-compte { white-space: nowrap; }
.cl-direct-note { margin-top: 10px; max-width: 60ch; font-size: var(--taille-etiquette); line-height: 1.5; }

/* Réglage de Claude et fenêtre du relevé à la demande : la phrase de la vue. */
.cl-phrase-vue { margin-top: 10px; }

/* Évolution, vue « Avec Claude » : six IA tiennent sur une ligne au bureau (Claude ne reste pas seul en dessous). */
@media (min-width: 1181px) {
  .vignettes:has(> .vignette:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  /* Six colonnes étroites : l'écart passe sous le nom sur chaque vignette, jamais sur certaines seulement (noms longs). */
  .vignettes:has(> .vignette:nth-child(6):last-child) .vignette-tete { flex-direction: column; align-items: flex-start; }
  .vignettes:has(> .vignette:nth-child(6):last-child) .vignette { padding: 16px 14px 12px; }
}

/* Questions : sa réponse lue à côté (plus posée par un écran ; gardée pour les documents d'avant). */
.cl-reponses { display: grid; margin-top: 4px; border-top: 1px dashed var(--trait-fort); }
.cl-reponses-note { margin-top: 12px; font-size: var(--taille-etiquette); line-height: 1.5; color: var(--encre-2); }
.cl-reponses .erreur { margin-top: 8px; }

/* 13/11/2026 (non-calcule.js) : ce qu'un relevé payé n'a pas calculé, dit sobrement sous la liste des concurrents. */
.conc-non-calcule { margin-top: 14px; }
.conc-non-calcule + .conc-non-calcule { margin-top: 4px; }

@media (max-width: 720px) {
  .cl-courte-corps { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .cl-courte-geste { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
  .cl-voir { justify-content: center; min-height: 44px; }
  .cl-courte-geste .tertiaire, .cl-courte-indispo { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-voir { transition: none; }
}