/* Typo 1 */
@font-face {
    font-family: "Typo 1";
    font-weight: lighter;
    src: url("../src/fonts/nudles-main/webfonts/Nudles-Thin.woff") format("opentype");
}

@font-face {
    font-family: "Typo 1";
    font-weight: bold;
    src: url("../src/fonts/nudles-main/webfonts/Nudles-bold.woff") format("opentype");
}

@font-face {
    font-family: "Typo 4";
    font-weight: normal;
    src: url("../src/fonts/nudles-main/webfonts/Nudles-Regular.woff") format("opentype");
}

/* Typo 2 */
@font-face {
    font-family: "Typo 2";
    font-weight: normal;
    src: url("../src/fonts/Feroniapi-MediumItalic.woff") format("opentype");
}

/* Typo 3 */
@font-face {
    font-family: "Typo 3";
    font-weight: normal;
    src: url("../src/fonts/Velvelyne-Light.ttf") format("opentype");
}

@font-face {
    font-family: "Typo 5";
    font-weight: normal;
    src: url("../src/fonts/nudles-main/webfonts/Nudles-Bold.woff") format("opentype");
}

/* variables */
:root {
    --gap: 20px;
    --bgcolor: rgb(203, 201, 201);
    --bgcolor2: rgb(160, 159, 159);
    --couleur1: #EA4E2F;
    --couleur2: #FEE9E3;
    --couleur3: #EE6D53;
    --couleur4: #F28C77;
    --couleur5: #F6AB9B;
    --couleur6: #FACABF;

    --couleur7: #EA4E2F;;
    --couleur8: #e7ada1;
    --couleur9: #9b250e;
}

/* reset général */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: sans-serif;
    background-color: var(--bgcolor);
    height: 100%;
    width: 100%;
    overflow: hidden; /* Empêche la page entière de bouncer */
    position: fixed; /* Force l'iPad à rester figé */
}

/* HEADER */
header{
    position: fixed;
    background-color: var(--c1);
    height: 22vh;
    width: 17.5vw;
    z-index: 1000;
}

/* titre */
h1{
    height:11vh;
    width: 17.5vw;;
    background-color: var(--c1);
    font-family: "Typo 1";
    font-weight: normal;
    color: var(--c2);
    font-size: 4.5vw;
    display: flex;
    justify-content: center; 
    align-items: center;   
    cursor: pointer;
    padding: 1.5vh; 
    padding-top: 3.5vh;
}

h1:hover{
    -webkit-text-stroke: 2px var(--couleur2);
}

/* + */
#plus{
    font-family: "Typo 1";
    color: var(--couleur1);
    background-color: var(--couleur2);
    width: 17.5vw;
    height: 11vh;
    font-size: 6vw;
    cursor: pointer;
    display: flex;
    justify-content: center; 
    align-items: center;    
    padding-bottom: 0px;
}

#plus:hover{
    -webkit-text-stroke: 2px var(--couleur1);
}


/* PRÉSENTATION */
#présentation{
    position: fixed;
    top: 0;
    left: 17.5vw !important;
    right: 0;
 
    height: 22vh;
    background: var(--couleur2);
    color: var(--couleur1);
    padding: 2vh;
    padding-top:1vh;
    box-sizing: border-box;
    z-index: 800;
    transform: translateY(0);

    transition: right 0.3s ease-in-out, transform 0.5s ease;
    transform: translateY(0);
    display: flex;
    flex-direction: column;
}

#présentation.hidden { 
    transform: translateY(-100%); 
}

body.menu-open #présentation {
    right: 4vw; /* Se décale de la largeur de la barre */
    /* Si vous voulez qu'elle rétrécisse, assurez-vous que sa width n'est pas fixe ou utilisez calc() */
}

#togglePresentation {
    top: 5px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    text-align: left;
    color: var(--marron);
    font-weight: normal;
}

#togglePresentation:hover { color: var(--bgcolor2); }

#présentation p {
    font-family: "Typo 2", sans-serif;
    font-size: 2.2vh;
    overflow-y: auto;
    line-height: 2.7vh;
}

#présentation p::-webkit-scrollbar {
    width: 6px;
}

#présentation p::-webkit-scrollbar-track {
    background: rgba(144, 56, 25, 0.05);
}

#présentation p::-webkit-scrollbar-thumb {
    background: var(--couleur1);
    border-radius: 10px;
}

#up {
    width: 4vh;  /* Ajustez selon vos besoins */
    height: 3vh;
    display: block;
}

#up .cls-1 {
    fill: var(--couleur1); /* Utilise vos variables existantes */
    transition: fill 0.3s ease;
}

#togglePresentation:hover .cls-1 {
    stroke: var(--couleur1); /* Ajoute une couleur de contour */
    stroke-width: 1px;
}

/*liens*/
a{
    color: var(--c1);
    text-decoration: none;
}

a:hover{
    -webkit-text-stroke: 0.8px var(--couleur1);
}

