/* ===========================================================
   TFE Membership — Profil complémentaire : bannière + modal
   -----------------------------------------------------------
   Dépend de tfe-membership.css, qui porte le :root des tokens
   (--tfe-accent, --tfe-line, --r-lg…). Déclarée avec cette
   dépendance dans tfe-membership.php.

   Le vocabulaire est celui du DASHBOARD, pas celui du tunnel :
   le plugin porte deux époques (tunnel en #6D2929 à angles
   droits, dashboard en terracotta à grands rayons) et ce modal
   s'ouvre dans le dashboard. Les champs reprennent donc
   .tfe-settings-field, les pills .tfedash-seg, la bannière
   .tfe-upgrade-banner, les boutons .tfe-btn-action/.tfe-btn-tier.
   =========================================================== */

/* ── Bannière de rappel ─────────────────────────────────────
   Reprend .tfe-upgrade-banner (filet gauche accent 3px) en plus
   compact : elle vit en haut du panel et n'est pas le sujet de
   la page. */
.tfe-profile-banner {
    background: var(--tfe-surface-2);
    border: 1px solid var(--tfe-line);
    border-left: 3px solid var(--tfe-accent);
    border-radius: var(--r-lg);
    padding: 1.15rem 1.5rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--sh-soft);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tfe-profile-banner__text { flex: 1 1 260px; min-width: 0; }

.tfe-profile-banner__title {
    margin: 0;
    font-size: 14px;
    color: var(--tfe-ink-2);
}

.tfe-profile-banner__title strong { color: var(--tfe-ink); }

.tfe-profile-banner__sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--tfe-muted);
}

/* ── Voile + panneau ───────────────────────────────────────── */
.tfe-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(40, 40, 40, .55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}

/* L'attribut [hidden] du navigateur pose display:none à la spécificité de la
   feuille par défaut : n'importe laquelle de nos classes portant un `display`
   le bat. Sans cette règle, `element.hidden = true` en JavaScript ne masque
   rien — c'est ce qui laissait le champ libre « Other » visible d'entrée, et
   la bannière de rappel encore affichée après un profil complété. */
.tfe-profile-overlay[hidden],
.tfe-profile-banner[hidden],
.tfe-profile-overlay [hidden] { display: none !important; }

body.tfe-profile-open { overflow: hidden; }

.tfe-profile-panel {
    position: relative;
    background: var(--tfe-white);
    width: 100%;
    max-width: 620px;
    border-radius: var(--r-lg);
    padding: 30px 36px 28px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .15);
    margin: auto;
}

.tfe-profile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--tfe-ink-2);
    cursor: pointer;
    border-radius: var(--r-pill);
}

.tfe-profile-close:hover { background: var(--tfe-surface-2); color: var(--tfe-accent); }
.tfe-profile-close:focus-visible { outline: 2px solid var(--tfe-accent); outline-offset: -2px; }

.tfe-profile-close svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

/* ── En-tête ───────────────────────────────────────────────── */
.tfe-profile-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: var(--tfe-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 8px;
}

.tfe-profile-title {
    font-size: 21px;
    font-weight: 600;
    color: var(--tfe-ink);
    letter-spacing: -.01em;
    margin: 0 0 8px;
    padding-right: 40px;
}

/* La ligne de finalité n'est pas décorative : elle est la contrepartie de la
   demande. Ces six informations sont plus personnelles que ce que le site
   collectait jusqu'ici. */
.tfe-profile-lede {
    font-size: 13px;
    line-height: 1.55;
    color: #58514f;
    margin: 0 0 22px;
    max-width: 52ch;
}

/* ── Sections (reprend .tfe-settings-card h4) ─────────────── */
.tfe-profile-section {
    font-size: 13px;
    font-weight: 600;
    color: var(--tfe-ink);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tfe-line);
}

.tfe-profile-section--later { margin-top: 22px; }

/* ── Champs (reprend .tfe-settings-field) ─────────────────── */
.tfe-profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.tfe-profile-field > label,
.tfe-profile-field__legend {
    font-size: 11px;
    font-weight: 600;
    color: var(--tfe-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tfe-profile-field input[type="text"],
.tfe-profile-field input[type="tel"],
.tfe-profile-field select {
    padding: 11px 14px;
    border: 1px solid var(--tfe-line);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--tfe-ink);
    width: 100%;
    background: var(--tfe-white);
    transition: border-color .15s, box-shadow .15s;
}

.tfe-profile-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a97' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.tfe-profile-field input:focus,
.tfe-profile-field select:focus {
    outline: none;
    border-color: var(--tfe-accent);
    box-shadow: 0 0 0 3px rgba(184, 72, 47, .1);
}

.tfe-profile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ── Téléphone : indicatif + numéro soudés ────────────────── */
.tfe-profile-phone { display: flex; align-items: stretch; }

.tfe-profile-phone select {
    width: 104px;
    flex: 0 0 104px;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    border-right: 0;
    background-color: var(--tfe-surface-2);
    color: var(--tfe-ink-2);
}

.tfe-profile-phone input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ── Retour de saisie ──────────────────────────────────────
   Reprend .tfe-hint et son intention, énoncée dans
   tfe-membership.css : « le texte dit toujours ce qui manque,
   pour qui ne distingue pas le rouge du vert ». La hauteur est
   réservée (min-height) pour que l'apparition du message ne
   pousse pas le champ suivant. */
.tfe-profile-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    min-height: 16px;
    color: #888;
}

