/*
 * Composants partagés. Convention de nommage : bloc, bloc__element,
 * bloc--variante (en français). États par attributs ARIA ou data-*, jamais
 * par la seule couleur.
 */

/* --- Boutons ---------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible-min);
  padding: var(--e-2) var(--e-5);
  border: var(--trait-fort) solid var(--accent);
  border-radius: var(--rayon-2);
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree-1) var(--courbe), box-shadow var(--duree-1) var(--courbe);
}
.bouton:hover {
  box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--accent);
}
.bouton:active {
  transform: translateY(1px);
}
.bouton--secondaire {
  background: transparent;
  color: var(--encre);
  border-color: var(--filet-fort);
}
.bouton--secondaire:hover {
  border-color: var(--encre);
  box-shadow: none;
  background: var(--trame);
}
.bouton--discret {
  background: transparent;
  color: var(--encre);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  padding-inline: var(--e-3);
}
.bouton--discret:hover {
  box-shadow: none;
  background: var(--trame);
}
.bouton--grand {
  font-size: var(--t-3);
  padding: var(--e-3) var(--e-6);
  min-height: 3.25rem;
}
.bouton--icone {
  padding: var(--e-2);
  min-width: var(--cible-min);
  background: transparent;
  color: var(--encre);
  border-color: var(--filet);
}
.bouton--icone:hover {
  border-color: var(--encre);
  box-shadow: none;
}
.bouton[disabled],
.bouton[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}
.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Avis (encadrés d'information) ---------------------------------------------- */
.avis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-4);
  border: var(--trait) solid var(--filet-fort);
  border-left-width: 4px;
  border-radius: var(--rayon-2);
  background: var(--surface);
  font-size: var(--t-1);
}
.avis > .icone {
  margin-top: 0.15em;
}
.avis--trame {
  background: var(--trame);
  border-color: var(--filet);
  border-left-color: var(--encre);
}
.avis strong:first-child {
  display: block;
}
/* Revue du 14/10 (m1) : à 320 px, une étiquette longue ne doit pas élargir l'avis. */
.avis > * {
  min-width: 0;
}
.avis .etiquette {
  white-space: normal;
}
.bandeau-synthetique {
  border-bottom: var(--trait) dashed var(--filet-fort);
  background: repeating-linear-gradient(135deg, var(--trame) 0 8px, transparent 8px 16px);
  font-size: var(--t-0);
  padding-block: var(--e-2);
  text-align: center;
}

/* --- Étiquettes --------------------------------------------------------------- */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.1em 0.55em;
  border: var(--trait) solid var(--filet-fort);
  border-radius: 999px;
  font-size: var(--t-0);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.etiquette--pleine {
  background: var(--accent);
  color: var(--sur-accent);
  border-color: var(--accent);
}

/* --- Bulletin (carte de proposition) ------------------------------------------- */
.bulletin {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-2);
  box-shadow: var(--ombre-carte);
  transition: transform var(--duree-2) var(--courbe), box-shadow var(--duree-2) var(--courbe),
    opacity var(--duree-2) var(--courbe);
}
.bulletin__talon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: var(--trait) dashed var(--filet-fort);
}
.bulletin__lettre {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--trait-fort) solid var(--encre);
  border-radius: var(--rayon-1);
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.bulletin__corps {
  flex: 1;
  padding: var(--e-5) var(--e-4) var(--e-4);
}
.bulletin__texte {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  line-height: 1.38;
  max-width: none;
}
.bulletin__glossaire {
  margin-top: var(--e-4);
  font-size: var(--t-1);
}
.bulletin__glossaire summary {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  min-height: var(--cible-min);
  display: inline-flex;
  align-items: center;
}
.bulletin__glossaire dl {
  margin-top: var(--e-2);
  display: grid;
  gap: var(--e-2);
}
.bulletin__glossaire dt {
  font-weight: 650;
}
.bulletin__glossaire dd {
  margin: 0;
  color: var(--encre-2);
}
.bulletin__pied {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  padding: 0 var(--e-4) var(--e-4);
}
.bulletin__pied .bouton {
  width: 100%;
  padding-inline: var(--e-2);
}
/* Axe à deux sens (21/10/2026) : « plutôt » au centre en contour, « nettement » aux extrémités en plein,
   flèche simple ou double tournée vers le côté de la carte. */
