/* Composants de l'interface (cahier des charges v2.4, section 6).
   Hiérarchie par les fonds : pas de contour sur les cards, les filtres ni les étiquettes ;
   seuls les champs de formulaire gardent un contour. Aucune ombre, aucun dégradé.
   Arrondis : 12 px cards, 10 px icônes, 8 px boutons / champs / menus, pastille filtres et
   étiquettes, rond pour les avatars. */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--c-btn-secondary);
  color: var(--c-btn-secondary-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.btn-primary { background: var(--c-action); color: var(--c-on-action); }
.btn-primary:hover { background: var(--c-action); color: var(--c-on-action); text-decoration: underline; text-underline-offset: 0.2em; }
.btn-link { background: transparent; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 0.2em; }
.btn-link:hover { background: transparent; color: var(--c-link); text-decoration-thickness: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; text-decoration: none; }
.btn-block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-4) 0; }

/* --- Champs : ils gardent un contour pour rester identifiables --- */
.field { margin-bottom: var(--space-4); }
.field label, .label { display: block; font-weight: 600; margin-bottom: var(--space-1); }

.input, .select,
input[type="email"], input[type="password"], input[type="text"], input[type="search"], input:not([type]) {
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
}
.select { appearance: auto; }
/* Texte indicatif : couleur de la charte (texte secondaire), jamais le gris du navigateur */
::placeholder { color: var(--c-text-secondary); opacity: 1; }
.field-error input, .field-error .select { border-color: var(--c-error); border-width: 2px; }
.field-error-text { color: var(--c-error); font-size: 0.9375rem; margin: var(--space-1) 0 0; font-weight: 500; }

.checkbox { display: flex; gap: var(--space-3); align-items: center; min-height: var(--touch); }
.checkbox input { width: 22px; height: 22px; margin: 0; accent-color: var(--c-action); }
.checkbox label { font-weight: 500; }

/* --- Messages d'état : couleurs fonctionnelles réservées aux messages --- */
.message {
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid currentColor;
  border-radius: var(--radius-control);
  background: var(--c-message-bg);
  font-weight: 500;
}
.message-error { color: var(--c-error); }
.message-success { color: var(--c-success); }
.message-warning { color: var(--c-warning); }
.message-info { color: var(--c-link); }

/* --- Étiquettes et badges : pastilles sans contour --- */
.tag, .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; flex: none; }
/* Badge pictogramme seul (lien externe, ordinateur uniquement), avec libellé accessible */
.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--c-text-secondary);
  flex: none;
}
.badge-icon svg { width: 16px; height: 16px; }

/* --- Avatar : photo ou initiales, rond --- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-action);
  color: var(--c-on-action);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }

/* --- Menu de l'utilisateur --- */
.user-menu { position: relative; }
.user-menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] { background: var(--c-hover); }
.user-menu-button svg { width: 16px; height: 16px; }
.user-menu-name { display: none; }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 20;
  min-width: 240px;
  padding: var(--space-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
}
.user-menu-panel[hidden] { display: none; }
.user-menu-identity { padding: var(--space-2) var(--space-3) var(--space-3); }
.user-menu-identity strong { display: block; }
.user-menu-identity span { font-size: 0.875rem; color: var(--c-text-secondary); }
.user-menu-list { list-style: none; margin: 0; padding: 0; }
.user-menu-item {
  display: flex;
  width: 100%;
  min-height: var(--touch);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-menu-item:hover { background: var(--c-hover); }

@media (min-width: 640px) {
  .user-menu-name { display: inline; }
}

/* --- Accueil : salutation, filtres en texte, champ qui ouvre la palette --- */
.home-head { margin-bottom: var(--space-5); }
.home-head h1 { margin-bottom: var(--space-1); }
.home-head p { margin: 0; color: var(--c-text-secondary); }

.toolbar { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.filters {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.filter {
  flex: none;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.filter:hover { background: var(--c-hover); }
.filter[aria-pressed="true"] { background: var(--c-action); color: var(--c-on-action); }

.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  font: inherit;
  text-align: left;
  cursor: text;
}
.search-trigger:hover { border-color: var(--c-action); }
.search-trigger svg { width: 20px; height: 20px; flex: none; }
.search-trigger span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbd {
  padding: 1px var(--space-2);
  border-radius: var(--radius-small);
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .filters { flex-wrap: wrap; overflow-x: visible; }
}
@media (min-width: 1025px) {
  .toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .toolbar .search-trigger { flex: 0 0 380px; width: 380px; }
}

.section-title { font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-3); }
.home-recent { margin-bottom: var(--space-6); }

/* « Récemment ouvertes » : une seule ligne de pastilles, défilante si elle déborde */
.recent-pills {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-1);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.recent-pills li { flex: none; }
.recent-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-card);
  color: var(--c-text);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.recent-pill:hover { background: var(--c-card-hover); }
.app-icon.app-icon-sm { width: 24px; height: 24px; border-radius: var(--radius-control); }

/* Appareils tactiles : pas d'indication de raccourci clavier (la palette s'ouvre en touchant le champ) */
@media (pointer: coarse) {
  .search-trigger .kbd { display: none; }
}

/* --- Cards compactes horizontales --- */
.app-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--c-card);
}
.app-card:hover, .app-card:focus-within { background: var(--c-card-hover); }
.app-icon {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-icon);
  overflow: hidden;
}
.app-card-body { flex: 1; min-width: 0; }
.app-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-height: 24px; }
.app-card-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.app-card-link { color: var(--c-text); text-decoration: none; }
.app-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.app-card-link:focus-visible { outline: none; }
.app-card-link:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.app-card-desc {
  margin: var(--space-1) 0 0;
  color: var(--c-text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Étoile de favori seule, sans cadre, au-dessus du lien qui couvre la card */
.app-card-fav {
  position: relative;
  z-index: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-text-secondary);
  cursor: pointer;
}
.app-card-fav svg { width: 22px; height: 22px; }
.app-card-fav:hover { color: var(--c-star); }
.app-card-fav[aria-pressed="true"] { color: var(--c-star); }

/* --- États vides, panneaux --- */
.empty {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--c-card);
  text-align: center;
}
.empty p { margin: 0 auto; max-width: 52ch; }
.panel {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}
@media (max-width: 639px) {
  .panel { padding: var(--space-5) var(--space-4); }
}