.tfe-profile-hint[data-state="invalid"] { color: #b32d2e; }
.tfe-profile-hint[data-state="valid"]   { color: #136c39; }

.tfe-profile-field input[data-state="invalid"] { border-color: #b32d2e; }
.tfe-profile-field input[data-state="valid"]   { border-color: #136c39; }

/* ── Pills de tranche d'âge (reprend .tfedash-seg) ─────────
   Padding réduit de 22 à 18px : les six tranches tiennent
   ainsi sur une ligne dans un panneau de 620px. */
.tfe-profile-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tfe-profile-pill {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--tfe-line);
    background: var(--tfe-white);
    color: var(--tfe-ink-2);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.tfe-profile-pill:hover { border-color: var(--tfe-accent); color: var(--tfe-accent); }
.tfe-profile-pill:focus-visible { outline: 2px solid var(--tfe-accent); outline-offset: 2px; }

.tfe-profile-pill[aria-pressed="true"] {
    background: var(--tfe-accent);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

/* ── Pied ──────────────────────────────────────────────────── */
.tfe-profile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--tfe-line);
    flex-wrap: wrap;
}

.tfe-profile-foot__note {
    font-size: 12px;
    color: var(--tfe-muted);
    margin: 0;
    max-width: 34ch;
    line-height: 1.4;
    flex: 1 1 180px;
}

.tfe-profile-foot__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tfe-profile-btn-later {
    background: var(--tfe-white);
    border: 1px solid var(--tfe-line);
    color: var(--tfe-ink-2);
    padding: 11px 22px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.tfe-profile-btn-later:hover { border-color: var(--tfe-accent); color: var(--tfe-accent); }

/* ── Confirmation ─────────────────────────────────────────── */
.tfe-profile-ok {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--tfe-surface-2);
    border: 1px solid var(--tfe-line);
    border-left: 3px solid #136c39;
    border-radius: var(--r-md);
    padding: 16px 18px;
}

.tfe-profile-ok svg {
    width: 20px; height: 20px; flex: 0 0 20px;
    fill: none; stroke: #136c39; stroke-width: 2; stroke-linecap: round;
    margin-top: 1px;
}

.tfe-profile-ok p { margin: 0; font-size: 14px; color: var(--tfe-ink-2); }
.tfe-profile-ok p + p { margin-top: 6px; font-size: 12px; color: var(--tfe-muted); line-height: 1.45; }

/* Message d'échec réseau : rare, mais il ne doit pas laisser croire que
   c'est enregistré. */
.tfe-profile-error {
    margin: 14px 0 0;
    font-size: 13px;
    color: #b32d2e;
    min-height: 18px;
}

/* ── Mobile ────────────────────────────────────────────────
   Structure, pas rustine. Le défaut corrigé ici a été trouvé en
   regardant le rendu à 390px : la barre d'action était en
   `position: sticky`, et elle se figeait AU-DESSUS de la seconde
   moitié du formulaire — Profession, Organisation et Tranche d'âge
   invisibles derrière elle, avec du vide blanc en dessous. Un
   membre en concluait que le formulaire s'arrêtait aux trois
   champs de contact.

   À la place : le panneau fait exactement la hauteur de l'écran,
   les champs défilent dans leur propre conteneur, et la barre est
   un vrai frère en bas de la colonne flex. Rien ne peut passer
   dessous, et elle est atteignable sans la chercher. */
@media (max-width: 640px) {
    .tfe-profile-overlay {
        padding: 0;
        align-items: stretch;
        /* C'est le conteneur intérieur qui défile désormais, plus le voile. */
        overflow: hidden;
    }

    .tfe-profile-panel {
        max-width: none;
        border-radius: 0;
        /* Hauteur d'écran exacte : dvh d'abord pour tenir compte des barres
           du navigateur mobile, avec vh en repli pour les moteurs anciens. */
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .tfe-profile-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        /* Sans min-height:0, un enfant flex refuse de rétrécir sous la
           taille de son contenu et le défilement intérieur ne prend jamais. */
        min-height: 0;
    }

    .tfe-profile-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 22px 20px 10px;
    }

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

    .tfe-profile-title { font-size: 19px; }

    /* 16px minimum : en dessous, iOS zoome sur le champ au focus et le
       formulaire part hors cadre. */
    .tfe-profile-field input[type="text"],
    .tfe-profile-field input[type="tel"],
    .tfe-profile-field select { font-size: 16px; padding: 13px 14px; }

    .tfe-profile-phone select { width: 96px; flex: 0 0 96px; }

    /* Le contenu défile SOUS la croix : sans fond, elle se superpose au texte
       et peut masquer la cible d'un champ. Un fond opaque et une ombre la
       posent clairement au-dessus. */
    .tfe-profile-close {
        background: var(--tfe-white);
        box-shadow: 0 1px 8px rgba(28, 28, 28, .16);
        z-index: 2;
    }

    .tfe-profile-foot {
        /* Plus de sticky : la barre est un frère en fin de colonne. */
        position: static;
        flex: 0 0 auto;
        margin: 0;
        padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--tfe-line);
        background: var(--tfe-white);
        flex-direction: column;
        align-items: stretch;
    }

    /* La ligne « vous pourrez modifier plus tard » coûte trois lignes sur un
       téléphone et redit ce que l'introduction annonce déjà. */
    .tfe-profile-foot__note { display: none; }

    /* Save au-dessus de « Maybe later » : l'action attendue en premier, alors
       que l'ordre du DOM met le report avant pour la tabulation. */
    .tfe-profile-foot__actions { flex-direction: column-reverse; align-items: stretch; }

    .tfe-profile-foot__actions .tfe-btn-action { min-height: 48px; font-size: 15px; }

    .tfe-profile-btn-later { min-height: 44px; border-color: transparent; color: var(--tfe-muted); }
}