/* ============================================================
   Laurette Fugain Widgets – Frontend CSS
   Couleurs de marque :
     Primaire  : #029CAC (teal)
     Secondaire: #e8183c (rouge)
     Texte     : #1a1a2e
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --lf-primary:       #029CAC;
    --lf-primary-dark:  #017a88;
    --lf-secondary:     #e8183c;
    --lf-text:          #1a1a2e;
    --lf-text-muted:    #5a5a7a;
    --lf-bg:            #ffffff;
    --lf-bg-alt:        #f5f8fa;
    --lf-border:        #d8e2ec;
    --lf-radius:        8px;
    --lf-radius-lg:     16px;
    --lf-shadow:        0 2px 16px rgba(0,0,0,.08);
    --lf-transition:    all .2s ease;
}

/* ── Reset minimal ─────────────────────────────────────────── */
.lf-widget, .lf-widget * { box-sizing: border-box; }

/* ── Bouton générique ──────────────────────────────────────── */
.lf-btn {
    display:         inline-block;
    padding:         12px 28px;
    background:      var(--lf-primary);
    color:           #fff;
    font-weight:     600;
    font-size:       1rem;
    border:          none;
    border-radius:   var(--lf-radius);
    cursor:          pointer;
    text-decoration: none;
    transition:      var(--lf-transition);
}
.lf-btn:hover { background: var(--lf-primary-dark); color: #fff; }

/* ── Hero Banner ───────────────────────────────────────────── */
.lf-hero {
    position:            relative;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    background-size:     cover;
    background-position: center;
    text-align:          center;
    min-height:          80vh;
}
.lf-hero__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.45);
}
.lf-hero__content {
    position: relative;
    z-index:  1;
    padding:  2rem;
    max-width: 720px;
}
.lf-hero__title {
    color:       #fff;
    font-size:   clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    margin:      0 0 1rem;
    line-height: 1.2;
}
.lf-hero__subtitle {
    color:     rgba(255,255,255,.9);
    font-size: 1.2rem;
    margin:    0 0 2rem;
}
.lf-hero__cta { font-size: 1.1rem; padding: 14px 36px; }

/* ── Stats Counter ─────────────────────────────────────────── */
.lf-stats { padding: 3rem 0; }
.lf-stats__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   2rem;
}
@media (max-width: 768px) { .lf-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lf-stats__grid { grid-template-columns: 1fr; } }
.lf-stats__item { text-align: center; }
.lf-stats__value {
    display:     block;
    font-size:   2.4rem;
    font-weight: 700;
    color:       var(--lf-primary);
    line-height: 1;
    margin-bottom: .25rem;
}
.lf-stats__suffix { font-size: 1.2rem; font-weight: 600; color: var(--lf-primary); margin-left: .25rem; }
.lf-stats__label  { color: var(--lf-text-muted); font-size: .9rem; margin: .5rem 0 0; }

/* ── Donation Widget ───────────────────────────────────────── */
.lf-donation {
    background:    var(--lf-bg-alt);
    border-radius: var(--lf-radius-lg);
    padding:       2rem;
    max-width:     480px;
}
.lf-donation__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.5rem; color: var(--lf-text); }
.lf-donation__amounts { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.lf-donation__amount {
    flex:          1 1 80px;
    padding:       .75rem 1rem;
    border:        2px solid var(--lf-border);
    border-radius: var(--lf-radius);
    background:    #fff;
    font-size:     1.1rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--lf-transition);
    text-align:    center;
    color:         var(--lf-text);
}
.lf-donation__amount:hover,
.lf-donation__amount.is-active {
    background:    var(--lf-primary);
    border-color:  var(--lf-primary);
    color:         #fff;
}
.lf-donation__amount-label { display: block; font-size: .7rem; font-weight: 400; opacity: .8; }
.lf-donation__custom { margin: 1rem 0; }
.lf-donation__custom label { display: block; font-size: .85rem; margin-bottom: .35rem; color: var(--lf-text-muted); }
.lf-donation__custom-input {
    width:         100%;
    padding:       .6rem .75rem;
    border:        1.5px solid var(--lf-border);
    border-radius: var(--lf-radius);
    font-size:     1rem;
}
.lf-donation__tax-note { font-size: .82rem; color: var(--lf-text-muted); margin: .75rem 0 1.25rem; }
.lf-donation__submit { width: 100%; font-size: 1rem; }

/* ── Quiz ──────────────────────────────────────────────────── */
.lf-quiz { max-width: 640px; }
.lf-quiz__progress { background: var(--lf-border); border-radius: 4px; height: 6px; margin-bottom: 2rem; overflow: hidden; }
.lf-quiz__progress-bar { height: 100%; background: var(--lf-primary); transition: width .3s ease; width: 0; }
.lf-quiz__question { font-size: 1.3rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--lf-text); }
.lf-quiz__answers { display: flex; gap: 1rem; flex-wrap: wrap; }
.lf-quiz__answer {
    flex:          1 1 120px;
    padding:       .9rem 1.5rem;
    border:        2px solid var(--lf-border);
    border-radius: var(--lf-radius);
    background:    #fff;
    cursor:        pointer;
    font-size:     1rem;
    font-weight:   600;
    transition:    var(--lf-transition);
    text-align:    center;
}
.lf-quiz__answer:hover     { border-color: var(--lf-primary); color: var(--lf-primary); }
.lf-quiz__answer.is-correct { background: var(--lf-primary); border-color: var(--lf-primary); color: #fff; }
.lf-quiz__answer.is-wrong   { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.lf-quiz__explanation { margin-top: 1rem; padding: 1rem; background: var(--lf-bg-alt); border-radius: var(--lf-radius); font-size: .95rem; line-height: 1.6; }
.lf-quiz__next { margin-top: 1.25rem; }
.lf-quiz__result { text-align: center; padding: 2rem 0; }
.lf-quiz__result-score { font-size: 3rem; font-weight: 700; color: var(--lf-primary); }

/* ── Éditeur Elementor – placeholder widget non implémenté ─── */
.lf-widget-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    padding:         2rem;
    border:          2px dashed var(--lf-border);
    border-radius:   var(--lf-radius);
    color:           var(--lf-text-muted);
    font-style:      italic;
    min-height:      120px;
}
.lf-widget-placeholder .dashicons { font-size: 2rem; width: 2rem; height: 2rem; }