/* ============================================================
   Stopmi.gouv — feuille de style
   Palette : charte « marque État 2025 » (couleurs exactes).
   Polices : Spectral (OFL, titres). Marianne utilisée seulement
   si ses fichiers sont déposés dans fonts/ (voir README).
   ============================================================ */

@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("fonts/Marianne-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("fonts/Marianne-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Principales */
  --bleu-france: #000091;
  --blanc: #FFFFFF;
  --rouge-marianne: #E1000F;
  /* Complémentaires (charte) */
  --ardoise-850: #C8CED9;
  --ardoise-500: #6C768B;
  --ardoise-150: #2A2F3D;
  --saphir-850: #BFCCFF;
  --fougere-500: #588125;
  --coquelicot-500: #E22734;

  /* Rôles */
  --fond: #F6F6F6;
  --surface: var(--blanc);
  --texte: #161616;
  --texte-doux: #3A3A3A;
  --bordure: #DDDDDD;
  --accent: var(--bleu-france);
  --accent-clair: #E3E3FD;
  --alerte: var(--rouge-marianne);

  --police-texte: "Marianne", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --police-titre: "Spectral", Georgia, "Times New Roman", serif;

  --rayon: 4px;
  --largeur: 60rem;
  --gouttiere: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: clamp(1.75rem, 4vw + .5rem, 2.5rem); font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid #0A76F6; outline-offset: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--blanc); padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

/* --- Bande tricolore (emblème du site, pas un logo officiel) --- */
.bande-tricolore { display: flex; height: 6px; }
.bande-tricolore span { flex: 1; }
.bande-tricolore span:nth-child(1) { background: var(--bleu-france); }
.bande-tricolore span:nth-child(2) { background: var(--blanc); }
.bande-tricolore span:nth-child(3) { background: var(--rouge-marianne); }

/* --- En-tête --- */
.entete { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.entete__corps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem;
}
.marque { text-decoration: none; color: var(--texte); display: flex; flex-direction: column; }
.marque__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.75rem; color: var(--bleu-france); letter-spacing: -.01em; }
.marque__suffixe { color: var(--rouge-marianne); }
.marque__devise { font-size: .875rem; color: var(--texte-doux); }
.entete__mention {
  margin: 0; font-size: .8125rem; color: var(--texte-doux);
  border-left: 3px solid var(--rouge-marianne); padding-left: .5rem;
}

/* --- Contenu --- */
main { padding-top: 2rem; padding-bottom: 3rem; }
.intro__chapo { font-size: 1.125rem; color: var(--texte-doux); max-width: 40rem; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

/* --- Formulaire --- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .champ > label { display: block; font-weight: 700; margin-bottom: .5rem; padding: 0; }
.champ + .champ { margin-top: 1.5rem; }
.champ__aide { font-size: .875rem; color: var(--texte-doux); margin: .5rem 0 0; min-height: 1.3em; }

.revenu { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.revenu__saisie { position: relative; flex: 1 1 12rem; max-width: 20rem; }
.revenu__saisie input {
  width: 100%; height: 2.75rem; padding: 0 2rem 0 .75rem;
  font: inherit; font-size: 1.125rem;
  background: #EEEEEE; border: 0; border-bottom: 2px solid var(--bleu-france);
  border-radius: var(--rayon) var(--rayon) 0 0; color: var(--texte);
}
.revenu__unite { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--texte-doux); }

.bascule { display: inline-flex; border: 1px solid var(--bleu-france); border-radius: var(--rayon); overflow: hidden; height: 2.75rem; }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label {
  display: flex; align-items: center; padding: 0 1rem; cursor: pointer;
  color: var(--bleu-france); font-weight: 500; user-select: none;
}
.bascule label + input + label { border-left: 1px solid var(--bleu-france); }
.bascule input:checked + label { background: var(--bleu-france); color: var(--blanc); }
.bascule input:focus-visible + label { outline: 2px solid #0A76F6; outline-offset: -4px; }

.statuts__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.statut { position: relative; }
.statut input { position: absolute; opacity: 0; }
.statut label {
  display: flex; flex-direction: column; gap: .125rem; height: 100%;
  padding: .75rem 1rem; cursor: pointer;
  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface);
}
.statut label:hover { border-color: var(--bleu-france); }
.statut__libelle { font-weight: 700; }
.statut__precision { font-size: .8125rem; color: var(--texte-doux); }
.statut__taux { font-size: .875rem; color: var(--bleu-france); margin-top: .25rem; }
.statut input:checked + label { border: 2px solid var(--bleu-france); background: var(--accent-clair); padding: calc(.75rem - 1px) calc(1rem - 1px); }
.statut input:focus-visible + label { outline: 2px solid #0A76F6; outline-offset: 2px; }

/* --- Résultat --- */
.resultat { border-left: 4px solid var(--bleu-france); }
.resultat--net { border-left-color: var(--ardoise-500); }
.resultat--net .resultat__montant { color: var(--texte); }
.resultat__montant { font-family: var(--police-titre); font-weight: 700; font-size: clamp(2rem, 6vw, 3rem); color: var(--bleu-france); margin: 0; line-height: 1.1; }
.resultat__detail { color: var(--texte-doux); margin: .5rem 0 0; }
.repartition__annee { font-size: .875rem; color: var(--texte-doux); margin-bottom: .5rem; }
.repartition__aide { font-size: .9375rem; }

/* --- Répartition par sliders --- */
.repartition__barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--bordure);
}
.repartition__total { margin: 0; font-weight: 700; color: var(--bleu-france); }

