/* =========================================================================
   Rembourse Maman — système visuel « Liquid Glass »
   Thème clair par défaut, thème sombre en option (data-theme="sombre").
   Le fond est un aplat : la matière vient du verre et du liquide, pas de
   halos lumineux.
   Typo : Bricolage Grotesque (titres) / Instrument Sans (texte) / DM Mono (montants)
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- couleurs de marque, identiques dans les deux thèmes --- */
  --peche: #ff9a62;
  --framboise: #ff4e87;
  --iris: #7b5cff;
  --menthe: #34e7c6;

  /* --- fond --- */
  --fond: #f2eff5;
  --grain-opacite: 0.34;
  --grain-melange: multiply;

  /* --- texte --- */
  --texte: #241833;
  --texte-doux: rgba(36, 24, 51, 0.68);
  --texte-faible: rgba(36, 24, 51, 0.45);

  /* accents lisibles en texte sur le fond du thème */
  --accent-texte: #c9501c;
  --framboise-texte: #cf1a55;
  --menthe-texte: #067a66;

  /* --- verre --- */
  --verre-fond: linear-gradient(157deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
  --verre-fond-2: linear-gradient(157deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46));
  --verre-bord: rgba(36, 24, 51, 0.1);
  --verre-ombre: 0 16px 38px -22px rgba(46, 26, 74, 0.4);
  --verre-relief: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(36, 24, 51, 0.04);
  --verre-ombre-forte: 0 28px 56px -26px rgba(46, 26, 74, 0.45);
  --reflet: rgba(255, 255, 255, 0.65);
  --flou: blur(22px) saturate(150%);

  /* --- surfaces internes : lignes, pastilles, champs --- */
  --surface-douce: rgba(36, 24, 51, 0.045);
  --surface-survol: rgba(36, 24, 51, 0.075);
  --surface-bord: rgba(36, 24, 51, 0.08);
  --champ-fond: rgba(255, 255, 255, 0.75);
  --champ-bord: rgba(36, 24, 51, 0.15);
  --bouton-fond: rgba(255, 255, 255, 0.62);
  --bouton-survol: rgba(255, 255, 255, 0.92);
  --trait: rgba(36, 24, 51, 0.09);

  /* --- jauge liquide --- */
  --cuve-fond: rgba(36, 24, 51, 0.055);
  --cuve-relief: inset 0 0 0 1px rgba(36, 24, 51, 0.06), inset 0 12px 26px -18px rgba(46, 26, 74, 0.3);
  --vitre-voile: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.16) 40%,
                                 rgba(255, 255, 255, 0.26) 72%, rgba(255, 255, 255, 0.48) 100%);
  --jauge-ombre-texte: 0 1px 2px rgba(255, 255, 255, 0.7);
  --jauge-doux: rgba(36, 24, 51, 0.72);
  --jauge-oeil: rgba(36, 24, 51, 0.5);
  --liquide-lueur: 0 -12px 30px -10px rgba(52, 231, 198, 0.45);

  /* --- états --- */
  --creux-fond: rgba(255, 154, 98, 0.18);
  --creux-bord: rgba(216, 100, 40, 0.4);
  --retard-texte: #a5123f;
  --retard-fond: rgba(255, 78, 135, 0.14);
  --retard-bord: rgba(207, 26, 85, 0.38);
  --valide-fond: rgba(52, 231, 198, 0.18);
  --valide-bord: rgba(6, 122, 102, 0.32);
  --erreur-texte: #a5123f;

  /* --- dimensions --- */
  --r-xl: 32px;
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 11px;
  --largeur: 1180px;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --texte-police: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="sombre"] {
  color-scheme: dark;

  --fond: #161021;
  --grain-opacite: 0.28;
  --grain-melange: overlay;

  --texte: #fff3e6;
  --texte-doux: rgba(255, 243, 230, 0.66);
  --texte-faible: rgba(255, 243, 230, 0.42);

  --accent-texte: var(--peche);
  --framboise-texte: var(--framboise);
  --menthe-texte: var(--menthe);

  --verre-fond: linear-gradient(157deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  --verre-fond-2: linear-gradient(157deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --verre-bord: rgba(255, 255, 255, 0.14);
  --verre-ombre: 0 20px 44px -26px rgba(0, 0, 0, 0.9);
  --verre-relief: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --verre-ombre-forte: 0 30px 64px -30px rgba(0, 0, 0, 0.95);
  --reflet: rgba(255, 255, 255, 0.14);

  --surface-douce: rgba(255, 255, 255, 0.05);
  --surface-survol: rgba(255, 255, 255, 0.09);
  --surface-bord: rgba(255, 255, 255, 0.08);
  --champ-fond: rgba(10, 4, 20, 0.4);
  --champ-bord: rgba(255, 255, 255, 0.14);
  --bouton-fond: rgba(255, 255, 255, 0.07);
  --bouton-survol: rgba(255, 255, 255, 0.15);
  --trait: rgba(255, 255, 255, 0.1);

  --cuve-fond: rgba(9, 3, 20, 0.45);
  --cuve-relief: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 12px 26px -18px rgba(0, 0, 0, 0.9);
  --vitre-voile: linear-gradient(180deg, rgba(14, 5, 28, 0.42) 0%, rgba(14, 5, 28, 0.14) 40%,
                                 rgba(14, 5, 28, 0.26) 72%, rgba(14, 5, 28, 0.5) 100%);
  --jauge-ombre-texte: 0 1px 3px rgba(10, 4, 22, 0.6);
  --jauge-doux: rgba(255, 243, 230, 0.82);
  --jauge-oeil: rgba(255, 243, 230, 0.58);
  --liquide-lueur: 0 -14px 40px -6px rgba(52, 231, 198, 0.5);

  --creux-fond: rgba(255, 154, 98, 0.14);
  --creux-bord: rgba(255, 154, 98, 0.34);
  --retard-texte: #ffd6e2;
  --retard-fond: rgba(255, 78, 135, 0.2);
  --retard-bord: rgba(255, 78, 135, 0.42);
  --valide-fond: rgba(52, 231, 198, 0.12);
  --valide-bord: rgba(52, 231, 198, 0.28);
  --erreur-texte: #ffb0c6;
}

* { box-sizing: border-box; }

/* l'espacement vertical vient des piles, pas des marges par défaut */
p { margin: 0; }

/* sans cette règle, `hidden` est ignoré sur les éléments flex ou grid */
[hidden] { display: none !important; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--texte-police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

/* --- fond : un aplat, plus un grain qui empêche l'à-plat d'être mort ------ */
.decor {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--fond);
  pointer-events: none;
}

.decor__grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacite);
  mix-blend-mode: var(--grain-melange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)' opacity='0.35'/%3E%3C/svg%3E");
}

