:root {
    /* Palette optimisée pour le confort visuel */
    --bg-color: #fcfcfc;          /* Blanc très légèrement cassé, moins agressif que le blanc pur */
    --text-color: #222222;        /* Gris très foncé, moins dur que le noir pur */
    --heading-color: #000000;     /* Titres en noir pour un maximum de hiérarchie */
    --accent-color: #0d47a1;      /* Un bleu marine, académique et sobre */
    --border-color: #e0e0e0;      /* Bordures très claires et discrètes */
    --note-bg-color: #f4f8ff;     /* Fond de note très subtil, couleur pastel bleu */

    /* Typographie choisie pour une lisibilité maximale */
    --font-body: 'Georgia', 'Times New Roman', serif; /* Georgia: Conçue pour l'écran, excellente lisibilité. */
    --font-heading: 'Inter', 'Helvetica Neue', 'Arial', sans-serif; /* Inter: Police moderne et très lisible pour les titres. */
}

/* Importation de la police 'Inter' pour les titres (optionnel, mais recommandé) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 17px;          /* Le juste milieu pour une lecture confortable */
    line-height: 1.7;         /* Interligne aéré pour ne pas fatiguer l'œil */
    text-align: justify;
    -webkit-font-smoothing: antialiased; /* Rendu des polices plus doux sur certains navigateurs */
    -moz-osx-font-smoothing: grayscale;
}