.ligne { padding: 1rem 0; border-bottom: 1px solid var(--bordure); }
.ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.ligne__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; margin-bottom: .5rem; }
.ligne__nom { font-weight: 700; }
.ligne__part { font-size: .8125rem; color: var(--texte-doux); }
.ligne__valeurs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.ligne__montant { display: inline-flex; align-items: center; gap: .375rem; }
.ligne__montant input {
  width: 7.5rem; height: 2.5rem; padding: 0 .5rem; text-align: right;
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #EEEEEE; border: 0; border-bottom: 2px solid var(--bleu-france);
  border-radius: var(--rayon) var(--rayon) 0 0; color: var(--texte);
}
.ligne__variation {
  min-width: 4.5rem; text-align: center; padding: .125rem .5rem; border-radius: var(--rayon);
  font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--fond); color: var(--texte-doux);
}
.ligne__variation[data-sens="hausse"] { background: var(--accent-clair); color: var(--bleu-france); }
.ligne__variation[data-sens="baisse"] { background: #FFE9E9; color: #CE0500; }

/* Ligne non négociable : grisée et verrouillée. */
.ligne--verrouillee .ligne__nom::after {
  content: "Non négociable"; margin-left: .5rem; padding: .0625rem .375rem; vertical-align: .125em;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--ardoise-500); color: var(--blanc); border-radius: var(--rayon);
}
.ligne__verrou { margin: -.25rem 0 .5rem; font-size: .8125rem; color: var(--texte-doux); }
.ligne--verrouillee .ligne__nom,
.ligne--verrouillee .ligne__montant,
.ligne--verrouillee .ligne__variation { color: var(--ardoise-500); }
.ligne--verrouillee .ligne__montant input { border-bottom-color: var(--ardoise-850); color: var(--ardoise-500); cursor: not-allowed; }
.curseur:disabled { cursor: not-allowed; --remplissage: var(--ardoise-850); }
.curseur:disabled::-webkit-slider-runnable-track { border-color: var(--ardoise-850); background: #EEEEEE; }
.curseur:disabled::-moz-range-track { border-color: var(--ardoise-850); background: #EEEEEE; }
.curseur:disabled::-webkit-slider-thumb { border-color: var(--ardoise-500); background: var(--ardoise-850); box-shadow: none; }
.curseur:disabled::-moz-range-thumb { border-color: var(--ardoise-500); background: var(--ardoise-850); box-shadow: none; }

/* Curseur : piste bordée, trait central = référence, remplissage depuis le centre. */
.curseur {
  --variation: 0;
  --position: calc(50% + var(--variation) * 1%);
  --remplissage: var(--bleu-france);
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 2rem; margin: 0; background: transparent; cursor: pointer;
}
.curseur[data-sens="baisse"] { --remplissage: var(--rouge-marianne); }
.curseur:focus-visible { outline: 2px solid #0A76F6; outline-offset: 2px; }
.curseur::-webkit-slider-runnable-track {
  height: .75rem; border: 1px solid var(--ardoise-500); border-radius: 999px;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), var(--ardoise-150) calc(50% - 1px), var(--ardoise-150) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to right, #EEEEEE min(50%, var(--position)), var(--remplissage) min(50%, var(--position)), var(--remplissage) max(50%, var(--position)), #EEEEEE max(50%, var(--position)));
}
.curseur::-moz-range-track {
  height: .75rem; border: 1px solid var(--ardoise-500); border-radius: 999px;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), var(--ardoise-150) calc(50% - 1px), var(--ardoise-150) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to right, #EEEEEE min(50%, var(--position)), var(--remplissage) min(50%, var(--position)), var(--remplissage) max(50%, var(--position)), #EEEEEE max(50%, var(--position)));
}
.curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.5rem; height: 1.5rem; margin-top: calc((.75rem - 2px - 1.5rem) / 2);
  border-radius: 50%; background: var(--blanc); border: 3px solid var(--bleu-france);
  box-shadow: 0 1px 3px rgba(0, 0, 18, .3);
}
.curseur::-moz-range-thumb {
  width: 1.5rem; height: 1.5rem; box-sizing: border-box;
  border-radius: 50%; background: var(--blanc); border: 3px solid var(--bleu-france);
  box-shadow: 0 1px 3px rgba(0, 0, 18, .3);
}

