/* --- Main layout --- */
/*body {
    display: flex;
    flex-direction: column; /* mobile par défaut * /
    margin: 0;
    padding: 0 10px;
    gap: 10px;
}*/


body {
    display: flex;
    flex-direction: row; /* recherche à gauche, contenu à droite */
    align-items: flex-start;
    margin: 0;           /* enlever toute marge par défaut */
    padding: 0;          /* enlever padding global qui limite largeur */
    gap: 10px;           /* espace entre colonnes */
}

#app {
    display: flex;
    gap: 12px;
}


/*inclusion de ficher [[[]]]*/
.included-note {
    border-left: 4px solid #ccc;
    padding: 8px 12px;
    margin: 10px 0;
    background: #f9f9f9;
}

.included-title {
    font-weight: bold;
    margin-bottom: 6px;
}

/*Blocs repliables*/
details.fold {
    margin: 8px 0;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

details.fold summary {
    cursor: pointer;
    font-weight: bold;
}


/*.editor-with-palette {
   / * display: flex;
   
    align-items: flex-start;
    gap: 10px;* /

}*/


/*Palette verticale*/
/* Palette verticale */


/*#editText {
width: 100%;
    min-height: 300px;
    resize: vertical;

    position: sticky;
    top: 10px; / * ajuste selon ton header * /
}*/

#highlightColumn {
    width: 5px;
    display: flex;
    justify-content: center;
        gap: 10px;
    position: sticky;
    top: 80px; /* ajuste selon ton header */
}


/*    #searchColumn {
        flex: 0 0 150px; /* largeur fixe pour la colonne recherche * /
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
            
    /*resize: vertical; /* ?* /
    position: sticky;/*?* /
    top: 10px; /* ajuste selon ton header *//*? XX* /
    }*/
    


#highlightPalette {
    display: flex;
    flex-direction: column;

}



/* #highlightPalette {
    width: 100%;
    min-height: 300px;
    resize: vertical;

    position: sticky;
    top: 10px; /* fin recopie*/
  /*  position: sticky;
    top: 10px; / * ajuste selon ton header * /
    / *display: flex;

    flex-direction: column; / * colonne verticale * /
    gap: 8px;
    / * plus besoin de absolute si elle est dans la colonne éditor * /
    margin-bottom: 10px; / * un peu d'espace sous la palette * /
}*/

/* Les ronds de couleur */

#highlightPalette .hl-circle {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    background-clip: padding-box;
}



/* Animation au survol */
#highlightPalette .hl-circle:hover {
    transform: scale(1.2);
}

/* Indication de couleur sélectionnée */
#highlightPalette .hl-circle.active {
    border: 3px solid black;
}



/*#highlightPalette .hl-circle {
        display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s;
}*/

/* Fond pour chaque couleur */
#highlightPalette .hl-circle.yellow { background-color: #fff176; }
#highlightPalette .hl-circle.green  { background-color: #81c784; }
#highlightPalette .hl-circle.blue   { background-color: #64b5f6; }
#highlightPalette .hl-circle.pink   { background-color: #f48fb1; }
#highlightPalette .hl-circle.purple { background-color: #ba68c8; }
#highlightPalette .hl-circle.empty  { background-color: #fff; } /* gomme / supprimer */


/* Couleurs * /
.hl-circle.yellow  { background: #fff3a0; }
.hl-circle.pink    { background: #ffd6e8; }
.hl-circle.green   { background: #dff5e1; }
.hl-circle.blue    { background: #e3f0ff; }
.hl-circle.purple  { background: #efe1ff; }*/


/* double définition 
.hl-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}*/

.hl-circle.active {
    border-color: #333;
}

/* Gomme */
.hl-circle.empty {
    background: white;
    border: 2px dashed #aaa;
}


