/* ═══════════════════════════════════════════════════════════════════════
   CHUCHELLAS — FEUILLE DE STYLE
   ═══════════════════════════════════════════════════════════════════════
   Tout l'habillage de l'appli. Sorti de index.html en v0.11 pour que
   chaque fichier reste court et lisible.

   La DIRECTION ARTISTIQUE (couleurs de l'affiche) est centralisée dans
   le bloc « :root » juste en dessous : pour retoucher une teinte
   PARTOUT dans l'appli, il suffit de la changer à cet endroit.
   ═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   CHARTE (DA de l'affiche) — toutes les couleurs sont ici.
   Pour retoucher une teinte PARTOUT, changez-la à cet endroit.
   ════════════════════════════════════════════════════════════════ */
:root {
  --papier: #FBF3E7;        /* fond crème aquarelle */
  --papier-halo: #F3DFC8;   /* halo pêche/beige */
  --surface: #FFFCF6;       /* cartes (crème très clair) */
  --encre: #362518;         /* texte principal : brun chaud */
  --encre-douce: #7A6553;   /* texte secondaire */
  --primaire: #CB3E1D;      /* rouge-orangé tulipe (action) */
  --primaire-clair: #E96B3A;/* orange pétale (dégradés) */
  --primaire-voile: #F7E1D4;/* fond très pâle orangé */
  --vert: #5E7B39;          /* vert de la tige */
  --vert-voile: #E7EBD9;    /* fond très pâle vert */
  --bordure: #EAD8C1;       /* bordures chaudes */
  --danger: #B23A2E;        /* rouge d'erreur */
  --succes: #4E7A3A;        /* vert de succès */
  --rayon: 16px;
  --ombre: 0 6px 22px rgba(120, 60, 30, 0.10);
  --hauteur-tabbar: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Sécurité anti-débordement horizontal (v0.8.1) : rien ne doit
   dépasser à droite, même un champ récalcitrant. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--encre);
  background-color: var(--papier);
  /* Fond aquarelle : halos superposés évoquant la tache de peinture */
  background-image:
    radial-gradient(60% 45% at 78% 62%, rgba(233, 107, 58, 0.28), transparent 70%),
    radial-gradient(55% 40% at 88% 82%, rgba(203, 62, 29, 0.16), transparent 72%),
    radial-gradient(50% 45% at 12% 20%, rgba(243, 223, 200, 0.55), transparent 70%);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* ─── ZONE NON CONNECTÉE : centrée avec le grand logo ─── */
#zone-auth {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
#zone-auth .wrap { width: 100%; max-width: 380px; text-align: center; }
#zone-auth img.logo {
  width: 100%; max-width: 250px; height: auto; margin-bottom: 20px;
  filter: drop-shadow(0 6px 14px rgba(120, 60, 30, 0.14));
}

/* Quand on est connecté : on masque l'auth, on montre l'appli */
#app { display: none; }
body.connecte #zone-auth { display: none; }
body.connecte #app { display: block; }

/* "Écrans" d'auth : on montre/cache */
.ecran { display: none; }
.ecran.actif { display: block; animation: apparition 0.4s ease-out; }
@keyframes apparition {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ecran.actif, .vue.actif { animation: none; }
  * { transition: none !important; }
}

/* ─── Formulaires (communs) ─── */
form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
label { font-size: 0.85rem; font-weight: 700; color: var(--encre-douce); }
label small { font-weight: 400; }

input, select, textarea {
  width: 100%;
  min-width: 0;                 /* évite qu'un champ force une largeur trop grande */
  max-width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;              /* ≥ 16px : évite le zoom auto d'iOS */
  border: 1.5px solid var(--bordure);
  border-radius: 12px;
  font-family: inherit;
  background: var(--surface);
  color: var(--encre);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Sur iPhone, le champ "date" a une largeur intrinsèque qui débordait :
   on neutralise l'apparence native pour qu'il tienne dans son cadre. */
input[type="date"] { -webkit-appearance: none; appearance: none; }
input::placeholder, textarea::placeholder { color: #B7A594; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaire);
  box-shadow: 0 0 0 3px rgba(203, 62, 29, 0.15);
}
textarea { resize: vertical; min-height: 80px; }
input[type="file"] { display: none; } /* déclenché par un bouton/lien */

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux-colonnes > div { display: flex; flex-direction: column; gap: 12px; }

button[type="submit"] {
  min-height: 50px;
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primaire-clair), var(--primaire));
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(203, 62, 29, 0.28);
  transition: transform 0.12s, box-shadow 0.15s;
}
button[type="submit"]:active { transform: scale(0.98); }
button[type="submit"]:disabled { opacity: 0.55; cursor: wait; }