/*définitions*/
#Typo1 {
    font-family: "Typo 1";
    font-size: 2.5vh;
    font-weight: normal;
}

  .DefTrigger {
    color: var(--c1);
    cursor: pointer;
  }

  .DefTrigger:hover {
    background-color: none;
    
  }

  #def {
    font-family: "Typo 3";
    display: none;
    color: var(--c1);
    font-size: 2.2vh;
    font-weight: normal;
  }

  #def a{
    -webkit-text-stroke: 0px var(--couleur1);
  }

  .DefTrigger:hover #def {
    display: inline;
    animation: fadeIn 0.1s ease-in-out;
  }

   .DefTrigger:hover #mot {
    -webkit-text-stroke: 0.8px var(--couleur1);
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }


/* PANNEAU LATÉRAL */
/* L'ÉTAT OUVERT (C'est cette règle qui fait apparaître le panneau au clic sur header div plus) */
/* État caché par défaut */
#panneauLat {
    position: fixed;
    top: 22vh;
    left: 0;
    width: 17.5vw;
    height: calc(100vh - 22vh);
    background-color: black;
    z-index: 1000;
    transform: translateX(-100%); /* Sort de l'écran à gauche */
    transition: transform 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease, background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État affiché (QUAND ON CLIQUE) */
body.menu-open #panneauLat {
    transform: translateX(0); /* Revient dans l'écran */
}

/* 1. Force la section fermée à une taille rigide */
.section-accordeon {
    display: flex;
    flex-direction: column;
    flex: 0 0 5.5vh; 
    overflow: hidden;
    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Force la section ouverte à aspirer TOUT le vide sans regarder le contenu */
.section-accordeon:has(.ouvert) {
    flex: 1 1 0%; /* Le 0% ici supprime le conflit de hauteur interne */
}

/* 3. Sécurité pour le contenu interne */
.contenu-accordeon {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* INDISPENSABLE : autorise l'élément à devenir plus petit que son texte */
    height: 0;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contenu-accordeon.ouvert {
    opacity: 1;
    height: 100%;
}

/* --- LE BOUTON (Titre) --- */
.onglet-principal {
    width: 100%;
    height: 5.5vh;
    padding: 10px 15px;
    background-color: var(--couleur1);
    color: var(--couleur2);
    font-family: "Typo 2";
    font-size: 2.2vh;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    
    /* MODIFICATIONS ICI */
    justify-content: center; /* Centre horizontalement le contenu */
    gap: 10px;              /* Ajoute un petit espace entre le texte et le signe +/- */
    
    flex-shrink: 0;
}

/* Style hover pour les boutons */
.onglet-principal:hover {
    font-size: 2.5vh;
    font-family: "Typo 1";
}




/* ONGLET GALERIE */
.map-item {
    margin-bottom: 15px;
}

.map-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 5px;
}

.map-info{
    font-family:'Typo 2'; 
    font-size: 2.2vh; 
    margin-top:15px;
    color: var(--c2);
    line-height: 2.7vh;
    width: 80%;
    cursor: pointer;
}

.map-info:hover{
    font-family:'Typo 1'; 
    font-size:2.5vh; 
}

.download-icon {
    position: absolute; 
    right: 5px; 
    top: 165px; 
    cursor: pointer;
    width: 28px; /* Taille du picto */
    height: 28px;
    transition: transform 0.2s ease;
}


#download {
    margin-top: 10px;
    width: 25px;  /* Ajustez selon vos besoins */
    height: 25px;
    display: block;
}

/* Couleur de la flèche */
#download .cls-1 {
    fill: var(--couleur2); /* Utilise vos variables existantes */
}

#download:hover .cls-1 {
    stroke: var(--couleur2); /* Ajoute une couleur de contour */
    stroke-width: 1px;
}




/* COULEURS ONGLETS */
#btnEtape1 {
    background-color: var(--c1); /* Rouge orangé */
    color: white;
}

#btnEtape2 {
    background-color: var(--c3); /* Bleu */
    color: white;
}

#btnEtape3 {
    background-color: var(--c4); /* Bleu */
    color: white;
}

#btnEtape4 {
    background-color: var(--c5); /* Bleu */
    color: white;
}

#btnEtape5 {
    background-color: var(--c6); /* Bleu */
    color: var(--c1);
}

#btnEtape6 {
    background-color: var(--c2); /* Bleu */
    color: var(--c1);
}

#btnEtape7 {
    background-color: white; /* Bleu */
    color: var(--c1);
}

