/* Briques génériques d'ABC Chat IA : boutons, champs, dialogues, onglets.
   L'écran de conversation vit dans conversation.css, les couleurs dans themes.css,
   la structure dans mise-en-page.css, les animations dans animations.css. */

/* ---------- Base ---------- */

button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* Au doigt : pas de rectangle gris au toucher, pas de zoom au double-tap. */
button, a, select, textarea, input, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button, input, textarea, select, .suggestion, .convo {
  transition-property: background-color, border-color, color, box-shadow, transform, translate, scale, opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}
button:active:not(:disabled) { transform: scale(0.96); }
button:disabled { cursor: default; opacity: 0.55; }

/* Deux motifs de focus, et deux seulement : un contour net sur ce qui se clique
   (boutons, liens), un halo sur ce qui se remplit (champs, listes déroulantes).
   Le halo vit dans le jeton --halo-focus (themes.css) : tous les écrans le reprennent
   à l'identique au lieu de réinventer chacun le sien. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::placeholder { color: var(--texte-faible); opacity: 1; }

.icone { display: inline-block; flex-shrink: 0; }

/* Bascule d'icônes (lune ↔ soleil) : les deux icônes restent dans la page, l'une
   posée sur l'autre, et se croisent en fondu-échelle. Remplacer une icône par l'autre
   claque ; les faire se croiser se voit à peine — et c'est justement le but.
   La première icône, restée dans le flux, donne sa taille au bouton. */
.bascule-icone { position: relative; display: inline-flex; }
.bascule-icone .icone + .icone { position: absolute; inset: 0; }
.bascule-icone .icone {
  transition-property: opacity, scale, filter;
  transition-duration: 0.3s;
  transition-timing-function: var(--courbe-icone);
}
.bascule-icone .icone.retiree {
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

/* ---------- Logo + signature tricolore ---------- */

.logo {
  padding: 18px 18px 0;
  font-size: 1.24rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
/* Lettres ABC : A magenta, B orange, C vert (charte, ordre validé par Omar). */
.logo .l-a { color: var(--accent-2); font-weight: 800; }
.logo .l-b { color: var(--accent);   font-weight: 800; }
.logo .l-c { color: var(--accent-3); font-weight: 800; }

.filet-tricolore {
  height: 2px;
  margin: 12px 18px 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0 33%, var(--accent-2) 33% 66%, var(--accent-3) 66% 100%);
  opacity: 0.9;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  background: var(--fond-panneau);
  color: var(--texte);
}
.btn:hover { background: color-mix(in srgb, var(--texte) 5%, var(--fond-panneau)); box-shadow: var(--ombre); }
.btn.accent {
  background: var(--accent);
  color: var(--accent-texte);
  border-color: var(--accent);
  font-weight: 600;
}
.btn.accent:hover { background: color-mix(in srgb, var(--accent) 90%, var(--texte)); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--bordure)); background: none; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); box-shadow: none; }
.btn-petit { min-height: 36px; padding: 5px 10px; font-size: 0.85rem; }

/* Contour accent : action mise en avant sans être « pleine » (ex. Ouvrir la page de clé). */
.btn.accent-contour {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure-forte));
  font-weight: 600;
}
.btn.accent-contour .icone { color: var(--accent); }
.btn.accent-contour:hover { background: var(--accent-doux); border-color: var(--accent); box-shadow: var(--ombre); }

/* Un lien peut porter l'allure d'un bouton (pas de soulignement). */
a.btn { text-decoration: none; }
.lien-action { margin: 2px 0 18px; }

/* Nouvelle conversation : bouton posé (bordure + ombre douce), icône orange. */
.btn-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 14px 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-md);
  background: var(--fond-panneau);
  color: var(--texte);
  font-weight: 600;
  box-shadow: var(--ombre);
}
.btn-principal .icone { color: var(--accent); }
.btn-principal:hover {
  box-shadow: var(--ombre-moyenne);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--bordure-forte));
}

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--texte-doux);
}
.btn-icone:hover {
  background: color-mix(in srgb, var(--texte) 7%, transparent);
  color: var(--texte);
}

/* ---------- Dialogues ---------- */

dialog {
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  background: var(--fond-panneau);
  color: var(--texte);
  width: min(560px, calc(100vw - 32px));
  max-height: 85vh;
  padding: 0;
  box-shadow: var(--ombre-dialogue);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.45); /* filet si le navigateur ignore la variable */
  background: var(--voile);
}
.dialogue-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px 14px 20px;
  border-bottom: 1px solid var(--bordure);
}
.dialogue-entete h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.dialogue-corps { padding: 18px 20px; overflow-y: auto; max-height: calc(85vh - 64px); }
/* Le corps porte `autofocus` (index.html) pour que l'ouverture d'une fenêtre ne pose pas
   l'anneau de focus sur la croix « Fermer » — première chose que voyait l'œil, et la
   plus mauvaise cible possible. Ce n'est pas un contrôle : il ne montre pas d'anneau. */
