/*
 * public/css/app.css
 *
 * Identité visuelle du club (cohérente avec le module CA existant) :
 * noir #16140F, or #C9A227, or-texte accessible #8A6914.
 *
 * Signature : la "corde de ring" (.corde), un triple filet fin doré
 * utilisé comme séparateur entre les sections, au lieu d'une simple
 * ligne générique.
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --noir: #16140F;
    --or: #C9A227;
    --or-texte: #8A6914;
    --creme: #F7F4EC;
    --carte-fond: #FFFFFF;
    --ligne: #E4E0D4;
    --texte-clair: #6B6858;

    --vert-fond: #E6F2EC;
    --vert-texte: #2F6F4E;
    --ambre-fond: #FBF1D8;
    --ambre-texte: #8A6914;
    --rouge-fond: #F7E6E3;
    --rouge-texte: #A6402F;

    --rayon: 12px;
    --ombre: 0 1px 3px rgba(22, 20, 15, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--creme);
    color: var(--noir);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 12px;
    color: var(--noir);
}

h2 {
    font-size: 18px;
    font-weight: 600;
    padding: 0 16px;
}

a {
    color: var(--or-texte);
}

/* --- Signature : la corde de ring ---------------------------------- */
.corde {
    height: 7px;
    margin: 4px 0 20px;
    background:
        linear-gradient(var(--or), var(--or)) 0 0/100% 1px no-repeat,
        linear-gradient(var(--or), var(--or)) 0 3px/100% 1px no-repeat,
        linear-gradient(var(--or), var(--or)) 0 6px/100% 1px no-repeat;
    opacity: 0.55;
}

/* --- En-tête (accueil / historique) --------------------------------- */
.entete-accueil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--noir);
    color: var(--creme);
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.entete-accueil a {
    color: var(--or);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.entete-accueil span {
    font-weight: 600;
    flex: 1;
}

.photo-profil {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--or);
    flex-shrink: 0;
}

.logos-discipline {
    display: flex;
    gap: 4px;
}

.logo-discipline {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--noir);
    background: var(--or);
    flex-shrink: 0;
}

/* --- Bouton notifications (dans l'en-tête noire) ------------------------ */
.bouton-entete {
    background: transparent;
    color: var(--or);
    border: 1px solid var(--or);
    font-size: 13px;
    padding: 6px 10px;
    white-space: nowrap;
}

.bouton-entete:hover:not(:disabled) {
    background: var(--or);
    color: var(--noir);
}

.bouton-entete.etat-actif {
    opacity: 0.6;
    border-style: dashed;
    cursor: default;
}

/* Cloche barrée quand les notifications sont actives (bouton "Désactiver") :
   la ligne ne traverse que l'icône, pas tout le texte du bouton. */
.bouton-entete.etat-actif .icone-cloche {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* --- Bandeau compte à rebours ---------------------------------------- */
.bandeau-ouverture {
    margin: 16px;
    padding: 14px 16px;
    background: var(--noir);
    color: var(--creme);
    border-radius: var(--rayon);
    border: 1px solid var(--or);
}

.bandeau-ouverture p {
    margin: 0;
}

.bandeau-ouverture p:first-child {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--or);
    margin-bottom: 4px;
}

.compte-a-rebours {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Listes de cours / historique -------------------------------------- */
.liste-cours,
.liste-historique {
    padding: 0 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carte-cours {
    background: var(--carte-fond);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 14px;
}

.carte-cours-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.carte-cours-entete strong {
    font-size: 15px;
}

.carte-cours-meta {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--texte-clair);
}

.carte-cours-places {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--texte-clair);
}

.carte-cours-lieu {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--texte-clair);
}

.carte-cours-lieu-bouton {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--ligne);
    text-underline-offset: 2px;
}

.carte-cours-lieu-bouton:hover {
    color: var(--or-texte);
}

.lien-details-cours {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 12px;
}

.carte-cours-action button {
    width: 100%;
}

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-confirme {
    background: var(--vert-fond);
    color: var(--vert-texte);
}

.badge-attente {
    background: var(--ambre-fond);
    color: var(--ambre-texte);
}

