/*
 * CSS maison, sans framework (souche Enimad).
 *
 * Les teintes et polices du CLUB ne vivent pas ici : elles sont injectées par
 * le layout dans les variables --club-* depuis les paramètres (tâche 1.12).
 * Ce fichier ne définit que la structure, des neutres, et des DÉRIVÉS des
 * couleurs du club (color-mix) : jamais une couleur de club en dur.
 */

:root {
    --fond: #f5f6f8;
    --surface: #ffffff;
    --texte: #1f2430;
    --texte-attenue: #68738a;
    --bordure: #e4e7ee;
    --rayon: 12px;
    --ombre: 0 1px 2px rgb(16 24 40 / 0.06), 0 4px 14px rgb(16 24 40 / 0.05);
    --ombre-haute: 0 4px 8px rgb(16 24 40 / 0.06), 0 12px 32px rgb(16 24 40 / 0.10);

    /* Dérivés du thème du club. */
    --club-teinte: color-mix(in srgb, var(--club-couleur-1) 6%, white);
    --club-teinte-forte: color-mix(in srgb, var(--club-couleur-1) 14%, white);
    --club-sombre: color-mix(in srgb, var(--club-couleur-1) 82%, black);
    --club-halo: color-mix(in srgb, var(--club-couleur-1) 22%, transparent);

    /* Sémantiques (états, pas identité de marque). */
    --ok: #157347;
    --ok-fond: #ecf7f1;
    --erreur: #b42318;
    --erreur-fond: #fdf0ee;
    --alerte: #93610b;
    --alerte-fond: #fdf6e8;
}

* {
    box-sizing: border-box;
}

/* Filet de sécurité responsive : toute image (logo, photo…) reste dans son
   conteneur même sans classe dédiée. Les usages actuels ont déjà leurs
   propres contraintes (.image-actuelle…), ceci couvre les prochains. */
img {
    max-width: 100%;
    height: auto;
}

/* L'attribut hidden doit TOUJOURS gagner : sans ceci, un display posé par
   une classe (.message est en flex) écrase le display:none du navigateur :
   les bandeaux « cachés » (erreur d'émargement, bannière push) restaient
   visibles, vides. */
[hidden] {
    display: none !important;
}

/* Utilitaire standard : présent pour les lecteurs d'écran, invisible à l'œil
   (le bouton menu mobile n'a pas de place pour un libellé visible). */
.lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--club-police-texte);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--club-police-titre);
    color: var(--club-couleur-1);
    line-height: 1.25;
}

h1 {
    font-size: 1.65rem;
    margin: 0.4rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

a {
    color: var(--club-couleur-1);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--club-sombre);
}

/* --- En-tête ---------------------------------------------------------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 0.65rem 1.4rem;
    background: linear-gradient(105deg, var(--club-couleur-1), var(--club-sombre));
    color: #fff;
    box-shadow: 0 2px 12px rgb(16 24 40 / 0.18);
}

.entete .marque {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--club-police-titre);
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.entete .marque img {
    height: 34px;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
}

/* Contient nav + compte : c'est CE bloc qui se replie sous le bouton menu
   en dessous de 960px (cf. section Responsive). Au-dessus, il se comporte
   exactement comme l'ancienne paire nav+compte à plat dans .entete. */
.entete-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1.6rem;
    min-width: 0;
}

.entete nav {
    display: flex;
    gap: 0.35rem;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
}

/* Bouton hamburger : masqué par défaut, réservé au responsive (<960px). */
.bouton-menu {
    display: none;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.bouton-menu:hover {
    background: rgb(255 255 255 / 0.14);
}

.bouton-menu:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.4);
}

