/*
 * MOD-IA 2026-10-02 : habillage toutdebons du plugin « PassVal : GDPR »
 * (bandeau de consentement + page « Paramètres de confidentialité »).
 *
 * Le plugin est partagé avec le Passeport valaisan : son balisage et ses
 * feuilles (styles/gdpr-style.css, styles/privacy-center.css) ne sont pas
 * modifiés. Cette feuille est chargée APRÈS elles (voir tdb_enqueue_gdpr_styles,
 * inc/setup.php) et reprend les composants de la charte : .btn--primary /
 * .btn--ghost / .btn--dark, .tdb-checkbox, .tdb-accordion.
 *
 * Les !important ne servent qu'à contrer ceux posés par le plugin
 * (couleurs/tailles de .label-stat, .gdpr-app-button, .gdpr-collapsible…).
 */

/* ============================================================
 * Bandeau de consentement
 * ============================================================ */

#gdpr-consent-form {
    left: var( --space-lg );
    right: var( --space-lg );
    bottom: var( --space-lg );
    width: auto;
    max-width: 1100px;
    margin: 0 auto;
    background: var( --color-surface );
    border: 0;
    border-radius: var( --radius-card );
    box-shadow: var( --shadow-popover );
    font-family: var( --font-body );
    color: var( --color-text );
}

#gdpr-consent-form .gdpr-consent-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "texte   texte"
        "choix   actions";
    align-items: center;
    gap: var( --space-md ) var( --space-lg );
    margin: 0;
    padding: var( --space-lg ) var( --space-xl );
}

#gdpr-consent-text {
    grid-area: texte;
    width: auto;
    margin: 0;
    padding-right: var( --space-xl ); /* place de la croix */
    font-size: var( --text-body-size );
    line-height: var( --text-body-lh );
    font-weight: var( --weight-medium );
}

/* Croix de fermeture : pastille ronde grise */
#gdpr-quit-form {
    top: var( --space-md );
    right: var( --space-md );
    display: grid;
    place-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: var( --radius-pill );
    background: var( --color-surface-muted );
    font-size: var( --text-button-size );
    font-weight: var( --weight-semibold );
    line-height: 1;
    transition: background-color var( --duration-tdb ) var( --ease-tdb );
}
#gdpr-quit-form:hover {
    background: var( --color-border );
}

/* Cases à cocher : aspect .tdb-checkbox de la charte */
#gdpr-consent-form .gdpr-checkbox-row {
    grid-area: choix;
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-xs ) var( --space-lg );
    width: auto;
    margin: 0;
}

#gdpr-consent-form .gdpr-constent-checkbox {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
}

#gdpr-consent-form .gdpr-constent-checkbox > label {
    font-size: var( --text-button-size );
    font-weight: var( --weight-light );
    cursor: pointer;
}

#gdpr-consent-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var( --color-primary );
    border-radius: var( --radius-badge );
    background: #fff;
    cursor: pointer;
}
#gdpr-consent-form input[type="checkbox"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var( --color-primary );
    transform: scale( 0 );
    transition: transform var( --duration-tdb-snap ) var( --ease-tdb );
}
#gdpr-consent-form input[type="checkbox"]:checked::before {
    transform: scale( 1 );
}
#gdpr-consent-form input[type="checkbox"]:focus-visible {
    outline: 2px solid var( --color-primary );
    outline-offset: 2px;
}
/* « Nécessaires » : toujours cochée, non modifiable */
#gdpr-consent-form input[type="checkbox"]:disabled {
    border-color: var( --color-status-depleted );
    cursor: not-allowed;
}
#gdpr-consent-form input[type="checkbox"]:disabled::before {
    background: var( --color-status-depleted );
}
#gdpr-consent-form input[type="checkbox"]:disabled + label {
    color: var( --color-text-muted );
    cursor: not-allowed;
}

/* Boutons : aspect .btn de la charte */
#gdpr-consent-form .gdpr-app-button-container {
    grid-area: actions;
    position: static;
    display: flex;
    gap: var( --space-sm );
    margin: 0;
}

#gdpr-consent-form .gdpr-app-button {
    display: inline-flex;
    align-items: center;
    height: 46px;
    margin: 0;
    padding: 0 var( --space-md );
    border: 0;
    border-radius: var( --radius-sm );
    font-family: var( --font-heading );
    font-size: var( --text-button-size ) !important;
    line-height: var( --text-button-lh );
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var( --duration-tdb ) var( --ease-tdb ), color var( --duration-tdb ) var( --ease-tdb );
}