.section-accordeon:has(#btnEtape1) .contenu-accordeon { background-color: var(--c1); }
.section-accordeon:has(#btnEtape2) .contenu-accordeon { background-color: var(--c3); }
.section-accordeon:has(#btnEtape3) .contenu-accordeon { background-color: var(--c4); }
.section-accordeon:has(#btnEtape4) .contenu-accordeon { background-color: var(--c5); }
.section-accordeon:has(#btnEtape5) .contenu-accordeon { background-color: var(--c6); }
.section-accordeon:has(#btnEtape6) .contenu-accordeon { background-color: var(--c2); }
.section-accordeon:has(#btnEtape7) .contenu-accordeon { background-color: white; }

/* ONGLET 1 : INFOS*/

#Titre{
    background-color: var(--c3);
    color: white;
    font-family: "Typo 2";
    font-size: 2.2vh;
    width: 100%;
    min-height: 11vh;
    display: flex;
    justify-content: center; 
    align-items: center;    
    cursor: pointer;
    padding: 10px 15px;
    line-height: 2.7vh;
}

#Auteurices{
    background-color: var(--c4);
    color: white;
    font-family: "Typo 2";
    font-size: 2.2vh;
    width: 100%;
    min-height: 11vh;
    display: flex;
    justify-content: center; 
    align-items: center;    
    cursor: pointer;
    padding: 10px 15px;
    line-height: 2.7vh;
}

#Description{
    background-color: var(--c5);
    color: white;
    font-family: "Typo 2";
    font-size: 2.2vh;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center;    
    cursor: pointer;
    padding: 10px 15px;
    line-height: 2.7vh;
}


#Titre, #Auteurices, #Description{
    display: block !important;    /* Block permet au texte de couler naturellement */
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;        /* Permet le retour à la ligne */
    word-wrap: break-word;        /* Casse les mots trop longs */
    text-align: left;
    position: relative;
    outline: none;
}

#Titre:hover, #Auteurices:hover, #Description:hover{
    
    font-family: "Typo 2";
}

/* Supprime le contour bleu par défaut pour tous les éléments éditables */
#Titre:focus, 
#Auteurices:focus, 
#Description:focus {
    font-family: "Typo 2";
    outline: none !important; /* Enlève la bordure bleue */
    box-shadow: none !important; /* Sécurité pour certains navigateurs */
}

/* Le compteur magique qui suit le curseur */
#Titre:focus::after, 
#Auteurices:focus::after, 
#Description:focus::after{
    content: attr(data-count); /* Récupère le texte du JS */
    font-size: 12px;
    margin-left: 8px;
    font-family: Arial, sans-serif; /* Police neutre pour le compteur */
    color: var(--c1);
    font-weight: normal;
    font-style: italic;
    opacity: 0.7;
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}


.char-counter {
    color: white;
    display: none;                /* Caché par défaut */
    position: static;             /* Suit le flux du texte */
    font-size: 13px;
    font-family: "Typo 2";
    margin-left: 8px;
    font-weight: normal;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;          /* Le compteur lui-même ne doit pas se couper */
}

#Titre:empty::before {
    content: "Titre de la carte";
    color: white;
    pointer-events: none;
    opacity: 0.5;
}

#Auteurices:empty::before {
    content: "Auteur..ice..s";
    color: white;
    pointer-events: none;
    opacity: 0.5;
}

#Description:empty::before {
    content: "Description";
    color: white;
    pointer-events: none;
    opacity: 0.5;
}


#Titre, #Auteurices, #Description {
    /* 1. On force le mode bloc pour que le contenu puisse pousser les bords */
    display: block !important;
    width: 100%;
    
    /* 2. LA LOGIQUE "BRUSH-LIST" : */
    height: auto !important;      /* La hauteur est définie par le texte */
    min-height: 5.5vh;             /* Hauteur minimum de base */
    flex-shrink: 0;               /* EMPÊCHE la zone de s'écraser si le parent est petit */
    
    /* 3. On remplace le centrage Flex par du padding interne */
    padding: 10px 15px; 
    box-sizing: border-box;

    /* 4. On s'assure que le texte crée des nouvelles lignes */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* On ajuste la description qui a souvent plus de contenu */
#Description {
    min-height: 100vh; 
}

/* Suppression des résidus de centrage qui bloquent l'extension */
#Titre, #Auteurices, #Description {
    align-items: flex-start !important; 
    justify-content: flex-start !important;
}
/* ONGLET 2 : PALETTES  */




/* LES ÉLÉMENTS INTERNES (Palettes) */
.palette {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    /* On s'assure qu'ils ne forcent pas une hauteur fixe au repos */
}

