/* contest_vote_mobile.css — mobile-first styles for candidate pages */

/* 1) Base reset/light normalizations (safe) */
.vote-root, .vote-root * {
  box-sizing: border-box;
}
.vote-root {
  --brand-1: #2f7d32;             /* primary green (buttons) */
  --brand-1-border: #2a6f2c;
  --danger-bg: #fde8e8;
  --danger-border: #f7b4b4;
  --danger-text: #b91c1c;
  --muted: #6b7280;
  --ink: #111827;
  --card-bg: #fff;
  --card-shadow: 0 8px 24px rgba(0,0,0,.06);
  --radius: 18px;
  --space: 14px;
  color: var(--ink);
  line-height: 1.35;
}

/* 2) Card container like screenshots */
.vote-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 18px 18px 16px 18px;
  max-width: 880px;
  margin: 14px auto;
}

/* Header title + goat mark to the right */
.vote-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
}
.vote-title {
  margin: 0 0 4px 0;
  font-weight: 800;
  font-size: clamp(20px, 5.5vw, 28px);
}
.vote-logo {
  width: 42px;
  height: 42px;
  opacity: .9;
}

/* Subheader (participant/date) */
.vote-sub {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13.5px, 3.6vw, 15px);
}

/* Progress bar */
.vote-progress {
  height: 8px;
  border-radius: 6px;
  background: #e5e7eb;
  margin: 12px 0 8px 0;
  overflow: hidden;
}
.vote-progress > span {
  display: block;
  height: 100%;
  background: #4f46e5; /* purple like screenshot */
  width: var(--value, 0%);
}

/* Meta line under progress */
.vote-meta {
  margin: 4px 0 8px 0;
  font-size: 13px;
  color: var(--muted);
}
.vote-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-weight: 700;
  font-size: 12px;
}

/* Alerts (danger) like red rounded box) */
.alert-danger {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--brand-1);
  color: #fff;
  border-color: var(--brand-1-border);
}
.btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: .5;
}