/* --- Boutons ----------------------------------------------------------- */
button {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

button:disabled {
    opacity: 0.5;
    cursor: default;
}

.bouton-inscrire {
    background: var(--noir);
    color: var(--or);
}

.bouton-inscrire:hover:not(:disabled) {
    opacity: 0.85;
}

.bouton-desinscrire {
    background: transparent;
    color: var(--rouge-texte);
    border: 1px solid var(--rouge-texte);
}

.bouton-desinscrire:hover:not(:disabled) {
    background: var(--rouge-fond);
}

/* Lien mailto: "Prévenir le CA de mon absence" — visuellement un
   bouton (comme .bouton-inscrire/.bouton-desinscrire), mais reste un
   <a>, pas un <button>. Palette ambre plutôt que noir/rouge : c'est
   une action "à signaler", pas une inscription/désinscription. */
.bouton-prevenir-absence {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    background: var(--ambre-fond);
    color: var(--ambre-texte);
    border: 1px solid var(--ambre-texte);
    transition: opacity 0.15s ease;
}

.bouton-prevenir-absence:hover {
    opacity: 0.85;
}

/* --- États (chargement / vide / erreur) --------------------------------- */
.etat-chargement,
.etat-vide,
.etat-erreur {
    padding: 16px 14px;
    text-align: center;
    font-size: 14px;
    color: var(--texte-clair);
    background: var(--carte-fond);
    border: 1px dashed var(--ligne);
    border-radius: var(--rayon);
}

.etat-erreur {
    color: var(--rouge-texte);
    border-color: var(--rouge-texte);
}

/* --- Encart ami.e.s+ (historique) --------------------------------------- */
.encart-amieplus {
    margin: 16px;
    padding: 18px 16px;
    background: var(--noir);
    color: var(--creme);
    border-radius: var(--rayon);
    border: 1px solid var(--or);
    text-align: center;
}

.encart-amieplus h2 {
    color: var(--or);
    font-size: 13px;
    padding: 0;
    margin: 0 0 6px;
}

.quota-amieplus {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--or);
    margin: 0;
    line-height: 1;
}

.quota-amieplus-total {
    font-size: 18px;
    font-weight: 400;
    color: var(--texte-clair);
}

.quota-amieplus-legende {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--creme);
    opacity: 0.8;
}

/* --- Historique ---------------------------------------------------------- */
.liste-historique-items {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--carte-fond);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
}

.liste-historique-items li {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.liste-historique-items li + li {
    border-top: 1px solid var(--ligne);
}

.liste-historique-items .meta {
    font-size: 12px;
    color: var(--texte-clair);
    text-transform: capitalize;
}

.liste-historique-items li .badge {
    align-self: flex-start;
    margin-top: 2px;
}

.mois-groupe .liste-historique-items {
    margin-top: 8px;
}

.mois-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--carte-fond);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 12px 14px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 13px;
    font-weight: 600;
    color: var(--noir);
    text-align: left;
    cursor: pointer;
}

.mois-toggle-titre {
    flex: 1;
}

.mois-toggle-compte {
    font-family: 'Inter', system-ui, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--texte-clair);
}

.mois-toggle-chevron {
    color: var(--or-texte);
    font-size: 12px;
    transition: transform 0.15s ease;
}

.mois-toggle[aria-expanded="true"] .mois-toggle-chevron {
    transform: rotate(180deg);
}

.legende-statuts {
    margin: -6px 0 14px;
    padding: 0 16px;
    font-size: 12px;
    color: var(--texte-clair);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* --- Page de connexion --------------------------------------------------- */
.page-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--noir);
}

.carte-login {
    width: 100%;
    max-width: 360px;
    background: var(--creme);
    border-radius: var(--rayon);
    padding: 32px 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.carte-login h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 4px;
}

.sous-titre {
    text-align: center;
    color: var(--texte-clair);
    font-size: 14px;
    margin: 0 0 20px;
}

.carte-login form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carte-login label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
}

.carte-login input[type="text"],
.carte-login input[type="password"] {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--ligne);
    border-radius: 8px;
    background: var(--carte-fond);
}

.carte-login input:focus {
    outline: 2px solid var(--or);
    outline-offset: 1px;
    border-color: var(--or);
}

.case-se-souvenir {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 14px;
}

.case-se-souvenir input {
    width: auto;
    margin: 0;
}

.carte-login button {
    margin-top: 20px;
    background: var(--noir);
    color: var(--or);
    padding: 12px;
    font-size: 15px;
}

.carte-login button:hover {
    opacity: 0.9;
}

.message-erreur {
    background: var(--rouge-fond);
    color: var(--rouge-texte);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 0 4px;
}

.aide-identifiants {
    text-align: center;
    font-size: 12px;
    color: var(--texte-clair);
    margin: 20px 0 0;
}

/* --- Footer installation ------------------------------------------------ */
.footer-installation {
    margin: 24px 16px 32px;
    padding: 14px 16px;
    background: var(--carte-fond);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    text-align: center;
}