.bouton--plutot {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}
.bouton--plutot:hover {
  background: var(--trame);
}
.bouton__fleche {
  font-size: 1.25em;
  line-height: 1;
  font-weight: 700;
}
/* Cartes étroites (téléphone en portrait) : les deux boutons s'empilent plutôt que de se couper. */
@media (max-width: 22rem) {
  .bulletin__pied {
    grid-template-columns: 1fr;
  }
}
.bulletin__etat {
  display: none;
  font-size: var(--t-0);
  font-weight: 650;
}
/* Choix fait : trait épais + libellé ; l'autre carte s'efface (avec libellé). */
.bulletin[data-etat='choisie'] {
  border: var(--trait-choix) solid var(--encre);
  transform: none;
}
.bulletin[data-etat='choisie'] .bulletin__etat,
.bulletin[data-etat='ecartee'] .bulletin__etat,
.bulletin[data-etat='egalite'] .bulletin__etat {
  display: inline-flex;
}
/* Carte non retenue : en retrait par le trait (pointillé) et le fond, jamais
   par une opacité qui ferait baisser le contraste du texte. */
.bulletin[data-etat='ecartee'] {
  border-style: dashed;
  background: var(--fond-2);
  box-shadow: none;
}

/* Révélation (porteur, formulation d'origine, source datée) */
.revelation {
  margin: 0 var(--e-4) var(--e-4);
  padding-top: var(--e-4);
  border-top: var(--trait) solid var(--filet);
  font-size: var(--t-1);
  animation: apparition var(--duree-2) var(--courbe);
}
.revelation__porteur {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  font-weight: 650;
}
.revelation__parti {
  color: var(--encre-2);
}
.revelation__citation {
  margin-top: var(--e-3);
  padding-left: var(--e-3);
  border-left: var(--trait-fort) solid var(--filet-fort);
  color: var(--encre-2);
}
.revelation__source {
  margin-top: var(--e-3);
}
.revelation + .revelation {
  margin-top: 0;
}
@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* --- Duel ------------------------------------------------------------------------ */
.duel {
  display: grid;
  gap: var(--e-5);
}
.duel__entete {
  display: grid;
  gap: var(--e-2);
}
.duel__question {
  font-size: var(--t-4);
}
.duel__plateau {
  display: grid;
  gap: var(--e-3);
  align-items: stretch;
}
.duel__ou {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--t-3);
  color: var(--encre-2);
}
.duel__ou::before,
.duel__ou::after {
  content: '';
  flex: 1;
  border-top: var(--trait) solid var(--filet);
}
@media (min-width: 48rem) {
  .duel__plateau {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--e-4);
  }
  .duel__ou {
    flex-direction: column;
  }
  .duel__ou::before,
  .duel__ou::after {
    border-top: 0;
    border-left: var(--trait) solid var(--filet);
  }
}
.duel__autres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}
.duel__autres .bouton--discret {
  grid-column: 1 / -1;
  justify-self: center;
}
@media (min-width: 40rem) {
  .duel__autres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.duel__aide {
  font-size: var(--t-1);
}
.duel__raccourcis {
  display: grid;
  gap: var(--e-2);
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  border: var(--trait) solid var(--filet-fort);
  border-bottom-width: 2px;
  border-radius: var(--rayon-1);
  background: var(--fond-2);
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
}
.duel__suite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
}

/* --- Jauge de fiabilité (readiness) --------------------------------------------- */
.jauge {
  display: grid;
  gap: var(--e-2);
  font-size: var(--t-1);
}
.jauge__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.jauge__crans {
  display: grid;
  grid-template-columns: repeat(var(--crans, 12), 1fr);
  gap: 3px;
}
.jauge__cran {
  height: 0.5rem;
  border: var(--trait) solid var(--filet-fort);
  border-radius: 1px;
}
.jauge__cran[data-plein] {
  background: var(--encre);
  border-color: var(--encre);
}

