/* =========================================================================
   BODEZIA — PAGE PROFIL (settings-profile.php)
   -------------------------------------------------------------------------
   Réécriture complète, calée sur la charte posée dans home-page.css.

   Ce qui change
     - Une échelle de 5 tailles au lieu de 14 valeurs dispersées
     - Le texte courant ne descend plus sous 15px (il était à 13,8px)
     - Les gris passent tous à 4,5:1 minimum (les libellés étaient à 2,6:1)
     - Les cartes adoptent le rayon 16px et la bordure des cartes d'accueil
     - Mail + téléphone fusionnés en une seule carte « Coordonnées »
     - Les styles de modale sont sortis dans /css/modal.css
     - Passage à une colonne dès 768px, plus seulement sous 576px

   Ce qui ne change pas
     - Le violet de marque #7441d4
     - Tous les noms de classes existants : les modales (edit-personal-details,
       change-password, edit-email, edit-phone) continuent de fonctionner
       sans être touchées

   TOKENS : ce fichier redéfinit les valeurs de la charte sous le préfixe
   --pf-* au lieu de réutiliser --home-*. Raison : home-page.css n'est pas
   chargé sur cette page, et le redéfinir ici écraserait ses paliers
   responsive sur l'accueil. Les valeurs sont identiques, le préfixe est
   différent.
   ========================================================================= */


/* =========================================================================
   TOKENS
   ========================================================================= */

:root {

    /* Échelle typographique — base 16px */
    --pf-fs-label: 0.75rem;        /* 12px — libellés en capitales     */
    --pf-fs-small: 0.875rem;       /* 14px — mentions secondaires      */
    --pf-fs-body: 0.9375rem;       /* 15px — valeurs, texte courant    */
    --pf-fs-title: 1.0625rem;      /* 17px — titres de carte           */
    --pf-fs-modal: 1.125rem;       /* 18px — titre de modale           */

    /* Couleurs de texte — vérifiées à 4,5:1 minimum */
    --pf-c-heading: #2b3034;       /* 12,9:1 sur blanc */
    --pf-c-body: #5c6670;          /*  5,8:1 sur blanc */
    --pf-c-accent: #7441d4;        /*  6,0:1 sur blanc */
    --pf-c-accent-dark: #6737c7;

    /* Surfaces */
    --pf-c-card: #fff;
    --pf-c-surface: #fafbfc;
    --pf-c-surface-accent: #f3eefd;
    --pf-c-border: #e6e9ee;
    --pf-c-border-soft: #eef1f4;

    /* États */
    --pf-c-success: #197a33;
    --pf-c-danger: #b42318;

    /* Formes */
    --pf-radius-card: 16px;
    --pf-radius-tile: 12px;
    --pf-radius-icon: 12px;
    --pf-radius-field: 10px;

    /* Rythme */
    --pf-card-pad-x: 22px;
    --pf-card-pad-y: 20px;
    --pf-gap: 12px;
}


/* =========================================================================
   CARTE
   ========================================================================= */

.profile-settings-card {
    overflow: hidden;

    background: var(--pf-c-card);

    border: 1px solid var(--pf-c-border);
    border-radius: var(--pf-radius-card);

    box-shadow:
            0 1px 2px rgba(16, 24, 40, 0.04);
}


/* En-tête — plus de trait de séparation : les tuiles grises suffisent
   à structurer la carte, comme sur l'accueil. */

.profile-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding:
            var(--pf-card-pad-y)
            var(--pf-card-pad-x)
            14px;
}

.profile-settings-header > div {
    min-width: 0;
}

.profile-settings-header h3 {
    margin: 0;

    color: var(--pf-c-heading);

    font-size: var(--pf-fs-title);
    font-weight: 600;

    line-height: 1.35;
    letter-spacing: -0.01em;
}

.profile-settings-header p {
    margin: 4px 0 0;

    color: var(--pf-c-body);

    font-size: var(--pf-fs-small);
    line-height: 1.5;
}


