body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
    padding-top: 70px;
    
}

.background-form {
	background: #000 url('2m.png') no-repeat center center fixed;
	background-size: auto 300px;
}

.navbar {
    background-color: #222;
    color: #fff;
    padding: 1rem;
    font-size: 1.2rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 3px solid #fff;
}
.navbar-brand {
    font-weight: bold;
  
	color: #fff;
}

.navbar-toggler-icon {
    background-color: #ffca08;
}
.nav-item {
    margin: 0 10px;
}
.nav-link {
    color: #ffca08;
}
.parallax-hero {
    background-image: url('fondParallax.jpg');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 50px 0;
}

@media (max-width: 767.98px) {
    .parallax-hero {
      background-image: url('fondParallaxMobile.jpg');
        background-attachment: scroll;
        background-position: 60% center;
        background-size: cover;
        padding: 35px 0;
    }
}
.hero-section {
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 160px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;

}
.hero-section h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    opacity: 0.8;
}
.textTitre {
    background-color: black;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
	width:100%;
}

.textTitre p {
    font-size: 1.5rem;
    
    z-index: 10;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}
.hero-bg-image {
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 800px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.section-content {
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 40px;
    text-align: center;
}
.section-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
}
.section-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    color: #555;
}
.section-content img {
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
    text-shadow: 2px 2px 3px #bbb;
    font-family: 'Montserrat', sans-serif;
}
form h3 {
    color: #fff;
}
.parallax-hero p {
    background-color: black;
    opacity: 0.8;
    padding: 10px;
    padding-left: 20px;
    width: 66%;
    font-size: 1.2rem;
}
.parallax-hero p:nth-child(even) {
    margin-left: 33%;
}
.hero-text {
    text-align: justify;
    margin-top: 50px;
}
.coinRond {
    -moz-border-radius: 31px;
    -webkit-border-radius: 31px;
    border-radius: 31px;
}
.profile {
    text-align: center;
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: -90px auto 0;
    position: relative;
    left: 0;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.profile .content {
    padding: 20px 0 20px;
}
.profile .name {
    font-weight: bold;
    font-size: 20px;
    margin: 10px 0;
}
.profile .position {
    color: #333;
}
.profile .description {
    margin: 10px 0;
    color: #777;
	text-align:justify;
}
/* Équipe : cartes de même hauteur dans une même rangée */
#equipe .row {
    align-items: stretch;
    margin-bottom: 100px;
}

#equipe .row:nth-last-child {
    margin-bottom: 50px;
}

#equipe .col-md-4,
#equipe .col-md-6 {
    display: flex;
}

#equipe .profile {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#equipe .profile .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

@media (max-width: 767.98px) {
    #equipe .col-md-4,
    #equipe .col-md-6 {
        display: block;
    }

    #equipe .profile {
        height: auto;
        margin-bottom: 100px;
    }

    #equipe .row { 
      margin-bottom: 0px;
    }
}
.partenaire {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 50px 0;
}
.partenaire-map iframe {
    width: 100%;
    height: 400px;
}
.interactive-features {
    background-color: #222;
    color: #fff;
    text-align: center;
	
}

#rabais{
  margin-left:-30px;
}

@media (max-width: 768px) {
    #rabais{
      margin-left:0px;
}
}

