/**
 * gdm-base.css — GenevaDance Members — Design System Base
 * v2.3.0
 *
 * Source unique de vérité pour :
 *   - Alias de variables Kadence (couleurs, typo, espacement)
 *   - Tokens GDM propres (shadows, radius, sémantique couleur)
 *   - Composants partagés : boutons, alertes, formulaires
 *
 * Chargé en premier, avant tous les modules GDM.
 * Aucun style scopé ici — uniquement des tokens et composants génériques.
 */

/* =====================================================================
   1. ALIAS KADENCE → GDM
   On ne duplique pas les valeurs : on pointe vers les tokens du thème.
   Si la palette Kadence change, GDM suit automatiquement.
   ===================================================================== */

:root {

    /* — Couleurs principales — */
    --gdm-primary:          var(--global-palette1);   /* #fd0782 — rose GDM         */
    --gdm-primary-hover:    var(--global-palette2);   /* #fc1e8d — rose survol       */
    --gdm-primary-light:    #fef0f6;                  /* fond rose très léger        */

    /* — Hiérarchie de texte (mapping palette Kadence) — */
    --gdm-text-title:       var(--global-palette3);   /* #000000 — titres            */
    --gdm-text:             var(--global-palette4);   /* #333333 — texte standard    */
    --gdm-text-mid:         var(--global-palette5);   /* #7b7b7b — texte moyen       */
    --gdm-text-muted:       var(--global-palette6);   /* #bdc0c0 — texte discret     */

    /* — Arrière-plans & bordures — */
    --gdm-border:           var(--global-palette7);   /* #dad9d9 — bordure + tag région   */
    --gdm-bg-subtle:        var(--global-palette8);   /* #e8e8e8 — bg tag ville/je cherche */
    --gdm-bg-light:         #f2f2f2; 
    --gdm-white:            var(--global-palette9);   /* #ffffff                      */
    --gdm-dotted-border:    2px dotted var(--gdm-border);

    /* — États sémantiques — */
    --gdm-success:          var(--global-palette11);  /* #69d200 */
    --gdm-success-bg:       #F0FAF3;
    --gdm-success-border:   #c8ecd4;

    --gdm-warning:          var(--global-palette15);  /* #f5a524 */

    --gdm-error:            var(--global-palette13);  /* #ff2700 */
    --gdm-error-bg:         #fff1f0;
    --gdm-error-border:     #ffc9c2;

    --gdm-info:             var(--global-palette12);  /* #0057e7 */
    --gdm-info-bg:          #eff6ff;
    --gdm-info-border:      #bfdbfe;

    /* — Couleurs sémantiques complémentaires — */
    --gdm-green:            #27AE60;
    --gdm-green-light:      #E8F8F0;
    --gdm-blue:             #0057E7;
    --gdm-blue-light:       #BCD5FC;

    /* — Focus — */
    --gdm-border-focus:     var(--global-palette1);

    /* — Typographie — */
    --gdm-font-body:        var(--global-body-font-family);
    --gdm-font-heading:     var(--global-heading-font-family);
    --gdm-font-sm:          var(--global-font-size-small);    /* clamp(.8rem … .9rem)  */
    --gdm-font-md:          var(--global-font-size-medium);   /* clamp(1.1rem … 1.25rem) */
    --gdm-font-lg:          var(--global-font-size-large);    /* clamp(1.75rem … 2rem) */

    /* — Espacement — */
    --gdm-space-xs:         var(--global-xs-spacing);  /* 1em    */
    --gdm-space-sm:         var(--global-sm-spacing);  /* 1.5rem */
    --gdm-space-md:         var(--global-md-spacing);  /* 2rem   */
    --gdm-space-lg:         var(--global-lg-spacing);  /* 2.5em  */
    --gdm-space-xl:         var(--global-xl-spacing);  /* 3.5em  */

    /* — Ombres (non couvertes par Kadence) — */
    --gdm-shadow:           0 2px 12px rgba(0, 0, 0, 0.08);
    --gdm-shadow-hover:     0 6px 24px rgba(0, 0, 0, 0.15);
    --gdm-shadow-sm:        0 1px 6px rgba(0, 0, 0, 0.06);
    --gdm-shadow-card:      0 6px 18px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --gdm-shadow-dropdown:  0 4px 16px rgba(0, 0, 0, 0.10);

    /* — Rayons de bordure (non couverts par Kadence) — */
    --gdm-radius-sm:        8px;
    --gdm-radius:           14px;
    --gdm-radius-lg:        24px;
    --gdm-radius-pill:      50px;
}


