/* Carte du Talent — création guidée */

.creation {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(30, 60, 70, .4);
  opacity: 0;
  transition: opacity .25s;
}

.creation.visible { opacity: 1; }

.creation-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 15% 0%, rgba(242, 166, 90, .14), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(143, 202, 217, .25), transparent 45%),
    var(--papier);
}

/* En-tête : avancement et sortie */

.creation-tete {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 24px 8px;
}

.creation-progression { flex: 1; min-width: 0; display: grid; gap: 8px; }
.creation-progression .surtitre { color: var(--accent-fort); }

.barre-progression { height: 6px; border-radius: 3px; background: #F0E6D3; overflow: hidden; }
.barre-progression span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #F29A5A, var(--accent)); transition: width .3s; }

/* Corps */

.creation-corps {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.creation-question {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 24px 32px;
}

.creation-question h2 {
  margin: 8px 0 10px;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

.aide-question { max-width: 60ch; margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: var(--encre-douce); }
.creation-question .discret { margin: 8px 0 0; }

.champ-grand { margin-top: 18px; font-size: 14px; }

.champ-grand input, .saisie-vrac input {
  min-height: 52px;
  padding: 10px 14px;
  border: 1.5px solid #E6DCC6;
  border-radius: 14px;
  background: #fff;
  color: var(--encre);
  font: 600 17px var(--police);
}

.champ-grand input:focus, .saisie-vrac input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 115, 142, .18); }

.saisie-vrac { display: flex; gap: 8px; }
.saisie-vrac input { flex: 1; min-width: 0; }
.saisie-vrac .bouton { min-height: 52px; }

/* Réponses saisies */

.puces-saisie { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }

.puces-saisie li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 6px 6px 14px;
  border: 1.5px solid #EBD9B8;
  border-radius: 999px;
  background: #fff;
  font-size: 15.5px;
  font-weight: 700;
}

.puces-saisie button, .retirer-element {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #F5EFE3;
  color: var(--encre-douce);
  cursor: pointer;
}

.puces-saisie button svg, .retirer-element svg { width: 15px; height: 15px; }

.lignes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.lignes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1.5px solid #EBD9B8;
  border-radius: 14px;
  background: #fff;
}

.lignes li.ecarte { opacity: .55; }
.lignes li.ecarte .ligne-nom { text-decoration: line-through; }
.ligne-nom { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.segments-compacts { flex-shrink: 0; }
.segments-compacts button { min-height: 36px; padding: 0 12px; font-size: 13.5px; }

.exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }

.puce-exemple {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1.5px dashed #E2C98F;
  border-radius: 999px;
  background: transparent;
  color: #7A5B1C;
  font: 700 14px var(--police);
  cursor: pointer;
}

