/* ── Portail équipe (front-end, [prodige_equipe]) ────────────────────────────
   Réutilise les variables --pb-primary / --pb-secondary déjà utilisées par le
   widget de réservation public, pour une identité visuelle cohérente avec le
   reste du site plutôt qu'un nouveau système de design. */

.pb-team-wrap, .pb-team-login {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1200px;
    margin: 2rem auto;
    /* --pb-primary-ink : version du bleu/couleur de marque du client GARANTIE lisible en texte sur
       fond clair, quel que soit ce que ce client précis a choisi comme couleur primaire (parfois
       une teinte pastel/claire, pensée pour un logo ou un bouton — pas pour du texte). En mélangeant
       systématiquement avec du noir, un ton déjà foncé change à peine, et un ton pâle est ramené
       à un niveau de contraste sûr — sans jamais imposer une seule couleur fixe qui jurerait avec
       l'identité propre de chaque client. Utilisé partout où --pb-primary sert de couleur de TEXTE
       ou de BORDURE/SÉPARATION (jamais pour les fonds pleins de bouton, qui restent la couleur
       brute du client — voir .pb-team-btn--primary plus bas). */
    --pb-primary-ink: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, black);
    /* Texte de lecture courant : jusqu'ici volontairement hérité du thème du site (v1.73.7), pour
       rester cohérent quel que soit le thème du client — mais Barbara utilise ce portail dans des
       vidéos de démo, où un texte gris clair hérité d'un thème imprévisible lit comme "pâle" à
       l'écran. Couleur neutre foncée imposée par le plugin à la place : lisible sur n'importe quel
       thème, sans dépendre de ses réglages. */
    color: #1c1c1e;
}

/* Icônes SVG (PB_Icons/pb_icon(), voir includes/class-pb-icons.php) insérées dans un bouton/texte
   — s'aligne avec le texte environnant au lieu de flotter trop haut (comportement par défaut d'un
   SVG en ligne). currentColor fait déjà le reste : l'icône prend la couleur du texte qui l'entoure. */
.pb-team-wrap .pb-icon { vertical-align: -3px; flex-shrink: 0; }

/* Le portail est un "espace de travail" distinct du reste du site — un cadre net (fond blanc +
   fine bordure dans la couleur de marque du client) le distingue plutôt que de le laisser flotter
   directement sur le fond du site (rendu plat signalé par Barbara en v1.63.0). Deux tentatives
   précédentes de fond teinté (v1.63.0 puis le dégradé de v1.73.3) ont toutes deux fini par lire
   comme "gris" pour certaines palettes — remplacées ici par la solution la plus universelle :
   fond blanc pur (ne peut jamais mal s'accorder avec quoi que ce soit) + une bordure fine adoucie
   (mélangée à du transparent, jamais pleine opacité) qui reste discrète même avec une couleur de
   marque très saturée — même formule déjà utilisée par .pb-team-login ci-dessous, désormais
   cohérente entre les deux. */
.pb-team-wrap {
    background: #fff;
    /* --pb-primary-ink plutôt que --pb-primary brute (au lieu de 55% de la couleur brute) : une
       couleur de marque pâle (pastel) resterait délavée même à 100% d'elle-même — l'ink, mélangée
       au noir, garantit une bordure nette quelle que soit la couleur choisie par le client, du
       plus clair au plus foncé. Toujours une bordure plus marquée, jamais une ombre plus appuyée
       (Barbara ne veut pas insister sur les ombres). */
    border: 1.5px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 35%, #333);
    border-radius: 18px;
    padding: 26px 28px 34px;
    /* Ombre portée teintée dans la couleur de marque du client (jamais une couleur fixe) —
       c'est elle qui détache le cadre du fond de la page, un simple filet fin sur fond blanc
       reste plat à distance de lecture normale. Même principe que .pb-team-btn--primary
       ci-dessous : color-mix() avec transparent garde l'ombre douce/diffuse (jamais un halo
       plein) tout en s'adaptant automatiquement à n'importe quelle couleur héritée. */
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 10%, transparent),
                0 12px 32px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 18%, transparent);
}