/* Trois barres en pur CSS (box-shadow) : pas d'icône à charger. */
.bouton-menu-barres,
.bouton-menu-barres::before,
.bouton-menu-barres::after {
    display: block;
    width: 1.3rem;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.bouton-menu-barres {
    position: relative;
    margin: 0 auto;
}

.bouton-menu-barres::before,
.bouton-menu-barres::after {
    content: '';
    position: absolute;
    left: 0;
}

.bouton-menu-barres::before {
    top: -6px;
}

.bouton-menu-barres::after {
    top: 6px;
}

.bouton-menu[aria-expanded="true"] .bouton-menu-barres {
    background: transparent;
}

.bouton-menu[aria-expanded="true"] .bouton-menu-barres::before {
    transform: translateY(6px) rotate(45deg);
}

.bouton-menu[aria-expanded="true"] .bouton-menu-barres::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* Groupes de nav par audience, séparés d'un filet. Les étiquettes de
   groupe (data-etiquette) ne s'affichent QUE dans le panneau mobile, où
   elles servent de titres de section : à plat dans le bandeau, elles
   l'allongeaient jusqu'à le faire replier sur deux étages. */
.nav-groupe {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.nav-groupe + .nav-groupe {
    margin-left: 0.55rem;
    padding-left: 0.9rem;
    border-left: 1px solid rgb(255 255 255 / 0.25);
}

.entete nav a {
    color: rgb(255 255 255 / 0.85);
    text-decoration: none;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.93rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.entete nav a:hover {
    background: rgb(255 255 255 / 0.14);
    color: #fff;
}

.entete nav a.actif {
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--club-couleur-2);
}

.entete .compte {
    font-size: 0.88rem;
    color: rgb(255 255 255 / 0.85);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    white-space: nowrap;
}

.entete .compte a {
    color: var(--club-couleur-2);
    text-decoration: none;
}

.entete .compte a:hover {
    text-decoration: underline;
    color: color-mix(in srgb, var(--club-couleur-2) 70%, white);
}

/* --- Contenu ---------------------------------------------------------- */

.conteneur {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.8rem 1.4rem 2.5rem;
}

.note {
    font-size: 0.87rem;
    color: var(--texte-attenue);
}

/* Messages flash : liseré + fond teinté, sémantique. */
.message {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--texte-attenue);
    box-shadow: var(--ombre);
}

.message.success {
    border-left-color: var(--ok);
    background: var(--ok-fond);
}

.message.error {
    border-left-color: var(--erreur);
    background: var(--erreur-fond);
    color: #7a1710;
}

.message.warning {
    border-left-color: var(--alerte);
    background: var(--alerte-fond);
}

/* Sous-navigation de la Configuration : onglets clairs sur fond de page,
   scindés en deux parties étiquetées (administration / technique). */
.sous-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--bordure);
}

.sous-nav-groupe {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.sous-nav-groupe + .sous-nav-groupe {
    margin-left: 0.4rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--bordure);
}

.sous-nav-groupe[data-etiquette]::before {
    content: attr(data-etiquette);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte-attenue);
    margin-right: 0.25rem;
    white-space: nowrap;
}

.sous-nav a {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--texte-attenue);
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.sous-nav a:hover {
    background: var(--club-teinte-forte);
    color: var(--club-couleur-1);
}

.sous-nav a.actif {
    background: var(--club-couleur-1);
    color: #fff;
    font-weight: 600;
}

.liste-roles {
    list-style: none;
    margin: 0;
    padding: 0;
}

.liste-roles li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.liste-roles li:last-child {
    border-bottom: none;
}

/* Tuiles de compteurs (file d'événements…). */
.stats-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.stat {
    /* grow, shrink, base 5.5rem : au-delà de 4-5 tuiles sur un téléphone,
       ça reflue sur une 2e ligne plutôt que d'écraser le texte. */
    flex: 1 1 5.5rem;
    min-width: 0;
    text-align: center;
    background: var(--club-teinte);
    border-radius: 10px;
    padding: 0.55rem 0.3rem 0.45rem;
}

.stat .valeur {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--club-police-titre);
    color: var(--club-couleur-1);
}

.stat .libelle {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-attenue);
    white-space: nowrap;
}

.stat.ok .valeur {
    color: var(--ok);
}

.stat.erreur .valeur {
    color: var(--erreur);
}

/* Variantes de badge sémantiques. */
.badge-ok {
    background: var(--ok);
}

.badge-erreur {
    background: var(--erreur);
}

.badge-attente {
    background: var(--texte-attenue);
}

.tableau-compact {
    font-size: 0.85rem;
}

.tableau-compact th,
.tableau-compact td {
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
}

.discret {
    color: var(--texte-attenue);
}

/* Lien à jeton remis à l'admin (mailer non branché) : copiable, cassable. */
.message.lien {
    border-left-color: var(--club-couleur-1);
    background: var(--club-teinte);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
    user-select: all;
}

/* --- Cartes ------------------------------------------------------------ */