.footer-installation-boutons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-installation .bouton-entete {
    display: block;
    width: fit-content;
    color: var(--or-texte);
    border-color: var(--or-texte);
}

.footer-installation .bouton-entete:hover {
    background: var(--noir);
    color: var(--or);
}

/* Le <summary> du deuxième bouton ("Comment installer l'appli ?")
   reprend exactement le style de .bouton-entete, pour que les deux
   boutons soient visuellement identiques et également visibles l'un
   que l'autre — plus de bloc replié discret à repérer. */
.details-instructions {
    display: inline-block;
    width: fit-content;
    text-align: left;
}

.details-instructions summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.details-instructions summary::-webkit-details-marker {
    display: none;
}

.instructions-installation-contenu {
    margin-top: 10px;
    font-size: 13px;
    color: var(--texte-clair);
    text-align: left;
}

.instructions-installation-contenu p {
    margin: 10px 0 0;
}
/* --- Accessibilité : focus clavier visible partout --------------------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}

/* --- Respect de la préférence "réduire les animations" ------------------ */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* --- Vue coach ("Mes cours à encadrer") --------------------------------- */
.carte-cours-coach {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.liste-presence {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ligne-presence {
    padding: 8px 4px;
}

.ligne-presence + .ligne-presence {
    border-top: 1px solid var(--ligne);
}

.ligne-presence label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.ligne-presence input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--or-texte);
}

.photo-profil-petite {
    width: 26px;
    height: 26px;
    border-width: 1px;
}

.ligne-presence-manuelle {
    background: var(--ambre-fond);
    border-radius: 6px;
}

.badge-ajout-manuel {
    font-size: 11px;
    font-weight: 600;
    color: var(--ambre-texte);
}

.ajout-manuel {
    position: relative;
    margin-top: 4px;
}

.ajout-manuel label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--texte-clair);
    margin-bottom: 4px;
}

.champ-recherche-manuel {
    width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    padding: 9px 11px;
    border: 1px solid var(--ligne);
    border-radius: 8px;
    background: var(--carte-fond);
}

.champ-recherche-manuel:focus {
    outline: 2px solid var(--or);
    outline-offset: 1px;
    border-color: var(--or);
}

.resultats-recherche-manuel {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    background: var(--carte-fond);
    border: 1px solid var(--ligne);
    border-radius: 8px;
    box-shadow: var(--ombre);
    max-height: 180px;
    overflow-y: auto;
}

.resultats-recherche-manuel li {
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

.resultats-recherche-manuel li:hover {
    background: var(--creme);
}

.bouton-valider-presence {
    width: 100%;
    background: var(--noir);
    color: var(--or);
    margin-top: 4px;
}

.bouton-valider-presence:hover:not(:disabled) {
    opacity: 0.85;
}

/* --- Badge de consentement droit à l'image ------------------------------ */
/* Après le prénom/nom/pronoms, pas sur la photo (une icône sur une
   photo déjà petite la rendait illisible). Vert = consenti, rouge =
   refusé explicitement ; rien du tout si non renseigné (ex. postulant·es). */
.badge-consentement-oui {
    color: var(--vert-texte);
    font-weight: 700;
}

.badge-consentement-non {
    color: var(--rouge-texte);
    font-weight: 700;
}

.legende-consentement-image {
    font-size: 11px;
    color: var(--texte-clair);
    margin: 0 0 6px;
}

/* Message "l'appel est fait", visible uniquement par le CA et les
   coachs — volontairement bien plus marqué que .etat-vide (fond
   vert plein, texte foncé, bordure), pour qu'il ne passe pas
   inaperçu au milieu d'une liste de noms. */
.message-appel-fait {
    background: var(--vert-fond);
    color: var(--vert-texte);
    border: 1px solid var(--vert-texte);
    border-radius: var(--rayon);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}

.bloc-retardataires {
    margin-bottom: 12px;
}

.probleme-appel-contact {
    font-size: 12px;
    color: var(--texte-clair);
    margin: 0 0 12px;
}

.probleme-appel-contact a {
    color: var(--or-texte);
}

.liste-retardataires {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ligne-retardataire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--ambre-fond);
    border-radius: 8px;
    font-size: 14px;
}

