/**
 * Mon Profil V2 — lot 3.4.
 *
 * EXTRAITE de « refonte_v2/20 - Maquette/Profile.html ». La maquette écrit une
 * grande partie de cet écran en styles EN LIGNE, dans les attributs : ils ne se
 * relisent pas, ne se surchargent pas et échappent au design system. Tout est
 * remonté ici, avec les jetons.
 *
 * Aucun sélecteur nu. La leçon du lot 1.6 : cette feuille est chargée APRÈS
 * celle du chrome, et un `h3 { … }` y repeindrait toutes les autres pages.
 */

/* ==========================================================================
   BANDEAU DE TÊTE
   ========================================================================== */


.hero-profil-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.profil-photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.profil-photo {
    width: 92px;
    height: 92px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background: var(--gl-grey-150);
}

/* Le crayon de la maquette. C'est un `<label>` et non un `<button>` : au clic
   il ouvre le sélecteur de fichier NATIVEMENT, sans une ligne de script, là où
   la maquette appelle `photoInput.click()` en JavaScript. La cible fait 44px
   même si le rond n'en montre que 28 — la règle tactile du Chapitre 6. */
.profil-photo-edit {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-circle);
    background: white;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    /* Le bandeau écrit en blanc : sans cette couleur, le crayon héritait du
       blanc et disparaissait sur le rond blanc. Constaté à l'écran. */
    color: var(--gl-purple-700);
    cursor: pointer;
}

.profil-photo-edit:hover {
    background: var(--gl-teal-025);
}

/* Le champ est masqué à l'œil MAIS PAS AU CLAVIER : `display: none` le
   retirerait du parcours de tabulation, et la photo deviendrait impossible à
   changer sans souris. Il reste donc dans le flux, réduit à un point, et c'est
   le `<label>` qui le rend visible pour tout le monde. */
.profil-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.profil-photo-input:focus-visible + .profil-photo-envoi,
.profil-photo-input:focus-visible ~ .profil-photo-edit {
    outline: 3px solid white;
    outline-offset: 2px;
}

/* Sans script, c'est LUI qui envoie la photo. Le script le retire — il n'a plus
   d'objet une fois que le choix du fichier déclenche l'envoi. */
.profil-photo-envoi {
    display: block;
    margin: 8px auto 0;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    color: var(--gl-purple-700);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.hero-profil-info h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px;
    color: white;
}

.hero-profil-info p {
    margin: 0 0 10px;
    font-size: 14px;
    opacity: 0.9;
}

.hero-profil-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profil-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.2);
}

/* L'état de la cotisation se lit à la couleur ET au texte : la couleur seule
   ne dit rien à qui ne la distingue pas. */
.profil-badge.badge-ok {
    background: var(--gl-green-050);
    color: var(--gl-green-600);
}

.profil-badge.badge-du {
    background: var(--gl-amber-050);
    color: var(--gl-amber-600);
}

/* ==========================================================================
   LES ONGLETS
   ========================================================================== */

/* Le COLLAGE vient de `.barre-collante` (`chrome.css`), partagé avec la
   Communauté et les filtres des événements. Ne reste ici que le trait. */
.profil-tabs {
    border-bottom: 1px solid var(--gl-grey-150);
}

.profil-tabs-inner {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.profil-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 15px 16px;
    /* Cible tactile du Chapitre 6 : 44px de haut au minimum. */
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-grey-500);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.profil-tab:hover {
    color: var(--gl-teal-600);
}

.profil-tab.active {
    color: var(--gl-teal-600);
    border-bottom-color: var(--gl-teal-600);
}

/* Le menu déroulant du téléphone n'existe qu'en dessous de 768px — voir le
   @media en fin de fichier. */
.profil-tabs-mobile {
    display: none;
    gap: 8px;
    padding: 12px 0;
}

.profil-tabs-select {
    flex: 1;
    min-height: 44px;
    /* 16px : en dessous, iOS zoome à la sélection et ne dézoome jamais. */
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--gl-grey-200);
    border-radius: var(--radius-md);
    background: white;
    color: var(--gl-grey-800);
}

.profil-tabs-go {
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gl-teal-600);
    color: white;
    font-weight: 700;
    cursor: pointer;
}

/* ==========================================================================
   LE CONTENU
   ========================================================================== */

