/* Par B MOREAU */

/* responsive */

@media (min-width: 480px) and (max-width: 780px) {
  .imageflottante {
    float: none;
    width: auto;
  }

  #img1 {
    float: none
  }

  body {
    font-size: 1.2em;
  }
}

@media (min-width: 781px) and (max-width: 979px) {
  .imageflottante {
    float: none;
    width: auto;
  }

  #img1 {
    float: none
  }
}
@font-face {
 font-family: 'LondrinaShadow';
 src: url(LondrinaShadow.ttf) format('ttf');
}
/* Couleurs lignes Dashboard */
/* Couleurs lignes renforcées (ajoute à ton CSS global si possible) */
.dashboard-table .score-row.good td {
  background-color: #d4edda !important;
  /* Vert clair */
  color: #155724 !important;
}

.dashboard-table .score-row.medium td {
  background-color: #fff3cd !important;
  /* Orange clair */
  color: #856404 !important;
}

.dashboard-table .score-row.poor td {
  background-color: #f8d7da !important;
  /* Rouge clair */
  color: #721c24 !important;
}

.dashboard-table th,
.dashboard-table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #dee2e6;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.dashboard {
  width: 100%;
  text-align: center;
}

.form-centered {
  display: flex;
  flex-direction: column;
  /* Labels/inputs en colonne */
  justify-content: center;
  /* Centre horizontal si flex */
  align-items: center;
  /* Centre horizontalement tout le contenu */
  max-width: 800px;
  /* Optionnel : Limite largeur pour lisibilité */
  margin: 0 auto;
  /* Centre la form elle-même sur la page */
  gap: 5px;
  /* Espacement uniforme entre inputs */
  flex-wrap: wrap;
  /* Wrap sur mobile */
}

.form-centered button {
  width: auto;
  /* Laisse le bouton sa taille naturelle */
  margin-top: 10px;
  /* Espacement au-dessus */

}

/* Fix décalage input confirmé */
form input[name="confirm_password"] {
  margin-right: 0 !important;
  /* Zero tout margin droit */
  padding-right: 0 !important;
  /* + padding si besoin */
  box-sizing: border-box;
  /* Inclut padding dans largeur */
  display: inline-block;
  /* Évite full-width forcé */
}

/* Si c'est dans un flex label, centre le tout */
form label {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centre horizontal si flex */
  gap: 5px;
  /* Espacement uniforme entre inputs */
  flex-wrap: wrap;
  /* Wrap sur mobile */
}
:root {
    --main-font: 'Poppins', sans-serif;
}
body {
  /*font-family: */
  font-family: var(--main-font);
  color: #40565C;
  font-style: 100%;
  margin: 25px;
  background-color: #F5FAFC;
  /*background-image: url(img/fond3.png);*/
  --color-bouton: #1FACD5;
  --color-orange: orange;
  font-size: 1.2em;
}

/* html et css */
h1.headertitle {
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 50px;
  text-align: center;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.headertitle {
    animation: fadeUp 0.8s ease-out;
}

h2.headertitle {
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 30px;
}

h3.headertitle {
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 30px;
}

.londrina {
  font-family: "Londrina Shadow", sans-serif;
  font-style: normal;
}

.center {

  margin-right: 200px;

}

.center1 {

  text-align: center;

}

.jxgbox {
  margin-right: auto;
  margin-left: auto;
  width: 600px;
  height: 400px;
}

#para_1 {
  background-color: white;
  padding-left: 15px;
}

p {
  text-align: justify;
}

mark {
  background-color: yellow;
  color: black;
}

/*mise en form ico insta nav */
.insta {
  border-style: none;
  border: 0;
  font-size: 15px;
  font-family: var(--main-font);

}

.insta td,
tr {
  border-style: none;
  border: 0;

}

/*mise en forme arbre proba */


.arbre td,
tr {
  width: 50px;
  height: 50px;
  text-align: center;
  border: none;
  padding: 3px;
  background-color: whitesmoke;

}

.arbreetroit td {
  width: 30px;
}


/*mise en form ico insta nav */
.tableau td {
  border-style: solid;
  border: 2;
  font-size: 15px;
  font-family:var(--main-font);

}

.tableaucentre {
  text-align: center;
}

/*JavaScript */

.style_input {
  height: 40px;
  width: 80px;
  text-align: center;
  font-family: Cambria Math;
  font-style: italic;

}

.style_inputcourt {
  height: 30px;
  width: 80px;
  text-align: center;
  font-family: Cambria Math;
  font-style: italic;
  text-align: center;

}

.style_inputexp {
  height: 30px;
  width: 50px;
  text-align: left;
  font-family: Cambria Math;
  font-style: italic;
  text-align: center;

}

.style_inputexplong {
  height: 30px;
  width: 60px;
  text-align: left;
  font-family: Cambria Math;
  font-style: italic;
  text-align: center;

}

.style_inputexplong {
  height: 30px;
  width: 110px;
  text-align: left;
  font-family: Cambria Math;
  font-style: italic;

}

.style_bouton {
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  color: white;
  background: #1FACD5;
  cursor: pointer;
}

.style_bouton:hover {
  background: orange;
}

.style_input_fct {
  height: 30px;

  text-align: center;

}