.feature {
    display: inline-block;
    margin: 20px;
	width:90%;
}
.feature i {
    font-size: 36px;
}
.feature h3 {
    font-size: 24px;
    margin-top: 10px;
}
.feature p {
    font-size: 18px;
    text-align: justify;
}
.feature ul {
    text-align: left;
}
.protected {
    display: none;
}
.user-admin-bar {
    background: #222;
    color: #fff;
    position: fixed;
    top: 80px;
    right: 0;
    width: auto;
    z-index: 1029;
    height: 30px;
    overflow: hidden;
    transition: height 0.3s ease;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 1px solid #fff;
    border-bottom: 3px solid #fff;
}
.user-admin-content {
    padding: 20px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
}
.user-info a {
    color: #fa071a;
    text-decoration: none;
}
.user-info a:hover {
    text-decoration: underline;
}
.admin-menu {
    display: none;
    text-align: right;
}
.admin-menu a {
    color: #ffca08;
    display: block;
    padding: 1px 0;
}
.toggle-user-admin {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
}
.inscription-container {
    background: rgba(150, 150, 150, 0.2);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    margin-top: 5rem;
    position: relative;
    z-index: 10;
}
.inscription-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
}
.inscription-table {
    background: rgba(26, 26, 26, 0.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    margin-top: 1.5rem;
}
.inscription-table thead {
    background: rgba(40, 40, 40, 0.9);
}
.form-section {
    display: none;
    background: rgba(68, 68, 68, 0.6);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.form-title {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 1.8rem;
}
.form-group label {
    color: #fff;
}
.form-group small {
    color: #fff;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(85, 85, 85, 0.9);
    color: #ddd;
    border: 1px solid #666;
    transition: all 0.3s ease;
}
.form-group textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    outline: none;
}
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    background: rgba(85, 85, 85, 0.9);
    color: #ddd;
    border: 1px solid #666;
    opacity: 1;
    cursor: not-allowed;
}
.login-prompt {
    color: #ddd;
    text-align: center;
    margin-top: 1.5rem;
}
.login-prompt a {
    color: #ffca08;
}
.btn-primary {
    background: #1a1a1a;
    color: #ffca08;
    border: 1px solid #ffca08;
    box-shadow: 0 5px 10px rgba(255, 202, 8, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 12px 25px;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background: #000;
    color: #ffca08;
    border: 1px solid #ffca08;
    box-shadow: 0 8px 20px rgba(255, 202, 8, 0.5);
    transform: translateY(-3px) rotate(2deg);
}
.btn-secondary {
    background: rgba(26, 26, 26, 0.6);
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 12px 25px;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px) rotate(2deg);
}
.btn-delete, .btn-edit {
    padding: 6px 12px;
    font-size: 0.9rem;
    border-radius: 20px;
    margin: 0 5px;
    transition: all 0.3s ease;
}
.btn-delete {
    background: #fa071a;
    color: #fff;
    border: none;
    box-shadow: 0 3px 8px rgba(250, 7, 26, 0.4);
}
.btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(250, 7, 26, 0.5);
}
.btn-edit {
    background: #ffca08;
    color: #1a1a1a;
    border: none;
    box-shadow: 0 3px 8px rgba(255, 202, 8, 0.4);
}
.btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(255, 202, 8, 0.5);
}
.btn-status-inscrit {
    padding: 6px 12px;
    font-size: 0.9rem;
    border-radius: 20px;
    margin: 0 5px;
    background: #28a745;
    color: #fff;
    border: none;
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease;
}
.btn-status-inscrit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(40, 167, 69, 0.5);
}
.btn-status-inscrit:disabled {
    background: #1d7d35;
    box-shadow: none;
    cursor: not-allowed;
}
.btn-status-noninscrit {
    padding: 6px 12px;
    font-size: 0.9rem;
    border-radius: 20px;
    margin: 0 5px;
    background: #6c757d;
    color: #fff;
    border: none;
    box-shadow: 0 3px 8px rgba(108, 117, 125, 0.4);
    transition: all 0.3s ease;
}
.btn-status-noninscrit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(108, 117, 125, 0.5);
}
.btn-status-noninscrit:disabled {
    background: #5a6268;
    box-shadow: none;
    cursor: not-allowed;
}
.table {
    color: #ddd;
    font-size: 0.95rem;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.table th, .table td {
    padding: 8px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.05);
}
.short-input {
    max-width: 25%;
}
@media (max-width: 768px) {
    .short-input {
        max-width: 100%;
    }
}
.required-icon {
    color: #fa071a;
    margin-left: 5px;
}
.form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.belt-container {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    overflow: hidden;
}
.belt-ribbon {
    font-size: 28px;
}
.belt-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 27px;
}
.inscription-user-admin-bar {
    background: rgba(34, 34, 34, 0.9);
}

/* Style pour le toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
}
.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-switch .slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #666;
    transition: 0.4s;
    border-radius: 34px;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider {
    background-color: #ffca08;
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(26px);
}
.toggle-switch input:disabled + .slider {
    background-color: #444;
    cursor: not-allowed;
}
.toggle-switch input:disabled:checked + .slider {
    background-color: #997700;
}

/* Modal styles spécifiques */
.modal {
    z-index: 1050; /* Augmenté pour être sûr que la modale est au-dessus du backdrop */
}
.modal-backdrop {
    z-index: 1040; /* Assure que le backdrop reste en dessous de la modale */
}
.modal-content.inscription-container {
    background: rgba(68, 68, 68, 0.6);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-title.inscription-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    color: #fff;
    width: 100%;
    text-align: center;
}
.modal-body {
    padding: 20px;
}
.modal-body .form-group label {
    color: #fff;
}
.modal-body .form-control {
    background: rgba(85, 85, 85, 0.9);
    color: #ddd;
    border: 1px solid #666;
    transition: all 0.3s ease;
}
.modal-body .form-control:focus {
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.1);
}
.modal-footer.form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Style pour les formulaires dans les modales */
.modal-form-container {
    background: #444; /* Gris foncé opaque, similaire à inscription-container mais sans transparence */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-form-container .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-form-container .modal-title.inscription-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    color: #fff;
    width: 100%;
    text-align: center;
}

.modal-form-container .modal-body {
    padding: 20px;
}

.modal-form-container .form-group label {
    color: #fff;
}

.modal-form-container .form-control {
    background: rgba(85, 85, 85, 0.9);
    color: #ddd;
    border: 1px solid #666;
    transition: all 0.3s ease;
}

.modal-form-container .form-control:focus {
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.1);
}

