/* =========================================
   NEST — style.css
   Mobile first : la base = mobile,
   les media queries (en fin de fichier) = écrans plus larges
   Règle du projet : le CSS cible des CLASSES, le JS cible des ID
   ========================================= */

/* ---------- 1. Variables ---------- */
:root {
  --fond: #F5F0E6;
  --texte: #2F3133;
  --texte-doux: #5E6266;        /* 6:1 sur blanc */
  --vert: #556B4D;              /* 5,8:1 avec du blanc */
  --vert-fonce: #46593F;        /* survol */
  --vert-clair: #E6EFDB;        /* fond du formulaire */
  --terracotta: #A0543D;        /* 5,5:1 avec du blanc */
  --terracotta-fonce: #87452F;
  --terracotta-clair: #F3E4DE;
  --carte: #FFFFFF;
  --bordure: #E6E1D6;           /* séparateurs décoratifs */
  --bordure-champ: #8F8A80;     /* contour des champs : 3,4:1 (WCAG 1.4.11) */
  --rayon-carte: 16px;
  --rayon-bouton: 6px;
  --police-titre: "Sora", sans-serif;
  --police-texte: "Inter", sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--police-titre); margin: 0; line-height: 1.2; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
/* Titres qui reçoivent le focus par JS (pas par Tab) : pas de contour */
h2[tabindex="-1"]:focus { outline: none; }

.visuallyHidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Largeur maximale centrée, sans div "conteneur" */
body > header, body > main, body > footer {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
}

/* ---------- 3. En-tête ---------- */
body > header { padding-block: 1.5rem 2rem; }
/* Bandeau d'information : texte foncé sur vert clair, contraste largement suffisant */
.bandeauPedagogique {
  margin: 0 0 1.5rem;
  padding: .6rem 1rem;
  border-radius: var(--rayon-bouton);
  background: var(--vert-clair);
  color: var(--texte);
  font-size: .85rem;
  text-align: center;
}
.logo { width: 120px; height: auto; margin-bottom: 2rem; }

.enteteLigne {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
}
/* Majuscules en CSS : le DOM garde "samedi 10 octobre", le lecteur d'écran ne l'épelle pas */
.dateDuJour {
  font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-doux);
}
h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 600; margin-block: .25rem; }
.sousTitre { font-size: .9rem; color: var(--texte-doux); }

/* Bouton discret qui ressemble à un lien (mais reste un <button> : il agit, il ne navigue pas) */
.boutonLien {
  padding: 0; border: none; background: none;
  font: inherit; font-size: .85rem;
  color: var(--vert); text-decoration: underline;
  cursor: pointer;
}
.boutonLien:hover { color: var(--vert-fonce); }



