// Breakpoints : 
// FN + F9 : création ou suppression
// FN + Shift + F9 : suppression de tous
// FN + F10 : Aller au prochain



//Initialisation à laisser en haut du script//
let maPhraseLoad=1;
const alphabetFR = "ABCDEFGHIJKLMNOPQRSTUVWXYZÉÈÊÀÇÎ-ÛÂÔËŒÆÏÖÙÄÜŸ";
const chiffresEntoures = ['⓿','①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'];





function setDockLogHeight(classe) {
  dockLog.classList.remove("h0", "h1", "h2", "h3");
  dockLog.classList.add(classe);
}

setDockLogHeight("h0");



/////////////////////////////
// Gestion des blocs blancs de Réglage //
/////////////////////////////
const accordion1 = document.getElementById('accordion1');
const header1 = document.getElementById('accordion-header1');


header1.addEventListener('click', () => {
  accordion1.classList.toggle('expanded');
  boutonConseils.classList.toggle('open');
  

});

pedagoClose.addEventListener('click', () => {
  accordion1.classList.toggle('expanded');
  boutonConseils.classList.toggle('open');
  window.scrollTo({ top: 0, behavior: 'smooth' });


});
//
const accordion2 = document.getElementById('accordion2');
const header2 = document.getElementById('accordion-header2');
header2.addEventListener('click', () => {
  accordion2.classList.toggle('expanded');
});
const accordion3 = document.getElementById('accordion3');
const header3 = document.getElementById('accordion-header3');
header3.addEventListener('click', () => {
  accordion3.classList.toggle('expanded');
});


/////////////////////////////
// Gestion dock Alphabet //
/////////////////////////////

let dock = document.getElementById("dockPanel");
let body = document.body;
let dockVisible = false;



// Texte perso à afficher dans le dock
let smallTexts = [
  "1  A", "2  B", "3  C", "4  D", "5  E", "6  F", "7  G", "8  H", "9  I", "10 J",
  "11 K", "12 L", "13 M", "14 N", "15 O", "16 P", "17 Q", "18 R", "19 S", "20 T",
  "21 U", "22 V", "23 W", "24 X", "25 Y", "26 Z"
];


function toggleDock() {
  lettres.classList.toggle("hidden");
  containerLettre.classList.toggle("hidden");
  if (!dockVisible) {
    switchDockDisplay.textContent="Déplacer la carte des lettres ici";
    dock.innerHTML = "";
    smallTexts.forEach((text, index) => {
     // lettres.style.display="none";
      const span = document.createElement("span");
      span.style.whiteSpace = "pre"; // <-- respecte les espaces
      span.style.letterSpacing= "-2px";


      span.textContent = text;

      // Style pour la ligne entre les spans
      span.style.width = "100%";
      span.style.display = "block";
      span.style.boxSizing = "border-box";
      span.style.padding= "0px";
      span.style.margin= "0px";
      dock.appendChild(span);
    });
    dock.classList.add("show");
    body.classList.add("with-dock");
  } else {
    switchDockDisplay.textContent="Placer la liste sur le côté";
    dock.classList.remove("show");
    body.classList.remove("with-dock");
  }
  dockVisible = !dockVisible;
}


/////////////////////////////
// Questionnaire Checkboxes //
/////////////////////////////

// Tableau des réglages des types de calculs possibles
let reglages = [
  {id: "LectureDirecte", valeur: false, textPerso: "Lecture directe :<br>5 → E<br>26 → Z"},
  {id: "Add-TresSimple", valeur: true, textPerso: "Additions très simples :<br>2 + 3 = 5<br>10 + 2 = 12<br>20 + 6 = 26"},
  {id: "Sous-TresSimple", valeur: true, textPerso: "Soustraction très simple :<br>10 - 7 = 3<br>20 - 8 = 12<br>30 - 5 = 25"},
  {id: "ZZmoinsYY", valeur: true, textPerso: "Soustractions simples :<br>59 - 47 = 12"},
  {id: "XXXplusYYYmoinsZZZ", valeur: true, textPerso: "Addition et soustraction :<br>341 + 149 - 483 = 7" },
  {id: "ZfoisXXmoinsYY", valeur: true, textPerso: "Multiplication et soustraction :<br>12 x 5 - 44 = 16" },
  {id: "DivisionPar2", valeur: true, textPerso: "Division par 2<br>32 : 2 = 16"},
  {id: "DivisionPar4", valeur: false, textPerso: "Division par 4<br>64 : 4 = 16"}
];

