/*
 * Boutons de choix « icône + libellé » (.wrap > .ico-wrap + .text-wrap) :
 * modale « Comment voulez-vous obtenir vos documents ? », exports, Outlook...
 *
 * Les vues gardent leurs anciens <style> inline (.wrap, .mbr-iconfont...) :
 * ces règles les surclassent par spécificité (.wrap:has(> .ico-wrap)), sans
 * toucher aux classes utilisées par le JS (Recup_PDF_Merge, send_all, send_doc...).
 */

.wrap:has(> .ico-wrap) {
    --choix-accent: #1a8fd8;
    --choix-teinte: #e8f3fc;

    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    max-height: none;
    margin-bottom: 14px;
    padding: 12px 18px 12px 14px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wrap:has(> .ico-wrap):hover {
    background: #fff;
    color: #111827;
    border-color: var(--choix-accent);
    box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .18);
    transform: translateY(-1px);
}

.wrap:has(> .ico-wrap):active {
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* Pastille d'icône */
.wrap:has(> .ico-wrap) > .ico-wrap {
    flex: 0 0 auto;
    margin: 0;
}

.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    font-size: 21px !important;
    line-height: 1;
    color: var(--choix-accent);
    background: var(--choix-teinte);
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.wrap:has(> .ico-wrap):hover > .ico-wrap > .mbr-iconfont {
    color: #fff;
    background: var(--choix-accent);
}

/* Libellé */
.wrap:has(> .ico-wrap) > .text-wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.wrap:has(> .ico-wrap) > .text-wrap.text-center {
    text-align: center;
}

.wrap:has(> .ico-wrap) .mbr-section-title3 {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    text-align: inherit;
}

.wrap:has(> .ico-wrap) .mbr-section-title3 > span {
    font-weight: 600;
}

/* Lien Outlook : l'ancien style le passait en blanc au survol */
#send_outlook .wrap:has(> .ico-wrap) a,
#send_outlook .wrap:has(> .ico-wrap):hover a {
    color: inherit;
    text-decoration: none;
}

/* Couleur par type d'action, déduite de l'icône */
.wrap:has(> .ico-wrap .fa-file-pdf-o) {
    --choix-accent: #d0383c;
    --choix-teinte: #fdecec;
}

.wrap:has(> .ico-wrap .fa-file-word-o) {
    --choix-accent: #2b5fb4;
    --choix-teinte: #e9f0fb;
}

.wrap:has(> .ico-wrap .fa-file-excel-o) {
    --choix-accent: #1f8a4c;
    --choix-teinte: #e7f5ec;
}

.wrap:has(> .ico-wrap .fa-envelope) {
    --choix-accent: #0f8fd6;
    --choix-teinte: #e6f4fc;
}

.wrap:has(> .ico-wrap .fa-send),
.wrap:has(> .ico-wrap .fa-send-o) {
    --choix-accent: #6d4fc9;
    --choix-teinte: #f0ecfb;
}

.wrap:has(> .ico-wrap .fa-windows) {
    --choix-accent: #0a6cbd;
    --choix-teinte: #e5f0fa;
}

.wrap:has(> .ico-wrap .fa-file-text-o) {
    --choix-accent: #4b5868;
    --choix-teinte: #eef1f4;
}

/* L'ancien style décalait la section de -3 % pour rattraper l'ombre :
   avec une bordure, le bord gauche des boutons était rogné */
section:has(.wrap > .ico-wrap) {
    margin-left: 0;
}

/* Logos de format (PDF, Word, Excel, Outlook) à la place du glyphe Font Awesome.
   SVG inline (sources dans public/image/logos/) : pas de fichier à servir, donc
   pas de dépendance au type MIME ni au chemin public du serveur.
   Le survol garde la pastille claire : un logo coloré sur fond plein serait illisible. */
.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont:is(.fa-file-pdf-o, .fa-file-word-o, .fa-file-excel-o, .fa-windows) {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
}

.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont:is(.fa-file-pdf-o, .fa-file-word-o, .fa-file-excel-o, .fa-windows)::before {
    content: none;
}

.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont.fa-file-pdf-o {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 5h16l10 10v26a3 3 0 0 1-3 3H14a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3z' fill='%23fff' stroke='%23D93025' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M30 5v7a3 3 0 0 0 3 3h7' fill='none' stroke='%23D93025' stroke-width='1.6' stroke-linejoin='round'/%3E%3Crect x='5' y='24' width='28' height='13' rx='2.5' fill='%23D93025'/%3E%3Ctext x='19' y='33.6' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-size='9' font-weight='700' fill='%23fff'%3EPDF%3C/text%3E%3C/svg%3E");
}

.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont.fa-file-word-o {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='15' y='6' width='27' height='36' rx='3' fill='%23fff' stroke='%232B579A' stroke-width='1.6'/%3E%3Cpath d='M28 14h10M28 20h10M28 26h10M28 32h10' stroke='%232B579A' stroke-width='2' stroke-linecap='round' opacity='.45'/%3E%3Crect x='5' y='13' width='22' height='22' rx='3.5' fill='%232B579A'/%3E%3Cpath d='M9.5 18.5l2.9 11 3.6-8 3.6 8 2.9-11' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont.fa-file-excel-o {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='15' y='6' width='27' height='36' rx='3' fill='%23fff' stroke='%231D6F42' stroke-width='1.6'/%3E%3Cpath d='M27 15h11M27 24h11M27 33h11M32.5 10v28' stroke='%231D6F42' stroke-width='1.8' stroke-linecap='round' opacity='.45'/%3E%3Crect x='5' y='13' width='22' height='22' rx='3.5' fill='%231D6F42'/%3E%3Cpath d='M11 19l10 10M21 19L11 29' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wrap:has(> .ico-wrap) > .ico-wrap > .mbr-iconfont.fa-windows {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='17' y='13' width='26' height='22' rx='2.5' fill='%23fff' stroke='%230F6CBD' stroke-width='1.6'/%3E%3Cpath d='M18 15l12 9.5L42 15' fill='none' stroke='%230F6CBD' stroke-width='1.6' stroke-linejoin='round' opacity='.6'/%3E%3Crect x='5' y='11' width='22' height='26' rx='3.5' fill='%230F6CBD'/%3E%3Ccircle cx='16' cy='24' r='5.4' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E");
}

.wrap:has(> .ico-wrap):hover > .ico-wrap > .mbr-iconfont:is(.fa-file-pdf-o, .fa-file-word-o, .fa-file-excel-o, .fa-windows) {
    background-color: var(--choix-teinte);
    transform: scale(1.06);
}

/* Grille de la modale (message, message_Web) : les .col-lg-6 n'ont pas de .row,
   donc pas de colonnes sous Bootstrap 4 (Module web) et des flottants inégaux
   sous Bootstrap 3. Deux colonnes égales, une seule en dessous de 768px. */
section:has(.wrap > .ico-wrap) > .container {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    margin: 0;
    padding: 0;
}

section:has(.wrap > .ico-wrap) > .container::before,
section:has(.wrap > .ico-wrap) > .container::after {
    content: none;
}

section:has(.wrap > .ico-wrap) > .container > [class*="col-"] {
    float: none;
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
    min-height: 0;
    padding: 0;
}

section:has(.wrap > .ico-wrap) > .container > [class*="col-"].hide {
    display: none !important;
}

@media (max-width: 767px) {
    section:has(.wrap > .ico-wrap) > .container > [class*="col-"] {
        flex-basis: 100%;
        max-width: 100%;
    }
}