/**
 * « Les prochains duels » : le bouton et sa fenetre.
 *
 * A part des autres feuilles parce que la fonctionnalite l'est aussi : elle ne
 * touche a rien du reste de la page, et se retirerait en supprimant trois
 * fichiers. Les teintes sont celles de l'accueil — or et nuit — reprises ici en
 * clair plutot qu'heritees, pour que la fenetre garde son allure meme si la page
 * change de decor.
 */

.btn-rdv {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid #94713e;
  border-radius: 8px;
  background: linear-gradient(180deg, #0d1c24, #050d12);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 74, 0.18);
  color: #e4c38b;
  font: 700 15px/1 Georgia, serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.btn-rdv:hover { border-color: #e4c38b; color: #fff0d0; }

/* LE BOUTON SUIT LA PAGE. La question « y a-t-il du monde bientot ? » se pose
 * n'importe ou — en lisant le classement, en regardant la carte — et non
 * seulement devant la liste des jeux.
 *
 * « env(safe-area-inset-bottom) » : sur les telephones a encoche, le bas de
 * l'ecran est occupe par la barre du systeme. Sans cette marge, le bouton se
 * glisserait dessous et deviendrait a moitie intouchable.
 *
 * Le plan de superposition est 40, quand le site n'utilise nulle part plus de 5 :
 * le bouton passe donc au-dessus de tout, sauf de la fenetre elle-meme, que le
 * navigateur dessine dans un plan a part. */
.btn-rdv-flottant {
  position: fixed;
  right: 18px;
  bottom: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(168, 134, 74, 0.18);
}
.btn-rdv-flottant:focus-visible { outline: 2px solid #fff0d0; outline-offset: 3px; }

.rdv-epees { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: 2; }

/* Pendant une partie, le decor s'efface : ce bouton en fait partie, et il
   flotterait sinon par-dessus le plateau. */
body.en-partie .btn-rdv-flottant { display: none; }

/* Le pied de page respire : sans cela, le bouton recouvre « Nous contacter » une
   fois arrive tout en bas — mesure faite, c'est exactement ce qui se passait.
   
   « .pied.home-footer » et non « .home-footer » : la feuille de l'accueil pose sa
   marge avec ces deux classes, et une regle a une seule classe ne l'emporte pas,
   meme ecrite apres. On ne redit que le bas, pour laisser les autres cotes tels
   qu'ils sont. */
.pied.home-footer { padding-bottom: 5rem; }

/* La pastille n'apparait que lorsqu'un creneau se detache : une pastille vide
   attirerait l'oeil pour ne rien dire. */
.btn-rdv .rdv-pastille {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(240, 207, 139, 0.16);
  color: #f0cf8b;
  font: 600 11px/1.5 'Segoe UI', sans-serif;
  letter-spacing: 0;
}
.btn-rdv .rdv-pastille:empty { display: none; }

/* ---------- La fenetre ---------- */
#rdv-fenetre {
  width: min(880px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid #94713e;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0, #17313b66, transparent 65%), #061016;
  box-shadow: inset 0 0 0 5px #050d12, inset 0 0 0 6px rgba(148, 113, 62, 0.19),
              0 24px 60px rgba(0, 0, 0, 0.6);
  color: #f6edda;
  overflow: auto;
}
#rdv-fenetre::backdrop { background: rgba(3, 8, 11, 0.82); }
.rdv-corps { padding: 26px 26px 30px; }

.rdv-tete { text-align: center; margin-bottom: 22px; }
.rdv-tete h2 {
  margin: 0;
  font: 700 25px/1.25 Georgia, serif;
  letter-spacing: 0.05em;
  color: #e4c38b;
}
.rdv-tete h2::after {
  content: '';
  display: block;
  width: 64px;
  margin: 12px auto 0;
  border-top: 1px solid rgba(148, 113, 62, 0.47);
}
.rdv-tete p {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.6;
  color: #d4c4a7;
}

.rdv-fermer {
  position: sticky;
  top: 0;
  float: right;
  margin: 10px 12px 0 0;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 113, 62, 0.5);
  border-radius: 6px;
  background: #050d12;
  color: #e4c38b;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.rdv-fermer:hover { border-color: #e4c38b; color: #fff0d0; }

/* ---------- La grille ---------- */
.rdv-reperes {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 10px;
  align-items: end;
  margin-bottom: 6px;
}
.rdv-reperes .rdv-barre {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  font: 600 10px/1 'Segoe UI', sans-serif;
  color: #9c8c6c;
}
.rdv-reperes span { text-align: left; }

.rdv-jour {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 0 10px;
  margin-bottom: 4px;
}
.rdv-jour-nom {
  white-space: nowrap;
  font: 600 12px/1.2 Georgia, serif;
  color: #d4c4a7;
  letter-spacing: 0.03em;
  text-align: right;
}
.rdv-cases { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }

.rdv-case {
  height: 26px;
  border: 1px solid rgba(148, 113, 62, 0.22);
  border-radius: 3px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.rdv-case:hover { border-color: #e4c38b; }

/* Passee : barree et inerte. */
.rdv-case[disabled] {
  opacity: 0.3;
  cursor: default;
  background-image: linear-gradient(135deg, transparent 45%, rgba(214, 196, 167, 0.6) 45%,
                    rgba(214, 196, 167, 0.6) 55%, transparent 55%);
}

/* LA MIENNE SE RECONNAIT A SA FORME — liseré clair et point central — et non a sa
   couleur : elle doit rester lisible par-dessus n'importe quelle chaleur. */
.rdv-case.mienne { border: 2px solid #fff0d0; }
.rdv-case.mienne::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff0d0;
}

.rdv-lecture {
  margin: 12px 0 0;
  min-height: 20px;
  font-size: 13px;
  color: #d4c4a7;
  text-align: center;
}
.rdv-lecture b { color: #f0cf8b; }

/* ---------- Les jours en pastilles, pour le telephone ---------- */
.rdv-pastilles { display: none; gap: 6px; margin-bottom: 14px; }
.rdv-pastille-jour {
  flex: 1;
  padding: 6px 2px 5px;
  border: 1px solid rgba(148, 113, 62, 0.3);
  border-radius: 7px;
  background: #050d12;
  color: #d4c4a7;
  font: 600 11px/1.2 Georgia, serif;
  cursor: pointer;
}
.rdv-pastille-jour.active { border-color: #e4c38b; color: #f0cf8b; }

/* Six barres, quatre heures chacune : c'est ce petit histogramme qui sauve la vue
   d'ensemble quand on n'affiche qu'un jour a la fois. */
.rdv-mini {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 14px;
  margin-top: 4px;
}
.rdv-mini i { width: 3px; background: #94713e; border-radius: 1px; min-height: 1px; }

/* ---------- Les cinq creneaux ---------- */
.rdv-top { margin-top: 26px; border-top: 1px solid rgba(148, 113, 62, 0.28); padding-top: 18px; }
.rdv-top h3 {
  margin: 0 0 14px;
  font: 700 17px/1.2 Georgia, serif;
  letter-spacing: 0.05em;
  color: #e4c38b;
}
.rdv-top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rdv-top li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(148, 113, 62, 0.25);
  border-radius: 8px;
  background: #081218;
}
.rdv-medaillon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 30px;
  color: #0a1319;
  background: linear-gradient(145deg, #fff0d0, #94713e);
  clip-path: polygon(50% 0, 93% 12%, 88% 73%, 50% 100%, 12% 73%, 7% 12%);
  font: 700 13px/1 Georgia, serif;
}
.rdv-top .rdv-quand { flex: 1; font: 600 14px/1.3 Georgia, serif; color: #f6edda; }
.rdv-top .rdv-combien {
  font: 600 13px/1 'Segoe UI', sans-serif;
  color: #f0cf8b;
  white-space: nowrap;
}
.rdv-jy-serai {
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(148, 113, 62, 0.55);
  border-radius: 6px;
  background: transparent;
  color: #e4c38b;
  font: 600 12px/1 'Segoe UI', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.rdv-jy-serai:hover { border-color: #e4c38b; color: #fff0d0; }
.rdv-jy-serai.faite { border-color: rgba(148, 113, 62, 0.25); color: #8d7f66; cursor: default; }

.rdv-vide { margin: 0; font-size: 13px; color: #a89a80; }

/* ---------- Telephone : un jour a la fois ---------- */
@media (max-width: 700px) {
  /* Plus compact au pouce, et colle au bord : sur un ecran etroit, chaque
     millimetre pris au contenu se voit. */
  .btn-rdv-flottant {
    right: 12px;
    bottom: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 0.55rem 0.8rem;
    font-size: 14px;
    gap: 0.45rem;
  }

  .pied.home-footer { padding-bottom: 4.5rem; }

  .rdv-corps { padding: 18px 14px 24px; }
  .rdv-tete h2 { font-size: 21px; }
  .rdv-pastilles { display: flex; }
  .rdv-reperes { display: none; }
  .rdv-jour { display: none; grid-template-columns: 1fr; }
  .rdv-jour.affiche { display: grid; }
  .rdv-jour-nom { display: none; }
  .rdv-cases { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .rdv-case { height: 46px; border-radius: 6px; }
  /* L'heure s'ecrit dans la case : six par ligne, la place existe. */
  .rdv-case::before {
    content: attr(data-heure);
    position: absolute;
    inset: 2px 0 auto 0;
    font: 600 10px/1 'Segoe UI', sans-serif;
    color: rgba(246, 237, 218, 0.45);
  }
  .rdv-case.mienne::after { margin-top: 3px; }
  .rdv-top li { flex-wrap: wrap; }
  .rdv-top .rdv-quand { flex: 1 1 100%; order: 1; }
  .rdv-medaillon { order: 0; }
  .rdv-top .rdv-combien { order: 2; }
  .rdv-jy-serai { order: 3; margin-left: auto; }
}
/* Finitions communes aux encarts du tournoi ; les textures sont déjà en cache. */
#rdv-fenetre {
 border-radius:2px;
 background:linear-gradient(#07131bf2,#07131bf5),url('/img/brand/terrain-carte-reference.webp') center/cover;
 scrollbar-width:thin;
 scrollbar-color:#967647 #07131b;
}
.rdv-corps { background:linear-gradient(#b38b50,#b38b50) 12px 12px/28px 1px no-repeat,linear-gradient(#b38b50,#b38b50) 12px 12px/1px 28px no-repeat; }
.rdv-tete { padding:8px 24px 0; }
.rdv-tete h2 { font-weight:400; text-transform:uppercase; font-size:24px; letter-spacing:.035em; text-shadow:0 2px 3px #000; }
.rdv-tete p { font:14px/1.65 system-ui,sans-serif; }
.rdv-tete p strong { font-weight:600; color:#ead4ad; }
.rdv-fermer { width:36px; height:36px; border-radius:2px; z-index:2; }
.rdv-periodes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 12px 106px; color:#ddbd87; font:12px/1.5 system-ui,sans-serif; }
.rdv-periodes span { padding-left:6px; border-left:1px solid #a5824b88; }
.rdv-reperes .rdv-barre { font-size:11px; color:#cdbb9b; }
.rdv-jour-nom { font:13px/1.4 system-ui,sans-serif; letter-spacing:0; }
.rdv-case { height:30px; border-radius:2px; }
.rdv-case:nth-child(6n + 1) { border-left-color:#ad8958; }
.rdv-case:focus-visible { outline:2px solid #fff0d0; outline-offset:2px; z-index:1; }
.rdv-lecture { font:13px/1.5 system-ui,sans-serif; }
.rdv-top h3 { font-weight:400; font-size:19px; color:#e4c38b; }
.rdv-top li { padding:12px; border-radius:2px; background:linear-gradient(110deg,#13242dcc,#071219ee); }
.rdv-top .rdv-quand { font-size:15px; font-weight:400; }
.rdv-jy-serai { min-height:38px; padding:9px 14px; border-radius:2px; border-color:#c29a60; background:linear-gradient(#b99155,#886030); color:#100e09; box-shadow:inset 0 0 0 2px #36271455; font-size:13px; }
.rdv-jy-serai:hover { background:linear-gradient(#d1ad72,#a37b43); color:#100e09; }
.rdv-jy-serai.faite { background:#14262c; color:#dfc798; border-color:#79633f; box-shadow:none; }
.rdv-vide { font:14px/1.6 system-ui,sans-serif; }
@media(max-width:700px) {
 .rdv-tete { padding:22px 0 0; }
 .rdv-tete h2 { font-size:21px; }
 .rdv-periodes { display:none; }
 .rdv-pastilles { overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
 .rdv-pastille-jour { flex-shrink:0; border-radius:2px; }
 .rdv-case { height:46px; border-radius:2px; }
 .rdv-case::before { font-size:12px; top:7px; color:#f6edda; text-shadow:0 1px 2px #000; }
 .rdv-case:disabled::before { color:#9b907c; }
 .rdv-top li { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; }
 .rdv-medaillon { grid-column:1; grid-row:1; }
 .rdv-top .rdv-quand { grid-column:2 / 4; grid-row:1; }
 .rdv-top .rdv-combien { grid-column:1 / 4; grid-row:2; }
 .rdv-jy-serai { grid-column:1 / 3; grid-row:3; margin-left:0; }
 .rdv-top .rdv-partager { grid-column:3; grid-row:3; margin-left:0; }
}