.form-msg {
  font-size: 0.85rem; color: var(--danger); margin-top: 10px;
  min-height: 1.2em; text-align: center; font-weight: 600;
}
.form-msg.succes { color: var(--succes); }

.bascule { margin-top: 18px; font-size: 0.9rem; color: var(--encre-douce); text-align: center; }
.bascule a { color: var(--primaire); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bascule + .bascule { margin-top: 10px; }

/* ─── Cartes/blocs ─── */
.bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px;
  text-align: left;
  margin-bottom: 16px;
  box-shadow: var(--ombre);
}
.bloc h2 {
  font-family: 'Caveat', cursive; font-size: 1.5rem;
  font-weight: 700; color: var(--encre); margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════════
   APPLI À ONGLETS (v0.7)
   ════════════════════════════════════════════════════════════════ */
/* Barre du haut : nom de l'appli + bouton photo (Mon profil) */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  background: rgba(251, 243, 231, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.topbar .marque {
  font-family: 'Caveat', cursive; font-size: 1.7rem;
  font-weight: 700; color: var(--primaire);
}
.avatar-top {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--primaire-voile); overflow: hidden;
  cursor: pointer; background: var(--vert); color: #fff;
  font-weight: 800; font-family: inherit; font-size: 0.95rem;
  display: grid; place-items: center; padding: 0;
}
.avatar-top img { width: 100%; height: 100%; object-fit: cover; }

/* Zone centrale : les vues */
.contenu {
  max-width: 480px; margin: 0 auto;
  padding: 18px 18px calc(var(--hauteur-tabbar) + 20px + env(safe-area-inset-bottom));
}
.vue { display: none; }
.vue.actif { display: block; animation: apparition 0.35s ease-out; }

/* Barre d'onglets du bas (extensible : max ~5 onglets) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center;
  background: rgba(255, 252, 246, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-btn {
  flex: 1; max-width: 130px; border: none; background: none;
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; min-height: var(--hauteur-tabbar);
  color: var(--encre-douce); font-size: 0.72rem; font-weight: 700;
}
.tab-btn svg { width: 24px; height: 24px; }
.tab-btn.actif { color: var(--primaire); }

/* Bonjour de l'accueil */
.greeting { font-family: 'Caveat', cursive; font-size: 2rem; color: var(--primaire); line-height: 1.1; }
/* Pastille de fonction (rôle) */
.pastille-role {
  display: inline-block; font-size: 0.78rem; font-weight: 800;
  padding: 4px 12px; border-radius: 999px;
}
.role-chef { background: var(--primaire-voile); color: var(--primaire); }
.role-bureau { background: #F3E3D0; color: #9A5A2A; }
.role-chanteuse { background: var(--vert-voile); color: var(--vert); }

/* ─── COMMUNAUTÉ : liste des membres ─── */
#liste-membres { display: flex; flex-direction: column; gap: 10px; }
.membre-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: 14px;
  padding: 12px; cursor: pointer; font-family: inherit;
  box-shadow: var(--ombre); transition: transform 0.12s;
}
.membre-ligne:active { transform: scale(0.99); }
.membre-ligne .infos { flex: 1; min-width: 0; }
.membre-ligne .infos b { color: var(--encre); font-size: 0.98rem; display: block; }
.membre-ligne .infos span { color: var(--encre-douce); font-size: 0.82rem; }

/* Pastille photo/initiales (réutilisée partout) */
.av {
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-48 { width: 48px; height: 48px; font-size: 1rem; }
.av-110 { width: 110px; height: 110px; font-size: 2.2rem; }
.av-74 { width: 74px; height: 74px; font-size: 1.5rem; }

/* ─── PROFIL D'UNE MEMBRE (lecture) ─── */
.profil-entete { text-align: center; margin-bottom: 18px; }
.profil-entete .av { margin: 0 auto 12px; box-shadow: var(--ombre); }
.profil-nom { font-family: 'Caveat', cursive; font-size: 2.1rem; color: var(--encre); line-height: 1.1; }
.profil-pseudo { color: var(--encre-douce); font-weight: 700; margin-top: 2px; }
.info-ligne {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--bordure);
}
.info-ligne:first-child { border-top: none; }
.info-ligne .cle { color: var(--encre-douce); font-weight: 700; font-size: 0.9rem; }
.info-ligne .val { color: var(--encre); font-weight: 700; text-align: right; }

/* Bouton retour (profil membre) */
.btn-retour {
  background: none; border: none; font-family: inherit;
  color: var(--primaire); font-weight: 800; font-size: 0.95rem;
  cursor: pointer; margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
}

/* Édition de la photo dans Mon profil */
.photo-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.lien-action {
  color: var(--primaire); font-weight: 700; text-decoration: underline;
  cursor: pointer; font-size: 0.9rem; background: none; border: none;
  font-family: inherit; padding: 0; text-align: left;
}
.lien-action.discret { color: var(--encre-douce); }

.btn-secondaire {
  min-height: 46px; padding: 0 18px;
  border: 1.5px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--encre-douce);
  font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer;
  width: 100%;
}
.btn-secondaire:active { background: var(--papier-halo); }