.color-swatch {
    width: 100%;
    height: 5.5vh;
    border-radius: 0px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative; /* INDISPENSABLE pour le voile et le z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Typo 2";
    font-size: 2.2vh;
}


.color-swatch:hover {
    font-size: 2.5vh;
    font-family: "Typo 1";
}

/* ÉTAT SÉLECTIONNÉ AVEC VOILE */
.color-swatch.selected {
    font-size: 2.5vh;
    font-family: "Typo 1";
}

.color-swatch.selected::after {
    font-size: 2.5vh;
    font-family: "Typo 1";
}

.color-swatch.selected {
    background-color: white !important;
    background-image: none !important; /* Au cas où il y aurait un dégradé */
    border: 0px solid #EEE; /* Optionnel : une légère bordure pour voir les bords */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- LE TEXTE : ROUGE SUR FOND BLANC --- */
.color-swatch.selected span {
    display: block !important; /* On force l'apparition du texte */
    color: var(--c1) !important; /* Utilise ton rouge/orange #EA4E2F */
    font-family: "Typo 1", sans-serif;
    font-size: 2.5vh;
    text-align: center;
    background: transparent !important;
    padding: 0 !important;
}
.brush-swatch {
    width: 100%;
    height: 5.5vh;
    border-radius: 0px;
    cursor: pointer;
    transition: transform 0.2s;
    /* AJOUT : Pour que les enfants positionnés se réfèrent à ce parent */
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Typo 2";
    font-size: 2.2vh;
}

.brush-swatch:hover {
    font-size: 2.5vh;
    font-family: "Typo 1";
}

.brush-swatch.selected {
    background-color: white !important;
    background-image: none !important; /* Au cas où il y aurait un dégradé */
    border: 0px solid #EEE; /* Optionnel : une légère bordure pour voir les bords */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- LE TEXTE : ROUGE SUR FOND BLANC --- */
.brush-swatch.selected span {
    display: block !important; /* On force l'apparition du texte */
    color: var(--c1) !important; /* Utilise ton rouge/orange #EA4E2F */
    font-family: "Typo 1", sans-serif;
    font-size: 2.5vh;
    text-align: center;
    background: transparent !important;
    padding: 0 !important;
}



#validatePalette {
    /* Supprime les styles par défaut */
    border: none;
    outline: none;
    appearance: none; /* Force la suppression des styles système (iOS/Android) */

    /* Dimensions et alignement */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5.5vh;
    flex-shrink: 0; /* Empêche l'écrasement par Flexbox */

    /* Style */
    background-color: var(--c4);
    color: white; /* Ou la couleur de ton texte */
    font-family: "Typo 2";
    cursor: pointer;
    
    /* Optionnel : transition pour le changement de bg-color */
    transition: background-color 0.1s ease;
}

#validatePalette:hover {
    -webkit-text-stroke: 3px white;
}

/* Retire aussi le contour bleu/noir au clic pour l'esthétique */
#validatePalette:focus {
    outline: none;
}

#valider {
    width: 25px;  /* Ajustez selon vos besoins */
    height: 25px;
    display: block;
}


#valider .cls-1 {
    fill: white; /* Utilise vos variables existantes */
    transition: fill 0.3s ease;
}

/* Ciblage du tracé au survol du bouton */
#validatePalette:hover #valider .cls-1 {
    stroke: white; /* Ou la couleur de votre choix */
    stroke-width: 1px;       /* Épaisseur du contour */
    paint-order: stroke;    /* Assure que le contour ne "mange" pas l'intérieur du tracé */
    transition: stroke 0.3s ease; /* Transition douce */
}

/* Classe de verrouillage */
.onglet-verrouille {
    opacity: 1;              /* Effet visuel grisé */
    pointer-events: none;      /* Désactive tous les clics et hovers */
    filter: grayscale(1);    /* Rend les couleurs ternes */
    cursor: not-allowed;
    user-select: none;         /* Empêche la sélection de texte */
}



#contentSub3 #alert {
    font-family: "Typo 2";
    font-size: 2.2vh;
    color: white;
    margin: 0;
    padding: 20px 15px;      /* On garde du padding pour le texte seulement */
    flex-grow: 1;            /* Le texte prend l'espace, poussant les boutons en bas */
    line-height: 2.7vh;
}

#contentSub2 #alert {
    font-family: "Typo 2";
    font-size: 2.2vh;
    color: white;
    margin: 0;
    padding: 20px 15px;      /* On garde du padding pour le texte seulement */
    flex-grow: 1;            /* Le texte prend l'espace, poussant les boutons en bas */
    line-height: 2.7vh;
}

#contentSub4 #alert {
    display: inline-block; /* Crucial pour que le padding fonctionne sur plusieurs lignes */
    font-family: "Typo 2";
    font-size: 2.2vh;
    color: white;
    margin: 0;
    padding: 20px 15px;      /* On garde du padding pour le texte seulement */
    flex-grow: 1;            /* Le texte prend l'espace, poussant les boutons en bas */
    line-height: 2.7vh;
}

#contentSub5 #alert {
    display: none;
    font-family: "Typo 2";
    font-size: 2.2vh;
    color: var(--c1);
    margin: 0;
    padding: 20px 15px;      /* On garde du padding pour le texte seulement */
    line-height: 2.7vh;
}




/* ONGLET 3 : ÉDITEUR DE PINCEAU */
.editor-header{
    padding: 0px;
    display: block;
}

.editor-buttons {
    display: flex;       /* Active le mode Flexbox */
    width: 100%;         /* Prend toute la largeur */
}

#brushNameInput {
    height: 40px;
    width: 12vw;             
    padding: 10px;           /* Espace intérieur pour le texte */
    background-color: var(--c5); 
    color: white;
    font-family: 'Typo 2';   /* Utilise votre police secondaire */
    font-size: 2.2vh;
    box-sizing: border-box;  /* Important : inclut le padding dans la largeur */
    border: none;
    outline: none;
    appearance: none;
}