// Génère dynamiquement les cases à cocher dans le DOM
function genererCheckboxes() {
  const container = document.getElementById("zoneCheckboxes");
  container.innerHTML = "";

  reglages.forEach((reglage, i) => {
    const wrapper = document.createElement("div");
    wrapper.style.display = "flex";
    wrapper.style.alignItems = "stretch";
    wrapper.style.padding = "0 0 rem"; // espace horizontal
    wrapper.style.marginBottom = "1rem"; // ou "20px", à toi de choisir la taille d'espacement


    wrapper.style.position = "relative";

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = reglage.id;
    checkbox.style.marginRight = "1rem";  // on augmente l'espace pour placer le trait

    const separator = document.createElement("div");
    separator.style.position = "absolute";
    separator.style.top = "5%";
    separator.style.bottom = "5%";
    separator.style.left = "1.5rem";
    separator.style.width = "2px";
    separator.style.backgroundColor = "#ccc";

    const texte = document.createElement("div");
    texte.innerHTML = reglage.textPerso;
    texte.style.lineHeight = "1.4";

    wrapper.appendChild(checkbox);
    wrapper.appendChild(separator);
    wrapper.appendChild(texte);

    container.appendChild(wrapper);
  });
}






// Charge les préférences depuis le localStorage et met à jour reglages[i].valeur
function chargerPreferences() {
  let prefs = localStorage.getItem("reglagesMathsMysteres10");
  let data = JSON.parse(prefs);
  if (Array.isArray(data)) {
    data.forEach((val, i) => {
      reglages[i].valeur = val;
    });
  }
}

// Applique reglages[i].valeur aux cases à cocher visibles
function appliquerCheckboxes() {
  reglages.forEach(r => {
    let cb = document.getElementById(r.id);
    if (cb) cb.checked = r.valeur;
  });
}

// Sauvegarde l’état des valeurs (true/false) dans le localStorage
function sauvegarderPreferences() {
  // Met à jour reglages[i].valeur depuis l'état des cases cochées
  reglages.forEach(r => {
    let cb = document.getElementById(r.id);
    if (cb) r.valeur = cb.checked;
  });

  let valeurs = reglages.map(r => r.valeur);
  localStorage.setItem("reglagesMathsMysteres10", JSON.stringify(valeurs));
}



// Bouton pour mettre à jour la phrase
document.getElementById("updateEquations").addEventListener("click", () => {
  let auMoinsUneCheckee = reglages.some(r => {
    let cb = document.getElementById(r.id);
    return cb && cb.checked;
  });
  if (auMoinsUneCheckee) {
    sauvegarderPreferences();
    afficherPhrase(monTexte, monNumero);
  }
});

////////////////////////////////////
// Assombrir la couleur pour le dock //
////////////////////////////////////
function assombrirHex(hex, facteur = 0.1) {
  // Supprimer le # si présent
  hex = hex.replace('#', '');

  // Extraire R, G, B
  let r = parseInt(hex.substring(0, 2), 16);
  let g = parseInt(hex.substring(2, 4), 16);
  let b = parseInt(hex.substring(4, 6), 16);

  // Réduire la luminosité
  r = Math.floor(r * (1 - facteur));
  g = Math.floor(g * (1 - facteur));
  b = Math.floor(b * (1 - facteur));

  // S'assurer que les valeurs sont dans [0, 255]
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));

  // Convertir en hex avec padding
  const toHex = (n) => n.toString(16).padStart(2, '0');

  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}


////////////////////////////////////
// Changement de couleur du fond //
////////////////////////////////////

// Tableau des couleurs disponibles pour le fond
//#00b5b8;

const couleurs = ["#00b5b8", "#006cea", "#ff5e3b", "#904aae", "#ea127d","#00ba79"];
document.documentElement.style.setProperty('--couleur-principale', couleurs[0]);

let couleurSombre = assombrirHex(couleurs[0], 0.4);
dockPanel.style.backgroundColor = couleurSombre;
document.documentElement.style.setProperty('--couleur-principale-foncee', couleurSombre);


let couleurIndex = 0; // Index de la couleur actuelle

const boutonChangerCouleur = document.getElementById("changerCouleur");
const disque = document.getElementById("disque");