#xChoisi1,
#xChoisi,
#xChoisi2,
#signeChoisi,
#xChoisia,
#xChoisib,
#xChoisic,
#signeChoisia,
#signeChoisib,
#signeChoisic,
#xChoisi11,
#xChoisi12,
#xChoisi13,
#xChoisi21,
#xChoisi22,
#xChoisi23,
#signeChoisi1,
#signeChoisi2,
#signeChoisi3 {
  font-style: italic;
  font-family: Times New Roman;
  font-size: 16;
  text-align: center;
}

#variChoisi1,
#variChoisi2,
#variChoisi3,
#xpoint1,
#ypoint1,
#xpoint,
#ypoint,
#rayon {
  font-style: italic;
  font-family: Times New Roman;
  font-size: 16;
  text-align: center;
  height: 30px;
}

/* Header */

header {
  width: 100%;
  height: 100px;
  line-height: 100px;
  border: 10px #05546B;


  /*background: rgb(245, 245, 245, 0.6);

  box-shadow: 8px 8px 12px #555;*/
}

background-equations {
  background-image: url(img/fondentete.png);
  background-size: cover;
  opacity: 0.6;
}

header::before {
  background-image: url(img/fondentete.png);
  background-size: cover;
  opacity: 0.6;
}

header h1 {
  float: left;
  width: calc(100% - 100px);
  text-align: center;
  margin: 0;
}

header img {
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}

/* Nav */
/*nav
{
    background: whitesmoke;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    float: left;
    width: 250px;
    border: 1px #05546B;
    border-radius: 10px;
    box-shadow: 8px 8px 12px #555;
}
*/

/*Reset CSS*/
* {
  margin: 0px;
  padding: 0px;
  font-family: var(--main-font);

}

nav {
  width: 100%;
  margin: 0 auto;
  background-color: #1FACD5;
  position: sticky;
  top: 0px;
  border: 5px orange;
  box-shadow: 8px 8px 12px #555;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  float: left;
  width: 12.2%;
  text-align: center;
  position: relative;
}

nav ul::after {
  content: "";
  display: table;
  clear: both;
}

nav a {
  display: block;
  text-decoration: none;
  color: #40565C;
  border-bottom: 2px solid transparent;
  padding: 10px 0px;
}

nav a:hover {
  color: orange;
  border-bottom: 2px solid gold;
}

.sous {
  display: none;
  box-shadow: 0px 1px 2px #CCC;
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

nav>ul li:hover .sous {
  display: block;
}

.sous li {
  float: none;
  width: 100%;
  text-align: left;
}

.sous a {
  padding: 10px;
  border-bottom: none;
}

.sous a:hover {
  border-bottom: none;
  background-color: RGBa(200, 200, 200, 0.1);
}

.deroulant>a::after {
  content: " ▼";
  font-size: 12px;
}

.conteneur {
  margin: 50px 20px;
  height: 1500px;
}


.tableinvi {
  border: none;
  background-color: rgba(245, 245, 245, 0);

}

.tableinvi tr,
td {
  border: none;
  background-color: rgba(245, 245, 245, 0);

}



/*section */
section {
  color: #40565C;
  background: rgb(245, 245, 245, 0.9);
  margin-top: 20px;
  padding: 20px;
  border: 1px #05546B;
  box-shadow: 8px 8px 12px #555;
}

/*adaptation portable*/

@media (max-width: 1200px) {

  body {
    font-family: var(--main-font);
    color: #40565C;
    font-style: 100%;
    margin: 10px;
    /*background-image: url(img/fond3.png);*/
  }

  /*nav
{
    background-color: rgba(245, 245, 245, 0.6);
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 20px;
    padding: 5px;
    float: left;
    width: 95%;
    border: 1px #05546B;
    border-radius: 10px;
    box-shadow: 8px 8px 12px #555;
}

.tableequa, tr, td{
    border:none;
    font-size: 30px;
    vertical-align: middle;
    
}


.tablereponse
{
    border:none;
    font-size: 10px;
    vertical-align: middle;

}

/*section */


}

/* fin adaptation portable*/

.tableequa,
tr,
td {
  border: none;
  font-size: 25px;
  vertical-align: middle;

}


.figure {
  float: left;
  max-width: 100%;


}

section img {
  float: right;
  max-width: 100%;


}

.imgnonfloat {
  float: none;
  max-width: 100%;
}

/* Footer */
footer {
  text-align: center;
  /*position:absolute;*/
  bottom: 10;
  width: 100%;
  padding-top: 25px;
  height: 25px;

}

/* mise en forme ligne de codage en Python Consolas #ADBEC3 */
.codage {
  font-family: Courier;
  color: black;
  background: white;
}

/*.codage
{
  font-family: Consolas;
  color:white;
  background: black;
}*/
.aidecodage {
  font-style: italic;
}

/* Lien */
a {
  text-decoration: underline;
  color: #40565C;
}

/* mise en forme formulaire de contact*/

form {
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: 600px;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div+div {
  margin-top: 1em;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la même dimension */
  width: 300px;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Pour souligner légérement les éléments actifs */
  border-color: #000;
}

textarea {
  /* Pour aligner les champs texte multiligne avec leur étiquette */
  vertical-align: top;

  /* Pour donner assez de place pour écrire du texte */
  height: 5em;
}

.button {
  /* Pour placer le bouton à  la même position que les champs texte */
  padding-left: 550px;
  /* même taille que les étiquettes */

}

button {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les êtiquettes et les champs texte */
  margin-left: .5em;
  margin-top: 1em;
}

input:required {
  border-color: #1FACD5;
  border-radius: 5px;
  height: 40px;
}
input {
  border-color: #1FACD5;
  border-radius: 5px;
 
}

/* mise en forme racine carrée   */
#racinecarree {

  text-decoration: overline;

}

.input_racinecarree {

  text-decoration: overline;
  height: 30px;
  width: 80px;
  text-align: center;
  font-family: Cambria Math;
  font-style: italic;

}

/* mise en forme coordonnées vert   */

.parenthcoor {
  font-size: 300%;
}

.coord {

  font-size: 5px;
  font-family: var(--main-font);
  border: none;
  vertical-align: middle;

}
.coord {
    background: transparent;
    border: none;
}
.coord td {
    border: none;
}

.coord td {
  font-size: 15px;
  text-align: center;
  border: none;
  vertical-align: middle;
  height: 15px;
}



/* mise en forme fraction   */

.fraction {

  font-size: 15px;
  font-family: var(--main-font);
  border-color: whitesmoke;

}

.fraction td {
  font-size: 15px;
  text-align: center;
  border-left-color: whitesmoke;
  border-right-color: whitesmoke;
}

.ba {
  border-bottom-color: black;
  border-right: none;
  border-left: none;
  border-top: none;


}

.alignbas {
  vertical-align: bottom;
}

/*mise en forme tableau de signes*/
.tablesigne {
  font-size: 16px;
  border: none;
  border-width: 2px;
}

.tablesigne td {

  border-bottom-color: black;
  border-width: 2px;
}

.lignehaut {

  border-bottom-color: black;
  border-width: 2px;
}

.bordure{
  border-top-color: whitesmoke;
  border-left-color: whitesmoke;
  border-right-color: black;
  border-width: 2px;
}

.bordure1{
  border-right-color: black !important; 
}

.bordinfinigauche{
  text-align: left;
  border-right-color: whitesmoke;
  border-top-color: whitesmoke;

}

.bordinfinigauchecenter {
  text-align: center;
  border-right-color: whitesmoke;
  border-top-color: whitesmoke;

}

.bordinfinidroite {
  text-align: right;
  border-right-color: whitesmoke;
  border-left-color: whitesmoke;
  border-bottom-color: whitesmoke;
  border-top-color: whitesmoke;

}

input[type=text],
select {
  text-align: center;
  text-align-last: center;

}

.bordssgauchedroite {
  border-right-color: whitesmoke;
  border-left-color: whitesmoke;
  border-bottom-color: whitesmoke;
  border-top-color: whitesmoke;


}

/* mise en forme images   */
#img1 {
  text-align: center;
  width: 50px;
  padding-bottom: 20px;
  padding-top: 4px;

}

