/*
 * Mise en page commune aux outils.
 *
 * Rien ici n'est propre a un outil : chacun importe cette feuille puis la
 * sienne. Avant, la page salaires importait `prenoms/prenoms.css`, ce qui
 * couplait deux outils sans qu'aucun des deux ne le veuille. Les couleurs et les polices viennent de
 * `tokens.css` et `fonts.css`, tous deux generes ou derives de la charte :
 * rien ici ne redecide d'une valeur de marque.
 */

.outil-shell {
  max-width: 1120px;
}

.outil-entete {
  padding: 8px 4px 32px;
}

.outil-retour {
  display: inline-block;
  margin-bottom: 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.outil-retour:hover {
  color: var(--color-accent);
}

.outil-entete h1 {
  margin: 12px 0 8px;
  font-family: 'LPD Titre', sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  color: var(--color-text);
}

.outil-lead {
  max-width: 54ch;
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--text-base);
}

/* Les controles a gauche, la carte a droite. Sur telephone, la carte passe
   dessous : c'est le pouce qui doit atteindre le champ, pas l'apercu. */
.outil-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 28px;
  align-items: start;
}

/* Tant qu'aucune courbe n'est tracee, l'apercu est retire du DOM : la grille
   repasse sur une colonne, sinon elle reserverait 400 px de vide a droite. */
.outil-grille:has(.outil-apercu[hidden]) {
  grid-template-columns: minmax(0, 580px);
  justify-content: center;
}

.outil-controles {
  padding: 32px;
  background: var(--color-surface);
}

.outil-controles form {
  display: grid;
  gap: 8px;
}

.outil-controles label {
  margin-top: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-soft);
}

.optionnel {
  font-weight: 400;
  color: var(--color-muted);
}

.outil-controles input {
  padding: 14px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: 'LPD Corps', sans-serif;
  font-size: var(--text-base);
  color: var(--color-text);
}

.outil-controles input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

.outil-controles button {
  margin-top: 16px;
}

.outil-statut {
  min-height: 1.5em;
  margin: 20px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.outil-note {
  margin: 14px 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-muted);
}

/* Sous la carte, pas dans le panneau de gauche : on exporte ce qu'on regarde. */
.outil-exports {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.outil-exports .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* L'apercu est le canvas d'export, reduit. Pas un second rendu : ce qu'on
   voit ici est exactement ce qui part dans le fichier. */
.outil-apercu canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1920;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg);
}

.outil-pied {
  margin-top: 36px;
  padding: 0 4px;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.outil-pied a {
  text-decoration: underline;
}

.outil-vie-privee {
  margin-top: 4px;
}

@media (max-width: 860px) {
  .outil-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .outil-apercu {
    order: -1;
    max-width: 340px;
    margin: 0 auto;
  }
}

/* Renvoi vers l'outil frere. Les deux pages partent du meme prenom, et rien
   sur l'ecran ne le disait : la carte et la courbe se cherchaient l'une
   l'autre par la page d'accueil. */
.outil-renvoi {
  margin: 20px 0 0;
  font-size: 0.92rem;
  color: var(--color-muted);
}

.outil-renvoi a {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Formulaires chiffres et devinette

   Partages par `/outils/salaires` et `/outils/patrimoine`, qui ont le meme
   parcours en trois temps : des montants, une estimation, une revelation.
   Ces regles vivaient dans `salaires/salaires.css` tant qu'un seul outil s'en
   servait ; le second les aurait recopiees.
   --------------------------------------------------------------------------- */

.champ-unite {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.champ-unite input {
  flex: 1;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
}

.champ-unite span {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border: 2px solid var(--color-border-strong);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface-alt);
  font-family: var(--font-chiffre);
  font-weight: 700;
  color: var(--color-text-soft);
}

.outil-controles select {
  padding: 14px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: 'LPD Corps', sans-serif;
  font-size: var(--text-base);
  color: var(--color-text);
}

.outil-controles select:focus-visible,
.outil-controles input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   La devinette

   C'est l'etape qui rend la carte partageable : on ne partage pas son salaire,
   on partage son erreur. Elle merite donc d'occuper l'ecran, pas d'etre un
   champ de plus.
   --------------------------------------------------------------------------- */

#etape-estimation {
  display: grid;
  gap: 10px;
}

.devinette-question {
  margin: 0 0 8px;
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
}

.devinette-question strong {
  color: var(--color-accent);
}

.devinette-valeur {
  display: block;
  font-family: var(--font-chiffre);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.4rem, 11vw, 5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
  text-align: center;
}

/* ⚠️ Le suffixe est une option, pas un defaut. Il valait « % » en dur quand
   `salaires` etait seul a s'en servir ; `patrimoine` affiche « 5e dixieme » au
   meme endroit, et aurait herite d'un « % » colle derriere. */
.devinette-valeur-pourcent::after {
  content: ' %';
  font-size: 0.45em;
  color: var(--color-muted);
}

/* La meme place, mais pour un libelle et non un nombre : « le 1 % du haut »
   ne tient pas a la chasse d'un chiffre de cinq rem. */
.devinette-valeur-texte {
  font-family: var(--font-titre);
  font-size: clamp(1.9rem, 6.2vw, 2.8rem);
  line-height: 1.1;
}

#estimation {
  width: 100%;
  accent-color: var(--color-accent);
  /* La cible doit rester confortable au pouce. */
  height: 36px;
}

.devinette-bornes {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.case-salaire {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  cursor: pointer;
}

.case-salaire input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

/* Le pied porte une mise en garde de champ : il a besoin de respirer. */
.outil-pied p + p {
  margin-top: 10px;
}