.dialogue-corps:focus { outline: none; }

.onglets { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.onglets button {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--fond-panneau);
  color: var(--texte);
}
.onglets button:hover { background: color-mix(in srgb, var(--texte) 6%, var(--fond-panneau)); }
.onglets button.actif {
  background: var(--accent);
  color: var(--accent-texte);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---------- Champs de formulaire ---------- */

.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.champ input, .champ textarea, .champ select {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  background: var(--fond-saisie);
}
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--halo-focus);
}
.champ textarea { min-height: 110px; resize: vertical; }
.champ .aide { font-size: 0.8rem; color: var(--texte-doux); margin-top: 5px; text-wrap: pretty; }

/* Onglet Clés API : six fournisseurs à la file font un mur de champs. Un filet entre
   deux blocs suffit à dire « ici commence un autre fournisseur » (un séparateur reste
   un trait, pas une ombre : il sépare, il ne soulève rien). */
.bloc-cle + .bloc-cle {
  border-top: 1px solid var(--bordure);
  padding-top: 16px;
}
.aide a {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.aide a:hover { text-decoration-thickness: 2px; }
.aide a .icone { flex: none; }

.ligne-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.etat-cle {
  font-size: 0.8rem;
  margin-top: 5px;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.etat-cle:empty { display: none; }
.etat-cle .icone { flex: none; }
.etat-cle.ok { color: var(--etat-ok); }
.etat-cle.erreur { color: var(--danger); }

/* ---------- Onglet Apparence ---------- */

.choix-themes { display: flex; gap: 10px; }
.choix-themes button {
  flex: 1;
  padding: 14px 12px;
  border-radius: var(--r-md);
  border: 2px solid var(--bordure-forte);
  background: var(--fond-saisie);
  color: var(--texte);
}
.choix-themes button:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--bordure)); }
.choix-themes button.actif { border-color: var(--accent); font-weight: 700; box-shadow: var(--ombre); }
.pastilles { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.pastille {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--bordure);
}

/* ---------- Rôles et accueil ---------- */

/* Rayons concentriques : les boutons (10 px) touchent presque le coin bas de la carte,
   donc la carte vaut leur rayon PLUS le retrait — 10 + 10 = 20. Avec le même rayon des
   deux côtés, l'œil voit deux courbes qui ne suivent pas la même ligne. */
.carte-role {
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: 10px;
  margin-bottom: 10px;
  background: var(--fond-panneau-2);
}
.carte-role .nom { font-weight: 600; text-wrap: pretty; }
.carte-role .actions { display: flex; gap: 8px; margin-top: 8px; }

.points-etape { display: flex; gap: 8px; margin: 2px 0 16px; }
.points-etape span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bordure-forte);
  transition-property: background-color, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.points-etape span.atteint:nth-child(1) { background: var(--accent-2); }
.points-etape span.atteint:nth-child(2) { background: var(--accent); }
.points-etape span.atteint:nth-child(3) { background: var(--accent-3); }
.points-etape span.actuel { transform: scale(1.3); }

.etape-accueil ol { padding-left: 20px; line-height: 1.7; }
.etape-accueil a { color: var(--accent-2); }

/* ---------- Écrans tactiles ---------- */

/* Ces règles visent le DOIGT, pas la petite largeur : elles s'appliquent aussi bien au
   téléphone qu'à la tablette, et jamais à un écran de bureau avec souris. */
@media (pointer: coarse) {
  /* En dessous de 16 px, Safari zoome tout seul sur le champ touché et la page saute.
     16 px partout = plus jamais de zoom-surprise à la saisie. */
  input, textarea, select { font-size: 16px; }

  /* Cible minimale confortable au pouce (repère Apple et Google : 44 px). */
  .btn, .onglets button { min-height: 44px; }
  .btn-petit { min-height: 40px; }
  .btn-icone {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  /* Les trois thèmes tiennent même sur un écran de 320 px. */
  .choix-themes { flex-wrap: wrap; }
  .choix-themes button { flex: 1 1 30%; min-width: 92px; }
}

/* ---------- Fenêtres en feuille (téléphone) ---------- */

/* Sur téléphone, une boîte centrée gâche les bords de l'écran et met les boutons hors
   de portée du pouce : la fenêtre devient une feuille qui monte du bas, pleine largeur. */
@media (max-width: 760px), (max-height: 500px) and (max-width: 950px) and (pointer: coarse) {
  dialog {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto auto 0;                  /* collée en bas de l'écran */
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dialogue-entete { padding: 14px 10px 14px 16px; }
  .dialogue-corps {
    padding: 16px;
    max-height: calc(92dvh - 68px - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .onglets {
    gap: 5px;
    margin-bottom: 14px;
  }
  .onglets button { padding: 7px 12px; }
  /* Les actions d'un formulaire prennent la largeur : plus faciles à viser. */
  .ligne-boutons > .btn { flex: 1 1 auto; }
}