// Fonction pour faire tourner les couleurs
function changerCouleur() {
  couleurIndex = (couleurIndex + 1) % couleurs.length;
  const nouvelleCouleur = couleurs[couleurIndex];

  // Changer la couleur de fond du body
  document.documentElement.style.setProperty('--couleur-principale',nouvelleCouleur);

 couleurSombre = assombrirHex(nouvelleCouleur, 0.4);
  dockPanel.style.backgroundColor = couleurSombre;
  document.documentElement.style.setProperty('--couleur-principale-foncee', couleurSombre);




  // Change la couleur du trait de l’icône dans le bouton
  // Attendre un tout petit moment pour que l'icône SVG soit bien injectée
  setTimeout(() => {
    const svg = boutonChangerCouleur.querySelector("svg");
    if (svg) {
      svg.style.stroke = nouvelleCouleur;
    }
  }, 10);
}


// Ajout du clic sur le bouton pour changer la couleur
boutonChangerCouleur.addEventListener("click", changerCouleur);



////////////////////////////////////////////
// Fermeture du bandeau parent / enfants 
//////////////////////////////////////////


/*
let varCacherJours = true;

function cacherJours() {
  if (varCacherJours == false) {


    document.querySelectorAll('.motJour').forEach(el => el.style.display = 'inLine');
    document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'inLine');
    
    varCacherJours = true;
  }

  else {

    document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'none');
    varCacherJours = false;

  }
}
*/

let varOneDay = true;

showOneDaySwitch.addEventListener("change", function () {
  varOneDay = !varOneDay;

    afficherPhrase(monTexte,monNumero);


 });









solutionsSwitch.addEventListener("change", function () {

  solutionsShow();
});


let varSolutions = true;
function solutionsShow() {
  if (varSolutions == false) {
    document.getElementById("phraseMyst").style.display = "none";
    document.getElementById("phrase").style.display = "block";

    document.querySelectorAll('.reponse').forEach(span => span.style.display = "inline");
    document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "inline");
    document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "none");
    document.querySelectorAll('.mot').forEach(span => span.style.display = "inline");

    varSolutions = true;
  }
  else {
    document.querySelectorAll('.mot').forEach(span => span.style.display = "none");
    document.getElementById("phraseMyst").style.display = "block";
    document.getElementById("phrase").style.display = "none";

    document.querySelectorAll('.reponse').forEach(span => span.style.display = "none");
    document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none");
    document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inLine");


    document.querySelectorAll('.reponse').forEach(span => span.style.display = "none");
    document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none");

    varSolutions = false;

  }
}






////////////////////////////////////
// Réglages d'affichage initiaux //
////////////////////////////////////
// Récupérer le jour de la semaine (0 = dimanche, 6 = samedi)
let varJour=1;
let nombreMotsGras=1;
let monTexteEnCours="";
let aujourdHui = new Date().getDay()-1;
let modeEnfant=true;
zonePrint.style.display="none";
childModeConfirmation.style.display = "none";
parentModeConfirmation.style.display = "none";
accordion1.style.display="none";
accordion2.style.display="none";
accordion3.style.display="none";

btnVersEnfant.style.display = "none";
// Initialisation au chargement
genererCheckboxes();
chargerPreferences();
appliquerCheckboxes();





const boutonPrint = document.getElementById("boutonPrint");
if (boutonPrint) {

boutonPrint.addEventListener("click", () => {
  window.print();
});
}



/////////////////////////
// Gestion des phrases //
/////////////////////////
let phrases = [
  "Dans tous les OCÉANS du globe, quel animal JOUEUR et MALIN peut appeler un MEMBRE de sa FAMILLE en sifflant son nom ? Il s'agit du DAUPHIN !",
  "Salut, c'est moi l'animal si MIGNON qui a trente-deux MUSCLES dans chaque OREILLE pour mieux CHASSER et montrer mes ÉMOTIONS. Tu as deviné qui je suis ? Bien sûr, le CHAT !",
  "Dans les mers POLAIRES, quel est le POISSON qui peut VIVRE plus de QUATRE cents ans ? C'est le REQUIN du Groënland.",
  "Le corps HUMAIN est une véritable USINE ! Par exemple, jusqu'à DOUZE kilomètres de CHEVEUX peuvent POUSSER sur ta tête chaque ANNÉE ! C'est décoiffant non ?! "];

let select = document.getElementById("selectPhrase");
let phraseDiv = document.getElementById("phrase");
let phraseMyst = document.getElementById("phraseMyst");
let grid = document.getElementById("equations");
let lettresDiv = document.getElementById("lettres");
let infoDiv = document.getElementById("infoPhrase");

let randomSwitch = document.getElementById("randomSwitch");
let monTexte = "";
let monNumero;
if (maPhraseLoad === 0) {
  monNumero = Math.floor(Math.random() * phrases.length) + 1;
} else {
  monNumero = maPhraseLoad;
}



let parcourirPremiereMoitié = true;
let cachecache = 1;



