:root {
  /* v2 palette (issue #9 resolution) — public-facing UI */
  --rouge: #ff005c;
  --rose: #ff0098;
  --orange: #ffa300;
  --jaune: #ffff00;
  --gris: #e6e6e6;
  --ink: #14141a;
  --muted: #6b6b6b;

  /* v1 palette — kept only because admin.html still relies on it (out of scope for v2, issue #8) */
  --green-dark: #04402A;
  --mint: #0EFFA8;
  --magenta: #FB0AD9;

  --color-bg: #ffffff;
  --color-text: var(--green-dark);
  --color-muted: #555555;
  --color-border: #d4d4d4;
  --color-accent: #6c2bd9;
  --color-accent-hover: #581ab8;
  --color-error: #b00020;
  --radius: 12px;
  --space: 1rem;
  --max-width: 720px;
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Mohr Rounded', system-ui, sans-serif;
}

/* Mohr Rounded Black (Sofia Mohr / Latinotype) — self-hosted under a desktop-only EULA
   as a temporary stopgap pending a proper webfont license. See docs/adr/0004-*.md. */
@font-face {
  font-family: 'Mohr Rounded';
  src: url('../fonts/MohrRounded-Black.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px; left: 0;
  background: var(--green-dark);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space);
}

section { margin-bottom: 2rem; }

/* Masqués tant que l'animation d'entrée du logo + des boutons n'est pas terminée
   (dernier bouton : délai 0.685s + durée 0.5s = 1.185s), puis fondu (cf. modele_anim.mp4) */
#poll-results, .share, .comment-form, .comments, footer {
  opacity: 0;
  animation: fade-in-lower 0.45s ease-out 1.2s both;
}

@keyframes fade-in-lower {
  from { opacity: 0; }
  to { opacity: 1; }
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

/* v2 — titres roses selon la maquette (Partager, Laisser un commentaire anonyme, Commentaires) */
#share-title,
#form-title,
#comments-title {
  color: var(--rose);
}

.hero {
  margin-top: 0rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background: var(--jaune);
  border-radius: 16px;
  aspect-ratio: 678.49 / 560.13; /* ratio du viewBox de hero-v2.svg */
  overflow: hidden;
}

.hero svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Les 7 objets du logo (mon / ia / m'aime plus / que toi / .com / étoiles) arrivent
   un par un depuis le bas-droit, entièrement masqués au départ par le cadre du SVG
   (overflow:hidden implicite), avec un léger dépassement/retour à l'arrivée (cf. modele_anim.mp4) */
.hero-mon, .hero-ia, .hero-maime, .hero-quetoi, .hero-com,
.hero-etoile-petite, .hero-etoile-grande {
  animation-name: hero-obj-in;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
}

@keyframes hero-obj-in {
  0% { transform: translate(var(--hero-tx), var(--hero-ty)); }
  100% { transform: translate(0, 0); }
}

/* Décalages calculés à partir de la bbox réelle de chaque objet dans le viewBox
   (343.75 8.1 678.49 560.13), pour qu'il démarre entièrement hors cadre, avec un
   ratio dy/dx fixe (≈0.83) commun à tous pour un angle de trajectoire cohérent
   (l'objet "ia", proche du bord droit, partait sinon presque à l'horizontale). */
.hero-mon { --hero-tx: 557px; --hero-ty: 462px; animation-delay: 0s; }
.hero-ia { --hero-tx: 304px; --hero-ty: 252px; animation-delay: 0.06s; }
.hero-maime { --hero-tx: 580px; --hero-ty: 482px; animation-delay: 0.12s; }
.hero-quetoi { --hero-tx: 412px; --hero-ty: 342px; animation-delay: 0.18s; }
.hero-com { --hero-tx: 238px; --hero-ty: 197px; animation-delay: 0.24s; }
.hero-etoile-petite { --hero-tx: 158px; --hero-ty: 131px; animation-delay: 0.3s; }
.hero-etoile-grande { --hero-tx: 230px; --hero-ty: 191px; animation-delay: 0.34s; }

.share .a2a_kit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.share .a2a_kit .a2a_svg {
  border-radius: 50%;
}

.field { margin-bottom: 1rem; }

label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--green-dark);
  margin-bottom: 0.3rem;
}

