/* =============================================================================
   style.css — Les outils de Riova Patrimoine.

   La page (en-tête, pied, typographie, fond ivoire, scènes, boutons) vient de
   la feuille du site, css/riova.css, chargée avant celle-ci. Chaque outil
   reprend le calculateur du site : une scène cuivrée, un panneau blanc pour
   les curseurs, des cartes sombres pour les résultats et le graphique (les
   graphiques sont dessinés pour ce fond sombre), puis les explications en
   cartes blanches.
   ========================================================================== */

/* ---------- 1. Liste des outils (accueil de la boîte) --------------------- */
.outils-heros .conteneur {
  display: grid;
  gap: 18px;
  padding-block: clamp(56px, 8vw, 112px);
}
.outils-heros h1 {
  font-size: clamp(44px, 6vw, 84px);
  max-width: 12ch;
}
.outils-heros .sous-titre {
  max-width: 34em;
  color: rgba(246, 239, 230, 0.75);
}
.outils-liste {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  padding-block: clamp(40px, 6vw, 80px);
}
.categorie-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.categorie-entete h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
}
.categorie-compte {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-3);
  white-space: nowrap;
}
.grille-tuiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tuile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  border: 1px solid var(--filet);
  border-radius: 28px;
  background: var(--blanc);
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s var(--sortie), box-shadow 0.4s var(--sortie), border-color 0.3s;
}
.tuile:hover,
.tuile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(201, 138, 94, 0.45);
  box-shadow: 0 18px 40px rgba(20, 21, 23, 0.08);
}
.tuile-numero {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cuivre);
}
.tuile h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--texte);
}
.tuile p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texte-2);
}
.tuile-fleche {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--cuivre-fonce);
  transition: transform 0.4s var(--sortie);
}
.tuile:hover .tuile-fleche { transform: translateX(4px); }
@media (min-width: 640px) {
  .grille-tuiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grille-tuiles { grid-template-columns: repeat(3, 1fr); }
}

/* Notes propres aux outils, juste avant le pied du site */
.outils-notes {
  display: grid;
  gap: 8px;
  padding-block: 8px 28px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texte-2);
}
.outils-notes p { margin: 0; max-width: 90ch; }

/* ---------- 2. Page d'un outil -------------------------------------------- */
.outil-page { padding-top: clamp(28px, 4vw, 52px); }
.outil-retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texte-2);
  text-decoration: none;
}
.outil-retour:hover { color: var(--cuivre-fonce); }
.outil-entete { padding: 22px 0 clamp(28px, 4vw, 44px); }
.surtitre {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cuivre-fonce);
}
.outil-entete h1 {
  max-width: 17ch;
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 68px);
}
.outil-sous-titre {
  max-width: 38em;
  margin: 0 0 18px;
  font-size: 17px;
  color: var(--texte-2);
}
.mention-conformite {
  max-width: 70ch;
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(201, 138, 94, 0.5);
  font-size: 13px;
  line-height: 1.55;
  color: var(--texte-2);
}

/* La scène de l'outil : cuivre pâle, comme le calculateur du site */
.outil-scene { padding-block: clamp(20px, 3vw, 40px); }
.disposition-outil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "chiffres" "controles" "graphique";
  gap: 14px;
  align-items: start;
}
.bloc-chiffres { grid-area: chiffres; }
.colonne-controles { grid-area: controles; }
.bloc-graphique { grid-area: graphique; }
.pile { display: grid; gap: 14px; }

/* Panneau blanc des curseurs */
.colonne-controles .outil-carte {
  display: grid;
  gap: 26px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
  background: var(--blanc);
}
.carte-titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cuivre-fonce);
}
.astuce-saisie {
  margin: -10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texte-2);
}
.astuce-saisie b { color: var(--texte); font-weight: 650; }
#controles { display: grid; gap: 26px; }

