/* Carte du Talent — interface : en-tête, légende, boutons, notifications */

.entete {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: var(--papier);
  box-shadow: 0 2px 14px rgba(31, 72, 84, .14);
}

.entete-talent { min-width: 0; }

.marque {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-fort);
}

.marque svg { width: 15px; height: 15px; }

.entete-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }

/* Lien discret vers la Boussole (affiché seulement quand on en vient) */
.lien-boussole {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  font-size: 13px;
  font-weight: 700;
  color: var(--encre-douce);
  text-decoration: underline;
  text-decoration-color: rgba(95, 107, 112, .4);
  text-underline-offset: 3px;
}
.lien-boussole svg { width: 14px; height: 14px; }
@media (hover: hover) { .lien-boussole:hover { color: var(--encre); text-decoration-color: currentColor; } }
.lien-boussole:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.entete h1 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.fil-rouge {
  margin: 2px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--encre-douce);
}

.fil-rouge:empty { display: none; }

.entete-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.bouton-icone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #E6DCC6;
  border-radius: 999px;
  background: #fff;
  color: var(--encre);
  font: 700 14px var(--police);
  cursor: pointer;
  transition: background .15s, transform .15s;
}

/* Choix de la langue : deux boutons collés (en-tête et Réglages) */
.choix-langue {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #E6DCC6;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.choix-langue button {
  min-height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--encre-douce);
  font: 700 13px var(--police);
  letter-spacing: .04em;
  cursor: pointer;
}
.choix-langue button + button { border-left: 1px solid #E6DCC6; }
.choix-langue button[aria-pressed="true"] { background: var(--encre); color: #fff; }
@media (hover: hover) { .choix-langue button[aria-pressed="false"]:hover { background: #FFF3DA; color: var(--encre); } }
.reglages-fiche .choix-langue button { min-height: 44px; padding: 0 16px; font-size: 15px; letter-spacing: 0; }

@media (hover: hover) { .bouton-icone:hover { background: #FFF3DA; } }
.bouton-icone:active { transform: scale(.97); }
.bouton-icone svg { width: 18px; height: 18px; }

/* Focus clavier : toujours visible, même couleur partout. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Légende */

.legende {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  width: 230px;
  max-height: calc(100% - 32px);
  overflow: auto;
  background: rgba(255, 251, 242, .93);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  backdrop-filter: blur(6px);
}

.legende-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  font: 800 13px var(--police);
  color: var(--encre);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.legende-titre svg { width: 16px; height: 16px; }
.legende-titre .chevron { margin-left: auto; transition: transform .2s; }
.legende.fermee .chevron { transform: rotate(-90deg); }
.legende.fermee .legende-contenu { display: none; }

.legende-contenu { padding: 0 14px 12px; }

.legende h2 {
  margin: 6px 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-douce);
}

.legende ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legende li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.3;
}

.pastille { width: 18px; height: 18px; flex-shrink: 0; }

/* Contrôles de la carte */

.controles-carte {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bouton-rond {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 251, 242, .95);
  color: var(--encre);
  box-shadow: var(--ombre);
  cursor: pointer;
  transition: background .15s, transform .15s;
}

@media (hover: hover) { .bouton-rond:hover { background: #FFF3DA; } }
.bouton-rond:active { transform: scale(.94); }
.bouton-rond svg { width: 20px; height: 20px; }
#btn-suggestions { margin-top: 6px; }

.carte:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.carte.glisse { cursor: grabbing; }

/* Panneau latéral */

.panneau {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(390px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--papier);
  box-shadow: -10px 0 40px rgba(31, 72, 84, .22);
  transform: translateX(105%);
  transition: transform .25s ease;
}

.panneau.visible { transform: none; }

body.panneau-ouvert .controles-carte { right: calc(min(390px, 100%) + 16px); }

.panneau-tete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px 16px 18px;
  background: linear-gradient(180deg, var(--teinte, #FFF3DA), var(--papier));
}

.panneau-hex { width: 56px; height: 60px; flex-shrink: 0; }

.panneau-titre { flex: 1; min-width: 0; }

.panneau-titre h2 {
  margin: 4px 0 2px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.lieu { margin: 0; color: var(--encre-douce); font-size: 14px; }

.fermer {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: var(--encre);
  cursor: pointer;
}

.fermer:hover { background: #fff; }
.fermer svg { width: 20px; height: 20px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--encre);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.badge-frontiere { box-shadow: inset 0 0 0 1.5px var(--accent); }
.badge-a_conquerir { font-style: italic; color: var(--encre-douce); }
.badge-a_deleguer { background: #E7E9EC; }
.badge-ressource { background: #F6E8D2; }
.badge-ile { background: #D9F3EA; }
.badge-capitale { background: #FFE7A3; }

.panneau-corps {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 24px;
  overscroll-behavior: contain;
}

.panneau-section {
  padding: 14px 0;
  border-top: 1px solid #EFE6D2;
}

.panneau-section:first-child { border-top: 0; }

.panneau-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-douce);
}

.panneau-section h3 svg { width: 16px; height: 16px; }

.panneau-section p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.vide { color: var(--encre-douce); font-style: italic; }
.discret { color: var(--encre-douce); font-size: 13px; }
.chiffres strong { font-size: 22px; color: var(--accent-fort); }

.liste-moments, .bilan { margin: 0; padding: 0; list-style: none; }

.liste-moments li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 0;
  font-size: 14px;
}

.liste-moments .date { font-weight: 700; min-width: 54px; }
.liste-moments .intensite { color: var(--accent-fort); letter-spacing: 1px; }
.liste-moments .pale { opacity: .25; }
.liste-moments .note { flex-basis: 100%; color: var(--encre-douce); }

.bilan li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 15px;
}

.bilan li strong, .bilan li .discret { margin-left: auto; }
.puce { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

.actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 12px;
  font: 700 15px var(--police);
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.bouton:active { transform: scale(.98); }
.bouton svg { width: 18px; height: 18px; }

.bouton-principal {
  border: 0;
  background: var(--accent-bouton);
  color: #fff;
  box-shadow: 0 4px 12px rgba(178, 60, 93, .3);
}

.bouton-principal:hover { background: var(--accent-bouton-survol); }

.bouton-secondaire {
  border: 1px solid #E6DCC6;
  background: #fff;
  color: var(--encre);
}

.bouton-secondaire:hover { background: #FFF3DA; }

.bouton-lien {
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--mer-profonde);
  text-decoration: underline;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--encre-douce);
}

.champ select {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #E6DCC6;
  border-radius: 10px;
  background: #fff;
  color: var(--encre);
  font: 600 15px var(--police);
}

.segments {
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: #F2EADA;
}

.segments button {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--encre-douce);
  font: 700 14px var(--police);
  cursor: pointer;
}

.segments button[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }

.panneau-astuce p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--encre-douce);
  font-size: 14px;
}

.panneau-astuce svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Suggestions (panneau) */

.badge-suggestion { background: #FFE7A3; }

.suggestions { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.suggestion {
  padding: 12px;
  border: 1.5px dashed #EBC66B;
  border-radius: 14px;
  background: #FFFDF5;
}

.suggestion-nom {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  font: 600 15px var(--police);
  text-align: left;
  cursor: pointer;
}

.suggestion-nom > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #8A6A2A; }
.suggestion-nom > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggestion-nom strong { font-size: 16px; }
.suggestion-nom:hover strong { text-decoration: underline; }
.suggestion-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-left: 30px; }
.bouton-lien-discret { color: var(--encre-douce); }
.bouton-lien svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

.idee { display: flex; gap: 8px; }

.idee input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid #E6DCC6;
  border-radius: 12px;
  background: #fff;
  color: var(--encre);
  font: 600 16px var(--police);
}

.idee input:focus { outline: 0; border-color: var(--accent); }

.domaine { border-top: 1px solid #F1E8D6; }
.domaine:first-of-type { border-top: 0; }

.domaine summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.domaine summary .discret { margin-left: auto; }
.domaine ul { margin: 0 0 8px; padding: 0; list-style: none; }
.domaine li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.domaine li > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--encre-douce); }
.domaine li > span { flex: 1; min-width: 0; }
.domaine li .bouton-lien { min-height: 36px; padding: 0; }

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bouton-rond[aria-pressed="true"] { background: #FFE7A3; color: #8A5D08; }

/* Notifications */

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 50;
  text-align: center;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--encre);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--ombre);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform .3s, opacity .3s;
  pointer-events: none;
}

.toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Téléphone */

@media (max-width: 640px) {
  .entete { padding: 8px 16px; gap: 8px; }
  .marque { display: none; }
  .lien-boussole { font-size: 12.5px; min-height: 24px; }
  .entete h1 { margin: 0; font-size: 16px; }
  .fil-rouge { font-size: 12.5px; }
  .bouton-icone { padding: 8px 10px; }
  .bouton-icone span { display: none; }
  .choix-langue-entete button { min-width: 36px; padding: 0 6px; }
  /* Sur téléphone, Exporter et Importer sont dans les Réglages. */
  #btn-exporter, #btn-importer { display: none; }
  .legende { left: 12px; top: 12px; bottom: auto; width: auto; max-width: calc(100% - 80px); max-height: calc(100% - 100px); }
  .controles-carte { right: 12px; top: 12px; }
  .bouton-rond { width: 42px; height: 42px; }

  /* Panneau en feuille glissée depuis le bas */
  .panneau {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 72vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(31, 72, 84, .25);
    transform: translateY(105%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .panneau-tete { border-radius: 20px 20px 0 0; padding-top: 22px; position: relative; }
  .panneau-tete::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .15);
  }
  body.panneau-ouvert .controles-carte { right: 12px; }
  body.panneau-ouvert .legende { display: none; }
}

/* Barre « Mon parcours · Mes outils » (/js/parcours-barre.js) : les fenêtres plein écran commencent sous elle, elle reste atteignable. */
body .flow,
body .progres,
body .creation,
body .panneau { top: var(--mhp-h, 0px); }
@media (max-width: 640px) { body .panneau { top: auto; } }