/* ─── Bandeaux (notifications / installation) ─── */
#notif-banner, #install-banner {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 18px;
  display: none; z-index: 40;
  box-shadow: 0 8px 30px rgba(120, 60, 30, 0.18);
}
#notif-banner { text-align: center; }
#install-banner { text-align: left; }
#notif-banner.visible, #install-banner.visible { display: block; }
#notif-banner p { font-size: 0.92rem; margin-bottom: 12px; color: var(--encre); }
#notif-banner button {
  min-height: 46px; padding: 0 22px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--primaire-clair), var(--primaire));
  color: #fff; font-size: 0.95rem; font-weight: 800; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 14px rgba(203, 62, 29, 0.28);
}
#install-banner p { font-size: 0.88rem; color: var(--encre); line-height: 1.55; }
#install-banner p + p { margin-top: 8px; }

/* ─── ONGLET ADMIN : sous-navigation (Adhésions / Concerts / AG) ─── */
.sous-nav {
  display: flex; gap: 6px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 12px; padding: 4px;
}
.sous-nav-btn {
  flex: 1; min-width: 0; border: none; background: none;
  font-family: inherit; font-weight: 800; font-size: 0.8rem;
  color: var(--encre-douce); padding: 9px 2px; border-radius: 9px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sous-nav-btn.actif { background: var(--primaire); color: #fff; }

/* Résumé "X à jour · Y pas à jour" */
.resume { font-size: 0.9rem; font-weight: 700; color: var(--encre-douce);
          margin-bottom: 12px; padding: 0 2px; }
.pastille-statut { font-weight: 800; }

/* ─── Liste repliable des adhésions (une membre = une ligne) ─── */
.adh {
  border: 1px solid var(--bordure); border-radius: 12px;
  margin-bottom: 8px; background: var(--surface); overflow: hidden;
}
.adh-tete {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: none; font-family: inherit; cursor: pointer;
  padding: 10px 12px; text-align: left;
}
.adh-nom { flex: 1; min-width: 0; }
.adh-nom b { display: block; color: var(--encre); font-size: 0.95rem;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adh-nom span { font-size: 0.78rem; color: var(--encre-douce);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chevron { color: var(--encre-douce); font-size: 0.9rem; transition: transform 0.2s; flex-shrink: 0; }
.adh.ouvert .chevron { transform: rotate(180deg); }
.adh-panneau { display: none; padding: 4px 12px 14px; }
.adh.ouvert .adh-panneau { display: block; }
.adh-actions { display: flex; gap: 8px; margin-top: 4px; }
.adh-actions .btn-secondaire { flex: 1; min-width: 0; padding: 0 10px; }
.av-40 { width: 40px; height: 40px; font-size: 0.85rem; }

#install-fermer {
  margin-top: 12px; min-height: 46px; width: 100%;
  border: 1.5px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--encre-douce);
  font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer;
}

/* ─── DOCUMENTS : comptes rendus et modèles (v0.12) ───────────────────
   Utilisés à deux endroits : l'onglet Admin → Doc (la secrétaire) et le
   bloc « Comptes rendus » de l'accueil (toutes les membres). */

/* Une ligne de document : icône · titre et date · bouton Ouvrir · ✕ */
.doc-ligne {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 10px;
}
.doc-ligne:last-child { margin-bottom: 0; }
.doc-icone { font-size: 1.3rem; flex: 0 0 auto; }
/* min-width:0 est indispensable : sans lui, un titre long refuse de se
   couper et fait déborder toute la ligne sur le côté (déjà corrigé au
   même endroit en v0.8.1 pour les adhésions). */
.doc-infos { flex: 1; min-width: 0; }
.doc-infos b {
  display: block; font-size: 0.94rem; color: var(--encre);
  overflow-wrap: anywhere;
}
.doc-infos span { font-size: 0.78rem; color: var(--encre-douce); }

/* Bouton d'ouverture d'un document. Volontairement plus discret que les
   boutons d'action principaux (dégradé orange) : sur l'accueil, il ne
   doit pas voler la vedette au contenu de l'annonce. */
.btn-document {
  font-family: inherit; font-size: 0.85rem; font-weight: 800;
  color: var(--primaire); background: var(--primaire-voile);
  border: 1px solid var(--bordure); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; flex: 0 0 auto;
  width: auto; margin: 10px 0; transition: transform 0.12s;
}
.btn-document:active { transform: scale(0.97); }
.btn-document:disabled { opacity: 0.55; cursor: default; }
/* Dans une ligne de document, le bouton est déjà entouré : pas de marge */
.btn-document.compact { margin-top: 0; padding: 7px 14px; }

/* Bouton « Choisir un fichier ».
   Le vrai champ fichier reste caché (règle input[type="file"] plus haut
   dans cette feuille) : chaque navigateur le dessine à sa façon, et le
   résultat jure avec le reste. C'est ce <label> qui l'ouvre — un
   label lié par « for » déclenche le champ tout seul, sans JavaScript.
   Même principe que le bouton de la photo de profil. */
.btn-choisir-fichier {
  display: inline-block; width: auto;
  font-family: inherit; font-size: 0.9rem; font-weight: 800;
  color: var(--encre-douce); background: var(--surface);
  border: 1.5px dashed var(--bordure); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 12px; cursor: pointer;
}
.btn-choisir-fichier:active { transform: scale(0.98); }

/* Confirmation du fichier choisi (caché tant qu'il n'y en a pas) */
.fichier-choisi {
  display: none; font-size: 0.85rem; font-weight: 700;
  color: var(--vert); margin: -4px 0 14px; overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════
   STATUT DE COTISATION SUR L'ACCUEIL (v0.13)
   ═══════════════════════════════════════════════════════════════════
   Deux états, deux couleurs, et surtout : il est TOUJOURS là. Avant, il
   disparaissait quand la cotisation était payée et la présidente l'a pris
   pour une panne. Orange = il reste quelque chose à faire ; vert = tout
   va bien. La saison est écrite en plus petit, en second plan.        */
.statut-cotisation {
  border: 1.5px solid var(--primaire);
  background: var(--primaire-voile);
  padding: 14px 16px;
}
.statut-cotisation p {
  font-size: 0.92rem; font-weight: 800; color: var(--primaire);
}
.statut-cotisation.a-jour {
  border-color: var(--vert);
  background: var(--vert-voile);
}
.statut-cotisation.a-jour p { color: var(--vert); }
/* La saison : présente, mais elle ne doit pas voler la vedette */
.statut-saison { font-weight: 700; opacity: 0.75; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   CASE À COCHER (v0.13 — l'attestation CE)
   ═══════════════════════════════════════════════════════════════════
   ⚠ PIÈGE MAISON, déjà rencontré en v0.12 avec la photo de profil :
   la feuille contient `input[type="file"] { display:none }`. Ici c'est
   une case à cocher, donc aucun conflit — mais on garde le même réflexe
   qu'ailleurs : la case est une VRAIE case (accessible, cochable au
   clavier), et c'est le <label for> qui lui donne une zone de clic
   confortable au doigt.                                              */
.case-a-cocher {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 14px;
}
.case-a-cocher input[type="checkbox"] {
  width: 22px; height: 22px; margin-top: 1px; flex: none;
  accent-color: var(--primaire); cursor: pointer;
}
.case-a-cocher label {
  font-size: 0.9rem; font-weight: 700; color: var(--encre);
  cursor: pointer; margin: 0;
}
.case-a-cocher label small {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--encre-douce); margin-top: 2px;
}
/* La ligne d'état sous la case. Deux couleurs, et ce n'est pas
   décoratif : vert = c'est fait (l'attestation est partie), orange =
   c'est en attente chez la trésorière. Tout vert, on croirait que
   l'attestation est déjà arrivée. */
.attestation-etat {
  font-size: 0.82rem; font-weight: 700; border-radius: 10px;
  padding: 8px 10px; margin: -6px 0 14px;
  color: var(--primaire); background: var(--primaire-voile);
}
.attestation-etat.envoyee {
  color: var(--vert); background: var(--vert-voile);
}

/* ═══════════════════════════════════════════════════════════════════
   L'ONGLET COMPTES (v0.13) — les trois chiffres en tête
   ═══════════════════════════════════════════════════════════════════ */
.comptes-resume {
  display: flex; gap: 8px; text-align: center; padding: 16px 10px;
}
.comptes-resume > div { flex: 1; min-width: 0; }
.comptes-etiquette {
  display: block; font-size: 0.76rem; font-weight: 800;
  color: var(--encre-douce);
}
.comptes-chiffre {
  display: block; font-family: 'Caveat', cursive;
  font-size: 1.8rem; font-weight: 700; color: var(--primaire);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════
   LA BOÎTE DE DIALOGUE (v0.13)
   ═══════════════════════════════════════════════════════════════════
   Remplace confirm() et alert(), dont l'apparence est imposée par le
   téléphone. z-index au-dessus de tout le reste (la tabbar est à 20,
   les bandeaux à 40) : une question doit passer devant.              */
.dialogue-fond {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(54, 37, 24, 0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* `hidden` doit l'emporter sur le `display:flex` ci-dessus */
.dialogue-fond[hidden] { display: none; }
.dialogue {
  width: 100%; max-width: 380px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 22px;
  box-shadow: 0 12px 40px rgba(120, 60, 30, 0.25);
}
.dialogue h2 {
  font-family: 'Caveat', cursive; font-size: 1.6rem; font-weight: 700;
  color: var(--primaire); margin-bottom: 8px; line-height: 1.15;
}
.dialogue p {
  font-size: 0.9rem; color: var(--encre-douce); line-height: 1.5;
}
/* Vide quand la boîte ne pose qu'une question courte : pas de blanc inutile */
.dialogue p:empty { display: none; }
.dialogue-actions {
  display: flex; gap: 10px; margin-top: 20px;
}
.dialogue-actions button { flex: 1; }
/* Le bouton de confirmation reprend le bouton principal de l'appli */
#dialogue-ok {
  min-height: 46px; padding: 0 18px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--primaire-clair), var(--primaire));
  color: #fff; font-size: 0.9rem; font-weight: 800;
  font-family: inherit; cursor: pointer;
}
/* Rouge franc quand le geste efface quelque chose */
#dialogue-ok.danger {
  background: linear-gradient(135deg, #c0574a, var(--danger));
}