#brushNameInput:hover {
    font-family: 'Typo 2';   /* Utilise votre police secondaire */
    font-size: 2.2vh;
}

/* Style quand on clique dedans (Focus) */
#brushNameInput:focus {
    font-family: 'Typo 2';   /* Utilise votre police secondaire */
    font-size: 2.2vh;
}

/* Style du texte indicatif (Placeholder) */
#brushNameInput::placeholder {
    color: var(--c2);
    opacity: 0.7;
}

#clearBrushCanvas {
    height: 5vh;
    flex: 1;             /* Prend 50% de l'espace (partagé avec le save) */
    background-color: var(--c5);
    color: white;
    border: none;
    cursor: pointer;
    font-family: "Typo 2";
}

#saveBrush {
    height: 5vh;
    flex: 1;             /* Prend 50% de l'espace */
    background-color: var(--c5);
    color: white;
    border: none;
    cursor: pointer;
    font-family: "Typo 2";
}

#clearBrushCanvas:hover, #saveBrush:hover #valider .cls-1 {
    stroke: white; /* Ou la couleur de votre choix */
    stroke-width: 1px;       /* Épaisseur du contour */
    paint-order: stroke;    /* Assure que le contour ne "mange" pas l'intérieur du tracé */
    transition: stroke 0.3s ease; /* Transition douce */
}

.brush-palette-final {
    display: flex;
    flex-direction: row;    /* Aligne les carrés horizontalement */
    width: 100%;            /* Prend toute la largeur disponible */
    height: 5.5vh;           /* Hauteur fixe pour la barre */
    flex-wrap: nowrap;      /* Empêche le retour à la ligne */
    border-right: none;     /* Supprime l'ancienne bordure latérale */
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Optionnel : séparation avec le canvas */
}

.final-swatch {
    flex: 1;                /* Chaque carré prend une part égale de la largeur */
    height: 5.5vh;           /* Garde la hauteur de la barre */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* On cache ou adapte le texte (span) car les carrés sont petits */
.final-swatch span {
    display: none;          /* Cache le texte pour ne garder que la couleur */
}

/* Optionnel : montrer un petit point ou un changement d'état si actif */
.final-swatch.active {
    border-bottom: 2px solid white;
    outline-offset: -2px;
    z-index: 10;
}
#brushEditorCanvas {
    image-rendering: pixelated; /* Indispensable pour garder les pixels nets */
    width: 100%;
    height: 25vh;
    background-color: white;
    cursor: crosshair;
    display: block;
}



/* ONGLET 4 : BIBLIOTHÈQUE */
#brushesList {
    display: flex;
    flex-direction: column;
    max-height: 300px; /* La zone de scroll */
    overflow-y: auto;  /* Active le scroll vertical */
    overflow-x: hidden;
    padding: 0px;
    gap: 0px;          /* Espace constant entre les items sans chevauchement */
}

.brush-item {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 0px;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.2s ease;
    position: relative;

    /* --- SOLUTIONS AU CHEVAUCHEMENT --- */
    height: auto;         /* Supprime la taille fixe qui cause le chevauchement */
    min-height: 5.5vh;     /* Taille minimum pour garder un confort de clic */
    flex-shrink: 0;       /* EMPÊCHE les items de s'écraser les uns sur les autres */
    box-sizing: border-box;
}

.brush-item:hover {
    z-index: 10;
    
}

.brush-item span {
    font-size: 2.2vh;
    font-family: "Typo 2";
    pointer-events: none;
    flex: 1;              /* Prend toute la largeur restante */
    white-space: normal;  /* Autorise le retour à la ligne si texte long */
    line-height: 1.2;
}

.brush-item:hover span {
    font-size: 2.5vh !important;
    font-family: "Typo 1" !important;
}

.brush-item.selected span {
    font-size: 2.5vh !important;
    font-family: "Typo 1" !important;
}

.brush-item.selected {
    background-color: var(--c1);
}

.brush-item img {
    height: 40px;
    width: 40px;
    min-width: 40px;      /* Empêche l'image de rétrécir */
    object-fit: contain;
    flex-shrink: 0;
}




/* ONGLET SUBMIT */
#ContenuMesCartes {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;   /* Crucial : enlève l'espace interne */
    margin-bottom: 0px !important;
    border: none !important;
    gap: 0 !important;       /* Enlève tout espace entre span et boutons */
    overflow: auto;        /* Force les boutons à rester dans le cadre */
}

#ContenuMesCartes span {
    font-family: "Typo 2";
    font-size: 2.2vh;
    color: var(--c1);
    margin: 0;
    padding: 20px 15px;      /* On garde du padding pour le texte seulement */
    flex-grow: 1;            /* Le texte prend l'espace, poussant les boutons en bas */
    line-height: 2.7vh;
}

#Submit, #New {
    font-family: "Typo 2";
    font-size: 2.2vh;
    height: 5.5vh;
    display: flex !important;
    margin: 0 !important;
    border-radius: 0 !important; /* Enlève les arrondis qui créent des vides */
    vertical-align: bottom;      /* Supprime l'alignement de ligne de texte */
    border: none;
    outline: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Submit {
    background-color: white;
    color: var(--c1);
}