.profil-content {
    background: var(--gl-grey-050);
    padding: 26px 0 44px;
    min-height: 40vh;
}

/* `[hidden]` est posé par le script EN PLUS de la classe : la classe pilote
   l'apparence, l'attribut retire le panneau de la lecture vocale et de la
   tabulation. La règle globale du design system le rend effectif. */
.profil-section {
    display: none;
}

.profil-section.active {
    display: block;
}

.card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

.card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--gl-grey-800);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gl-teal-400);
}

/* ── Les sections repliables du formulaire (Chapitre 6) ─────────────────── */

.profil-bloc {
    border-top: 1px solid var(--gl-grey-125);
    padding: 14px 0 4px;
}

.profil-bloc:first-of-type {
    border-top: none;
    padding-top: 0;
}

.profil-bloc-titre {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gl-grey-600);
}

.profil-bloc-titre::-webkit-details-marker {
    display: none;
}

/* Le chevron remplace le triangle natif, que Chrome retire dès que le sommaire
   n'est plus en `display: list-item` — et il est en `flex` ici. Sans lui, rien
   n'annonce qu'on peut replier la section. */
.profil-bloc-titre::after {
    content: '⌄';
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
    color: var(--gl-grey-400);
    transition: transform var(--transition-fast);
}

.profil-bloc[open] .profil-bloc-titre::after {
    transform: rotate(180deg);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
    padding: 8px 0 14px;
}

/* Le champ, son libellé et son anneau de focus viennent tous du socle commun
   — `chrome.css`. Cette page n'en dit plus rien : ce qu'elle en disait est
   devenu la règle du site, la Communauté et Contact l'ayant demandé aussi. */

/* La note sous un champ est commune à tous les formulaires — `.form-aide`
   dans `chrome.css`. Elle visait ici l'ÉLÉMENT `small`, et attrapait donc au
   passage le message d'erreur, qui en est un aussi. */

/* Un champ qui prend toute la largeur de la grille : une rue tient rarement
   dans une demi-colonne, et « 12 bis avenue du Général-Leclerc » tronqué à
   l'affichage donne l'impression que l'adresse a été mal enregistrée. */
.form-row-large {
    grid-column: 1 / -1;
}

/* Les menus déroulants copiaient ici, une à une, les propriétés des champs de
   saisie voisins — « une bordure ou une hauteur différente ferait croire à deux
   natures de champs là où il n'y en a qu'une », disait le commentaire. Le socle
   commun les traite ensemble : ils ne peuvent plus se désaccorder. */

/* Une valeur qu'on montre sans la laisser modifier — les parrains. Elle est
   dessinée comme un champ désactivé, et non comme du texte courant : sinon rien
   ne dit qu'elle appartient au même formulaire. */
.profil-lecture-seule {
    margin: 0;
    padding: 10px 13px;
    border: 1px dashed var(--gl-grey-200);
    border-radius: var(--radius-md);
    background: var(--gl-grey-050);
    font-size: 15px;
    color: var(--gl-grey-600);
}

/* Un intertitre à l'intérieur d'un bloc : « Adresse personnelle » et « Adresse
   de correspondance » se suivent dans la même section, et rien d'autre ne
   dirait laquelle des deux on est en train de remplir. */
.profil-sous-titre {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gl-grey-450);
}

.profil-sous-titre:first-child {
    margin-top: 0;
}

/* ── Ce que les autres membres voient ───────────────────────────────────── */

.profil-visibilites {
    display: grid;
    gap: 10px;
    padding: 8px 0 14px;
}

/* La case et son libellé forment UNE SEULE cible : le libellé est déjà lié par
   `for`, mais l'aligner ici évite qu'un pouce vise un carré de 16px. */
.profil-visibilite {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* 44px de haut au total avec le remplissage : la cible tactile minimale. */
    padding: 11px 12px;
    background: var(--gl-grey-050);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--gl-grey-700);
    cursor: pointer;
}

.profil-visibilite input {
    /* Les cases ne rétrécissent pas quand le libellé passe sur deux lignes. */
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--gl-teal-500);
}

.profil-visibilite:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.profil-avis {
    margin: 6px 0 0;
    padding: 12px 14px;
    background: var(--gl-purple-050);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.6;
    color: var(--gl-grey-600);
}

