/* ==========================================================
   PUBLIER-LOGEMENT.CSS — page de publication uniquement
   ========================================================== */

.publish-header{

    max-width:800px;

    margin:calc(var(--header-height, 84px) + 60px) auto 30px;

    padding:0 20px;

    text-align:center;

}

.publish-header h1{

    color:var(--primary);

    font-family:var(--font-heading);

    margin-bottom:12px;

}

.publish-header p{

    color:#64748B;

}

/* ==========================
    PETIT MESSAGE AVANT LE CHOIX DE FORMULE
========================== */

.plan-teaser{

    position:relative;

    max-width:640px;

    margin:0 auto 35px;

    padding:22px 50px 22px 26px;

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:white;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(20,92,61,.25);

}

.plan-teaser p{

    display:flex;
    align-items:center;
    gap:10px;

    font-weight:700;
    font-size:16px;

    margin-bottom:16px;

}

.plan-teaser p i{

    color:var(--secondary);
    font-size:22px;
    flex-shrink:0;

}

.plan-teaser-actions{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;

}

.plan-teaser-actions .btn-primary{

    background:var(--secondary);

    padding:12px 22px;

    border-radius:12px;

    font-weight:700;

    border:none;

    cursor:pointer;

    transition:.2s;

}

.plan-teaser-actions .btn-primary:hover{

    background:var(--secondary-dark);

    transform:translateY(-2px);

}

.plan-teaser-non{

    background:none;
    border:none;

    color:rgba(255,255,255,.8);

    font-weight:600;
    text-decoration:underline;

    cursor:pointer;

}

.plan-teaser-non:hover{

    color:white;

}

.plan-teaser-close{

    position:absolute;

    top:14px;
    right:14px;

    width:30px;
    height:30px;

    border-radius:50%;

    border:none;

    background:rgba(255,255,255,.15);

    color:white;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.2s;

}

.plan-teaser-close:hover{

    background:rgba(255,255,255,.3);

}

@media(max-width:600px){

    .plan-teaser{

        padding:20px 42px 20px 20px;

    }

}

/* ==========================
    CHOIX DE LA FORMULE
    (réutilise .pricing-grid/.pricing-card de tarifs.css pour
    rester visuellement cohérent avec la page Tarifs)
========================== */

.plan-choice-section{

    max-width:1200px;

    margin:0 auto 50px;

    padding:0 20px;

}

.pricing-card-highlight{

    animation:pulseCartePremium 2.2s ease;

}

@keyframes pulseCartePremium{

    0%, 100%{

        box-shadow:var(--shadow-lg);

    }

    25%, 75%{

        box-shadow:0 0 0 6px rgba(111,190,68,.5), var(--shadow-lg);

    }

}

.plan-choice-skip{

    text-align:center;

    margin-top:30px;

}

.plan-choice-skip a{

    color:var(--gray-500);

    font-weight:600;

    text-decoration:none;

}

.plan-choice-skip a:hover{

    color:var(--primary);

    text-decoration:underline;

}

.publish-card{

    max-width:800px;

    margin:auto;

    background:white;

    padding:40px;

    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);
}

/* ==========================
    FORMULAIRE EN ÉTAPES
========================== */

.publish-progress{

    display:flex;
    align-items:flex-start;

    margin-bottom:45px;

}

.publish-progress-step{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:8px;

    flex-shrink:0;

    width:90px;

    text-align:center;

}