.bouton-marquer-present {
    background: var(--noir);
    color: var(--or);
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.bouton-marquer-present:hover:not(:disabled) {
    opacity: 0.85;
}

/* --- Badge "P" (postulant·e, cours d'essai) ------------------------------ */
.badge-postulant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    border-radius: 4px;
    background: var(--ambre-fond);
    color: var(--ambre-texte);
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

.legende-postulant {
    font-size: 11px;
    color: var(--texte-clair);
    margin: 0 0 10px;
}

/* --- Modale Google Maps (lieu d'un cours) -------------------------------- */
.pbc-bandeau-modale-boite-carte {
    max-width: 480px;
    padding: 20px;
}

.iframe-carte {
    border-radius: 8px;
    display: block;
}

.lien-ouvrir-maps {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
}

/* Volontairement en Inter (pas Oswald) et minuscule : doit se lire
   comme une étiquette de regroupement, pas comme un second niveau de
   titre qui concurrencerait le h2 "Cours que j'encadre" juste
   au-dessus (Oswald, majuscules, 18px, voir règle h1/h2/h3 globale). */
.sous-titre-historique {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-clair);
    margin: 16px 0 8px;
}

.mois-groupe + .mois-groupe {
    margin-top: 10px;
}

/* Contenu d'un mois pour "à venir" (semaines imbriquées) — équivalent
   du <ul class="liste-historique-items"> directement utilisé pour un
   mois "passé", ici un conteneur pour les groupes de semaines. */
.mois-toggle-contenu {
    margin-top: 8px;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.semaine-groupe .liste-historique-items {
    margin-top: 6px;
}

/* Un cran plus petit et moins marqué que .mois-toggle : pas de fond
   ni de bordure de carte, juste du texte avec un chevron, pour rester
   clairement subordonné au niveau mois au-dessus. */
.semaine-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-left: 2px solid var(--ligne);
    padding: 4px 0 4px 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--or-texte);
    text-align: left;
    cursor: pointer;
}

.semaine-toggle-titre {
    flex: 1;
}

.semaine-toggle-chevron {
    color: var(--or-texte);
    font-size: 11px;
    transition: transform 0.15s ease;
}

.semaine-toggle[aria-expanded="true"] .semaine-toggle-chevron {
    transform: rotate(180deg);
}

/* --- Page légale (politique de confidentialité) ------------------------- */
.page-legale {
    padding: 16px;
    max-width: 720px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.6;
}

.page-legale h2 {
    padding: 0;
    margin-top: 24px;
}

.page-legale-statut {
    background: var(--ambre-fond);
    color: var(--ambre-texte);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
}

.page-legale-note {
    font-size: 13px;
    color: var(--texte-clair);
    font-style: italic;
}

.liste-legale {
    padding-left: 20px;
    margin: 0 0 14px;
}

.liste-legale li {
    margin-bottom: 6px;
}

.tableau-legal {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

.tableau-legal th {
    background: var(--noir);
    color: var(--creme);
    text-align: left;
    padding: 8px 10px;
}

.tableau-legal td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ligne);
    vertical-align: top;
}

.footer-legal {
    text-align: center;
    padding: 20px 16px 32px;
    font-size: 12px;
}

.footer-legal a {
    color: var(--texte-clair);
}

/* --- Bandeau d'annonces (port du plugin WordPress pbc-bandeau-annonces) - */
.pbc-bandeau {
    overflow: hidden;
    background: var(--noir);
    border-top: 1px solid var(--or);
    border-bottom: 1px solid var(--or);
    padding: 8px 0;
}

.pbc-bandeau-piste {
    display: flex;
    width: max-content;
    animation-name: pbc-defilement;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.pbc-bandeau-groupe {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 40px;
}

.pbc-bandeau-item {
    color: var(--creme);
    font-size: 13px;
}

.pbc-bandeau-item a {
    color: var(--or);
}

.pbc-bandeau-separateur {
    color: var(--or);
    margin: 0 12px;
}

.pbc-bandeau-plus-infos {
    background: none;
    border: none;
    color: var(--or);
    text-decoration: underline;
    font-size: 13px;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
}

@keyframes pbc-defilement {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.pbc-bandeau-modale {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.pbc-bandeau-modale-fond {
    position: absolute;
    inset: 0;
    background: rgba(22, 20, 15, 0.6);
}

.pbc-bandeau-modale-boite {
    position: relative;
    max-width: 420px;
    margin: 15vh auto 0;
    background: var(--creme);
    border-radius: var(--rayon);
    padding: 24px 20px 20px;
    max-height: 60vh;
    overflow-y: auto;
    font-size: 14px;
    color: var(--noir);
}

.pbc-bandeau-modale-fermer {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--noir);
    padding: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .pbc-bandeau-piste {
        animation: none;
    }
}