/**
 * WAT Wizard - Styles Front-end
 * Réutilise les variables CSS du thème Wamca
 */

/* ==========================================================================
   CONTENEUR PRINCIPAL
   ========================================================================== */

.wat-wizard {
    padding: 60px 0;
    max-width: 940px;
    margin: 0 auto;
}

.wat-wizard__title {
    font-family: "Montserrat-Bold", arial, sans-serif;
    font-size: 36px;
    line-height: 50px;
    color: var(--text-color, #3c3c3c);
    margin: 0 0 20px 0;
}

.wat-wizard__intro {
    font-family: "OpenSans", arial, sans-serif;
    font-size: 20px;
    line-height: 32px;
    color: var(--text-color, #3c3c3c);
    margin: 0 0 40px 0;
}

.wat-wizard__intro p {
    margin: 0 0 15px 0;
}

.wat-wizard__intro p:last-child {
    margin-bottom: 0;
}

.wat-wizard__intro strong {
    font-family: "OpenSans", arial, sans-serif;
    font-weight: 700;
}

/* ==========================================================================
   BARRE DE PROGRESSION
   ========================================================================== */

.wat-wizard__progress {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    width: 100%;
}

/* Ligne continue derrière les cercles */
.wat-wizard__progress::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: var(--text-color, #3c3c3c);
    z-index: 1;
}

.wat-wizard__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0;
}

.wat-wizard__step:first-child {
    align-items: flex-start;
}

.wat-wizard__step:last-child {
    align-items: flex-end;
}

.wat-wizard__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--wat-secondary-color, var(--color-9, #007461));
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.wat-wizard__step.is-active .wat-wizard__dot,
.wat-wizard__step.is-completed .wat-wizard__dot {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

.wat-wizard__label {
    font-family: "OpenSans", arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--wat-secondary-color, var(--color-9, #007461));
    margin-top: 10px;
    white-space: nowrap;
}

.wat-wizard__step.is-active .wat-wizard__label,
.wat-wizard__step.is-completed .wat-wizard__label {
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Les éléments .wat-wizard__line ne sont plus visibles, on utilise le pseudo-element */
.wat-wizard__line {
    display: none;
}

/* ==========================================================================
   PANNEAUX (ÉTAPES)
   ========================================================================== */

.wat-wizard__panel {
    animation: fadeIn 0.3s ease;
}

.wat-wizard__panel[hidden] {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CONTENEUR CHOIX + ACTIONS
   ========================================================================== */

.wat-wizard__panel-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

/* ==========================================================================
   BOUTONS DE CHOIX
   ========================================================================== */

.wat-wizard__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    flex: 1;
}

/* Boutons pill - État par défaut : fond blanc, texte rouge */
.wat-wizard__btn {
    font-family: "OpenSans", arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 40px;
    border-radius: 40px;
    border: 2px solid var(--wat-primary-color, var(--button-default-color, #e62f44));
    background-color: var(--bg-color-lightest, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    margin: 0;
}

/* Survol : fond rouge, texte blanc */
.wat-wizard__btn:hover {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
}

/* Focus visible uniquement pour accessibilité clavier */
.wat-wizard__btn:focus-visible {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
    outline: 2px solid var(--wat-primary-color, var(--button-default-color, #e62f44));
    outline-offset: 2px;
}

/* Retirer le style focus pour les clics souris */
.wat-wizard__btn:focus:not(:focus-visible) {
    outline: none;
}

/* Bouton sélectionné : fond rouge, texte blanc */
.wat-wizard__btn.is-selected {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
}

/* Layout vertical pour l'étape 2 (besoins) */
.wat-wizard__choices--vertical {
    flex-direction: column;
    align-items: center;
    max-width: 600px;
}

.wat-wizard__choices--vertical .wat-wizard__btn {
    width: auto;
    text-align: center;
    padding: 15px 40px;
}

/* ==========================================================================
   BOUTON SÉLECTIONNER TOUS LES BESOINS
   ========================================================================== */

/* État par défaut : bordure verte, fond blanc, texte vert */
.wat-wizard__btn--select-all {
    border-color: var(--wat-secondary-color, var(--color-9, #007461));
    color: var(--wat-secondary-color, var(--color-9, #007461));
    background-color: var(--bg-color-lightest, #fff);
}

/* Survol : fond vert, texte blanc */
.wat-wizard__btn--select-all:hover {
    background-color: var(--wat-secondary-color, var(--color-9, #007461));
    color: var(--button-secondary-color, #fff);
}

/* Focus visible */
.wat-wizard__btn--select-all:focus-visible {
    background-color: var(--wat-secondary-color, var(--color-9, #007461));
    color: var(--button-secondary-color, #fff);
    outline: 2px solid var(--wat-secondary-color, var(--color-9, #007461));
    outline-offset: 2px;
}

/* État actif (tous sélectionnés) : fond vert, texte blanc */
.wat-wizard__btn--select-all.is-active {
    background-color: var(--wat-secondary-color, var(--color-9, #007461));
    color: var(--button-secondary-color, #fff);
    border-color: var(--wat-secondary-color, var(--color-9, #007461));
}

/* ==========================================================================
   ZONE D'ACTIONS (BOUTONS RETOUR / VALIDER)
   ========================================================================== */

.wat-wizard__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Ordre des boutons : Retour à gauche, Valider à droite */
.wat-wizard__back {
    order: 1;
}

.wat-wizard__validate {
    order: 2;
}

/* Actions en ligne pour l'étape 3 */
.wat-wizard__panel[data-panel="3"] .wat-wizard__actions {
    margin-top: 30px;
}

/* Bouton Valider */
.wat-wizard__validate {
    font-family: "OpenSans", arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 0 12px 0 25px;
    height: 48px;
    border-radius: 40px;
    border: 2px solid var(--wat-primary-color, var(--button-default-color, #e62f44));
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wat-wizard__validate:hover,
.wat-wizard__validate:focus {
    background-color: var(--bg-color-lightest, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

.wat-wizard__validate svg {
    width: 22px;
    height: 17px;
}

/* Bouton Retour */
.wat-wizard__back {
    font-family: "OpenSans", arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 0 25px 0 12px;
    height: 48px;
    border-radius: 40px;
    border: 2px solid var(--wat-primary-color, var(--button-default-color, #e62f44));
    background-color: var(--bg-color-lightest, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wat-wizard__back:hover,
.wat-wizard__back:focus {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
}

.wat-wizard__back svg {
    width: 22px;
    height: 17px;
}

/* ==========================================================================
   ÉTAPE 3 : RÉSULTATS
   ========================================================================== */

.wat-wizard__results {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.wat-wizard__results .c-article-item {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
}

/* Message si aucun résultat */
.wat-wizard__no-results {
    text-align: center;
    padding: 40px;
    font-family: "OpenSans", arial, sans-serif;
    font-size: 18px;
    color: var(--text-color-lighter, #454545);
}

/* ==========================================================================
   SECTION PAGES ADDITIONNELLES
   ========================================================================== */

.wat-wizard__separator {
    border: none;
    border-top: 1px solid var(--separator-color-lighter, #d7d7d7);
    margin: 40px 0;
}

.wat-wizard__additional-title {
    font-family: "OpenSans", arial, sans-serif;
    font-size: 18px;
    color: var(--text-color, #3c3c3c);
    margin-bottom: 30px;
}

.wat-wizard__additional {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.wat-wizard__additional .c-article-item {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}

/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.wat-wizard__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.wat-wizard__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--separator-color-lighter, #d7d7d7);
    border-top-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet landscape (max-width: 1200px) */
@media screen and (max-width: 1200px) {
    .wat-wizard {
        padding: 50px 30px;
    }

    .wat-wizard__results .c-article-item {
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}

/* Tablet portrait (max-width: 810px) */
@media screen and (max-width: 810px) {
    .wat-wizard {
        padding: 40px 0;
    }

    .wat-wizard__title {
        font-size: 28px;
        line-height: 38px;
    }

    .wat-wizard__intro {
        font-size: 18px;
        line-height: 28px;
    }

    .wat-wizard__label {
        font-size: 14px;
    }

    .wat-wizard__choices {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .wat-wizard__btn {
        padding: 10px 25px;
        font-size: 14px;
    }

    .wat-wizard__results .c-article-item,
    .wat-wizard__additional .c-article-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Panel content en colonne sur tablette */
    .wat-wizard__panel-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .wat-wizard__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    /* Quand les deux boutons sont présents : Retour à gauche, Valider à droite */
    .wat-wizard__actions:has(.wat-wizard__back) {
        justify-content: space-between;
    }

    .wat-wizard__back {
        order: 1;
    }

    .wat-wizard__validate {
        order: 2;
    }
}

/* Phone (max-width: 480px) */
@media screen and (max-width: 480px) {
    .wat-wizard {
        padding: 30px 0;
    }

    .wat-wizard__title {
        font-size: 24px;
        line-height: 32px;
    }

    .wat-wizard__intro {
        font-size: 16px;
        line-height: 24px;
    }

    .wat-wizard__progress::before {
        top: 7px;
    }

    .wat-wizard__label {
        font-size: 14px;
    }

    .wat-wizard__dot {
        width: 14px;
        height: 14px;
    }

    .wat-wizard__choices--vertical .wat-wizard__btn {
        width: 100%;
    }

    .wat-wizard__additional-card {
        padding: 20px;
    }
}

/* ==========================================================================
   MODE DARK
   ========================================================================== */

:root[data-theme="dark"] .wat-wizard__label {
    color: var(--button-secondary-color, #fff);
}

:root[data-theme="dark"] .wat-wizard__dot {
    background-color: var(--button-secondary-color, #fff);
}

/* Dot et label actifs/completes en mode dark */
:root[data-theme="dark"] .wat-wizard__step.is-active .wat-wizard__dot,
:root[data-theme="dark"] .wat-wizard__step.is-completed .wat-wizard__dot {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

:root[data-theme="dark"] .wat-wizard__step.is-active .wat-wizard__label,
:root[data-theme="dark"] .wat-wizard__step.is-completed .wat-wizard__label {
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Boutons de choix - Etat par defaut en mode dark : fond rouge, texte blanc */
:root[data-theme="dark"] .wat-wizard__btn {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
    border-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Boutons de choix - Survol en mode dark : fond blanc, texte rouge */
:root[data-theme="dark"] .wat-wizard__btn:hover {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Focus visible en mode dark */
:root[data-theme="dark"] .wat-wizard__btn:focus-visible {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    outline: 2px solid var(--button-secondary-color, #fff);
    outline-offset: 2px;
}

/* Bouton selectionne en mode dark */
:root[data-theme="dark"] .wat-wizard__btn.is-selected {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Bouton Valider en mode dark */
:root[data-theme="dark"] .wat-wizard__validate {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
    border-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

:root[data-theme="dark"] .wat-wizard__validate:hover,
:root[data-theme="dark"] .wat-wizard__validate:focus {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Bouton Retour en mode dark */
:root[data-theme="dark"] .wat-wizard__back {
    background-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
    color: var(--button-secondary-color, #fff);
    border-color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

:root[data-theme="dark"] .wat-wizard__back:hover,
:root[data-theme="dark"] .wat-wizard__back:focus {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-primary-color, var(--button-default-color, #e62f44));
}

/* Bouton Sélectionner tous en mode dark */
:root[data-theme="dark"] .wat-wizard__btn--select-all {
    background-color: var(--wat-secondary-color, var(--color-9, #007461));
    color: var(--button-secondary-color, #fff);
    border-color: var(--wat-secondary-color, var(--color-9, #007461));
}

:root[data-theme="dark"] .wat-wizard__btn--select-all:hover {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-secondary-color, var(--color-9, #007461));
}

:root[data-theme="dark"] .wat-wizard__btn--select-all.is-active {
    background-color: var(--button-secondary-color, #fff);
    color: var(--wat-secondary-color, var(--color-9, #007461));
}