/* =====================================================================
   2. BOUTONS — .gdm-btn
   Variantes : --primary  --outline  --danger  --sm
   ===================================================================== */

.gdm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 26px;
    border-radius: var(--gdm-radius-pill);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
    border: 2px solid transparent;
    text-align: center;
    white-space: nowrap;
    font-family: var(--gdm-font-body);
    box-sizing: border-box;
    line-height: 1.4;
}

.gdm-btn:disabled,
.gdm-btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Primary — rose plein */
.gdm-btn--primary,
.gdm-btn--primary:link,
.gdm-btn--primary:visited {
    background: var(--gdm-primary) !important;
    color: #fff !important;
    border-color: var(--gdm-primary) !important;
}

.gdm-btn--primary:hover,
.gdm-btn--primary:focus {
    background: var(--gdm-primary-hover) !important;
    border-color: var(--gdm-primary-hover) !important;
    color: #fff !important;
}

/* Outline — bordure grise */
.gdm-btn--outline,
.gdm-btn--outline:link,
.gdm-btn--outline:visited {
    background: transparent !important;
    color: var(--gdm-text-mid) !important;
    border-color: var(--gdm-border) !important;
}

.gdm-btn--outline:hover,
.gdm-btn--outline:focus {
    border-color: var(--gdm-text) !important;
    color: var(--gdm-text) !important;
}

/* Danger — rouge outline → plein au survol */
.gdm-btn--danger,
.gdm-btn--danger:link,
.gdm-btn--danger:visited {
    background: transparent !important;
    color: var(--gdm-error) !important;
    border-color: var(--gdm-error) !important;
}

.gdm-btn--danger:hover,
.gdm-btn--danger:focus {
    background: var(--gdm-error) !important;
    color: #fff !important;
}

/* Small — taille réduite */
.gdm-btn--sm {
    padding: 7px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}


/* =====================================================================
   3. ALERTES — .gdm-alert
   ===================================================================== */

.gdm-alert {
    padding: 12px 16px;
    border-radius: var(--gdm-radius);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 16px;
    border: 1px solid transparent;
    font-family: var(--gdm-font-body);
}

.gdm-alert--success {
    background: var(--gdm-success-bg);
    color: var(--gdm-success);
    border-color: var(--gdm-success-border);
}

.gdm-alert--error {
    background: var(--gdm-error-bg);
    color: var(--gdm-error);
    border-color: var(--gdm-error-border);
}

.gdm-alert--info {
    background: var(--gdm-info-bg);
    color: var(--gdm-info);
    border-color: var(--gdm-info-border);
}


/* =====================================================================
   4. FORMULAIRES — structure, labels, champs
   ===================================================================== */

.gdm-form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 0;
}

.gdm-form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gdm-text-title);
    margin: 0 0 0.25rem;
    font-family: var(--gdm-font-heading);
}

.gdm-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gdm-form-actions {
    display: flex;
    gap: 12px;
    padding: 1.25rem 0 0.5rem;
    flex-wrap: wrap;
}

/* Labels */
.gdm-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gdm-text);
    font-family: var(--gdm-font-body);
    border-top: 2px dotted var(--gdm-border);
    padding-top: 0.8rem;
}

.gdm-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gdm-text-mid);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gdm-required {
    color: var(--gdm-error);
}

/* Hints */
.gdm-field-hint {
    font-size: 0.8rem;
    color: var(--gdm-text-mid);
    line-height: 1.5;
    margin: 0 !important;
}

.gdm-field-hint--success { color: var(--gdm-success); }
.gdm-field-hint--error   { color: var(--gdm-error); }

