/* L'aiguilleur du don (docs/SPEC-AIGUILLEUR-DON.md) : les portes, puis un écran par porte.
   Partagé par la page de don (dans .don, qui pose --accent à la couleur de la page) et par le panier « Régler mes
   dons » (dans .aig-hote, qui pose les couleurs du site). Jetons attendus : --accent, --sur-accent, --ink, --muted,
   --faint, --line, --gold. */
.aig-hote{ --accent:var(--navy, #1d3a8a); --sur-accent:#fff; }
.aig{ margin:0 0 20px; }
.aig[aria-busy="true"]{ opacity:.6; pointer-events:none; transition:opacity .15s; }
.aig-q{ font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:0 0 4px; }
.aig-aide{ font-size:13.5px; color:var(--muted); margin:4px 0 16px; line-height:1.5; }
.aig-portes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:0 0 6px; }
.aig-portes.trois{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.aig-porte{ display:flex; gap:12px; align-items:flex-start; text-align:left; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px;
  background:#f8fafc; color:var(--ink); font:inherit; cursor:pointer; text-decoration:none; min-width:0; transition:border-color .12s, transform .12s; }
.aig-porte:hover{ border-color:var(--accent); transform:translateY(-1px); }
.aig-porte:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.aig-porte.grande{ grid-column:1 / -1; background:color-mix(in srgb, var(--gold) 14%, #fff); border-color:color-mix(in srgb, var(--gold) 55%, #fff); }
.aig-porte.large{ grid-column:1 / -1; }
.aig-porte b{ display:block; font-size:15.5px; font-weight:700; }
.aig-porte small{ display:block; color:var(--muted); font-size:13px; margin-top:2px; line-height:1.4; }
.aig-porte > span:last-child{ min-width:0; }
.aig-porte-ico{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 10%, #fff); color:var(--accent); }
.aig-porte.grande .aig-porte-ico{ background:var(--accent); color:var(--sur-accent); }
.aig-ico{ width:20px; height:20px; }
.aig-tete{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.aig-tete .aig-q{ margin:0; }
.aig-seg{ display:inline-flex; background:#f1f5f9; border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; }
.aig-seg button{ border:0; background:none; padding:8px 14px; border-radius:999px; font:inherit; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; }
.aig-seg button.is-on{ background:#fff; color:var(--ink); box-shadow:0 1px 6px rgba(15,23,42,.12); }
.aig-seg button:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; }
.aig-retour{ background:none; border:0; padding:4px 0; font:inherit; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; }
.aig-retour:hover{ color:var(--ink); }
.aig-form{ display:flex; flex-direction:column; gap:14px; }
.aig-champ{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.aig-court{ max-width:240px; }
.aig-rangee{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.aig-etq{ font-size:13px; font-weight:600; color:var(--ink); }
.aig-facultatif{ font-weight:400; color:var(--faint); font-size:12px; }
.aig-sel{ width:100%; min-width:0; font-size:16px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:10px; background-color:#fff; color:var(--ink); }
.aig-sel:focus{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color:var(--accent); }
.aig-sel:disabled{ background-color:#f1f5f9; color:var(--faint); }
.is-err .aig-sel, .is-err .aig-autre{ border-color:#ef4444; }
.aig-contexte{ display:inline-flex; align-items:center; gap:6px; width:fit-content; max-width:100%; padding:7px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 10%, #fff); color:var(--ink); font-size:14px; font-weight:700; }
.aig-montants{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.aig-pastille{ position:relative; cursor:pointer; }
.aig-pastille input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.aig-pastille span{ display:block; padding:9px 14px; border:1.5px solid #cbd5e1; border-radius:999px; background:#fff; font-weight:700; font-size:14.5px; color:var(--ink); }
.aig-pastille.is-on span, .aig-pastille input:checked + span{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, #fff); }
.aig-pastille input:focus-visible + span{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.aig-autre{ display:flex; align-items:center; gap:6px; border:1.5px solid #cbd5e1; border-radius:999px; background:#fff; padding:0 14px; height:42px; width:140px; }
.aig-autre input{ border:0; background:none; width:100%; min-width:0; font:inherit; font-size:15px; font-weight:700; color:var(--ink); outline:0; }
.aig-autre:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.aig-autre span{ color:var(--muted); font-weight:700; }
.aig-deduction{ margin:2px 0 0; font-size:13px; color:#0f766e; font-weight:600; }
.aig-note{ margin:0; padding:12px 14px; border-radius:10px; background:#f8fafc; border:1px solid var(--line); font-size:14px; color:var(--ink); line-height:1.5; }
.aig-pied{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.aig-manque{ font-size:13px; color:var(--faint); }
.aig-ajouter{ padding:11px 18px; border:0; border-radius:999px; background:var(--accent); color:var(--sur-accent); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.aig-ajouter:disabled{ opacity:.45; cursor:not-allowed; }
.aig-ajouter:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.aig-lien{ background:none; border:0; padding:2px 0; font:inherit; font-size:13px; font-weight:700; color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.aig-lien.rouge{ color:#b42318; }
.aig-lien:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.aig-erreur{ margin:2px 0 0; font-size:13px; color:#b42318; font-weight:600; }
.aig-flash{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; margin:0 0 16px; font-size:14px; color:var(--ink);
  background:#ecfdf5; border:1px solid #a7f3d0; }
.aig-flash span{ flex:1; min-width:0; }
.aig-flash .aig-lien{ flex:none; }
.aig-flash.info{ background:color-mix(in srgb, var(--gold) 14%, #fff); border-color:color-mix(in srgb, var(--gold) 50%, #fff); }
.aig-flash.retire{ background:#f8fafc; border-color:var(--line); }
.aig-flash:focus{ outline:0; }
.aig-recap{ margin-top:20px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.aig-recap.is-err{ border-color:#ef4444; }
.aig-recap h3{ margin:0 0 10px; font-size:15px; font-weight:800; color:var(--ink); }
.aig-recap ul{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:12px; }
.aig-recap li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.aig-recap li.en-edition{ background:color-mix(in srgb, var(--gold) 14%, #fff); border-radius:10px; padding:8px 10px; margin:-8px -10px; }
.aig-quoi{ flex:1; min-width:0; }
.aig-quoi b{ display:block; color:var(--ink); }
.aig-quoi small{ display:block; color:var(--muted); font-size:12.5px; margin-top:1px; }
.aig-actions{ display:flex; gap:14px; margin-top:4px; }
.aig-m{ flex:none; font-weight:800; color:var(--ink); white-space:nowrap; }
.aig-total{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:10px; font-size:14px; color:var(--muted); }
.aig-total b{ font-size:20px; color:var(--ink); }
.aig-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.aig-js .aig-sansjs{ display:none; }
.aig-sansjs{ align-self:flex-start; }
@media (max-width:620px){
  .aig-portes, .aig-portes.trois, .aig-rangee{ grid-template-columns:minmax(0,1fr); }
  .aig-seg{ width:100%; } .aig-seg button{ flex:1; padding:8px 10px; }
  .aig-ajouter{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .aig-porte{ transition:none; } }

/* — AG.3 : la porte « Régler mes promesses en attente » et l'encadré des promesses enregistrées — */
.aig-dues{ display:flex; flex-direction:column; gap:14px; }
.aig-due-groupe{ border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; }
.aig-due-tete{ display:flex; justify-content:space-between; gap:10px; padding:10px 14px; background:#f8fafc; border-bottom:1px solid var(--line);
  font-size:13.5px; font-weight:700; color:var(--ink); }
.aig-due-tete small{ font-weight:600; color:var(--muted); }
.aig-due{ display:flex; gap:12px; align-items:flex-start; padding:11px 14px; font-size:14px; cursor:pointer; }
.aig-due + .aig-due{ border-top:1px solid var(--line); }
.aig-due input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.aig-due:has(input:focus-visible){ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:-3px; }
.aig-due .aig-m{ margin-left:auto; }
.aig-enreg{ padding:14px 16px; border:1.5px solid color-mix(in srgb, var(--gold) 55%, #fff); border-radius:14px; background:color-mix(in srgb, var(--gold) 10%, #fff); }
.aig-enreg h3{ margin:0 0 2px; font-size:15px; font-weight:800; color:var(--ink); }
.aig-enreg .aig-aide{ margin:2px 0 10px; }
.aig-enreg .aig-due{ padding:9px 0; }
.aig-enreg .aig-due + .aig-due{ border-top-color:color-mix(in srgb, var(--gold) 35%, #fff); }
.aig-enreg-pied{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.aig-ou{ display:flex; align-items:center; gap:12px; margin:2px 0; font-size:13px; font-weight:700; color:var(--faint); }
.aig-ou::before, .aig-ou::after{ content:""; flex:1; height:1px; background:var(--line); }
.aig-regler{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; }
.aig-regler b{ font-size:18px; color:var(--ink); }
.aig-commu{ display:inline-block; margin-top:2px; font-size:12px; font-weight:700; color:var(--accent); }

/* — Dans le panier « Régler mes dons » (AG.3) — */
.panier-aig{ margin:4px 0 16px; }
.panier-aig .aig{ margin:0; }
.panier-aig .aig-q{ font-size:18px; }

/* — Couleurs (2026-10-20, demande de l'utilisateur : « un peu plus de couleur ») —
   Chaque porte a sa teinte : rose pour un don, or pour une promesse faite à l'office, sarcelle pour « autre chose »,
   la couleur de la page pour les promesses en attente. Les choix actifs (onglet, montant) se remplissent de la
   couleur de la page, les étapes du formulaire sont repérées par une pastille, le récapitulatif porte un bandeau
   teinté. Contrastes du texte : 4,5:1 au moins (teintes 700 sur fond pâle, blanc sur teinte 600 et plus). */
.aig-porte{ --ton:var(--accent); --ton-fond:color-mix(in srgb, var(--ton) 7%, #fff); --ton-bord:color-mix(in srgb, var(--ton) 28%, #fff);
  background:var(--ton-fond); border-color:var(--ton-bord); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.aig-porte:hover{ border-color:var(--ton); box-shadow:0 8px 20px -10px color-mix(in srgb, var(--ton) 60%, transparent); }
.aig-porte b{ color:color-mix(in srgb, var(--ton) 70%, var(--ink)); }
.aig-porte-ico{ background:var(--ton); color:#fff; box-shadow:0 6px 14px -6px color-mix(in srgb, var(--ton) 80%, transparent); }
.aig-porte:focus-visible{ outline-color:color-mix(in srgb, var(--ton) 55%, transparent); }
.aig-ton-don{ --ton:#e11d48; }
.aig-ton-promesse{ --ton:#b45309; }
.aig-ton-autre{ --ton:#0f766e; }
.aig-porte.grande.aig-ton-regler{ --ton:var(--accent); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, #fff), color-mix(in srgb, var(--gold) 16%, #fff));
  border-color:color-mix(in srgb, var(--accent) 35%, #fff); }
.aig-porte.grande.aig-ton-regler .aig-porte-ico{ background:var(--accent); color:var(--sur-accent); }
.aig-parcours .aig-porte:nth-child(5n+1){ --ton:#1d4ed8; }
.aig-parcours .aig-porte:nth-child(5n+2){ --ton:#b45309; }
.aig-parcours .aig-porte:nth-child(5n+3){ --ton:#0f766e; }
.aig-parcours .aig-porte:nth-child(5n+4){ --ton:#be123c; }
.aig-parcours .aig-porte:nth-child(5n+5){ --ton:#6d28d9; }

/* Onglet actif « Faire un don / Régler une promesse » : rempli de la couleur de la page */
.aig-seg{ background:color-mix(in srgb, var(--accent) 7%, #fff); border-color:color-mix(in srgb, var(--accent) 20%, #fff); }
.aig-seg button.is-on{ background:var(--accent); color:var(--sur-accent); box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
.aig-seg button:not(.is-on):hover{ color:var(--accent); }
.aig-retour{ color:var(--accent); }

/* Étapes du formulaire : une pastille dorée devant chaque intitulé */
.aig-form > .aig-champ > .aig-etq, .aig-form > .aig-rangee > .aig-champ > .aig-etq{ display:flex; align-items:center; gap:8px; }
.aig-form > .aig-champ > .aig-etq::before, .aig-form > .aig-rangee > .aig-champ > .aig-etq::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.aig-contexte{ background:color-mix(in srgb, var(--accent) 12%, #fff); color:color-mix(in srgb, var(--accent) 75%, var(--ink)); border:1px solid color-mix(in srgb, var(--accent) 25%, #fff); }

/* Montants : pastille choisie remplie, survol teinté */
.aig-pastille span{ transition:border-color .12s, background-color .12s, color .12s; }
.aig-pastille:hover span{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, #fff); }
.aig-pastille.is-on span, .aig-pastille input:checked + span{ background:var(--accent); border-color:var(--accent); color:var(--sur-accent);
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--accent) 75%, transparent); }
.aig-deduction{ display:inline-flex; align-self:flex-start; padding:5px 10px; border-radius:999px; background:#ecfdf5; color:#047857; }

/* Bouton « Ajouter ce don » : relief de la couleur de la page */
.aig-ajouter{ background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.aig-ajouter:not(:disabled):hover{ filter:brightness(1.08); }

/* Récapitulatif : bandeau teinté, total en couleur */
.aig-recap{ border-color:color-mix(in srgb, var(--accent) 22%, #fff); box-shadow:0 10px 30px -18px color-mix(in srgb, var(--accent) 60%, transparent); overflow:hidden; }
.aig-recap h3{ margin:-16px -18px 12px; padding:11px 18px; background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 22%, #fff), color-mix(in srgb, var(--gold) 6%, #fff));
  border-bottom:1px solid color-mix(in srgb, var(--gold) 40%, #fff); color:var(--ink); }
.aig-recap li{ padding-left:12px; border-left:3px solid var(--gold); }
.aig-total b{ color:var(--accent); }

/* Promesses en attente et encadré des promesses enregistrées : en-têtes teintés */
.aig-due-tete{ background:color-mix(in srgb, var(--accent) 7%, #fff); color:color-mix(in srgb, var(--accent) 75%, var(--ink)); }

/* — Plusieurs dons et promesses (2026-10-20, demande de l'utilisateur : « on ne comprend pas bien que l'on peut y
   ajouter plusieurs choses ») —
   Avant la première ligne : un bandeau qui le dit, et « Ajouter … à la liste » sur le bouton. Dès qu'une ligne existe :
   « Ce que vous réglez » passe en tête (avec le nombre de lignes), puis une zone encadrée « Ajouter un autre don ou une
   promesse » ; le bouton final devient « Je règle mes 2 dons — 78 € ». */
.aig-astuce{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; padding:10px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--accent) 6%, #fff); color:color-mix(in srgb, var(--accent) 80%, var(--ink)); font-size:13.5px; line-height:1.45; }
.aig-astuce .aig-ico{ flex:none; margin-top:1px; color:var(--accent); }
.aig-plusieurs{ display:flex; gap:12px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 18%, #fff), color-mix(in srgb, var(--gold) 6%, #fff));
  border:1px solid color-mix(in srgb, var(--gold) 45%, #fff); font-size:14px; line-height:1.45; color:var(--ink); }
.aig-plusieurs .aig-ico{ flex:none; width:22px; height:22px; color:color-mix(in srgb, var(--gold) 70%, #000); }
.aig-ajout.avec-lignes{ margin-top:18px; padding:16px 16px 14px; border:2px dashed color-mix(in srgb, var(--accent) 30%, #fff); border-radius:16px;
  background:color-mix(in srgb, var(--accent) 3%, #fff); }
.aig-ajout.avec-lignes.en-modification{ border-style:solid; border-color:color-mix(in srgb, var(--gold) 60%, #fff); background:color-mix(in srgb, var(--gold) 6%, #fff); }
.aig-ajout-tete{ display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; }
.aig-ajout-tete b{ display:block; font-size:16px; color:var(--ink); }
.aig-ajout-tete small{ display:block; margin-top:2px; font-size:13px; color:var(--muted); line-height:1.4; }
.aig-ajout-ico{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--sur-accent);
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.aig-ajout-ico .aig-ico{ width:18px; height:18px; }
.aig-ajouter{ display:inline-flex; align-items:center; gap:8px; }
.aig-ico-bouton{ width:18px; height:18px; flex:none; }
.aig-un-seul{ margin:4px 0 0; font-size:12.5px; color:var(--muted); text-align:right; }
.aig-compte{ display:inline-block; margin-left:6px; padding:1px 9px; border-radius:999px; background:var(--accent); color:var(--sur-accent);
  font-size:12px; font-weight:700; vertical-align:2px; }
/* En tête de l'écran d'ajout, le récapitulatif ouvre la page plutôt que de la clore. */
.aig > .aig-recap:not(:last-child){ margin:0 0 4px; }
.aig-recap li{ align-items:center; }
.aig-ligne-ico{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; }
.aig-ligne-ico .aig-ico{ width:16px; height:16px; }
.aig-ligne-ico.est-don{ background:#e11d48; }
.aig-ligne-ico.est-promesse{ background:#b45309; }
.aig-recap li{ padding-left:0; border-left:0; }
@media (max-width:620px){
  .aig-un-seul{ text-align:left; }
  .aig-ajout.avec-lignes{ padding:14px 12px 12px; }
}

/* Le gros bouton « Ajouter un autre don ou une promesse » (2026-10-20) : la zone d'ajout reste repliée derrière lui après
   chaque ajout ; un clic l'ouvre sur place. */
.aig-ajout-autre{ display:flex; align-items:center; gap:14px; width:100%; margin:16px 0 0; padding:16px 18px; text-align:left; cursor:pointer; font:inherit;
  border:2px dashed color-mix(in srgb, var(--accent) 40%, #fff); border-radius:16px; background:color-mix(in srgb, var(--accent) 5%, #fff); color:var(--ink);
  transition:border-color .12s, background-color .12s, transform .12s; }
.aig-ajout-autre:hover{ border-style:solid; border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, #fff); transform:translateY(-1px); }
.aig-ajout-autre:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.aig-ajout-autre b{ display:block; font-size:17px; color:color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.aig-ajout-autre small{ display:block; margin-top:2px; font-size:13px; color:var(--muted); line-height:1.4; }
.aig-ajout-autre .aig-ajout-ico{ width:42px; height:42px; }
.aig-ajout-autre .aig-ajout-ico .aig-ico{ width:22px; height:22px; }
.aig-ajout[hidden], .aig-ajout-autre[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .aig-ajout-autre{ transition:none; } }