.grid-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 1em;
    justify-content: center;
     display: flex;
    flex-wrap: wrap; 
     gap: 12px;
}
.game-list .grid-list{
  margin-top: 0;
}
.card-header.subtuto,
.card-header.list-gsub,
.card-header.tuto{
     background: linear-gradient(
    90deg,
    lightgray 0%,
     white 30%,
    hsl(var(--h), 85%, 45%) 100%
  );
}
#slugsub {
  scroll-margin-top: 80px; /* ajuste la valeur */
}

.card-body.tuto{
    overflow: auto;
    padding-top: 0;
}

.card-body.content.tuto {

  background: var(--card-light);

}
.card-body.subtuto{
  padding-top: 0;

  background: var(--card-light);

}
[data-animation="bankPearls"] svg{
  width: fit-content;
  margin: 10px auto;
  border : solid 3px;
  border-radius: 12px;
  box-shadow: 2px 2px 5px black;
}
.wrapper-tuto{
  width: fit-content;
  margin: 0 auto;     /* centre horizontalement */
      margin-top: 1em;

  border: 2px solid black;
  border-radius: 7px;
  box-shadow: 2px 2px 3px black;
  padding:0.5em;
  background: white;
}
.wrapper-tuto p{
  max-width:600px;
}
.wrapper-tuto  ul{
    list-style-image: url("../assets/svg/index-right.svg");
    list-style-image: url("../assets/svg/triangular-flag.svg");
    list-style-image: url("../assets/svg/crayon.svg");

}
.wrapper-tuto  ul ul{
    list-style-image: url("../assets/svg/green-flag.svg");

}
.wrapper-tuto li{
  padding: 6px 10px;
  margin-left: 1em;
}
.none{
    list-style-image: url("../assets/svg/green-flag.svg");
  margin-left:2em;
}
[data-block] {
  position: relative;
  padding-left: 20px;
  
}

[data-block]::before {
  content: ""; /* OBLIGATOIRE */
  position: absolute;
  left: 0em;
  top: 0.2em;

  width: 20px;
  height: 20px;

  background-size: contain;
  background-repeat: no-repeat;
}
[data-block="ex"]::before {
  
  left: -1.5em;
  top: 0.5em;
  background-image: url("../assets/svg/green-flag.svg");
  background-image: url("../assets/svg/check-mark.svg");

}
[data-block="arrow"]::before {

  background-image: url("../assets/svg/mono/arrow-right.svg");

}
[data-block="comma"]::before {
  background-image: url("../assets/svg/mono/comma.svg");

}