// Phrase personnalisé : supression de la ligne de base et apparition des conseils infos
customPhrase.addEventListener('focus', function () {
  this.placeholder = '';
  infTexte.style.display = "block";
});

customPhrase.addEventListener('blur', function () {
  if (this.value === '') {
    infTexte.style.display = "none";
    this.placeholder = 'Ecrivez ici une phrase personnalisée !';  // Restaure le placeholder si le champ est vide et perd le focus
  }
});


// Remplit la liste déroulante avec les phrases
phrases.forEach((p, i) => {
  let opt = document.createElement("option");
  opt.value = i;
  opt.textContent = `Phrase numéro ${i + 1} __________________ `;
  select.appendChild(opt);
});

// Quand on change de phrase pré écrite depuis la liste
select.addEventListener("change", () => {

  monNumero = parseInt(select.value) + 1;
  afficherPhrase(phrases[select.value], monNumero);

  customPhrase.value = phrases[select.value];

});

// Quand on saisit une phrase personnalisée
customPhrase.addEventListener("input", () => {
  validerPhrase()
});




function extractMotsMaj(textOS) {

  const regexNettoyage = new RegExp(`^[^${alphabetFR}]+|[^${alphabetFR}]+$`, 'g');

  return textOS
    .split(' ')
    .map(m => m.replace(regexNettoyage, '')) // nettoyage ponctuation autour
    .filter(m =>
      m.length > 2 &&
      m === m.toUpperCase() &&
      [...m].every(c => alphabetFR.includes(c))
    );
}



// Désactivée : Vérifie la validité d'une phrase personnalisée
function validerPhrase() {
  let texte = document.getElementById("customPhrase").value;

  let mots=extractMotsMaj(texte);  

  // Code désactivé mais utile pour limiter les majuscules
 /*
  if (mots.length > 6) {
  erreurDiv.textContent = "❌ Maximum 7 mots en majuscules !";

  }*/
  

  select.value = "";
  monTexte = texte;
  monNumero = null;
  afficherPhrase(texte, null);
}



////
////
////
function motsMajEnGrasMin(texte) {
  const regexNettoyage = new RegExp(`^[^${alphabetFR}]+|[^${alphabetFR}]+$`, 'g');

  return texte
    .split(' ')
    .map(motOriginal => {
      const net = motOriginal.replace(regexNettoyage, '');
      if (
        net.length > 2 &&
        net === net.toUpperCase() &&
        [...net].every(c => alphabetFR.includes(c))
      ) {
        const prefix = motOriginal.slice(0, motOriginal.indexOf(net));
        const suffix = motOriginal.slice(motOriginal.indexOf(net) + net.length);
        return `${prefix}<strong>${net.toLocaleLowerCase('fr')}</strong>${suffix}`;
      } else {
        return motOriginal;
      }
    })
    .join(' ');
}
////
////
////



function grasEnMaj(texteHTML) {
  let resultat = '';
  let i = 0;

  while (i < texteHTML.length) {
    // Cherche une balise <strong>
    if (
      texteHTML.slice(i, i + 8).toLowerCase() === '<strong>'
    ) {
      resultat += '<strong>';
      i += 8; // Passe la balise ouvrante

      let contenu = '';
      // Récupère le contenu jusqu’à </strong>
      while (
        i < texteHTML.length &&
        texteHTML.slice(i, i + 9).toLowerCase() !== '</strong>'
      ) {
        contenu += texteHTML[i];
        i++;
      }

      resultat += contenu.toUpperCase(); // Transforme en majuscules
      resultat += '</strong>';
      i += 9; // Passe la balise fermante
    } else {
      resultat += texteHTML[i];
      i++;
    }
  }

  return resultat;
}