/* v2 public form labels — admin's fieldset labels keep the base (v1) color above */
#comment-form label { color: var(--rose); }

textarea, input[type="text"] {
  width: 100%;
  padding: 0.6rem;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

textarea:focus, input[type="text"]:focus,
button:focus, a:focus {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.3rem 0 0;
}

.counter {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0.3rem 0 0;
  text-align: right;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.btn-primary {
  display: inline-block;
  background: var(--mint);
  color: var(--green-dark);
  border: 0;
  padding: 0.65rem 2.2rem;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-primary:hover { filter: brightness(0.92); }

/* v2 "Publier" button — admin's "Rafraîchir" keeps the base (v1) mint/green-dark above */
#comment-form .btn-primary {
  background: var(--rose);
  color: var(--jaune);
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.status {
  margin-top: 0.75rem;
  min-height: 1.5em;
  font-size: 0.95rem;
}

.status.error { color: var(--magenta); font-weight: 700; }
.status.success { color: var(--green-dark); font-weight: 700; }

/* v2 public status messages — #admin-status keeps the base (v1) colors above */
#form-status.error, #poll-status.error { color: var(--rouge); }
#form-status.success, #poll-status.success { color: var(--ink); }

/* Sondage — boutons de vote */

.poll-buttons {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.poll-vote-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.7rem 0.4rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.15;
  min-height: 4.2rem;
  transition: opacity 0.2s, filter 0.2s;
  /* Même animation que les objets du logo (translate + effet ressort), mais sans
     masquage par le parent ici — les boutons restent visibles pendant leur trajet
     (cf. modele_anim.mp4) */
  --hero-tx: 60px;
  --hero-ty: 110px;
  animation-name: hero-obj-in;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
}

.poll-vote-btn:not(:disabled):hover { filter: brightness(0.92); }

/* Démarre à 50% de l'animation du logo (dernier objet à 0.34s + 0.55s de durée = 0.89s au total) */
.poll-vote-btn:nth-of-type(1) { animation-delay: 0.445s; }
.poll-vote-btn:nth-of-type(2) { animation-delay: 0.565s; }
.poll-vote-btn:nth-of-type(3) { animation-delay: 0.685s; }

/* Couleurs texte fidèles à la maquette (Compo_clean_vectorise) plutôt qu'à --ink :
   accepté en connaissance de cause malgré un contraste WCAG AA insuffisant
   (jaune/orange ~1.9:1, rouge/jaune ~3.6:1 — sous les seuils 3:1/4.5:1). */
.poll-vote-btn[data-option="option1"] { background: var(--jaune); color: var(--rouge); } /* OUI */
.poll-vote-btn[data-option="option2"] { background: var(--rouge); color: var(--jaune); } /* NON */
.poll-vote-btn[data-option="option3"] { background: var(--orange); color: var(--jaune); } /* PEUT-ÊTRE */

.poll-vote-main {
  font-size: 1.5rem;
  font-weight: 700;
}

.poll-vote-btn.selected .poll-vote-main::after {
  content: ' ✓';
}

.poll-vote-sub {
  font-size: 0.9rem;
  font-weight: 600;
}

.poll-vote-btn:disabled { cursor: default; }
.poll-vote-btn.selected { opacity: 1; }
.poll-vote-btn.dimmed { opacity: 0.35; }

/* Sondage — résultats */

.poll-results-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--rose); /* v2 — titre rose selon la maquette */
  margin: 1.25rem 0 0.6rem;
}

.poll-bars {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.poll-bar-track {
  position: relative;
  border-radius: 999px;
  height: 1.5rem;
  background: var(--gris);
  overflow: hidden;
}

.poll-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.9s ease-out;
}

.poll-bar[data-option="option1"] .poll-bar-fill { background: var(--jaune); }
.poll-bar[data-option="option2"] .poll-bar-fill { background: var(--rouge); }
.poll-bar[data-option="option3"] .poll-bar-fill { background: var(--orange); }

.poll-bar-value {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.poll-total {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.poll-results-pending-note {
  text-transform: none;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

.poll-results:not(.is-pending) .poll-results-pending-note { display: none; }
.poll-results.is-pending .poll-total { display: none; }

.comment-form-locked {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--rose);
  margin: 0;
}

/* Formulaire de commentaire — inputs jaune (v2) */

#comment-form input[type="text"],
#comment-form textarea {
  background: var(--jaune);
  color: var(--ink);
  font-weight: 600;
  border: none;
  padding: 0.65rem 0.9rem;
}

#comment-form textarea { min-height: 8.5rem; }

#comment-form input[type="text"]::placeholder,
#comment-form textarea::placeholder {
  color: var(--muted);
  font-weight: 400;
}

#comment-form input[type="text"]:focus,
#comment-form textarea:focus {
  outline-color: var(--rouge);
}