/* Bouton d'édition */

.profile-settings-edit {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    color: var(--pf-c-accent);

    background: var(--pf-c-surface-accent);

    border: 0;
    border-radius: var(--pf-radius-icon);

    font-size: 0.95rem;

    text-decoration: none;

    transition:
            background-color 0.15s ease,
            color 0.15s ease;
}

.profile-settings-edit:hover,
.profile-settings-edit:focus {
    color: #fff;

    background: var(--pf-c-accent);
}

.profile-settings-edit:focus-visible {
    outline: 2px solid var(--pf-c-accent);
    outline-offset: 2px;
}


/* =========================================================================
   GRILLE DE TUILES
   ========================================================================= */

.profile-settings-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--pf-gap);

    padding:
            0
            var(--pf-card-pad-x)
            var(--pf-card-pad-y);
}

.profile-settings-item {
    display: flex;
    align-items: flex-start;

    min-width: 0;

    gap: 14px;

    padding: 16px;

    background: var(--pf-c-surface);

    border: 1px solid var(--pf-c-border);
    border-radius: var(--pf-radius-tile);
}

.profile-settings-item > div:last-child {
    min-width: 0;
}

.profile-settings-item-wide {
    grid-column: 1 / -1;
}


/* =========================================================================
   LIGNES (coordonnées : mail, téléphone)
   ========================================================================= */

.profile-settings-rows {
    display: flex;
    flex-direction: column;

    gap: var(--pf-gap);

    padding:
            0
            var(--pf-card-pad-x)
            var(--pf-card-pad-y);
}

.profile-settings-row {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    background: var(--pf-c-surface);

    border: 1px solid var(--pf-c-border);
    border-radius: var(--pf-radius-tile);
}

.profile-settings-row-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Même fond que les crayons d'en-tête : c'est la même action, elle ne
   change pas d'apparence parce qu'elle est dans une tuile. */

.profile-settings-row .profile-settings-edit {
    width: 38px;
    height: 38px;

    margin-left: auto;
}


/* =========================================================================
   ICÔNES
   ========================================================================= */

.profile-settings-icon,
.profile-settings-phone-flag {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    color: var(--pf-c-accent);

    background: var(--pf-c-surface-accent);

    border-radius: var(--pf-radius-icon);

    font-size: 1rem;
}

.profile-settings-phone-flag {
    background: #fff;

    border: 1px solid var(--pf-c-border);
}


/* =========================================================================
   LIBELLÉ / VALEUR
   ========================================================================= */

