/*
 * Défi Races Bovines — système de mise en page public 1.23.03
 *
 * Cette feuille définit uniquement la géométrie commune des pages publiques :
 * largeur du site, rythmes verticaux, panneaux principaux et pied de page.
 * Les composants propres à chaque page restent dans leurs feuilles dédiées.
 */

:root {
  --site-shell-home: 860px;
  --site-shell-standard: 1040px;
  --site-shell-game: 1120px;
  --site-shell-wide: 1240px;
  --site-gutter: 18px;
  --site-section-gap: 18px;
  --site-radius: 13px;
  --site-border: 3px solid var(--wood, #7c3f19);
  --site-panel-bg: rgba(239, 231, 200, .95);
  --site-panel-shadow: 0 4px 0 rgba(92, 52, 25, .22);
}

/* Un seul conteneur de référence pour le bandeau, le contenu et le pied de page. */
.site-shell {
  --site-shell-max: var(--site-shell-standard);
  width: min(var(--site-shell-max), calc(100% - (2 * var(--site-gutter)))) !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 18px 0 30px !important;
}

.site-shell--home { --site-shell-max: var(--site-shell-home); }
.site-shell--standard { --site-shell-max: var(--site-shell-standard); }
.site-shell--game { --site-shell-max: var(--site-shell-game); }
.site-shell--wide { --site-shell-max: var(--site-shell-wide); }

/* Les blocs de premier niveau ne réinventent plus leur propre largeur. */
.site-shell > .app-header,
.site-shell > .panel,
.site-shell > form.panel,
.site-shell > .intro,
.site-shell > .empty,
.site-shell > .error-box,
.site-shell > .thanks,
.site-shell > .proposal-hero,
.site-shell > .proposal-message,
.site-shell > .proposal-layout,
.site-shell > .filters,
.site-shell > .photo-contribution-banner,
.site-shell > .defi-hero,
.site-shell > .defi-grid,
.site-shell > .defi-error,
.site-shell > .defi-play-placeholder,
.site-shell > .defi-game-start,
.site-shell > .defi-result-panel,
.site-shell > .welcome-layout,
.site-shell > .game,
.site-shell > .join-error,
.site-shell > .join-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.site-shell > .app-header {
  margin-bottom: var(--site-section-gap) !important;
}

/* Accueil : on conserve l'équilibre historique entre le bandeau et le grand panneau. */
.site-shell--home > .app-header {
  margin-bottom: 0 !important;
  border-radius: var(--site-radius) var(--site-radius) 0 0 !important;
  border-bottom-width: 0 !important;
}

.site-shell--home > #welcome,
.site-shell--home > .welcome-layout {
  margin-top: 0 !important;
}

.site-shell--home > #welcome > .home-hero,
.site-shell--home > .welcome-layout > .home-hero,
.site-shell--home > .welcome-layout > .welcome-form {
  border-radius: 0 0 var(--site-radius) var(--site-radius) !important;
}

/* Les pages Défi utilisent la largeur commune ; leur composition interne reste intacte. */
.site-shell.defi-page > .defi-hero,
.site-shell.defi-page > .defi-grid,
.site-shell.defi-page > .defi-top-scores,
.site-shell.defi-page > .defi-error,
.site-shell.defi-page > .defi-game-shell,
.site-shell.defi-page > .defi-game-start,
.site-shell.defi-page > .defi-result-panel,
.site-shell.defi-page > .defi-play-placeholder {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Formulaire de connexion : panneau extérieur aligné au bandeau,
   contenu conservé à une largeur confortable. */
.site-shell.join-page-compact {
  width: min(var(--site-shell-standard), calc(100% - (2 * var(--site-gutter)))) !important;
}

.site-shell.join-page-compact > .join-card,
.site-shell.join-page-compact > .join-error,
.site-shell.join-page-compact > .app-header {
  width: 100% !important;
  max-width: none !important;
}

.site-shell.join-page-compact > .join-card > .join-card-head,
.site-shell.join-page-compact > .join-card > .join-instructions,
.site-shell.join-page-compact > .join-card > .join-closed-box,
.site-shell.join-page-compact > .join-card > .join-fields-row,
.site-shell.join-page-compact > .join-card > .join-code-field,
.site-shell.join-page-compact > .join-card > .join-help,
.site-shell.join-page-compact > .join-card > .join-actions,
.site-shell.join-page-compact > .join-card > .join-waiting,
.site-shell.join-page-compact > .join-card > .join-success-actions,
.site-shell.join-page-compact > .join-card > p {
  width: min(100%, 760px);
  margin-left: auto;
  margin-right: auto;
}

/* Le contenu juridique suit désormais la même largeur que son bandeau. */
.site-shell .legal-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Pied de page public compact : le lien reste visible sans créer un nouveau
   panneau de la largeur complète de la page. */
.site-shell > .site-footer {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  box-sizing: border-box;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  min-height: 0;
  margin: var(--site-section-gap) auto 0 !important;
  padding: 7px 15px !important;
  border: 1px solid rgba(124, 63, 25, .48) !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 226, .78) !important;
  box-shadow: none !important;
  color: #4b2c19 !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
  line-height: 1.3;
  text-align: center !important;
}

.site-footer-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

.site-footer a {
  color: #6f321c !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent-dark, #8f341c) !important;
  border-bottom-color: currentColor;
  outline: none;
}

.site-footer .footer-separator {
  color: rgba(92, 52, 25, .55);
}

/* Les pages sans include de pied de page peuvent utiliser ce conteneur ensuite. */
.site-page-section {
  width: 100%;
  margin-bottom: var(--site-section-gap);
}

@media (max-width: 700px) {
  :root {
    --site-gutter: 8px;
    --site-section-gap: 10px;
  }

  .site-shell,
  .site-shell.join-page-compact {
    width: calc(100% - (2 * var(--site-gutter))) !important;
    padding: 8px 0 18px !important;
  }

  .site-shell > .app-header {
    margin-bottom: 10px !important;
  }

  .site-shell--home > .app-header {
    margin-bottom: 0 !important;
  }

  .site-shell > .site-footer {
    max-width: calc(100% - 12px) !important;
    padding: 6px 12px !important;
    font-size: .78rem !important;
  }

  .site-shell.join-page-compact > .join-card > * {
    max-width: 100%;
  }
}

@media (max-width: 950px) and (max-height: 620px) and (orientation: landscape) {
  :root {
    --site-gutter: 8px;
    --site-section-gap: 10px;
  }

  .site-shell {
    width: calc(100% - 16px) !important;
    padding: 8px 0 16px !important;
  }
}

@media print {
  .site-footer {
    display: none !important;
  }
}

/* L'ancienne feuille d'accueil imposait une largeur de 1120 px au conteneur
   général, puis 860 px à ses blocs internes. On fixe désormais 860 px une seule
   fois au niveau du shell afin que bandeau, contenu et pied de page coïncident. */
body:has(.site-shell--home #welcome:not(.hidden)) .site-shell--home {
  width: min(var(--site-shell-home), calc(100% - (2 * var(--site-gutter)))) !important;
  max-width: none !important;
  padding: 18px 0 30px !important;
}

@media (max-width: 700px) {
  body:has(.site-shell--home #welcome:not(.hidden)) .site-shell--home {
    width: calc(100% - (2 * var(--site-gutter))) !important;
    padding: 8px 0 18px !important;
  }
}

/* v1.23.12 — les règles de largeur des pages Défi ne ciblent plus les fenêtres modales imbriquées. */