.cartes {
    display: grid;
    /* min(260px, 100%) plutôt que 260px seul : sous 260px de large (petit
       téléphone, une fois le fond .conteneur retiré), une piste de grille ne
       peut pas rétrécir sous son minimum : elle dépasserait le viewport au
       lieu de passer en une colonne pleine largeur. */
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.1rem;
    margin: 1rem 0;
}

.carte,
fieldset {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.1rem 1.4rem 1.3rem;
    box-shadow: var(--ombre);
    margin: 0 0 1.1rem;
    min-inline-size: 0;
}

.carte h2,
legend {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--texte-attenue);
    font-family: var(--club-police-texte);
    font-weight: 700;
}

.carte h2 {
    margin: 0 0 0.7rem;
}

legend {
    padding: 0 0.5rem;
    margin-left: -0.5rem;
}

/* Les listes de définitions (fiches en lecture) : même habillage dans les
   cartes et dans les fieldsets : jamais le rendu navigateur brut (dd
   indentés qui semblent flotter). */
.carte dl,
fieldset dl {
    margin: 0;
}

.carte dt,
fieldset dt {
    font-size: 0.78rem;
    color: var(--texte-attenue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carte dd,
fieldset dd {
    margin: 0.1rem 0 0.7rem;
    font-size: 0.98rem;
}

/* --- Tableaux ----------------------------------------------------------- */

.defilement {
    overflow-x: auto;
}

.tableau,
.tableau-visibilite {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: var(--surface);
}

table.tableau {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}

.tableau th,
.tableau-visibilite th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--texte-attenue);
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid var(--bordure);
    background: color-mix(in srgb, var(--fond) 60%, white);
}

.tableau td,
.tableau-visibilite td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

.tableau tbody tr:last-child td {
    border-bottom: none;
}

.tableau tbody tr {
    transition: background 0.12s ease;
}

.tableau tbody tr:hover {
    background: var(--club-teinte);
}

fieldset .tableau {
    border: none;
    box-shadow: none;
}

.badge {
    display: inline-block;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--club-police-texte);
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* --- Formulaires -------------------------------------------------------- */

label {
    display: block;
    margin-top: 0.9rem;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--club-couleur-1);
    box-shadow: 0 0 0 3px var(--club-halo);
}

input[type="file"] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px dashed var(--bordure);
    border-radius: 10px;
    font: inherit;
    background: var(--club-teinte);
}

input[type="color"] {
    width: 72px;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: var(--club-couleur-1);
    width: 1rem;
    height: 1rem;
}

label:has(> input[type="checkbox"]),
.case-libelle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

/* Les cases d'un groupe de choix (moyens de paiement…) : chaque paire sur
   sa ligne, un peu d'air entre elles. */
.case-libelle + .case-libelle {
    margin-top: 0.15rem;
}

/* Champs édités DANS un tableau (tarifs, visibilité Mes données) : le
   défilement horizontal du tableau autorise une vraie largeur minimale :
   sans elle, la colonne se comprime jusqu'à un champ de trois lettres ou
   un sélecteur réduit à une seule lettre. */
.tableau input[type="text"] {
    min-width: 9rem;
}

.tableau input[type="number"] {
    min-width: 6rem;
}

.tableau select,
.tableau-visibilite select {
    min-width: 12rem;
}

.help-text {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--texte-attenue);
}

/* Erreurs de validation Symfony (ul/li au-dessus du champ). */
form ul {
    list-style: none;
    margin: 0.2rem 0;
    padding: 0;
}

form ul li {
    color: var(--erreur);
    font-size: 0.85rem;
}

/* --- Boutons ------------------------------------------------------------ */

.bouton {
    display: inline-block;
    margin-top: 1.1rem;
    padding: 0.55rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--club-couleur-1);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.bouton:hover {
    background: var(--club-sombre);
    color: #fff;
    box-shadow: var(--ombre);
}

.bouton:active {
    transform: translateY(1px);
}

.bouton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--club-halo);
}

.bouton-secondaire {
    background: transparent;
    border-color: color-mix(in srgb, var(--club-couleur-1) 45%, white);
    color: var(--club-couleur-1);
}

.bouton-secondaire:hover {
    background: var(--club-teinte-forte);
    color: var(--club-sombre);
    box-shadow: none;
}

.bouton-danger {
    background: var(--erreur);
}

.bouton-danger:hover {
    background: #8d1b12;
}

