/*=================================================================
BASE
=================================================================*/
html, body {
  margin: 0;
  padding: 0;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
                 "Apple Color Emoji", "Segoe UI Emoji";
    width: 100%;
    color: #333;
    background-color: #f9f9f9;
}
p {
  line-height: 1.6;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}


/*=================================================================
BANDEAU DE MENU
=================================================================*/
.menu-banner {
    width: 100%;
    background-color: #9bb6bd;
    padding: 15px 0;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.menu-logo {
    height: 150px;
}

/*=================================================================
HERO BANNER – pleine largeur, image mise en valeur
=================================================================*/
.hero {
    width: 100%;
    margin: 0 auto;
    height: 40vh;
    min-height: 250px;
    background-image: url("images/bocal.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    box-sizing: border-box;
}

/* Conteneur commun pour le titre et le sous-titre */
.hero-text-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 5px;
    max-width: 80%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0 auto;
}

/* Titre avec sous-ligne bleu-gris */
.hero-title {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-weight: 800;
    color: #000000 !important;
    text-shadow: none;
    font-size: 3rem;
    margin-bottom: 10px;
    border-bottom: 5px solid #99cccc;
    padding-bottom: 5px;
}

/* Sous-titre */
.hero-subtitle {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: #000000 !important;
    text-shadow: none;
    padding: 10px;
    max-width: 80%;
    text-align: center;
    font-size: 1.2rem;
    max-width: 700px;
    margin-top: 10px;
}

/*=================================================================
CONTENEUR PRINCIPAL (tout le contenu sous le bandeau)
=================================================================*/
.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*=================================================================
EN-TÊTES
=================================================================*/
h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 20px;
}



.intro {
  font-size: 1.1rem;
  color: #444;
}


/*=================================================================
POEM CONTAINER & COLUMNS
=================================================================*/
.poem-container {
display: flex;
gap: 20px;
margin: 20px 0;
}

.poem-column {
flex: 1;
padding: 15px;
background: #e2ebed;          /* couleur claire, modifiable */
border-radius: 5px;
min-height: 400px;
display: flex;
flex-direction: column;
opacity: 1; /* Assurez-vous que l'opacité est à 1 */
}


/*=================================================================
TITRES DES POÈMES
=================================================================*/
.poem-title {
margin-top: 0;
color: #2c3e50;
font-size: 1.2em;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

/*=================================================================
TEXTE DES POÈMES
=================================================================*/
.poem-text {
  line-height: 1.45; 
flex-grow: 1;
white-space: pre-line;
font-weight: 400;   /* empêche le gras */
overflow-y: auto;
padding-right: 5px;
}


/* Interlignes spécifiques */
#original-poem {
margin-bottom: 10px;
}

#transformed-poem {

}

/*=================================================================
BOUTONS
=================================================================*/
.buttons {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
}

button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: all 0.3s;
font-weight: bold;
position: relative;
}

/* Couleurs des boutons (exemple: palette bleue – à adapter si besoin) */
#ferment-btn {
background: #6f888e;
color: #fff;
}

#ferment-btn:hover { background: #597075; }

#ferment-btn:disabled {
background: #9bb6bd;
cursor: not-allowed;
opacity: 0.6;
}

#reset-btn {
background: #a08565;
color: #fff;
}

#reset-btn:hover { background: #7f6b52; }

/*=================================================================
INDICATEUR D'ITÉRATION
=================================================================*/
.iteration-counter {
text-align: center;
margin-top: 20px;
font-style: italic;
color: #666;
font-size: 0.9em;
}


