@layer components {
  .page-header { margin: var(--space-8) 0 var(--space-4); }
  .page-header h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-2); }
  .page-header .lead { color: var(--color-muted); margin: 0; }

/* ===== Boutons ===== */
  /* 1) Liens sobres partout (ordre LVHA pour que :hover gagne toujours) */
  a:link,
  a:visited {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: .12em;
    text-decoration-thickness: 1px;
    font-weight: 400;
  }
  a:hover   { color: var(--color-accent-weaker); }
  a:active  { color: var(--color-accent-contrast); } /* attention : si c'est #fff, lisibilité sur fond clair… */

  /* 2) Boutons et submits → même style “lien” que <a> */
  :is(.btn, .button, button,
      input[type="submit"], input[type="button"], input[type="reset"]) {
    appearance: none; -webkit-appearance: none;
    background: transparent; border: 0;
    padding: 0; margin: 0; height: auto; line-height: inherit;
    font: inherit;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: .12em;
    text-decoration-thickness: 1px;
    cursor: pointer;
  }
  :is(.btn, .button, button,
      input[type="submit"], input[type="button"], input[type="reset"]):hover {
    color: var(--color-accent-weak);
  }
  :is(.btn, .button, button,
      input[type="submit"], input[type="button"], input[type="reset"]):active {
    color: var(--color-accent-contrast);
  }
  :is(.btn, .button, button,
      input[type="submit"], input[type="button"], input[type="reset"]):focus-visible {
    outline: none; text-decoration-thickness: 2px; /* petit feedback acces. */
  }
  /* états “non cliquable” (pour <button disabled>, et pour <a aria-disabled="true">) */
  :is(.btn, .button, button,
      input[type="submit"], input[type="button"], input[type="reset"])[disabled],
  a[aria-disabled="true"] {
    color: var(--color-muted); cursor: not-allowed; text-decoration: none;
    pointer-events: none; /* empêche le clic si besoin */
  }

  /* 3) Actions sous le titre : espace et retour à la ligne → liens bien séparés */
  .actions {
    margin-top: var(--space-3);
    display: flex;
    gap: .6rem;          /* espace horizontal/vertical */
    flex-wrap: wrap;     /* passe à la ligne si besoin */
  }
  .actions a { display: inline-block; } /* pour une zone cliquable nette par lien */

  /* 4) Nav : même style “lien”, pas de violet */
  .top-nav .top-nav-links a:link,
  .top-nav .top-nav-links a:visited { color: var(--color-accent); text-decoration: underline; }
  .top-nav .top-nav-links a:hover  { color: var(--color-accent-weaker); }
  .top-nav .top-nav-links a:active { color: var(--color-accent-contrast); }


  /* ===== Formulaires ===== */
  :where(input[type='text'], input[type='email'], input[type='password'], input[type='search'],
    input[type='url'], input[type='tel'], input[type='number'], input[type='date'],
    textarea, select){
      width: var(--control-w, 100%);         /* largeur contrôlable (voir §2) */
      height: var(--control-h, 2.5rem);      /* hauteur contrôlable */
      padding: 0 1rem;
      border: 1px solid var(--color-border);
      background: var(--color-bg);
      color: var(--color-text);
      font-style: light;
      border-radius: var(--radius);
      outline: 0;
      /* ombre interne (sunken) */
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,.13),
        inset 0 -1px 0 rgba(0,0,0,.08);
      transition: border-color .12s ease, box-shadow .12s ease;
    }

    textarea{
      min-height: var(--control-textarea-h, 8rem);
      padding: .7rem 1rem;
      resize: vertical; /* hauteur seulement */
    }

    :where(input, textarea, select):focus{
      border-color: var(--color-accent);
      /* on garde l’inner shadow et on ajoute un anneau externe pour l’accessibilité */
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,.08),
        inset 0 -1px 0 rgba(0,0,0,.03),
        0 0 0 3px color-mix(in oklab, var(--color-accent) 25%, transparent);
    }

  /* wrappers Cake */
  .control { margin-bottom: var(--space-4); }
  .control label { display:block; font-weight:700; margin:0 0 .5rem; color: var(--color-text); }
  

  /* ===== Tables ===== */
  table{ width:100%; border-collapse: collapse; background: var(--color-surface); }
  th, td{
    border-bottom:.1rem solid var(--color-border);
    padding:1.0rem 1.2rem; text-align:left;
  }
  table.wrap { overflow-x:auto; display:block; }

  /* ===== Cards ===== */
  .card{
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    transition: transform .08s ease, box-shadow .12s ease;
  }
  /* .card:hover{ transform: translateY(-2px); } */

  /* Hero */
  .hero{
    margin: 0 0 var(--space-8);
    padding: calc(var(--space-4) + var(--space-1)) var(--space-6);
    border: 1px solid var(--color-border);
    /* border-radius: var(--radius); */
    background: var(--color-surface);
    box-shadow: var(--shadow);
  }
  .hero h1{ margin: 0 0 var(--space-2); font-size: var(--fs-h1); }
  .hero p{ margin: 0; color: var(--color-muted); }
}

/* Petits overrides sûrs à très faible spécificité */
@layer overrides {
  a:not(.btn):not(.button):hover { opacity:.9; }
}