/* Un champ : étiquette, montant modifiable, rail cuivré */
.champ { display: grid; gap: 10px; }
.champ-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.champ-etiquette {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 3px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--texte);
}
.champ-aide {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texte-2);
}
.pastille-hypothese {
  display: inline;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cuivre-fonce);
}
.champ-valeur {
  flex: 0 0 auto;
  width: 8.2em;
  padding: 4px 0 2px;
  border: 0;
  border-bottom: 1.5px dashed rgba(20, 21, 23, 0.18);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.04em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  transition: border-color 0.2s;
}
.champ-valeur:hover { border-bottom-color: var(--cuivre); }
.champ-valeur:focus {
  outline: none;
  border-bottom: 1.5px solid var(--cuivre);
}
.champ-valeur.hors-curseur { color: var(--cuivre-fonce); }
.champ input[type="range"] {
  --pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.champ input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cuivre) var(--pct), var(--gris-2) var(--pct));
}
.champ input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cuivre) var(--pct), var(--gris-2) var(--pct));
}
.champ input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--filet), 0 4px 14px rgba(20, 21, 23, 0.2);
  transition: transform 0.3s var(--ressort);
}
.champ input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--filet), 0 4px 14px rgba(20, 21, 23, 0.2);
}
.champ input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.champ input[type="range"]:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 4px; border-radius: 99px; }
.champ-bornes {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
  font-size: 12px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.indice-hors { color: var(--cuivre-fonce); font-weight: 600; }
.note-derivee {
  margin: 0;
  font-size: 13px;
  color: var(--texte-2);
}
.note-derivee b { color: var(--texte); }
.bouton-reinit {
  justify-self: start;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gris-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.bouton-reinit:hover { box-shadow: inset 0 0 0 1px var(--texte); }

/* Cartes sombres des résultats et du graphique */
.bloc-chiffres,
.bloc-graphique.outil-carte,
.pile > .outil-carte {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(201, 138, 94, 0.18), transparent 70%),
    var(--noir);
  color: rgba(246, 239, 230, 0.78);
}
.chiffres-cles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.chiffre {
  display: grid;
  align-content: start;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chiffre-libelle {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(246, 239, 230, 0.6);
}
.chiffre-valeur {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--blanc);
}
.chiffre-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(246, 239, 230, 0.5);
}
.chiffre.vedette {
  grid-column: 1 / -1;
  gap: 10px;
  padding-top: 0;
  border-top: 0;
}
.chiffre.vedette .chiffre-libelle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cuivre-clair);
}
.chiffre.vedette .chiffre-valeur {
  font-size: clamp(48px, 6.4vw, 92px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.95;
}
.chiffre.vedette .chiffre-note { font-size: 13.5px; color: rgba(246, 239, 230, 0.62); }
.bloc-graphique .carte-titre,
.pile .carte-titre { margin-bottom: 18px; color: var(--cuivre-clair); }
.zone-graphique { width: 100%; min-height: 240px; }
.zone-graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(246, 239, 230, 0.7);
}
.legende-item { display: inline-flex; align-items: center; gap: 8px; }
.legende-pastille { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Explications : cartes blanches sur l'ivoire, la question qui se déplie comme la FAQ */
.outil-explications {
  padding-block: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 48px);
}
.bloc-texte {
  display: grid;
  gap: 14px;
  max-width: 880px;
}
.pedagogie {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--filet);
  border-radius: 28px;
  background: var(--blanc);
}
.pedagogie h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.025em;
}
.pedagogie p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texte-2);
}
.pedagogie p:last-child { margin-bottom: 0; }
.repliable {
  border: 1px solid var(--filet);
  border-radius: 22px;
  background: var(--blanc);
}
.repliable summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 650;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
}
.repliable summary::-webkit-details-marker { display: none; }
.repliable summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gris);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s var(--sortie);
}
.repliable[open] summary::after { transform: rotate(45deg); }
.repliable-corps { padding: 0 24px 22px; }
.hypotheses-liste {
  display: grid;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.hypotheses-liste li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 14.5px;
  color: var(--texte-2);
}
.hypotheses-liste b { color: var(--texte); font-weight: 650; text-align: right; }
.note-methode {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texte-2);
}
.note-methode b { color: var(--texte); }

@media (max-width: 600px) {
  .champ-valeur {
    width: 6.6em;
    font-size: 18px;
  }
  .champ-etiquette { font-size: 15px; }
}

/* ---------- 3. Écrans larges ------------------------------------------------ */
@media (min-width: 1000px) {
  .disposition-outil {
    grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
      "controles chiffres"
      "controles graphique";
    grid-template-rows: auto 1fr;
    gap: 16px;
  }
  .colonne-controles {
    position: sticky;
    top: calc(var(--tete-h) + 18px);
    align-self: start;
  }
  .chiffres-cles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 4. Impression et mouvement réduit ------------------------------ */
@media print {
  .tete, .menu, .barre, .pied, .outil-retour, .bouton-reinit, .colonne-controles, .scene.sauge { display: none !important; }
  .scene { margin: 0; border-radius: 0; }
  .bloc-chiffres, .bloc-graphique.outil-carte, .pile > .outil-carte { background: #fff !important; color: #18191a; border: 1px solid #ccc; }
  .chiffre-valeur, .chiffre.vedette .chiffre-valeur { color: #18191a !important; }
}
@media (prefers-reduced-motion: reduce) {
  .champ input[type="range"]::-webkit-slider-thumb { transition: none; }
}