.modal-form-container .modal-footer.form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Barre de message globale --- */
.message-bar {
  position: sticky;        /* reste visible en haut du viewport */
  top: 70px;               /* sous ta navbar fixe */
  z-index: 1100;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border-bottom: 2px solid rgba(0,0,0,0.15);
}
.message-bar .close-message {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* Variantes */
.msg-success { background: #1d7d35; color: #fff; }   /* vert */
.msg-warning { background: #997700; color: #fff; }   /* jaune/orangé */
.msg-error   { background: #8a1b1b; color: #fff; }   /* rouge */
.msg-info    { background: #0f4f8a; color: #fff; }   /* bleu */

/* --- Bouton d'affiliation (icône homogène avec tes autres boutons) --- */
.btn-cart {
  background: #ffca08;
  color: #1a1a1a;
  border: none;
  box-shadow: 0 3px 8px rgba(255, 202, 8, 0.4);
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.btn-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(255, 202, 8, 0.5);
}

/* Boutons ronds icône-only */
.btn-icon{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;border:none;cursor:pointer;
  background:#2a2a2a;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.btn-icon i{font-size:1rem;}
.btn-icon:disabled{opacity:.65;cursor:default;}
/* Variantes d’action (affiliation) */
.btn-icon.btn-cart{background:#ffca08;color:#1a1a1a;}
.btn-icon.btn-secondary{background:#3b3b3b;color:#fff;}
.btn-icon.btn-info{background:#0f4f8a;color:#fff;}
.btn-icon.btn-success{background:#1d7d35;color:#fff;}
/* Variantes de STATUT (ronds cliquables) */
.btn-icon.btn-status-success{background:#1d7d35;color:#fff;}
.btn-icon.btn-status-info{background:#0f4f8a;color:#fff;}
.btn-icon.btn-status-warning{background:#997700;color:#fff;}
.btn-icon.btn-status-muted{background:#5a5a5a;color:#fff;}

/* Surbrillance d’une ligne après action */
@keyframes rowFlash { from { background:#123b1f; } to { background:transparent; } }
tr.row-flash{ animation: rowFlash 0.7s ease-out; }


/* Panneau sombre lisible et "3D" (comme le tableau) */
.panel-dark{
  background: rgba(10,10,10,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  color: #f4f6f8;
  border-radius: 12px;            /* coins arrondis */
  box-shadow:
    0 12px 28px rgba(0,0,0,0.35), /* ombrage principal */
    0 2px 8px rgba(0,0,0,0.25);   /* ombre proche pour relief */
}
.panel-dark .card-body{ color: inherit; }

/* Titres et emphases bien lisibles */
.panel-dark h1, .panel-dark h2, .panel-dark h3,
.panel-dark h4, .panel-dark h5, .panel-dark h6,
.panel-dark strong { color:#ffffff; }

/* Paragraphes & listes sur fond sombre */
.panel-dark p, .panel-dark li { color:#e9edf3; }
.panel-dark ul { margin-left: 1rem; }
.panel-dark li::marker { color: rgba(255,255,255,0.55); }

/* Ton "muted" adapté au dark */
.panel-dark .text-muted { color: rgba(255,255,255,0.72) !important; }

/* Liens aux couleurs de marque */
.panel-dark a { color: #ffca08; }
.panel-dark a:hover { color: #ffd84d; text-decoration: underline; }

/* Séparateur + titre de section entre le tableau et le paiement */
.section-sep { margin: 26px 0 14px; text-align:center }
.section-title {
  display: flex; align-items: center;
  color: #fff; font-size: 1.25rem; font-weight: 600;
  margin: 0; padding-top: 12px; position: relative;
}
.section-title::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,202,8,.65), rgba(255,255,255,0.08));
}
.section-title i { color:#ffca08; margin-right: 8px; }

/* ==== Message bar: fixed + animations bottom→top + fade-out ==== */
.message-bar {
  position: fixed;           /* plus de décalage du layout */
  left: 0;
  right: 0;
  top: 0;                    /* se colle en haut quand visible */
  z-index: 3000;
  display: none;             /* sera géré en JS */
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  pointer-events: auto;
  top:70px;
}

.message-bar .close-message {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .9;
}

/* Thèmes */
.msg-success  { background: rgba(16, 62, 24, 0.95);  border-bottom-color: rgba(61, 214, 91, 0.35); }
.msg-warning  { background: rgba(68, 52, 6, 0.95);   border-bottom-color: rgba(255, 202, 8, 0.35); }
.msg-error    { background: rgba(72, 11, 18, 0.95);  border-bottom-color: rgba(255, 89, 100, 0.35); }
.msg-info     { background: rgba(18, 30, 48, 0.95);  border-bottom-color: rgba(118, 171, 255, 0.35); }

/* État visible + animations */
.message-bar.is-visible  { display: flex; }
.message-bar.msg-enter   { animation: msgSlideUp 420ms cubic-bezier(.22,.9,.24,1) forwards; }
.message-bar.msg-exit    { animation: msgFadeOut 260ms ease forwards; }

/* Slide depuis le bas de la fenêtre jusqu’en haut (collé) */
@keyframes msgSlideUp {
  from { transform: translateY(100vh); opacity: .8; }
  to   { transform: translateY(0);     opacity: 1;  }
}

/* Disparition en fondu */
@keyframes msgFadeOut {
  from { transform: translateY(0);     opacity: 1;   }
  to   { transform: translateY(-12px); opacity: 0;   }
}


/* === Overlay de chargement global === */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;            /* visible via JS => display:flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(1.5px);
  z-index: 9999;
  transition: opacity .15s ease-in-out;
}

.loading-box {
  min-width: 220px;
  max-width: 90vw;
  padding: 18px 20px;
  border-radius: 14px;
  background: #222;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 14px;
}

.loading-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #ffca08; /* couleur d’accent du site */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Modale de confirmation (look clair + contraste fort) === */
.modal-confirm {
  background: #fff;
  color: #1a1a1a;
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}

.modal-confirm .modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(180deg, #fff, #f7f7f7);
  padding: 14px 16px;
}

.modal-confirm .modal-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffec8a;          /* accent pâle */
  color: #8a6a00;                /* texte/icon sur accent */
  font-size: 16px;
}

.modal-confirm .modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  margin: 0;
  color: #1a1a1a;
}

.modal-confirm .close {
  color: #333;
  opacity: 0.6;
  font-size: 1.4rem;
}
.modal-confirm .close:hover { opacity: 1; }

.modal-confirm .modal-body {
  padding: 25px 25px;
}

.modal-confirm .modal-body p {
  margin: 0;
  color: #2b2b2b;          /* lisible sur fond blanc */
  line-height: 1.5;
}

.modal-confirm .modal-footer {
  border-top: 1px solid #eee;
  background: #fafafa;
  padding: 25px 25px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* === Modales unifiées : header/footer gris foncé plein-bleed, corps blanc === */
.modal .modal-content,
.modal .modal-content.inscription-container,
.modal .modal-content.modal-form-container,
.modal-form-container {
  background: #fff;
  color: #1a1a1a;
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden; /* important pour que le gris suive les coins */
}

/* Header : gris + arrondis en haut (va jusqu’aux coins) */
.modal .modal-header,
.modal-form-container .modal-header {
  background: #e1e1e1 !important; /* un peu plus foncé que #f7f7f7 */
  border: 0 !important;
  padding: 25px 25px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Footer : gris + arrondis en bas (va jusqu’aux coins) */
.modal .modal-footer,
.modal-form-container .modal-footer {
  background: #e1e1e1 !important; /* même gris que le header */
  border: 0 !important;
  padding: 25px 25px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Corps : reste blanc pour le contraste du texte */
.modal .modal-body,
.modal-form-container .modal-body {
  background: #fff;
  padding: 25px 25px;
}

/* Titre + icône d’avertissement dans le header (triangle jaune) */
.modal .modal-header .modal-icon-warning {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffec8a; /* jaune pâle */
  color: #8a6a00;      /* icône lisible */
  font-size: 16px;
}

.modal .modal-title,
.modal .modal-title.inscription-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  margin: 0;
  color: #1a1a1a;
}

/* (facultatif) un voile un peu plus marqué derrière la modale */
.modal-backdrop.show { opacity: .45; }


/* === Ajustements modale: titre + dégradés + ombre 3D (override final) === */

/* 3D plus marqué (tout le contenu de la modale) */
.modal .modal-content {
  border-radius: 16px;
  overflow: hidden; /* pour que les coins arrondis s’appliquent aux zones grises */
  box-shadow:
    0 16px 44px rgba(0,0,0,0.35),
    0 4px 14px rgba(0,0,0,0.22);
}

/* Header: gris pâle (haut) → gris plus foncé (bas), plein-bleed */
.modal .modal-header {
  background: linear-gradient(180deg, #f2f2f2 0%, #e1e1e1 60%, #d6d6d6 100%) !important;
  border: 0 !important;
  padding: 18px 20px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* Footer: dégradé inversé (plus foncé près du body) → plus pâle vers le bas */
.modal .modal-footer {
  background: linear-gradient(180deg, #d6d6d6 0%, #e1e1e1 40%, #f2f2f2 100%) !important;
  border: 0 !important;
  padding: 14px 20px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Titre: un peu plus gros + léger text-shadow noir (subtil) */
.modal .modal-title,
.modal .modal-title.inscription-title {
  font-size: 1.35rem !important;                 /* + ~2 tailles */
  color: #1a1a1a !important;                      /* bon contraste sur gris */
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);        /* la petite touche “site” */
  letter-spacing: .2px;
  margin: 0;
}

/* L’icône d’avertissement garde sa pastille jaune (si présente) */
.modal .modal-header .modal-icon-warning {
  background: #ffec8a;
  color: #8a6a00;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* Backdrop un peu plus présent pour l’effet de profondeur global */
.modal-backdrop.show { opacity: .5; }

/* Mini-barre: tout à GAUCHE */
#userAdminBar .user-admin-content,
#userAdminBar .user-admin-content .menu-links,
#userAdminBar .user-admin-content #adminMenu {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Empiler les liens (un par ligne) */
#userAdminBar .user-admin-content .menu-links,
#userAdminBar .user-admin-content #adminMenu {
  display: flex;
  flex-direction: column;
  gap: 2px; /* léger espacement vertical */
}

/* Chaque lien: inline-flex pour aligner icône + texte proprement */
#userAdminBar .user-admin-content .menu-link,
#userAdminBar .user-admin-content #adminMenu a {
  display: inline-flex;
  align-items: center;
}

/* Icônes: largeur fixe pour aligner les textes sous eux */
#userAdminBar .user-admin-content .menu-link i,
#userAdminBar .user-admin-content #adminMenu a i {
  width: 1.25rem;        /* ~20px: ajuste si tu veux */
  min-width: 1.25rem;
  text-align: center;
  margin-right: 10px;     /* petit espace avant le texte */
  line-height: 1;        /* évite les décalages verticaux */
}

/* Couleurs (tu l'avais demandé précédemment) :
   - courriel en rouge
   - autres liens de la mini-barre en jaune du menu */
#userAdminBar .user-admin-content .user-info-top { color: #fa071a; } /* rouge */
#userAdminBar .user-admin-content .menu-link,
#userAdminBar .user-admin-content #adminMenu a { color: #ffca08; }   /* jaune */

/* ============================================================
   Boutons — thème 2M (supprime le bleu Bootstrap partout)
   ============================================================ */
:root{
  --brand-yellow:#ffca08;
  --brand-red:#fa071a;
  --brand-dark:#1a1a1a;
}

/* Base (préserve ton rayon + transitions) */
.btn{ border-radius:15px; transition:all .3s ease; }

/* ---------- PRIMARY (ex. Procéder au paiement) ---------- */
.btn-primary{
  background: var(--brand-dark) !important;
  color: var(--brand-yellow) !important;
  border: 1px solid var(--brand-yellow) !important;
  box-shadow: 0 5px 10px rgba(255,202,8,.40), inset 0 2px 5px rgba(255,255,255,.1) !important;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle{
  background:#000 !important;
  color:var(--brand-yellow) !important;
  border-color:var(--brand-yellow) !important;
  box-shadow: 0 8px 20px rgba(255,202,8,.5) !important;
  transform: translateY(-2px);
}

/* Focus/Focus-visible: anneau jaune au lieu du bleu Bootstrap */
.btn:focus, .btn.focus,
.btn-primary:focus, .btn-primary.focus,
.btn-primary:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 .25rem rgba(255,202,8,.45) !important;
}

/* Disabled (p. ex. bouton non cliquable dans le panier) */
.btn-primary:disabled, .btn-primary.disabled{
  background:#2a2a2a !important;
  color: rgba(255,255,255,.65) !important;
  border-color:#4a4a4a !important;
  box-shadow:none !important;
  opacity:1 !important;               /* on garde un rendu net */
  cursor:not-allowed !important;
  transform:none !important;
  pointer-events:none !important;      /* évite tout “highlight” */
}

/* ---------- SECONDARY (tes boutons gris/noirs) ---------- */
.btn-secondary{
  background: rgba(26,26,26,.65) !important;
  color:#fff !important;
  border:1px solid #fff !important;
  box-shadow: 0 4px 12px rgba(255,255,255,.2), inset 0 2px 5px rgba(255,255,255,.1) !important;
}
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active{
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
  box-shadow: 0 6px 15px rgba(255,255,255,.3) !important;
  transform: translateY(-2px);
}
.btn-secondary:focus, .btn-secondary.focus,
.btn-secondary:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 .25rem rgba(255,202,8,.35) !important; /* anneau jaune discret */
}
.btn-secondary:disabled, .btn-secondary.disabled{
  background:#3a3a3a !important;
  color: rgba(255,255,255,.6) !important;
  border-color:#5a5a5a !important;
  box-shadow:none !important;
  opacity:1 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}

/* ---------- Nettoyage d’héritages Bootstrap ---------- */
.btn-link,
.btn-link:focus,
.btn-link:active{
  color: var(--brand-yellow) !important; /* si jamais utilisé, reste dans la charte */
}

/* ============================
   1) Icon-only : ronds parfaits
   (dernières 2 colonnes des tableaux)
   ============================ */

/* Affiliation + Panier (couvre plusieurs structures possibles) */
.inscription-table td:nth-last-child(-n+2) .btn,
.inscription-table td:nth-last-child(-n+2) .btn-icon,
#cartTable td:nth-last-child(-n+2) .btn,
#cartTable td:nth-last-child(-n+2) .btn-icon,
.cart-table td:nth-last-child(-n+2) .btn,
.cart-table td:nth-last-child(-n+2) .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50% !important;    /* rond parfait */
  line-height: 1;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Taille/alignement de l’icône à l’intérieur */
.inscription-table td:nth-last-child(-n+2) .btn i,
.inscription-table td:nth-last-child(-n+2) .btn-icon i,
#cartTable td:nth-last-child(-n+2) .btn i,
#cartTable td:nth-last-child(-n+2) .btn-icon i,
.cart-table td:nth-last-child(-n+2) .btn i,
.cart-table td:nth-last-child(-n+2) .btn-icon i {
  font-size: 1rem;
  line-height: 1;
}

/* Désactive tout “highlight” bleu par défaut Bootstrap */
.inscription-table td:nth-last-child(-n+2) .btn:focus,
#cartTable td:nth-last-child(-n+2) .btn:focus,
.cart-table td:nth-last-child(-n+2) .btn:focus {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(255,202,8,.35);
}

/* ============================
   2) Boutons Action (Modifier/Supprimer)
   – uniformes partout (tables & cards)
   ============================ */
.table .btn-edit, .card .btn-edit {
  background: #ffca08 !important;
  color: #1a1a1a !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 8px rgba(255,202,8,.40) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.table .btn-edit:hover, .card .btn-edit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(255,202,8,.5) !important;
}

.table .btn-delete, .card .btn-delete {
  background: #fa071a !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 8px rgba(250,7,26,.40) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.table .btn-delete:hover, .card .btn-delete:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(250,7,26,.5) !important;
}

/* Si des styles “card” bleus surchargent encore, on neutralise */
.card .btn {
  box-shadow: none;              /* base neutre, nos classes au-dessus rajoutent l’ombre */
}

/* ===============================
   Panier — normalisation boutons
   pour matcher l'Affiliation
   =============================== */

/* 0) Alignements de base dans le tableau du panier */
#cartTable td,
.cart-table td {
  vertical-align: middle;
}

/* 1) Boutons "pilule" (texte/icone) — même gabarit que l'affiliation */
#cartTable .btn:not(.btn-icon):not(.icon-only),
.cart-table .btn:not(.btn-icon):not(.icon-only),
#cartTable .btn.btn-sm:not(.btn-icon):not(.icon-only),
.cart-table .btn.btn-sm:not(.btn-icon):not(.icon-only) {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 22px !important;
  line-height: 1.1;
  font-size: 1rem;        /* neutralise d’éventuels .btn-sm */
  gap: 6px;               /* espace entre l’icône et le libellé */
  flex: 0 0 auto;         /* évite de se “compresser” dans des flex-parents */
}

/* 2) Icônes à largeur fixe pour aligner les textes (évite les décalages) */
#cartTable .btn i,
.cart-table .btn i {
  width: 1.25rem;         /* ~20px, ajuste si tu veux */
  min-width: 1.25rem;
  text-align: center;
  line-height: 1;
}

/* 3) Espacement horizontal entre actions dans une même cellule */
#cartTable td .btn + .btn,
.cart-table td .btn + .btn {
  margin-left: 8px;
}

/* 4) Préserver les boutons ronds (icônes seules) déjà définis ailleurs */
#cartTable td:nth-last-child(-n+2) .btn,
.cart-table td:nth-last-child(-n+2) .btn,
#cartTable td:nth-last-child(-n+2) .btn-icon,
.cart-table td:nth-last-child(-n+2) .btn-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50% !important;
}

/* 5) Neutraliser d’éventuels styles de carte qui réduisent les boutons */
.cart .card .btn,
.cart-card .btn {
  line-height: normal;    /* évite les contraintes de hauteur héritées */
  box-shadow: none;       /* on laisse nos classes .btn-* ajouter l’ombre si besoin */
}

/* Lien actif (nav + menu admin) — rouge sur rouge */
:root{
  --brand-red:#fa071a;
}

/* nav principale + mini-barre admin */
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link,
#userAdminBar .user-admin-content .menu-link.active,
#userAdminBar .user-admin-content #adminMenu a.active{
  color: var(--brand-red) !important;
  /* Ombre courte + petite lueur, comme tes titres */
  text-shadow:
    0 1px 2px rgba(250,7,26,.55),
    0 0 6px  rgba(250,7,26,.35);

}

/* === Badge no de facture (lisible & cohérent) === */
.badge-invoice{
  display:inline-block;
  padding:4px 10px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-weight:600;
  letter-spacing:.3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

/* Optionnel: resserrer un peu la cellule "Action" centrée */
.table td.text-center .btn-icon { margin: 0 auto; }


/* Action: pas de soulignement ni contour sur le bouton œil */
a.btn-icon, a.btn-icon:hover, a.btn-icon:focus {
  text-decoration: none !important;
  outline: none !important;
}

/* No de facture: blanc + gras, sans bulle */
.invoice-no{
  color:#fff;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.2px;
}

/* ===== En-têtes triables ===== */
th.th-sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.th-sortable .sort-hint{ margin-left:6px; opacity:.45; font-size:.9em; }
th.th-sortable .sort-caret{ margin-left:4px; opacity:.95; font-size:.9em; }
th.th-sortable.active-sort{ color:#fff; }
th.th-sortable.active-sort .sort-hint{ display:none; } /* Cache l’icône générique sur la colonne triée */

/* ===== Pager sombre (cohérent avec le reste) ===== */
.pager-dark{
  display:flex; justify-content:center;
}
.pager-dark .pagination{
  background: rgba(255,255,255,0.06);
  padding: 6px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  margin-top: 12px;
}
.pager-dark .page-item{ margin: 0 2px; }
.pager-dark .page-link{
  background: transparent;
  border: none;
  color: #fff;
  border-radius: 9999px;
  padding: 6px 10px;
  line-height: 1;
}
.pager-dark .page-link:hover{
  background: rgba(255,255,255,0.10);
  color: #fff;
  text-decoration: none;
}
.pager-dark .page-item.active .page-link{
  background: #c8102e; /* rouge de l’app */
  color: #fff;
  font-weight: 700;
}
.pager-dark .page-item.disabled .page-link{
  opacity: .4;
  cursor: not-allowed;
}

/* ===== Pager "pills" — look cohérent avec l'app (inspiré des filtres Panier) ===== */
.pager-pills{
  display:flex;
  justify-content:center;
}
.pager-pills .pagination{
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-top: 12px;
}
.pager-pills .page-item{ margin: 0 3px; }
.pager-pills .page-link{
  border: 1px solid #ffca08;      /* jaune app */
  background: #1a1a1a;            /* sombre */
  color: #ffca08;
  border-radius: 9999px;          /* pill */
  padding: 6px 12px;
  line-height: 1;
}
.pager-pills .page-link:hover{
  background: #2a2a2a;
  color: #ffca08;
  text-decoration: none;
}
.pager-pills .page-item.active .page-link{
  background: #ffca08;
  color: #1a1a1a;
  border-color: #ffca08;
  font-weight: 700;
}
.pager-pills .page-item.disabled .page-link{
  opacity: .4;
  cursor: not-allowed;
}

/* ===== Mes commandes — Modale facture : close “X” aux couleurs du site ===== */
/* ===== Modale facture : close “X” gris foncé ===== */
.modal .close,
.modal .btn-close{
  color: #6c757d !important;   /* gris foncé cohérent avec le thème */
  opacity: 1 !important;
  text-shadow: none;
}
.modal .close:hover,
.modal .btn-close:hover{
  color: #8a939a !important;   /* léger éclaircissement au hover */
}


/* Icône-only : jamais de soulignement même si c’est un <a> */
a.btn-icon,
a.btn-icon:hover,
a.btn-icon:focus{
  text-decoration: none !important;
  outline: none !important;
}





/* Numéro de facture en noir dans le titre de la modale */
#factModalTitle .invoice-no {
  color: #000 !important;
}

/* Libellé plus marqué, valeur bien lisible */
#factModal .tiny-label {
  font-size: 0.8rem;
  font-weight: 700;           /* gras comme demandé */
  color: #6c757d;             /* gris foncé lisible sur fond clair */
  text-transform: uppercase;  /* optionnel : donne un repère visuel */
  letter-spacing: .02em;
  margin-bottom: 2px;
}

/* Actions côte à côte dans la dernière colonne du tableau */
.inscription-table td.text-center {
  white-space: nowrap;              /* empêche le retour à la ligne */
  vertical-align: middle;
}

.inscription-table td.text-center .btn-icon {
  display: inline-flex;             /* force l'alignement horizontal */
  justify-content: center;
  align-items: center;
  margin: 0;
}

.inscription-table td.text-center .btn-icon + .btn-icon {
  margin-left: 8px;                 /* petit espace entre les boutons */
}

/* (déjà demandé auparavant) : pas de soulignement sur l’œil */
a.btn-icon, a.btn-icon:hover, a.btn-icon:focus {
  text-decoration: none !important;
  outline: none !important;
}

/* TABLES: laisser le moteur adapter les colonnes */
.inscription-table { table-layout: auto; }

/* Colonne Client: autoriser les retours à la ligne dans les emails / IDs */
.inscription-table th#thClient,
.inscription-table td.col-client {
  overflow-wrap: anywhere;   /* moderne, casse partout si nécessaire */
  word-break: break-word;    /* compat anciens navigateurs */
}

/* Action: rester sur une petite largeur, sans casser les icônes */
.inscription-table td.text-center {
  white-space: nowrap;
}


/* Gestion des commandes : largeur des colonnes */
#gestionTable { table-layout: fixed; width: 100%; }

/* Largeurs "raisonnables" pour les colonnes fixes */
#gestionTable col.col-date   { width: 140px; }  /* 2025-09-07 11h45 */
#gestionTable col.col-no     { width: 130px; }
#gestionTable col.col-amount { width: 120px; }
#gestionTable col.col-method { width: 140px; }
#gestionTable col.col-status { width: 180px; }
#gestionTable col.col-action { width: 90px;  }

/* La colonne Client prend le reste et casse proprement les emails longs */
#gestionTable col.col-client { width: auto; }
#gestionTable td.col-client,
#gestionTable th#thClient {
  overflow-wrap: anywhere;  /* casse au besoin */
  word-break: break-word;
  white-space: normal;      /* surtout pas nowrap ici */
}

/* Empêche le wrap pour les colonnes "compactes" */
#gestionTable td.col-date,
#gestionTable td.col-no,
#gestionTable td.col-amount,
#gestionTable td.col-method,
#gestionTable td.col-status,
#gestionTable td.col-action {
  white-space: nowrap;
}

/* Action : boutons à l’horizontale */
#gestionTable td.col-action {
  text-align: center;
}
#gestionTable td.col-action .btn-icon + .btn-icon { margin-left: 8px; }

/* Ne jamais souligner les icônes dans les liens de menu */
#userAdminBar .user-admin-content .menu-link i,
#userAdminBar .user-admin-content #adminMenu a i,
.navbar .nav-link i {
  text-decoration: none !important;
}

#userAdminBar .user-admin-content .menu-link:hover i,
#userAdminBar .user-admin-content #adminMenu a:hover i,
.navbar .nav-link:hover i {
  text-decoration: none !important;
}


/* ==== Mobile navbar: additions (safe, appended) ==== */

/* Desktop: mobile bits hidden */
@media (min-width: 992px){
  .mobile-icons { display: none !important; }
  #navbarAccount { display: none !important; }
}

/* Mobile: hide old side admin bar; hamburger keeps scrollspy styles */
@media (max-width: 991.98px){
  #userAdminBar { display: none !important; }

  /* If the cart exists inside the hamburger too, hide it (we have the top icon) */
  #navbarNav a[href$="panier.html"],
  #navbarNav .nav-item.protected { display: none !important; }

  /* Active color for account menu and email (match desktop red) */
  #navbarAccount .nav-link.active { color: #fa071a !important; font-weight: 600; }
  #navbarAccount #accountEmail     { color: #fa071a !important; font-weight: 600; }

  /* Cart icon active state on panier.html */
  #cartBtnMobile.active i { color: #fa071a !important; }
}

/* Mobile icons look */
.mobile-icons .navbar-toggler{
  border: 0;
  padding: .25rem .5rem;
  margin-left: .35rem;
}
.mobile-icons .navbar-toggler i{
  font-size: 1.35rem;
  color: #ffca08;
}

/* Active (rouge) pour les liens du menu connecté (mini-barre droite) */
#userAdminBar .user-admin-content .menu-link.active,
#userAdminBar .user-admin-content #adminMenu a.active {
  color: #fa071a !important;   /* même rouge que le reste du site */
  font-weight: 600;
}

/* Rendre l'input fichier invisible mais accessible (focus via label/JS) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Conteneur du bouton de fichier */
.custom-file-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
}

.custom-file-btn .btn-file {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height :40px;
}

.custom-file-btn .file-name {
  max-width: 60vw;            /* s’adapte au mobile */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  color: #6c757d;             /* texte muted */
}

.custom-file-btn .btn-file-clear {
  padding: 0 .25rem;
}

/* Gestion Équipement : un champ par ligne */
#equipForm .form-row > .form-group {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
#equipForm .form-group {
  width: 100%;
}


  /* ----- Profil du parent : style "panel sombre + accent rouge" ----- */
  #parentProfileSection.parent-profile-card {
    border: 0;
    position: relative;
    overflow: hidden;
  }


  /* Titre interne */
  #parentProfileSection .pp-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
  
    border-radius: 6px;
    font-weight: 600;
    color: #fff;
  }
  #parentProfileSection .pp-header i {
    font-size: 1.1rem;
    line-height: 1;
  }

  /* Grille d’infos */
  #parentProfileSection .pp-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
  }
  #parentProfileSection .pp-item:last-child {
    border-bottom: 0;
  }

  /* Libellé = jaune club (cohérent avec le site) */
  #parentProfileSection .pp-label {
    min-width: 180px;
    font-weight: 600;
    color: #ffca08; /* jaune club */
  }

  /* Valeur */
  #parentProfileSection .pp-value {
    color: #fff;
    word-break: break-word;
  }

  /* Responsive : libellé au-dessus en mobile */
  @media (max-width: 575.98px) {
    #parentProfileSection .pp-item {
      flex-direction: column;
      gap: 4px;
      padding: 8px 0;
    }
    #parentProfileSection .pp-label {
      min-width: 0;
    }
  }