.preview-area {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 40px;
    overflow-y: auto;
    background-color: #0f172a;
}

#document {
    width: 800px !important;
    min-width: 800px !important;
    
    height: auto !important;
    min-height: auto !important;
    
    background: white !important;
    color: #111 !important;
    
    /* Padding : Haut Droite Bas Gauche */
    /* On passe de 50px à 40px en haut */
    padding: 40px 50px 80px 50px !important; 
    
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    position: relative;
    box-sizing: border-box;
    overflow: visible !important;
    
    /* Marge extérieure pour décoller du bord de l'écran */
    margin-top: 40px;
    margin-bottom: 50px;
}


/* En-tête */
.header-cert { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #0f172a; padding-bottom: 20px; margin-bottom: 30px; }
.cert-tag { background: #0f172a; color: white; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: bold; letter-spacing: 1px; }
.cert-main-title { font-size: 36px; margin: 5px 0; color: #0f172a; text-transform: uppercase; font-weight: 900; letter-spacing: -1px; }
.cert-subtitle { font-size: 14px; color: #64748b; letter-spacing: 1px; text-transform: uppercase; }



/* Infos Patient */
.patient-header-grid { display: flex; justify-content: space-between; margin-bottom: 30px; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
.ph-box label { display: block; font-size: 10px; text-transform: uppercase; color: #94a3b8; font-weight: bold; margin-bottom: 2px; }
.ph-val { font-size: 18px; font-weight: bold; color: #0f172a; }
#d-ref.ph-val { font-size: 14px !important; color: #64748b; font-family: monospace; } /* REF PETITE */
.ph-sub { font-size: 13px; color: #64748b; }
.text-right { text-align: right; }



/* Liste Médicaments */
.ordo-body { min-height: 250px; margin-bottom: 30px; }
#ordo-list { list-style: none; padding: 0; margin: 0; }
#ordo-list li { padding: 12px 0; border-bottom: 1px dashed #cbd5e1; position: relative; padding-right: 30px; }
#ordo-list li.empty-msg { text-align: center; color: #cbd5e1; font-style: italic; border: none; margin-top: 50px; }

.med-name { font-size: 16px; font-weight: bold; color: #0f172a; }
.med-details { font-size: 13px; color: #475569; margin-top: 2px; }
.med-poso { font-weight: 600; color: var(--omc-dark); }

/* Instructions */
#inst-container { margin-top: 20px; padding-top: 15px; border-top: 1px dotted #94a3b8; }
.inst-label { font-size: 10px; text-transform: uppercase; color: #64748b; font-weight: bold; }
.inst-text { font-style: italic; color: #334155; margin-top: 5px; font-size: 14px; }

/* Footer & Legal */
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; border-top: 2px solid #0f172a; padding-top: 20px; }
.round-stamp { border: 2px solid #0a192f; border-radius: 12px; padding: 10px; text-align: center; width: 120px; display: flex; flex-direction: column; align-items: center; }
.qr-code { width: 85px; height: 85px; margin-bottom: 5px; background: #f1f5f9; }
.legal-text { font-size: 9px; color: #94a3b8; text-align: center; margin-top: 30px; font-style: italic; }

/* Sidebar spécifique */
.row-group { display: flex; gap: 10px; }
.btn-add { background: var(--omc-cyan); color: var(--omc-dark); border: none; padding: 8px; width: 100%; font-weight: bold; cursor: pointer; margin-top: 10px; border-radius: 4px; }
.btn-clear { background: #ef4444; color: white; border: none; padding: 8px; width: 30%; font-weight: bold; cursor: pointer; margin-top: 10px; border-radius: 4px; }

/* Popup */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.popup-content { background: #112240; padding: 25px; border-radius: 10px; width: 500px; text-align: center; border: 1px solid var(--omc-cyan); }
#direct-link { margin: 15px 0; background: #0a192f; border: 1px solid #233554; color: var(--omc-cyan); text-align: center; width: 90%; padding: 5px; }

/* Style du bouton de suppression */
.del-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ef4444; /* Rouge */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 5px;
    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.2s;
}

/* La croix apparaît quand on passe la souris sur la ligne */
#ordo-list li:hover .del-btn {
    opacity: 1;
}

/* Ajustement de la ligne pour laisser la place à la croix */
#ordo-list li {
    position: relative; /* Important pour le positionnement */
    padding-right: 30px; /* Espace pour ne pas chevaucher le texte */
}

/* CLASSE SPÉCIALE : Cache les croix pendant la photo */
.mode-capture .del-btn {
    display: none !important;
}

/* --- BOUTONS D'ACTION (Style "Constat") --- */

/* Conteneur pour l'espacement entre les boutons */
.actions-group {
    margin-top: 20px; /* Un peu d'espace au-dessus */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre les deux boutons */
}

/* Style commun aux deux boutons */
.btn-image, .btn-discord {
    width: 100%;
    padding: 12px;
    border: none; /* Important : enlève le style "moche" par défaut */
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 11px;
    transition: background-color 0.2s ease; /* Petite transition fluide au survol */
}

/* Bouton Blanc (Générer l'image) */
.btn-image {
    background: #ffffff;
    color: #0a1324;
}
.btn-image:hover {
    background: #f1f5f9; /* Gris très clair au survol */
}

/* Bouton Bleu (Discord) */
.btn-discord {
    background: #5865f2; /* Bleu Discord officiel */
    color: #ffffff;
}
.btn-discord:hover {
    background: #4752c4; /* Bleu un peu plus foncé au survol */
}