#Submit:hover #up .cls-1 {
    stroke: var(--c1); /* Ou la couleur de votre choix */
    stroke-width: 1px;       /* Épaisseur du contour */
    paint-order: stroke;    /* Assure que le contour ne "mange" pas l'intérieur du tracé */
    transition: stroke 0.3s ease; /* Transition douce */
}



/* Animation de fondu */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade-in {
    opacity: 1;
    animation: fadeIn 0.8s ease forwards;
}

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

/* Conteneur de succès centré */
.success-container {
    display: flex;
    flex-direction: column;

    height: calc(100% - 5.5vh); /* Laisse la place pour le bouton en bas */

}

.success-text {
    font-family: 'Typo 2', sans-serif;
    font-size: 2.2vh;
    line-height: 2.7vh;
    color: var(--c1);
    padding: 5px 15px;
    padding-bottom: 7.5vh;
}



/* Bouton Refresh collé en bas (identique au style du bouton Submit) */
.btn-refresh-bottom {
    background-color: var(--c2);
    color: var(--c1);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.5vh;
    border: none;
    cursor: pointer;
    font-family: 'Typo 2', sans-serif;
    font-size: 2.2vh;
}

.btn-refresh-bottom:hover {
    font-family: 'Typo 1', sans-serif;
    font-size: 2.5vh;
}


/* BARRE D'OUTILS */
#barre {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 4vw;
    background-color: var(--couleur2);
    color: var(--couleur1);
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-top: 30px;
    padding-bottom: 50px;

    /* RÉPARTITION UNIFORME */
    justify-content: space-between; /* Répartit l'espace entre et autour des boutons */
    box-sizing: border-box;

/* Ajouts pour masquer au début */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out; 
}

body.menu-open #barre {
    transform: translateX(0);
}

.outils-dessin {
    display: contents;
}

.tool-btn, #btnResetTotal {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 2.2vh;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.tool-btn:hover {
    background: rgba(255,255,255,0.1);
}

.tool-btn.active {
    background: var(--couleur1);
    color: var(--couleur2);
    border-radius: 4px;
}

.brush-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 120px; /* Donne de la hauteur pour le slider */
}

#brushSizeSlider {
    appearance: none;
    width: 120px; /* Longueur du slider */
    height: 2px;
    background: var(--couleur1);
    /* Pivotement magique pour le mettre à la verticale */
    transform: rotate(-90deg);
    margin: 45px 0; /* Compense le pivotement */
    cursor: pointer;
}

#brushSizeSlider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--couleur1); /* Ta couleur orange/rouge */
    border-radius: 50%;          /* Cercle parfait */
    cursor: pointer;
    transition: transform 0.2s ease;
}

#brushSizeSlider::-webkit-slider-thumb:hover {
    transform: scale(1.3); /* Grossit légèrement au survol */
}

#brushSizeValue {
    margin-top: 30px;
    font-size: 2.2vh;
    font-family: 'Typo 1';
    text-align: center;
    -webkit-text-stroke: 0.7px var(--couleur1);
}

.tool-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.save-text {
    font-size: 7px;
    margin-top: 2px;
}

#btnResetTotal {
    font-family: "Typo 1";
    font-size: 50px;
    position: relative;
    z-index: 1000;
    justify-content: center; 
    align-items: center;   
    color: var(--couleur1);
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#btnResetTotal:hover {
    -webkit-text-stroke: 1px var(--couleur1);
}

#textBtn {
    font-family: "Typo 1";
    font-size: 4.2vh;
    position: relative;
    z-index: 1000;
    justify-content: center; 
    align-items: center;   
    color: var(--couleur1);
    background-color: transparent;
    border: none;
    cursor: pointer;
    -webkit-text-stroke: 0.7px var(--couleur1);
}

#textBtn:hover {
    -webkit-text-stroke: 1.3px var(--couleur1);
}

#btnResetTotal.active, #textBtn.active {
    -webkit-text-stroke: 2px var(--couleur1);
}

#undoBtn, #redoBtn, #clearBtn, #eraseBtn, #drawBtn, #saveMapBtn {
    margin-top: 10px;
    width: 25px;  /* Ajustez selon vos besoins */
    height: 25px;
    display: block;
}

#undoBtn:hover , #redoBtn:hover , #clearBtn:hover, #eraseBtn:hover, #drawBtn:hover, #saveMapBtn:hover {
    stroke: var(--couleur1); /* Ajoute une couleur de contour */
    stroke-width: 1px;
}


.tool-btn.active {
    background-color: transparent; /* Marron foncé */
    color: var(--couleur1);
    stroke: var(--couleur1); /* Ajoute une couleur de contour */
    stroke-width: 2px;
}