#img2 {
  float: right;
}

.imageflottante {
  float: left;
}

.imageflottanteright {
  float: right;
}

/* mise en forme titre h1 snt */
/*cadre image:*/
.frame {
  float: right;

  padding: 15px 25px;
}

#titreh1 {
  text-align: center;
  font-style: 1.6em;
  border-bottom: 3px solid #5A828C;
}

/* mise en forme lien bas de page SNT*/
menu {
  padding: 0;
}

.menu a {
  display: block;
  margin: 1em auto;
  border-radius: 1ex;
  width: 60%;
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #1FACD5;
  cursor: pointer;
}

.menu input {
  display: block;
  margin: 1em auto;
  border-radius: 1ex;
  width: 60%;
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  color: white;
  background: #1FACD5;
  cursor: pointer;
}

.menu span {
  color: white;
}

.menu a:link,
a:visited,
a:focus {
  background: #1FACD5;
}
a:visited.fab fa-instagram{
  background: white;
}
.menu input:link,
input:visited,
input:focus {
  background: #1FACD5;
}

.menu a:hover {
  background: orange;
}

.menu input:hover {
  background: orange;
}

.menu a:active {
  background: green;
  color: white;
}

.menu input:active {
  background: green;
  color: white;
}

ul.menu {
  list-style-type: none;
}

/* mise en forme liste en a. b. c.  */
ol.listlatin {
  list-style-type: lower-latin;
}

/* mise en forme liste sans puce  */
ol.listnone {
  list-style-type: none;
}

/* mise en forme liste cercle vide  */
ol.listcer {
  list-style-type: circle;
}

/* Mise en forme tableau */
table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-size: 0.8rem;
  margin-left: auto;
  margin-right: auto;

  font-family: Courier;
}

td,
th {
 border: 1px solid rgb(190, 190, 190);
  padding: 10px;
  /*font-size: 80%;*/
  text-align: center;
}

th {
  background-color: rgb(235, 235, 235);
}



tr:nth-child(even) td {
  background-color: rgb(245, 245, 245);
}

tr:nth-child(odd) td {
  background-color: rgb(245, 245, 245);
}

caption {
  padding: 10px;
}

/* texte encadré */

span.encadre {
  border: 1px solid black;
  padding: 3px;
}

/* Par B MOREAU */

/* Cartes chapitres : Grille limitée à 2 colonnes */
.chapitres-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Exactement 2 tuiles par ligne */
  gap: 30px;
  /* Plus d'espace pour respirer */
  margin: 20px 0;
  padding: 0 10px;
}