/* Actions row */
.vote-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Form input */
.vote-field {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.vote-input {
  width: 100%;
  font-size: 16px; /* iOS zoom-safe */
  border-radius: 12px;
  border: 2px solid #c7e3c8;
  padding: 12px 14px;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.vote-input::placeholder { color: #9ca3af; }
.vote-input:focus {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 4px rgba(46, 125, 50, .12);
}

/* Result line (rank + penalties) */
.vote-result-line {
  margin-top: 10px;
  font-weight: 700;
  font-size: clamp(14px, 3.9vw, 16px);
}
.vote-result-line em {
  font-style: normal;
  font-weight: 900;
}

/* Footer breadcrumb like dot centered */
.vote-footer {
  text-align: center;
  color: var(--muted);
  margin-top: 10px;
}

/* PDF icon button small inline icon */
.btn .ico {
  width: 18px; height: 18px;
}

/* 3) Responsiveness */
@media (max-width: 720px) {
  .vote-card { padding: 16px 14px 14px; margin: 12px 10px; }
  .vote-actions { flex-direction: column; }
  .btn, .btn-primary { width: 100%; }
  .vote-card-head { grid-template-columns: 1fr auto; gap: 8px; }
  .vote-logo { width: 36px; height: 36px; }
}

/* 4) Small phones */
@media (max-width: 390px) {
  .vote-title { font-size: 20px; }
  .vote-sub { font-size: 13px; }
  .vote-card { border-radius: 14px; }
}

/* 5) Do NOT touch the existing cow-notation screen.
   If that page uses a wrapper like .cow-notation or a different route,
   these styles won't alter its grids/radios.
*/
/* === ALIGNEMENT TABLES 1–9 (mobile et PC) === */
/* --- Revenir à un tableau entièrement défilable --- */

/* le conteneur qui entoure la <table> */
.score-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  /* touch-action: pan-x !important;  <-- à supprimer */
  touch-action: auto !important;        /* <-- permet le scroll vertical */
  margin-bottom: .8rem;
}
/* la table de notation (UNE table) */
.score-grid{
  border-collapse: collapse;
  table-layout: fixed;                     /* colonnes régulières */
  min-width: 1000px;                       /* > écran mobile => scroll */
  width: max(1000px, 100%);                /* reste large sur PC */
  font-variant-numeric: tabular-nums;
}

/* on supprime toute "collance" de la 1re colonne */
.score-grid th:first-child,
.score-grid td:first-child{
  position: static !important;
  left: auto !important;
  background: #fff;
  text-align: left;
}

/* largeur de la colonne "Critère"
   - fallback: entre 22 et 34 caractères (~ch), ou ~30%
   - la valeur JS (si présente) la remplace via --crit-col-w
*/


/* padding un peu plus serré pour coller la 1re note */
.score-grid th, .score-grid td{ padding: 6px 8px; }
.score-grid td:first-child{ padding-left: 10px; }  /* critère */


/* lignes de titre de groupe */
.group-row th{
  text-align: left;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 700;
  padding: 10px 8px;
}

/* radios bien centrées */
.score-grid input[type="radio"]{
  display: block;
  margin: 0 auto;
  width: 22px; height: 22px;
}

/* IMPORTANT : ne pas couper le défilement au-dessus */
.grid-card, .vote-root{
  overflow: visible !important;
}
/* Colonne des critères : nettement plus large */
.score-grid col.col-crit{
  /* ~38–52 caractères, ou ~46% selon la place */
  width: clamp(38ch, 46%, 52ch);
}

/* Les 9 colonnes de notes se partagent le reste */
.score-grid col.col-score{
  width: calc((100% - clamp(38ch, 46%, 52ch)) / 9);
}

/* Libellés lisibles : on réautorise le retour à la ligne */
.score-grid td:first-child{
  white-space: normal;      /* plus de coupe avec ellipsis */
  overflow: visible;
  text-overflow: unset;
  line-height: 1.25;
  padding-left: 10px;
}

/* Desktop grand écran : un peu plus large si possible */
@media (min-width: 1280px){
  .score-grid col.col-crit{ width: clamp(42ch, 48%, 56ch); }
  .score-grid col.col-score{ width: calc((100% - clamp(42ch, 48%, 56ch)) / 9); }
}




html, body{
  height: auto !important;
  overflow-y: auto !important;
}
/* zone boutons */
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;              /* autorise le retour à la ligne */
  margin-top:12px;
}

/* les deux blocs gauche/droite prennent de la place sans se pousser */
.controls > div{
  display:flex;
  gap:10px;
  align-items:center;
}

/* boutons */
.btn, .cta-login, .btn-ghost, .btn-secondary{
  white-space:nowrap;
  padding:.7rem 1rem;
  border-radius:12px;
}

/* Mobile : empiler proprement, pleine largeur et même alignement */
@media (max-width: 640px){
  .controls{
    flex-direction:column;
    align-items:stretch;      /* étire en largeur */
  }
  .controls > div{
    width:100%;
    justify-content:space-between;   /* “Précédent” à gauche, “Suivant” à droite */
  }
  .btn, .cta-login, .btn-ghost, .btn-secondary{
    width:48%;                 /* 2 boutons sur la même ligne sans chevauchement */
  }
  /* si tu préfères un seul bouton par ligne, remplace width:48% par width:100% */
}
/* PC: limit the width of the notation card */
/* === Alignement et centrage de la feuille de notation sur PC === */
@media (min-width: 1024px){
  /* Centre uniquement la zone de notation */
  .grid-card{
    max-width: 1024px;         /* même largeur que l'entête */
    margin: 14px auto;
  }

  /* Ne pas toucher à l'entête */
  .vote-root:not(:has(.vote-card)){
    display: flex;
    justify-content: center;
  }

  /* Conserve le scroll horizontal si besoin */
  .score-wrap{
    width: 100%;
    overflow-x: auto;
  }
}

/* === Zébrage du tableau : une ligne sur deux === */
.score-grid tbody tr:not(.group-row):nth-child(even) td {
  background-color: #f9fafb;   /* gris très léger */
}

/* Optionnel : renforce un peu la lisibilité sur hover (au passage de la souris) */
.score-grid tbody tr:not(.group-row):hover td {
  background-color: #f1f5f9;
}

/* Les lignes de groupe (ex : Mamelle, Développement) restent blanches */
.score-grid tbody tr.group-row th {
  background-color: #f8fafc;
}

/* S'assure que rien ne recouvre la zone des boutons */
.grid-card { position: relative; }
.controls  { position: relative; z-index: 5; background: #fff; }

/* La zone défilable de la table ne doit pas passer au-dessus des boutons */
.score-wrap{
  position: relative;
  z-index: 1;
  overflow-x: auto !important;
  overflow-y: visible !important; /* IMPORTANT : évite un "couvercle" */
}
/* Sécurise la zone des boutons contre tout overlay */
.grid-card { position: relative; }
.controls  { position: relative; z-index: 20; background: #fff; }

/* Défilement horizontal OK, mais ne couvre pas la zone des boutons */
.score-wrap{
  position: relative;
  z-index: 1;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Force les clics sur les boutons (même si un style met pointer-events:none ailleurs) */
.controls,
.controls * {
  pointer-events: auto !important;
}

/* Au cas où un fieldset désactiverait tout le bloc */
fieldset:disabled .controls * {
  pointer-events: auto !important;
}

/* Boutons vraiment inactifs seulement si "disabled" HTML est présent */
.btn[disabled],
.cta-login[disabled],
.btn-ghost[disabled],
.btn-secondary[disabled] {
  opacity: .55;
  pointer-events: none !important;
}
/* === Grille compacte : critères sur 1 ligne, colonnes de notes serrées === */
/* Largeurs pilotées par variables pour un contrôle fin */
.grid-card{
  --crit-col: 200px;   /* largeur colonne "Critère" (no-wrap) */
  --score-col: 44px;   /* largeur d’une colonne de note */
}

.score-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Table : largeur = critère + 9 colonnes de notes (serrées) */
.score-grid{
  border-collapse:collapse;
  table-layout:fixed;
  width: calc(var(--crit-col) + 9 * var(--score-col));
  min-width: calc(var(--crit-col) + 9 * var(--score-col));
  font-variant-numeric: tabular-nums;
}

/* Colonnes */
.score-grid col.col-crit  { width: var(--crit-col); }
.score-grid col.col-score { width: var(--score-col); }

/* En-têtes + cellules : padding réduit pour gagner de la place */
.score-grid th, .score-grid td{ padding: 4px 6px; }
.score-grid thead th{ font-size: 13px; }

/* Libellés critère : une seule ligne, coupure propre à la fin */
.score-grid td:first-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10px;
}

/* Radios plus petites et centrées */
.score-grid input[type="radio"]{
  display:block; margin:0 auto;
  width: 18px; height: 18px;
}

/* Zébrage (lisibilité) */
.score-grid tbody tr:nth-child(odd):not(.group-row) { background: #fafbfc; }
.group-row th{
  background:#f1f5f9; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
  font-weight:700; text-align:left; padding:8px 6px;
}

/* Breakpoints : on resserre encore un peu si nécessaire */
@media (min-width: 1400px){
  .grid-card{ --crit-col: 460px; --score-col: 46px; }
}
@media (max-width: 1100px){
  .grid-card{ --crit-col: 380px; --score-col: 42px; }
}
@media (max-width: 800px){
  /* Sur mobile : on garde le scroll horizontal mais toujours compact */
  .grid-card{ --crit-col: 340px; --score-col: 40px; }
}
/* Fond de page + conteneur principal commun à toutes les pages candidat */
html, body {
  margin: 0;
  padding: 0;
  background: #f3f4f6; /* fond gris clair comme sur la capture */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111827;
}

.vote-root {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}
/* Variantes de boutons communes */
.cta-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid #256e2e;
  background: #2f7d32;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
}

.btn-secondary {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.btn-ghost {
  background: transparent;
  color: #111827;
  border-color: transparent;
  box-shadow: none;
}
/* Variantes d'alertes (info / succès) utilisées sur contest_vote_done et self_register */
.alert-info {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef8ff;
  border: 1px solid #c7ddff;
  color: #1d4ed8;
}

.alert-success {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e6f6e6;
  border: 1px solid #9fd39f;
  color: #065f46;
}
    .animal-nav{display:flex;gap:8px;flex-wrap:wrap}
    .animal-nav a{padding:6px 10px;border-radius:999px;text-decoration:none;border:1px solid #e5e7eb}
    .animal-nav a.active{background:#2563eb;color:#fff;border-color:#2563eb}