.tool-select {
    appearance: none;          /* Supprime la flèche par défaut */
    -webkit-appearance: none;
    background-color: transparent;
    color: var(--couleur1);
    border: 0px solid var(--couleur1);
    border-radius: 4px;
    
    
    font-family: "Typo 1";     /* Ta typo secondaire */
    font-size: 30px;
    text-align: center;
    text-align-last: center;   /* Centre le texte dans l'élément */
    width: 50px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    -webkit-text-stroke: 0.9px var(--couleur1);
}

.tool-select:hover {
    -webkit-text-stroke: 1.9px var(--couleur1);
}

.tool-select option {
    background-color: var(--bgcolor2);
    color: #000;
    font-size: 12px;
}

#textInputContainer {
    display: none;
    position: fixed;
    z-index: 2000;
    pointer-events: none; /* Le container ne doit pas bloquer le clic */
}

#textPalette {
    position: absolute;
    bottom: 100%; /* Place la palette AU-DESSUS de la ligne d'écriture */
    left: 0;
    display: flex;
    gap: 4px;
    margin-bottom: 10px; /* Espace entre palette et texte */
    pointer-events: auto; /* Mais on peut cliquer sur les couleurs */
}

#textInput {
    position: relative;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-family: "Typo 5";
    pointer-events: auto;
    /* On enlève tout décalage visuel */
    vertical-align: top; 
}

.text-color-square {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.text-color-square.active {
    transform: scale(1.1);
}

/* La petite notification en bas */
#toast-msg {
    font-family: "Typo 1r";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: var(--couleur1);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 2.2vh;
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
    z-index: 9999;
}
#toast-msg.show {
    opacity: 1;
    top: 50%;
}

#textInputContainer {
    display: none;
    position: fixed;
    z-index: 2000;
}

#textPalette {
    position: absolute;
    bottom: 105%; /* Juste au dessus de la ligne de frappe */
    left: 0;
    display: flex;
    gap: 4px;
}

#textInput {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-family: "Typo 5";
    /* Pour que le curseur de frappe soit à la bonne hauteur */
    vertical-align: top;
}



/* CANVA */
#appContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block; /* On remplace flex par block pour libérer le scroll */
    overflow: auto; 
    background-color: var(--bgcolor);
    z-index: 1;
    cursor: grab;
}

#zoomContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    /* On définit une zone de travail immense (ex: 5000px) */
    width: 5000px; 
    height: 5000px;
    transform-origin: center;
    transition: transform 0.1s ease-out;
}

#canvasWrapper {
    position: relative;
    /* Dimensions divisées par 2 pour une zone plus petite à l'écran */
    width: 595px;  
    height: 421px; 
    background-color: white;
    flex-shrink: 0;
    z-index: 2;
}

#canvasBg, #drawCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



#notice{
    font-family: "Typo 2";
    font-size: 40px;
    padding: 20px 20px;
    line-height: 2.7vh;
    color: white;
    text-align: right;
}

#notice:hover{
    font-family: "Typo 1";
    font-size: 40px;
}

#RetourCritique {
    color: var(--c1);
    font-family: "Typo 2";
    font-size: 2.2vh;
    width: 100%;
    /* On lui donne une hauteur minimale pour qu'elle soit visible même vide */
    min-height: 100vh; 
    padding: 10px 15px;
    line-height: 2.7vh;
    cursor: text; /* Curseur de texte pour indiquer que c'est remplissable */
    
    background-color: rgba(255, 255, 255, 0.05); /* Léger contraste pour la zone */
    border-radius: 8px;

        /* 1. On force le mode bloc pour que le contenu puisse pousser les bords */
    display: block !important;
    width: 100%;
    
    /* 2. LA LOGIQUE "BRUSH-LIST" : */
    height: auto !important;      /* La hauteur est définie par le texte */
    min-height: 5.5vh;             /* Hauteur minimum de base */
    flex-shrink: 0;               /* EMPÊCHE la zone de s'écraser si le parent est petit */
    
    /* 3. On remplace le centrage Flex par du padding interne */
    padding: 10px 15px; 
    box-sizing: border-box;

    /* 4. On s'assure que le texte crée des nouvelles lignes */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;

}


/* 2. Le texte du placeholder (Placé après avec ::after) */
#RetourCritique:empty::before {
    content: "Cliquez pour commencer à rédiger votre retour d'utilisateur sur l'outil (pertinence, défauts, qualités, bugs, suggestions de fonctionnalités, biais d'améliorations, ressenti global...)";
    color: var(--c1);
    opacity: 0.5;
    pointer-events: none;
}



/* Style quand on clique dedans */
#RetourCritique:focus {
    font-family: "Typo 2";
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
}


/* PAR DÉFAUT (Desktop) */
#togglePresentation .btn-icon {
    display: none; /* Caché sur ordi */
}

.mobile-text {
    display: none; /* Caché sur ordi */
}

[contenteditable] {
    white-space: pre-wrap; /* Préserve les sauts de ligne et les espaces à l'affichage */
    word-break: break-word;
}