.chapitre-card {
  background: white;
  border: 1px solid #CCC;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  /* Hauteur min pour uniformiser si vidéos */
  min-height: 400px;
  /* Ajuste si tes cartes varient trop */
}

.chapitre-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(31, 172, 213, 0.3);
  border-color: #1FACD5;
}

.chapitre-card h2 {
  margin-top: 0;
  color: #05546B;
  border-bottom: 2px solid #1FACD5;
  padding-bottom: 10px;
  font-size: 1.3em;
}

.liens-chapitre {
  margin-top: 15px;
}

.liens-chapitre p {
  margin: 10px 0;
  text-align: left;
}

.lien-bouton {
  display: inline-block;
  background: #1FACD5;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 5px;
  margin: 5px 0;
  font-weight: bold;
  transition: all 0.3s ease;
}

.lien-bouton:hover {
  background: orange;
  transform: scale(1.05);
  color: white;
}

/* Responsive : 1 colonne sur mobile pour éviter la surcharge */
@media (max-width: 768px) {
  .chapitres-grid {
    grid-template-columns: 1fr;
    /* Une seule tuile par ligne */
    gap: 20px;
  }

  .chapitre-card {
    padding: 15px;
    min-height: auto;
    /* Plus flexible sur petit écran */
  }
}

/* Embeds YouTube dans cartes */
.video-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* Ratio 16:9 pour vidéos */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.chapitre-card .video-embed:hover {
  box-shadow: 0 4px 12px rgba(31, 172, 213, 0.4);
  /* Ombre bleue au hover */
  transform: scale(1.02);
}

/* Responsive : Vidéos plus petites sur mobile */
@media (max-width: 768px) {
  .video-embed {
    padding-bottom: 75%;
    /* Ratio plus large sur petit écran */
    height: 200px;
  }
}

/* Cartes chapitres : Boutons alignés en haut */
.chapitre-card {
  background: white;
  border: 1px solid #CCC;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  /* Uniformise */
  display: flex;
  flex-direction: column;
  /* Empile verticalement : haut → bas */
}

.chapitre-card h2 {
  margin: 0 0 15px 0;
  /* Espace sous titre */
  color: #05546B;
  border-bottom: 2px solid #1FACD5;
  padding-bottom: 10px;
  font-size: 1.3em;
  flex-shrink: 0;
  /* Ne rétrécit pas */
}

.boutons-haut {
  display: flex;
  flex-wrap: wrap;
  /* Passe à la ligne si trop de boutons */
  gap: 10px;
  /* Espace entre boutons */
  margin-bottom: 15px;
  justify-content: flex-start;
  /* Aligné à gauche, ou center si tu préfères */
  flex-shrink: 0;
  /* Fixe en haut */
}

.liens-chapitre {
  flex: 1;
  /* Prend le reste de l'espace (pour vidéo/description) */
  margin-top: 0;
  /* Plus besoin d'espace top */
  display: flex;
  flex-direction: column;
}

.liens-chapitre p {
  margin: 10px 0;
  text-align: left;
}

.lien-bouton {
  display: inline-block;
  background: #1FACD5;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* Évite le wrap forcé sur bouton */
  flex-shrink: 0;
}

.lien-bouton:hover {
  background: orange;
  transform: scale(1.05);
  color: white;
}

/* Fix : Éviter que les tuiles passent sur la nav */
nav {
  z-index: 1000;
  border-radius: 10px;
  /* Nav toujours au top, même au scroll */
  /* Ton background et sticky existants restent */
}

section {
  margin-top: 20px;
  /* Hauteur nav (~100px) + 20px buffer – ajuster si nav change */
  /*  padding et background existants */
}

.chapitres-grid {
  padding-top: 20px;
  /* Petit espace supplémentaire au début de la grille */
  /* 2 colonnes et gap existants */
}

/* Sur mobile, moins de buffer pour coller au top */
@media (max-width: 768px) {
  section {
    margin-top: 80px;
    /* Nav plus compacte sur petit écran */
  }
}

/* Tooltips custom pour boutons exos */
.lien-bouton {
  position: relative;
  /* Pour positionner la bulle */
  /* styles existants : background #1FACD5, padding, etc. */
}

.lien-bouton::after {
  content: attr(title);
  /* Tire le texte du title= */
  position: absolute;
  bottom: 100%;
  /* Au-dessus du bouton ? Non, en dessous pour exos */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 172, 213, 0.95);
  /* Bleu clair, semi-transparent */
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85em;
  white-space: nowrap;
  /* Une ligne */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
  max-width: 250px;
  /* Limite la largeur */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
  /* Espace sous bouton */
}

.lien-bouton::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(31, 172, 213, 0.95);
  /* Flèche pointant vers le bouton */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
  margin-bottom: -5px;
}

.lien-bouton:hover::after,
.lien-bouton:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Sur mobile, fallback au title natif ou ajuste */
@media (max-width: 768px) {
  .lien-bouton::after {
    white-space: normal;
    /* Multi-ligne sur petit écran */
    max-width: 200px;
    font-size: 0.8em;
  }
}

/* Exercice géométrie : Namespace .exo- pour isolation CSS */
.exo-container {
  width: 600px;
  max-width: 800px;
  /* Un poil plus large pour le wrap */
  margin: 20px auto;
}