/* « Tout accepter » = .btn--primary */
#gdpr-app-button-appAll {
    background: var( --color-primary );
    color: #000;
}
#gdpr-app-button-appAll:hover,
#gdpr-app-button-appAll:focus-visible {
    background: var( --color-ink-strong );
    color: #fff;
}

/* « Accepter ma sélection » = .btn--ghost */
#gdpr-app-button-appSelected {
    background: var( --color-surface-muted );
    color: var( --color-ink ) !important;
}
#gdpr-app-button-appSelected:hover,
#gdpr-app-button-appSelected:focus-visible {
    background: var( --color-border );
}

@media ( max-width: 960px ) {
    #gdpr-consent-form .gdpr-consent-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "texte"
            "choix"
            "actions";
    }
}

@media ( max-width: 768px ) {
    #gdpr-consent-form {
        left: var( --space-sm );
        right: var( --space-sm );
        bottom: var( --space-sm );
    }

    #gdpr-consent-form .gdpr-consent-container {
        gap: var( --space-md );
        padding: var( --space-lg ) var( --space-md ) var( --space-md );
    }

    #gdpr-consent-text {
        font-size: var( --text-card-desc-size );
        line-height: var( --text-card-desc-lh );
    }

    #gdpr-consent-form .gdpr-checkbox-row {
        flex-direction: column;
        gap: var( --space-xs );
    }

    #gdpr-consent-form .gdpr-constent-checkbox > label {
        font-size: var( --text-button-size );
    }

    #gdpr-consent-form .gdpr-app-button-container {
        flex-direction: column-reverse; /* « Tout accepter » en bas, sous le pouce */
    }

    #gdpr-consent-form .gdpr-app-button {
        justify-content: center;
        width: 100% !important;
        margin: 0;
        font-size: var( --text-button-size-mobile ) !important;
    }
}

/* ============================================================
 * Page « Paramètres de confidentialité »
 * ============================================================ */

.gdpr-privacy-center {
    font-family: var( --font-body );
    color: var( --color-text );
}

/* Bloc « Votre consentement » : carte grise de la charte */
.gdpr-privacy-center:has( > form ) {
    margin-bottom: var( --space-lg );
    padding: var( --space-xl );
    background: var( --color-surface-muted );
    border-radius: var( --radius-card );
}

.gdpr-privacy-center p {
    margin: 0 0 var( --space-xs );
    color: var( --color-text ) !important;
    font-size: var( --text-body-size );
    line-height: var( --text-body-lh );
}

.gdpr-privacy-center ul {
    list-style: disc; /* la base du thème retire les puces */
    margin: 0 0 var( --space-lg );
    padding-left: var( --space-lg );
}

.gdpr-privacy-center li {
    color: var( --color-text ) !important;
    font-size: var( --text-body-size );
    line-height: var( --text-body-lh );
}
.gdpr-privacy-center li::marker {
    color: var( --color-primary );
}

/* Grille des interrupteurs : 1 ligne « Nécessaires », puis 2 colonnes */
.gdpr-privacy-center form .row {
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: var( --space-sm ) var( --space-lg );
    margin: var( --space-sm ) 0 0;
}
.gdpr-privacy-center form .row > div {
    display: grid;
    gap: var( --space-sm );
    width: auto;
    max-width: none;
    padding: 0;
}
.gdpr-privacy-center #necessary-row,
.gdpr-privacy-center #consent-date,
.gdpr-privacy-center #gdpr-save-button {
    grid-column: 1 / -1;
}

/* Chaque catégorie : pastille blanche, interrupteur + libellé */
.gdpr-privacy-center .gdpr-stat-checkbox {
    gap: var( --space-sm );
    margin: 0;
    padding: var( --space-sm ) var( --space-md );
    background: var( --color-surface );
    border-radius: var( --radius-sm );
}

.gdpr-privacy-center .label-stat {
    margin: 0;
    color: var( --color-text ) !important;
    font-size: var( --text-button-size );
    font-weight: var( --weight-medium );
    cursor: pointer;
}