.publish-progress-circle{

    width:38px;
    height:38px;

    border-radius:50%;

    background:var(--gray-100, #F1F5F9);
    color:var(--gray-500, #64748B);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;
    font-size:15px;

    border:2px solid var(--gray-100, #F1F5F9);

    transition:.25s;

}

.publish-progress-label{

    font-size:12px;
    font-weight:600;

    color:var(--gray-500, #64748B);

}

.publish-progress-step.active .publish-progress-circle{

    background:var(--primary);
    color:white;

    border-color:var(--primary);

}

.publish-progress-step.active .publish-progress-label{

    color:var(--primary);

}

.publish-progress-step.done .publish-progress-circle{

    background:var(--primary-light);
    color:var(--primary);

    border-color:var(--primary);

}

.publish-progress-line{

    flex-grow:1;

    height:2px;

    background:var(--gray-100, #F1F5F9);

    margin-top:19px;

}

.publish-step{

    display:none;

}

.publish-step.active{

    display:block;

    animation:apparitionEtapePublication .3s ease;

}

@keyframes apparitionEtapePublication{

    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }

}

.publish-step-nav{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    margin-top:35px;

}

.btn-step-suivant,
.btn-step-precedent{

    display:flex;
    align-items:center;
    gap:8px;

    border:none;

    padding:14px 26px;

    border-radius:15px;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.btn-step-suivant{

    background:var(--primary);
    color:white;

    margin-left:auto;

}

.btn-step-suivant:hover{

    background:var(--primary-dark);

}

.btn-step-precedent{

    background:var(--gray-100, #F1F5F9);
    color:var(--gray-700, #334155);

}

.btn-step-precedent:hover{

    background:var(--gray-200, #E2E8F0);

}

@media(max-width:600px){

    .publish-progress-label{

        display:none;

    }

    .publish-progress-step{

        width:auto;

    }

}

/* ==========================
    APERÇU DE LA CARTE
========================== */

.publish-preview{

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid #e2e8f0;

}

.publish-preview h3{

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--primary);

    margin-bottom:8px;

}

.publish-preview-card-wrap{

    max-width:340px;

    margin:20px auto 0;

}

.publish-preview-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.1);

    border:1px solid #e2e8f0;

}

.publish-preview-card-image{

    position:relative;

    height:190px;

}

.publish-preview-card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.publish-preview-card-placeholder{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--gray-100, #F1F5F9);
    color:var(--gray-400, #94A3B8);

    font-size:36px;

}

.publish-preview-card .badge-nouveau{

    position:absolute;

    top:14px;
    right:14px;

    display:flex;
    align-items:center;
    gap:5px;

    background:linear-gradient(135deg,#F59E0B,#D97706);
    color:white;

    padding:6px 13px;

    border-radius:30px;

    font-size:12px;
    font-weight:700;

    box-shadow:0 8px 18px rgba(217,119,6,.35);

}

.publish-preview-card .badge-nouveau i{

    font-size:12px;

}

.publish-preview-card-content{

    padding:18px 20px;

}

.publish-preview-card-content h4{

    color:var(--gray-900, #0F172A);

    margin-bottom:6px;

}

.publish-preview-price{

    color:var(--primary);

    font-weight:700;
    font-size:16px;

    margin-bottom:6px;

}

.publish-preview-loc{

    display:flex;
    align-items:center;
    gap:5px;

    color:var(--gray-500, #64748B);

    font-size:13.5px;

    margin-bottom:10px;

}

.publish-preview-infos{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

    font-size:13px;

    color:var(--gray-700, #334155);

    font-weight:600;

}

.publish-preview-infos i{

    color:var(--primary);

    margin-right:4px;

}

.publish-preview-engagement{

    margin-top:10px;

    font-size:12.5px;

    color:var(--gray-500, #64748B);

}

.form-group{

    margin-bottom:25px;
}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;
}

.badge-plan-requis{

    display:inline-block;

    margin-left:8px;

    padding:3px 10px;

    background:var(--secondary);
    color:white;

    border-radius:20px;

    font-size:11px;
    font-weight:700;

    vertical-align:middle;

}

#groupeAudio label{

    display:flex;
    align-items:center;

}

#groupeAudio label i{

    color:var(--secondary);
    margin-right:8px;

}

.form-group input:disabled{

    background:#F1F5F9;
    color:#94A3B8;
    cursor:not-allowed;

}

/* ==========================
    ENREGISTREUR VOCAL
========================== */

.audio-recorder{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* Ligne d'enregistrement façon WhatsApp : micro à droite (maintenir
   appuyé pour enregistrer), corbeille d'annulation à gauche qui
   n'apparaît que pendant l'enregistrement — on y glisse le
   pointeur/doigt pour annuler au lieu d'envoyer. */
.audio-recorder-row{

    display:flex;
    align-items:center;
    gap:14px;

    background:var(--gray-50);

    padding:10px 14px;

    border-radius:16px;

}

.audio-recorder-status{

    flex-grow:1;

    color:var(--gray-500);

    font-size:13.5px;

    user-select:none;

}

.audio-recorder-timer{

    color:#DC2626;

    font-weight:700;
    font-size:14px;

    font-variant-numeric:tabular-nums;

}

.btn-audio-mic{

    width:52px;
    height:52px;
    flex-shrink:0;

    border:none;

    border-radius:50%;

    background:var(--primary-light);
    color:var(--primary);

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

    transition:.2s;

    touch-action:none;

}

.btn-audio-mic:hover:not(:disabled){

    background:var(--primary);
    color:white;

}

.btn-audio-mic:disabled{

    background:#F1F5F9;
    color:#94A3B8;
    cursor:not-allowed;

}

.btn-audio-mic.recording{

    background:#DC2626;
    color:white;

    animation:pulseEnregistrement 1.4s ease-in-out infinite;

}

@keyframes pulseEnregistrement{

    0%, 100%{ box-shadow:0 0 0 0 rgba(220,38,38,.35); }
    50%{ box-shadow:0 0 0 10px rgba(220,38,38,0); }

}

.btn-audio-cancel{

    width:42px;
    height:42px;
    flex-shrink:0;

    border:none;

    border-radius:50%;

    background:#FEE2E2;
    color:#DC2626;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:16px;

    transition:.2s;

}

.btn-audio-cancel.audio-cancel-armed{

    background:#DC2626;
    color:white;

    transform:scale(1.15);

}

.audio-preview-row{

    display:flex;
    align-items:center;
    gap:14px;

}

#audioPreview{

    height:42px;

    max-width:280px;

}

.btn-audio-supprimer{

    width:42px;
    height:42px;
    flex-shrink:0;

    border:none;

    border-radius:50%;

    background:#FEE2E2;
    color:#DC2626;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:16px;

    transition:.2s;

}

.btn-audio-supprimer:hover{

    background:#DC2626;
    color:white;

}

.form-hint{

    margin-top:8px;

    color:var(--gray-500);

    font-size:13px;
}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:18px;

    border:1px solid #e2e8f0;

    border-radius:15px;

    outline:none;

    font-size:15px;

    font-family:inherit;

    background:white;

    transition:border-color .2s, box-shadow .2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,92,61,.12);

}

.form-group textarea{

    height:150px;

    resize:none;
}

.form-section{

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid #e2e8f0;

}

.form-section h3{

    color:var(--primary);

    margin-bottom:8px;

}

.form-section > .form-hint{

    margin-top:0;

    margin-bottom:22px;

}

.equipements-choix{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:14px;

}

.checkbox-choix{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 16px;

    border:1px solid #e2e8f0;

    border-radius:15px;

    cursor:pointer;

    font-weight:600;

    color:#475569;

    transition:.2s;

}

.checkbox-choix:has(input:checked){

    border-color:var(--primary);

    background:var(--primary-light);

    color:var(--primary);

}

.checkbox-choix input{

    width:auto;

    accent-color:var(--primary);

}

.checkbox-choix i{

    font-size:20px;

}

.publish-btn{

    border:none;

    background:var(--primary);

    color:white;

    padding:18px 35px;

    border-radius:15px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

    display:block;

    width:250px;

    margin:60px auto 0;

}

.publish-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);
}

/* ==========================
    SUGGESTION DE PLAN
    (affichée après publication réussie)
========================== */

.plan-suggestion{

    max-width:700px;

    margin:60px auto;

    padding:50px 40px;

    background:white;

    border-radius:30px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    text-align:center;

}

.plan-suggestion-icon{

    font-size:55px;

    color:var(--secondary);

    margin-bottom:15px;

}

.plan-suggestion h2{

    color:var(--primary);

    margin-bottom:8px;

}

.plan-suggestion > p{

    color:#64748B;

    margin-bottom:30px;

}

.plan-suggestion-card{

    background:var(--primary-light);

    border-radius:20px;

    padding:28px;

    margin-bottom:30px;

    text-align:left;

}

.plan-suggestion-card h3{

    color:var(--primary);

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

}

.plan-suggestion-card p{

    color:#334155;

}

.plan-suggestion-actions{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}