.exo-equation {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 600px;
  max-width: 700px;
  /* Largeur cadre */
  margin: 20px auto;
  text-align: left;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.exo-equation:hover {
  box-shadow: 0 6px 12px rgba(31, 172, 213, 0.2);
  transform: translateY(-2px);
}

.exo-equation h2 {
  text-align: center;
  color: #05546B;
  margin-bottom: 20px;
  border-bottom: 2px solid #1FACD5;
  padding-bottom: 10px;
}

.exo-equation p {
  margin: 15px 0;
  line-height: 1.5;
  color: #40565C;
  text-align: left;
  /* Force left, anti-justify global */
}

/* Radios : Texte encore plus proche */
/* Radios : Plus d'espace pour le texte, radio compacte */
.exo-option-radio {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 5px;
  border-radius: 5px;
  transition: background 0.2s ease;
  cursor: pointer;
}

.exo-option-radio:hover {
  background: rgba(245, 245, 245, 0.5);
}

.exo-option-radio input[type="radio"] {
  flex-shrink: 0;
  /* Empêche le radio de rétrécir */
  width: 20px;
  /* Largeur fixe, compacte */
  height: 20px;
  margin-right: 8px;
  /* Espace modéré entre radio et texte */
  transform: scale(1.1);
  /* Légèrement plus petit pour équilibre */
  accent-color: #1FACD5;
}

.exo-option-radio label {
  flex: 1 1 auto;
  /* Prend tout l'espace restant, min-width auto */
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  padding-left: 0;
  /* Pas besoin, le margin-right suffit */
  min-width: 0;
  /* Permet wrap si label très long */
  word-break: break-word;
  /* Break mots si extrême */
}

.exo-option-radio input:focus+label {
  outline: 2px solid #1FACD5;
  border-radius: 3px;
  padding: 2px;
}

.exo-option-radio:hover {
  background: rgba(245, 245, 245, 0.5);
}

.exo-option-radio input[type="radio"] {
  margin-right: 5px;
  /* Proche, mais pas collé */
  transform: scale(1.2);
  accent-color: #1FACD5;
}

.exo-option-radio label {
  flex: 1;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  padding-left: 2px;
  /* Micro-ajust pour coller au label */
  text-align: left;
}

.exo-option-radio input:focus+label {
  outline: 2px solid #1FACD5;
  border-radius: 3px;
  padding: 2px;
}

/* Submit */
.exo-submit {
  width: 100%;
  padding: 12px;
  background: #1FACD5;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.exo-submit:hover {
  background: orange;
  transform: scale(1.02);
}

/* Résultats namespacés */
.exo-resultats {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 700px;
  text-align: center;
}

.exo-resultats h2 {
  color: #05546B;
  border-bottom: 2px solid #1FACD5;
  padding-bottom: 10px;
}

.exo-resultats p {
  font-size: 1.1em;
  margin: 10px 0;
  text-align: center;
  /* Force center, anti-global */
}

/* Responsive */
@media (max-width: 768px) {

  .exo-equation,
  .exo-resultats {
    padding: 15px;
    margin: 10px;
    max-width: 100%;
  }

  .exo-option-radio {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
  }

  .exo-option-radio input[type="radio"] {
    margin-right: 0;
    margin-bottom: 5px;
  }
}

/* Toggle cours : Centré, sans cadre */
.toggle-cours {
  text-align: center;
  /* Bouton pile au milieu */
  margin: 15px auto;
  /* Espace vertical, centré horizontal */
  background: transparent;
  /* Pas de fond blanc */
  padding: 0;
  /* Pas de padding */
  border: none;
  /* Pas de bordure */
  box-shadow: none;
  /* Pas d'ombre */
  max-width: max-content;
  /* S'adapte au bouton */
}

.toggle-cours input[type="submit"] {
  display: inline-block;
  /* Garde le style_bouton intact */
  margin: 0 auto;
  /* Centré si besoin */
}

/* Grille multi-vidéos : 2x2 avec ratio strict */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 colonnes égales */
  gap: 20px;
  /* Plus d'espace pour respirer */
  margin: 10px 0;
}

.video-small {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  /* Hauteur min pour uniformité, ajustable */
}

.video-embed-small {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* Ratio 16:9 = moitié hauteur si largeur /2 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
  flex-grow: 1;
  /* Prend l'espace restant dans .video-small */
}

.video-embed-small iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* S'adapte au padding, pas fixe */
}

.video-small:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(31, 172, 213, 0.3);
}

/* Responsive : 1 col sur mobile, ou si >4 vidéos */
@media (max-width: 768px) {
  .videos-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .video-small {
    min-height: 200px;
    /* Plus haut sur mobile pour touch */
  }

  .video-embed-small {
    padding-bottom: 56.25%;
    /* Ratio intact */
  }
}

/* Tableau tablesigne : Fit forcé dans exo-equation */
.exo-equation .tablesigne {
  width: 100% !important;
  /* Pleine largeur du formulaire */
  table-layout: fixed !important;
  /* Colonnes égales, ignore contenu large */
  border-collapse: collapse !important;
  /* Bordures nettes */
  margin: 10px auto !important;
  /* Centré, espace */
  font-size: 14px !important;
  /* Compact si besoin */
  overflow-x: auto !important;
  /* Scroll horizontal si débord (mobile) */
  white-space: nowrap !important;
  /* Évite wrap dans cellules */
}