// Fonction principale : affiche la phrase à l’écran, la transforme en version mystère (blanks pour les mots en majuscules), génère les équations associées
function afficherPhrase(texte, numero) {

  // Stocke la phrase et son numéro
  monTexte = texte;
  monNumero = numero;
  let monTexteGras = texte;
  // Affiche la phrase originale dans l’élément "phrase"
  monTexteGras = motsMajEnGrasMin(texte); // Permet de mettre en gras et minuscule les mots à trouver


  monTexteGras=grasEnMaj(monTexteGras);
  
  phraseDiv.innerHTML = monTexteGras + '';

  // Réinitialise le tableau des équations et les infos
  grid.innerHTML = "";
  infoDiv.textContent = "";




  // Affiche la phase avec des underscores :
  let index = 1;
  let numJour = aujourdHui+1;
  

  
  const pattern = /<strong>([^<]+)<\/strong>/g;
  let result = "";
  let lastIndex = 0;
  let match;
  
  while ((match = pattern.exec(monTexteGras)) !== null) {
    const before = monTexteGras.slice(lastIndex, match.index);
    const contenu = match[1];
    let bloc = contenu;
  
    if (index > numJour - 1) {
      const underscores = "_".repeat(contenu.length);
      const color = (index === numJour) ? "#000" : "var(--couleur-principale)";
      bloc =
        '<span style="display:inline-block; margin-left:6px; text-align:center; line-height:0; vertical-align:middle;">' +
          '<span class="indice-print" style="display:block; font-size:14px; font-weight:bold; color:#BBB; line-height:0; vertical-align:middle; margin-left:10px;"></span>' +
          '<span style="font-weight:light; font-size:25px; line-height:0.2; vertical-align:top; color:' + color + '; letter-spacing:0.1em;">' +
            underscores +
          "</span>" +
        "</span>";
    }
  
    result += before + bloc;
    index++;
    lastIndex = pattern.lastIndex;
  }
  
  result += monTexteGras.slice(lastIndex);
  displayText = result;
  
  
//color:var(--couleur-principale);  permettrait de mettre les petits numéros dans la phrase en couleur dynamique
// ${chiffresEntoures[index++]} ça on peut le mettre en valeur dynamique au dessus des _ _ _ _
//sinon : ${index++}
  


  
  phraseMyst.innerHTML = displayText + '';


  // Pour chaque mot en majuscules, on génère une série de valeurs chiffrées et leurs équations
let mots = extractMotsMaj(texte);
nombreMotsGras=mots.length;
  mots.forEach((mot, index) => {
    // Conversion des lettres du mot en chiffres (a=1, b=2...)
    //let lettres = mot.toLowerCase().split('');
    //let nombres = lettres.map(l => l.charCodeAt(0) - 96);
    let lettres = mot.split('');
    let nombres = lettres.map(l => (alphabetFR.indexOf(l)+1));


    // Création d’un mélange partiel des chiffres, pour ajouter une petite difficulté
    let nombresMeles = [...nombres]; // On copie le tableau d'origine
    for (let i = nombresMeles.length - 1; i > 0; i--) {

      // Échange des éléments
      let j = randFakeInt(0, i, index, i, index);

      [nombresMeles[i], nombresMeles[j]] = [nombresMeles[j], nombresMeles[i]];
    }
    nombres = [...nombres, ...nombresMeles];
    

    // Création d’un bloc HTML pour chaque mot mystère
    let box = document.createElement("div");
    box.className = "box";

    // Affiche le numéro du mot
    let motNumero = document.createElement("span");
    let varSemaine = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
    varJour = varSemaine[aujourdHui%7];
    /*if (typeof varJour === "undefined") {
      varJour = "lendemain";
    }*/
    
    motNumero.innerHTML = `<div style="display:flex; margin-bottom:10px;   align-items:baseline; gap:0.5em;"><div class="numero" style="font-weight:bold; font-size=18px;">${index + 1}.</div><div class="motDuJour">Le mot du </div><div class="motJour" style="text-transform:lowercase; margin-left:-5px;"> ${varJour} !</div></div>`;


    box.appendChild(motNumero);


    let spaceHaut = document.createElement("div");
    spaceHaut.innerHTML = `<div style="height: 1px; background-color: transparent;"></div>`;
        box.appendChild(spaceHaut);

    // Affiche le mot en minuscule à côté du numéro
    let motElem = document.createElement("span");
    motElem.className = "mot";
    motElem.textContent = mot.toLowerCase();
    box.appendChild(motElem);

    // Détermine si on affiche la première ou seconde moitié des équations
    let debut, fin;
    if (parcourirPremiereMoitié) {
      debut = 0;
      fin = Math.floor(nombres.length / 2);
    } else {
      debut = Math.floor(nombres.length / 2);
      fin = nombres.length;
    }

    // Génération des équations pour la partie sélectionnée
    for (let i = debut; i < fin; i++) {
      let val = nombres[i];
      let eqElem = document.createElement("div");
      eqElem.className = "equation";
      eqElem.innerHTML = creerEquation(val,index,i);
      box.appendChild(eqElem);
    }

    // Ajout du bloc au DOM
    grid.appendChild(box);
  });



  // Création de la première box spéciale
  const premiereBox = document.createElement("div");
  premiereBox.className = "boxFirst";
  premiereBox.innerHTML = "<div style='line-height: 20px; margin-top:5px; font-size:18px;  '><b>À toi de jouer  🙂</b></div><div style='margin-top:14px; font-size:14px'>Chaque résultat donne<br>une lettre de l'alphabet.<br>Retrouve le mot complet !<br><div style='margin-top:5px;'></div><em>Exemple :</em> CHAT <big>🐾</big><br>3 → C<br>8 → H<br>1 → A<br>20 → T<br> <div id='petitBtnVoirLettres' onclick='btnGoMap();' style='color:#666; cursor:pointer;'><br><span style='margin-right:5px; margin-top:1px; vertical-align:top; font-size:20px; color:#999;' class='material-icons'>visibility</span><em>Carte des lettres</em></div></div>";


  // On l'insère au début de la grille (avant tout le reste)
  grid.insertBefore(premiereBox, grid.firstChild);







    if (varSolutions == true) {
      document.getElementById("phraseMyst").style.display = "none";
      document.getElementById("phrase").style.display = "block";
  
      document.querySelectorAll('.reponse').forEach(span => span.style.display = "inline");
      document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "inline");
      document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "none");
      document.querySelectorAll('.mot').forEach(span => span.style.display = "inline");
  
    }
    if (varSolutions == false) {
      document.querySelectorAll('.mot').forEach(span => span.style.display = "none");
      document.getElementById("phraseMyst").style.display = "block";
      document.getElementById("phrase").style.display = "none";
      document.querySelectorAll('.reponse').forEach(span => span.style.display = "none");
      document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none");
      document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inLine");
      document.querySelectorAll('.reponse').forEach(span => span.style.display = "none");
      document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none");

    }

    if (modeEnfant == true) {
    if (varOneDay == false) {

      document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none');
      document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'none');
      document.querySelectorAll('.numero').forEach(el => el.style.display = 'inLine');
      
      let toutesLesBoxes = grid.querySelectorAll('.box');
  
  toutesLesBoxes.forEach((box, index) => {
    box.style.display = 'block';
  });
  
    }
  
    else {

      document.querySelectorAll('.motJour').forEach(el => el.style.display = 'inLine');
      document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'inLine');
      document.querySelectorAll('.numero').forEach(el => el.style.display = 'inLine');
  
  
  let toutesLesBoxes = grid.querySelectorAll('.box');
  
  toutesLesBoxes.forEach((box, index) => {
    if (index === aujourdHui) {
      // On affiche la boîte
      box.style.display = 'block';
    } else {
      // Sinon, on la cache
      box.style.display = 'none';
    }
  });
  
  
    }
  }

  if (modeEnfant==false){

    document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.numero').forEach(el => el.style.display = 'inLine');
    
    let toutesLesBoxes = grid.querySelectorAll('.box');

toutesLesBoxes.forEach((box, index) => {
  box.style.display = 'block';
});

  }

  choixCompteur=1; // nécessaire sinon à chaque clique sur le switch "semaine complete" ça continue de faire rouler ce compteur et le type d'equation evolue pour chaque ligne



  monTexteEnCours="cxoc";

}