[data-block="chevron-left"]::before {

  background-image: url("../assets/svg/mono/chevron-left.svg");

}
[data-block="chevron-right"]::before {

  background-image: url("../assets/svg/mono/chevron-right.svg");

}
[data-block="warning"],
[data-block="ex"] {
  background:linear-gradient(0deg, #ddd, #fff);
  border-radius: 6px;
  border: 0.5px solid black;
  margin: auto;
  margin-top: 6px;
  padding:6px 10px;
  width: fit-content;
  padding-left: 5px;
}
[data-block="warning"]::before {
  left: -3em;
  top: 0.5em;
  
z-index:2;
  width:50px;
  height: 25px;
  background-image: url("../assets/svg/hushed-face.svg"),
                    url("../assets/svg/megaphone.svg");
  background-position: left center, right center;

}
[data-block="warning"]{
  background:linear-gradient(0deg, #f9cfcf, #fff);
  margin-left: 4rem;
  margin-top: 0.8rem;
}
[data-block="warning"]::after {
  content: attr(data-label);
  position: absolute;
    line-height: 1; /* 🔥 clé */

  right:90%;
  top: -0.7em;
  background-color: #fff;
  display: flex;                /* 🔥 clé */
  align-items: flex-start;          /* vertical */
  justify-content: end;      /* horizontal */
  white-space: nowrap;;
  padding:0 3px 2px 0;
  margin: 0;
  border-radius: 4px;
z-index:1;
  width: fit-content;
  vertical-align: text-top;
  font-size: 0.9rem;
  font-weight: bold;
  color: red;
}
div [data-block="ex"] p{
  padding:3px auto;
}
[data-animation="tabPyth"],
[data-animation="tabPythBarrette"]{
  width:500px;
}
.card-header.game{
    background: linear-gradient(
        0deg,
        hsl(var(--hb), 95%, 60%),
        hsl(var(--hb), 95%, 85%)
    );
    background: linear-gradient(
    90deg,
    lightgray 0%,
     white 30%,
    hsl(var(--hb), 85%, 45%) 100%
  );
}
.card-body.subtuto,
.card-body.content.tuto,
.card-body.game-list{
    background: linear-gradient(to bottom, white, #ccc);
}
.card-body.game-list svg{
   vertical-align: middle;
    overflow: visible;
}
.card-footer.list-gsub,
.card-footer.game-list{
  background-color: #ccc;
  padding: 1em 0;
}
.imp1 {
    --imp: hsl(320, 100%, 70%);
}

.imp2 {
    --imp: hsl(60, 100%, 70%);
}

.imp3 {
    --imp: hsl(120, 100%, 70%);
}

.imp4 {
    --imp: hsl(180, 100%, 80%);
}

.imp5 {
    --imp: hsl(260, 100%,80%);
}
[class^="imp"] {
    padding: 1px 1px;
    border-radius: 4px;
    background: linear-gradient(to top, white 0%, var(--imp) 20%,var(--imp) 80%, white 100% );
    background: var(--imp);
    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),   /* bas */
        inset 0 -2px 5px rgba(255,255,255,0.9),  /* haut */
        inset 1px 0 3px rgba(255,255,255,0.9),   /* droite */
        inset -1px 0 3px rgba(255,255,255,0.9);  /* gauche */

}
.b{
  font-weight: bold;
}
.i{
  font-style: italic;
}
.u{
  text-decoration: underline;
}
.nop{
  padding:0;
}
.icon{
    width:1em;

    vertical-align: middle;
    overflow: visible;

}
.icon.math{
  width:100px;
}
.icon.polygon{
  width:120px;
}
.icon.barrette{
  width: fit-content;
  max-width: 201px;
  height:21px;
}
.green{
  filter:
        sepia(.8)
        saturate(4)
        hue-rotate(60deg)
        brightness(1.05);
}
.blue{
  filter:
        sepia(.8)
        saturate(4)
        hue-rotate(100deg)
        brightness(1.05);
}
.btnPi,
.btn2,
.btn3{
    width:25px;
    height: 25px;
    padding-bottom: 3px;
    margin: 5px;

    font-size:23px;
    font-weight:bold;
    font-family:serif;

    color:#222;
display: inline-flex;
justify-content: center;
align-items: center;
    background:#f4f4f4;

    border:2px solid #444;
    border-radius:10px;

    cursor:pointer;

    box-shadow:
        0 4px 0 #777,
        0 6px 10px rgba(0,0,0,0.15);

    transition:
        transform 0.05s,
        box-shadow 0.05s,
        background 0.1s;

    user-select:none;
}

.btnPi:hover,
.btn2:hover,
.btn3:hover{
    background:#ffffff;
}

.btnPi:active,
.btn2:active,
.btn3:active{

    transform:translateY(4px);

    box-shadow:
        0 1px 0 #777,
        0 2px 4px rgba(0,0,0,0.2);

    background:#e8e8e8;
}
.list-schema li{
  display:grid;
   grid-template-columns:auto 1fr;
  
}
.schema img,
.schema svg{
  fill:white;
  background: white;
  border-radius: 6px;
  border: 1px solid black;
  width: 100%;
}
.schema img{
  background: none;
  border: none;
}
.schema{
  background:linear-gradient(-45deg, #bbb, #fff);
  border-radius: 6px;
  border: 0.5px solid black;
  margin:5px auto;
  padding:5px;
  box-shadow: 0px 0px 5px black;
}
.circle-row{
  width: fit-content;
    display:grid;
    grid-template-columns: 300px auto;
    align-items:center;
    gap:20px;
      border-radius: 15px;
  border: 0.5px solid black;
padding: 5px;
    background:linear-gradient(0deg, #ddd, #fff);
}

.circle-img{
    display:flex;
    justify-content:center;
    align-items:center;
}
.icon.solid{
  filter:
        sepia(.8)
        saturate(4)
        hue-rotate(0deg)
        brightness(1.05);
}
[data-icon="comma"]{
  width:10px;
  fill:red;
}
.icon.hand{
  width:20px;
}
.icon.face{
  width: 25px;
}
.icon.img{
  padding: 5px 3px;
  width: 50px;
}
.icon.game{
  width: 3em;

}
.icon.game text{
  font-size:30pt;
}
.icon.direction,
.icon.sub{
  width:2em;
}
.icon.play{
  width:1em;
}

.icon.sub path{
    fill:radial-gradient(
        white,
        hsl(var(--h), 95%, 85%)
  );
  fill:hsl(var(--h), 95%, 65%);
  fill:#7ec8ff;
  fill:white;
}
.icon.sub text{
  font-size:40pt;
  stroke: hsl(var(--h), 95%, 65%);
}
.icon.grammar{
  background: white;
  width: 40px;
  padding: 3px;
  border: solid 1px black;
  border-radius: 10px;
}
.icon.content{
  width: 740px;
  height: 350px;
}
.tuto-index {
  display: inline-block;
  background: white;
  color: var(--base);
  border: 2px solid var(--base);
  border-radius: 50%;
  padding: 0.2em 0.4em;
  font-weight: bold;
  margin-right: 0em;
}
.subtuto-index {
  display: inline-block;
  background: white;
  color: black;
  border: 1px solid black;
  border-radius: 50%;
  padding: 0.1em 0.2em;
  font-weight: normal;
  margin-right: 0em;
}

.game-index {
  display: inline-block;
  background: white;
  color: black;
  border: 2px solid var(--b-base);
  border-radius: 50%;
  text-align: center;
  min-width: 35px;
  padding: 0.2em 0.4em;
  font-weight: bold;
  margin-right: 0em;
}
ul .enum{
  display:flex;
  flex-direction: column;
    flex-wrap: wrap;
    gap:2em;
    justify-content: center;

}
.enum [data-block="ex"]{
  display: inline-block;
  height: 120px;
  margin-left: 2em;
  width:250px;
}
div .enum{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.btn.game,
.btn.subtuto{
    max-width: 250px;
  white-space:nowrap;
  word-break: break-all;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  
}
.btn.subtuto{
   background: linear-gradient(
    135deg,
    lightgrey,white,
    hsl(var(--h), 85%, 45%)
  );
}
.btn.subtuto:hover{
  background: radial-gradient(
     white 30%,
    hsl(var(--h), 85%, 45%) 100%
  );
}
.btn.subtuto.active{
  background:  hsl(var(--h), 85%, 45%) ;
}
.btn.game{
   background: linear-gradient(
    135deg,
    lightgrey,white,
    hsl(var(--hb), 85%, 45%)
  );
}
.btn.game svg{
  width: 40px;
}
/* Conteneur de la liste */
.card-body.game-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;  /* espace entre chaque exercice */
    overflow-y: auto;  /* scroll si trop long */

}

/* Card pour les listes d'exercices */
.card.list-gsub {
    max-width: 210px ;
  width: fit-content;
    /* Bordure plus fine */
    border: 1.5px solid #000;
     /* Coins légèrement plus petits */
    border-radius: 12px;   
    /* Ombre estompée mais visible */
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);   
    margin-top: 16px; /* un peu plus compacte verticalement */
}
.card.list-gsub .card-header {
  word-break: break-all;
display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
    padding: 8px 12px;
    white-space: nowrap;
    font-weight: 700;
    border-bottom: 1.5px solid #000;
    font-size: 1rem;
    vertical-align: middle;
}
.card.list-gsub .card-header svg {
  position: relative;
   display: inline-block;
 
}

.subtitle{
   display: inline-block;
  width: fit-content;
  overflow: hidden;

}
.subtitle .defile{
     display: inline-block;
  position: relative;
    animation: none;

}
.btn.game:hover .defile.scroll,
.btn.subtuto:hover .defile.scroll,
.card.list-gsub .card-header .subtitle:hover .defile.scroll{
  animation: scrollBack 3s ease-in-out 1;
}
@keyframes scrollBack {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}
/* Body de la card */
.card.list-gsub .card-body {
    padding: 12px;
    line-height: 1.4em;
    max-height: 400px;
    overflow: auto;
    background: #fcfcfc;
  display: flex;
  flex-direction: column;
    max-width: 100%;

}
/* Active ou sélectionné */
a.link.list-game.active {
    background-color: #d0d0d0;
    font-weight: 600;
}
a.link.list-game {
    padding: 0.2rem 0.5rem;
    margin:0 auto;
    margin-bottom: 4px;
    background-color: #fffbe0; /* couleur claire type BD */
    border: 1px solid #000;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
  word-break: break-word;
    white-space: normal;
      overflow-wrap: break-word;
    width: min-content;
    min-width: 180px ;
  max-width: 100%;
    transition: transform 0.1s, background-color 0.2s;
      background: linear-gradient(
    135deg,
    lightgrey,white,
    hsl(var(--hb), 85%, 45%)
  );
}

a.link.list-game:hover {
    background-color: #fff2b2;
    background: var(--base);
    transform: translateX(2px);
    background: radial-gradient(
         ivory 0%,
    hsl(var(--hb), 85%, 45%) 100%
  );
}

#slugsub h2{
  text-align: center;
  margin:10px auto;
  width:fit-content;
}

.step{
    display:none;
}

.step.visible{
    display:block;
}

#btnSuite{
    margin-top:20px;
    padding:10px 20px;
    cursor:pointer;
}

.triangles{
  border-radius: 12px;
  text-align: center;
  margin: 20px auto;
  overflow: hidden;
  border: outset 1px solid black;
  box-shadow: 2px 2px 5px black;
  border: 0.5px outset black;
  border:none;
}
.triangles td{
  width: 120px;
  background: white;
  margin:5px;
  padding: 5px;
}
.triangles b{
  display:block;
}
.triangles .vide{
  background:#ccc;
}
#wrapper-indicatif{
  border-radius: 15px;
  margin:0 auto;
  border:solid 2px black;
  width: fit-content;
    overflow: hidden;

}
table.indicatif{
  text-align: center;
  border-collapse: separate;
  border-spacing: 0;
      overflow: hidden;

}
table.indicatif th{
  background-color: red;
  border-top: none;
}
table.indicatif th,
table.indicatif td{
  padding: 5px 8px;
  border:solid 1px black;

}
table.indicatif tr:last-child td{
  border-bottom:none;
}