/* Champs texte */
.gdm-input,
.gdm-select,
.gdm-textarea {
    padding: 10px 14px;
    border: 1.5px solid var(--gdm-border);
    border-radius: var(--gdm-radius-sm);
    font-size: 0.93rem;
    color: var(--gdm-text);
    background: var(--gdm-white);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--gdm-font-body);
    line-height: 1.5;
}

.gdm-textarea {
    resize: vertical;
    min-height: 80px;
}

.gdm-input:focus,
.gdm-select:focus,
.gdm-textarea:focus {
    outline: none;
    border-color: var(--gdm-border-focus);
    box-shadow: 0 0 0 3px rgba(253, 7, 130, 0.1);
}

/* Taille réduite */
.gdm-input--sm,
.gdm-select.gdm-input--sm {
    padding: 7px 10px;
    font-size: 0.85rem;
}

/* États spéciaux */
.gdm-input--readonly {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-mid);
    cursor: not-allowed;
}

.gdm-input--error {
    border-color: var(--gdm-error);
}

/* Radio & Checkbox */
.gdm-radio-group {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.gdm-radio,
.gdm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gdm-text);
    font-family: var(--gdm-font-body);
}

.gdm-radio input,
.gdm-checkbox input {
    accent-color: var(--gdm-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.gdm-checkbox a {
    color: var(--gdm-primary);
}

/* Alpine cloak */
[x-cloak] { display: none !important; }


/* =====================================================================
   5. TAGS PARTAGÉS — .gdm-tag
   Composant pill utilisé sur : profil-view, profil-edit, événements,
   listings. Défini ici pour être disponible sans charger gdm-profile.css.
   ===================================================================== */

/* Base pill */
.gdm-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 4px 13px;
    border-radius: 20px;
    cursor: default;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1.5;
    text-decoration: none;
    border: 1.5px solid transparent;
    font-family: var(--gdm-font-body);
}

/* Option cliquable — sélection toggle */
.gdm-tag--option {
    cursor: pointer;
    font-size: 0.82rem;
    padding: 4px 12px;
    background: var(--gdm-white);
    border: 1.5px solid var(--gdm-border);
    color: var(--gdm-text);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    user-select: none;
}

.gdm-tag--option:hover {
    border-color: var(--gdm-primary);
    color: var(--gdm-primary);
}

/* Tag sélectionné — état actif par défaut (noir) */
.gdm-tag--active {
    background: var(--gdm-text-title) !important;
    color: var(--gdm-white) !important;
    border-color: var(--gdm-text-title) !important;
}

/* Supprimable (chip avec ×) */
.gdm-tag--removable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--gdm-bg-subtle);
    border: 1.5px solid var(--gdm-border);
    font-size: 0.82rem;
    color: var(--gdm-text);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.gdm-tag--removable:hover {
    background: var(--gdm-error-bg);
    border-color: var(--gdm-error);
    color: var(--gdm-error);
}

/* Tag coloré par TagManager (--tag-bg / --tag-text injectés en style inline) */
.gdm-tag--colored {
    background: var(--tag-bg, var(--gdm-primary-light));
    color:      var(--tag-text, var(--gdm-primary));
    border-color: var(--tag-bg, transparent);
}

a.gdm-tag--colored,
a.gdm-tag--colored:visited {
    color: var(--tag-text, var(--gdm-primary));
    text-decoration: none;
}

a.gdm-tag--colored:hover,
a.gdm-tag--colored:focus {
    opacity: 0.85;
    color: var(--tag-text, var(--gdm-primary));
}


/* =====================================================================
   6. CARD — filet de séparation partagé
   ===================================================================== */

/* Filet pointillé entre chaque carte de listing (dancers, annonces…)
   Défini ici pour être disponible sur toutes les pages de listing. */
.gdm-card {
    border-top: var(--gdm-dotted-border);
    transition: box-shadow 0.6s;
}

.gdm-card:hover {
    box-shadow: var(--gdm-shadow);
    background: #fff;
}


/* =====================================================================
   7. UTILITAIRES
   ===================================================================== */

.gdm-text-muted { color: var(--gdm-text-muted) !important; }
.gdm-text-mid   { color: var(--gdm-text-mid) !important; }
.gdm-text-primary { color: var(--gdm-primary) !important; }