.puce-exemple:hover { background: #FFF4D6; }
.puce-exemple svg { width: 14px; height: 14px; }

/* Régions : liste ordonnée avec flèches */

.aide-ordre {
  display: flex;
  gap: 8px;
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #E3F4F7;
  color: var(--mer-profonde);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.aide-ordre svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.lignes-regions { counter-reset: region; }
.lignes-regions li { border-left: 5px solid var(--couleur); }
.lignes-regions li::before {
  counter-increment: region;
  content: counter(region);
  min-width: 1.4em;
  font-weight: 800;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

.fleches { display: inline-flex; gap: 4px; flex-shrink: 0; }

.fleche {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid #E6DCC6;
  border-radius: 10px;
  background: #fff;
  color: var(--encre);
  cursor: pointer;
}

.fleche svg { width: 18px; height: 18px; }
.fleche:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .fleche:not(:disabled):hover { background: #FFF3DA; } }

/* Pied : retour et suite, au pouce */

.creation-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 24px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #EFE6D2;
}

.creation-pied .bouton { min-height: 52px; padding: 12px 22px; font-size: 16px; }
.creation-pied .bouton:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.creation-pied .bouton-lien { display: inline-flex; align-items: center; gap: 4px; color: var(--encre-douce); }

/* Accueil */

.creation-accueil {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(32px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  overflow-y: auto;
}

.accueil-hex svg { width: 150px; height: auto; filter: drop-shadow(0 8px 12px rgba(31, 72, 84, .2)); }
.creation-accueil h1 { margin: 8px 0 0; font-size: clamp(26px, 5vw, 36px); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.creation-accueil > p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--encre-douce); }
.creation-accueil > .discret { font-size: 14px; }
.accueil-actions { display: grid; gap: 10px; width: min(360px, 100%); margin: 12px 0 4px; }
.accueil-actions .bouton { min-height: 52px; font-size: 16px; }

/* Regroupement */

.creation-large { max-width: 1080px; }

.zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.zone {
  min-width: 0;
  padding: 12px;
  border: 2px solid color-mix(in srgb, var(--couleur, #D9CBAE) 55%, #fff);
  border-radius: 16px;
  background: color-mix(in srgb, var(--couleur, #F4EEE2) 10%, #fff);
  transition: border-color .15s, box-shadow .15s;
}

.zone-a-ranger { border-style: dashed; background: #FFFBF2; }
.zone.survol { border-color: var(--couleur, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--couleur, #E5738E) 25%, transparent); }
.zone-active:not(.zone-a-ranger) { cursor: pointer; }

.zone-tete { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; font-weight: 800; }
.zone-tete svg { width: 18px; height: 18px; flex-shrink: 0; color: color-mix(in srgb, var(--couleur, #8A7A5A) 70%, #333); }
.zone-tete span { flex: 1; min-width: 0; }

.poser-ici {
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-bouton);
  color: #fff;
  font: 800 13px var(--police);
  cursor: pointer;
}

.zone-elements { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 40px; }
.zone-vide { align-self: center; font-size: 13.5px; font-style: italic; color: var(--encre-douce); }

.element {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 40px;
  padding: 6px 12px 6px 6px;
  border: 1.5px solid #E6DCC6;
  border-radius: 12px;
  background: #fff;
  color: var(--encre);
  font: 700 14.5px var(--police);
  text-align: left;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.element.choisi { border-color: var(--accent); background: #FFE9EE; box-shadow: 0 0 0 3px rgba(229, 115, 142, .25); }
.element.en-deplacement { opacity: .35; }

.element-fantome {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 12px 24px rgba(20, 50, 60, .3);
  transform-origin: top left;
}

.element-type {
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.type-moments { background: #FFE3EA; color: #A8344F; }
.type-conquises { background: #E3F1E8; color: #2F6E4A; }
.type-frontieres { background: #FFF0CC; color: #7A5B1C; }

@media (max-width: 640px) {
  .creation-tete { padding-left: 16px; padding-right: 12px; }
  .creation-question { padding: 8px 16px 24px; }
  .aide-question { font-size: 16px; }
  .creation-pied { padding-left: 16px; padding-right: 16px; }
  .creation-pied .bouton { flex: 1; justify-content: center; }
  .saisie-vrac .bouton span, .saisie-vrac .bouton { padding: 10px 14px; }
  .lignes li { flex-wrap: wrap; }
  .zones { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .barre-progression span { transition: none; }
}

/* Arrivée depuis la Boussole */

.creation-accueil > .note-boussole {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 46ch;
  padding: 10px 14px;
  border-radius: 12px;
  background: #EEF6F3;
  font-size: 15px;
  text-align: left;
  color: var(--encre);
}
.note-boussole svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--focus); }

.encart-boussole {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid #CFE3DC;
  border-radius: 14px;
  background: #F3F9F6;
}
.encart-boussole h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: var(--focus); }
.encart-boussole h3 svg { width: 17px; height: 17px; }
.encart-boussole .discret { margin-top: 4px; }

.rappel-boussole { margin: 10px 0 0; display: grid; gap: 2px; }
.rappel-boussole dt { font-size: 13px; font-weight: 700; color: var(--encre-douce); font-style: italic; }
.rappel-boussole dd { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }

.phrases-boussole { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.phrases-boussole li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
}
.phrases-boussole .bouton-lien { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 6px; font-weight: 700; color: var(--accent-fort); }
.phrases-boussole .bouton-lien svg { width: 16px; height: 16px; }
.phrase-ajoutee { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: #2F7A55; }
.phrase-ajoutee svg { width: 16px; height: 16px; }

.rappel-anti { margin: 10px 0 0; font-size: 15px; line-height: 1.45; }

.alerte-saisie { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #FDECEC; color: #9E2B2B; font-size: 15px; font-weight: 600; }

/* Idées regroupées par domaine (questions 2 à 5) */
.idees { margin-top: 22px; display: grid; gap: 14px; }
.idees-groupe h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #4B5E66; }
.idees-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.idees-plus { justify-self: start; }

/* Raison d'un pré-rangement (regroupement final) */
.element { flex-wrap: wrap; }
.element-raison { flex-basis: 100%; display: flex; align-items: center; gap: 4px; padding: 0 0 2px 6px; font-size: 12px; font-weight: 600; color: #5A6C74; text-align: left; }
.element-raison svg { width: 12px; height: 12px; flex: none; color: #B07A00; }

/* Q6 : ce qui recharge (zone de ressourcement) */
.bloc-ressources { margin-top: 20px; padding: 14px 16px; border: 1.5px dashed #D9B98A; border-radius: 16px; background: #FFF6E6; }
.bloc-ressources h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.bloc-ressources h3 svg { width: 18px; height: 18px; color: #8A6A44; }
.bloc-ressources .discret { margin: 0 0 10px; }
.bloc-ressources .puces-saisie { margin-bottom: 10px; }