/* ---------- 4. Boutons ---------- */
.boutonicon, .boutonSecondaire {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: var(--rayon-bouton);
  font-size: .9rem; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
}
.boutonicon { background: var(--vert); color: #fff; border: 1px solid transparent; }
.boutonicon:hover { background: var(--vert-fonce); }

/* Modificateur : se combine avec .boutonicon */
.boutonAccent { background: var(--terracotta); }
.boutonAccent:hover { background: var(--terracotta-fonce); }

.boutonSecondaire { background: #fff; border: 1px solid var(--bordure-champ); }
.boutonSecondaire:hover { background: var(--fond); }

.boutonMinimal {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem; background: none; border: none;
  color: var(--vert); font-weight: 600; font-size: .9rem;
  text-decoration: none; cursor: pointer;
}
.boutonMinimal:hover { text-decoration: underline; }

.boutonicon svg, .boutonMinimal svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ---------- 5. Grille du tableau de bord ---------- */
main { display: grid; gap: 1.5rem; padding-bottom: 3rem; }
.colonneDroite { display: grid; gap: 1.5rem; align-content: start; }

/* ---------- 6. Cartes ---------- */
.card { background: var(--carte); border-radius: var(--rayon-carte); padding: 1.5rem; }
.card h2 { font-size: 1.15rem; font-weight: 600; color: var(--vert); }

.enteteCarte {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1.25rem;
}
.enteteCarte select { width: auto; } /* pas 100 % dans un en-tête */

/* ---------- 7. Champs de formulaire ---------- */
.champ { display: grid; gap: .35rem; }
.champ label { font-size: .85rem; font-weight: 500; }

input[type="text"], input[type="number"], input[type="date"],
input[type="search"], select {
  width: 100%;
  padding: .55rem .75rem;
  background: #fff;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-bouton);
  font-size: .9rem;
}
::placeholder { color: var(--texte-doux); }

.messageErreur { color: var(--terracotta-fonce); font-size: .85rem; font-weight: 500; }

/* ---------- 8. Formulaire de transaction + toast ---------- */
.carteFormulaire { background: var(--vert-clair); }
.carteFormulaire form { display: grid; gap: 1rem; }
.champCategorie .boutonMinimal { justify-self: start; }

/* Radios masqués, les labels jouent le rôle de boutons (aussi dans l'overlay catégorie) */
.choixType {
  position: relative;           /* repère pour les inputs en absolute */
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  border: none; margin: 0; padding: 0;
}
.choixType legend { font-size: .85rem; font-weight: 500; padding: 0; margin-bottom: .35rem; }
.choixType input { position: absolute; opacity: 0; } /* invisible mais accessible au clavier */
.choixType label {
  padding: .5rem 1rem; text-align: center;
  background: #fff; border: 1px solid var(--texte);
  border-radius: var(--rayon-bouton);
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.choixType input:checked + label { background: var(--vert); border-color: var(--vert); color: #fff; }
.choixType input[value="depense"]:checked + label { background: var(--terracotta); border-color: var(--terracotta); }
.choixType input:focus-visible + label { outline: 3px solid var(--texte); outline-offset: 2px; }

.actionsFormulaire { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Toast de confirmation */
.messageConfirmation {
  position: fixed;              /* sort de la grille de main */
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content; max-width: calc(100% - 2rem);
  padding: .75rem 1.25rem;
  border-radius: var(--rayon-bouton);
  background: var(--texte); color: #fff;
  font-weight: 600; font-size: .9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
/* Vide = taille 0, donc invisible, mais toujours dans l'arbre d'accessibilité */
.messageConfirmation:empty { padding: 0; box-shadow: none; }

/* ---------- 9. Carte solde ---------- */
.carteSolde { background: var(--vert); color: #fff; }

.soldeMontant {
  font-family: var(--police-titre);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 600; line-height: 1.1;
}
.evolution {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .75rem;
  font-size: .85rem; color: rgba(255, 255, 255, .85); /* 4,7:1 */
}
.carteSolde .tag {
  padding: .2rem .65rem; border-radius: 999px;
  background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600;
}
/* Flèche décorative : texte alternatif vide après "/". 1re ligne = repli vieux navigateurs */
.carteSolde .tag.positif::before { content: "↑ "; content: "↑ " / ""; }
.carteSolde .tag.negatif::before { content: "↓ "; content: "↓ " / ""; }

.totauxDetail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.totalItem { display: flex; align-items: center; gap: .75rem; }
.totalItem + .totalItem { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .25); }

.totalIcone {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 8px;
}
.totalIcone svg { width: 1.25rem; height: 1.25rem; }
.totalItem--revenu .totalIcone { background: #6F8F63; }
.totalItem--depense .totalIcone { background: #8E5E45; }

.totalLabel { font-size: .75rem; color: rgba(255, 255, 255, .85); }
.totalValeur { font-family: var(--police-titre); font-size: 1.15rem; font-weight: 600; color: #fff; }

/* ---------- 10. Transactions ---------- */
.outilsListe { display: flex; gap: .5rem; margin-bottom: .5rem; }
.outilsListe select { width: auto; }

/* Loupe en image de fond : décorative, aucun HTML en plus */
.champRecherche {
  flex: 1;
  padding-left: 2.25rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6266' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .75rem center / 1rem;
}

.listeTransactions { list-style: none; margin: 0; padding: 0; }
.listeTransactions li {
  display: flex; align-items: center; gap: .25rem;
  border-bottom: 1px solid var(--bordure);
}
.listeTransactions li:last-child { border-bottom: none; }

/* Grille : pastille | source + infos | montant */
.ligneContenu {
  flex: 1;
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  column-gap: .85rem; align-items: center;
  padding: .9rem .25rem;
  background: none; border: none; border-radius: 8px;
  text-align: left; cursor: pointer;
}
.ligneContenu:hover { background: var(--fond); }

.ligneSource { grid-column: 2; grid-row: 1; font-weight: 600; font-size: .9rem; }
.ligneInfos  { grid-column: 2; grid-row: 2; font-size: .8rem; color: var(--texte-doux); }
.ligneMontant {
  grid-column: 3; grid-row: 1 / span 2;
  font-family: var(--police-titre); font-size: 1.05rem; font-weight: 600;
  color: var(--texte);
}
.ligneTransaction.revenu .ligneMontant { color: var(--vert); }

.bouton-supprimer {
  padding: .4rem .5rem; background: none; border: none; border-radius: 6px;
  font-size: .8rem; color: var(--texte-doux); cursor: pointer;
}
.bouton-supprimer:hover { color: var(--terracotta-fonce); text-decoration: underline; }

.etatVide { padding: 1.5rem 0; text-align: center; color: var(--texte-doux); font-size: .9rem; }
/* Le message vide n'est pas une ligne de transaction : pas de flex, sinon pas centré */
.listeTransactions .etatVide { display: block; }

/* ---------- 11. Pastilles de catégorie ---------- */
/* --couleur est donnée par le JS (style.setProperty), le CSS décide de l'usage */
.iconeCategorie {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 8px;
  color: var(--couleur, var(--texte-doux));
  background: var(--fond); /* repli si color-mix n'est pas supporté */
  background: color-mix(in srgb, var(--couleur, var(--texte-doux)) 14%, white);
}
.iconeCategorie--petite { width: 1.75rem; height: 1.75rem; border-radius: 6px; }

/* Style commun des icônes générées par creerIcone */
.iconeCategorie svg, .grilleIcones svg {
  width: 1.3rem; height: 1.3rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.iconeCategorie--petite svg { width: 1rem; height: 1rem; }

/* Dans les lignes : la pastille occupe la colonne 1 sur 2 rangées */
.ligneContenu .iconeCategorie,
.apercuTransaction .iconeCategorie { grid-column: 1; grid-row: 1 / span 2; }

/* ---------- 12. Overlays : base + suppression ---------- */
.dialog {
  width: min(100% - 2rem, 26rem);
  padding: 2rem 1.75rem 1.75rem;
  border: none;
  border-radius: var(--rayon-carte);
  background: var(--carte);
  color: var(--texte);
  box-shadow: 0 20px 50px rgba(47, 49, 51, .25);
}
.dialog::backdrop {
  background: rgba(47, 49, 51, .55);
  backdrop-filter: blur(2px);
}
.dialog h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: .35rem; }

.actionsDialog {
  display: grid; grid-template-columns: 1fr 1fr; /* deux boutons de même largeur */
  gap: .75rem; margin-top: 1.5rem;
}

/* Suppression : centré, sauf l'aperçu */
.dialogSupprimer { text-align: center; }
/* Ciblé sur .dialogSupprimer : sinon les messages d'erreur des autres overlays seraient gris */
.dialogSupprimer p { font-size: .9rem; color: var(--texte-doux); }

.dialogIcone {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--terracotta-clair);
  color: var(--terracotta);
}
.dialogIcone svg { width: 1.4rem; height: 1.4rem; }

/* Même grille que .ligneContenu : on réutilise ligneSource, ligneInfos, ligneMontant */
.apercuTransaction {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  column-gap: .75rem; align-items: center;
  margin-top: 1.25rem; padding: .75rem;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  text-align: left;
}
.apercuTransaction .iconeCategorie { width: 2.5rem; height: 2.5rem; }
.apercuTransaction.revenu .ligneMontant { color: var(--vert); }

/* ---------- 13. Overlays avec formulaire (catégorie, budget) ---------- */
.dialogFormulaire { width: min(100% - 2rem, 30rem); }
.dialogFormulaire form { display: grid; gap: 1rem; }
.dialogFormulaire fieldset { border: none; margin: 0; padding: 0; }
.dialogFormulaire legend { font-size: .85rem; font-weight: 500; padding: 0; margin-bottom: .5rem; }
.dialogFormulaire .actionsDialog { margin-top: .5rem; }

.apercuCategorie {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border: 1px dashed var(--bordure-champ); border-radius: 10px;
  font-weight: 600;
}

/* Choix de couleur et d'icône : radios masqués, labels visuels */
.grilleCouleurs, .grilleIcones { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; }
.grilleCouleurs input, .grilleIcones input { position: absolute; opacity: 0; }

.grilleCouleurs label {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--couleur);
  box-shadow: 0 0 0 1px var(--bordure-champ);
  cursor: pointer;
}
/* Coché : un anneau ET une coche, pas seulement une couleur (WCAG 1.4.1) */
.grilleCouleurs input:checked + label { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--texte); }
.grilleCouleurs input:checked + label::after { content: "✓"; content: "✓" / ""; color: #fff; font-weight: 700; }

.grilleIcones label {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--bordure-champ); border-radius: 8px;
  cursor: pointer;
}
.grilleIcones label:hover { background: var(--fond); }
.grilleIcones input:checked + label { background: var(--texte); border-color: var(--texte); color: #fff; }

.grilleCouleurs input:focus-visible + label,
.grilleIcones input:focus-visible + label { outline: 3px solid var(--terracotta); outline-offset: 3px; }

/* Cases à cocher natives : déjà accessibles, on change seulement la couleur */
.listeChoixCategories { display: grid; gap: .15rem; max-height: 14rem; overflow-y: auto; }
.choixCategorie { display: flex; align-items: center; gap: .6rem; }
.choixCategorie input { width: 1.1rem; height: 1.1rem; accent-color: var(--vert); }
.choixCategorie label { flex: 1; display: flex; align-items: center; gap: .6rem; padding: .35rem; cursor: pointer; }
.choixCategorie input:disabled + label { opacity: .55; cursor: not-allowed; }
.dejaPrise { font-size: .8rem; color: var(--texte-doux); }

.boutonSupprimerBudget { justify-self: center; color: var(--terracotta-fonce); }

/* ---------- 14. Liste des budgets ---------- */
.listeBudgets { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.budgetContenu {
  width: 100%;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .5rem .75rem;
  padding: .75rem .5rem;
  background: none; border: none; border-radius: 8px;
  text-align: left; cursor: pointer;
}
.budgetContenu:hover { background: var(--fond); }

.budgetIcones { display: flex; gap: .25rem; }
.budgetNom { font-weight: 600; }
.budgetChiffres { font-size: .85rem; color: var(--texte-doux); }

.barreBudget {
  grid-column: 1 / -1;
  height: .5rem; border-radius: 999px;
  background: var(--bordure); overflow: hidden;
}
.barreRemplie {
  display: block; height: 100%;
  width: var(--progression, 0%);
  background: var(--vert); border-radius: inherit;
}
.budgetReste { grid-column: 1 / -1; font-size: .8rem; color: var(--texte-doux); }

/* Dépassement : couleur ET texte "Dépassé de…" */
.ligneBudget.depasse .barreRemplie { background: var(--terracotta); }
.ligneBudget.depasse .budgetReste { color: var(--terracotta-fonce); font-weight: 600; }

/* ---------- 14 bis. Graphique en anneau ---------- */
.graphique { display: grid; gap: 1.5rem; }

/* --parts est donnée par le JS, ex. : "#556B4D 0% 60%, #A0543D 60% 100%" */
.anneau {
  display: grid; place-items: center;
  width: min(12rem, 100%); aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(var(--parts, var(--bordure) 0% 100%));
}

/* Le « trou » : un disque blanc posé au centre */
.anneauCentre {
  display: grid; place-content: center; text-align: center;
  width: 65%; aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--carte);
}
.anneauMontant { font-family: var(--police-titre); font-weight: 600; font-size: 1.25rem; }
.anneauTexte { color: var(--texte-doux); font-size: .85rem; }

.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.legende li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.legende .etatVide { display: block; }
.legendePuce { width: .75rem; height: .75rem; flex-shrink: 0; border-radius: 50%; background: var(--couleur); }
.legendeNom { flex: 1; }
.legendeMontant { font-weight: 600; }
.legendePourcentage { min-width: 3rem; text-align: right; color: var(--texte-doux); }



/* ---------- 15. Pied de page ---------- */
body > footer {
  padding-block: 1.5rem;
  border-top: 1px solid var(--bordure-champ);
  text-align: center; font-size: .85rem; color: var(--texte-doux);
}
body > footer a { color: var(--texte); }

/* ---------- 16. Animations ---------- */
/* Seulement si l'utilisateur n'a pas demandé à réduire les animations */
@media (prefers-reduced-motion: no-preference) {
  .dialog[open] { animation: apparition .2s ease-out; }
  .dialog[open]::backdrop { animation: fondu .2s ease-out; }
}
/* Pas de "to" : l'animation finit sur l'état normal de l'élément */
@keyframes apparition { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes fondu { from { opacity: 0; } }

/* =========================================
   TABLETTE (768px et plus) : 2 colonnes
   ========================================= */
@media (min-width: 768px) {
  main { grid-template-columns: 5fr 4fr; align-items: start; }
  .carteFormulaire, .carteSolde { grid-column: 1 / -1; } /* pleine largeur */
  .card { padding: 2rem; }
  .logo { width: 150px; }

  .totauxDetail { grid-template-columns: auto auto; justify-content: start; column-gap: 3rem; }
  .totalItem + .totalItem { padding-left: 3rem; }
  .totalValeur { font-size: 1.5rem; }
}

/* =========================================
   GRAND ÉCRAN (1100px et plus) : formulaire horizontal
   Tout est préfixé par .carteFormulaire : ces règles
   ne doivent pas toucher aux formulaires des overlays
   ========================================= */
@media (min-width: 1100px) {
  .carteFormulaire form {
    grid-template-columns: 9rem 8rem 11rem minmax(12rem, 1fr) auto;
    grid-template-areas:
      "titre type categorie date    actions"
      "titre type categorie source  actions"
      "titre type categorie montant actions";
    column-gap: 1.75rem;
    align-items: center;
  }
  .carteFormulaire h2                 { grid-area: titre; }
  .carteFormulaire .choixType         { grid-area: type; grid-template-columns: 1fr; } /* radios empilés */
  .carteFormulaire .champCategorie    { grid-area: categorie; }
  .carteFormulaire .champDate         { grid-area: date; }
  .carteFormulaire .champSource       { grid-area: source; }
  .carteFormulaire .champMontant      { grid-area: montant; }
  .carteFormulaire .actionsFormulaire { grid-area: actions; flex-direction: column; }
  .carteFormulaire .messageErreur     { grid-column: 1 / -1; } /* nouvelle ligne pleine largeur */
}