.profil-avis a {
    color: var(--gl-purple-600);
    font-weight: 700;
}

/* ── Les boutons d'enregistrement ───────────────────────────────────────── */

.profil-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.btn-enregistrer {
    min-height: 44px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gl-purple-600);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.btn-enregistrer:hover {
    background: var(--gl-purple-700);
}

.profil-lien-detail {
    font-size: 13px;
    font-weight: 700;
    color: var(--gl-purple-600);
}

.profil-vide {
    margin: 0;
    font-size: 14px;
    color: var(--gl-grey-500);
}

.profil-vide a {
    color: var(--gl-purple-600);
    font-weight: 700;
}

/* ==========================================================================
   ONGLET COTISATION
   ========================================================================== */

.cotisation-status {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
}

.cotisation-status.cotisation-ok {
    background: var(--gl-green-050);
}

.cotisation-status.cotisation-due {
    background: var(--gl-amber-050);
}

.cotisation-icon {
    font-size: 26px;
    line-height: 1.2;
    flex-shrink: 0;
}

.cotisation-info h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--gl-grey-800);
}

.cotisation-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gl-grey-600);
}

.cotisation-montant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--gl-grey-050);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 18px;
}

.cotisation-montant-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-grey-600);
}

.cotisation-montant-sous {
    font-size: 12px;
    color: var(--gl-grey-400);
}

.cotisation-montant-valeur {
    font-size: 26px;
    font-weight: 900;
    color: var(--gl-teal-600);
}

.btn-payer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    background: var(--gl-teal-600);
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.btn-payer:hover {
    background: var(--gl-teal-700);
    color: white;
}

.payer-amount {
    font-weight: 900;
}

/* « Annuler » : présent, mais jamais aussi présent qu'« Enregistrer ». Deux
   boutons de même poids feraient hésiter sur celui qui garde le travail. */
.btn-annuler {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    border: 1px solid var(--gl-grey-200);
    border-radius: var(--radius-md);
    color: var(--gl-grey-600);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.btn-annuler:hover {
    background: var(--gl-grey-050);
    color: var(--gl-grey-800);
}

/* Les deux moyens de règlement, côte à côte tant que la place le permet. */
.cotisation-modes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Le virement est SECONDAIRE à l'œil, sans être discret : c'est un vrai choix,
   pas un repli — mais la carte règle en une fois, le virement pas. */
.btn-payer-second {
    background: var(--gl-white);
    color: var(--gl-teal-700);
    border: 2px solid var(--gl-teal-600);
}

.cotisation-securite {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--gl-grey-500);
}

/* ── La barre d'échéance ────────────────────────────────────────────────── */

.echeance-bar {
    background: var(--gl-grey-050);
    border: 1px solid var(--gl-grey-150);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.echeance-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.echeance-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gl-grey-600);
}

.echeance-date {
    font-size: 14px;
    font-weight: 800;
    color: var(--gl-amber-600);
}

.echeance-progress {
    height: 8px;
    background: var(--gl-grey-150);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Le dégradé va du turquoise à l'orangé : le remplissage change de couleur en
   avançant, si bien que l'urgence se lit AUSSI à la teinte, et pas seulement à
   la longueur. */
.echeance-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    background: linear-gradient(to right, var(--gl-teal-400), var(--gl-orange-500));
}

.echeance-sub {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--gl-grey-450);
}

/* Le moyen de paiement, en fin de ligne d'historique. */
.cot-mode {
    font-size: 12px;
    color: var(--gl-grey-500);
    white-space: nowrap;
}

.cotisation-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cotisation-history li {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 11px 0;
    border-bottom: 1px solid var(--gl-grey-125);
    font-size: 14px;
    color: var(--gl-grey-600);
}

.cotisation-history li:last-child {
    border-bottom: none;
}

.cot-year {
    font-weight: 800;
    color: var(--gl-grey-800);
    min-width: 48px;
}

.cot-montant {
    font-weight: 700;
    min-width: 78px;
}

.cot-badge-paid {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--gl-green-600);
}

/* ==========================================================================
   ONGLET ÉVÉNEMENTS
   ========================================================================== */

