/* communistes2027.fr v2 — charte v2 (fond blanc, fluo, trames). Base : maquette accueil-v2.html */
  /* Choix délibéré d'un seul thème : affiche imprimée sur papier blanc. */
  :root {
    --papier: #ffffff;
    --encre: #0b0b0c;
    --encre-douce: #3a3a3f;
    --jaune: #f5ff3b;
    --rose: #ff2d8a;
    --rose-sombre: #d4136a;
    --gris-trame: #e9e9ec;
    --display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --texte: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html { background: var(--papier); }
  body {
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 17px;
    line-height: 1.6;
    padding-inline: 16px;
    overflow-x: hidden;
  }

  /* Trames d'imprimerie : gros points de demi-teinte, fondus par un masque. */
  .trame { position: absolute; pointer-events: none; z-index: 0; }
  .trame--rose {
    background-image: radial-gradient(circle, var(--rose) 0 30%, transparent 32%), radial-gradient(circle, var(--rose) 0 30%, transparent 32%);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, rgba(0,0,0,.85) 30%, transparent 70%);
            mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, rgba(0,0,0,.85) 30%, transparent 70%);
  }
  .trame--noire {
    background-image: radial-gradient(circle, var(--encre) 0 28%, transparent 30%), radial-gradient(circle, var(--encre) 0 28%, transparent 30%);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
    -webkit-mask-image: linear-gradient(20deg, #000 0%, rgba(0,0,0,.6) 25%, transparent 55%);
            mask-image: linear-gradient(20deg, #000 0%, rgba(0,0,0,.6) 25%, transparent 55%);
  }
  .trame--jaune {
    background-image: radial-gradient(circle, var(--jaune) 0 32%, transparent 34%), radial-gradient(circle, var(--jaune) 0 32%, transparent 34%);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
  }

  /* ---------- Héros ---------- */
  .hero { position: relative; max-width: 1180px; margin: 0 auto; padding-block: 56px 40px; }
  .hero .trame--rose { top: -20px; right: -16px; width: min(560px, 80vw); height: 460px; }
  .hero .trame--noire { bottom: -30px; left: -16px; width: min(420px, 70vw); height: 300px; }
  .hero__inner { position: relative; z-index: 1; display: grid; gap: 28px; justify-items: start; }

  .titre {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    line-height: .98; letter-spacing: -.01em; margin: 0;
    font-size: clamp(34px, 7vw, 92px);
  }
  .titre span { display: block; }
  .surligne {
    display: inline;
    background: linear-gradient(transparent 12%, var(--jaune) 12%, var(--jaune) 92%, transparent 92%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding-inline: .08em;
  }
  .surligne--rose {
    background: linear-gradient(transparent 68%, var(--rose) 68%, var(--rose) 100%);
  }
  .pave {
    display: inline-block; margin-top: .12em; max-width: 100%;
    background: var(--jaune); color: var(--encre);
    padding: .06em .22em .02em;
    transform: rotate(-2.6deg);
    box-shadow: .09em .09em 0 var(--rose);
    border: 3px solid var(--encre);
  }

  .sous-titre {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(22px, 3.4vw, 40px); line-height: 1.1; margin: 8px 0 0;
    background: var(--rose); color: var(--papier);
    padding: .18em .5em;
    border: 3px solid var(--encre);
    text-wrap: balance;
  }
  .sous-titre .note { font-family: var(--texte); font-weight: 700; font-size: .38em; letter-spacing: .08em; display: block; opacity: .9; margin-top: .3em; }

  .hero__bas { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 10px; }
  .compteur {
    display: inline-flex; align-items: baseline; gap: 12px;
    border: 3px solid var(--encre); background: var(--papier);
    padding: 10px 22px; border-radius: 999px;
    box-shadow: 5px 5px 0 var(--encre);
  }
  .compteur b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
  .compteur span { font-weight: 700; }
  .bouton {
    font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 18px; letter-spacing: .02em;
    background: var(--encre); color: var(--jaune); text-decoration: none;
    padding: 14px 26px; border: 3px solid var(--encre); cursor: pointer;
    box-shadow: 5px 5px 0 var(--rose); transition: transform .12s, box-shadow .12s;
  }
  .bouton:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--rose); }
  .bouton:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .partage a:focus-visible {
    outline: 3px solid var(--rose); outline-offset: 3px;
  }

  /* ---------- Bande slogan ---------- */
  .slogan {
    margin-inline: -16px; background: var(--encre); color: var(--papier);
    overflow: hidden; border-block: 4px solid var(--jaune);
  }
  .slogan__piste {
    display: flex; width: max-content;
    animation: defile 20s linear infinite;
  }
  .slogan__piste span {
    flex: none; white-space: nowrap; padding: 14px 0;
    font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 3vw, 30px);
  }
  .slogan em { font-style: normal; color: var(--jaune); }
  .slogan i { font-style: normal; color: var(--rose); padding-inline: .6em; }
  @keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .slogan__piste { animation: none; } .bouton { transition: none; } }

  /* ---------- Corps : texte + formulaire ---------- */
  .corps {
    max-width: 1180px; margin: 0 auto; padding-block: 64px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: start;
  }
  @media (max-width: 900px) { .corps { grid-template-columns: 1fr; gap: 40px; } }

  .appel h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(26px, 3.6vw, 40px); line-height: 1.05; margin: 0 0 28px; text-wrap: balance;
  }
  .appel p { max-width: 65ch; margin: 0 0 1.1em; color: var(--encre-douce); }
  .appel p:first-of-type::first-line { font-weight: 700; color: var(--encre); }
  .appel .fort {
    color: var(--encre); font-weight: 700; font-size: 1.12em; line-height: 1.45;
    border-left: 8px solid var(--rose); padding-left: 18px; margin-block: 1.6em;
  }
  .appel .fort mark { background: var(--jaune); color: inherit; padding-inline: .1em; }
  .appel .final {
    font-family: var(--display); text-transform: uppercase; color: var(--encre);
    font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; max-width: 30ch;
  }

  .carte-signer {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px);
    border: 4px solid var(--encre); background: var(--papier);
    box-shadow: 10px 10px 0 var(--rose);
    padding: 26px 24px 24px;
  }
  .carte-signer::before {
    content: ""; position: absolute; inset: -4px -4px auto auto; width: 120px; height: 120px; z-index: -1;
    background-image: radial-gradient(circle, var(--jaune) 0 32%, transparent 34%), radial-gradient(circle, var(--jaune) 0 32%, transparent 34%); background-size: 20px 20px; background-position: 0 0, 10px 10px;
    transform: translate(34px, -34px);
  }
  .carte-signer h3 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 28px; line-height: 1;
    margin: 0 0 18px;
  }
  .carte-signer h3 .surligne { padding-inline: .1em; }
  form { display: grid; gap: 12px; }
  .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 420px) { .ligne { grid-template-columns: 1fr; } }
  label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
  label small { font-weight: 500; color: var(--encre-douce); }
  input[type=text], input[type=email], select, textarea {
    font: inherit; font-size: 16px; font-weight: 500; color: var(--encre);
    border: 2px solid var(--encre); background: var(--papier); padding: 10px 12px; border-radius: 0; width: 100%;
  }
  textarea { min-height: 80px; resize: vertical; }
  .case { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; line-height: 1.4; }
  .case input { width: 20px; height: 20px; accent-color: var(--rose); flex: none; margin-top: 1px; }
  .captcha {
    border: 2px dashed var(--encre-douce); padding: 10px 12px; font-size: 13px; color: var(--encre-douce);
  }
  .carte-signer .bouton { width: 100%; font-size: 20px; padding-block: 16px; }
  .mention { font-size: 12px; color: var(--encre-douce); margin: 4px 0 0; line-height: 1.45; }

  .merci h3 { margin-bottom: 10px; }
  .merci p { margin: 0 0 14px; font-size: 15px; }
  .etape {
    font-family: var(--texte); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    display: inline-block; background: var(--encre); color: var(--jaune); padding: 3px 8px; margin-bottom: 10px;
  }
  fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
  legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; }

  /* ---------- Premiers signataires ---------- */
  .signataires { position: relative; margin-inline: -16px; padding: 72px 16px; background: var(--encre); color: var(--papier); overflow: hidden; }
  .signataires .trame--jaune { inset: 0 auto 0 0; width: 100%; opacity: .95;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 18%, transparent 40%);
            mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 18%, transparent 40%); }
  .signataires__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
  .signataires h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 5vw, 56px);
    line-height: 1; margin: 0 0 8px;
  }
  .signataires h2 .pave { color: var(--encre); font-size: .8em; }
  .signataires .chapo { margin: 18px 0 34px; max-width: 60ch; color: #cfcfd4; }
  .grille {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0;
    border-top: 2px solid #34343a;
  }
  .grille li { padding: 14px 16px 14px 0; border-bottom: 2px solid #34343a; display: grid; gap: 2px; }
  .grille b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 18px; letter-spacing: .01em; }
  .grille span { font-size: 14px; color: #bdbdc4; }
  .exemple { font-size: 12px; color: var(--jaune); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-top: 18px; }

  /* ---------- Départements + partage ---------- */
  .bas { max-width: 1180px; margin: 0 auto; padding-block: 64px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; }
  .bas h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1.05; margin: 0 0 18px; }
  .depts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .depts li { display: grid; grid-template-columns: 11ch 1fr 5ch; gap: 12px; align-items: center; font-weight: 700; font-size: 15px; }
  .depts .barre { height: 18px; background: var(--gris-trame); position: relative; }
  .depts .barre i { position: absolute; inset: 0 auto 0 0; background: var(--rose); }
  .depts li:first-child .barre i { background: var(--encre); }
  .depts em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
  .partage { display: flex; flex-wrap: wrap; gap: 10px; }
  .partage a {
    font-weight: 700; text-decoration: none; color: var(--encre);
    border: 2px solid var(--encre); padding: 9px 14px; background: var(--papier);
    box-shadow: 3px 3px 0 var(--encre);
  }
  .partage a:nth-child(odd) { background: var(--jaune); }
  .message-partage {
    margin-top: 18px; border: 2px dashed var(--encre); padding: 12px 14px; font-size: 15px; background: #fff;
  }

  footer.pied {
    max-width: 1180px; margin: 0 auto; padding-block: 28px 40px; border-top: 4px solid var(--encre);
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--encre-douce);
  }
  footer.pied b { font-family: var(--display); font-weight: 400; color: var(--encre); text-transform: uppercase; }

  /* ---------- Ajouts site v2 ---------- */
  a { color: inherit; }
  .nowrap { white-space: nowrap; }
  .piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .alerte { border: 3px solid var(--encre); background: var(--jaune); padding: 10px 12px; font-size: 15px; margin-bottom: 14px; }
  .carte-signer h3.petit { font-size: 20px; margin: 22px 0 12px; }
  .carte-signer .partage a { padding: 8px 11px; font-size: 14px; }
  .carte-signer .message-partage { font-size: 14px; }
  .carte-signer form .bouton { width: 100%; }
  .g-recaptcha { min-height: 78px; }
  .bouton--clair { background: var(--jaune); color: var(--encre); box-shadow: 5px 5px 0 var(--rose); display: inline-block; }
  .tous { margin-top: 30px; }
  .lien-fort { font-weight: 700; border-bottom: 3px solid var(--rose); text-decoration: none; }
  .depts .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .depts li { grid-template-columns: 14ch 1fr 5ch; }
  .partage a:hover { background: var(--rose); color: var(--papier); }
  footer.pied a { color: inherit; }

  .hero--court { padding-block: 40px 28px; }
  .titre--moyen { font-size: clamp(34px, 6vw, 72px); }
  .retour { margin: 0; font-weight: 700; }
  .retour a { text-decoration: none; border-bottom: 2px solid var(--rose); }
  .page { max-width: 1180px; margin: 0 auto; padding-block: 40px 64px; }
  .page--etroite { max-width: 640px; }
  .chapo-page { max-width: 70ch; color: var(--encre-douce); }
  .h2-page { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.05; margin: 48px 0 18px; }
  .liste-noms { list-style: none; margin: 24px 0 0; padding: 0; columns: 16rem; column-gap: 32px; }
  .liste-noms li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--gris-trame); }
  .liste-noms .qualite { display: block; font-size: 14px; color: var(--encre-douce); }
  .depts-tous { list-style: none; margin: 0; padding: 0; columns: 18rem; column-gap: 32px; }
  .depts-tous li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--gris-trame); }
  .depts-tous em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
  .carte-seule { position: relative; top: 0; margin-top: 24px; }
  .texte-page p { max-width: 65ch; }

  /* Étoile (favicon, image de partage, en-tête) */
  .etoile--hero { position: absolute; z-index: 2; top: 40px; right: max(0px, calc((100% - 1180px) / 2)); width: clamp(70px, 12vw, 150px); height: auto; transform: rotate(-8deg); }
  @media (max-width: 700px) { .etoile--hero { top: 12px; right: 4px; } }
  /* Premiers signataires : texte toujours lisible par-dessus la trame jaune */
  .signataires .grille li { background: rgba(11, 11, 12, .9); padding-left: 12px; }
  .signataires .chapo { background: rgba(11, 11, 12, .9); display: inline-block; padding: 4px 8px 4px 0; }

  /* ---------- Espace militant (administration, comptes, ambassadeur·rices, animateur·rices) ----------
     Charte inversée : fond noir, texte blanc, accents fluo. Distingue d'un coup d'œil
     le côté militant du site public (fond blanc). On permute les variables de couleur,
     puis on corrige ce qui posait du jaune sous du texte devenu blanc. */
  body.backoffice {
    --papier: #0b0b0c; --encre: #f4f4f0; --encre-douce: #b4b4bc; --gris-trame: #2c2c33;
    background: var(--papier); color: var(--encre);
  }
  html:has(body.backoffice) { background: #0b0b0c; }
  body.backoffice a { color: var(--jaune); }
  body.backoffice .surligne, body.backoffice .alerte, body.backoffice .ok-msg,
  body.backoffice .etape { color: #0b0b0c; }
  body.backoffice .alerte a { color: #0b0b0c; }
  body.backoffice .bouton { background: var(--jaune); color: #0b0b0c; border-color: var(--jaune); box-shadow: 5px 5px 0 var(--rose); }
  body.backoffice .carte-signer { background: #141418; border-color: var(--encre); box-shadow: 10px 10px 0 var(--rose); }
  body.backoffice input[type=text], body.backoffice input[type=email], body.backoffice input[type=number],
  body.backoffice input[type=password], body.backoffice select, body.backoffice textarea {
    background: #1c1c21; color: var(--encre); border-color: #6c6c75;
  }
  body.backoffice .adm .b { background: #1c1c21; color: var(--encre); border-color: #6c6c75; }
  body.backoffice .adm .b.ok { background: var(--jaune); color: #0b0b0c; border-color: var(--jaune); }
  body.backoffice .adm .b.ko { background: var(--rose); color: #fff; border-color: var(--rose); }
  body.backoffice .adm-tabs a { border-color: #6c6c75; color: var(--encre); }
  body.backoffice .adm-tabs a.on { background: var(--jaune); color: #0b0b0c; border-color: var(--jaune); }
  body.backoffice .adm th, body.backoffice .adm td { border-bottom-color: #2c2c33; }
  body.backoffice .adm th a { color: var(--jaune); }
  body.backoffice .liste-noms li { border-bottom-color: #2c2c33; }
  body.backoffice .pied { border-top-color: var(--encre); }
  /* Étoile dans l'espace militant */
  .etoile--bo { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.28em; margin-right: .3em; transform: rotate(-8deg); }
  .etoile--coin { position: absolute; top: -34px; right: -26px; width: 72px; height: 72px; transform: rotate(-8deg); z-index: 2; }
  /* Page de remerciement : « Faites signer 3 personnes » */
  .inviter { margin: 22px 0 8px; padding: 18px 18px 14px; background: var(--jaune); border: 3px solid var(--encre); box-shadow: 6px 6px 0 var(--rose); }
  .inviter h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.05; margin: 0 0 10px; }
  .inviter h3 .surligne--rose { color: var(--encre); }
  .inviter p { margin: 0 0 10px; font-size: 15px; }
  .inviter .message-partage { background: var(--papier); }
  .carte-signer .partage--grand a, .partage--grand a, .partage--grand .copier { font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; color: var(--encre); border: 2px solid var(--encre); padding: 10px 14px; background: var(--papier); box-shadow: 3px 3px 0 var(--encre); }
  .partage--grand a:nth-child(odd) { background: var(--papier); }
  .partage--grand a:first-child { background: var(--encre); color: var(--jaune); }
  .partage--grand a:hover, .partage--grand .copier:hover { background: var(--rose); color: var(--papier); }
  .carte-signer h3.petit { font-size: 18px; margin: 22px 0 10px; }
  @media (max-width: 600px) { .etoile--coin { top: -26px; right: -6px; width: 54px; height: 54px; } }
  /* Menu commun de l'espace militant */
  .nav-bo { display: block; margin: 0 0 18px; line-height: 1.9; }
  .nav-bo .actif { font-weight: 700; color: var(--encre); border-bottom: 2px solid var(--jaune); }
  /* Identité + Déconnexion : petit encadré en haut à droite de la page, à part du menu */
  .nav-bo .qui { position: absolute; top: 8px; right: 12px; z-index: 5; color: var(--encre-douce); font-size: 12.5px; line-height: 1.4; white-space: nowrap; border: 1px solid var(--gris-trame); padding: 3px 8px; }
  .nav-bo .qui b { color: var(--encre); font-weight: 600; }
  .nav-bo .qui .deconnexion { margin-left: 8px; font-weight: 700; }
  /* Même taille et même position du menu sur toutes les pages de l'espace militant (référence : espace.php) */
  .nav-bo { font-size: 17px; }
  main.adm { padding-top: 40px; }
  /* Pages de gestion (admin, pistes, comptes, départements) : pleine largeur, marges latérales */
  main.adm, main.adm--etroit { max-width: none !important; padding-left: 12px; padding-right: 12px; }
  /* Numéro de version */
  .version-pied { font-family: var(--texte); font-weight: 400; text-transform: none; color: var(--encre-douce); font-size: 12px; margin-left: 6px; }
  .version { margin: 40px 0 0; padding-top: 12px; border-top: 1px solid var(--gris-trame); font-size: 12px; color: var(--encre-douce); }
  /* ---------- Mode appel (téléphone d'abord) ---------- */
  .appel .fiche-appel { border: 3px solid var(--encre); background: #141418; padding: 18px 16px; box-shadow: 8px 8px 0 var(--rose); }
  .appel .fiche-appel h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1.1; margin: 0 0 6px; }
  .appel .fiche-appel h2 small { font-family: var(--texte); font-size: 16px; color: var(--encre-douce); }
  .appel .qualite { margin: 0 0 6px; color: var(--encre-douce); }
  .appel .note { border-left: 4px solid var(--jaune); padding-left: 10px; margin: 8px 0; font-size: 15px; }
  .appel .rappel { color: var(--jaune); font-weight: 700; margin: 0 0 6px; }
  .appel .gros-tel { display: block; text-align: center; margin: 14px 0 6px; padding: 16px 10px; background: var(--jaune); color: #0b0b0c !important; font-family: var(--display); font-size: 26px; text-decoration: none; border: 3px solid var(--jaune); box-shadow: 5px 5px 0 var(--rose); }
  .appel .argumentaire { margin: 14px 0; border: 2px dashed #6c6c75; padding: 8px 12px; }
  .appel .argumentaire summary { font-weight: 700; cursor: pointer; }
  .appel .argumentaire h4 { margin: 10px 0 4px; color: var(--jaune); }
  .appel .argumentaire p { margin: 0 0 8px; font-size: 15px; }
  .appel .apres { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 18px; margin: 18px 0 8px; }
  .appel .bouton--oui { display: block; text-align: center; font-size: 20px; margin-bottom: 12px; }
  .appel .resultats { display: grid; gap: 10px; }
  .appel .resultats input[type=text], .appel .resultats input[type=date] { font: inherit; font-size: 16px; padding: 10px; border: 2px solid #6c6c75; background: #1c1c21; color: var(--encre); }
  .appel .rappeler { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
  .appel .autres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .appel .b { font: inherit; font-weight: 700; font-size: 15px; padding: 12px 8px; border: 2px solid #6c6c75; background: #1c1c21; color: var(--encre); cursor: pointer; }
  /* Espace : bilan, prochains appels, progression */
  .bilan { border: 3px solid var(--encre); padding: 14px 16px; margin: 10px 0 6px; background: #141418; }
  .bilan__chiffre { font-size: 18px; margin: 0 0 8px; }
  .bilan__chiffre b { color: var(--jaune); font-family: var(--display); font-weight: 400; font-size: 1.3em; }
  .bilan__rappel { color: var(--jaune); font-weight: 700; margin: 0 0 8px; }
  .gros-appel { display: block; text-align: center; font-size: 19px; }
  .barre-pg { height: 14px; background: #2c2c33; }
  .barre-pg i { display: block; height: 100%; background: var(--rose); }
  .dept-pg p { margin: 6px 0; }
  .bienvenue a { color: #0b0b0c; }
  .appel .argumentaire .accroche { border-left: 4px solid var(--rose); padding-left: 10px; margin: 6px 0 10px; }
  .appel .argumentaire .accroche small { color: var(--encre-douce); }
  .appel .argumentaire details.obj { margin: 4px 0; }
  .appel .argumentaire details.obj summary { cursor: pointer; font-size: 15px; }
  .appel .argumentaire details.obj p { margin: 4px 0 8px 14px; }
  .appel .argumentaire ul { margin: 4px 0; padding-left: 18px; font-size: 14px; }
  .appel .rappels-appel { margin-top: 12px; border-top: 1px solid #2c2c33; padding-top: 6px; }
  /* « L'appel en chiffres » (tableau de bord) */
  .chiffres { margin: 18px 0 8px; padding: 14px 0 12px; border-block: 2px solid var(--gris-trame); }
  .chiffres h2 { font-family: var(--texte); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; color: var(--encre-douce); }
  .chiffres dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 0; }
  .chiffres dl div { display: grid; }
  .chiffres dt { order: 2; font-weight: 700; font-size: 13px; }
  .chiffres dd { order: 1; margin: 0; font-family: var(--display); font-size: 36px; line-height: 1; color: var(--jaune); font-variant-numeric: tabular-nums; }
  .chiffres small { order: 3; font-size: 11px; color: var(--encre-douce); }
  .chiffres .a-faire { margin: 12px 0 0; font-weight: 700; color: var(--rose); }

  /* Espace militant / « Ajouter un·e signataire » : formulaire à gauche, mode appel et suivi à droite */
  .espace-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "form appel" "form suite"; grid-template-rows: auto 1fr; gap: 20px 48px; align-items: start; padding-block: 18px 32px; }
  .espace-form { grid-area: form; }
  .espace-appel { grid-area: appel; margin: 0; }
  .espace-suite { grid-area: suite; }
  .espace-form .h2-page { margin-top: 0; }
  .bilan--ligne { padding: 10px 16px; }
  .bilan--ligne .bilan__chiffre { margin: 0; }
  .bloc-espace { margin: 0 0 22px; }
  .bloc-espace .h2-page, .bloc-espace summary .h2-page { font-size: 22px; margin: 0 0 8px; display: inline; }
  .bloc-espace summary { cursor: pointer; margin-bottom: 8px; }
  @media (max-width: 900px) {
    .espace-grille { grid-template-columns: 1fr; grid-template-areas: "form" "appel" "suite"; grid-template-rows: auto; }
    .espace-grille--appel-dabord { grid-template-areas: "appel" "form" "suite"; }
  }