/* =========================================================================
   Le verre
   ========================================================================= */
.verre {
  position: relative;
  background: var(--verre-fond);
  backdrop-filter: var(--flou);
  -webkit-backdrop-filter: var(--flou);
  border: 1px solid var(--verre-bord);
  border-radius: var(--r-l);
  box-shadow: var(--verre-ombre), var(--verre-relief);
}

/* reflet spéculaire qui suit le curseur */
.verre--vivant::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--reflet), transparent 70%);
}
.verre--vivant:hover::before { opacity: 1; }

.verre--epais { --flou: blur(30px) saturate(160%); border-radius: var(--r-xl); }

/* teinte discrète, pour que la surface qui porte le chiffre clé ne soit pas un aplat mort */
.verre--teinte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: var(--teinte-force, 1);
  background: linear-gradient(112deg, rgba(255, 154, 98, 0.22), rgba(255, 78, 135, 0.12) 46%,
                              rgba(123, 92, 255, 0.18));
}
.verre--teinte > * { position: relative; z-index: 1; }
[data-theme="sombre"] .verre--teinte { --teinte-force: 0.85; }

/* =========================================================================
   Typographie
   ========================================================================= */
.titre-xxl, .titre-xl, .titre-l, .titre-m {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}
.titre-xxl { font-size: clamp(2.9rem, 7.5vw, 5.4rem); }
.titre-xl  { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.titre-l   { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.titre-m   { font-size: 1.12rem; letter-spacing: -0.02em; }

.oeil {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin: 0 0 10px;
}

.doux { color: var(--texte-doux); }
.faible { color: var(--texte-faible); }
.petit { font-size: 0.87rem; }

.montant {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.montant--geant { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; }
.montant--grand { font-size: 1.6rem; line-height: 1.1; }
/* le montant respire avant sa ligne d'explication */
.montant + p { margin-top: 7px; }

.teinte-menthe { color: var(--menthe-texte); }
.teinte-peche { color: var(--accent-texte); }
.teinte-framboise { color: var(--framboise-texte); }

/* =========================================================================
   Mise en page
   ========================================================================= */
.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px 120px;
}

.pile { display: flex; flex-direction: column; }
.pile--s { gap: 8px; }
.pile--m { gap: 16px; }
.pile--l { gap: 28px; }
.pile--xl { gap: 48px; }

.rang {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rang--espace { justify-content: space-between; }
.rang--haut { align-items: flex-start; }
.rang--enroule { flex-wrap: wrap; }

.grille {
  display: grid;
  gap: 22px;
  /* le min() empêche la colonne d'imposer sa largeur minimale sur un écran
     plus étroit qu'elle : sans lui, la carte déborde au lieu de rétrécir */
  grid-template-columns: repeat(auto-fill, minmax(min(336px, 100%), 1fr));
}

.deux-colonnes {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .deux-colonnes { grid-template-columns: 1fr; }
}

.bloc { padding: 26px; }
.bloc--serre { padding: 18px; }

/* =========================================================================
   En-tête
   ========================================================================= */
.entete {
  position: sticky;
  top: 14px;
  z-index: 40;
  max-width: var(--largeur);
  margin: 14px auto 34px;
  padding: 11px 11px 11px 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* le libellé cède la place à une icône quand la barre devient étroite */
.a-l-etroit { display: none; }
@media (max-width: 720px) {
  .entete { margin: 10px 12px 22px; padding: 9px 9px 9px 15px; gap: 9px; }
  .entete .au-large { display: none; }
  .entete .a-l-etroit { display: inline-flex; }
  .entete [data-deconnexion] { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .entete .marque__nom { font-size: 0.95rem; }
  .entete [data-nom] { display: none; }
  .entete .bouton { padding: 8px 13px; font-size: 0.82rem; }
}
@media (max-width: 400px) {
  .entete .marque__nom { font-size: 0.85rem; }
  .entete .marque__goutte { width: 22px; height: 22px; }
}

.marque {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: 1.05rem;
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}
.marque__goutte {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 12px;
  transform: rotate(-45deg);
  background: linear-gradient(150deg, var(--menthe), var(--iris) 55%, var(--framboise));
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.55);
  flex: none;
}
.marque__nom span { color: var(--accent-texte); }

.entete__vide { flex: 1; }

.entete__compte {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--texte-doux);
  font-family: var(--texte-police);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.entete__compte:hover { background: var(--surface-douce); border-color: var(--verre-bord); color: var(--texte); }

/* =========================================================================
   Boutons
   ========================================================================= */
.bouton {
  font-family: var(--texte-police);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--texte);
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--verre-bord);
  background: var(--bouton-fond);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
[data-theme="sombre"] .bouton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.bouton:hover { background: var(--bouton-survol); transform: translateY(-1px); }
.bouton:active { transform: translateY(1px) scale(0.99); }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.bouton--principal {
  border-color: transparent;
  color: #35131f;
  background: linear-gradient(140deg, var(--peche), var(--framboise) 88%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -12px var(--framboise);
}
.bouton--principal:hover { background: linear-gradient(140deg, #ffb083, #ff6b9b 88%); }

.bouton--menthe {
  border-color: transparent;
  color: #04302a;
  background: linear-gradient(140deg, var(--menthe), #6ff0d2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px -14px var(--menthe);
}
.bouton--menthe:hover { background: linear-gradient(140deg, #55f0d4, #8df6e0); }

.bouton--fantome {
  background: transparent;
  border-color: var(--surface-bord);
  color: var(--texte-doux);
  box-shadow: none;
}
.bouton--fantome:hover { color: var(--texte); background: var(--surface-douce); }

.bouton--petit { padding: 7px 14px; font-size: 0.84rem; }
.bouton--large { width: 100%; justify-content: center; padding: 14px 22px; font-size: 1rem; }
.bouton--danger:hover { color: var(--framboise-texte); background: var(--retard-fond); }

.bouton-icone:hover { color: var(--texte); }
.bouton-icone {
  width: 32px;
  height: 32px;
  color: var(--texte-faible);
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
}

/* =========================================================================
   Formulaires
   ========================================================================= */
.champ { display: flex; flex-direction: column; gap: 7px; }

.champ__etiquette {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texte-doux);
  letter-spacing: 0.01em;
}

.champ__saisie,
.champ__zone,
.champ__liste {
  font-family: var(--texte-police);
  font-size: 1rem;
  color: var(--texte);
  background: var(--champ-fond);
  border: 1px solid var(--champ-bord);
  border-radius: var(--r-m);
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  appearance: none;
}
.champ__zone { min-height: 96px; resize: vertical; line-height: 1.5; }
.champ__liste {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23241833' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
[data-theme="sombre"] .champ__liste {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23fff3e6' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.champ__saisie::placeholder, .champ__zone::placeholder { color: var(--texte-faible); }

.champ__saisie:focus, .champ__zone:focus, .champ__liste:focus {
  outline: none;
  border-color: var(--creux-bord);
  box-shadow: 0 0 0 4px var(--creux-fond);
}

/* champ fichier : le bouton natif suit le reste du formulaire */
.champ__saisie[type="file"] { padding: 9px 12px; font-size: 0.9rem; cursor: pointer; }
.champ__saisie[type="file"]::file-selector-button {
  font-family: var(--texte-police);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte);
  background: var(--surface-douce);
  border: 1px solid var(--surface-bord);
  border-radius: 999px;
  padding: 7px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.champ__saisie[type="file"]::file-selector-button:hover { background: var(--surface-survol); }

.champ--monnaie { position: relative; }
.champ--monnaie .champ__saisie { font-family: var(--mono); padding-right: 42px; }
.champ__unite {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-family: var(--mono);
  color: var(--texte-faible);
  pointer-events: none;
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) { .duo { grid-template-columns: 1fr; } }

.aide { font-size: 0.8rem; color: var(--texte-faible); margin: 0; }

.erreur-champ {
  font-size: 0.85rem;
  color: var(--erreur-texte);
  background: var(--retard-fond);
  border: 1px solid var(--retard-bord);
  border-radius: var(--r-m);
  padding: 10px 14px;
  margin: 0;
}

/* segments : rythme de paiement, mode de part */
.segments {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.segments__choix {
  font-family: var(--texte-police);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--surface-bord);
  background: var(--surface-douce);
  cursor: pointer;
  transition: all 0.18s;
}
.segments__choix:hover { color: var(--texte); border-color: var(--champ-bord); }
.segments__choix[aria-pressed="true"] {
  color: #35131f;
  background: linear-gradient(140deg, var(--peche), var(--framboise));
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.segments__choix:disabled { opacity: 0.4; cursor: not-allowed; }

/* dépôt de fichiers */
.depot {
  border: 1.5px dashed var(--champ-bord);
  border-radius: var(--r-m);
  padding: 22px;
  text-align: center;
  color: var(--texte-doux);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface-douce);
}
.depot:hover, .depot--survol {
  border-color: var(--creux-bord);
  color: var(--texte);
  background: var(--creux-fond);
}

.vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vignette {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: var(--r-s);
  overflow: hidden;
  border: 1px solid var(--verre-bord);
}
.vignette__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette__croix {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 10, 32, 0.7);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

/* =========================================================================
   Jauge liquide — l'élément signature
   ========================================================================= */
jauge-liquide {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--cuve-fond);
  box-shadow: var(--cuve-relief);
}

.jauge__cuve {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.jauge__niveau {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  transition: height 1.15s cubic-bezier(0.22, 1, 0.3, 1);
  background: linear-gradient(180deg, #55f5d8 0%, #27c9ea 52%, var(--iris) 132%);
  box-shadow: var(--liquide-lueur);
}

.jauge__attente {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  transition: height 1.15s cubic-bezier(0.22, 1, 0.3, 1), bottom 1.15s cubic-bezier(0.22, 1, 0.3, 1);
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 154, 98, 0.6) 0 7px,
    rgba(255, 154, 98, 0.18) 7px 14px);
}

.jauge__vague {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 200%;
  height: 22px;
  fill: var(--menthe);
}
.jauge__vague--1 { animation: houle 7s linear infinite; opacity: 1; fill: #5ff7db; }
.jauge__vague--2 { animation: houle 11s linear infinite reverse; opacity: 0.45; height: 17px; }

@keyframes houle { to { transform: translateX(-50%); } }

/* bulles : de la vie dans le liquide */
.jauge__bulle {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: monte linear infinite;
}
@keyframes monte {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.8; }
  100% { transform: translateY(-190px) scale(1.15); opacity: 0; }
}

.jauge__contenu {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  text-shadow: var(--jauge-ombre-texte);
}

/* posées sur le liquide, les pastilles neutres ont besoin d'un fond plus franc */
.jauge__contenu {
  --pastille-fond: rgba(255, 255, 255, 0.62);
  --pastille-bord: rgba(36, 24, 51, 0.12);
  --pastille-texte: var(--texte);
}
[data-theme="sombre"] .jauge__contenu {
  --pastille-fond: rgba(255, 255, 255, 0.14);
  --pastille-bord: rgba(255, 255, 255, 0.18);
}

.jauge__contenu .doux { color: var(--jauge-doux); }
.jauge__contenu .oeil { color: var(--jauge-oeil); white-space: nowrap; }

/* le verre par-dessus le liquide : c'est là que « liquid glass » se joue.
   Le voile garantit que le texte reste lisible quel que soit le niveau. */
.jauge__vitre {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(157deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 42%),
    var(--vitre-voile);
  box-shadow: var(--verre-relief);
}

/* =========================================================================
   Carte dépense
   ========================================================================= */
.carte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.3, 1.2, 0.5, 1), box-shadow 0.25s;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--verre-ombre-forte), var(--verre-relief); }
.carte:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 4px; }

.carte__jauge { flex: 1; min-height: 268px; position: relative; z-index: 1; background: transparent; }
.carte__jauge .jauge__cuve { border-radius: inherit; }
.carte__titre { font-size: clamp(1.22rem, 1.7vw, 1.5rem); }

.carte__pied {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 14px;
}
.carte__pied > :last-child { margin-left: auto; }

.carte__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  filter: saturate(0.75) contrast(1.02);
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}

.hero-jauge { min-height: 234px; }
.mini-jauge { height: 236px; width: min(300px, 100%); }

/* =========================================================================
   Pastilles & avatars
   ========================================================================= */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--pastille-fond, var(--surface-douce));
  border: 1px solid var(--pastille-bord, var(--surface-bord));
  color: var(--pastille-texte, var(--texte-doux));
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.pastille--menthe { color: #052e28; background: var(--menthe); border-color: transparent; }
.pastille--peche { color: #33150a; background: var(--peche); border-color: transparent; }
.pastille--framboise { color: #37101d; background: var(--framboise); border-color: transparent; }
.pastille--creux { color: var(--accent-texte); background: var(--creux-fond); border-color: var(--creux-bord); }
.pastille--retard { color: var(--retard-texte); background: var(--retard-fond); border-color: var(--retard-bord); }
.pastille--valide { color: var(--menthe-texte); background: var(--valide-fond); border-color: var(--valide-bord); }

.avatars { display: flex; }
.avatars .avatar-personne:not(:first-child) { margin-left: -9px; }

avatar-personne {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #1a0a12;
  border: 1.5px solid var(--fond);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  flex: none;
}
avatar-personne[data-taille="grand"] { width: 44px; height: 44px; font-size: 0.86rem; }

/* =========================================================================
   Listes (participants, versements, échéances)
   ========================================================================= */
.ligne {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--surface-douce);
  border: 1px solid var(--surface-bord);
  transition: background 0.2s;
}
.ligne:hover { background: var(--surface-survol); }
.ligne__corps { flex: 1; min-width: 0; }
.ligne__titre {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 0.96rem;
  min-width: 0;
}
.ligne__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ligne__detail { font-size: 0.82rem; color: var(--texte-faible); }
.ligne__actions { display: flex; gap: 6px; align-items: center; }
.ligne--attente { border-color: var(--creux-bord); background: var(--creux-fond); }
.ligne--faite { opacity: 0.6; }

/* échéancier : la numérotation encode une vraie séquence */
.echeance {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px 11px 8px;
  border-radius: var(--r-m);
  position: relative;
}
.echeance__numero {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--texte-doux);
  text-align: center;
  padding: 6px 0;
  border-radius: 8px;
  background: var(--surface-douce);
}
.echeance--payee .echeance__numero { color: #052e28; background: var(--menthe); }
.echeance--prochaine {
  background: var(--creux-fond);
  box-shadow: inset 0 0 0 1px var(--creux-bord);
}
.echeance--prochaine .echeance__numero { color: #33150a; background: var(--peche); }
.echeance--payee .echeance__date { text-decoration: line-through; color: var(--texte-faible); }

.rien {
  text-align: center;
  padding: 34px 22px;
  color: var(--texte-faible);
  border: 1.5px dashed var(--surface-bord);
  border-radius: var(--r-m);
}
.rien__titre { font-family: var(--display); font-weight: 700; color: var(--texte-doux); font-size: 1.05rem; }

/* =========================================================================
   Galerie
   ========================================================================= */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 11px;
}
.galerie__case {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--verre-bord);
  cursor: zoom-in;
  padding: 0;
  background: none;
}
.galerie__case img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.galerie__case:hover img { transform: scale(1.06); }

/* =========================================================================
   Modale
   ========================================================================= */
.rideau {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(28, 16, 44, 0.34);
  backdrop-filter: blur(10px);
  animation: apparait 0.24s ease;
  overflow-y: auto;
}
[data-theme="sombre"] .rideau { background: rgba(8, 2, 18, 0.62); }

.modale {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px;
  animation: surgit 0.34s cubic-bezier(0.2, 1.2, 0.35, 1);
}
.modale--large { width: min(720px, 100%); }
.modale__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }

@keyframes apparait { from { opacity: 0; } }
@keyframes surgit { from { opacity: 0; transform: translateY(22px) scale(0.97); } }

.visionneuse img {
  max-width: min(92vw, 1000px);
  max-height: 86vh;
  border-radius: var(--r-l);
  box-shadow: var(--verre-ombre-forte);
}

/* =========================================================================
   Notifications
   ========================================================================= */
.notes {
  position: fixed;
  z-index: 120;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.note {
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  animation: surgit 0.3s cubic-bezier(0.2, 1.2, 0.35, 1);
  text-align: center;
}
.note--erreur { color: var(--erreur-texte); box-shadow: var(--verre-ombre), inset 0 0 0 1px var(--retard-bord); }
.note--ok { color: var(--menthe-texte); box-shadow: var(--verre-ombre), inset 0 0 0 1px var(--valide-bord); }

/* =========================================================================
   Écran d'accueil / connexion
   ========================================================================= */
.accueil {
  min-height: calc(100dvh - 190px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 60px;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
@media (max-width: 940px) {
  .accueil { grid-template-columns: 1fr; gap: 34px; padding-top: 24px; }
}

.accueil__baseline {
  font-size: 1.1rem;
  color: var(--texte-doux);
  max-width: 46ch;
  margin: 20px 0 0;
}

.accueil__titre em {
  font-style: normal;
  background: linear-gradient(100deg, var(--peche), var(--framboise) 45%, var(--iris));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accueil__preuve {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.accueil__preuve div { min-width: 120px; }

.onglets { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface-douce); }
.onglets__choix {
  flex: 1;
  font-family: var(--texte-police);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte-doux);
  padding: 10px;
  border: none;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: all 0.2s;
}
.onglets__choix[aria-selected="true"] {
  color: var(--texte);
  background: var(--verre-fond);
  box-shadow: var(--verre-relief);
}

/* =========================================================================
   Parts : montant, pourcentage ou fraction
   ========================================================================= */
.part {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.segments--part { gap: 4px; flex: none; }
.segments--part .segments__choix {
  min-width: 42px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 0.8rem;
  text-align: center;
}

.part__valeur { display: flex; align-items: center; gap: 6px; }

.part__saisie {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--texte);
  background: var(--champ-fond);
  border: 1px solid var(--champ-bord);
  border-radius: var(--r-s);
  padding: 8px 10px;
  width: 88px;
  text-align: right;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.part__saisie--fraction { width: 54px; text-align: center; }
.part__saisie:focus {
  outline: none;
  border-color: var(--creux-bord);
  box-shadow: 0 0 0 3px var(--creux-fond);
}
.part__saisie::-webkit-outer-spin-button,
.part__saisie::-webkit-inner-spin-button { appearance: none; margin: 0; }

.part__barre { color: var(--texte-faible); font-family: var(--mono); }

.part__equivalent {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--texte-doux);
  white-space: nowrap;
}
.part__equivalent--vide { color: var(--texte-faible); }

.ligne-part {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 13px 15px;
  border-radius: var(--r-m);
  background: var(--surface-douce);
  border: 1px solid var(--surface-bord);
}
@media (max-width: 620px) {
  .ligne-part { grid-template-columns: 1fr; }
}

.recap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--r-m);
  background: var(--surface-douce);
  border: 1px solid var(--surface-bord);
}
.recap--complet { border-color: var(--valide-bord); background: var(--valide-fond); }
.recap--depasse { border-color: var(--retard-bord); background: var(--retard-fond); }

.recap__jauge {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-bord);
  overflow: hidden;
  flex: 1 1 140px;
  min-width: 120px;
}
.recap__jauge span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--menthe), var(--peche));
  transition: width 0.4s cubic-bezier(0.22, 1, 0.3, 1);
}
.recap--depasse .recap__jauge span { background: linear-gradient(90deg, var(--peche), var(--framboise)); }