// Fonction qui est appelé depuis le petit bouton "Voir la suite" dans la premiere box "A toi de jouer !"
function btnGoMap(){
  toggleDock();
 // window.scrollTo({ top: document.getElementById("containerLettre").offsetTop, behavior: "smooth" });
}


// Comportement du switch : affiche une moitié différente des équations selon l’état du bouton : celle qui a été randomisée ou non
randomSwitch.addEventListener("change", function () {
  if (randomSwitch.checked) {
    parcourirPremiereMoitié = false;
    afficherPhrase(monTexte, monNumero);
  } else {
    parcourirPremiereMoitié = true;
    afficherPhrase(monTexte, monNumero);
  }
});

/*
showJourSwitch.addEventListener("change", function () {
  cacherJours();
});
*/








// Fonction qui génère une équation (addition, soustraction, multiplication, division...) selon les réglages actifs
let choixCompteur=1;

function creerEquation(val,posMot,posLettre) {
  posMot+=1;
  posLettre+=1;

// Appel :  eqElem.innerHTML = creerEquation(val,index,i);

  let typesDisponibles = reglages.filter(obj => obj.valeur).map(obj => obj.id);
  if (typesDisponibles.length === 0) {
    document.getElementById("equation").textContent = "Aucune opération activée.";
    return;
  }

  let choix=typesDisponibles[choixCompteur%(typesDisponibles.length)];
  choixCompteur++;


  let a, b, c, d,e,f, res, eq, prem;
  switch (choix) {
    case "LectureDirecte":
      eq = `${val} →`;
      prem=val;
      res =  alphabetFR[prem-1];

      
      break;
    case "Add-TresSimple":
      if (val <= 10) {
        a = randFakeInt(1, val,posMot,posLettre,val);
        b = val - a;
      } else {
        a = (val <= 20) ? 10 : 10 * Math.floor(val / 10);
        b = val - a;
      }
      eq = `${a} + ${b} =`;
      res = val;
      prem=res;
      break;

    case "XXXplusYYYmoinsZZZ":
      a = randFakeInt(25, 499,posMot,posLettre,val);
      b = randFakeInt(25, 399,posMot,posLettre,val);
      c = a + b - val;
      eq = `${a} + ${b} - ${c} =`;
      res = a + b - c;
      prem=res;
      break;

    case "ZfoisXXmoinsYY":
      a = randFakeInt(11, 29,posMot,posLettre,val);
      b = randFakeInt(2, 9,posMot,posLettre,val);
      c = a * b - val;
      eq = `${a} × ${b} - ${c} =`;
      res = a * b - c;
      prem=res;
      break;

    case "ZZmoinsYY":
      c=70 - val;
    b = randFakeInt(1, c,posMot,posLettre,val);
      a = val + b;
      eq = `${a} - ${b} =`;
      res = val;
      prem=res;
      break;

    case "Sous-TresSimple":
      a = val < 10 ? 10 : val < 20 ? 20 : val < 30 ? 30 : val < 40 ? 40 : 50;
      b = a - val;
      eq = `${a} - ${b} =`;
      res = val;
      prem=res;
      break;

    case "DivisionPar2":
      a = val * 2;
      eq = `${a} ÷ 2 =`;
      res = val;
      prem=res;
      break;

    case "DivisionPar4":
      a = val * 4;
      eq = `${a} ÷ 4 =`;
      res = val;
      prem=res;
      break;
  }

  let letos = alphabetFR[prem-1];
  // Lettre correspondant au résultat
  return `<span class="lettreRep" style="display: inline; color: #999;">${letos}  </span>${eq} <span class="reponse" style="display: inline;">${res}</span><span class="placeholderIntero" style="display: none;">?</span>`;
}

