body {
    background-image: url("https://i.imgur.com/sxwVXz6.png");
    background-attachment: fixed;
    font-family: "Trebuchet MS", Arial, sans-serif;
}

.mobileMargin {
    margin-block: 3px!important;
}

button {
    background: #fff;
    border: solid 1px #dedede;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 4px 8px;
}

td
{
    text-align: center;
    font-weight: bold;
}

.card-img-top:hover {
    transform: scale(1.05);
}

.sectionancre {
  background-color: #d1d1d1;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 40%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.sectionancre:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.sectionancreactive:after {
  content: "\2212";
}

.tournoiancre {
  background-color: #d1d1d1;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 70%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.tournoiancre:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.tournoiancreactive:after {
  content: "\2212";
}

.panelsa {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  width: 40%;
  overflow: hidden;
  font-size: 20px;
  transition: max-height 0.2s ease-out;
}

.tournoifr {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  width: 70%;
  overflow: hidden;
  font-size: 18px;
  transition: max-height 0.2s ease-out;
}

.quickaccess {
  float: left;
}

.leftqa {
  text-align: left;
}

.tournoiqa {
  text-align: left;
  font-weight: normal;
}

/* wrapper responsive : largeur fluide */
.img-toggle-wrap{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;

  /* état "petit" = 640/512 */
  aspect-ratio: 640 / 512;

  transition: aspect-ratio .2s ease;
}

/* l'image remplit le wrapper */
.img-toggle{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;

  transition: object-fit .2s ease, object-position .2s ease;
}

/* état "grand" = 640/720 */
.img-toggle-wrap.is-large{
  aspect-ratio: 640 / 720;
}

.img-toggle-wrap.is-large .img-toggle{
  object-fit: contain;     /* montre tout */
  object-position: center;
}

/* overlays haut/bas UNIQUEMENT sur images "has-large" ET seulement en mode non-large */
.img-toggle-wrap.has-large:not(.is-large)::before,
.img-toggle-wrap.has-large:not(.is-large)::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12%;              /* ajuste : 10% à 20% selon ton rendu */
  pointer-events: none;
  z-index: 2;
}

/* dégradé blanc en haut */
.img-toggle-wrap.has-large:not(.is-large)::before{
  top: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.95),
    rgba(255,255,255,0)
  );
}

/* dégradé blanc en bas */
.img-toggle-wrap.has-large:not(.is-large)::after{
  bottom: 0;
  background: linear-gradient(to top,
    rgba(255,255,255,.95),
    rgba(255,255,255,0)
  );
}

/* important : le wrapper doit être positionné pour que ::before/::after se placent bien */
.img-toggle-wrap{
  position: relative;
}