.event-inscrit {
    display: flex;
    /* LA RANGÉE DOIT POUVOIR REVENIR À LA LIGNE. La liste des invités se place
       en dessous grâce à un `flex-basis: 100%` — sans `wrap`, elle devenait une
       COLONNE DE PLUS, et le titre de l'événement se retrouvait comprimé sur
       cinq lignes de deux mots. Les trois éléments d'origine tiennent sur une
       ligne comme avant : le retour ne sert qu'à ce qui demande toute la
       largeur. */
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gl-grey-125);
}

.event-inscrit:last-child {
    border-bottom: none;
}

/* ── REJOINDRE LA VISIOCONFÉRENCE ───────────────────────────────────────────
   Le seul bouton d'ACTION de la ligne : il mène ailleurs, et le jour venu
   c'est le geste attendu. Il prend donc la couleur d'action, là où le titre
   garde la sienne. */
.event-inscrit-visio {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target-min);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--color-action);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    white-space: nowrap;
}

.event-inscrit-visio:hover {
    background: var(--color-action-hover);
}

/* ── LE TITRE MÈNE À L'ÉVÉNEMENT ────────────────────────────────────────────
   Il garde son poids de titre : souligné au survol seulement, et jamais
   coloré. Une liste de six titres en violet se lirait comme six boutons, alors
   qu'il n'y a qu'une seule action par ligne — annuler — et qu'elle est
   ailleurs. */
.event-inscrit-info h4 a {
    color: inherit;
    text-decoration: none;
}

.event-inscrit-info h4 a:hover,
.event-inscrit-info h4 a:focus-visible {
    text-decoration: underline;
}

.event-passe {
    opacity: 0.62;
}

.event-inscrit-date {
    flex-shrink: 0;
    width: 58px;
    text-align: center;
    background: var(--gl-teal-600);
    color: white;
    border-radius: var(--radius-lg);
    padding: 8px 4px;
}

.event-passe .event-inscrit-date {
    background: var(--gl-grey-400);
}

.event-inscrit-date .day {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.event-inscrit-date .month {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-inscrit-info {
    flex: 1;
    min-width: 0;
}

.event-inscrit-info h4 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gl-grey-800);
}

.event-inscrit-info p {
    margin: 0;
    font-size: 13px;
    color: var(--gl-grey-500);
}

.badge-confirme,
.badge-attente,
.badge-passe {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
}

.badge-confirme {
    background: var(--gl-green-050);
    color: var(--gl-green-600);
}

.badge-attente {
    background: var(--gl-amber-050);
    color: var(--gl-amber-600);
}

.badge-passe {
    background: var(--gl-grey-100);
    color: var(--gl-grey-500);
}

.event-inscrit-annuler {
    flex-shrink: 0;
}

/* Discret mais atteignable : se désinscrire n'est pas l'action qu'on met en
   avant, mais elle ne doit pas se chercher. 44px de haut, cible tactile du
   Chapitre 6. */
.btn-desinscrit {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--gl-grey-200);
    border-radius: var(--radius-md);
    background: white;
    color: var(--gl-grey-500);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.btn-desinscrit:hover {
    border-color: var(--gl-red-600);
    color: var(--gl-red-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   MES INVITÉS, SOUS L'INSCRIPTION QUI LES PORTE

   `.event-inscrit` est une rangée. Sans `flex-basis: 100%`, la liste se
   rangerait comme une colonne de plus, à côté du bouton — et les noms
   passeraient pour un second badge.

   Les 72px reprennent ceux des badges en écran étroit : c'est la largeur du
   bloc de date, et l'alignement dit que ces invités appartiennent à CETTE
   inscription-là, pas à la carte suivante.
   ══════════════════════════════════════════════════════════════════════════ */
.event-inscrit-invites {
    flex-basis: 100%;
    margin: 8px 0 0 72px;
    padding: 0;
    list-style: none;
}

.event-inscrit-invites li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Le tiret dit « rattaché à ce qui précède » sans ajouter un mot. */
.event-invite-nom::before {
    content: '— ';
    color: var(--gl-grey-350);
}

.event-invite-annuler {
    flex-shrink: 0;
}

/* Plus discret que « Se désinscrire » : retirer un invité est un geste de
   second rang. La cible tactile reste celle du Chapitre 6 — 44px de haut,
   obtenus par le remplissage vertical plutôt que par une hauteur imposée qui
   ferait une pastille énorme à côté d'un nom. */
.btn-invite-retirer {
    min-height: 44px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: var(--gl-grey-450);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.btn-invite-retirer:hover,
.btn-invite-retirer:focus-visible {
    border-color: var(--gl-red-600);
    color: var(--gl-red-600);
}

/* ==========================================================================
   ONGLET RGPD
   ========================================================================== */

.rgpd-block {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid var(--gl-grey-150);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

.rgpd-block.checked {
    border-color: var(--gl-teal-400);
    background: var(--gl-teal-025);
}

/* UNE VRAIE CASE, et non le carré décoratif de la maquette : celui-ci n'est ni
   atteignable au clavier, ni annoncé comme une case par un lecteur d'écran. Le
   bloc entier est un `<label>`, donc cliquable sur toute sa surface — ce que le
   `onclick` de la maquette offrait, sans ses inconvénients. */
.rgpd-block {
    cursor: pointer;
}

.rgpd-block input[type="checkbox"] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--gl-teal-600);
    cursor: pointer;
}

.rgpd-jamais {
    margin-top: 6px !important;
    font-size: 12px !important;
    color: var(--gl-grey-450) !important;
    font-style: italic;
}

.rgpd-text h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    color: var(--gl-grey-800);
}

.rgpd-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--gl-grey-600);
}