/* =========================================================================
   Divers
   ========================================================================= */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lien-retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.lien-retour:hover { color: var(--texte); }

/* lien de texte discret : « mot de passe oublié », mentions de bas de carte */
.lien-doux {
  color: var(--texte-doux);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--trait);
}
.lien-doux:hover { color: var(--texte); text-decoration-color: currentColor; }

.barre-outils { display: flex; gap: 9px; flex-wrap: wrap; }

.separateur { height: 1px; background: var(--trait); border: 0; margin: 4px 0; }

:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; border-radius: 4px; }

.chargement {
  display: grid;
  place-items: center;
  min-height: 45vh;
  color: var(--texte-faible);
}
.chargement__goutte {
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 14px;
  background: linear-gradient(150deg, var(--menthe), var(--iris) 60%, var(--framboise));
  animation: pulse-goutte 1.5s ease-in-out infinite;
}
@keyframes pulse-goutte {
  0%, 100% { transform: rotate(-45deg) scale(1); opacity: 0.8; }
  50% { transform: rotate(-45deg) scale(1.22); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Agenda du mois
   ========================================================================= */
.mois__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mois__titre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}

.mois__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mois__nom-jour {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
  text-align: center;
  padding-bottom: 4px;
}

.mois__jour {
  position: relative;
  min-height: 42px;
  padding: 5px 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--texte-doux);
  font-family: var(--mono);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  cursor: default;
  transition: background 0.15s, border-color 0.15s;
}
.mois__jour--vide { visibility: hidden; }
.mois__jour--actif { cursor: pointer; color: var(--texte); font-weight: 600; }
.mois__jour--actif:hover { background: var(--surface-survol); }
.mois__jour--aujourdhui {
  border-color: var(--creux-bord);
  color: var(--accent-texte);
  font-weight: 700;
}
.mois__jour--choisi { background: var(--surface-survol); border-color: var(--champ-bord); }