.profile-settings-label {
    display: block;

    margin-bottom: 4px;

    color: var(--pf-c-body);

    font-size: var(--pf-fs-label);
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-settings-value {
    display: block;

    color: var(--pf-c-heading);

    font-size: var(--pf-fs-body);
    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;
}

.profile-settings-secondary {
    display: block;

    margin-top: 4px;

    color: var(--pf-c-body);

    font-size: var(--pf-fs-small);
    line-height: 1.5;
}


/* Ligne pays sous l'adresse */

.profile-settings-country {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 8px;

    color: var(--pf-c-body);

    font-size: var(--pf-fs-small);
}


/* Ancien bloc mail / téléphone — conservé au cas où d'autres pages
   l'utilisent encore. */

.profile-settings-single {
    display: flex;
    align-items: center;

    gap: 14px;

    padding:
            0
            var(--pf-card-pad-x)
            var(--pf-card-pad-y);
}

.profile-settings-single-content {
    min-width: 0;
}

.profile-main-badge {
    flex: 0 0 auto;

    margin-left: auto;

    padding: 5px 10px;

    color: var(--pf-c-accent);

    background: var(--pf-c-surface-accent);

    border-radius: 999px;

    font-size: var(--pf-fs-label);
    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================================================
   STATUT
   ========================================================================= */

.profile-status-pill {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin-top: 2px;

    padding: 5px 11px;

    border-radius: 999px;

    font-size: var(--pf-fs-small);
    font-weight: 600;
}

.profile-status-pill.is-active {
    color: var(--pf-c-success);

    background: rgba(25, 122, 51, 0.10);
}

.profile-status-pill.is-inactive {
    color: var(--pf-c-danger);

    background: rgba(180, 35, 24, 0.10);
}


/* =========================================================================
   MESSAGES
   ========================================================================= */

.profile-success-message {
    margin-top: 12px;
    padding: 12px 14px;

    color: #14653c;

    background: #edf8f2;

    border: 1px solid #cfe9dc;
    border-radius: var(--pf-radius-field);

    font-size: var(--pf-fs-small);
    font-weight: 500;
    line-height: 1.5;
}

.profile-settings-row .profile-success-message {
    margin-top: 10px;
}

.profile-password-warning {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 10px;
    padding: 10px 12px;

    color: #7a5300;

    background: #fff8df;

    border: 1px solid #f1dfa0;
    border-radius: var(--pf-radius-field);

    font-size: var(--pf-fs-small);
    line-height: 1.5;
}


/* =========================================================================
   TABLETTE ET MOBILE  (< 768px)
   Une colonne. Le texte courant reste à 15px : ce sont les espacements
   qui se réduisent, jamais la lisibilité.
   ========================================================================= */

@media (max-width: 767.98px) {

    .profile-settings-grid {
        grid-template-columns: 1fr;
    }

    .profile-settings-item-wide {
        grid-column: auto;
    }
}


@media (max-width: 575.98px) {

    :root {
        --pf-card-pad-x: 16px;
        --pf-card-pad-y: 16px;
        --pf-gap: 10px;
    }

    .profile-settings-card {
        border-radius: 14px;
    }

    .profile-settings-header {
        padding: 16px 16px 12px;
    }

    .profile-settings-edit {
        width: 38px;
        height: 38px;
    }

    .profile-settings-item {
        padding: 14px;

        gap: 12px;
    }

    .profile-settings-row {
        padding: 12px 14px;

        gap: 12px;
    }

    .profile-settings-icon,
    .profile-settings-phone-flag {
        width: 38px;
        height: 38px;
    }

    /* Sous 576px, le bouton en bout de ligne volait 50px au texte et
       coupait l'adresse mail en plein milieu. Il passe dans le coin, à
       hauteur du libellé ; seul le libellé lui réserve de la place, la
       valeur récupère toute la largeur. */

    .profile-settings-row .profile-settings-edit {
        position: absolute;

        top: 10px;
        right: 10px;

        width: 36px;
        height: 36px;

        margin-left: 0;
    }

    .profile-settings-row .profile-settings-label {
        padding-right: 44px;
    }
}


/* =========================================================================
   GRANDS ÉCRANS  (>= 1600px)
   Un seul palier, appliqué aux tokens.
   ========================================================================= */

@media (min-width: 1600px) {

    :root {
        --pf-fs-label: 0.8125rem;   /* 13px */
        --pf-fs-small: 0.9375rem;   /* 15px */
        --pf-fs-body: 1rem;         /* 16px */
        --pf-fs-title: 1.125rem;    /* 18px */

        --pf-card-pad-x: 26px;
        --pf-card-pad-y: 24px;
        --pf-gap: 14px;
    }

    .profile-settings-item {
        padding: 18px;
    }

    .profile-settings-icon,
    .profile-settings-phone-flag {
        width: 46px;
        height: 46px;
    }
}


/* =========================================================================
   MODALES
   -------------------------------------------------------------------------
   Les styles des modales de cette page (édition du profil, mot de passe,
   mail, téléphone) ont été déplacés dans /css/modal.css, commun à tout le
   site. Ce fichier ne contient plus que la page elle-même.
   ========================================================================= */