table.indicatif th:last-child,
table.indicatif td:last-child{
  border-right:none;
}


table.indicatif th:first-child,
table.indicatif td:first-child{
  border-left:none;
}

.numeration th {
  background-color: #fefefe;
}

.num1 {--digit: hsl(120, 100%, 78%);}
.num2 {--digit: hsl( 240, 100%, 80%);}
.num3 {--digit: hsl(0, 100%, 80%);}
[class^="num"]{
    background-color: var(--digit)!important;
}
.numeration {
  border-collapse: collapse;
  margin: 15px auto;
}

.numeration th,
.numeration td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  font-weight: bold;
}


.exp {
    text-align: center;
    display: block; /* important */

  width: fit-content;
  margin:auto;
  background-color: #f4f6ff;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
}
.dflex{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ph {
  font-family: 'Charis SIL', 'Noto Sans', sans-serif;
  background-color: var(--b-base);
  background: none;
  padding: 2px 6px;
  border-radius: 4px;
}

.verbs,
.adverbs,
.prepositions,
.pronouns,
.determinants,
.numberList{
  display: flex;
  justify-content: center;
  gap:10px;
  flex-wrap: wrap;
  margin-bottom: 20px;

}

.verbs .card,
.adverbs .card,
.prepositions .card,
.pronouns .card,
.determinants .card,
.numberList .card{
  min-width: 150px;
  max-width: 300px;
  width: fit-content;
  height: fit-content;
}
.determinants .card-header{
  background: #7ec8ff;
}
.pronouns .card-header{
  background: #7a3db8;
  color:white;
}
.prepositions .card-header{
  background: green;
  color:white;
}
.adverbs .card-header{
  background: orange;
}
.verbs .card-header{
  background: red;
}
.numberList .card-header{
  background: hsl(var(--hb), 85%, 45%);
}
.verbs .card-body,
.adverbs .card-body,
.prepositions .card-body,
.pronouns .card-body,
.determinants .card-body,
.numberList .card-body{
  background: ivory;
}
.cours {
  margin-left: 20px;
}

.content ul {
  padding-left: 25px;
}
.content p{
    margin: 0.3rem auto;
}

.center{
    width:fit-content;
    margin: 0 auto;
}

#value{
    margin:3px auto;
    width: 50px;
}