/* Mark associé */
mark.yellow  { background: #fff3a0; }
mark.pink    { background: #ffd6e8; }
mark.green   { background: #dff5e1; }
mark.blue    { background: #e3f0ff; }
mark.purple  { background: #efe1ff; }

/*Surlignage*/
mark {/* premiere version*/
    background: #fff3a0;
    padding: 0 2px;
    border-radius: 3px;
}

.markyellow {
    background: #fff3a0;
    padding: 0 2px;
    border-radius: 3px;
}

.markpink {
    background: #ffd6e8;
    padding: 0 2px;
    border-radius: 3px;
}

.markgreen {
    background: #dff5e1;
    padding: 0 2px;
    border-radius: 3px;
}

.markblue {
    background: #e3f0ff;
    padding: 0 2px;
    border-radius: 3px;
}

.markpurple {
    background: #efe1ff;
    padding: 0 2px;
    border-radius: 3px;
}



/* Desktop : recherche à gauche, contenu principal à droite */
@media screen and (min-width: 900px) {
    body {
        flex-direction: row;
        align-items: flex-start;
    }

    #searchColumn {
        flex: 0 0 150px; /* largeur fixe pour la colonne recherche */
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
            
    /*resize: vertical; /* ?*/

    position: sticky;/*?*/
    top: 10px; /* ajuste selon ton header *//*? XX*/
    }

    #mainContent {
        flex: 1 1 auto;  /* prend tout l’espace restant */
        min-width: 600px; /* largeur minimum confortable */
        max-width: 1800px; /* pas trop large sur grand écran - CHANGE QUEDALLE PUTAIN */
        order: 2;
    }
}

/* --- Éditeur --- */
.editor-container {/*NEXISTE PLUS*/
    display: flex;
    gap: 20px; /* espace entre textarea et preview */
    align-items: flex-start;
    width: 100%;
}

/* Colonne gauche : textarea + boutons NEXISTE PLUS*/
.editor-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 2;         /* prend plus de largeur que la preview */
    min-width: 400px; /* textarea large */
}



/* Textarea */

 /*#editText {
    width: 100%;
    min-height: 300px; /* plus grand pour que les boutons restent visibles * /
 box-sizing: border-box;
    resize: vertical; /* redimensionnement vertical autorisé * /
}  */

/* Boutons sous le textarea  EXISTE PLUS*/
.editor-left button {
    width: max-content;
    margin-top: 5px;
    align-self: flex-start;
}

/* Colonne droite : preview */
.editor-preview {/*NEXISTE PLUS*/
    flex: 2;        /* moins large que textarea */
    min-width: 300px;
    border-left: 2px solid #ccc;
    padding-left: 10px;
   /* box-sizing: border-box;
   /* max-height: 600px; /* limite la hauteur de la preview */
   /* overflow-y: auto;  /* scroll interne si texte long */
}

/* Mobile : empile textarea et preview */
@media screen and (max-width: 899px) {
    .editor-container {
        flex-direction: column;
    }
    .editor-preview {
        border-left: none;
        padding-left: 0;
        max-height: none;
        overflow: visible;
    }
}




/*--------------AJOUT boite explications*/
.help {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    color: #666;
}

/*CSS split écran*/
/*.editor {
    display: flex;
    gap: 12px;
}*/

.lvl1 { margin-left: 0;
text-decoration : none;
    color : teal;
}
.lvl1 a{
text-decoration : none;
    color : teal;
}
.lvl2 { margin-left: 20px;
text-decoration : none;
    color : teal;}
    
.lvl2 a{
text-decoration : none;
    color : teal;
}
.lvl3 { margin-left: 40px;
text-decoration : none;
    color : teal;}
    
.lvl3 a{
text-decoration : none;
    color : teal;
}





#editText {
    width: 100%;
    min-height: 300px;
    resize: vertical;

    position: sticky;
    top: 10px; /* ajuste selon ton header */
}

/*.preview {
    width: 55%;
    max-width: 100%;
}*/



.preview {
    width: 100%;/*TAILLE DE LEDITEUR XX*/
    padding: 10px;
    border-left: 2px solid #ddd;
    background: #fafafa;
    overflow-y: auto;
}

/*previsualisation de fiche*/
#hoverPreview {
    position: absolute;
    max-width: 300px;/* oupsi... XX*/
    background: white;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 0.85em;
    z-index: 1000;
}