.exo-equation .tablesigne td,
.exo-equation .tablesigne th {
  padding: 8px 4px !important;
  /* Padding réduit pour fit */
  text-align: center !important;
  /* Centre tout */
  word-wrap: break-word !important;
  /* Break mots longs (ex. ∞) */
  max-width: 0 !important;
  /* Force wrap si extrême */
}

.exo-equation .tablesigne input,
.exo-equation .tablesigne select {
  width: 80px !important;
  /* Largeur fixe pour inputs, anti-étirement */
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Inclut padding/border dans width */
}

/* Responsive : Plus compact sur mobile */
@media (max-width: 768px) {
  .exo-equation .tablesigne {
    font-size: 12px !important;
    overflow-x: scroll !important;
    /* Scroll forcé si besoin */
  }

  .exo-equation .tablesigne td {
    padding: 4px 2px !important;
  }

  .exo-equation .tablesigne input,
  .exo-equation .tablesigne select {
    width: 60px !important;
  }
}

/* Centrage forcé image cours */
#bloc-cours {
  text-align: center !important;
  margin: 10px auto !important;
}

/* Centrage forcé image cours (override float global) */
#bloc-cours img {
  float: none !important;
  /* Annule le float right */
  display: block !important;
  margin: 0 auto !important;
  /* Centre horizontal */
  width: 500px !important;
  /* Garde largeur */
  max-width: 100% !important;
  /* Responsive */
}

/* Image chapitre : Centrée, si pas de vidéo */
.chapitre-image {
  text-align: center;
  margin: 10px 0;
}

.chapitre-image img {
  float: none !important;
  /* Annule le float right */
  max-width: 250px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.chapitre-image img:hover {
  transform: scale(1.02);
  /* Zoom subtil */
}


/*equation*/
.equation {
  padding-top: 10px;
  padding-bottom: 10px;
  /*width: 90%;*/

}

/*td.equation{
  width: 15%;
}*/
td.equation_egal {
  width: 5%;
  border-right: none;
  border-left: none;
}
td.equation{
  border-right: none;
}

p#equation {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: var(--font-size-equa-normal);
  text-align: right;
}

td.repequation {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  width: 30%;
  border-left: none;
}

td.repequationres {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: var(--font-size-equa-normal);
  width: 20%;
  text-align: left;
   border-left: none;
}

.congratulations {
  width: 4%;
}

td.repequationres1 {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: var(--font-size-equa-normal);
  width: 40%;
  text-align: center;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
}

input.repequation {
  width: 90%;
  height: 70px;
  font-size: 2rem;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  padding-left: 10px;
  text-align: left;
}

form.equation {
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: 80%;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  text-align: center;

}

*Mise en forme equation/fraction*/ #repequation {
  height: 70px;
  font-size: var(--font-size-equa-normal);
  width: 170px;
}

#repequation {
  height: 50px;
  font-size: var(--font-size-equa-normal);
  width: 150px;
}

#repequationbis {
  height: 50px;
  font-size: var(--font-size-equa-normal);
  width: 200px;
}

#repracine {
  height: 70px;
  font-size: 2rem;
  width: 120px;
  text-align: center;
}

/*Resposive equation*/

@media screen and (min-width: 280px) and (max-width: 780px) {

  p#equation,
  td.repequationres,
  td.repequationres1 {
    font-size: var(--font-size-equa-reduit);
  }
}

@media screen and (min-width: 180px) and (max-width: 500px) {
  form.equation {
    width: 95%;
  }

  #repequation {
    height: 50px;
    width: 135px;
    font-size: var(--font-size-equa-reduit);
  }
}

@media screen and (min-width: 851px) and (max-width: 1110px) {
  #repracine {
    font-size: 1.5rem;
    width: 100px;
    height: 50px;
  }
}

@media screen and (min-width: 480px) and (max-width: 850px) {
  #repracine {
    width: 80px;
    font-size: 1.5rem;
    height: 50px;
  }
}

@media screen and (min-width: 180px) and (max-width: 479px) {
  #repracine {
    width: 100px;
    font-size: 1.2rem;
    height: 50px;
  }
}


@media screen and (min-width: 851px) and (max-width: 1000px) {
  #repfraction {
    font-size: 1.5rem;
    width: 100px;
    height: 50px;
  }
}

@media screen and (min-width: 480px) and (max-width: 850px) {
  #repfraction {
    width: 80px;
    font-size: 1.5rem;
    height: 50px;
  }
}

@media screen and (min-width: 180px) and (max-width: 479px) {
  #rep {
    width: 50px;
    font-size: 1.2rem;
    height: 100px;
  }
}

td.fractionrep {
  width: 15%;
}

td.fractionrep1 {
  width: 15%;
}

td.fractionrepres {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: var(--font-size-equa-normal);
  width: 20%;
  text-align: left;
}

td.fractionrepres1 {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: var(--font-size-equa-normal);
  width: 30%;
  text-align: left;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
}

.equafraction {
  font-size: var(--font-size-equa-normal);
}

#repfractionequa {
  font-size: var(--font-size-equa-normal);
  height: 50px;
  width: 120px;
  text-align: center;
}

.tableauequa {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.tableauequaequa {
  text-align: center;
  padding-right: 20px;
}

@media screen and (min-width: 480px) and (max-width: 780px) {

  .equafraction {
    font-size: var(--font-size-equa-reduit);
  }

  #repfractionequa {
    font-size: var(--font-size-equa-reduit);
    height: 40px;
    width: 70px;
  }
}