// Fonction utilitaire : renvoie un entier faussement aléatoire entre min et max

let lastEquationKey = "";
let retryCount = 0;

function randFakeInt(min, max, posMotRand, posLettreRand, val) {
  const primeA = 73856093;
  const primeB = 19349663;
  const primeC = 83492791;

  const range = max - min + 1;
  let a, b, seed, chaotic, key;

  do {
    // Création d'une clé unique pour la position et le retry
    key = `${posMotRand}_${posLettreRand}_${val}_${retryCount}`;

    // Graine basée sur position, val et tentative
    seed = ((posMotRand + 1 + retryCount) * primeA) ^
           ((posLettreRand + 1 + retryCount) * primeB) ^
           ((val + retryCount) * primeC);

    // Chaotique mais stable
    chaotic = Math.abs(Math.sin(seed) * 10000 + Math.cos(seed / 2) * 5000);

    a = Math.floor(chaotic % range) + min;
    b = val - a;

    // Vérifie si l'équation a changé
    const currentEquationKey = `${a}+${b}`;

    if (currentEquationKey !== lastEquationKey) {
      lastEquationKey = currentEquationKey;
      retryCount = 0; // Reset pour la prochaine fois
      break;
    }

    retryCount++;
  } while (retryCount < 10); // Limite de boucles

  return a;
}


  

// Fonction utilitaire : renvoie un entier  aléatoire entre min et max
function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Affichage de l’alphabet chiffré (a = 1, b = 2, ..., z = 26)
for (let i = 0; i < 26; i++) {
  let lettre = String.fromCharCode(97 + i);
  lettresDiv.innerHTML += `${i + 1} ${lettre}<br>`;
}

// Affichage initial
afficherPhrase(phrases[monNumero - 1], monNumero);
desactiverOptions();
////
///
////

// --- MASQUER / AFFICHER OPTIONS ET PHRASE ---

// Quand on clique sur le bouton "Niveau CP CM2..."
btnVersParent.addEventListener("click", () => {
  setDockLogHeight("h2");
  sameHeight.style.height = "200px";

  // On masque la bannière du mode parent


  if (cachecache > 1) {
    // Si cachecache est supérieur à 1, on affiche la confirmation du mode parent
    parentModeConfirmation.style.display = "block";
    btnVersParent.style.display = "none";
  }

  if (cachecache == 1) {
    // Si c’est la première fois, on active les options directement
    window.scrollTo({ top: 0, behavior: 'smooth' });
    activerOptions();
    btnVersParent.style.display = "none";
    btnVersEnfant.style.display = "block";

    cachecache += 1;
    modeEnfant=false;
    afficherPhrase(monTexte,monNumero);
  }
});