.rgpd-note {
    margin-top: 18px;
    padding: 13px 16px;
    background: var(--gl-purple-050);
    border-radius: var(--radius-lg);
    font-size: 13px;
    line-height: 1.7;
    color: var(--gl-grey-600);
}

.rgpd-note a {
    color: var(--gl-purple-600);
    font-weight: 700;
}

.card-danger {
    border: 2px solid var(--gl-red-050);
}

.card-title-danger {
    color: var(--gl-red-600);
    border-bottom-color: var(--gl-red-050);
}

.card-danger p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--gl-grey-600);
}

.btn-danger {
    display: inline-block;
    /* C'est un `<button>` depuis que la demande de suppression est un vrai
       envoi et non un lien vers la page Contact : sans ces trois lignes, le
       navigateur lui redonne son fond gris et sa police système. */
    background: none;
    font-family: inherit;
    cursor: pointer;
    min-height: 44px;
    padding: 12px 18px;
    border: 1px solid var(--gl-red-600);
    border-radius: var(--radius-md);
    color: var(--gl-red-600);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

/* La carte de danger porte maintenant un champ de saisie au-dessus du bouton. */
.card-danger .form-row {
    margin: 14px 0;
}

.btn-danger:hover {
    background: var(--gl-red-050);
    color: var(--gl-red-600);
}

/* ==========================================================================
   TÉLÉPHONE — bascule à 768px, celle du Chapitre 6
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Les quatre onglets deviennent un menu déroulant : dans une barre étroite,
       le quatrième n'est atteignable qu'en faisant défiler horizontalement, ce
       que le Chapitre 6 refuse explicitement. */
    .profil-tabs-inner {
        display: none;
    }

    .profil-tabs-mobile {
        display: flex;
    }

    .hero-profil-inner {
        gap: 16px;
    }

    .hero-profil-info h1 {
        font-size: 20px;
    }

    /* Une colonne : deux champs côte à côte sur 360px ne laissent la place ni
       au libellé ni à la saisie. */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* La carte d'événement se couche : le badge passe sous le titre plutôt que
       de comprimer celui-ci à deux mots. */
    .event-inscrit {
        flex-wrap: wrap;
    }

    .event-inscrit-info {
        flex-basis: calc(100% - 72px);
    }

    .badge-confirme,
    .badge-attente,
    .badge-passe {
        margin-left: 72px;
    }

    .card {
        padding: 18px 16px;
    }
}

/* « Changer ma photo » est un `<label>` depuis le 14 septembre 2026 : il désigne
   le même champ que le crayon. Rendu comme un lien — c'est ce qu'il était, et
   ce qu'il fait —, avec le pointeur qui l'annonce et un anneau de focus, puisque
   `tabindex="0"` le garde dans le parcours de tabulation. */
.profil-lien-photo {
    cursor: pointer;
}

.profil-lien-photo:hover {
    text-decoration: underline;
}

.profil-lien-photo:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}