.menu-conteneur {
    background-color: rgba(252, 252, 252, 0.85);
    padding: 0.75rem 2rem;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.menu-conteneur a {
    color: var(--text-color);
    text-decoration: none;
    margin: 0 1.25rem;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.menu-conteneur a:hover {
    color: var(--accent-color);
}

.contenu-principal {
    max-width: 950px; /* Largeur optimale pour 50-75 caractères par ligne */
    margin: 3.5rem auto;
    padding: 0 2rem;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

h1 {
    font-size: 2.8em;
    border-bottom: 2px solid var(--heading-color);
    padding-bottom: 0.6rem;
    margin-bottom: 2.5rem;
}

h2 {
    font-size: 2em;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

separator {
	display:block;
	height:15px;
	width:100%;
    border-bottom: 1px solid var(--border-color);
}

h3 {
    font-size: 1.5em;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

p, li {
    margin-bottom: 1.2rem; /* Espace vertical légèrement accru entre les paragraphes */
}

ul {
    list-style-type: disc;
    padding-left: 2.5rem;
}

section > ul > li {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0.75rem;
}

li ul {
    margin-top: 0.75rem;
    list-style-type: circle;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2.5rem auto;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.note-block {
    background-color: var(--note-bg-color);
    border-left: 4px solid var(--accent-color);
    padding: 1.5rem;
    margin: 2.5rem 0;
    border-radius: 4px;
    font-size: 0.95em;
    line-height: 1.6;
}
/* ============================================= */
/* == STYLES POUR LE PANNEAU DE MISES À JOUR == */
/* ============================================= */

/* Conteneur principal du panneau */
.panneau-maj {
    background-color: var(--note-bg-color); /* Fond bleu pastel très léger, comme les notes */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin: 2rem 0 3rem 0; /* Espace au-dessus et en dessous */
    transition: all 0.3s ease-in-out;
}

/* La barre cliquable (le "titre") */
.panneau-maj summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1em;
    color: var(--accent-color); /* Couleur accentuée pour attirer l'œil */
    cursor: pointer;
    outline: none; /* Enlève le contour parfois moche au focus */
}

/* Change l'apparence au survol pour montrer que c'est interactif */
.panneau-maj summary:hover {
    background-color: rgba(13, 71, 161, 0.05); /* Couleur --accent-color avec une faible opacité */
}

/* L'icône (chevron) */
.panneau-maj .icone-summary {
    transition: transform 0.2s ease-in-out;
    stroke: var(--accent-color);
}

/* Fait pivoter l'icône lorsque le panneau est ouvert */
.panneau-maj[open] > summary .icone-summary {
    transform: rotate(90deg);
}

/* Contenu qui apparaît/disparaît */
.contenu-panneau {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.6;
}

/* Style de la liste des mises à jour à l'intérieur du panneau */
.contenu-panneau ul {
    list-style-type: none; /* On retire les puces par défaut */
    padding-left: 0;
    margin-bottom: 0;
}

.contenu-panneau li {
    padding: 0.75rem 0;
    font-size: 0.95em;
    border-bottom: 1px solid var(--border-color);
}

/* Pas de bordure pour le dernier élément de la liste */
.contenu-panneau li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Mise en avant de la date */
.contenu-panneau li strong {
    font-family: var(--font-heading);
    font-weight: 600;
    margin-right: 0.5rem;
}

/* ============================================= */
/* == STYLES POUR LA DÉMONSTRATION ÉTAPE 1   == */
/* ============================================= */

/* Style pour la liste du processus de création */
.liste-processus {
    font-family: var(--font-heading);
    line-height: 1.6;
    padding-left: 2rem;
}
.liste-processus li {
    margin-bottom: 1rem;
}
.liste-processus ol {
    margin-top: 1rem;
    font-family: var(--font-body);
    font-size: 0.95em;
}

/* Style pour le tableau d'analyse */
.tableau-analyse {
    width: 100%;
    margin: 2.5rem 0;
    border-collapse: collapse;
    font-size: 0.95em;
}
.tableau-analyse th, .tableau-analyse td {
    border: 1px solid var(--border-color);
    padding: 0.8rem 1rem;
    text-align: left;
    vertical-align: top;
}
.tableau-analyse thead {
    background-color: var(--note-bg-color);
}
.tableau-analyse th {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Style pour une citation mise en exergue et centrée */
.citation-centree {
    text-align: center;
    font-size: 1.2em;
    font-family: var(--font-heading);
    margin: 2rem 0;
    font-weight: 600;
    color: var(--accent-color);
}

/* Ajout d'une règle spécifique pour les <object> Edge Animate */
object[data-dw-widget="Edge"] {
    background-color: #000; /* Fond noir */
    display: block;        /* Assure que la marge auto fonctionne */
    margin: 0 auto;        /* Centre l'objet */
}

/* ============================================= */
/* == STYLES POUR LES BLOCS D'IMAGES         == */
/* ============================================= */

/* Conteneur pour centrer les images verticalement */
.bloc-images {
    display: flex;
    flex-direction: column; /* Empile les images les unes sur les autres */
    align-items: center;     /* Centre les images horizontalement */
    gap: 1.5rem;             /* Espace vertical entre les images */
    margin: 2rem 0;          /* Espace avant et après le bloc */
}

/* Assure que les images dans ces blocs ne sont pas réduites de manière excessive */
.bloc-images img {
    max-width: 90%; /* Laisse une petite marge mais reste grand */
    height: auto;
    margin: 0; /* Annule la marge par défaut des images */
}

/* ============================================= */
/* == STYLES POUR LE BLOC INTERLUDE          == */
/* ============================================= */

.interlude-block {
    background-color: #fcfcfc;
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--accent-color);
    border-radius: 8px;
    padding: 1.5rem 2rem 2rem 2rem;
    margin: 3rem 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.interlude-block h4 {
    font-family: var(--font-heading);
    font-size: 1.3em;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 1.5rem;
}
.interlude-block p, .interlude-block li {
    font-size: 0.9em;
    color: #555;
    text-align: left;
}

/* ============================================= */
/* == STYLE POUR SÉQUENCE LINÉAIRE           == */
/* ============================================= */
.sequence-lineaire {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    overflow-x: auto;  /* Ajoute un scroll si l'écran est trop petit */
    gap: 0.5rem;
    padding: 1.5rem;
    background-color: var(--note-bg-color);
    border-radius: 8px;
    margin: 2rem 0;
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ============================================= */
/* == STYLES POUR LE CERCLE CHROMATIQUE      == */
/* ============================================= */

.cercle-chromatique {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem;
    background-color: var(--note-bg-color);
    border-radius: 8px;
    margin: 2rem 0;
    font-family: var(--font-heading);
    font-weight: 600;
}
.couleur-item {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex-grow: 1; /* AJOUTEZ CETTE LIGNE */
    text-align: center; /* C'est bien de centrer le texte aussi */
}
.fleche-lien {
    font-size: 1.5em;
    color: var(--text-color);
}
/* Définition des couleurs de base */
.c-jaune { background-color: #fdd835; color: #333; text-shadow: none; }
.c-orange { background-color: #fb8c00; }
.c-rouge { background-color: #e53935; }
.c-violet { background-color: #8e24aa; }
.c-bleu { background-color: #1e88e5; }
.c-vert { background-color: #43a047; }

/* ============================================= */
/* == STYLES POUR LES SÉQUENCES DE POLARITÉ   == */
/* ============================================= */

.sequence-polarite {
    font-family: monospace; /* Police à chasse fixe pour un alignement parfait */
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    background-color: var(--note-bg-color);
    border-radius: 4px;
    margin: 1.5rem 0;
    letter-spacing: 0.1em; /* Espace les caractères pour la lisibilité */
    word-wrap: break-word;
}


/* ============================================= */
/* == STYLES POUR LES BLOCS DE POLARITÉ (VERSION CONSOLIDÉE) == */
/* ============================================= */

/* Conteneur principal - EN MODE SOMBRE */
.polarite-block {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: #242429; /* Fond sombre unifié */
    border: 1px solid #444; /* Bordure sombre */
    border-left-width: 5px; /* Épaisseur pour la bordure colorée */
    border-left-style: solid; /* Style pour la bordure colorée */
    border-radius: 6px;
    margin: 2rem 0;
    padding: 1.5rem;
    color: #cccccc; /* Couleur de texte par défaut pour le mode sombre */
}

/* Colonne de gauche (diagramme) */
.polarite-diagram {
    flex-shrink: 0;
    width: 60px;
    align-self: stretch;
    border-right: 1px solid #444; /* Bordure visible sur fond sombre */
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tetra-placeholder {
    width: 50px;
    height: 50px;
    border: 1px dashed var(--border-color);
}
.tetra-placeholder img {
    width: 100%; /* L'image prend toute la largeur du conteneur */
    height: 100%; /* L'image prend toute la hauteur du conteneur */
    object-fit: contain; /* Redimensionne l'image pour qu'elle soit entièrement visible sans déformation */
    padding: 0;
    margin: 0;
}
/* Colonne de droite (contenu textuel) */
.polarite-content {
    flex-grow: 1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
}

.polarite-content h3 {
    font-family: var(--font-heading);
    color: #ffffff; /* Titres en blanc pour un contraste maximal */
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.polarite-content .polarite-icons {
    margin-bottom: 1.5rem; /* Espace après les icônes */
    display: block;
}
.polarite-content p {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.polarite-sequence-couleurs {
    font-weight: bold;
    color: #ffffff; /* Blanc pour être lisible */
    margin-bottom: 1rem;
}
.polarite-conclusion {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9em;
    margin-top: 1.5rem;
    opacity: 0.7; /* Légèrement ajusté pour le fond sombre */
}

/* Style pour les icônes */
.polarite-icons {
    font-size: 1em;
}

/* Style pour la mise en surbrillance */
.highlight-text {
    background-color: var(--yellow, #ffc107); /* Jaune opaque pour la visibilité */
    color: #1a1a1a; /* Texte foncé pour contraster sur le jaune */
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

/* Style pour le sous-titre "Simplification" */
.polarite-simplification-titre {
    font-family: var(--font-heading);
    font-size: 1.1em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

/* CSS POUR VOS BALISES DE COULEUR */
rouge, orange, jaune, vert, bleu, violet {
    font-weight: bold;
}
rouge { color: #dc3545; }
orange { color: #fd7e14; }
jaune { color: #ffc107; }
vert { color: #28a745; }
bleu { color: #007bff; }
violet { color: #8834d4; }

/* BORDURES LATÉRALES COMME INDICATEURS COLORÉS */
.polarite-block--temps {
    border-left-color: #dc3545; /* Rouge */
}
.polarite-block--espace {
    border-left-color: #ffc107; /* Jaune */
}
.polarite-block--masse-pos {
    border-left-color: #007bff; /* Bleu */
}
.polarite-block--masse-neg {
    border-left-color: #28a745; /* Vert */
}

/* Fond subtil pour regrouper les lignes de polarités */
.polarite-sequence,
.polarite-sequence-detail,
.polarite-sequence-symetrie {
    background-color: rgba(0,0,0,0.2); /* Fond noir semi-transparent pour un effet "inset" */
    padding: 0.5em 0.75em;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* ======================================================= */
/* == ALTERNATIVE : CONTENEUR D'IMAGE FLEXIBLE         == */
/* ======================================================= */

/* Le nouveau conteneur qui remplace .tetra-placeholder */
.polarite-diagram-full {
    height: auto; /* La hauteur s'adaptera au contenu (l'image) */
    border: 1px solid var(--border-color); /* Une bordure propre */
    border-radius: 4px; /* Coins arrondis pour un look moderne */
    overflow: hidden; /* S'assure que l'image respecte les coins arrondis */
    display: flex; /* Permet un bon alignement de l'image à l'intérieur */
    align-items: center;
    justify-content: center;
}

/* Style pour l'image à l'intérieur du nouveau conteneur */
.polarite-diagram-full img {
    width: 100%; /* L'image remplit la largeur du conteneur (90px) */
    height: auto; /* Le navigateur calcule la hauteur pour garder les proportions */
    display: block; /* Supprime les espaces superflus sous l'image */
    margin: 0;
    padding: 0;
}


/* ============================================= */
/* == STYLES POUR LES SCHÉMAS SIMPLIFIÉS     == */
/* ============================================= */

/* Conteneur pour espacer les deux tables */
.schema-simple-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espace vertical entre les deux tables */
    margin: 2rem 0;
}

.schema-simple-table {
    border-collapse: collapse;
    width: 100%;
}

.schema-simple-table td {
    border: 1px solid #555;
    padding: 0.6rem 0.2rem;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
}

/* --- Définition des couleurs de fond --- */

/* Palette principale */
.bg-red { background-color: #fd0100; color: black; }
.bg-yellow { background-color: #fffd06; color: black; } /* Texte blanc par défaut */
.bg-green { background-color: #00b14f; color: black; }
.bg-blue { background-color: #2f74b5; color: black; }
.bg-green-light { background-color: #add096; color: black; }
.bg-blue-light { background-color: #98c1ed; color: black; }
.bg-green-dark { background-color: #365625; color: black; }
.bg-blue-dark { background-color: #1e4f7a; color: black; }

/* Couleurs spécifiques */
.bg-coin { border-top:1px solid #FFF; }
.bg-white { background-color: #d3dcdb; color: black; }
.bg-black { background-color: #010000; color: white; }

/* Classe utilitaire pour forcer le texte en noir */
.text-black {
    color: black !important;
}