/* --- Palette de recherche (Ctrl K / Cmd K) --- */
.palette {
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--c-surface);
  color: var(--c-text);
  overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop { background: var(--c-backdrop); opacity: 0.6; }
.palette-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.palette-head svg { width: 20px; height: 20px; flex: none; color: var(--c-text-secondary); }
.palette-input {
  flex: 1;
  min-height: var(--touch);
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 1.0625rem !important;
}
.palette-input:focus-visible { outline: none; }
.palette-head:focus-within { outline: 3px solid var(--c-focus); outline-offset: -3px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.palette-close { flex: none; }
.palette-list { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
.palette-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.palette-option[aria-selected="true"] { background: var(--c-option-active); }
.palette-option .app-icon { width: 32px; height: 32px; border-radius: var(--radius-control); }
.palette-option-text { flex: 1; min-width: 0; }
.palette-option-title { display: block; font-weight: 600; }
.palette-option-desc { display: block; font-size: 0.8125rem; color: var(--c-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-empty { padding: var(--space-5) var(--space-4); margin: 0; color: var(--c-text-secondary); text-align: center; }
.palette-foot { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-4); font-size: 0.8125rem; color: var(--c-text-secondary); }

/* Smartphone : la palette occupe tout l'écran */
@media (max-width: 639px) {
  .palette { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .palette-head:focus-within { border-radius: 0; }
  .palette-foot { display: none; }
}

/* --- Profil --- */
.profile-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1025px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-panel:first-child { grid-row: span 2; }
}
.panel-title { font-size: 1.125rem; margin: 0 0 var(--space-4); }
.photo-row { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.photo-row .label { margin: 0; }
.actions-tight { margin: var(--space-2) 0 0; gap: var(--space-2) var(--space-4); }
.field-row { display: grid; gap: 0 var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.facts { margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.facts dt { font-weight: 600; }
.facts dd { margin: var(--space-1) 0 0; }
.fieldset { border: 0; margin: 0 0 var(--space-4); padding: 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio label {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--c-btn-secondary);
  color: var(--c-text);
  font-weight: 600;
  cursor: pointer;
}
.radio input:checked + label { background: var(--c-action); color: var(--c-on-action); }
.radio input:focus-visible + label { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* --- Nouveautés --- */
.release-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.release { padding: var(--space-5); }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.release-head h3 { margin: 0; }
.release-date { color: var(--c-text-secondary); font-size: 0.9375rem; }
.release-notes { margin: 0; padding-left: var(--space-5); }
.release-notes li + li { margin-top: var(--space-1); }

/* --- Connexion et activation --- */
.choice-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.choice {
  width: 100%;
  min-height: var(--touch);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--c-page);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.choice:hover { background: var(--c-hover); }
.choice-name { font-weight: 600; }

.qr { display: block; margin: var(--space-4) 0; border-radius: var(--radius-control); background: #FFFFFF; }
.secret { font-size: 1.125rem; letter-spacing: 0.05em; word-break: break-all; }
.codes { padding-left: var(--space-5); columns: 2; }
.codes code { font-size: 1.0625rem; }

/* --- Page de charte (développement) --- */
.swatches { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.swatch { border-radius: var(--radius-card); overflow: hidden; background: var(--c-card); }
.swatch-color { height: 56px; }
.swatch-label { padding: var(--space-2) var(--space-3); font-size: 0.8125rem; }
.swatch-label code { display: block; }
.sw-page { background: var(--c-page); }
.sw-surface { background: var(--c-surface); }
.sw-card-hover { background: var(--c-card-hover); }
.sw-zone { background: var(--c-zone); }
.sw-text { background: var(--c-text); }
.sw-text-secondary { background: var(--c-text-secondary); }
.sw-action { background: var(--c-action); }
.sw-border-strong { background: var(--c-border-strong); }
.sw-focus { background: var(--c-focus); }
.sw-error { background: var(--c-error); }
.sw-success { background: var(--c-success); }
.sw-warning { background: var(--c-warning); }
.demo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.demo-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.demo-icons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.demo-icons .app-icon { width: 56px; height: 56px; }
.weights p { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.w-300 { font-weight: 300; }
.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }
.w-800 { font-weight: 800; }
.narrow-field { max-width: 320px; }