.mois__points { display: flex; gap: 3px; height: 5px; }
.mois__point { width: 5px; height: 5px; border-radius: 50%; }
.mois__point--du { background: var(--peche); }
.mois__point--retard { background: var(--framboise); }
.mois__point--verse { background: var(--menthe); }

.mois__totaux {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.agenda__ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-m);
  background: var(--surface-douce);
  border: 1px solid var(--surface-bord);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.agenda__ligne:hover { background: var(--surface-survol); }
.agenda__jour {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: center;
  min-width: 34px;
  color: var(--texte-doux);
}
.agenda__jour strong { display: block; font-size: 1.05rem; font-weight: 500; color: var(--texte); }
.agenda__ligne--retard { border-color: var(--retard-bord); background: var(--retard-fond); }
.agenda__ligne--verse { border-color: var(--valide-bord); background: var(--valide-fond); }
.agenda__ligne--dispense { opacity: 0.6; }

/* =========================================================================
   Échéancier détaillé
   ========================================================================= */
.echeance--ajustee { box-shadow: inset 0 0 0 1px var(--creux-bord); }
.echeance__ouvrir {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 11px 12px 11px 8px;
  border-radius: var(--r-m);
  color: inherit;
  cursor: pointer;
  align-items: center;
  transition: background 0.18s;
}
.echeance__ouvrir:hover { background: var(--surface-survol); }
.echeance__part {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-texte);
  white-space: nowrap;
}

