/* Styles communs aux gabarits fiche marque, guide et home (chargés en
   complément du fichier propre à chaque gabarit). Classes reprises à
   l'identique du patron établi par le gabarit pilote comparatif
   (assets/css/comparatif.css), pour ne pas faire diverger le vocabulaire
   visuel entre gabarits. */

.ruban-exemple {
  background: var(--couleur-alerte);
  color: var(--couleur-fond);
  font-family: var(--fonte-donnees);
  font-size: 0.75rem;
  text-align: center;
  padding: var(--espace-1) var(--espace-2);
}

.exemple {
  font-family: var(--fonte-donnees);
  font-size: 0.6875rem;
  color: var(--couleur-alerte);
  letter-spacing: 0.04em;
}

.rd {
  border-left: 3px solid var(--couleur-accent);
  padding-left: var(--espace-3);
  font-size: 1.0625rem;
  margin: var(--espace-4) 0;
}

.carte {
  background: var(--couleur-fond-2);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--espace-4);
  margin: var(--espace-3) 0;
}
.carte .nom, .ms .nom { font-weight: 600; font-size: 1.125rem; }

.badge-brut {
  display: inline-block;
  border: 2px solid var(--couleur-encre);
  border-radius: var(--rayon-tampon);
  padding: 0 var(--espace-2);
  font-weight: 600;
  font-size: 0.875rem;
  margin: var(--espace-1) 0;
}
.badge-brut.raffine { border-style: dashed; }

.st-ok { color: var(--couleur-verifie); font-size: 0.9375rem; }
.st-nv { color: var(--couleur-non-verifie); font-size: 0.9375rem; }
.st-constat { color: var(--couleur-encre-2); font-size: 0.9375rem; }
.st-constat .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.note { font-size: 0.875rem; color: var(--couleur-encre-2); }
.etiquette { color: var(--couleur-encre-2); font-size: 0.875rem; }

details {
  border-top: var(--trait);
  padding: var(--espace-3) 0;
}
details:last-of-type { border-bottom: var(--trait); }
summary {
  font-weight: 600;
  cursor: pointer;
  min-height: var(--cible-min);
  display: flex;
  align-items: center;
  font-family: var(--fonte-texte);
}

.ms {
  background: var(--couleur-fond-2);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--espace-4);
  margin: var(--espace-6) 0;
  overflow-wrap: anywhere;
}

.fil-ariane {
  font-size: 0.8125rem;
  color: var(--couleur-encre-2);
  margin: var(--espace-3) 0;
}
.fil-ariane a { color: var(--couleur-encre-2); }

.btn {
  display: block;
  width: 100%;
  min-height: var(--cible-min);
  padding: var(--espace-3) var(--espace-5);
  border-radius: var(--rayon);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  border: none;
  cursor: pointer;
  background: var(--couleur-accent-fort);
  color: var(--couleur-fond);
  text-decoration: none;
}

.cap input {
  min-height: var(--cible-min);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--espace-2) var(--espace-3);
  font-size: 1rem;
  width: 100%;
  margin: var(--espace-2) 0;
  background: #fff;
}

.mono {
  font-family: var(--fonte-donnees);
  font-variant-numeric: tabular-nums;
}

.tampon-date {
  display: inline-block;
  border: var(--trait-tampon);
  border-radius: var(--rayon-tampon);
  padding: 2px 8px;
  font-family: var(--fonte-donnees);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  table.donnees {
    display: block;
    overflow-x: auto;
  }
}