/*Styles visuels variés*/

blockquote {
    border-left: 4px solid #bbb;
    padding-left: 10px;
    color: #555;
}

.important {
    background: #fff3cd;
    padding: 8px;
    border-left: 4px solid #f0ad4e;
}

.warning {
    background: #e7f3ff;
    padding: 8px;
    border-left: 4px solid #0d6efd;
}

.toc {
    background: #f8f8f8;
    padding: 10px;
    margin-bottom: 10px;
}


/* ===================== THÈMES ===================== */

/* --- Thème pastel (défaut) --- */
body.theme-pastel,
body:not(.theme-sobre) {
    font-family: 'Comic Sans MS', 'Segoe UI', cursive, sans-serif;
    background: linear-gradient(125deg,
        #e0f7f4, #d6e4ff, #cbe8ff, #c3dafe, #e0cfff, #f2ccff);
    color: #405c84;
    margin: 0;
    padding: 20px;
    text-align: center;
    background-attachment: fixed;
}

/* Arc-en-ciel flottant pastel */
body.theme-pastel::before,
body:not(.theme-sobre)::before {
    content: "";
    position: fixed;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #d6e4ff,
        #c3dafe,
        #e0cfff,
        #f2ccff,
        #e0f7f4,
        #cbe8ff,
        #d6e4ff
    );
    opacity: 0.1;
    z-index: -1;
    animation: rainbowShift 60s linear infinite;
}

@keyframes rainbowShift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Thème sobre --- */
body.theme-sobre {
    font-family: Arial, sans-serif;
    background: #e5f0fa; /* bleu très pâle et froid */
    color: #1c2c3a;
}

body.theme-sobre::before {
    display: none;
}

/* ===================== CONFETTIS ===================== */
.confetti-container { display: none; } /* optionnel pour sobre */

/* ===================== TITRES ===================== */
h1, h2, h3 {
    color: #6ca0dc;
    text-shadow: 1px 1px 2px white;
}

body.theme-sobre h1, body.theme-sobre h2, body.theme-sobre h3 {
    color: #1c2c3a;
    text-shadow: none;
}

/* ===================== BOUTONS ===================== */
button {
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 6px; /* moins arrondi pour sobre */
}

/* Boutons pastel */
body.theme-pastel button,
body.theme-pastel .cloud-button,
body:not(.theme-sobre) button,
body:not(.theme-sobre) .cloud-button {
    background:#fbe0ff;
    border: 2px solid #eabfff;
    color: #357ab8;
    border-radius: 12px; /* arrondi plus marqué */
}

body.theme-pastel button:hover,
body.theme-pastel .cloud-button:hover,
body:not(.theme-sobre) button:hover,
body:not(.theme-sobre) .cloud-button:hover {
    background: #fddaff;
}

/* Boutons sobre */
body.theme-sobre button,
body.theme-sobre .cloud-button {
    background: #d0e1f5; /* camaïeu bleu froid */
    border: 2px solid #a0c4e5;
    color: #1c2c3a;
    border-radius: 6px;
}

body.theme-sobre button:hover,
body.theme-sobre .cloud-button:hover {
    background: #c0d4ea;
}