/*=================================================================
SCROLLBARS PERSONNALISÉES (WebKit) & MASQUAGE
=================================================================*/
.poem-text::-webkit-scrollbar { width: 5px; }
.poem-text::-webkit-scrollbar-track { background: #f1f1f1; }
.poem-text::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
.poem-text::-webkit-scrollbar-thumb:hover { background: #555; }

/* Masquage des scrollbars sur Chrome/Safari */
.poem-text::-webkit-scroll,
.poem-text::-webkit-scrollbar-track,
.poem-text::-webkit-scrollbar-thumb { display: none; }

/*=================================================================
EFFETS DE SURVOL DES COLONNES
=================================================================*/
.poem-column:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/*=================================================================
RESPONSIVE
=================================================================*/
@media (max-width: 768px) {
.hero { height: 45vh; }
.hero-title   { font-size: 2rem; }
.hero-subtitle{ font-size: 1rem; }
.poem-container { flex-direction: column; }
.poem-column    { min-height: 300px; }
}
/*=================================================================
Info-bulles
=================================================================*/
/* Info-bulles */
/* Conteneur pour les info-bulles côte à côte */
.info-bubbles-container {
  display: flex;
  flex-direction: row;
  gap: 10px; /* Espace entre les bulles */
  margin: 10px 0; /* Marge autour du conteneur */
}

/* Style de base pour les info-bulles */
.info-bubble {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 18px 22px;
  border-radius: 14px;
  font-size: 1em;
  color: #2c3e50;

  background: rgba(0,0,0,0.03);
  border-left: 4px solid #6f888e;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  position: relative;
  cursor: pointer;

  flex: 1;
  min-width: 0;

  margin: 0 5px;
  line-height: 1.6;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Couleurs spécifiques pour chaque bulle */
.info1 {
  border-left-color: #6f888e;
  background: rgba(111,136,142,0.08);
}

.info2 {
  border-left-color: #9bb6bd;
  background: rgba(155,182,189,0.12);
}

/* Effet de survol */
.info-bubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.fermentation-status {
  margin-top: 10px;
  font-size: 0.95em;
  opacity: 0.85;
}
.prompt-container {
  margin-top: 15px;
}

.prompt-display {
  background: #111;
  color: #9f9;
  padding: 10px;
  font-size: 0.85em;
  white-space: pre-wrap;
  border-radius: 6px;
  overflow-x: auto;
  max-height: 300px;
}

#toggle-prompt {
  margin-bottom: 5px;
}
.token-panel{
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.9em;
  opacity: 0.92;
  background: rgba(0,0,0,0.05);
}
.token-badge{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.95em;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: rgba(0,0,0,0.05);
}

.token-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.token-dot-wait{ background: #999; }   /* gris */
.token-dot-ok{ background: #2e7d32; }  /* vert */
.token-dot-bad{ background: #c62828; } /* rouge */

/*=================================================================
Profils d'acidité (cartes sous le prompt)
=================================================================*/
.acid-profiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.acid-card{
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(0,0,0,0.03);
  border-left: 4px solid #6f888e;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.acid-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}

.acid-card-title{
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 4px;
}

.acid-card-text{
  color: #444;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 400;
}

/* Variantes de couleur (barre gauche + fond subtil) */
.acid-lactique{ border-left-color:#7aa6a8; background: rgba(122,166,168,0.10); }
.acid-levure  { border-left-color:#a08565; background: rgba(160,133,101,0.12); }
.acid-vinif   { border-left-color:#6f888e; background: rgba(111,136,142,0.10); }
.acid-oxy     { border-left-color:#9bb6bd; background: rgba(155,182,189,0.14); }
.acid-eff     { border-left-color:#7c8fb3; background: rgba(124,143,179,0.12); }
.acid-agg     { border-left-color:#b85c5c; background: rgba(184,92,92,0.12); }

/* Responsive */
@media (max-width: 768px) {
  .acid-profiles{
    grid-template-columns: 1fr;
  }
}
/* Titre au-dessus des cartes */
.acid-profiles-title{
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 800;
  color: #2c3e50;
}

/* Carte active (= profil courant) */
.acid-card.active{
  outline: 2px solid rgba(46,125,50,0.45);
  box-shadow: 0 14px 34px rgba(46,125,50,0.18);
  transform: translateY(-2px);
}

/* Petite pastille “en cours” */
.acid-card.active .acid-card-title::after{
  content: " — en cours";
  font-weight: 700;
  font-size: 0.9em;
  color: rgba(46,125,50,0.9);
}
.acid-profiles-note{
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}
/*=================================================================
Économie numérique / infrastructure
=================================================================*/

.infra-title{
  margin-top: 25px;
  margin-bottom: 8px;
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.1rem;
}

.infra-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.infra-card{
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,0.03);
  border-left: 4px solid #6f888e;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.infra-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}

.infra-card-title{
  font-weight: 800;
  margin-bottom: 6px;
  color: #2c3e50;
}

.infra-card-text{
  font-size: 0.95rem;
  color: #444;
  line-height: 1.45;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 768px){
  .infra-cards{
    grid-template-columns: 1fr;
  }
}
.infra-note{
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}
/* ==============================================================
Notes au survol
============================================================== */

.note-ref{
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #6f888e;
  font-weight: 500;
}

.note-tooltip{
  visibility: hidden;
  opacity: 0;

  position: absolute;
  bottom: 130%;
  left: 0;

  width: 320px;
  padding: 10px;

  background: #1f1f1f;
  color: #eee;

  font-size: 0.85rem;
  line-height: 1.45;
  font-weight: 400;   /* empêche le gras */

  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);

  transition: opacity 0.2s ease;
  z-index: 999;
}

/* évite héritage gras */
.note-tooltip *{
  font-weight: 400;
}

/* style ISO 690 */
.note-tooltip em{
  font-style: italic;
}

/* apparition au survol */
.note-ref:hover .note-tooltip{
  visibility: visible;
  opacity: 1;
}
/* ==============================================================
Numérotation automatique des notes
============================================================== */

body{
  counter-reset: note;
}

.note-ref{
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #6f888e;

  counter-increment: note;
}

/* numéro dans le texte */

.note-ref::after{
  content: counter(note);
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 2px;
  color: #6f888e;
}

/* ==============================================================
Tooltip
============================================================== */

.note-tooltip{
  visibility: hidden;
  opacity: 0;

  position: absolute;
  bottom: 130%;
  left: 0;

  width: 320px;
  padding: 10px 12px;

  background: #1f1f1f;
  color: #eee;

  font-size: 0.85rem;
  line-height: 1.45;
  font-weight: 400;

  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);

  transition: opacity 0.2s ease;
  z-index: 999;
}

/* même numéro dans la bulle */

.note-tooltip::before{
  content: counter(note) ". ";
  font-weight: 600;
  color: #9bb6bd;
}

/* empêche héritage gras */

.note-tooltip *{
  font-weight: 400;
}

.note-tooltip em{
  font-style: italic;
}

/* apparition */

.note-ref:hover .note-tooltip{
  visibility: visible;
  opacity: 1;
}
/* ==============================================================
Questions au lecteur
============================================================== */

.reader-section{
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.reader-title{
  margin-bottom: 12px;
  color: #2c3e50;
}

.question-carousel{
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 10px;
}

.question-slide{
  background: rgba(0,0,0,0.03);
  border-left: 4px solid #6f888e;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.question-label{
  font-size: 0.85rem;
  font-weight: 700;
  color: #6f888e;
  margin-bottom: 6px;
}

.question-text{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #2c3e50;
}

.carousel-btn{
  border: none;
  border-radius: 14px;
  background: rgba(0,0,0,0.05);
  color: #2c3e50;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.carousel-btn:hover{
  background: rgba(111,136,142,0.18);
  transform: translateY(-1px);
}

.reader-note{
  font-size: 0.92rem;
  color: #666;
  margin-top: 8px;
}

@media (max-width: 768px){
  .question-carousel{
    grid-template-columns: 1fr;
  }

  .carousel-btn{
    min-height: 44px;
  }
}
/* ==============================================================
Température du modèle
============================================================== */

.temperature-title{
  margin-top: 25px;
  margin-bottom: 8px;
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.1rem;
}

.temperature-note{
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 12px;
  line-height: 1.6;
  font-weight: 400;
}

.temperature-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.temperature-card{
  border-radius: 14px;
  padding: 14px;
  background: rgba(0,0,0,0.03);
  border-left: 4px solid #a08565;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.temperature-card-title{
  font-weight: 800;
  margin-bottom: 6px;
  color: #2c3e50;
}

.temperature-card-text{
  font-size: 0.95rem;
  color: #444;
  line-height: 1.45;
  font-weight: 400;
}

@media (max-width: 768px){
  .temperature-cards{
    grid-template-columns: 1fr;
  }
}

.temperature-card{
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.temperature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}

/* ==============================================================
Commentaires
============================================================== */

.comment-area {
  max-width: 700px;
  margin: 18px auto 0 auto;
}

.comment-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.comment-form textarea {
  flex: 1;
  height: 46px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: none;
}

.comment-form button {
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: rgba(111,136,142,0.16);
  color: #102a43;
  cursor: pointer;
  font-weight: 800;
}

.comments-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.comments-list div {
  padding: 5px 9px;
  border-radius: 999px;

  background: rgba(111,136,142,0.08);

  font-size: .9rem;
  line-height: 1.35;

  font-weight: 400;   /* ← plus léger */

  color: #444;
}

#char-count{
    text-align:right;
    margin-top:6px;
    font-size:.8rem;
    color:#666;
}
/* ==============================================================
Levain / levure
============================================================== */

.ferments-title{
  margin-top: 25px;
  margin-bottom: 8px;
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.1rem;
}

.ferments-compare{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.ferment-card{
  border-radius: 14px;
  padding: 16px;
  background: rgba(0,0,0,0.03);
  border-left: 4px solid #6f888e;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ferment-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}

.ferment-card-title{
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 3px;
}

.ferment-card-subtitle{
  font-size: .86rem;
  color: #6f888e;
  font-weight: 700;
  margin-bottom: 8px;
}

.ferment-card-text{
  color: #444;
  font-size: .95rem;
  line-height: 1.45;
  font-weight: 400;
}

.ferment-levain{
  border-left-color:#a08565;
  background:rgba(160,133,101,0.10);
}

.ferment-levure{
  border-left-color:#7aa6a8;
  background:rgba(122,166,168,0.10);
}

.ferments-note{
  margin-top: 10px;
  font-size: .92rem;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 768px){
  .ferments-compare{
    grid-template-columns: 1fr;
  }
}
.fermentation-manifest{

  margin: 28px 0 35px 0;
  padding: 18px 22px;

  border-left: 5px solid #a08565;

  background:
    linear-gradient(
      90deg,
      rgba(160,133,101,.10),
      rgba(111,136,142,.05)
    );

  border-radius: 10px;
}

.manifest-title{

  font-size: 1.15rem;
  font-weight: 800;

  color:#2c3e50;

  margin-bottom:8px;

  text-transform:none;
}

.manifest-text{

  font-size:1rem;
  line-height:1.75;

  color:#444;

  font-style:italic;
  font-weight:400;
}
/* ==============================================================
Qui parle ici ?
============================================================== */
.voices-section{
  margin-top: 14px;
  padding-top: 12px;
}
.comments-list:empty{
  display:none;
}

.voices-title{

font-size:1rem;

font-weight:500;

letter-spacing:.03em;

margin-bottom:8px;

color:#2c3e50;
}

.voices-note{

font-size:.9rem;

color:#666;

margin-bottom:18px;
}
.voices-conclusion-title{
  margin-top: 28px;
  margin-bottom: 6px;
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.1rem;
}

.voices-conclusion-note{
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 12px;
}


.voices-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;
}


.voice-card{

padding:0;

background:none;

border:none;

box-shadow:none;
}


.voice-name{

font-size:.95rem;

font-weight:500;

margin-bottom:4px;

color:#2c3e50;
}


.voice-role{

font-size:.8rem;

font-weight:400;

color:#8a8a8a;

margin-bottom:10px;

text-transform:uppercase;

letter-spacing:.04em;
}


.voice-text{

font-size:.92rem;

font-weight:300;

line-height:1.65;

color:#444;
}


.voices-conclusion{

margin-top:20px;

padding-top:12px;

border-top:
1px solid rgba(0,0,0,.05);

font-size:.9rem;

font-style:italic;

color:#666;
}


@media(max-width:768px){

.voices-grid{
grid-template-columns:1fr;
}

}
.token-details{
  margin-top: 8px;
  font-size: .85rem;
  color: #666;
  line-height: 1.4;
}
/* ==============================================================
Bloc final : instances d'énonciation
============================================================== */

.voices-title{
  margin-top: 25px;
  margin-bottom: 6px;
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.1rem;
}

.voices-note{
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 12px;
}

.voices-grid,
.voices-conclusion-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.voice-card,
.voices-conclusion-card{
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(0,0,0,0.03);
  border-left: 4px solid #6f888e;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.voice-card:hover,
.voices-conclusion-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.voice-name{
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 6px;
}

.voice-text{
  font-size: 0.95rem;
  line-height: 1.55;
  color: #444;
  font-weight: 400;
}

.voices-final-card{
  grid-column: 1 / -1;

  border-left: 5px solid #6f888e;

  background: linear-gradient(
    135deg,
    rgba(155,182,189,0.18),
    rgba(155,182,189,0.05)
  );
}

.final-thesis{
  margin: 40px auto 10px auto;

  max-width: 900px;

  text-align: center;

  font-size: 1.45rem;
  line-height: 1.8;

  font-weight: 300;

  color: #49636a;

  padding: 28px 24px;

  border-top: 2px solid rgba(111,136,142,0.25);

  font-style: italic;
}

@media (max-width: 768px){
  .voices-grid,
  .voices-conclusion-grid{
    grid-template-columns: 1fr;
  }

  .voices-final-card{
    grid-column: auto;
  }
}