/* =========================================================
   Conseils – styles complets
   ========================================================= */
:root{
    --brand:#193A63;
    --brand-50:#E9F0FA;
    --brand-100:#D6E3F5;
    --ring:rgba(25,58,99,.18);
    --ink:#0c1522;
    --ink-2:#27364a;
    --muted:#607089;
    --overlay-dim: rgba(12,21,34,.45);

    /* Rubans / titres */
    /*--titlebar:#C28722;          !* jaune demandé *!*/
    --titlebar:#C18623;          /* jaune demandé */
    --titlebar-dk:#A86F1C;       /* nuance sombre */
}

/* ======================== Filtres + recherche ======================== */
.filter-btn{
    border-radius:9999px;
    padding:.35rem .8rem;
    transition:all .15s ease;
}
.filter-btn i{ width:1.1em; text-align:center; }
.filter-btn.active{
    background:var(--brand);
    color:#fff;
    border-color:var(--brand);
    box-shadow:0 0 0 .15rem rgba(25,58,99,.12);
}
.input-group .form-control{ border-left:0; }
.input-group-text{ border-right:0; }
.input-group .form-control,
.input-group .input-group-text{ border-radius:9999px !important; }

/* ======================== Cartes (grille) ======================== */
.advice-card{
    border-radius:12px;
    border:1px solid #e4eaf3;
    background:#fff;
    box-shadow:0 10px 22px rgba(12,21,34,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.advice-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 38px rgba(12,21,34,.12);
    border-color:#dae3f1;
}
/* --- Modale --- */
.advice-overlay .overlay-hero {   /* image dans la modale */
    height: 220px;                  /* hauteur souhaitée en modal */

}

/* Image de couverture sur la carte */
.card-cover{
    height:160px;
    background:top /cover no-repeat #e9eef6;
    position:relative;
    /*border-top-left-radius:12px;*/
    /*border-top-right-radius:12px;*/
    overflow:hidden;
}
.card-cover::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(12,21,34,.10) 0%, rgba(12,21,34,.35) 100%);
}

/* Badge LU posé sur l'image */
.badge-read.on-cover{
    position:absolute; top:10px; right:10px;
    /*border:1px solid #152e53;*/
    border:1px solid rgba(255,255,255,.6);
    /*background:rgba(255,255,255,.18);*/
    background: #fff;
    /*color: black;*/
    /*color:#fff;*/
    backdrop-filter: blur(2px);
    font-weight:700;
}

/* Corps de carte : on colle la barre de titre au bord de la carte */
.advice-item .card-body{
    padding:0 1.1rem 1.25rem 1.1rem; /* pas de padding-top */
    min-height: 170px;
}

/* ---------- Barre de titre jaune (full-bleed) sur la carte ---------- */
.advice-titlebar{
    display:flex; align-items:center; gap:.65rem;
    background:var(--titlebar);
    color:#fff;
    /*border:none; border-radius:0; box-shadow:none;*/

    /* plein bord : colle aux bords de la carte */
    /*margin:0 -1.1rem 0 -1.1rem;*/
    /*padding:.45rem 1.1rem;*/
    min-height: 40px;
    /*border-top-left-radius:12px;*/
    /*border-top-right-radius:12px;*/
    /*border-bottom-left-radius:0;*/
    /*border-bottom-right-radius:0;*/
    /*border-top-left-radius:12px;*/
    /*border-top-right-radius:12px;*/
    margin-bottom:-1px;
}

.card-cover{
    border-top-left-radius:0;
    border-top-right-radius:0;
}

/* Sécurité : masque tout micro-décalage sous l’arrondi */
.advice-card{ overflow:hidden; }

.advice-titlebar-icon{
    width:20px;
    height: 22px;
    flex:0 0 30px;
    display:grid; place-items:center;
    border-radius:4px;
    background:rgba(255,255,255,.16);
    color:#fff;
    margin-left: 10px;
}
.advice-title-full{
    margin:0; color:#fff;
    font-size:0.8rem; line-height:1.28; font-weight:800;
}

/* Badges de thème */
.badge{
    font-weight:600;
    border:1px solid var(--brand-100);
    color:#1f3555;
}

/* Badge LU (état générique) */
.badge-read{
    border:1px solid #ecd6b2;
    color:#C28722;
    /*color:#152e53;*/
    font-size:14px;
}

/* Extrait centré + clamp 2 lignes */
.content-of-advice{
    margin-top: 20px;
    align-self:center;
    text-align:center;
    max-width:90%;
    color:#5f6b7c;
    line-height:1.55;
}
.content-of-advice.clamp-2{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:calc(1.55em * 2);
}

/* Bouton "Lire le conseil" — petit, centré, couleur brand */
.btn-advice, .btn-advice-right, .btn-auth {
    background:#193A63;
    border-color:#193A63;
    color:#fff;
    transition:transform .08s ease, background-color .12s ease, border-color .12s ease;
}

.btn-auth {
    padding: 0.6rem .7rem;
}

.btn-advice, .btn-advice-right {
    border-radius:10px;
    padding:.38rem .7rem;
    font-weight:600;

}

.btn-advice {
    margin:0 auto;
}

.btn-advice:hover, .btn-advice-right:hover, .btn-auth:hover {
    background:#152e53;
    border-color:#152e53;
    color:#fff;
}
.btn-advice:active{ transform:translateY(1px); }
.btn-advice:focus{ box-shadow:0 0 0 .2rem rgba(25,58,99,.25); outline:0; }
/* sécurité : reste en bas même si on enlève le flex column */
.advice-card .advice-open{ margin-top:auto; display:block; }