.actions-facture {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    align-items: center;
}

.actions-facture .bouton {
    margin-top: 0;
}

.formulaire-paiement {
    max-width: 400px;
}

.recherche {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
    max-width: 380px;
}

/* --- Écran Identité ----------------------------------------------------- */

.grille-identite {
    display: grid;
    /* Même piège que .cartes : min(320px, 100%) pour ne jamais dépasser un
       viewport étroit. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.1rem;
    margin-bottom: 0.5rem;
}

.grille-identite fieldset {
    margin-bottom: 0;
}

.image-actuelle img {
    max-height: 64px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 4px;
    background: #fff;
}

.image-actuelle.large img {
    max-height: 120px;
}

.apercu .apercu-entete {
    background: linear-gradient(105deg, var(--club-couleur-1), var(--club-sombre));
    color: #fff;
    font-family: var(--club-police-titre);
    padding: 0.65rem 1rem;
    border-radius: 10px 10px 0 0;
}

.apercu .apercu-corps {
    border: 1px solid var(--bordure);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 0.8rem 1rem 1.2rem;
}

.apercu h2 {
    margin: 0.2rem 0 0.4rem;
    font-size: 1.15rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--club-couleur-1);
    font-family: var(--club-police-titre);
}

/* --- Divers écrans ------------------------------------------------------- */

.export-donnees {
    margin-top: 1rem;
}

.texte-legal {
    max-width: 760px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.5rem 2rem 2rem;
}

/* Dépliants (historique…) : une vraie affordance de bouton, pas un texte
   qui détecte le clic. */
details {
    margin-top: 0.6rem;
}

details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    padding: 0.35rem 0.9rem;
    border: 1.5px solid color-mix(in srgb, var(--club-couleur-1) 35%, white);
    border-radius: 999px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--club-couleur-1);
    list-style: none;
    transition: background 0.15s ease;
}

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

details summary::before {
    content: '▸';
    font-size: 0.8em;
    transition: transform 0.15s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

details summary:hover {
    background: var(--club-teinte-forte);
}

details summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--club-halo);
}

details ul {
    margin: 0.6rem 0 0;
    padding: 0.6rem 1rem 0.6rem 2rem;
    font-size: 0.88rem;
    color: var(--texte-attenue);
    background: var(--club-teinte);
    border-radius: 10px;
}

/* --- Pages d'erreur (404, 403…) ------------------------------------------- */

.page-erreur {
    max-width: 520px;
    margin: 8vh auto 0;
    text-align: center;
}

.page-erreur .code-erreur {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    font-family: var(--club-police-titre);
    color: color-mix(in srgb, var(--club-couleur-1) 30%, white);
}

.page-erreur h1 {
    justify-content: center;
}

.page-erreur .actions-facture {
    justify-content: center;
    margin-top: 1.2rem;
}

/* --- Pied de page --------------------------------------------------------- */

.pied {
    max-width: 1100px;
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.4rem 1.8rem;
    font-size: 0.84rem;
    color: var(--texte-attenue);
    border-top: 1px solid var(--bordure);
    text-align: center;
}

.pied a {
    color: var(--texte-attenue);
}

/* --- Connexion et pages publiques ----------------------------------------- */

.connexion {
    max-width: 410px;
    margin: 9vh auto 0;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 16px;
    padding: 1.6rem 2.2rem 2.2rem;
    box-shadow: var(--ombre-haute);
    position: relative;
    overflow: hidden;
}

.connexion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--club-couleur-1), var(--club-couleur-2));
}

.connexion h1 {
    text-align: center;
    justify-content: center;
    font-size: 1.4rem;
}

.connexion .souvenir {
    margin-top: 1rem;
}

.connexion .bouton {
    width: 100%;
    text-align: center;
}

.aide {
    margin-top: 1.1rem;
    font-size: 0.88rem;
    text-align: center;
}

/* --- Responsive ------------------------------------------------------------ */

/* Largeurs intermédiaires (écran portable) : le bandeau d'un admin frôle la
   largeur disponible : on resserre (étiquettes de groupe masquées, liens et
   espaces plus compacts) pour qu'il TIENNE SUR UN ÉTAGE jusqu'au seuil du
   hamburger, au lieu de replier des liens sur une seconde ligne. */