/* DEFI*/
/*Racine carré*/
.tableraccarree {
  font-size: var(--font-size-equa-normal);
}

td.raccarre {
  width: 60px;
  /*height: 68px;*/
  background-image: url(../img/raccarre.png);
  background-size: contain;
  background-repeat: no-repeat;
  /*vertical-align: bottom;*/
  text-align: right;
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

td.raccarrelong {
  width: 300px;
  height: 68px;
  background-image: url(../img/raccarreelong.png);
  background-size: contain;
  background-repeat: no-repeat;
  /*vertical-align: bottom;*/
  text-align: left;
  padding-left: 20px;
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

td.raccarrecourt {
  width: 100px;
  height: 68px;
  background-image: url(../img/raccarreecourt.png);
  background-size: contain;
  background-repeat: no-repeat;
  /*vertical-align: bottom;*/
  text-align: left;
  padding-left: 10px;
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

td.raccarrecourtfrac {
  width: 100px;
  height: 68px;
  background-image: url(../img/raccarreecourt.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-right: none;
  border-left: none;
  border-top: none;
  /*vertical-align: bottom;*/
  text-align: left;
  padding-left: 10px;
  border-bottom-style: solid;
  border-bottom-color: var(--font-color);
}

td.rep {
  width: 150px;
  height: 110px;
  vertical-align: bottom;
  text-align: center;
}

input.input_raccarre {
  width: 89px;
  height: 73px;
  font-size: 3rem;
  font-family: 'Poppins', sans-serif;
  padding: 0;
  text-align: center;
}

.racine {
  font-size: 3rem;
}

td.racine {
  vertical-align: bottom;
}

td.egalraccarre {
  vertical-align: bottom;
  font-size: 3rem;
}

td.repraccar {
  vertical-align: bottom;
  font-size: 2.5rem;
}

/*Responsive rac carre*/
@media screen and (min-width: 480px) and (max-width: 900px) {
  .tableraccarree {
    font-size: var(--font-size-equa-reduit);
  }
}

#javaraccarre {
  font-size: var(--font-size-equa-normal);
  text-align: right;
  font-family: 'Poppins', sans-serif;
  padding-right: 25px;
}

.imageflottanteright {
  float: right;
}

.imageflottanteleft {
  float: left;
}

.image-flottante-colle {
  float: right;
  margin-top: 7px;
}

input[type=submit] {
  background-color: var(--color-bouton);
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

input[type=submit]:hover {
  opacity: 0.8;
  color: var(--color-orange);

}

input[type="radio"][name="reponse"] {
  width: 20px;
}

input[type="radio"][name="reponse1"] {
  width: 20px;
}

input[type="radio"][name="reponse11"] {
  width: 20px;
}

input[type="radio"][name="reponse21"] {
  width: 20px;
}

input[type="radio"][name="answer1"] {
  width: 100px;
}

input[type="radio"][name="answer2"] {
  width: 100px;
}

input[type="radio"][name="answer3"] {
  width: 100px;
}

.align_left {
  text-align: left;
}

.align_right {
  text-align: right;
}

/*Mise en former tableau de progression*/
.table_classement {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  border-collapse: collapse;
  text-align: center;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2rem;
}

th.table_classement {
  width: 15%;
}

@media screen and (min-width: 100px) and (max-width: 780px) {
  .table_classement {
    font-size: 1rem;
  }
}

input.reparbre {
  width: 100px;
  height: 60px;
  font-size: 1.7rem;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  padding-left: 10px;
  text-align: center;
}

@media screen and (min-width: 100px) and (max-width: 500px) {
  input.reparbre {
    width: 80px;
    height: 42px;
    font-size: 1.2rem;
  }
}

.img_totale {
  width: 500px;
}

.imageflottanterightcours {
  float: right;
  width: 200px;
  margin-right: 50px;
}

#repfraction {

  width: 100px;
  height: 60px;
  text-align: center;
}

@media screen and (min-width: 851px) and (max-width: 1000px) {
  #repfraction {
    font-size: 1.5rem;
    width: 100px;
    height: 50px;
  }
}

@media screen and (min-width: 480px) and (max-width: 850px) {
  #repfraction {
    width: 80px;
    font-size: 1.5rem;
    height: 50px;
  }
}

td.bordureclean {
  border-right: none;
  border-left: none;
}

td.bordurecleantotal {
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

/* ======== Logo Instagram dans le header ======== */
.insta-container {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
}

.insta-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insta-container a:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(253, 89, 73, 0.6);
}

.insta-container i {
    font-size: 30px;
    color: white;
}
input.repnum{
  width: 100px;
  height: 70px;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  padding: 0;
  text-align: center;
}

/* ===== PARADOXES ===== */
.paradoxes-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
    font-family: var(--main-font);
}

.main-title {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 2.2rem;
}

.intro {
    text-align: center;
    font-style: italic;
    color: #555;
    margin-bottom: 2rem;
}