/* ======================== OVERLAY (box centrée) ======================== */
.advice-overlay{ position:fixed; inset:0; z-index:1050; display:none; }
.advice-overlay.open{ display:block; }

/* fond assombri + blur */
.advice-overlay .overlay-backdrop{
    position:absolute; inset:0;
    background:var(--overlay-dim);
    backdrop-filter: blur(2px);
    opacity:0; transition:opacity .18s ease;
}
.advice-overlay.ready .overlay-backdrop{ opacity:1; }

/* Panel centré */
.overlay-card{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%) scale(.96);
    width:min(780px, 92vw);
    max-height:82vh;
    background:#fff;
    border:1px solid #d9e2ef;
    border-radius:12px;
    box-shadow:0 12px 28px rgba(12,21,34,.14);
    opacity:0; transition:opacity .18s ease, transform .18s ease;
    padding:16px 18px 18px; overflow:auto;
}
.overlay-card::before{
    content:""; position:absolute; inset:0; border-radius:12px;
    box-shadow:0 0 0 1px rgba(13,27,42,.06) inset; pointer-events:none;
}
.advice-overlay.ready .overlay-card{
    opacity:1; transform:translate(-50%,-50%) scale(1);
}

/* Image dans la modale : collée au ruban */
.overlay-hero{
    height:160px;
    /*border-radius:10px;*/
    /*border-radius: 10px 10px 0 0;*/
    /*margin:0;*/
    margin-top: 10px;/* collé au ruban */
    background:#e9eef6 center/cover no-repeat;
    position:relative; overflow:hidden;
    /*border:1px solid #d9e2ef;*/
    /*border:1px solid #fff;*/
    /*border: 5px solid #1C6EA4;*/
    /*border-radius: 0px 40px 0px 0px;*/
    border-radius: 0 40px 0 0;
}
.overlay-hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(12,21,34,.12) 0%, rgba(12,21,34,.38) 100%);
}

/* Ruban jaune du titre dans la modale */
.overlay-titlebar{
    /*background:var(--titlebar);*/
    background:var(--titlebar);
    color:#fff;
    /*border-radius:10px;*/
    /*padding:.75rem 1rem;*/
    /*margin-top:10px;                          !* visuellement collé à l’image *!*/
    box-shadow:0 1px 0 rgba(0,0,0,.04);
    /*border-radius: 0 0 10px 10px;*/
    /*border: 5px solid #1C6EA4;*/
    border-radius: 0 0 0 40px;


    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: nowrap;          /* ne casse pas la ligne entre l'icône et le titre */
}

.advice-card .advice-titlebar{
    padding: .75rem 1rem;           /* ajuste comme tu veux */
    height: 50px;
}

.advice-overlay .overlay-titlebar{
    display:grid;                      /* au lieu du flex */
    grid-template-columns: 1fr auto 1fr; /* 3 colonnes : gauche / centre / droite */
    align-items:center;
    justify-items:center;              /* centre par défaut les items */
}


/*.overlay-titlebar .advice-titlebar-icon {*/
    /*margin: 10px;*/
/*}*/

.overlay-title{
    /*margin:0;*/

    color:#fff;
    font-weight:800;
    /*letter-spacing:2px;*/
    /*font-size:clamp(1.1rem, 1.4vw + .7rem, 1.65rem);*/
    font-size:clamp(1.1rem, 0.6vw + .6rem, 1.65rem);
    line-height:2;
}

/* Badges sous le titre (modale) */
.overlay-badges .badge{
    border-radius:999px;
    background:#f4f8ff;
    border-color:#d9e3f4;
    color:#233b5a;
    padding:.35rem .6rem;
    font-weight:600;
    margin-bottom: 10px;
    margin-top: 15px;
}

/* Corps du texte dans la modale */
.overlay-body{
    padding:14px 0 0 0;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--ink-2);
    word-break:break-word; hyphens:auto;
}
.overlay-body p + p{ margin-top:.6rem; }
.overlay-body ul, .overlay-body ol{ margin:.5rem 0 0 1.2rem; }
.overlay-body li{ margin-bottom:.25rem; }

/* Footer : bouton bleu "Fermer" */
.overlay-footer{
    border-top:1px solid #e8eef7;
    margin-top:16px;
}

/* responsive */
@media (max-width:576px){
    .overlay-card{ width:96vw; max-height:86vh; border-radius:10px; }
    .overlay-hero{ height:130px; }
}


/* Paragraphes élégants dans la modale (sans puces) */
.adv-paras{
    display: grid;
    gap: .6rem;
}

.adv-paras p{
    margin: 0;
    padding: .7rem 0.2rem .2rem 1.1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #edf1f7;
    box-shadow: 0 2px 8px rgba(12,21,34,.05);
    color: var(--ink-2);
    line-height: 1.6;
    position: relative;
    font-size: 15px;
}

/* Liseré gauche très discret (signature) */
.adv-paras p::before{
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 3px;
    border-radius: 12px 0 0 12px;
    background: var(--titlebar);
    opacity: .9;
}

/* Optionnel : le 1er paragraphe un soupçon mis en avant */
.adv-paras p:first-child{
    border-color: #e2e9f5;
}

/* < 768px : cover plus haute */
@media (max-width: 767.98px){
    .advice-card .card-cover{
        height:250px;
        background-position:center;
    }

    /* --- Modale --- */
    .advice-overlay .overlay-hero {
        height:200px;
        background-position:center;

    }
}

.my-btn {
    background: #0d2f57;
    color: #fff;
    border-color: #0d2f57;
}