@media (min-width: 961px) and (max-width: 1450px) {
    .entete,
    .entete-menu {
        gap: 0.9rem;
    }

    .entete .marque {
        font-size: 1rem;
    }

    .entete nav a {
        padding: 0.38rem 0.55rem;
        font-size: 0.88rem;
    }

    .nav-groupe + .nav-groupe {
        margin-left: 0.3rem;
        padding-left: 0.55rem;
    }

    .entete .compte {
        gap: 0.6rem;
        font-size: 0.84rem;
    }
}

/* Nav repliée en panneau déroulant : la nav d'un admin dépasse la dizaine
   de liens (Accueil, Mes données, Membres, Rencontres, Présences,
   Cotisations, Configuration, HelloAsso, Comptes…), ça ne tient plus sur
   une ligne bien avant le point de rupture « petit écran » classique. */
@media (max-width: 960px) {
    .bouton-menu {
        display: block;
        /* Le panneau replié ne pousse plus rien : sans ceci, le bouton
           flotterait au milieu de l'en-tête au lieu d'être ancré à droite. */
        margin-left: auto;
    }

    .entete-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        background: var(--club-sombre);
        box-shadow: 0 12px 24px rgb(16 24 40 / 0.25);
    }

    .entete-menu.ouvert {
        display: flex;
    }

    .entete-menu nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.6rem 1rem;
    }

    .nav-groupe {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-groupe + .nav-groupe {
        margin: 0.5rem 0 0;
        padding: 0.6rem 0 0;
        border-left: none;
        border-top: 1px solid rgb(255 255 255 / 0.18);
    }

    /* Dans le panneau, les étiquettes de groupe deviennent des titres de
       section (elles n'existent pas à plat dans le bandeau). */
    .nav-groupe[data-etiquette]::before {
        content: attr(data-etiquette);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        line-height: 1.25;
        color: var(--club-couleur-2);
        margin: 0 0 0.2rem;
    }

    .entete nav a {
        padding: 0.6rem 0.5rem;
        border-radius: 8px;
    }

    .entete-menu .compte {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.8rem 1rem 1rem;
        border-top: 1px solid rgb(255 255 255 / 0.18);
        white-space: normal;
    }

    .entete-menu .compte a {
        padding: 0.4rem 0.5rem;
    }
}

@media (max-width: 720px) {
    /* .entete est déjà position: sticky en base : ça suffit comme repère
       pour .entete-menu (position: absolute) dès 960px, pas besoin de le
       redéfinir ici. */
    .entete {
        padding: 0.6rem 1rem;
    }

    .conteneur {
        padding: 1.2rem 1rem 2rem;
    }

    .connexion {
        margin: 4vh 1rem 0;
        padding: 1.4rem 1.4rem 1.8rem;
    }

    h1 {
        font-size: 1.35rem;
    }

    .carte,
    fieldset {
        padding: 0.9rem 1rem 1.1rem;
    }

    /* Cibles tactiles confortables (44px, recommandation courante) : les
       formulaires à un seul bouton restent inline, pas de largeur forcée. */
    .bouton {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tableau th,
    .tableau-visibilite th,
    .tableau td,
    .tableau-visibilite td {
        padding: 0.55rem 0.6rem;
        font-size: 0.87rem;
    }

    /* Le tableau de visibilité (Mes données) est un FORMULAIRE, pas une
       grille à parcourir : plutôt qu'un défilement horizontal qui perd la
       colonne des libellés, chaque ligne devient un bloc empilé : donnée
       en titre, valeur en dessous, sélecteur pleine largeur. */
    .tableau-visibilite thead {
        display: none;
    }

    .tableau-visibilite,
    .tableau-visibilite tbody,
    .tableau-visibilite tr,
    .tableau-visibilite td {
        display: block;
    }

    .tableau-visibilite tr {
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--bordure);
    }

    .tableau-visibilite tr:last-child {
        border-bottom: none;
    }

    .tableau-visibilite td {
        padding: 0.1rem 0;
        border-bottom: none;
    }

    .tableau-visibilite td:first-child {
        font-weight: 600;
        font-size: 0.92rem;
    }

    .tableau-visibilite td:nth-child(2) {
        color: var(--texte-attenue);
    }

    .tableau-visibilite select {
        min-width: 0;
        margin-top: 0.2rem;
    }
}

/* Sous ce seuil, une ligne d'émargement (nom + 2 gros boutons) devient trop
   à l'étroit sur une seule ligne : on empile nom puis boutons. */