/* =========================================================================
   Abonnement
   ========================================================================= */
.offre {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-m);
  background: var(--surface-douce);
  border: 1px solid var(--surface-bord);
}
.offre--retenue { border-color: var(--creux-bord); background: var(--creux-fond); }

.offre__prix {
  font-family: var(--mono);
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.offre__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.offre__liste li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.92rem; }
.offre__liste svg { flex: none; margin-top: 3px; color: var(--menthe-texte); }
.offre__liste li[data-inclus="non"] { color: var(--texte-doux); }
.offre__liste .puce {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--texte-faible);
  flex: none;
  margin-top: 8px;
  margin-left: 5px;
  margin-right: 5px;
}

.invite-premium {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-radius: var(--r-m);
  background: var(--creux-fond);
  border: 1px solid var(--creux-bord);
  font-size: 0.9rem;
}
.invite-premium__texte { flex: 1; min-width: 180px; }

.pastille--premium {
  color: #35131f;
  background: linear-gradient(140deg, var(--peche), var(--framboise));
  border-color: transparent;
}

/* =========================================================================
   Versements groupés par échéance
   ========================================================================= */
.groupe {
  border: 1px solid var(--surface-bord);
  border-radius: var(--r-m);
  overflow: hidden;
}
.groupe--complet { border-color: var(--valide-bord); }
.groupe--partiel { border-color: var(--creux-bord); }

