/*
 * Punchbox — (c) 2026 Alexis Clement. Tous droits reserves.
 * Logiciel proprietaire. Toute reproduction ou diffusion interdite sans
 * autorisation ecrite.
 */

/* soutien-dons.css — refonte de /soutien (mission page-soutien-refonte,
 * 06/09/2026). Feuille DÉDIÉE : web/css/style.css est occupé par une autre
 * mission en parallèle (onglet-devenir-testeur), on n'y touche pas. Réutilise
 * les variables de thème et les classes déjà en place (--carte, --bordure,
 * --laiton, --texte, --secondaire, --accent-titre, --mesure, --rayon,
 * .modele-carte, .bouton-plein) : aucun nouveau jeton, structure seulement.
 */

/* ---- (2) Haut de page : mot du fondateur + bouton de don, côte à côte ---- */
.soutien-haut {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.soutien-mot {
  flex: 1 1 60%;
  min-width: 0;                 /* empêche le contenu long de forcer un débordement */
}
.soutien-mot h2 { font-size: 1.15rem; margin: 0 0 .6em; color: var(--accent-titre); }
.soutien-mot-citation { margin: 0; }
.soutien-mot-citation p { margin: 0 0 .75em; color: var(--texte); }
.soutien-mot-citation p:last-child { margin-bottom: 0; }
.soutien-mot-citation em { font-style: italic; }
.soutien-mot-date {
  margin: .75em 0 0; color: var(--secondaire); font-size: .92rem; font-style: normal;
}

.soutien-don {
  flex: 0 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.soutien-don-bouton {
  /* Layout SEULEMENT (largeur, centrage). La TAILLE vient de .bouton-plein
     (padding 11px 20px, font 17px = 51 px) : mission correction-boutons-et-
     vides, LOT 3, arbitrage §1 — on résorbe le one-off à 58 px (ancien
     padding 14px 30px / font 1.1rem) au profit de la taille sanctionnée du
     site. Cible tactile (≥44 px) toujours respectée par les 51 px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;             /* cible tactile — charte */
  text-align: center;
  width: 100%;
}
.soutien-don-note { margin: 0; color: var(--secondaire); font-size: .9rem; max-width: 34ch; }

/* Mobile : les deux blocs s'empilent, le mot d'abord (déjà premier dans le DOM),
 * le bouton ensuite — AUCUN flex-wrap ici (piège corrigé sur l'accueil,
 * mission mobile-grille-et-reinit) : on bascule proprement en colonne. */
@media (max-width: 720px) {
  .soutien-haut { flex-direction: column; }
  .soutien-don { align-items: stretch; }
  .soutien-don-bouton { width: 100%; }
}

/* ---- (3) Corps : texte sur le modèle par les dons ----
 * Composition (mission composition-anti-pendouille, 06/09/2026) : `.modele`
 * (style.css) va jusqu'à min(1600px, 95vw) — pensé pour l'ancienne grille de
 * cartes (.modele-grille). Le corps texte, lui, GARDE sa mesure de lecture
 * (--mesure, 68ch — piège explicitement signalé par le fondateur : élargir
 * le paragraphe nuirait à la lecture). Sans centrage, ce bloc étroit reste
 * calé à gauche du conteneur large : la moitié droite de la page restait
 * entièrement vide sous le bouton de don (mesuré : rapports/composition-
 * anti-pendouille.md, étape 1/2). Centrer (`margin-inline:auto`) répartit le
 * vide des deux côtés au lieu d'un seul — solution retenue par le fondateur
 * lui-même dans sa remarque du 6 septembre (« on pourrait mieux centrer »).
 * `.soutien-haut` (mot du fondateur + bouton, rendu déjà jugé « sans faute »)
 * n'est pas touché : il occupe déjà toute la largeur utile. */
.soutien-corps { max-width: var(--mesure); margin-inline: auto; }
.soutien-corps h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 .7em; }
.soutien-corps p { margin: 0 0 1em; color: var(--texte); }
.soutien-corps p:last-child { margin-bottom: 0; }
.soutien-corps strong { color: var(--accent-titre); }

/* ---- (4) Sondage à trois choix + résultat ---- */
.soutien-sondage { margin-top: clamp(28px, 4vw, 44px); max-width: var(--mesure); margin-inline: auto; }
.soutien-sondage-question { font-size: 1.08rem; margin: 0 0 .8em; color: var(--texte); }
.soutien-sondage-actions {
  display: flex; flex-wrap: wrap;   /* jamais sans flex-wrap (piège corrigé sur l'accueil) */
  gap: 10px;
}
.soutien-sondage-actions button { min-height: 44px; padding: 11px 20px; }
.soutien-sondage-resultat { margin-top: 14px; color: var(--secondaire); }
.soutien-sondage-pourcentages {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
}
.soutien-sondage-pourcentages li { color: var(--texte); }