@media (max-width: 400px) {
    .ligne-emargement {
        flex-direction: column;
        align-items: stretch;
    }

    .ligne-emargement-boutons {
        justify-content: stretch;
    }

    .bouton-pointage {
        flex: 1;
    }
}

/* --- Émargement le jour J (tâche 3.5) ---------------------------------------
   Utilisé debout, sur un téléphone : grosses zones tactiles, une ligne par
   personne, recherche collante, aucun menu déroulant. */

.emargement-compteur {
    font-size: 1.05rem;
}

.emargement-recherche {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    margin-bottom: 0.8rem;
}

.emargement-liste {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ligne-emargement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.ligne-emargement-identite {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ligne-emargement-nom {
    font-weight: 600;
    font-size: 1.05rem;
}

.ligne-emargement-boutons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bouton-pointage {
    min-height: 3.2rem;
    min-width: 5.4rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--rayon);
    border: 2px solid var(--bordure);
    background: var(--surface);
    color: var(--texte-attenue);
    cursor: pointer;
    touch-action: manipulation;
}

.pointage-present.choisi {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.pointage-absent.choisi {
    background: var(--erreur);
    border-color: var(--erreur);
    color: #fff;
}

.emargement-bloc {
    margin-top: 1rem;
}

.emargement-formulaire {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.emargement-formulaire input[type="text"] {
    flex: 1 1 10rem;
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.emargement-cloture {
    margin-top: 2rem;
}

/* --- Onboarding (première connexion du créateur de l'espace) --------------
   Assistant plein écran, linéaire et animé : fond dégradé aux couleurs du
   club (mises à jour EN DIRECT pendant le choix), panneaux qui glissent,
   barre de progression, coche finale dessinée. Les animations respectent
   prefers-reduced-motion. */

.onboarding {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background:
        radial-gradient(1100px 500px at 15% -10%, color-mix(in srgb, var(--club-couleur-2) 45%, transparent), transparent 60%),
        linear-gradient(135deg, var(--club-couleur-1), var(--club-sombre));
    transition: background 0.3s ease;
}

.onboarding-carte {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: calc(var(--rayon) + 6px);
    box-shadow: 0 24px 70px rgb(10 18 34 / 0.35);
    padding: 1.6rem 2rem 2rem;
    animation: onboarding-apparition 0.5s ease both;
}

@keyframes onboarding-apparition {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* Progression : barre continue + jalons nommés. */
.onboarding-progression {
    height: 6px;
    border-radius: 999px;
    background: var(--bordure);
    overflow: hidden;
}

.onboarding-progression-barre {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--club-couleur-1), var(--club-couleur-2));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-jalons {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0.5rem 0 1.2rem;
    padding: 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #98a1b3;
}

.onboarding-jalons li {
    transition: color 0.3s ease;
}

.onboarding-jalons li.actif {
    color: var(--club-couleur-1);
    font-weight: 700;
}

/* Panneaux : un seul visible, entrée en glissement. */
.onboarding-panneau.actif {
    animation: onboarding-glisse 0.4s ease both;
}

@keyframes onboarding-glisse {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}

.onboarding-panneau h1 {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
}

.onboarding-emoji {
    font-size: 2.6rem;
    margin: 0.4rem 0 0;
    animation: onboarding-coucou 1.1s ease 0.4s 1;
    transform-origin: 70% 70%;
    display: inline-block;
}

@keyframes onboarding-coucou {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(16deg); }
    40%, 80% { transform: rotate(-8deg); }
}

.onboarding-pitch {
    color: #57606a;
    line-height: 1.55;
}

/* Les trois promesses de l'écran d'accueil, révélées en cascade. */
.onboarding-etapes-apercu {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0.4rem;
}

.onboarding-etapes-apercu li {
    padding: 0.45rem 0 0.45rem 1.9rem;
    position: relative;
    animation: onboarding-apparition 0.45s ease both;
}

.onboarding-etapes-apercu li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--club-couleur-2) 22%, white);
    color: var(--club-sombre);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.onboarding-etapes-apercu li:nth-child(1) { animation-delay: 0.15s; }
.onboarding-etapes-apercu li:nth-child(2) { animation-delay: 0.3s; }
.onboarding-etapes-apercu li:nth-child(3) { animation-delay: 0.45s; }

/* Champs : pleine largeur, généreux : c'est un écran d'accueil. */
.onboarding-panneau label {
    display: block;
    font-weight: 600;
    margin: 0.9rem 0 0.3rem;
}

.onboarding-panneau input[type="text"],
.onboarding-panneau input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-panneau input[type="text"]:focus,
.onboarding-panneau input[type="number"]:focus {
    outline: none;
    border-color: var(--club-couleur-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-couleur-1) 18%, transparent);
}