.numberline {
  width: 400px;
  position: relative;
  font-family: sans-serif;
margin: 0 auto;
}

/* slider de base : PAS appearance:none ici */
#slider {
  width: 100%;
  height: 3px;
    display: block;
  margin: 7px auto;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: blue; /* pas de remplissage à gauche */
}

/* piste uniforme (pas de couleur progressive) */
#slider::-webkit-slider-runnable-track {
  height: 3px;
  background: #ddd;      /* couleur de la piste */
  border-radius: 4px;
}
#slider::-moz-range-track {
  height: 3px;
  background: #ddd;
  border-radius: 4px;
}

/* curseur = trait vertical, inspiré de ton style custom */
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;   /* obligatoire pour changer la forme */
  width: 3px;                   /* largeur nulle → on ne voit plus de boule */
  height: 20px;
  background: lime !important;    /* pas de boule */
  margin-top: -6px;
  border-radius: 10px;
  cursor: pointer;
}

#slider::-moz-range-thumb {
  width: 3px;
  height: 20px;
  background: red;
  border: none;
  cursor: pointer;
}

/* labels -10, -5, 0, 5, 10 */
.labels {
  position: relative;
  margin-top: 6px;
  height: 18px;
  font-size: 14px;
}
.labels span {
  position: absolute;
  transform: translateX(-50%);
}