/* =====================================================================
   8. BOUTON PICTO — .gdm-picto
   Pill animé : icône seule au repos → icône + label au survol.
   Taille de base : 60px (standalone).
   Surcharges de taille dans les modules (profil : 52px, card : 44px).
   ===================================================================== */

.gdm-picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    min-width: 60px;
    border-radius: var(--gdm-radius-pill);
    padding: 0 18px;
    border: none;
    background: var(--gdm-primary-light);
    color: var(--gdm-primary);
    cursor: pointer;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--gdm-font-body);
    font-size: 15px;
    font-weight: 400;
    transition: gap .22s ease, padding .22s ease, background .2s, color .2s;
    position: relative;
    z-index: 1;
    box-shadow: none;
    box-sizing: border-box;
}

.gdm-picto:hover {
    background: var(--gdm-primary);
    color: var(--gdm-white);
    gap: 8px;
    padding: 0 24px;
}

.gdm-picto:disabled,
.gdm-picto[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Icon */
.gdm-picto-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.gdm-picto-icon svg {
    width: 22px;
    height: 22px;
}

/* Label — caché par défaut, révélé au survol */
.gdm-picto-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .3s ease, opacity .22s ease;
    opacity: 0;
    line-height: 1;
}

.gdm-picto:hover .gdm-picto-label {
    max-width: 180px;
    opacity: 1;
}

/* ── États sémantiques ── */

/* Amis (accepted) — vert */
.gdm-picto.gdm-icon-btn--accepted {
    background: var(--gdm-green-light);
    color: var(--gdm-green);
}
.gdm-picto.gdm-icon-btn--accepted:hover {
    background: var(--gdm-green);
    color: var(--gdm-white);
}

/* En attente envoyé (sent) — gris passif, non cliquable */
.gdm-picto.gdm-icon-btn--sent {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-muted);
    cursor: default;
    pointer-events: none;
}

/* À répondre (respond) — bleu */
.gdm-picto.gdm-icon-btn--respond {
    background: var(--gdm-blue-light);
    color: var(--gdm-blue);
}
.gdm-picto.gdm-icon-btn--respond:hover {
    background: var(--gdm-blue);
    color: var(--gdm-white);
}

/* Accepter (accept) — vert, alias de accepted */
.gdm-picto.gdm-icon-btn--accept,
.gdm-picto--accept {
    background: var(--gdm-green-light);
    color: var(--gdm-green);
}
.gdm-picto.gdm-icon-btn--accept:hover,
.gdm-picto--accept:hover {
    background: var(--gdm-green);
    color: var(--gdm-white);
}

/* Bloqué — gris passif, non cliquable */
.gdm-picto.gdm-icon-btn--blocked {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-muted);
    cursor: default;
    pointer-events: none;
}

/* Danger / Refuser — fond gris + svg rouge au repos, fond rouge + svg blanc au hover */
.gdm-picto--danger,
.gdm-picto--decline {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-error);
}
.gdm-picto--danger:hover,
.gdm-picto--decline:hover {
    background: var(--gdm-error);
    color: var(--gdm-white);
    border: none;
}

/* More (menu contextuel) — gris, pas d'expand */
.gdm-picto--more {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-mid);
}
.gdm-picto--more:hover {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text);
    gap: 0;
    padding: 0 18px;
}

/* Login — gris, label toujours visible */
.gdm-picto--login {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-mid);
}
.gdm-picto--login .gdm-picto-label {
    max-width: 220px;
    opacity: 1;
}
.gdm-picto--login:hover {
    background: var(--gdm-primary);
    color: var(--gdm-white);
}

/* Ouvert — label toujours visible, pill étendu au repos */
.gdm-picto--open {
    gap: 8px;
    padding: 0 24px;
}
.gdm-picto--open .gdm-picto-label {
    max-width: 180px;
    opacity: 1;
}

/* Message désactivé — gris, non interactif */
.gdm-picto--msg-disabled {
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-muted);
    pointer-events: none;
    cursor: default;
}

/* Mobile — label toujours visible */
@media (max-width: 640px) {
    .gdm-picto {
        gap: 6px;
        padding: 0 18px;
    }
    .gdm-picto-label {
        max-width: 160px;
        opacity: 1;
    }
}