.onboarding-libelle {
    display: block;
    font-weight: 600;
    margin: 0.9rem 0 0.3rem;
}

/* Pastilles de couleur : le sélecteur natif, rond et cliquable. */
.onboarding-couleurs-choix {
    display: flex;
    gap: 1.4rem;
}

.onboarding-pastille {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    font-weight: 500 !important;
    margin: 0.2rem 0 !important;
    cursor: pointer;
}

.onboarding-pastille input[type="color"] {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bordure);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.onboarding-pastille input[type="color"]:hover {
    transform: scale(1.08);
}

.onboarding-logo-apercu {
    display: block;
    max-height: 64px;
    margin-top: 0.5rem;
    border-radius: 8px;
}

/* Interrupteur « adhésion payante » : bascule animée. */
.onboarding-interrupteur {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}

.onboarding-interrupteur input {
    position: absolute;
    opacity: 0;
}

.onboarding-interrupteur-piste {
    flex-shrink: 0;
    width: 2.9rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #cdd3de;
    position: relative;
    transition: background 0.2s ease;
}

.onboarding-interrupteur-piste::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.6rem - 6px);
    height: calc(1.6rem - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-interrupteur input:checked + .onboarding-interrupteur-piste {
    background: var(--club-couleur-1);
}

.onboarding-interrupteur input:checked + .onboarding-interrupteur-piste::after {
    transform: translateX(1.3rem);
}

.onboarding-interrupteur input:focus-visible + .onboarding-interrupteur-piste {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-couleur-1) 30%, transparent);
}

.onboarding-tarif-ligne {
    display: flex;
    gap: 1rem;
}

.onboarding-tarif-ligne > span {
    flex: 1;
}

/* Coche finale : cercle puis trait, dessinés au stylo. */
.onboarding-coche {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0.4rem 0 0.8rem;
}

.onboarding-coche circle,
.onboarding-coche path {
    fill: none;
    stroke: var(--club-couleur-1);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.onboarding-coche circle {
    stroke-dasharray: 208;
    stroke-dashoffset: 208;
    animation: onboarding-trace 0.7s ease 0.15s forwards;
}

.onboarding-coche path {
    stroke: var(--club-couleur-2);
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: onboarding-trace 0.4s ease 0.75s forwards;
}

@keyframes onboarding-trace {
    to { stroke-dashoffset: 0; }
}

.onboarding-recap {
    background: color-mix(in srgb, var(--club-couleur-1) 6%, white);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0.6rem 0 1rem;
}

.onboarding-recap dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #98a1b3;
    margin-top: 0.5rem;
}

.onboarding-recap dt:first-child {
    margin-top: 0;
}

.onboarding-recap dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
}

.onboarding-erreur {
    color: #b91c1c;
    background: #fdf0ef;
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    margin: 0.9rem 0 0;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.4rem;
}

.onboarding-actions .onboarding-principal {
    margin-left: auto;
    font-size: 1rem;
    padding: 0.65rem 1.6rem;
}

.onboarding-retour {
    border: none;
    background: none;
    color: #6a737d;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
    text-decoration: underline;
}

.onboarding-retour:hover {
    color: var(--club-couleur-1);
}