/* --- Puces de choix (thèmes) ------------------------------------------------------ */
.choix-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.puce {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 3rem;
  padding: var(--e-2) var(--e-3);
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-2);
  background: var(--surface);
  cursor: pointer;
}
.puce input {
  appearance: none;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--trait-fort) solid var(--encre);
  border-radius: var(--rayon-1);
  display: grid;
  place-content: center;
}
.puce input::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--sur-accent);
  transform: scale(0);
}
.puce input:checked {
  background: var(--accent);
}
.puce input[type='radio'] {
  border-radius: 50%;
}
.puce input[type='radio']::before {
  clip-path: circle(50%);
  width: 0.5rem;
  height: 0.5rem;
}
.puce input:checked::before {
  transform: scale(1);
}
.puce:has(input:checked) {
  border: var(--trait-fort) solid var(--encre);
  padding: calc(var(--e-2) - 1px) calc(var(--e-3) - 1px);
}
.puce:has(input:focus-visible) {
  outline: var(--trait-fort) solid var(--focus-externe);
  outline-offset: 2px;
}
.puce input:focus-visible {
  outline: none;
  box-shadow: none;
}
.puce:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Case de consentement (distincte, non cochée par défaut) */
.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-4);
  border: var(--trait) solid var(--filet-fort);
  border-radius: var(--rayon-2);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--t-1);
}
.case input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}

/* --- Onglets ---------------------------------------------------------------------- */
.onglets {
  display: flex;
  gap: var(--e-1);
  overflow-x: auto;
  border-bottom: var(--trait) solid var(--filet-fort);
  scrollbar-width: thin;
}
.onglets button {
  flex: none;
  min-height: var(--cible-min);
  padding: var(--e-2) var(--e-4);
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  cursor: pointer;
  font-weight: 500;
}
.onglets button[aria-selected='true'] {
  border-bottom-color: var(--encre);
  font-weight: 700;
}
.onglets button:hover {
  background: var(--trame);
}

/* --- Listes de résultats ----------------------------------------------------------------- */
.liste-sobre {
  list-style: none;
  padding: 0;
  margin: 0;
}
.liste-sobre > li {
  max-width: none;
  padding-block: var(--e-4);
  border-bottom: var(--trait) solid var(--filet);
}
.liste-sobre > li:first-child {
  border-top: var(--trait) solid var(--filet);
}

/* Intervalle (fourchette) dessiné sur une échelle de 0 à 100 */
.intervalle {
  position: relative;
  height: 1.25rem;
  border-radius: var(--rayon-1);
  background: linear-gradient(to right, var(--filet) 0 0) center / 100% 1px no-repeat;
}
.intervalle__plage {
  position: absolute;
  top: 0.3rem;
  height: 0.65rem;
  border: var(--trait) solid var(--encre);
  background: var(--trame);
  border-radius: 1px;
}
.intervalle__point {
  position: absolute;
  top: 0.1rem;
  width: 3px;
  height: 1.05rem;
  margin-left: -1px;
  background: var(--encre);
}
.intervalle__milieu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: var(--trait) dashed var(--filet-fort);
}

/* --- Tableaux --------------------------------------------------------------------- */
.tableau-defilant {
  overflow-x: auto;
  border: var(--trait) solid var(--filet);
  border-radius: var(--rayon-2);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-1);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--e-2) var(--e-3);
  border-bottom: var(--trait) solid var(--filet);
}
th {
  font-weight: 650;
  background: var(--fond-2);
}

/* --- Détails dépliables ------------------------------------------------------------- */
.depliant {
  border: var(--trait) solid var(--filet);
  border-radius: var(--rayon-2);
  background: var(--surface);
}
.depliant > summary {
  cursor: pointer;
  padding: var(--e-3) var(--e-4);
  min-height: var(--cible-min);
  font-weight: 600;
  list-style-position: inside;
}
.depliant > :not(summary) {
  padding: 0 var(--e-4) var(--e-4);
}

/* --- Chargement --------------------------------------------------------------------- */
.chargement {
  display: grid;
  gap: var(--e-3);
  justify-items: start;
  color: var(--encre-2);
}
.chargement__trait {
  width: 10rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--encre), transparent) 0 0 / 40% 100% no-repeat, var(--filet);
  animation: balayage 1.1s linear infinite;
}
@keyframes balayage {
  from {
    background-position: -40% 0, 0 0;
  }
  to {
    background-position: 140% 0, 0 0;
  }
}

/* --- Pastille de contribution --------------------------------------------------------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-0);
  color: var(--encre-2);
}