/* Composants partagés : boutons, étiquettes, niveaux de risque. */

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font: 600 15px var(--sans); text-decoration: none; border: 1px solid var(--line-strong); color: var(--text); background: var(--panel); transition: background-color .15s ease-out, filter .15s ease-out, transform .1s ease-out; }
/* Le dégradé part du bord extérieur : sous la bordure transparente, il se répéterait
   et ferait réapparaître sa fin violette sur le bord gauche. */
.btn.primary { background: var(--brand) border-box; border-color: transparent; color: var(--on-brand); }
/* Survol : le bouton blanc prend la lavande des puces, le principal s'éclaire.
   Clic : un cran plus soutenu, et le bouton s'enfonce d'un pixel. Réservé aux vrais
   liens et boutons : ceux de la démo sont des illustrations. */
:is(a, button).btn:hover { background-color: var(--chip); }
:is(a, button).btn:active { background-color: var(--line); transform: translateY(1px); }
:is(a, button).btn.primary:hover { filter: brightness(1.06); }
:is(a, button).btn.primary:active { filter: brightness(.94); }
button.btn { cursor: pointer; }
.btn.sm { font-size: 13px; padding: 7px 12px; border-radius: 8px; }
.eyebrow { font: 500 12px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3); }
.tag { font: 500 11px var(--mono); letter-spacing: .8px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--chip); color: var(--text-3); white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.info { background: var(--info-bg); color: var(--info); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.prod { background: var(--danger-bg); color: var(--danger); }
.risk { font: 500 10.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; padding: 3px 7px; border-radius: 6px; }
.risk.read { color: var(--ok); background: var(--ok-bg); }
.risk.write { color: var(--warn); background: var(--warn-bg); }
.risk.hard { color: var(--danger); background: var(--danger-bg); }

/* Carte de commande : la forme sous laquelle Wesiho présente ce qu'il va faire
   (démo de l'accueil, formules des tarifs). */
.card { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--raise); font: 500 13px var(--mono); flex-wrap: wrap; }
.kv { display: grid; gap: 0; padding: 4px 14px; }
.kv div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 13.5px; }
.kv div + div { border-top: 1px solid var(--line); }
.kv dt { color: var(--text-3); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.gl { list-style: none; display: grid; gap: 5px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.gl li::before { content: "✓"; color: var(--ok); font: 600 12px var(--mono); margin-right: 8px; }
.card-actions { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* Bandeau de consentement : à l'encre, comme ce qui compte, sans ombre ajoutée.
   « Refuser » et « Accepter » ont exactement la même forme (CNIL). */
.consent { position: fixed; z-index: 10; left: 24px; bottom: 24px; max-width: 520px; background: var(--ink); color: var(--on-ink); border-radius: 14px; }
.consent form { position: relative; padding: 18px 48px 16px 20px; }
.consent p { font-size: 14px; line-height: 1.5; color: var(--on-ink-2); }
.consent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.consent-actions .btn { min-width: 96px; justify-content: center; cursor: pointer; }
.consent-actions a { color: var(--on-ink); font-size: 13.5px; margin-left: 6px; }
.consent-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--on-ink-2); cursor: pointer; }
.consent-close:hover { background: rgba(247, 245, 251, .1); color: var(--on-ink); }
.consent-close svg { width: 16px; height: 16px; }
.consent :focus-visible { outline-color: var(--on-ink); }
@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Champs de formulaire : libellé au-dessus, erreur dessous, en clair. */
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; }
.field .opt { font-weight: 400; color: var(--text-3); }
.field :is(input, select, textarea) { width: 100%; font: 15px/1.5 var(--sans); color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; transition: border-color .15s ease-out; }
.field textarea { resize: vertical; min-height: 140px; }
.field :is(input, select, textarea):hover { border-color: var(--text-3); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
.field.invalid :is(input, textarea) { border-color: var(--danger); }
.field-error { font-size: 13.5px; color: var(--danger); }
.form-alert { padding: 12px 14px; border: 1px solid var(--danger-line); border-radius: 10px; background: var(--danger-bg); color: var(--danger); font-size: 14px; }
.form-alert a { color: inherit; }
::selection { background: var(--glow-b); }