@media (max-width: 640px) {
    .onboarding {
        padding: 0.8rem;
        align-items: flex-start;
    }

    .onboarding-carte {
        padding: 1.2rem 1.1rem 1.5rem;
        margin-top: 0.6rem;
    }

    .onboarding-jalons {
        font-size: 0.62rem;
    }

    .onboarding-tarif-ligne {
        flex-direction: column;
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-carte,
    .onboarding-panneau.actif,
    .onboarding-etapes-apercu li,
    .onboarding-emoji {
        animation: none;
    }

    .onboarding-coche circle,
    .onboarding-coche path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .onboarding-progression-barre {
        transition: none;
    }
}

/* Étape « Vos membres » de l'onboarding : lignes prénom / nom / e-mail /
   échéance individuelle. La liste défile SUR ELLE-MÊME (hauteur bornée) :
   c'est elle qui scrolle quand on ajoute des personnes, jamais la page
   entière (demande Damien 17/09). */
.onboarding-membres {
    max-height: 15rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.2rem 0.5rem 0.2rem 0.1rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
}

.onboarding-membres-entete {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    color: var(--texte-attenue);
}

.onboarding-membres-entete span {
    flex: 1;
    min-width: 0;
}

.onboarding-membres-entete span:nth-child(4) {
    flex: 0 0 9.5rem;
}

.onboarding-membres-entete span:nth-child(5) {
    flex: 0 0 1.7rem;
}

.onboarding-membre-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    animation: onboarding-apparition 0.3s ease both;
}

.onboarding-membre-ligne input {
    flex: 1;
    min-width: 0;
}

.onboarding-membre-ligne input[type="date"] {
    flex: 0 0 9.5rem;
}

.onboarding-membre-retirer {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: #fff;
    color: var(--texte-attenue);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.onboarding-membre-retirer:hover {
    border-color: #d33;
    color: #d33;
}

@media (max-width: 640px) {
    .onboarding-membres {
        max-height: 17rem;
    }

    .onboarding-membres-entete {
        display: none;
    }

    .onboarding-membre-ligne {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        margin-bottom: 0.9rem;
    }

    .onboarding-membre-ligne input[type="date"] {
        flex-basis: auto;
    }

    .onboarding-membre-retirer {
        align-self: flex-end;
    }
}

/* Annuaire privé (5.1) : portrait en tête de carte. */
.annuaire-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bordure);
}

/* Recommandations (7.2/7.5) : lignes séparées d'un filet. */
.reco-ligne + .reco-ligne {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--bordure);
}

/* Tableau de bord bureau (6.1) : chiffres clés cliquables. */
.tdb {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.tdb a {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 0.8rem 1rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tdb a:hover {
    box-shadow: var(--ombre-haute);
    transform: translateY(-1px);
}

.tdb .tdb-chiffre {
    display: block;
    font-family: var(--club-police-titre);
    font-size: 1.6rem;
    color: var(--club-couleur-1);
    line-height: 1.2;
}

.tdb .tdb-libelle {
    display: block;
    font-size: 0.82rem;
    color: var(--texte-attenue);
}

.tdb a.tdb-alerte .tdb-chiffre {
    color: var(--erreur);
}

/* --- Menus déroulants du bandeau (demande Damien 17/09) ----------------- */
/* Les groupes étiquetés (Mon espace, Bureau, Administration) tiennent en UN
   déclencheur chacun : le bandeau reste sur un étage quel que soit le rôle.
   CSS pur : ouverture au survol ET au clavier (focus-within), aucun script.
   En mobile (<960px), le panneau hamburger reprend l'affichage à plat. */
.nav-groupe[data-etiquette] {
    position: relative;
}

.nav-menu-titre {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgb(255 255 255 / 0.85);
    font: inherit;
    font-size: 0.93rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-menu-titre:hover,
.nav-groupe[data-etiquette]:focus-within .nav-menu-titre {
    background: rgb(255 255 255 / 0.14);
    color: #fff;
}

.nav-menu-titre.actif {
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--club-couleur-2);
}

.nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
}

/* Pont invisible entre le déclencheur et le panneau : le survol ne se coupe
   pas dans l'interstice. */
.nav-groupe[data-etiquette]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.55rem;
}

.nav-menu-liens {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 12rem;
    padding: 0.45rem;
    background: var(--club-sombre);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgb(16 24 40 / 0.3);
}

.nav-groupe[data-etiquette]:hover .nav-menu-liens,
.nav-groupe[data-etiquette]:focus-within .nav-menu-liens {
    display: flex;
}

.entete nav .nav-menu-liens a {
    border-radius: 8px;
    white-space: nowrap;
}

@media (min-width: 961px) and (max-width: 1450px) {
    .nav-menu-titre {
        padding: 0.38rem 0.55rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 960px) {
    /* Panneau hamburger : le déclencheur disparaît (l'étiquette ::before
       sert de titre de section) et les liens reviennent à plat. */
    .nav-menu-titre {
        display: none;
    }

    .nav-groupe[data-etiquette]::after {
        content: none;
    }

    .nav-menu-liens {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
}