.paradoxe-card {
    background: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.paradoxe-card:hover {
    transform: translateY(-5px);
}

.paradoxe-card h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.paradoxe-card em {
    color: var(--color-warning);
}

.solution {
    margin-top: 1rem;
    background: #f0f8ff;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.solution summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
}

.math {
    text-align: center;
    margin: 1rem 0;
    font-style: italic;
    color: #2c3e50;
}

.bonus {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.bonus h3, .bonus p {
    color: white;
}

.emoji {
    font-size: 2rem;
    text-align: center;
    margin: 1rem 0;
}

.call-to-action {
    text-align: center;
    margin: 3rem 0;
}

.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    margin: 0.5rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    transition: 0.3s;
}

.btn:hover {
    background: #3a5590;
}

.btn.secondary {
    background: #95a5a6;
}

.btn.secondary:hover {
    background: #7f8c8d;
}

/* ===== CONTACT ===== */
.contact-container {
    max-width: 700px;
    margin: 2rem auto;
    padding: 1.5rem;
    font-family: var(--main-font);
}

.contact-container h1 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 2.2rem;
}

.intro {
    text-align: center;
    color: #555;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.alert {
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 600;
}

.alert.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #ddd;
    border-radius: var(--radius);
    font-family: var(--main-font);
    font-size: 1rem;
    transition: border 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.btn-submit {
    display: block;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #1FACD5, #3a5590);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: 0.3s;
    margin-top: 1rem;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 111, 165, 0.4);
}

.contact-info {
    margin-top: 3rem;
    text-align: center;
    color: #666;
    font-size: 0.95rem;
}

.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info li {
    margin: 0.5rem 0;
}

.contact-info a {
    color: var(--color-primary);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.radio-label {
    display: inline-block;
    user-select: none;
    position: relative;
}

/* Hover */
.radio-label:hover {
    background:#e3f2fd !important;
    border-color:#3498db !important;
    transform:scale(1.08);
    box-shadow:0 6px 20px rgba(52,152,219,0.3);
}

/* QUAND C'EST COCHÉ → BLEU FONCÉ + BLANC */
.radio-label input[type="radio"]:checked + * {
    background:#2980b9 !important;
    color:white !important;
    border-color:#1a6aa3 !important;
    box-shadow:0 8px 25px rgba(41,128,185,0.5) !important;
    transform:scale(1.1);
}

/* Pour que ça marche même si l'input est caché */
.radio-label input[type="radio"]:checked {
    background:#2980b9;
}

/* tableau sans bordure td */
td.noborder{
  border: none;
}
/* barre avec infini crochet et ; pour tableau de signes */
.math-toolbar {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.math-toolbar button {
    font-size: 1.2em;
    padding: 10px 18px;
    border-radius: 14px;
    border: 2px solid orange;
    background: #ffffff;
    color: #1FACD5;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 14px rgba(31, 172, 213, 0.25);
}

.math-toolbar button:hover {
    background: #1FACD5;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(31, 172, 213, 0.35);
}

.math-toolbar button:active {
    transform: scale(0.95);
}
/*page index */
.bloc { margin: 10px 0; padding-left: 50px; }
.intro { max-width: 800px; margin: 30px auto; font-size: 1.2em; }

.faq details {
    background: #f8f9fa;
    border-radius: 12px;
    margin: 15px 0;
    padding: 18px 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.faq summary {
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    color: #1FACD5;
    list-style: none;
}

.faq summary::marker {
    display: none;
}

.faq summary::after {
    content: " ▸";
    float: right;
    transition: transform 0.3s;
}

.faq details[open] summary::after {
    transform: rotate(90deg);
}

.faq p, .faq ul {
    margin-top: 15px;
    font-size: 1.05em;
    color: #333;
}
.tv-ok {
    background:#e8f5e9;
    color:#2e7d32;
    font-weight:bold;
    text-align:center;
}
.tv-ko {
    background:#fdecea;
    color:#c62828;
    font-weight:bold;
    text-align:center;
}
.btn-help {
    background: #1FACD5;
    color: white;
    border: 2px solid orange;
    border-radius: 14px;
    padding: 10px 18px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.btn-help:hover {
    background: orange;
    color: #0b5c73;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.center-btn {
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

/* =========================
   HELP BOXES (cours & aides)
========================= */

/* Base commune */
.help-box {
    display: none;
    margin: 25px auto;
    padding: 20px;
    border-radius: 14px;
    overflow: hidden;

    /* animation */
    max-height: 0;
    opacity: 0;
    transition: 
        max-height 0.4s ease,
        opacity 0.3s ease;
}

/* État ouvert */
.help-box.open {
    display: block;
    max-height: 1500px; /* suffisant pour le contenu */
    opacity: 1;
}


/* =========================
   TYPES DE CONTENU
========================= */

/* 📘 Cours pliable */
.help-course {
    background: #e8f4f8;
    border-left: 6px solid #1FACD5;
    max-width: 80%;
    font-size: 1.2em;
}

/* ❓ Aide ciblée inline */
.help-inline {
    background: #fff8e1;
    border-left: 4px solid #F97316;
    font-size: 0.95em;
}


/* =========================
   BOUTONS
========================= */

/* Bouton "Cours" */
.btn-help {
    padding: 10px 20px;
    border-radius: 18px;
    background: #1FACD5;
    color: white;
    border: none;
    cursor: pointer;
}

/* Bouton ❓ */
.btn-help-inline {
    background: #F97316;
    color: white;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    border: none;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pow {
    font-size: 1.5em;
}

.pow sup {
    position: relative;
    top: -0.3em;
}

.pow sup input {
    width: 90px;
    font-size: 0.85em;
    padding: 2px 6px;
    text-align: center;
    border-radius: 6px;
}