/* =====================================================================
   9. BOUTON NAVIGATION — .gdm-nav-btn
   Pill animé : cercle au repos → expand + label au survol.
   Utilisé dans hub et profil (barre top-right).
   ===================================================================== */

.gdm-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    border-radius: var(--gdm-radius-pill);
    padding: 0 12px;
    border: none;
    background: var(--gdm-bg-subtle);
    color: var(--gdm-text-title);
    cursor: pointer;
    text-decoration: none;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--gdm-font-body);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s, gap .22s ease, padding .22s ease;
    flex-shrink: 0;
    box-sizing: border-box;
}

.gdm-nav-btn:hover {
    background: var(--gdm-text-title);
    color: var(--gdm-white);
    gap: 7px;
    padding: 0 16px;
}

.gdm-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.gdm-nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gdm-nav-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .3s ease, opacity .22s ease;
    line-height: 1;
}

.gdm-nav-btn:hover .gdm-nav-label {
    max-width: 120px;
    opacity: 1;
}

/* Fix position dans gdm-profile-wrap (override Kadence) */
.gdm-profile-wrap .gdm-hub-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 100%;
    gap: 8px;
    padding: 0 0 0.75rem;
}

/* ── Badges menu navigation ─────────────────────────────────────────────── */
.gdm-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--gdm-primary);
    color: var(--gdm-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    margin-left: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Avatar Strip — composant partagé [gdm_visitor_matches] + [gdm_dancer_strip]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.gdm-avatar-strip {
    position: relative;
    overflow: hidden; /* établit le contexte scroll GDM avant Kadence */
    font-family: var(--global-body-font-family) !important;
}

.gdm-avatar-strip *,
.gdm-avatar-strip *::before,
.gdm-avatar-strip *::after {
    box-sizing: border-box;
    font-family: var(--global-body-font-family) !important;
}

/* ── Scroll container ── */
.gdm-avatar-strip-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: scroll; /* scroll forcé comme .gdm-matches-row du hub — plus fiable sur iOS */
    padding: 6px 4px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gdm-border) transparent;
}

.gdm-avatar-strip-scroll::-webkit-scrollbar { height: 4px; }
.gdm-avatar-strip-scroll::-webkit-scrollbar-thumb {
    background: var(--gdm-border);
    border-radius: 2px;
}

/* ── Person item (115px, circulaire, texte sombre) ── */
.gdm-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none !important;
    width: 115px;
}

.gdm-person-avatar {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 400;
    color: var(--gdm-white);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--gdm-bg-subtle);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gdm-person:hover .gdm-person-avatar {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.gdm-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modifier : initiale active (photo privée ou absente) — color héritée du parent */
.gdm-person-avatar.gdm-avatar--initial {
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0;
}

.gdm-person-avatar.gdm-avatar--initial span {
    line-height: 1;
    display: block;
}

.gdm-person-name {
    font-size: 15px;
    font-weight: 400;
    color: var(--gdm-text-title);
    line-height: 1.2;
    max-width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-top: 2px;
}

.gdm-person-role {
    font-size: 13px;
    color: var(--gdm-text);
    line-height: 1.2;
    text-align: center;
}

/* ── Item "Voir tous" ── */
.gdm-person--more .gdm-person-avatar {
    background: var(--gdm-border);
    font-size: 22px;
    font-weight: 700;
    color: var(--gdm-text-mid);
}

/* ── Flèches de navigation (desktop uniquement) ── */
.gdm-strip-arrow {
    position: absolute;
    top: 57px; /* centré sur l'avatar 115px + 6px padding-top */
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gdm-white);
    border: 1px solid var(--gdm-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    transition: background 0.15s;
}

.gdm-strip-arrow:hover {
    background: var(--gdm-bg-subtle) !important;
}

.gdm-strip-arrow[hidden] {
    display: none !important;
}

.gdm-strip-arrow--prev { left: 8px; }
.gdm-strip-arrow--next { right: 8px; }

.gdm-strip-arrow svg {
    width: 16px;
    height: 16px;
    stroke: var(--gdm-text-title);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

@media (max-width: 768px) {
    .gdm-strip-arrow { display: none !important; }
}