/* ═══════════════════════════════════════════════════════════════════════════
   base.css - REMISE À ZÉRO ET ÉLÉMENTS DE BASE

   Aucune valeur en dur : tout vient de tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden pose display:none, mais n'importe quelle classe qui pose
   display:flex le bat en spécificité. Sans ce !important, un écran « caché »
   reste visible, et le défaut est invisible en lisant le HTML. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  /* Windows affiche une barre de défilement épaisse qui mange de la largeur,
     macOS une barre flottante qui n'en prend aucune. Sans cette réserve, une
     mise en page calée au pixel se décale d'un système à l'autre. */
  scrollbar-gutter: stable;
}

body {
  background: var(--fond);
  color: var(--texte-fort);
  font-family: var(--police);
  font-size: var(--taille-corps);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Le focus doit toujours rester visible : c'est une des rares choses qui font
   vraiment l'accessibilité, bien plus qu'un sélecteur de thème.
   En cyan et non en violet : sur un bouton principal violet, un contour
   violet ne se distinguerait plus. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}

img, video { display: block; max-width: 100%; }

/* ── Boutons ── */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: 9px 14px;
  border-radius: var(--rayon-moyen);
  background: var(--surface-haute);
  border: 1px solid var(--bordure);
  color: var(--texte-fort);
  font-size: var(--taille-etiquette);
  font-weight: 600;
  transition: background 120ms ease;
}
.bouton:hover { background: var(--bordure); }

.bouton-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}
.bouton-principal:hover { filter: brightness(1.1); }

/* Le retour d'une action : copie réussie, téléchargement enregistré, échec. La couleur du texte est celle du FOND de la page :
   en thème sombre elle est sombre sur un vert clair, en thème clair elle est
   claire sur un vert foncé. Le contraste tient donc dans les deux thèmes sans
   qu'on ait à écrire deux règles. */
.bouton.reponse-ok,
.bouton.reponse-echec {
  color: var(--fond);
  font-weight: 600;
}
.bouton.reponse-ok     { background: var(--ok);        border-color: var(--ok); }
.bouton.reponse-echec  { background: var(--attention); border-color: var(--attention); }
.bouton.reponse-ok:hover,
.bouton.reponse-echec:hover { filter: none; }

/* Les réglages de la barre du haut : présents, sans peser sur la page. */
.bouton-fantome {
  padding: 7px 10px;
  border: none;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--texte-faible);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.bouton-fantome:hover { background: var(--surface-haute); color: var(--texte-fort); }

/* ── Repères : la marque d'un côté, le verdict de l'autre ──

   Ils ne doivent jamais pouvoir se confondre. Le réseau est une BARRE de sa
   couleur, le verdict une ÉTIQUETTE qui porte le mot. Deux ronds de 8 px
   côte à côte, l'un bleu pour LinkedIn et l'autre vert pour « passe bien »,
   obligeaient à deviner lequel disait quoi.

   La couleur ne porte jamais l'information seule : elle renforce un mot déjà
   écrit. C'est aussi ce qui rend le produit lisible à qui distingue mal les
   teintes.                                                                  */

.marque-reseau {
  width: 4px;
  height: 15px;
  border-radius: 2px;
  flex: none;
}

/* La teinte est posée par le JS, à partir des données. Aucune liste de
   niveaux n'est écrite ici. */
.etiquette-verdict {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--rayon-rond);
  background: color-mix(in srgb, var(--teinte) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--teinte) 45%, transparent);
  color: var(--teinte);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  gap: 5px;
}

/* Le picto du verdict (voir pictoVerdict dans ui.js). */
.picto-verdict {
  --picto-creux: var(--fond);
  width: 1.1em; height: 1.1em;
  flex: none;
  fill: currentColor;
  stroke: none;
}
.picto-verdict .creux,
.picto-verdict .trait {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.picto-verdict .creux { stroke: var(--picto-creux); }
.picto-verdict .point { fill: var(--picto-creux); }
.picto-verdict .trait { stroke: currentColor; stroke-width: 1.5; }

.badge {
  padding: 2px 7px;
  border-radius: var(--rayon-rond);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Étiquettes de section ── */

.etiquette-section {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* Une action de carte est un bouton en réduction : elle doit répondre pareil. */
.action-carte.reponse-ok    { background: var(--ok);        color: var(--fond); }
.action-carte.reponse-echec { background: var(--attention); color: var(--fond); }

.discret { color: var(--texte-faible); }
.micro   { font-size: var(--taille-micro); }