/* Interrupteur orange de la charte */
.gdpr-privacy-center .switch {
    flex-shrink: 0;
    width: 40px;
    height: 22px;
}
.gdpr-privacy-center .slider {
    background-color: var( --color-status-depleted );
    transition: background-color var( --duration-tdb ) var( --ease-tdb );
}
.gdpr-privacy-center .slider::before {
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    box-shadow: 0 1px 3px rgba( 33, 33, 33, .2 );
    transition: transform var( --duration-spring-snap ) var( --ease-spring );
}
.gdpr-privacy-center input:checked + .slider {
    background-color: var( --color-primary );
}
.gdpr-privacy-center input:checked + .slider::before {
    transform: translateX( 18px );
}
.gdpr-privacy-center input:focus-visible + .slider {
    box-shadow: none;
    outline: 2px solid var( --color-primary );
    outline-offset: 2px;
}
/* « Nécessaires » : coché d'office, ton neutre */
.gdpr-privacy-center input:checked + .slider.disabled {
    background-color: var( --color-ink );
    cursor: not-allowed;
}

.gdpr-privacy-center #consent-date {
    margin: var( --space-xs ) 0 0;
    color: var( --color-text-muted ) !important;
    font-size: var( --text-caption-size );
    line-height: var( --text-caption-lh );
}

/* « Enregistrer les modifications » = .btn--primary (affiché par le JS au 1er changement) */
.gdpr-privacy-center #gdpr-save-button {
    justify-self: start;
    height: 46px;
    margin: var( --space-xs ) 0 0;
    padding: 0 var( --space-md );
    border: 0;
    border-radius: var( --radius-sm );
    background: var( --color-primary );
    color: #000;
    font-family: var( --font-heading );
    font-size: var( --text-button-size );
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    cursor: pointer;
    transition: background-color var( --duration-tdb ) var( --ease-tdb ), color var( --duration-tdb ) var( --ease-tdb );
}
.gdpr-privacy-center #gdpr-save-button:hover,
.gdpr-privacy-center #gdpr-save-button:focus-visible {
    background: var( --color-ink-strong );
    color: #fff;
}

/* Révocation : déclencheur .tdb-accordion__trigger */
.gdpr-privacy-center .gdpr-collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 15px 20px;
    border: 0;
    border-radius: var( --radius-sm );
    background: var( --color-surface-muted );
    color: var( --color-ink ) !important;
    font-family: var( --font-heading );
    font-size: var( --text-kicker-size );
    font-weight: var( --weight-semibold );
    transition: background-color var( --duration-tdb ) var( --ease-tdb );
}
.gdpr-privacy-center .gdpr-collapsible:hover {
    background: var( --color-border );
}
.gdpr-privacy-center .gdpr-collapsible.active {
    background: var( --color-primary );
    border-radius: var( --radius-sm ) var( --radius-sm ) 0 0;
}
.gdpr-privacy-center .gdpr-plus-minus {
    float: none !important;
    display: grid;
    place-content: center;
    width: 24px;
    height: 24px;
    border-radius: var( --radius-pill );
    background: var( --color-surface );
    font-size: var( --text-kicker-size );
    line-height: 1;
}

/* Panneau déplié : .tdb-accordion__panel */
.gdpr-privacy-center .gdpr-content {
    padding: var( --space-md ) 20px var( --space-lg );
    background: var( --color-surface-muted );
    border-radius: 0 0 var( --radius-sm ) var( --radius-sm );
}
.gdpr-privacy-center .gdpr-content p {
    margin-bottom: var( --space-md );
    font-size: var( --text-body-size );
    text-align: left;
}
.gdpr-privacy-center .gdpr-button-row {
    text-align: left;
}

/* « Révoquer mon consentement » = .btn--dark */
#gdpr-revoke-button {
    display: inline-flex;
    align-items: center;
    height: 46px;
    margin: 0;
    padding: 0 var( --space-md );
    border: 0;
    border-radius: var( --radius-sm );
    background: var( --color-ink );
    color: #fff;
    font-family: var( --font-heading );
    font-size: var( --text-button-size );
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    cursor: pointer;
    transition: background-color var( --duration-tdb ) var( --ease-tdb ), color var( --duration-tdb ) var( --ease-tdb );
}
#gdpr-revoke-button:hover,
#gdpr-revoke-button:focus-visible {
    background: var( --color-primary );
    color: #000;
}

@media ( max-width: 768px ) {
    .gdpr-privacy-center:has( > form ) {
        padding: var( --space-lg ) var( --space-md );
    }

    .gdpr-privacy-center form .row {
        grid-template-columns: 1fr;
    }

    .gdpr-privacy-center #gdpr-save-button,
    #gdpr-revoke-button {
        justify-content: center;
        width: 100%;
    }
}