/* Typo & reset doux */
:root {
  --bg: #e4ddb1;            /* fond demandé */
  --fg: #003300;
  --accent: #6B5712;
  --accent-hover: #999933;
  --card: #f6f1cf;          /* léger contraste pour blocs */
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--fg);
  font: 14px/1.5 "Verdana", "Trebuchet MS", sans-serif;

  /* Image de fond répétée sur toute la page */
  background: url("texture_4.jpg") repeat center top var(--bg);
}

/* Page pleine hauteur/largeur */
.page {
  min-height: 100dvh;       /* plein écran, y compris mobiles */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Header modernisé */
.header {
  padding: clamp(12px, 2vw, 24px);
  display: grid;
  gap: 12px;
  align-items: center;
  justify-items: center;
  text-align: center;
  background: url("bg_header_2.jpg") repeat center top var(--bg);
}

.brand {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.logo {
  max-width: min(700px, 90vw);
  height: auto;
}

.tagline {
  margin-top: 20px; /* espace vers le bas par rapport au logo */
  font-size: clamp(14px, 1.8vw, 20px); /* plus petit */
  color: #438a3d;
  font-weight: 700;
}

.rss img { vertical-align: middle; }

/* Grille 3 colonnes responsive (garde l'esprit de la mise en page) */
.layout {
  width: min(1400px, 100%);
  margin-inline: auto;
  padding: clamp(10px, 2vw, 20px);
  display: grid;
  grid-template-columns: 260px 1fr 320px; /* gauche / centre / droite */
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}

/* Cartes de colonnes (subtil relief, pas bling-bling) */
.col {
  background: color-mix(in srgb, var(--card), transparent 30%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: clamp(10px, 1.6vw, 16px);
  backdrop-filter: saturate(1.1);
}

/* Classes héritées conservées (pour tes fragments et styles existants) */
.sectiongauche, .gauche { grid-column: 1; }
.sectioncentre, .centre { grid-column: 2; }
.sectiondroite, .droite { grid-column: 3; }

h2 { 
  margin: 0 0 .6rem;
  font-size: clamp(18px, 2vw, 24px);
  text-align: center;
}

.titres_rouges { color: #990000; font-size: 16px; }

/* Textes existants (classes conservées) */
.compteur { text-align: center; font-size: .95em; }
.rouge { color:#990000; font-weight:bold; text-align:center; }
.rouge_grand { color:#990000; font-weight:bold; text-align:center; font-size: 1.1em; }
.bleu { color:#0000FF; font-weight:bold; text-align:center; }
.vert { color:#006600; font-weight:bold; text-align:center; }
.gras { font-weight:bold; text-align:center; }
.centre { text-align: left; }
.align_gauche { text-align: left; }

.topics { overflow: auto; }

/* Vidéo centrée et responsive */
.videowrap { display: grid; place-items: center; }
video, img { max-width: 100%; height: auto; }

/* Liens */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Boutons image (IDs conservés) */
.bouton_menu { border: 0; font-size: 25px; }

/* On ne modifie PAS tes sprites : on garde tes IDs tels quels.
   Si tes images sont dans style/… ajuste les chemins au besoin. */
#bouton_home, #bouton_talisman, #bouton_enigmatron, #bouton_connexion,
#bouton_grilles, #bouton_forum, #bouton_reglement, #bouton_amis,
#bouton_progression, #bouton_classement, #bouton_continuer, .go, .ok {
  display: block;
  width: 195px;
  height: 60px;
  margin: 6px auto;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Responsive : passe en 1 puis 2 colonnes sur petits écrans */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px 1fr; }
  .sectiondroite, .droite { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; }
  .col { padding: 14px; }
  .sectiongauche, .gauche,
  .sectioncentre, .centre,
  .sectiondroite, .droite { grid-column: 1; }
}

/* Footer minimal (optionnel) */
.footer { height: 1px; }

.menu-gauche {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.menu-gauche a, .menu-gauche input.go {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(145deg, #36332a, #4f4c3d);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.2s ease-in-out;
}

.menu-gauche input.go { 
  font-size: 0.8rem !important;  /* même taille que les liens */
}

.menu-gauche a i {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}



.menu-gauche a:hover, .menu-gauche input.go:hover{
  background: linear-gradient(145deg, #4f4c3d, #36332a);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.menu-gauche a:active, .menu-gauche input.go:active{
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}






/* === Normalisation: bouton Continuer (input.go) aligné sur les liens du menu gauche === */
.menu-gauche input.go{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  cursor:pointer;
  display:block;
  width:100%;
  text-align:left;
  font: inherit;
}



/* === Override ciblé : bouton Continuer (input.go) dans .menu-gauche
   - Même hauteur/largeur/arrondis que les liens
   - Icône "play" Font Awesome à gauche
   - Libellé "Continuer" visible (sans changer le HTML/PHP)
   - Effets hover/active cohérents
   - N'altère pas les autres éléments
=== */
.menu-gauche input.go{
  all: unset;                 /* on retire les styles natifs de l'input */
  display: block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 12px 16px;         /* même paddings que les liens */
  padding-left: 48px;         /* place pour l'icône */
  min-height: 48px;           /* même hauteur visuelle */
  border-radius: 12px;
  background: linear-gradient(145deg, #4f4c3d, #36332a);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  margin: 10px 0;
  text-align: left;
}

/* Icône "play" à gauche (font awesome) */
.menu-gauche input.go::before{
  content: "\f04b";
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;
  font-weight: 900;           /* solid */
  font-size: 16px;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

/* Libellé "Continuer" à droite de l'icône */
.menu-gauche input.go::after{
  content: "Continuer";
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1.2;
}

/* Effets hover / active identiques aux liens */
.menu-gauche input.go:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  background: linear-gradient(145deg, #36332a, #4f4c3d);
}
.menu-gauche input.go:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.menu-gauche input.go:focus{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 2px;
}

/* Align font rendering on the 'Continuer' button with menu links */
.menu-gauche input.go{
  font-family: inherit !important;
  font-size: 1rem !important;   /* même taille que les liens */
  font-weight: 600 !important;  /* même graisse que les liens */
}

/* === FINAL unify metrics & icon for .menu-gauche input.go (dans la même feuille) === */
.menu-gauche input.go{
  /* metrics identiques aux liens */
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding-left: 44px !important;   /* icône + gap */
  margin: 0 !important;            /* l'espacement vient du conteneur (gap) */
  /* icône + gradient empilés (calque 1 = icône, calque 2 = fond) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5v14l11-7z'/></svg>"),
    linear-gradient(145deg, #36332a, #4f4c3d) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 16px center, center !important;
  background-size: 18px 18px, auto !important;
}
.menu-gauche input.go:hover{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5v14l11-7z'/></svg>"),
    linear-gradient(145deg, #4f4c3d, #36332a) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 16px center, center !important;
  background-size: 18px 18px, auto !important;
}

.indice{
	font-weight:bold;
}