/* --- Boutons --- */
.bouton {
  font: inherit; font-weight: 500; min-height: 2.75rem; padding: .5rem 1.25rem;
  border-radius: var(--rayon); cursor: pointer; border: 1px solid var(--bleu-france);
}
.bouton--primaire { background: var(--bleu-france); color: var(--blanc); }
.bouton--primaire:hover { background: #1212FF; }
.bouton--secondaire { background: var(--surface); color: var(--bleu-france); }
.bouton--secondaire:hover { background: var(--accent-clair); }

/* --- Pied de page --- */
.pied { background: var(--surface); border-top: 1px solid var(--bordure); font-size: .875rem; color: var(--texte-doux); }
.pied .conteneur { padding-top: 1.5rem; padding-bottom: 2rem; }
.pied__avertissement { border-left: 3px solid var(--rouge-marianne); padding-left: .75rem; color: var(--texte); }
.pied__mesure { font-size: .8125rem; }
.pied__sources { margin: 0; word-break: break-word; }

/* --- Modale d'accueil --- */
.modale { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--gouttiere); }
.modale__fond { position: absolute; inset: 0; background: rgba(22, 22, 22, .64); }
.modale__boite {
  position: relative; background: var(--surface); max-width: 38rem; width: 100%;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--rayon); border-top: 6px solid var(--bleu-france);
  box-shadow: 0 6px 18px rgba(0, 0, 18, .3);
}
.modale__defilement { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2rem 1.5rem 1rem; overscroll-behavior: contain; }
.modale__defilement:focus-visible { outline-offset: -4px; }
.modale__fin { height: 1px; }
.modale__pied { flex: none; padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--bordure); }
.modale__indice { margin: 0; text-align: center; font-size: .875rem; color: var(--texte-doux); }
.modale__actions { margin-top: 0; }
.modale__genre { font-size: .8125rem; font-style: italic; color: var(--texte-doux); margin: -.25rem 0 .75rem; }

.recit { margin-top: 1rem; }
.recit__date {
  font-family: var(--police-titre); font-weight: 700; font-size: 1.125rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--rouge-marianne);
}
.recit h3 {
  margin: 1.5rem 0 .5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bleu-france); border-left: 3px solid var(--bleu-france); padding-left: .5rem;
}
.recit p { margin-bottom: .75rem; }
.modale__fermer {
  position: absolute; top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem;
  background: var(--surface); border: 0; border-radius: 50%; font-size: 1.75rem; line-height: 1;
  cursor: pointer; color: var(--bleu-france); z-index: 1; box-shadow: 0 1px 4px rgba(0, 0, 18, .2);
}
.modale__badge {
  display: inline-block; margin-bottom: .75rem; padding: .125rem .5rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--rouge-marianne); color: var(--blanc); border-radius: var(--rayon);
}
.modale__alerte { font-weight: 700; color: var(--rouge-marianne); }
.modale__suivi { font-size: .875rem; background: var(--fond); padding: .75rem; border-left: 3px solid var(--bleu-france); }
.modale__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.modale__actions .bouton { flex: 1 1 12rem; }
body.modale-ouverte { overflow: hidden; }

@media (max-width: 36em) {
  .carte { padding: 1.25rem 1rem; }
  .revenu__saisie { max-width: none; flex-basis: 100%; }
  .bascule { width: 100%; }
  .bascule label { flex: 1; justify-content: center; }
  .modale__defilement { padding: 2rem 1rem 1rem; }
  .modale__pied { padding: .75rem 1rem 1rem; }
}