.andre-response-box{background:#fff;border-radius:12px;padding:20px;margin-top:25px;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.andre-response-content{font-size:1rem;line-height:1.55;color:#333;}
.andre-paratexte-box{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
#andre-app h2,#andre-app h3{font-size:1.3rem;font-weight:600;}
.andre-history-box h3{font-size:1.2rem;margin-bottom:14px;}


/* Texte à étudier – header droit (badge + André qui lit) */
.texte-etudier .andre-section-header {
    position: relative;
}

.texte-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.andre-level-pill {
    background: #9b27ff;
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.andre-level-label {
    opacity: 0.9;
    margin-right: 4px;
}

.andre-reading-illu img {
    width: 72px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}

/* Paratexte encadré blanc + italique */
.andre-paratexte-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.andre-paratexte-text {
    margin: 0;
    font-style: italic;
    font-size: 0.95rem;
    color: #374151;
}

/* Poème + définitions */
.andre-vers {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.5;
}

.andre-definition-line {
    margin: 2px 0 0 0;
    font-size: 0.85rem;
    color: #4b5563;
}

/* Audio – bouton neutre (plus de vert flashy) */
.andre-audio-wrapper .andre-audio-toggle {
    background: #e5e7eb;
    color: #111827;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.9rem;
    border: none;
    margin-bottom: 8px;
}

.andre-audio-wrapper .andre-audio-toggle:hover {
    background: #d1d5db;
}


/* HEADER TEXTE – badge horizontal + André */
.texte-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.texte-header-left {
    flex: 1;
}

.texte-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.badge-horizontal {
    background: #9b27ff;
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.andre-reading-small {
    width: 70px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
    margin-top: 4px;
}

/* Notes de bas de page */
.andre-notes-section { margin-top:20px; padding-top:10px; border-top:1px solid #e5e7eb; }
.andre-notes-title { font-size:1.1rem; margin-bottom:8px; }
.andre-notes-list { list-style:none; padding-left:0; font-size:0.9rem; color:#374151; }
.andre-notes-list li { margin-bottom:4px; }

/* ======================
   NOTES – STYLE C POST-IT
========================*/
.andre-notes-section {
    background: #fff7cc;
    border-left: 6px solid #f3cc00;
    padding: 14px 18px;
    border-radius: 8px;
    margin-top: 25px;
    margin-bottom: 10px;
}

.andre-notes-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
}

.andre-notes-list {
    font-size: 0.9rem;
    color: #444;
    list-style: none;
    padding-left: 0;
}

.andre-notes-list li {
    margin-bottom: 2px;
    line-height: 1.25;
}


/* --- Paratexte style final --- */
.andre-paratexte-box {
    background: #f7f5ef !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    font-style: italic;
    box-shadow: none !important;
}
.andre-paratexte-text {
    line-height: 1 !important;
}

/* --- Notes style refined (discreet) --- */
.andre-notes-section {
    background: #fffbe8 !important;
    border-left: 4px solid #f8d74a !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin-top: 22px !important;
    margin-bottom: 8px !important;
    opacity: 0.92 !important;
}
.andre-notes-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
}
.andre-notes-list {
    font-size: 0.9rem;
    color: #444;
    list-style: none;
    padding-left: 0;
}
.andre-notes-list li {
    margin-bottom: 2px;
    line-height: 1.25;
}

/* --- Source style --- */
.andre-source {
    font-size: 0.85rem !important;
    color: #555 !important;
    margin-top: 16px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    font-style: italic !important;
}

/* Option C: unified text card */
.andre-text-card {
    background:#ffffff;
    padding:20px 24px;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
    margin-bottom:30px;
}

/* paratexte smaller */
.andre-paratexte-text {
    font-size:0.85rem !important;
    line-height:1.2 !important;
}

/* remove extra card styles if any */
.andre-paratexte-box {
    background:none !important;
    border:none !important;
    padding:0 !important;
    margin-bottom:16px !important;
    box-shadow:none !important;
}

/* Audio Option C */
.andre-audio-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.andre-audio-wrapper audio {
    width: 100%;
    border-radius: 12px;
    background: #f4f6f9;
    padding: 6px;
}


/* Badge horizontal vert (couleur André) */
.badge-horizontal {
    background: #32D74B !important;
}

/* NOTES – Option A édition critique */
.andre-notes-section {
    background: transparent !important;
    border-left: 3px solid #d1d5db !important;
    padding-left: 12px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-radius: 0 !important;
    margin-top: 22px !important;
    margin-bottom: 4px !important;
}

.andre-notes-title {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}

.andre-notes-list {
    list-style: none !important;
    padding-left: 0 !important;
    font-size: 0.9rem !important;
    color: #374151 !important;
}

.andre-notes-list li {
    margin-bottom: 2px !important;
    line-height: 1.25 !important;
}

/* Notes inside card white */
.andre-notes-section {
    background:#ffffff !important;
    border-left:3px solid #d1d5db !important;
    padding:12px 16px !important;
    border-radius:12px !important;
    margin-top:16px !important;
    margin-bottom:0 !important;
}
/* Source align right */
.andre-source { text-align:right !important; }

/* Audio spacing */
.andre-audio-wrapper { margin-top:24px; }

/* Animation B: highlight bar on hover of superscript */
sup:hover ~ .andre-notes-section {
    border-left-color:#f8d74a !important;
}


@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Open+Sans:wght@300;400;600&display=swap');

/* Title font */
.texte-header-left h2 {
    font-family: 'Merriweather', serif !important;
}

/* Subtitle */
.texte-header-left p.andre-section-subtitle {
    font-family: 'Merriweather', serif !important;
}

/* Paratexte, poème, notes, source */
.andre-paratexte-text,
.andre-vers,
.andre-definition-line,
.andre-notes-section,
.andre-notes-section li,
.andre-source {
    font-family: 'Open Sans', sans-serif !important;
}

/* Paratexte smaller + justify */
.andre-paratexte-text {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    text-align: justify !important;
}

/* Notes inside card: white background, left bar */
.andre-notes-section {
    background:#ffffff !important;
    border-left:3px solid #d1d5db !important;
    padding:12px 16px !important;
    border-radius:12px !important;
    margin-top:16px !important;
    margin-bottom:0 !important;
}

/* Source aligned right */
.andre-source {
    text-align:right !important;
}

/* Audio spacing */
.andre-audio-wrapper {
    margin-top:24px;
}

/* Animation B: highlight left bar when hovering superscripts (simple version) */
sup:hover {
    cursor: pointer;
}


/* ============================
   NOTES – highlight & scroll sync
============================ */
.andre-note-word--active {
    background: #fffbd1;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(248, 215, 74, 0.35);
}

.andre-note-ref--active {
    color: #f59e0b;
}

.andre-note-item--active {
    background: #fffbd1;
    border-left-color: #f8d74a !important;
}

/* Bulle de message d'André dans l'en-tête du texte */
.andre-bubble-message {
    background: #c6ffbd;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.andre-bubble-text {
    display: block;
}


/* Effet machine à écrire pour le message au-dessus d'André */
#andre-app .andre-typing-text {
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: 500;
    color: #2563eb; /* bleu type Apple */
    white-space: nowrap;
    border-right: 2px solid currentColor;
    padding-right: 4px;
    animation: andre-caret 0.8s steps(1) infinite;
}

@keyframes andre-caret {
    50% { border-color: transparent; }
}

.andre-hint {
    font-size: 0.85rem;
    color: #1d4ed8;
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .35s ease, transform .35s ease;
}
.andre-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes andre-bounce {
   0%,100% { transform: translateY(0); }
   50% { transform: translateY(-4px); }
}
.andre-bounce {
   animation: andre-bounce 1.1s ease-in-out infinite;
}

/* Audio icon pulse */
.andre-audio-icon {
    display: inline-block;
    transition: transform .3s ease;
}
.andre-audio-icon.pulse {
    animation: andre-audio-pulse 1s infinite ease-in-out;
}
@keyframes andre-audio-pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Progressive underline for dynamic hint */
#andre-dynamic-hint { display:block; text-align:center; margin:4px auto 8px auto; position:relative; }

#andre-dynamic-hint::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0%;
    background: #1d4ed8;
    transition: width 0.6s ease;
}

#andre-dynamic-hint.visible::after {
    width: 100%;
}

#andre-dynamic-hint .andre-dynamic-icon {
    margin-right:6px;
    font-size:0.9rem;
}

/* Stop underline animation after first play */
#andre-dynamic-hint.played::after {
    width:100%;
    transition:none;
}

/* Stop bounce after played */
.andre-bounce.played {
    animation: none !important;
    transform: translateY(0) !important;
}