/* ── Connexion ─────────────────────────────────────────────────────────── */
.pb-team-login {
    max-width: 380px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 30%, #333);
    border-radius: 14px;
    padding: 28px 30px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 10%, transparent),
                0 12px 32px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 18%, transparent);
}
.pb-team-login label { font-size: 13px; font-weight: 600; color: #2a2a2a; }
.pb-team-login input[type="text"],
.pb-team-login input[type="password"],
.pb-team-login input[type="email"] {
    width: 100%; padding: 9px 12px; border: 1px solid #ccc; border-radius: 8px;
    font-size: 14px; margin-top: 4px; box-sizing: border-box;
}
.pb-team-login-notice { color: #1e6b38; font-size: 13px; }
.pb-team-login-error  { color: #b91c1c; font-size: 13px; }
.pb-team-lost-password { margin-top: 6px; font-size: 13px; color: #333; }
.pb-team-lost-password summary { cursor: pointer; }

/* ── Boutons partagés ──────────────────────────────────────────────────── */
/* Texte remonté de 13.5px à 15px, padding un peu plus généreux (Barbara : les boutons de tête de
   page, ex. "Nouveau rendez-vous"/"Vue calendrier", lisaient trop petits pour peser à l'écran —
   surtout gênant en vidéo de démo, où chaque bouton doit se lire immédiatement). */
.pb-team-btn {
    display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1.5px solid #bbb;
    background: #f5f5f5; color: #1c1c1e; font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 5%, transparent);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.pb-team-btn:hover  { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 10%, transparent); }
.pb-team-btn:active { transform: translateY(0); box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 6%, transparent); }
.pb-team-btn--primary {
    background: var(--pb-primary, #1a1a2e); color: #fff; border-color: var(--pb-primary, #1a1a2e);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 40%, transparent);
}
.pb-team-btn--danger  { background: #fff; color: #c0392b; border-color: #e0b4ae; }
/* Bouton réduit à une seule icône (ex. 🗑 seule, sans texte) — sans ce modificateur, le padding
   horizontal généreux pensé pour un libellé ("Modifier", "Envoyer"…) laisse l'icône minuscule et
   mal centrée dans un bouton bien trop large pour son contenu. */
.pb-team-btn--icon { padding: 8px 10px; min-width: 34px; text-align: center; line-height: 1; font-size: 15px; }
/* Variante compacte — réservée aux tableaux denses avec plusieurs actions par ligne (ex :
   Rendez-vous, où Confirmer/Annuler/Déplacer/Supprimer/Rembourser tenaient mal sur une seule
   ligne). Le format généreux ci-dessus reste la référence partout ailleurs (boutons uniques
   de tête de page, pensés pour la vidéo de démo) — ce modificateur ne le remplace jamais.
   !important : sans ça, la règle mobile plus bas (.pb-team-btn { padding: 10px 16px }, même
   spécificité) l'emportait sur petit écran — exactement là où la densité pose le plus problème. */
.pb-team-btn--sm { padding: 5px 10px !important; font-size: 12.5px; border-radius: 6px; }

/* ── En-tête + nav ─────────────────────────────────────────────────────── */
.pb-team-header {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px;
}
.pb-team-header-user { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #2a2a2a; }
.pb-team-header-user a { color: var(--pb-primary-ink, #1a1a2e); text-decoration: underline; }

.pb-team-nav {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px;
    border-bottom: 1.5px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333);
    padding-bottom: 10px;
}
.pb-team-nav-item {
    padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 700;
    color: #1c1c1e; text-decoration: none;
    /* Léger fond teinté plutôt que blanc pur — un onglet inactif blanc sur la carte, elle-même
       blanche, ne se détachait pas du tout (signalé par Barbara). Reste très discret : c'est une
       teinte de fond, pas une ombre. */
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #fff);
    /* --pb-primary-ink plutôt que la couleur brute — une bordure "40% d'un pastel" reste pâle,
       l'ink garantit un contour net quelle que soit la couleur de marque choisie. */
    border: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 4%, transparent);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.pb-team-nav-item:hover { transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 8%, transparent); }
.pb-team-nav-item.is-active {
    background: var(--pb-primary, #1a1a2e); color: #fff; border-color: var(--pb-primary, #1a1a2e);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 45%, transparent);
}

/* ── Contenu de section ────────────────────────────────────────────────── */
.pb-team-section h2 { margin: 0 0 6px; font-size: 20px; }
.pb-team-section-intro { color: #333; font-size: 13.5px; margin: 0 0 18px; }
.pb-team-placeholder { padding: 40px 20px; text-align: center; color: #333; font-size: 14px; }
.pb-team-empty { color: #333; font-size: 13.5px; }

.pb-team-card {
    background: #fff; border: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333);
    border-left: 4px solid var(--pb-primary, #1a1a2e);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 3%, transparent), 0 8px 22px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 6%, transparent);
}
/* Cible de retour en haut de tableau après un clic sur un numéro de page (Rendez-vous, Clients,
   Forfaits clients, Caisse — voir #pb-team-table-top dans ces vues) : petite marge pour ne pas
   coller pile sous la barre d'admin WordPress (visible pour un compte admin WP classique). */
#pb-team-table-top { scroll-margin-top: 20px; }
/* Un <a> à l'intérieur d'une carte, sans classe précise (ex. noms De/Pour sur un bon cadeau),
   hérite sinon de la couleur de lien du thème WordPress — souvent la couleur primaire brute, non
   assombrie, illisible pour un client à teinte pastel (signalé par Barbara). Même traitement que
   .pb-team-table a : toujours l'ink, jamais la couleur brute. :not(.pb-team-btn) pour ne pas
   changer la couleur des boutons-liens (Voir, Email…), qui doivent rester neutres comme tous les
   autres .pb-team-btn du portail. */
.pb-team-card a:not(.pb-team-btn) { color: var(--pb-primary-ink, #1a1a2e); font-weight: 700; text-decoration: none; }
/* !important sur color, ici et pour .pb-team-card h4 juste en dessous : sans ça, un thème comme
   Divi impose sa propre couleur de titre (h3/h4 font partie de ses sélecteurs génériques) et
   écrase silencieusement notre couleur de marque — repéré par Barbara sur son vrai site (jamais
   reproduit en local, thème par défaut sans cette règle concurrente). Même raisonnement déjà
   appliqué à .pb-help summary / .pb-help-body h4 ci-dessous — ce sont des titres d'interface
   propres au plugin, pas du contenu de page, ils doivent toujours rester dans la couleur de
   marque du client, jamais dans une couleur fixe ni reprise du thème. */
/* !important sur les 3 propriétés : le thème (Divi) impose sa propre taille/graisse en plus de sa
   couleur pour un h3 — la couleur seule ne suffisait pas, le titre restait fin et pas assez gros
   sur le vrai site malgré la couleur de marque déjà correcte (signalé par Barbara sur la fiche
   d'un événement). */
.pb-team-card h3 { margin: 0 0 12px; font-size: 18px !important; font-weight: 800 !important; color: var(--pb-primary-ink, #1a1a2e) !important; }
/* Sous-titres de section À L'INTÉRIEUR d'une carte (ex. "Questions supplémentaires", "Emails
   automatiques" du formulaire événement) — jusqu'ici sans règle dédiée, donc rendus en noir par
   défaut du navigateur, trop discrets à côté du reste du portail (Barbara : "les titres sont trop
   petits et devraient être en couleur primaire et en gras"). Même principe que .pb-help-body h4
   (déjà colorée) mais sans son style "petite étiquette" (majuscules + bordure gauche) : ici ce
   sont de vrais titres de section, pas des libellés. */
/* font-size/font-weight en !important aussi (pas seulement color) : même constat que .pb-team-card
   h3 ci-dessus, Divi impose sa propre taille/graisse de h4 en plus de sa couleur. */
.pb-team-card h4 { margin: 20px 0 8px; font-size: 15.5px !important; font-weight: 800 !important; color: var(--pb-primary-ink, #1a1a2e) !important; }

/* Variante repliable : <details class="pb-team-card"><summary>…</summary>…</details> — pour un
   panneau d'action ponctuelle (créer un modèle, attribuer un forfait…) qu'on ne veut pas laisser
   ouvert en permanence. Le <summary> reprend le même traitement que .pb-help pour rester cohérent
   visuellement avec les blocs d'aide, ailleurs dans le portail. */
.pb-team-card > summary {
    cursor: pointer; font-weight: 800; font-size: 15px; color: var(--pb-primary-ink, #1a1a2e) !important;
    list-style: none; display: flex; align-items: center; gap: 10px; user-select: none;
    margin: -18px -20px 16px; padding: 14px 20px; border-radius: 14px 14px 0 0;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 20%, #333);
    transition: background .12s ease;
}
.pb-team-card > summary:hover { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, #fff); }
.pb-team-card > summary::-webkit-details-marker { display: none; }
.pb-team-card > summary::before { content: '▶'; font-size: 11px; transition: transform .18s; flex-shrink: 0; }
details.pb-team-card[open] > summary { margin-bottom: 16px; }
details.pb-team-card[open] > summary::before { transform: rotate(90deg); }
.pb-team-card > summary .pb-help-hint {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--pb-primary-ink, #1a1a2e);
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, #fff);
    padding: 3px 11px; border-radius: 20px; white-space: nowrap;
}

.pb-team-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pb-team-inline-form input, .pb-team-inline-form select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 13.5px; }
.pb-team-msg { margin-top: 10px; font-size: 13px; }

/* ── Barre d'outils : onglets + recherche (RDV, Clients...) ───────────────── */
.pb-team-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.pb-team-tabs { display: flex; gap: 6px; }
.pb-team-tab {
    padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none;
    color: #1c1c1e; background: #fff; border: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 4%, transparent);
}
.pb-team-tab.is-active {
    background: var(--pb-primary, #1a1a2e); color: #fff; border-color: var(--pb-primary, #1a1a2e);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 40%, transparent);
}
.pb-team-search-form { display: flex; gap: 8px; }
.pb-team-search-form input {
    padding: 7px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 13.5px;
    background: #fff; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 4%, transparent);
}

/* ── Tableaux de données ───────────────────────────────────────────────── */
/* Chaque <table class="pb-team-table"> est enveloppée dans un <div class="pb-team-table-scroll">
   (voir chaque vue public/views/team/*.php) : sur un écran étroit, c'est ce conteneur qui défile
   horizontalement plutôt que le tableau qui tasse ses colonnes jusqu'à devenir illisible. Le
   overflow-x reste actif à toutes les tailles (inoffensif sur desktop où la table tient déjà). */
.pb-team-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Défilement vertical interne pour une table qui peut devenir longue sur tout un mois (Caisse) —
   même principe que .pb-section-body du tableau de bord, plafond un peu plus haut car ici c'est le
   contenu principal de la page, pas un widget secondaire. */
.pb-team-scroll-tall { max-height: 480px; overflow-y: auto; }
.pb-team-scroll-tall table { margin-bottom: 0; }
/* Contour ENTIER du tableau bien foncé (les 4 côtés, pas juste un filet léger) + le côté gauche
   en couleur primaire sur toute la hauteur (pas juste la ligne d'en-tête) — porté directement par
   le <table> lui-même : avec border-collapse, un bord posé sur le <table> (et non sur des <td>/<th>
   individuels) reste un seul tracé continu du haut en bas, sans jointure possible (Barbara). */
.pb-team-table {
    width: 100%; border-collapse: collapse; margin-bottom: 14px; background: #fff; border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 35%, #222);
    border-left: 4px solid var(--pb-primary, #1a1a2e);
    overflow: hidden; box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 3%, transparent), 0 6px 18px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 5%, transparent);
}
/* En-tête : fond coloré + ligne de séparation foncée continue (bord à bord — contrairement aux
   lignes entre rangées ci-dessous, volontairement en retrait) — même traitement que les tableaux
   du tableau de bord (Barbara : même design de tableau partout, rdv/clients/forfaits/caisse/bons
   cadeaux/billetterie partagent cette classe). */
.pb-team-table th { text-align: left; font-size: 12px; color: var(--pb-primary-ink, #1a1a2e); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 12px 12px; background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #fdfaf5); border-bottom: 2px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333); }
.pb-team-table td {
    padding: 10px 12px; font-size: 14px; vertical-align: top; position: relative;
}
/* Séparation entre lignes : un pseudo-élément par <td>, sur TOUTES les colonnes (y compris celles
   du milieu) plutôt qu'un mélange bordure native + pseudo-élément. Avoir posé ce pseudo-élément
   sur le <tr> lui-même (tentative précédente) casse l'alignement des colonnes : un moteur de rendu
   de tableau peut le traiter comme une cellule anonyme à part entière et décaler toutes les vraies
   cellules d'une colonne — exactement le rendu "bizarre" remonté par Barbara (colonnes décalées
   d'une rangée sur deux). Un pseudo-élément par <td> reste sans risque : un <td> est déjà une
   cellule, il n'y a rien à générer autour de lui. Toutes les colonnes utilisant le même mécanisme
   (jamais un bord natif à côté d'un pseudo-élément), leurs segments se rejoignent pixel pour pixel,
   sans le fin liseré plus clair qui donnait l'impression d'une ligne "coupée" au milieu. Seules les
   colonnes d'extrémité sont resserrées (16px), pour que la ligne s'arrête avant les bords du
   tableau plutôt que d'aller pile jusqu'à eux — comme .mc-row (tableau de bord). :not(:first-child)
   plutôt que :not(:last-child) : la première ligne est toujours sans ambiguïté la première rangée
   réelle, contrairement à la dernière si une ligne masquée la suit (ex. panneau de motif
   d'annulation en RDV). --pb-primary-ink (mélangée à #333) plutôt que la couleur brute du client :
   une teinte pastel à elle seule reste quasi invisible quel que soit le pourcentage ; l'ink
   garantit une ligne bien visible à l'écran comme en vidéo, du client le plus pâle au plus foncé.
   Reste 1px : plus foncé, jamais plus épais (consigne explicite de Barbara). */
.pb-team-table tbody tr:not(:first-child) td::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333);
}
.pb-team-table tbody tr:not(:first-child) td:first-child::before { left: 16px; }
.pb-team-table tbody tr:not(:first-child) td:last-child::before { right: 16px; }
.pb-team-table tbody tr { transition: background .1s ease; }
.pb-team-table tbody tr:hover { background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 28%, #fff); }
.pb-team-table a { color: var(--pb-primary-ink, #1a1a2e); font-weight: 700; text-decoration: none; }
.pb-team-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* La colonne "Collaborateur"/"Ressource" (texte court : un nom ou "—") héritait de l'auto-layout
   du tableau une largeur comparable à la colonne actions (2 à 5 boutons), qui se retrouvait donc
   à l'étroit et empilait ses boutons sur 3 lignes dès une largeur tablette (768px) — avant même le
   passage en cartes empilées (≤640px, voir plus bas). Plafonner cette colonne redonne cette place
   à la colonne actions sans agrandir le tableau ni provoquer de défilement horizontal. */
.pb-team-col-tight { max-width: 90px; }

/* Pastille de statut : fond plein (pas juste un contour à 10% de teinte, trop pâle même avec un
   texte foncé — Barbara, "pareil pour le vert") + texte blanc — beaucoup plus affirmé à l'écran,
   y compris en vidéo de démo. La couleur vient toujours d'un inline style par vue (statuts fixes
   vert/orange/rouge, indépendants de la couleur de marque du client — ce sont des couleurs
   sémantiques universelles, pas des couleurs de marque, donc pas de souci d'adaptation ici). */
.pb-team-badge {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: #fff;
    background: #6b7280; /* repli neutre si jamais utilisée sans background inline */
}
/* Variante compacte — même raison que .pb-team-btn--sm ci-dessus (tableau Rendez-vous). */
.pb-team-badge--sm { padding: 2px 9px; font-size: 11px; }

/* Masquée par défaut (desktop) : la liste y tient déjà dans une zone à défilement propre
   (.pb-team-scroll-tall, max-height 480px avec sa propre barre de défilement) — une pagination
   numérotée en plus n'apporte rien, et pour les listes déjà groupées par mois (Caisse, RDV →
   Historique) fait double emploi avec les onglets de mois. Réaffichée seulement sur la version
   responsive (cartes empilées, ≤900px, voir plus bas) où cette zone à défilement disparaît et où
   une liste longue devient réellement difficile à parcourir sans repère de page (demande
   explicite de Barbara). */
.pb-team-pagination { display: none; gap: 4px; margin-bottom: 20px; }
/* Flèches Précédent/Suivant (voir PB_Team::render_pagination_arrows()) — remplace une pagination
   par numéros de page, qui pouvait rester bloquée sur le contenu déjà en cache de la 1ʳᵉ page
   avec certains plugins de cache (LiteSpeed Cache notamment, signalé par Barbara). */
.pb-team-pagination--arrows { align-items: center; }
.pb-team-pagination-status { font-size: 13px; color: #333; font-weight: 600; }
.pb-team-pagination--arrows [aria-disabled="true"] { opacity: .35; pointer-events: none; cursor: default; }

/* ── Cartes statistiques (Caisse) ──────────────────────────────────────── */
.pb-team-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pb-team-stat {
    background: #fff; border: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 20%, #333);
    border-top: 3px solid var(--pb-primary, #1a1a2e); border-radius: 10px; padding: 12px 14px;
    /* Même intensité que .pb-kpi (tableau de bord) — cette carte avait une ombre nettement plus
       faible (0 4px 12px 5% vs 0 8px 20px 6% ci-dessous), ce qui la faisait paraître plate à côté
       du reste du portail (signalé par Barbara sur la page Caisse). */
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 4%, transparent), 0 8px 20px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 6%, transparent);
}
.pb-team-stat-label { font-size: 11px; color: #333; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pb-team-stat-value { font-size: 18px; font-weight: 700; margin-top: 4px; }

.pb-team-client-contact { color: #333; font-size: 13.5px; }
#pb-team-client-notes { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 13.5px; font-family: inherit; margin-bottom: 8px; }

/* ── Notes (dictée vocale / message vocal) ─────────────────────────────── */
.pb-team-note-content { font-size: 13.5px; line-height: 1.7; color: #333; margin-top: 8px; }
.pb-team-note-content a { color: var(--pb-primary-ink, #1a1a2e); }
.pb-team-btn.is-recording { background: #fdeaea; border-color: #e0b4ae; color: #b91c1c; }

.pb-team-member-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pb-team-member-email { color: #333; font-size: 12.5px; margin-left: 8px; }
.pb-team-member-email a { color: var(--pb-primary-ink, #1a1a2e); text-decoration: underline; }

.pb-team-perm-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pb-team-perm-table th { text-align: left; font-size: 12px; color: #333; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; }
.pb-team-perm-table td { padding: 6px 8px; font-size: 14px; position: relative; border-top: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333); }
.pb-team-perm-table tr:first-child td { border-top: none; }
.pb-team-perm-table td:first-child, .pb-team-perm-table td:last-child { border-top: none; }
.pb-team-perm-table tr:not(:first-child) td:first-child::before,
.pb-team-perm-table tr:not(:first-child) td:last-child::before {
    content: ''; position: absolute; top: 0; height: 1px;
    background: color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 25%, #333);
}
.pb-team-perm-table tr:not(:first-child) td:first-child::before { left: 16px; right: 0; }
.pb-team-perm-table tr:not(:first-child) td:last-child::before   { left: 0; right: 16px; }
.pb-team-perm-table th:not(:first-child), .pb-team-perm-table td:not(:first-child) { text-align: center; width: 90px; }
/* Cases à cocher un peu plus grandes qu'au défaut du navigateur — cible tactile trop petite
   sinon sur un écran de téléphone (permissions, audience des notes...). */
.pb-team-perm-table input[type="checkbox"],
.pb-team-radio-inline input { width: 18px; height: 18px; vertical-align: middle; }

.pb-team-save-msg { margin-left: 10px; font-size: 13px; color: #1e6b38; }

/* ── Formulaire empilé (Notes...) — labels au-dessus des champs, pensé mobile d'emblée
   plutôt qu'un tableau à 2 colonnes (illisible sur un petit écran). ─────────────────── */
.pb-team-field { margin-bottom: 14px; }
.pb-team-field label { display: block; font-size: 13px; font-weight: 600; color: #2a2a2a; margin-bottom: 4px; }
.pb-team-field input[type="text"], .pb-team-field input[type="email"], .pb-team-field input[type="tel"],
.pb-team-field input[type="date"], .pb-team-field input[type="number"],
.pb-team-field textarea, .pb-team-field select {
    width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc;
    border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
/* Champ "titre" (nom d'un événement, d'un programme…) — le champ le plus important du formulaire,
   traité comme un titre plutôt qu'un champ ordinaire parmi d'autres : libellé et saisie en couleur
   primaire et en gras (Barbara : "le titre de l'événement est trop petit"). */
.pb-team-field--headline label { font-size: 14px; font-weight: 800; color: var(--pb-primary-ink, #1a1a2e); }
.pb-team-field--headline input[type="text"] {
    font-size: 18px; font-weight: 700; color: var(--pb-primary-ink, #1a1a2e);
    border-color: var(--pb-primary, #1a1a2e); border-width: 1.5px;
}
.pb-team-radio-inline { display: inline-block; margin: 2px 14px 6px 0; font-weight: 400; font-size: 13.5px; }
.pb-team-hint { margin: 4px 0 0; font-size: 11.5px; color: #333; }

/* ── Bloc d'aide repliable ("ℹ️ Aide") — même contenu explicatif que le back-office,
   porté ici puisque toute la gestion se fait désormais depuis ce portail. ────────────── */
/* Fond blanc franc (au lieu d'une teinte secondaire trop proche de celle du fond du portail
   lui-même, .pb-team-wrap — les deux étaient presque indiscernables) + bordure/ombre renforcées
   pour que le bloc entier se détache nettement, et un bandeau de titre distinct pour le repérer
   au premier coup d'œil (signalé peu visible, sur toutes les sections). */
.pb-help {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 30%, #333);
    border-left: 5px solid var(--pb-primary, #1a1a2e);
    border-radius: 12px; margin-bottom: 20px; overflow: hidden;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 5%, transparent), 0 10px 24px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 9%, transparent);
}
.pb-help summary {
    padding: 14px 18px; cursor: pointer; font-weight: 800; font-size: 14.5px;
    list-style: none; display: flex; align-items: center; gap: 10px; user-select: none;
    /* !important : ce sont des titres d'interface propres au plugin (pas du contenu de page),
       ils doivent toujours rester dans la couleur de marque du client — jamais repris par une
       règle h4/summary du thème du site (contrairement au texte de lecture courant, voir
       .pb-team-wrap en v1.73.7, qui lui doit hériter du thème). */
    color: var(--pb-primary-ink, #1a1a2e) !important;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, #fff);
    transition: background .12s ease;
}
.pb-help summary:hover { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, #fff); }
.pb-help summary::-webkit-details-marker { display: none; }
.pb-help summary::before { content: '▶'; font-size: 11px; transition: transform .18s; flex-shrink: 0; }
.pb-help[open] summary::before { transform: rotate(90deg); }
/* "Cliquer pour afficher / masquer" en pastille colorée bien visible plutôt qu'un texte gris
   discret — c'est le seul indice que la section entière est cliquable. */
.pb-help summary .pb-help-hint {
    margin-left: auto; font-size: 12px; font-weight: 700; color: var(--pb-primary-ink, #1a1a2e);
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, #fff);
    padding: 3px 11px; border-radius: 20px; white-space: nowrap;
}
.pb-help-body { padding: 4px 20px 18px; border-top: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 20%, #333); font-size: 13.5px; line-height: 1.75; color: #1c1c1e; }
.pb-help-body h4 {
    margin: 16px 0 7px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--pb-primary-ink, #1a1a2e) !important; font-weight: 800;
    padding-left: 9px; border-left: 3px solid var(--pb-primary, #1a1a2e);
}
.pb-help-body strong { color: var(--pb-primary-ink, #1a1a2e) !important; }
.pb-help-body ul, .pb-help-body ol { margin: 0; padding-left: 1.2rem; }
.pb-help-body p { margin: 8px 0 0; }
.pb-help-body .pb-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 10px; }
.pb-help-body .pb-help-tip { margin-top: 12px; background: #fff8e6; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; }

/* ══ Mobile — usage principal attendu de l'espace équipe, chaque bloc ci-dessous a été
   pensé pour rester utilisable sur un téléphone, pas seulement "ne pas casser". ══════════ */
@media (max-width: 640px) {
    .pb-team-wrap, .pb-team-login { margin: 1rem; }
    .pb-team-login { padding: 22px 20px; max-width: none; }

    /* En-tête : bascule en colonne, déconnexion toujours facile d'accès sous le nom */
    .pb-team-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pb-team-header-user { width: 100%; justify-content: space-between; }

    /* Nav : rangée qui défile horizontalement plutôt que de s'empiler sur plusieurs lignes
       tassées — plus rapide à parcourir du pouce qu'une grille de pastilles. L'onglet actif est
       recentré dans cette zone au chargement (voir team.js) : sans ça, avec beaucoup d'onglets,
       cliquer sur l'un des derniers (ex. Forfaits) rechargeait la page avec la barre revenue à son
       tout début — on ne voyait plus ni l'onglet actif, ni où on se trouvait (signalé par Barbara). */
    .pb-team-nav {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem;
    }
    .pb-team-nav-item { flex-shrink: 0; }

    /* Barre d'outils (onglets + recherche) : empilée, recherche pleine largeur */
    .pb-team-toolbar { flex-direction: column; align-items: stretch; }
    .pb-team-search-form { width: 100%; }
    .pb-team-search-form input { flex: 1 1 auto; min-width: 0; }

    /* Formulaires en ligne (ajouter un membre, une recette...) : un champ par ligne,
       plus simple à remplir avec un clavier tactile qu'une rangée compressée. */
    .pb-team-inline-form { flex-direction: column; align-items: stretch; }
    .pb-team-inline-form input, .pb-team-inline-form select, .pb-team-inline-form button { width: 100%; }

    /* Titre de section + bouton(s) d'action (ex. "Rendez-vous" + "Nouveau rendez-vous") — sur
       desktop ils sont côte à côte (display:flex en ligne, posé inline dans chaque vue), mais sur
       mobile un bouton juste à côté d'un titre long se retrouve coincé/pas assez visible — passe
       en colonne, bouton bien en dessous du titre (demande explicite de Barbara sur RDV, même
       gabarit <h2> réutilisé par toutes les sections). !important : l'alignement vient d'un style
       inline (display/align-items posés directement dans chaque vue PHP), plus spécifique qu'une
       règle externe normale. */
    .pb-team-section h2 { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

    /* Blocs d'aide/accordéons ("ℹ️ Comment ça marche ?", "➕ Attribuer un forfait"...) : le titre et
       la pastille "Cliquer pour afficher / masquer" tenaient sur une seule ligne qui débordait sur
       un écran étroit (signalé par Barbara — pas responsive). Plutôt que de retirer complètement
       la pastille (Barbara : il faut quand même garder une petite indication), elle repasse à la
       ligne sous le titre (flex-wrap) et devient plus compacte pour ne jamais déborder même sur un
       titre déjà long. */
    .pb-help summary, .pb-team-card > summary { flex-wrap: wrap; }
    .pb-help-hint { margin-left: 0 !important; font-size: 10.5px !important; padding: 2px 8px !important; }

    .pb-team-member-head { flex-direction: column; align-items: flex-start; }
    .pb-team-toolbar, .pb-team-tabs { flex-wrap: wrap; }

    /* Cibles tactiles un peu plus généreuses qu'au clavier/souris */
    .pb-team-btn { padding: 10px 16px; }
}

/* ── Tableaux → cartes empilées : mobile ET tablette portrait ───────────────────────────────
   Seuil séparé (900px, pas 640px) : une tablette portrait (768px, iPad par ex.) n'est pas assez
   large pour ces tableaux à 6-7 colonnes (RDV, Clients, Forfaits, Caisse, Historique — tous
   .pb-team-table) sans défilement horizontal, alors qu'elle est bien assez large pour tout le
   reste (nav, en-tête, formulaires) qui reste donc au seuil 640px ci-dessus. Au-delà de 900px
   (tablette paysage 1024px comprise), le tableau normal retrouve largement sa place. Mêmes règles
   que pour le mobile : liste de cartes empilées plutôt qu'un double défilement horizontal ET
   vertical, peu praticable au doigt (signalé par Barbara). L'intitulé de chaque valeur
   (attr(data-label)) est posé sur chaque <td> par team.js au chargement à partir du texte des
   <th> — aucune vue PHP à modifier une par une. .pb-team-perm-table (Équipe, Ressources) garde le
   défilement horizontal classique : ses colonnes sont des cases à cocher, un empilement en cartes
   n'apporterait rien. */
@media (max-width: 900px) {
    .pb-team-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem 14px; padding: 0 1rem; }
    .pb-team-table-scroll .pb-team-table,
    .pb-team-table-scroll .pb-team-perm-table { margin-bottom: 0; }
    .pb-team-perm-table { min-width: 380px; }

    /* Un tableau long plafonné en hauteur (.pb-team-scroll-tall) imbriquait un 2e ascenseur dans
       la page déjà scrollable — on laisse simplement la page entière défiler. */
    .pb-team-scroll-tall { max-height: none; overflow-y: visible; }

    /* Réaffichée ici seulement : sans la zone à défilement propre du desktop (masquée juste
       au-dessus), une longue liste de cartes redevient difficile à parcourir — voir la note sur
       .pb-team-pagination plus haut dans ce fichier. */
    .pb-team-pagination { display: flex; }

    .pb-team-table { min-width: 0; width: 100%; border: none; border-left: none; box-shadow: none; border-radius: 0; background: transparent; overflow: visible; }
    .pb-team-table thead { display: none; }
    .pb-team-table, .pb-team-table tbody, .pb-team-table tr { display: block; width: 100%; }
    .pb-team-table tr {
        display: block; margin-bottom: 14px; border-radius: 10px; overflow: hidden; background: #fff;
        border: 2px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 35%, #222);
        border-left: 4px solid var(--pb-primary, #1a1a2e);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 3%, transparent);
    }
    .pb-team-table tbody tr:last-child { margin-bottom: 0; }
    .pb-team-table td {
        display: block; padding: 9px 14px; font-size: 13.5px;
        border-top: 1px solid color-mix(in srgb, var(--pb-primary-ink, #1a1a2e) 15%, #333);
    }
    .pb-team-table td:first-child { border-top: none; }
    /* Colonne actions (boutons) : garde son display:flex propre plutôt que le display:block
       ci-dessus, sinon les boutons se recopilent chacun sur leur ligne au lieu de s'enrouler
       proprement. Sur une carte pleine largeur (tablette comme mobile), il y a largement la place
       pour 2-3 boutons compacts par ligne plutôt que la colonne étroite du mode tableau. */
    .pb-team-table td.pb-team-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    /* Étiquette de colonne au-dessus de la valeur — remplace le pseudo-élément "ligne de séparation
       entre rangées" du mode desktop (même propriété ::before, incompatible sinon), inutile ici
       puisque chaque rangée est déjà sa propre carte avec sa propre bordure. */
    .pb-team-table td::before,
    .pb-team-table tbody tr:not(:first-child) td::before {
        content: attr(data-label); position: static; display: block; height: auto; background: none;
        margin-bottom: 3px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
        letter-spacing: .04em; color: var(--pb-primary-ink, #1a1a2e);
    }
    .pb-team-table td:not([data-label])::before,
    .pb-team-table td[data-label=""]::before { content: none; margin: 0; }
}

/* ── Vue calendrier (Rendez-vous → Vue calendrier) — agenda du jour sur mobile ───────────────
   La grille 7 colonnes (voir public/views/team/rdv-calendar.php) reste la référence sur desktop —
   au-delà de cette largeur, la remplacer plutôt que forcer un défilement horizontal peu pratique :
   un jour à la fois, sous forme de liste, comme la plupart des agendas mobiles. Le contenu de
   #pb-cal-agenda-list est généré en JS (voir rdv-calendar.php), cette feuille ne fait que le
   présenter et gérer la bascule grille/agenda selon la largeur d'écran. */
.pb-cal-mobile-only { display: none; }

.pb-cal-day-tabs {
    display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin-bottom: 12px;
}
.pb-cal-day-tab {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 42px; padding: 6px 4px; border-radius: 8px; border: 1.5px solid #ddd;
    background: #f9f9fa; color: #333; font-family: inherit; cursor: pointer;
}
.pb-cal-day-tab span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #333; }
.pb-cal-day-tab strong { font-size: 15px; }
.pb-cal-day-tab.is-active {
    background: var(--pb-primary, #1a1a2e); border-color: var(--pb-primary, #1a1a2e);
}
.pb-cal-day-tab.is-active span,
.pb-cal-day-tab.is-active strong { color: #fff !important; }

.pb-cal-agenda-item {
    display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid #ececec;
    border-left: 4px solid #4285f4; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
    cursor: pointer;
}
.pb-cal-agenda-time { flex: 0 0 auto; font-weight: 800; font-size: 13.5px; color: var(--pb-primary-ink, #1a1a2e); min-width: 42px; }
.pb-cal-agenda-body { flex: 1; min-width: 0; }
.pb-cal-agenda-service { font-weight: 700; font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-cal-agenda-meta { font-size: 12px; color: #333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-cal-agenda-empty { color: #333; font-size: 13px; padding: 10px 2px; }

@media (max-width: 820px) {
    .pb-cal-mobile-only { display: block; }
    .pb-cal-grid-scroll { display: none; }
}