/* Commentaires */

.comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comments-list li {
  padding: 0.85rem 1.1rem;
  border: none;
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
  background: var(--gris);
  color: var(--ink);
}

.comments-list li.empty {
  font-style: italic;
  color: var(--muted);
  background: transparent;
  border: 1px dashed #c9c9c9;
}

/* Couleur du commentaire = vote de son auteur (option absente = GRIS, base ci-dessus) */
.comments-list li[data-option="option1"] { background: var(--jaune); } /* OUI */
.comments-list li[data-option="option2"] { background: var(--rouge); } /* NON */
.comments-list li[data-option="option3"] { background: var(--orange); } /* PEUT-ÊTRE */

.comment .author {
  margin: 0 0 0.2rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vote-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Sur fond rouge, l'encre --ink tombe à 3,76:1 sur le badge (fond noirci à 12 %) — non conforme WCAG AA (4.5:1 requis) */
.comments-list li[data-option="option2"] .vote-badge { color: #fff; }

.comment .text {
  margin: 0 0 0.3rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --muted (4.27:1 max) échoue WCAG AA sur les fonds --rouge/--orange/--gris des cartes ;
   time n'apparaît que dans ce contexte, donc --ink (4.72:1 mini, sur --rouge) partout */
.comment time {
  font-size: 0.8rem;
  color: var(--ink);
}

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Admin */

.admin-header {
  background: #f4f4f6;
  padding: 1rem var(--space);
  border-bottom: 1px solid var(--color-border);
}
.admin-header h1 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.admin-header p { margin: 0; font-size: 0.9rem; }
.admin-header a { color: var(--color-accent); }

.admin-main {
  max-width: 960px;
}

.admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.admin-controls fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
.admin-controls fieldset legend {
  padding: 0 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.admin-controls fieldset label {
  display: inline-block;
  font-weight: 400;
  margin-right: 0.75rem;
}

.admin-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.admin-item.hidden { background: #fafafa; opacity: 0.85; }

.admin-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-visible { background: #e1f4e1; color: #1f7a1f; }
.badge-hidden { background: #f4e1e1; color: #8a2222; }

.admin-item .text {
  margin: 0 0 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-actions {
  display: flex;
  gap: 0.5rem;
}

.admin-actions button {
  font: inherit;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
}
.admin-actions button:hover { background: #f0f0f2; }

.btn-danger {
  border-color: var(--color-error) !important;
  color: var(--color-error) !important;
}
.btn-danger:hover { background: #fdecec !important; }

footer {
  padding: 2rem var(--space);
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

footer a { color: inherit; }

@media (min-width: 768px) {
  main { padding: 0rem 2rem 2rem 2rem; margin-top: 0rem; }
  .hero { margin-top: 1rem; }
}

@media (max-width: 479px) {
  .poll-buttons { flex-direction: column; }
  .poll-vote-btn { min-height: 3.4rem; }
  .form-footer { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .poll-bar-fill { transition: none; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}