.groupe__entete {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--surface-douce);
}
.groupe--complet .groupe__entete { background: var(--valide-fond); }
.groupe--partiel .groupe__entete { background: var(--creux-fond); }

.groupe__corps { padding: 9px; display: flex; flex-direction: column; gap: 8px; }
.groupe__corps:empty { display: none; }

.groupe__vide {
  padding: 12px 13px;
  font-size: 0.84rem;
  color: var(--texte-faible);
  text-align: center;
}

/* =========================================================================
   Vitrine : la page publique. Elle respire plus que l'application — on y lit,
   on n'y travaille pas. Les blocs reprennent le verre du reste du site pour
   qu'il n'y ait pas deux produits.
   ========================================================================= */
.vitrine {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px 90px;
}

.vitrine__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 60px;
  padding: 30px 0 90px;
}
.vitrine__jauge { height: 320px; width: min(340px, 100%); justify-self: end; }

@media (max-width: 940px) {
  .vitrine__hero { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; }
  .vitrine__jauge { justify-self: start; }
}

/* Les appels à l'action restent côte à côte tant qu'il y a la place, et
   grossissent un peu : ce sont les seuls boutons de la page. */
.vitrine__appels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.vitrine__appels--centre { justify-content: center; margin-top: 26px; }
.vitrine__appels .bouton { padding: 14px 26px; font-size: 1rem; }

