/* Chambrier RDV — Frontend styles
   Hérite des variables Elementor quand disponibles */

.crdv-app {
    --crdv-primary:      var(--e-global-color-accent, #1D9E75);
    --crdv-primary-dark: #0F6E56;
    --crdv-radius:       var(--e-global-border-radius, 8px);
    --crdv-font:         var(--e-global-typography-text-font-family, inherit);
    --crdv-text:         var(--e-global-color-text, #1a1a1a);
    --crdv-text-muted:   var(--e-global-color-secondary-text, #6b7280);
    --crdv-bg:           #ffffff;
    --crdv-bg-light:     #f8f8f7;
    --crdv-border:       rgba(0,0,0,.12);
    --crdv-border-hover: rgba(0,0,0,.25);
    --crdv-green-bg:     #E1F5EE;
    --crdv-green-text:   #085041;
    --crdv-green-border: #5DCAA5;
    --crdv-orange-bg:    #FAEEDA;
    --crdv-orange-text:  #412402;
    --crdv-orange-border:#FAC775;
    --crdv-red-bg:       #FCEBEB;
    --crdv-red-text:     #501313;
    --crdv-red-border:   #F09595;

    font-family: var(--crdv-font);
    color:       var(--crdv-text);
    max-width:   640px;
    margin:      0 auto;
}

.crdv-loading { padding: 2rem; text-align: center; color: var(--crdv-text-muted); }

/* Progression */
.crdv-prog-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem;
}
.crdv-back-btn {
    background:    none;
    border:        1px solid var(--crdv-border);
    border-radius: var(--crdv-radius);
    padding:       6px 14px;
    font-size:     13px;
    font-family:   var(--crdv-font);
    color:         var(--crdv-text-muted);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background-color .15s, border-color .15s, color .15s;
    flex-shrink:   0;
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
}
.crdv-back-btn:hover {
    background-color: var(--crdv-bg-light);
    border-color: var(--crdv-border-hover);
    color:        var(--crdv-text);
}
.crdv-prog-track {
    flex: 1; height: 4px;
    background: var(--crdv-border);
    border-radius: 2px; overflow: hidden;
}
.crdv-prog-fill {
    height: 100%;
    background: var(--crdv-primary);
    border-radius: 2px;
    transition: width .4s ease;
}
.crdv-prog-lbl {
    font-size: 12px; color: var(--crdv-text-muted); white-space: nowrap;
}

/* Carte générique */
.crdv-card {
    background:    var(--crdv-bg);
    border:        1px solid var(--crdv-border);
    border-radius: var(--crdv-radius);
    padding:       1.5rem;
    margin-bottom: .875rem;
}

/* Titre widget */
.crdv-header { margin-bottom: 1.5rem; }
.crdv-header h2 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.crdv-header p  { font-size: 14px; color: var(--crdv-text-muted); margin: 0; }

/* Question */
.crdv-q-icon   { font-size: 28px; display: block; margin-bottom: 10px; }
.crdv-q-text   { font-size: 16px; font-weight: 600; margin-bottom: 1.25rem; line-height: 1.4; }

/* Options */
.crdv-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.crdv-opt {
    background:    var(--crdv-bg-light);
    border:        1px solid var(--crdv-border);
    border-radius: var(--crdv-radius);
    padding:       11px 13px;
    font-size:     14px;
    font-family:   var(--crdv-font);
    color:         var(--crdv-text);
    cursor:        pointer;
    text-align:    left;
    line-height:   1.4;
    transition:    background .15s, border-color .15s;
}
.crdv-opt:hover:not(:disabled) {
    background:    var(--crdv-bg);
    border-color:  var(--crdv-border-hover);
}
.crdv-opt:disabled { cursor: default; }
.crdv-opt.crdv-selected-green  { background: var(--crdv-green-bg);  border-color: var(--crdv-green-border);  color: var(--crdv-green-text); }
.crdv-opt.crdv-selected-orange { background: var(--crdv-orange-bg); border-color: var(--crdv-orange-border); color: var(--crdv-orange-text); }
.crdv-opt.crdv-selected-red    { background: var(--crdv-red-bg);    border-color: var(--crdv-red-border);    color: var(--crdv-red-text); }

/* Changer de réponse */
.crdv-change-btn {
    background: none; border: none; padding: 0;
    font-size: 12px; color: var(--crdv-primary);
    cursor: pointer; text-decoration: underline;
    margin-top: 6px; display: inline-block;
}

/* Feedback */
.crdv-fb {
    margin-top: .875rem;
    padding:    11px 13px;
    border-radius: var(--crdv-radius);
    font-size:  13px; line-height: 1.5;
    display:    none;
}
.crdv-fb.crdv-fb-green  { background: var(--crdv-green-bg);  border: 1px solid var(--crdv-green-border);  color: var(--crdv-green-text);  display: block; }
.crdv-fb.crdv-fb-orange { background: var(--crdv-orange-bg); border: 1px solid var(--crdv-orange-border); color: var(--crdv-orange-text); display: block; }
.crdv-fb.crdv-fb-red    { background: var(--crdv-red-bg);    border: 1px solid var(--crdv-red-border);    color: var(--crdv-red-text);    display: block; }

/* Bouton suivant */
.crdv-next-btn {
    width:         100%;
    margin-top:    10px;
    padding:       11px;
    background:    var(--crdv-bg);
    border:        1px solid var(--crdv-border-hover);
    border-radius: var(--crdv-radius);
    font-size:     14px; font-weight: 600;
    font-family:   var(--crdv-font);
    color:         var(--crdv-text);
    cursor:        pointer;
    display:       none;
    transition:    background .15s, opacity .2s;
}
.crdv-next-btn.crdv-visible { display: block; }
.crdv-next-btn:hover:not(:disabled) { background: var(--crdv-bg-light); }
.crdv-next-btn.crdv-next-disabled,
.crdv-next-btn:disabled {
    opacity:        0.42;
    cursor:         not-allowed;
    pointer-events: auto;
}

/* Récap diagnostic */
.crdv-recap { margin-bottom: 1.25rem; }
.crdv-recap-item {
    padding:     8px 0;
    border-top:  1px solid var(--crdv-border);
    font-size:   13px;
}
.crdv-recap-q { color: var(--crdv-text-muted); margin-bottom: 2px; }
.crdv-recap-a { font-weight: 600; }
.crdv-recap-reco {
    margin-top:    4px;
    padding:       8px 10px;
    border-radius: var(--crdv-radius);
    font-size:     12px; line-height: 1.5;
}

/* Bandeau urgence */
.crdv-urgence-banner {
    padding:       11px 13px;
    border-radius: var(--crdv-radius);
    font-size:     13px; line-height: 1.5;
    margin-bottom: 1rem;
}
.crdv-urgence-elevee  { background: var(--crdv-red-bg);    border: 1px solid var(--crdv-red-border);    color: var(--crdv-red-text); }
.crdv-urgence-moyenne { background: var(--crdv-orange-bg); border: 1px solid var(--crdv-orange-border); color: var(--crdv-orange-text); }
.crdv-urgence-faible  { background: var(--crdv-green-bg);  border: 1px solid var(--crdv-green-border);  color: var(--crdv-green-text); }

/* Formulaire */
.crdv-form-section { margin-bottom: 1rem; }
.crdv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crdv-label {
    display:     block;
    font-size:   13px;
    color:       var(--crdv-text-muted);
    margin-bottom: 5px;
}
.crdv-label .crdv-req { color: var(--crdv-primary); }

/* Inputs — héritent du style Elementor via les variables globales */
.crdv-input,
.crdv-select,
.crdv-textarea {
    width:         100%;
    padding:       var(--e-global-button-border-padding, 9px 12px);
    border:        1px solid var(--crdv-border);
    border-radius: var(--crdv-radius);
    font-size:     var(--e-global-typography-text-font-size, 14px);
    font-family:   var(--crdv-font);
    color:         var(--crdv-text);
    background:    var(--crdv-bg);
    transition:    border-color .15s, box-shadow .15s;
    box-sizing:    border-box;
}
.crdv-input:focus,
.crdv-select:focus,
.crdv-textarea:focus {
    outline:      none;
    border-color: var(--crdv-primary);
    box-shadow:   0 0 0 3px rgba(29,158,117,.15);
}
.crdv-textarea { resize: vertical; min-height: 80px; }

/* Bouton CTA */
.crdv-cta {
    width:         100%;
    padding:       13px;
    background:    var(--crdv-btn-color, var(--crdv-primary));
    color:         var(--crdv-btn-text, #fff);
    border:        none;
    border-radius: var(--crdv-radius);
    font-size:     var(--e-global-typography-button-font-size, 15px);
    font-weight:   var(--e-global-typography-button-font-weight, 600);
    font-family:   var(--crdv-font);
    cursor:        pointer;
    transition:    background .2s, transform .1s;
}
.crdv-cta:hover    { filter: brightness(.9); }
.crdv-cta:active   { transform: scale(.98); }
.crdv-cta:disabled { opacity: .6; cursor: default; }

/* Brand bar */
.crdv-brand {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--crdv-border);
    margin-bottom: 1.25rem;
}
.crdv-brand-dot {
    width: 10px; height: 10px;
    background: var(--crdv-primary);
    border-radius: 50%; flex-shrink: 0;
}
.crdv-brand-name { font-size: 13px; font-weight: 600; }
.crdv-brand-sub  { font-size: 12px; color: var(--crdv-text-muted); }

/* Confirmation */
.crdv-confirm { text-align: center; padding: 1rem 0; }
.crdv-confirm-icon { font-size: 40px; display: block; margin-bottom: 10px; }
.crdv-confirm h3   { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.crdv-confirm p    { font-size: 14px; color: var(--crdv-text-muted); line-height: 1.6; }

/* Erreurs */
.crdv-error { font-size: 13px; color: var(--crdv-red-text); margin-top: 8px; }
.crdv-input.crdv-invalid,
.crdv-select.crdv-invalid,
.crdv-textarea.crdv-invalid { border-color: var(--crdv-red-border); }

/* Responsive */
@media (max-width: 500px) {
    .crdv-opts      { grid-template-columns: 1fr; }
    .crdv-form-row  { grid-template-columns: 1fr; }
}