/* Bouton nuageux pastel */
body.theme-pastel .cloud-button {
    background: linear-gradient(145deg, #f0f8ff, #e0f7f4, #f2ccff);
    border: 2px solid #d3e0f5;
    color: #35669a;
}

body.theme-pastel .cloud-button:hover {
    background: linear-gradient(145deg, #e0f7f4, #d6e4ff, #e0cfff);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(160, 160, 240, 0.4);
    color: #264d73;
}

/* ===================== BOÎTES ===================== */
.jolie-boite {
    /*max-width: 800px;*/
    margin: 10px auto;/*SERT A RIEN???*/
    padding: 40px;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Boîte pastel */
body.theme-pastel .jolie-boite,
body:not(.theme-sobre) .jolie-boite {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(200, 200, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(100, 100, 150, 0.2);
    color: #405c84;
    backdrop-filter: blur(3px);
}

/* Boîte sobre */
body.theme-sobre .jolie-boite {
    background: #d9e6f2;
    border: 1px solid #a0c4e5;
    border-radius: 8px; /* moins arrondi */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #1c2c3a;
}

/* ===================== TEXTAREAS ===================== */
textarea {
    width: 100%;
    min-height: 100px;
    padding: 8px;
    font-size: 1rem;
    resize: vertical;
    border-radius: 12px;
    border: 1px solid #c3dafe;
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

body.theme-sobre textarea {
    font-family: Arial, sans-serif;
    border-radius: 6px;
    border: 1px solid #a0c4e5;
}

/* ===================== LIENS ===================== */
.link {
    color: #357ab8;
    cursor: pointer;
    text-decoration: underline;
}

body.theme-sobre .link {
    color: #1c2c3a;
}

/* ===================== FICHES SUPPRIMÉES ===================== */
.deleted {
    color: #888;
    font-style: italic;
}

/* ===================== LISTE DE RECHERCHE ===================== */
#searchResultsWords {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 12px;
    padding: 5px;
    list-style: none;
    margin: 10px 0;
}

body.theme-pastel #searchResultsWords {
    background: rgba(255,255,255,0.7);
    border: 1px solid #ccc;
}

body.theme-sobre #searchResultsWords {
    background: rgba(220,230,245,0.9);
    border: 1px solid #a0c4e5;
}

#searchResultsWords li {
    margin: 2px 0;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

body.theme-pastel #searchResultsWords li:hover {
    background: rgba(200, 220, 255, 0.4);
}

body.theme-sobre #searchResultsWords li:hover {
    background: rgba(180,200,225,0.4);
}

/* ===================== MESSAGES ===================== */
#currentAutoFile {
    font-style: italic;
    margin-top: 10px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    /*body { padding: 15px; }*/
    .jolie-boite { margin: 20px auto; padding: 20px; font-size: 1rem; }
    textarea { font-size: 0.95rem; }
    button, .cloud-button { padding: 8px 16px; font-size: 0.95rem; }
}

@media (max-width: 768px) {
   /* body { padding: 10px; }*/
    .jolie-boite { margin: 15px auto; padding: 15px; font-size: 0.95rem; }
    textarea { font-size: 0.9rem; }
    button, .cloud-button { padding: 6px 12px; font-size: 0.9rem; }
}


/* Correction lisibilité mobile — projet fiches */
@media (max-width: 600px) {

  body {
    font-family: 'Comic Neue', 'Comic Sans MS','Segoe UI', cursive, sans-serif;
    font-size: 1rem;
  }

  .preview,
  .preview p,
  .preview li,
  .preview blockquote,
  .preview div {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  textarea {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}



/*@media (max-width: 600px) {
	body {    
    font-family: 'Comic Neue', 'Comic Sans MS','Segoe UI',  cursive, sans-serif;
}
  html {
    font-size: 135%; / * ≈ 22px * /
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  button,
  select {
    font-size: 1.2rem;
    padding: 0.8rem 1.4rem;
  }

  #speedControls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #speedControls button {
    font-size: 1.2rem;
    padding: 0.7rem 1rem;
  }

  #currentAutoFile {
    font-size: 1.2rem;
  }
  select {/ *Pour éviter que ca sit trop long* /
    max-width: 75%;
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    box-sizing: border-box;
}


  textarea,
    input {
        font-size: 17px;
    }

    .preview p {
        font-size: 18px;
    }


    .jolie-boite { margin: 10px auto; padding: 10px; font-size: 0.9rem; }
    textarea { font-size: 0.85rem; }
    button, .cloud-button { padding: 5px 10px; font-size: 0.85rem; }
    

}*/

/* FORÇAGE GLOBAL POLICE — MOBILE ET DESKTOP */
/*html, body, input, textarea, button, select,
p, li, div, span, h1, h2, h3, h4, h5, h6 {
    font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif !important;
}*/