// Quand on clique sur le bouton "Parent"
btnVersEnfant.addEventListener("click", () => {

  // On affiche la confirmation pour passer en mode enfant
  setDockLogHeight("h3");
  sameHeight.style.height = "250px";

  setTimeout(() => {
    childModeConfirmation.style.display = "block";
  }, 300); // délai en millisecondes
    btnVersEnfant.style.display = "none";
});


// Fonction pour activer toutes les options visibles en mode parent

function activerOptions() {
  document.getElementById("baseLineTitre").style.display = "none";
  
  document.getElementById("changerCouleur").style.display = "none";
  zonePrint.style.display="block";

  setDockLogHeight("h1");
  sameHeight.style.height = "70px";


  // Affichage des éléments de la phrase complète
  document.querySelectorAll('.mot').forEach(span => span.style.display = "inline");
  document.getElementById("optionsBlock").style.display = "block";

  document.getElementById("switchBlock").style.display = "block";
  document.getElementById("infoPhrase").style.display = "block";

  accordion1.style.display="block";
  accordion2.style.display="block";
  accordion3.style.display="block";

  // On remplace la version mystère par la version complète
  document.getElementById("phraseMyst").style.display = "none";
  document.getElementById("phrase").style.display = "block";

  // On affiche le bouton de switch des options
  document.getElementById("switch-containerDiv").style.display = "block";

  // Affichage des réponses et des lettres
  document.querySelectorAll('.reponse').forEach(span => span.style.display = "inline");
  document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "inline");
  document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "none");
}


// Fonction pour désactiver les options visibles en mode enfant
function desactiverOptions() {
  document.getElementById("baseLineTitre").style.display = "block";
  document.getElementById("changerCouleur").style.display = "block";
  setDockLogHeight("h0");
  sameHeight.style.height = "0px";

  zonePrint.style.display="none";
  // Masquage des mots et options supplémentaires
  document.querySelectorAll('.mot').forEach(span => span.style.display = "none");
  document.querySelectorAll('.numero').forEach(span => span.style.display = "none");
  document.getElementById("optionsBlock").style.display = "none";
  document.getElementById("switchBlock").style.display = "none";

  document.getElementById("infoPhrase").style.display = "none";

  accordion1.style.display="none";
  accordion2.style.display="none";
  accordion3.style.display="none";



  // On remet la version mystère de la phrase
  document.getElementById("phraseMyst").style.display = "block";
  document.getElementById("phrase").style.display = "none";

  // Masquage du conteneur de switch
  document.getElementById("switch-containerDiv").style.display = "none";

  // Masquage des réponses et affichage des points d'interrogation
  document.querySelectorAll('.reponse').forEach(span => span.style.display = "none");
  document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none");
  document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inline");
}

// Génération d’un code aléatoire à 3 chiffres
let generatedCode = Math.floor(Math.random() * 900) + 100;
document.getElementById("generatedCode").textContent = generatedCode;

// Confirmation du mode enfant (le parent entre le code)
btnVersEnfantConfirm.addEventListener("click", () => {
  if (parseInt(codeInput.value) === generatedCode) {
    // Si le code est bon, retour au mode enfant
    btnVersParent.style.display = "inLine-flex";
    btnVersEnfant.style.display = "none";
    childModeConfirmation.style.display = "none";

    desactiverOptions();


  } else {
    alert("Code incorrect !");
  }
});

// Annulation du passage au mode enfant
btnVersEnfantCancel.addEventListener("click", () => {
  btnVersEnfant.style.display = "block";

  childModeConfirmation.style.display = "none";
});

// Confirmation du mode parent (l’adulte entre le code)
btnVersParentCodeConfirm.addEventListener("click", () => {
  if (parseInt(codeAskedInput.value) === generatedCode) {
    // Si le code est bon, on active les options parent
    modeEnfant=false;

    parentModeConfirmation.style.display = "none";
    activerOptions();
    btnVersEnfant.style.display = "block";

    codeAskedInput.value = "";

    // Remonte en haut de la page
    window.scrollTo({ top: 0, behavior: 'smooth' });
  } else {
    alert("Code incorrect !");
  }
});

// Annulation du passage au mode parent
btnVersParentCodeCancel.addEventListener("click", () => {
  parentModeConfirmation.style.display = "none";
  btnVersParent.style.display = "inLine-flex";
  codeAskedInput.value = "";
});