.vitrine__section { padding: 56px 0; }
/* Le navigateur équilibre les lignes lui-même : un retour forcé tomberait
   juste sur un écran et de travers sur tous les autres. */
.vitrine__titre { margin-top: 4px; max-width: 22ch; text-wrap: balance; }
.vitrine__intro { font-size: 1.06rem; max-width: 56ch; margin: 18px 0 0; }

/* --- les trois étapes --- */
.vitrine__etapes {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
}
.vitrine__etape { display: grid; gap: 10px; align-content: start; }
.vitrine__numero { width: 34px; height: 34px; }

/* --- la grille de fonctions --- */
.vitrine__outils {
  margin-top: 34px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
}

/* --- les deux offres --- */
.vitrine__offres {
  margin-top: 34px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) {
  .vitrine__offres { grid-template-columns: 1fr; }
}

/* --- questions : repliées, pour ne pas noyer la page --- */
.vitrine__questions { margin-top: 30px; display: grid; gap: 12px; }

.vitrine__question { padding: 4px 22px; }
.vitrine__question summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.vitrine__question summary::-webkit-details-marker { display: none; }
/* le chevron tourne à l'ouverture : l'état se lit sans avoir à relire */
.vitrine__question summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--texte-faible);
  border-bottom: 2px solid var(--texte-faible);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.vitrine__question[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.vitrine__question p { margin: 0 0 20px; max-width: 66ch; }

/* --- dernier appel + pied --- */
.vitrine__final { text-align: center; padding: 54px 26px; margin-top: 40px; }

.vitrine__pied {
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--trait);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.vitrine__pied p { margin: 0; max-width: 52ch; }

/* =========================================================================
   Écran d'accès : la carte seule, centrée. Rien d'autre à regarder.
   ========================================================================= */
.acces {
  max-width: 470px;
  margin: 0 auto;
  padding: 20px 24px 90px;
  display: grid;
  gap: 18px;
}
.acces__carte { padding: 30px; }

/* =========================================================================
   Rappel de confirmation d'adresse
   ========================================================================= */
.rappel-verif {
  margin-top: 18px;
  padding: 15px 20px;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-color: var(--creux-bord);
}
.rappel-verif p { margin: 0; }
.rappel-verif p + p { margin-top: 4px; max-width: 62ch; }

/* =========================================================================
   Pieds de modale : une seule classe pour toutes les fenêtres du site.
   ========================================================================= */
.pied-modale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* le bouton mis à l'écart (se déconnecter…) s'éloigne des actions principales */
.pied-modale__cote { margin-right: auto; }

/* Un enfant de grille ne rétrécit pas sous la largeur de son contenu sans
   cette permission : sans elle, une rangée de boutons qui ne se coupe pas
   rend la fenêtre plus large que l'écran. */
.modale { min-width: 0; }

/* la barre d'outils d'une dépense : tout en ligne tant qu'il y a la place */
.outils__rares { display: contents; }
.outils__plus { display: none; }
/* trois points dessinés plutôt qu'écrits : aucune police ne les rétrécit */
.outils__points {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
}

.entete-bloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.entete-bloc__compte { font-weight: 400; margin-left: 8px; }

/* La ligne d'échéance est un bouton unique : sans cela il n'occuperait que la
   première colonne de la grille et son contenu déborderait sur la droite. */
.echeance > .echeance__ouvrir { grid-column: 1 / -1; }

/* la date d'une échéance ne se coupe jamais au milieu */
.echeance__date { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.echeance__jour { white-space: nowrap; }

/* =========================================================================
   Téléphone — les mêmes écrans, repensés pour un pouce et une colonne.
   Ce n'est pas une variante du site : ce sont les mêmes composants, dont la
   disposition change là où la largeur ne suffit plus.
   ========================================================================= */
@media (max-width: 640px) {

  /* --- respiration générale : on récupère la marge perdue sur les côtés --- */
  .page { padding-left: 16px; padding-right: 16px; padding-bottom: 80px; }
  .bloc { padding: 18px 16px; }
  .bloc--serre { padding: 14px 13px; }

  /* --- fenêtres : elles prennent l'écran, les actions tombent sous le pouce */
  .rideau { padding: 10px; }
  .modale, .modale--large { width: 100%; padding: 22px 18px; max-height: 93dvh; }
  .modale__entete { margin-bottom: 18px; }
  .pied-modale { flex-direction: column; align-items: stretch; gap: 9px; }
  .pied-modale > .bouton { width: 100%; justify-content: center; }
  .pied-modale__cote { margin-right: 0; order: 1; margin-top: 6px; }

  /* --- barre d'outils : une action évidente, les rares derrière « … » ----- */
  /* la barre principale prend toute la largeur de sa rangée, sinon elle se
     réduit à la taille de ses boutons et l'action principale perd son poids */
  .barre-outils--principale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    flex: 1 1 100%;
  }
  .outils__premier { grid-column: 1 / -1; }
  .outils__premier, .outils__second { justify-content: center; }
  .outils__plus { display: inline-flex; justify-content: center; min-width: 54px; }
  .outils__rares { display: none; grid-column: 1 / -1; gap: 9px; }
  .barre-outils--ouverte .outils__rares { display: grid; grid-template-columns: 1fr 1fr; }
  .outils__rares .bouton { width: 100%; justify-content: center; }

  /* --- échéancier : la ligne se plie en deux au lieu de déborder ---------- */
  .echeance__ouvrir {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "num date montant" "vide part part";
    gap: 3px 10px;
    padding: 10px 12px 10px 8px;
    align-items: center;
  }
  .echeance__ouvrir > .echeance__numero { grid-area: num; }
  .echeance__ouvrir > .echeance__date { grid-area: date; }
  .echeance__ouvrir > .echeance__part { grid-area: part; text-align: right; }
  .echeance__ouvrir > .echeance__montant { grid-area: montant; }
  .echeance__ouvrir > .echeance__part:empty { display: none; }

  /* --- lignes de versement et de participant : trois étages, pas trois
         colonnes écrasées ---------------------------------------------- */
  .ligne { flex-wrap: wrap; row-gap: 9px; padding: 12px; }
  .ligne__corps { flex: 1 1 62%; }
  .ligne__actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .ligne__detail { font-size: 0.8rem; line-height: 1.45; }

  /* --- en-tête de bloc : le titre garde sa ligne, le choix prend la sienne */
  .entete-bloc { flex-direction: column; align-items: stretch; gap: 11px; }
  .entete-bloc .segments { width: 100%; }
  .entete-bloc .segments__choix { flex: 1; text-align: center; }

  /* --- groupes d'échéance : la marque passe sous le titre ---------------- */
  .groupe__entete { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; }
  .groupe__entete > .pastille { grid-column: 2; justify-self: start; }

  /* --- jauge : assez de place pour le texte, sans creux au milieu -------- */
  .hero-jauge { min-height: 238px; }
  .jauge__contenu { padding: 18px; gap: 12px; }
  .montant--geant { font-size: clamp(2rem, 9vw, 2.7rem); }

  /* --- vitrine : titres à l'échelle de l'écran --------------------------- */
  .vitrine { padding-left: 16px; padding-right: 16px; padding-bottom: 60px; }
  .titre-xxl { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .vitrine__hero { padding: 12px 0 46px; }
  .vitrine__section { padding: 40px 0; }
  .vitrine__jauge { height: 262px; width: 100%; }
  .vitrine__appels .bouton { width: 100%; justify-content: center; }
  .vitrine__final { padding: 40px 20px; }
  .vitrine__question { padding: 2px 18px; }

  /* --- écran d'accès ------------------------------------------------------ */
  .acces { padding-left: 16px; padding-right: 16px; }
  .acces__carte { padding: 22px 18px; }
  .onglets__choix { font-size: 0.85rem; padding: 10px 8px; white-space: nowrap; }

  /* --- bandeau de confirmation ------------------------------------------- */
  .rappel-verif { padding: 14px 16px; }
  .rappel-verif .bouton { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .entete .bouton { padding: 8px 11px; font-size: 0.78rem; }
  .vitrine__appels .bouton { padding: 13px 18px; }
  .barre-outils--ouverte .outils__rares { grid-template-columns: 1fr; }
  .onglets__choix { font-size: 0.8rem; padding: 10px 4px; }
}

/* Sous 340 px le nom de marque ne tient plus à côté des accès : la goutte
   suffit à identifier le site, et la barre reste sur une seule ligne. */
@media (max-width: 340px) {
  .entete .marque__nom { display: none; }
  .entete { gap: 7px; }
}