@media screen and (max-width: 1024px) { /* Cible iPad et Tablettes */
    
    #panneauLat {
        display: none;
        top: 22vh;
        width: 50%;
        /* dvh est beaucoup plus fiable sur mobile que vh */
        height: calc(100dvh - 90px); 
        
        overflow-y: auto;
        /* Empêche le rebond élastique sur iOS */
        -webkit-overflow-scrolling: touch; 
        z-index: 100;
    }

    #appContainer {
    /* On réactive le scroll naturel de l'iPhone */
    overflow: auto !important; 
    /* On autorise le zoom par pincement et le défilement */
    touch-action: pan-x pan-y pinch-zoom !important;
    -webkit-overflow-scrolling: touch;
}

    canvas {
        touch-action: none !important; /* Bloque le scroll natif sur le dessin */
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        cursor: crosshair;
    }

header {
    position: fixed;
    background-color: var(--c2);
    height: 20vh;
    width: 100vw;
    z-index: 100;
    overflow: hidden; /* Garde ceci pour que le bas du mot soit coupé proprement */
}

h1 {
    height: 100%;
    width: 100vw;
    margin: 0;
    margin-top: 0;
    font-family: "Typo 5";
    font-weight: normal;
    font-size: 12vh;
    background-color: var(--c2);
    line-height: 30vw; /* Réduit un peu pour forcer le chevauchement ou la coupe */
    color: var(--c1);
    display: flex;
    justify-content: center;
    align-items: center;



    pointer-events: none;      /* Rend le h1 "invisible" pour la souris (clic, hover, sélection) */
    user-select: none;         /* Empêche la sélection du texte au cas où */
}


/* + */
#plus{
    display: none;
    font-family: "Typo 1";
    color: var(--couleur1);
    background-color: var(--couleur2);
    width: 100%;
    height: 45px;
    font-size: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center; 
    align-items: center;    
    padding-bottom: 0px;
}

#barre{
    display: none;
}
.mobile-text {
    display:inline; /* Caché sur ordi */
    font-family: "Typo 2";
    font-size: 18px;
}

  #def {
    font-family: "Typo 3";
    display: none;
    color: var(--c1);
    font-size: 18px;
    font-weight: normal;
  }

.ordi-text {
    display: none;
}
    /* La zone de dessin (Canvas) doit s'adapter */
    #canvasWrapper {
        width: 70vh;  /* Utilisation de viewport width */
        height: auto;
        aspect-ratio: 595/421; /* Garde les proportions d'origine */
        touch-action: none; 
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    }

    #brushNameInput {
    height: 40px;
    width: 70%;             /* Prend toute la largeur disponible */
    padding: 10px;           /* Espace intérieur pour le texte */
    background-color: var(--c5); 
    color: white;
    font-family: 'Typo 2';   /* Utilise votre police secondaire */
    font-size: 15px;
    box-sizing: border-box;  /* Important : inclut le padding dans la largeur */
    border: none;
    outline: none;
    appearance: none;
}

#brushNameInput:hover {
    font-family: 'Typo 2';   /* Utilise votre police secondaire */
    font-size: 15px;
}

/* Style quand on clique dedans (Focus) */
#brushNameInput:focus {
    font-family: 'Typo 2';   /* Utilise votre police secondaire */
    font-size: 15px;
}

#brushEditorCanvas {
    image-rendering: pixelated; /* Indispensable pour garder les pixels nets */
    width: 100%;
    height: 25vh;
    background-color: white;
    cursor: crosshair;
    display: block;
}

    /* Présentation */
    #présentation {
        left: 0 !important;
        top: 20vh;
        height: calc(100vh - 20vh);
        width: 100%;
        z-index: 101;
        padding: 20px;
        padding-top: 5px;
}
    
#présentation p {
    font-family: "Typo 2", sans-serif;
    font-size: 18px;
    overflow-y: auto;
    line-height: 22px;
}

    #présentation.hidden { 
    transform: translateX(0%); 
}

    #présentation p::-webkit-scrollbar {
    display: none;
}

#présentation p::-webkit-scrollbar-track {
    display: none;
}

#présentation p::-webkit-scrollbar-thumb {
    display: none;
}

#contentSub4, #contentSub5, #contentSub6, #ContenuMesCartes{
    overflow: auto;
}


#canvasWrapper canvas {
    /* Indispensable : dit à iOS de ne pas toucher au tactile ici */
    touch-action: none !important; 
    /* Empêche la loupe de sélection de texte */
    -webkit-user-select: none; 
    /* Empêche le menu contextuel (copier l'image) */
    -webkit-touch-callout: none; 
    /* Optionnel : évite le tap-to-zoom */
    user-select: none;
}


/* On cache le SVG sur mobile */
    #togglePresentation svg {
        display: none;
    }

    /* On affiche le texte sur mobile */
    #togglePresentation .btn-icon {
        display: block;
        line-height: 1;
    }

    #appContainer {
    overflow: hidden; /* Désactive le scroll barre pour gérer le pan en JS */
    touch-action: none; /* Empêche le navigateur de zoomer/scroller tout seul */
    -webkit-overflow-scrolling: touch; 
}

#Typo1 {
    font-family: "Typo 4";
    font-size: 20px;
    font-weight: normal;
}
}