.ruler {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Ligne principale */
.line td {
  border-bottom: 2px solid black;
  height: 0;            /* ne cache plus rien */
  padding: 0;           /* évite tout gonflement */
  line-height: 0;       /* sécurité */
}


/* Graduations */
.ticks td {
  border-right: 1px solid black;
  height: 15px;
}

.ticks td.big {
  border-right: 2px solid black;
  height: 15px;
}

/* Labels */
.labels td {
  text-align: center;
  padding-top: 4px;
  font-size: 14px;
}
.ticks td:last-child {
  border-right: none;
}
.labels td.ghost {
  visibility: hidden;
}

.labels td.show {
  visibility: visible;
  color: red;
  font-weight: bold;
}

.ghost td {
  border-right: 1px solid transparent;
  height: 15px;
}

.ghost td.big {
  border-right: 2px solid transparent;
}
/* graduation rouge */
.ticks td:hover {
  border-right-color: red !important;
}

/* ghost rouge en même temps */
.ticks td:hover ~ .ghost td {
  /* rien ici : on va cibler via JS */
}
.ticks td:hover {
  border-right-color: red !important;
  box-shadow: inset -2px 0 0 red;   /* épaisseur interne */
}
.ghost td.hovered {
  border-right-color: red;
  box-shadow: inset -2px 0 0 red;
}
.ticks td[data-index="ghost-end"] {
    border-right: none !important;
    box-shadow: none !important;
}

#game-zone .ticks td:hover
{
    border-right-color: black !important;
    box-shadow: none !important;
}

#game-zone .ticks td,
#game-zone .ghost td {
    pointer-events: auto; /* on garde les clics */
}

.colored {
    border-right-color: currentColor !important;
    box-shadow: inset -3px 0 0 currentColor !important;
}
.preview {
    border-right-color: currentColor !important;
    box-shadow: inset -3px 0 0 currentColor !important;
    opacity: 0.5; /* pour montrer que ce n’est pas fixé */
}
 svg .clock{
    border: 1px solid #ccc;
    touch-action: none;
  }

  .tick { stroke: black; }
  .hour-tick { stroke-width: 3; }
  .minute-tick { stroke-width: 1; }

  .hand {
    stroke: black;
    stroke-linecap: round;
    cursor: pointer;
  }

  text .hour-number {
    font-family: sans-serif;
    font-size: 16px;
    text-anchor: middle;
    dominant-baseline: middle;
  }

  #timeDisplay {
    margin-top: 10px;
    font-size: 20px;
  }
  .clock-game  .hand {
    stroke-linecap: round;
  }