/* ============================================================
   Annuaire Adhérents UNTEC — Harmonie
   Charte : bleu Pantone 2935C #005CA9 / vert Pantone 375C #9AC43F
   ============================================================ */

:root {
    --bleu: #005CA9;
    --bleu-80: #337CBA;
    --bleu-60: #669DCB;
    --bleu-40: #99BEDD;
    --bleu-20: #CCDEEE;
    --bleu-10: #E6EFF6;
    --bleu-fonce: #004A88;
    --bleu-nuit: #003A6B;
    --vert: #9AC43F;
    --vert-80: #AED065;
    --vert-60: #C2DC8C;
    --vert-40: #D7E7B2;
    --vert-20: #EBF3D9;
    --vert-10: #F5F9EC;
    --vert-fonce: #7FA82E;
    --encre: #1B2A3A;
    --gris: #5C6B7A;
    --gris-clair: #8A97A5;
    --fond: #F4F7FA;
    --blanc: #FFFFFF;
    --rouge: #D64545;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-sm: 14px;
    --ombre: 0 4px 24px rgba(0, 58, 107, .08);
    --ombre-hover: 0 12px 32px rgba(0, 58, 107, .16);
    --transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    background: var(--fond) url('../images/bg-login.jpg') center / cover no-repeat fixed;
    color: var(--encre);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Le pied de page reste collé en bas même quand le contenu est court */
.pied { margin-top: auto; }

/* En flex colonne, les sections centrées par marges auto doivent garder leur pleine largeur */
.stats, .zone-filtres, .zone-resultats, .page-gestion { width: 100%; }

img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ---------- Animations ---------- */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes pulseRing {
    0% { transform: scale(.9); opacity: .6; }
    70% { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.anim-up { animation: fadeUp .55s cubic-bezier(.22, .8, .36, 1) both; }

/* ---------- Surcouche de chargement (connexion / déconnexion) ---------- */

.surcouche-chargement {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: linear-gradient(150deg, rgba(0, 58, 107, .82) 0%, rgba(0, 26, 51, .88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.surcouche-chargement.visible { display: flex; animation: fadeIn .3s ease both; }

.anneau {
    position: relative;
    width: 96px;
    height: 96px;
}

.anneau::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--vert) 0%, var(--bleu-60) 35%, var(--bleu) 55%, transparent 75%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: tourner 1.1s linear infinite;
}

.anneau-centre {
    position: absolute;
    inset: 12px;
    background: var(--blanc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bleu);
    box-shadow: 0 8px 26px rgba(0, 26, 51, .4);
    animation: floaty 2.6s ease-in-out infinite;
}

.texte-chargement {
    color: var(--blanc);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .4px;
    animation: fadeIn 1.2s ease infinite alternate;
}

/* ============================================================
   PAGE DE CONNEXION
   ============================================================ */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse 60% 50% at 12% 0%, rgba(204, 222, 238, .55) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 92% 100%, rgba(235, 243, 217, .55) 0%, transparent 60%),
        url('../images/bg-login.jpg') center / cover no-repeat fixed;
    background-color: var(--fond);
}

.login-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    width: 100%;
    max-width: 980px;
    min-height: 600px;
    background: var(--blanc);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 58, 107, .16);
    overflow: hidden;
    animation: fadeUp .6s cubic-bezier(.22, .8, .36, 1) both;
}

.login-form-pane {
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 34px;
}

.login-logos img { height: 54px; width: auto; object-fit: contain; }

.login-logos .logo-sep {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, transparent, var(--bleu-40), transparent);
}

.login-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--encre);
    letter-spacing: -.3px;
}

.login-subtitle {
    text-align: center;
    color: var(--gris);
    font-size: 14.5px;
    margin-top: 8px;
    margin-bottom: 30px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--gris-clair);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 26px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bleu-20);
}

.champ { margin-bottom: 20px; }

.champ label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
    margin-bottom: 8px;
}

.champ-enveloppe { position: relative; }

.champ-enveloppe .champ-icone {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-clair);
    display: flex;
    transition: var(--transition);
    pointer-events: none;
}

.champ input {
    width: 100%;
    padding: 14px 16px 14px 46px;
    border: 1.5px solid var(--bleu-20);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--encre);
    background: var(--fond);
    outline: none;
    transition: var(--transition);
}

.champ input::placeholder { color: var(--gris-clair); }

.champ input:focus {
    border-color: var(--bleu);
    background: var(--blanc);
    box-shadow: 0 0 0 4px var(--bleu-10);
}

.champ-enveloppe:focus-within .champ-icone { color: var(--bleu); }

.btn-oeil {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    color: var(--gris-clair);
    display: flex;
    border-radius: 10px;
    transition: var(--transition);
}

.btn-oeil:hover { color: var(--bleu); background: var(--bleu-10); }

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 13.5px;
}

.login-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gris);
    cursor: pointer;
    user-select: none;
}

.login-options input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--bleu);
    cursor: pointer;
}

.btn-connexion {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    color: var(--blanc);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(0, 92, 169, .3);
    position: relative;
    overflow: hidden;
}

.btn-connexion::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%);
    background-size: 800px 100%;
    background-repeat: no-repeat;
    background-position: -400px 0;
}

.btn-connexion:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 92, 169, .42);
}

.btn-connexion:hover::after { animation: shimmer .9s ease; }

.btn-connexion:active { transform: translateY(0); }

.erreur-box {
    background: #FDECEC;
    border: 1px solid #F5C6C6;
    color: var(--rouge);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13.5px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: fadeUp .35s ease both;
}

.login-note {
    margin-top: 26px;
    text-align: center;
    font-size: 12.5px;
    color: var(--gris-clair);
    line-height: 1.6;
}

/* Volet visuel droit */

.login-visuel {
    position: relative;
    background: linear-gradient(160deg, var(--bleu) 0%, var(--bleu-fonce) 55%, var(--bleu-nuit) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    overflow: hidden;
    color: var(--blanc);
}

.login-visuel .cercle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cercle-1 {
    width: 320px; height: 320px;
    border: 1.5px solid rgba(255, 255, 255, .12);
    top: -90px; right: -90px;
    animation: floaty 9s ease-in-out infinite;
}

.cercle-2 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(154, 196, 63, .28) 0%, transparent 70%);
    bottom: -40px; left: -60px;
    animation: floaty 7s ease-in-out infinite reverse;
}

.cercle-3 {
    width: 120px; height: 120px;
    border: 1.5px dashed rgba(154, 196, 63, .45);
    bottom: 90px; right: 46px;
    animation: floaty 11s ease-in-out infinite;
}

.points-grille {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1.3px, transparent 1.3px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
}

.visuel-macaron {
    position: relative;
    background: var(--blanc);
    border-radius: var(--radius-lg);
    padding: 26px 34px;
    box-shadow: 0 18px 44px rgba(0, 26, 51, .4);
    animation: floaty 6s ease-in-out infinite;
    z-index: 2;
}

.visuel-macaron img { height: 76px; width: auto; display: block; }

.visuel-macaron::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 28px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    animation: pulseRing 3s ease-out infinite;
}

.visuel-titre {
    margin-top: 44px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    z-index: 2;
}

.visuel-titre .accent { color: var(--vert); }

.visuel-texte {
    margin-top: 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    text-align: center;
    max-width: 320px;
    line-height: 1.65;
    z-index: 2;
}

.visuel-valeurs {
    margin-top: 34px;
    display: flex;
    gap: 12px;
    z-index: 2;
}

.valeur-puce {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    transition: var(--transition);
}

.valeur-puce:hover {
    background: rgba(154, 196, 63, .3);
    border-color: var(--vert);
    transform: translateY(-2px);
}

/* ============================================================
   ANNUAIRE
   ============================================================ */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bleu-20);
    box-shadow: 0 2px 16px rgba(0, 58, 107, .06);
}

.entete-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.entete-logos {
    display: flex;
    align-items: center;
    gap: 18px;
}

.entete-logos img { height: 42px; width: auto; object-fit: contain; transition: var(--transition); }
.entete-logos img:hover { transform: scale(1.05); }

.entete-logos .logo-sep {
    width: 1px;
    height: 34px;
    background: var(--bleu-20);
}

.entete-titre { line-height: 1.2; }

.entete-titre strong {
    display: block;
    font-size: 16px;
    color: var(--bleu);
    letter-spacing: -.2px;
}

.entete-titre span {
    font-size: 12px;
    color: var(--gris);
}

.entete-droite {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chip-utilisateur {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bleu-10);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bleu-fonce);
    transition: var(--transition);
}

.chip-utilisateur:hover {
    background: var(--bleu-20);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 92, 169, .18);
}

.chip-utilisateur .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce));
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: var(--transition);
}

.chip-utilisateur:hover .avatar {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 4px 12px rgba(0, 92, 169, .35);
}

.btn-deconnexion {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--blanc);
    color: var(--gris);
    border: 1.5px solid var(--bleu-20);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-deconnexion:hover {
    color: var(--rouge);
    border-color: #F5C6C6;
    background: #FDECEC;
    transform: translateY(-1px);
}

/* Bandeau héro */

.hero {
    position: relative;
    background: linear-gradient(150deg, var(--bleu) 0%, var(--bleu-fonce) 60%, var(--bleu-nuit) 100%);
    color: var(--blanc);
    overflow: hidden;
}

.hero .points-grille { opacity: .8; }

.hero .cercle-hero-1 {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .1);
    top: -160px; right: 6%;
    animation: floaty 10s ease-in-out infinite;
}

.hero .cercle-hero-2 {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(154, 196, 63, .3) 0%, transparent 70%);
    bottom: -60px; left: 4%;
    animation: floaty 8s ease-in-out infinite reverse;
}

.hero-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 52px 28px 92px;
    text-align: center;
    z-index: 2;
}

.hero h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.5px;
}

.hero h1 .accent { color: var(--vert); }

.hero p {
    margin-top: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
}

.barre-recherche {
    position: relative;
    max-width: 640px;
    margin: 30px auto 0;
}

.barre-recherche .icone-loupe {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-clair);
    display: flex;
    pointer-events: none;
}

.barre-recherche input {
    width: 100%;
    padding: 18px 56px 18px 58px;
    border: none;
    border-radius: 999px;
    font-size: 15.5px;
    color: var(--encre);
    background: var(--blanc);
    outline: none;
    box-shadow: 0 12px 36px rgba(0, 26, 51, .35);
    transition: var(--transition);
}

.barre-recherche input:focus {
    box-shadow: 0 12px 36px rgba(0, 26, 51, .35), 0 0 0 4px rgba(154, 196, 63, .5);
}

.btn-effacer {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--bleu-10);
    color: var(--bleu);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-effacer:hover { background: var(--bleu-20); transform: translateY(-50%) scale(1.08); }
.btn-effacer.visible { display: flex; }

/* Statistiques */

.stats {
    max-width: 1280px;
    margin: -52px auto 0;
    padding: 0 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 3;
}

.stat-carte {
    background:
        linear-gradient(var(--blanc), var(--blanc)) padding-box,
        linear-gradient(135deg, var(--bleu) 0%, var(--bleu-60) 45%, var(--vert) 100%) border-box;
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--ombre);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
}

.stat-carte:hover {
    transform: translateY(-7px) scale(1.03);
    box-shadow: 0 18px 40px rgba(0, 92, 169, .28);
    background:
        linear-gradient(var(--blanc), var(--blanc)) padding-box,
        linear-gradient(315deg, var(--bleu) 0%, var(--bleu-60) 45%, var(--vert) 100%) border-box;
}

.stat-icone {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.stat-icone.bleu { background: var(--bleu-10); color: var(--bleu); }
.stat-icone.vert { background: var(--vert-20); color: var(--vert-fonce); }

.stat-carte:hover .stat-icone {
    transform: scale(1.14) rotate(-8deg);
}

.stat-carte:hover .stat-icone.bleu {
    background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce));
    color: var(--blanc);
    box-shadow: 0 6px 16px rgba(0, 92, 169, .35);
}

.stat-carte:hover .stat-icone.vert {
    background: linear-gradient(135deg, var(--vert), var(--vert-fonce));
    color: var(--blanc);
    box-shadow: 0 6px 16px rgba(127, 168, 46, .4);
}

.stat-valeur {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--encre);
    line-height: 1.1;
    transition: var(--transition);
}

.stat-carte:hover .stat-valeur { color: var(--bleu); }

.stat-libelle { font-size: 13px; color: var(--gris); margin-top: 2px; }

/* Filtres régions */

.zone-filtres {
    max-width: 1280px;
    margin: 36px auto 0;
    padding: 0 28px;
}

.zone-filtres h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--encre);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.zone-filtres h2 .trait {
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--bleu), var(--vert));
}

.chips-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-region {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--blanc);
    border: 1.5px solid var(--bleu-20);
    color: var(--gris);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    transition: var(--transition);
}

.chip-region .compteur {
    background: var(--bleu-10);
    color: var(--bleu);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 700;
    transition: var(--transition);
}

.chip-region:hover {
    border-color: var(--bleu);
    color: var(--bleu);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 92, 169, .14);
}

.chip-region.actif {
    background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce));
    border-color: var(--bleu);
    color: var(--blanc);
    box-shadow: 0 6px 18px rgba(0, 92, 169, .3);
}

.chip-region.actif .compteur {
    background: rgba(255, 255, 255, .2);
    color: var(--blanc);
}

/* Résultats */

.zone-resultats {
    max-width: 1280px;
    margin: 30px auto 0;
    padding: 0 28px 70px;
}

.resultats-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.resultats-compte { font-size: 14px; color: var(--gris); }
.resultats-compte strong { color: var(--bleu); font-size: 16px; }

.btn-reinitialiser {
    display: none;
    align-items: center;
    gap: 8px;
    border: none;
    background: var(--vert-20);
    color: var(--vert-fonce);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    transition: var(--transition);
}

.btn-reinitialiser:hover { background: var(--vert-40); transform: translateY(-1px); }
.btn-reinitialiser.visible { display: flex; }

.grille-adherents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 20px;
}

.carte-adherent {
    background: var(--blanc);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--ombre);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    animation: fadeUp .45s ease both;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.carte-adherent:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-hover);
    border-color: var(--bleu-40);
}

.carte-haut {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar-adherent {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--blanc);
    flex-shrink: 0;
    transition: var(--transition);
}

.carte-adherent:hover .avatar-adherent { transform: scale(1.07) rotate(-3deg); }

.avatar-bleu { background: linear-gradient(135deg, var(--bleu-80), var(--bleu-fonce)); }
.avatar-vert { background: linear-gradient(135deg, var(--vert), var(--vert-fonce)); }

.carte-identite { min-width: 0; }

.carte-nom {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--encre);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-societe {
    font-size: 13px;
    font-weight: 600;
    color: var(--bleu);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-infos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--gris);
}

.carte-info-ligne {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.carte-info-ligne svg { flex-shrink: 0; color: var(--gris-clair); }

.carte-info-ligne span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--fond);
    padding-top: 14px;
    margin-top: auto;
}

.badge-region {
    background: var(--vert-20);
    color: var(--vert-fonce);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carte-actions { display: flex; gap: 6px; }

.action-rapide {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: var(--bleu-10);
    color: var(--bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    text-decoration: none;
}

.action-rapide:hover {
    background: var(--bleu);
    color: var(--blanc);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 92, 169, .3);
}

/* Chargement progressif */

.chargeur {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 0 8px;
    color: var(--gris);
    font-size: 13.5px;
    font-weight: 600;
}

.chargeur.visible { display: flex; }

.spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--bleu-20);
    border-top-color: var(--bleu);
    animation: tourner .8s linear infinite;
    flex-shrink: 0;
}

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

@keyframes apparaitre {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.carte-adherent.apparition { animation: apparaitre .5s cubic-bezier(.22, .8, .36, 1) both; }

/* État vide */

.etat-vide {
    display: none;
    text-align: center;
    padding: 70px 20px;
    animation: fadeUp .4s ease both;
}

.etat-vide.visible { display: block; }

.etat-vide .icone-vide {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--bleu-10);
    color: var(--bleu-60);
    display: flex;
    align-items: center;
    justify-content: center;
}

.etat-vide h3 { font-size: 18px; color: var(--encre); }
.etat-vide p { margin-top: 8px; font-size: 14px; color: var(--gris); }

/* Modale détail */

.modale-fond {
    position: fixed;
    inset: 0;
    background: rgba(11, 33, 53, .55);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modale-fond.visible { display: flex; animation: fadeIn .25s ease both; }

.modale {
    background: var(--blanc);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(0, 26, 51, .4);
    animation: fadeUp .35s cubic-bezier(.22, .8, .36, 1) both;
}

.modale-entete {
    position: relative;
    background: linear-gradient(150deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
    color: var(--blanc);
    padding: 30px 30px 26px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}

.modale-entete .points-grille { opacity: .5; }

.modale-fermer {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 2;
}

.modale-fermer:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

.modale-identite {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 2;
}

.modale-identite .avatar-adherent {
    width: 62px;
    height: 62px;
    font-size: 20px;
    border-radius: var(--radius);
}

.modale-nom { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }

.modale-societe {
    margin-top: 3px;
    font-size: 14px;
    color: var(--vert);
    font-weight: 700;
}

.modale-badge {
    margin-top: 8px;
    display: inline-block;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 4px 13px;
    font-size: 11.5px;
    font-weight: 600;
}

.modale-corps { padding: 26px 30px 30px; }

.modale-section-titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--gris-clair);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modale-section-titre .trait {
    width: 20px;
    height: 2.5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--bleu), var(--vert));
}

.detail-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

.detail-ligne:hover { background: var(--bleu-10); }

.detail-icone {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--bleu-10);
    color: var(--bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.detail-ligne:hover .detail-icone { background: var(--bleu); color: var(--blanc); }

.detail-libelle { font-size: 11.5px; color: var(--gris-clair); font-weight: 600; }

.detail-valeur {
    font-size: 14px;
    color: var(--encre);
    font-weight: 600;
    word-break: break-word;
}

.detail-vide { color: var(--gris-clair); font-style: italic; font-weight: 500; }

/* ============================================================
   GESTION DES PARTENAIRES
   ============================================================ */

.btn-partenaires {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce));
    color: var(--blanc);
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(0, 92, 169, .25);
}

.btn-partenaires:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 92, 169, .4);
}

.page-gestion {
    max-width: 1360px;
    margin: 0 auto;
    padding: 40px 28px 70px;
}

.gestion-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.gestion-titre h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--encre);
}

.gestion-titre p {
    margin-top: 5px;
    font-size: 14px;
    color: var(--gris);
}

.btn-ajouter {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--vert), var(--vert-fonce));
    color: var(--blanc);
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(127, 168, 46, .35);
}

.btn-ajouter:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(127, 168, 46, .48);
}

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
    animation: fadeUp .4s ease both;
}

.flash-succes {
    background: var(--vert-20);
    border: 1px solid var(--vert-60);
    color: var(--vert-fonce);
}

.flash-erreur {
    background: #FDECEC;
    border: 1px solid #F5C6C6;
    color: var(--rouge);
}

.tableau-enveloppe {
    background: var(--blanc);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    overflow-x: auto;
    animation: fadeUp .45s ease both;
}

.tableau-partenaires {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tableau-partenaires thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--bleu);
    background: var(--bleu-10);
    white-space: nowrap;
}

.cel-id {
    font-weight: 700;
    color: var(--bleu);
    font-size: 13px;
}

.cel-region {
    color: var(--gris);
    white-space: nowrap;
}

.tableau-partenaires thead th:first-child { border-radius: var(--radius) 0 0 0; }
.tableau-partenaires thead th:last-child { border-radius: 0 var(--radius) 0 0; }

.tableau-partenaires tbody tr {
    border-top: 1px solid var(--fond);
    transition: var(--transition);
}

.tableau-partenaires tbody tr:hover {
    background: linear-gradient(90deg, var(--bleu-10) 0%, rgba(235, 243, 217, .5) 100%);
    box-shadow: inset 4px 0 0 var(--bleu);
}

.tableau-partenaires tbody tr:hover .partenaire-nom { color: var(--bleu); }

.tableau-partenaires tbody tr:hover .avatar-adherent {
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 5px 14px rgba(0, 92, 169, .3);
}

.tableau-partenaires tbody tr:hover .cel-id { color: var(--vert-fonce); }

.tableau-partenaires td {
    padding: 12px 14px;
    vertical-align: middle;
}

.tableau-partenaires thead th { padding-left: 14px; padding-right: 14px; }

.cel-identite {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cel-identite .avatar-adherent {
    width: 38px;
    height: 38px;
    font-size: 13px;
    border-radius: 11px;
}

.partenaire-nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--encre);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-admin {
    background: var(--bleu-10);
    color: var(--bleu);
    border: 1px solid var(--bleu-40);
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.badge-vous {
    background: var(--vert-20);
    color: var(--vert-fonce);
    border: 1px solid var(--vert-60);
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.cel-email {
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.cel-date {
    font-size: 12.5px;
    color: var(--gris-clair);
    white-space: nowrap;
}

.badge-partenaire {
    background: var(--fond);
    color: var(--gris);
    border: 1px solid var(--bleu-20);
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.partenaire-actions { display: flex; gap: 8px; justify-content: flex-end; }

.btn-editer,
.btn-supprimer {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-editer { background: var(--bleu-10); color: var(--bleu); }

.btn-editer:hover {
    background: var(--bleu);
    color: var(--blanc);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 92, 169, .3);
}

.btn-supprimer { background: #FDECEC; color: var(--rouge); }

.btn-supprimer:hover {
    background: var(--rouge);
    color: var(--blanc);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(214, 69, 69, .35);
}

.btn-supprimer:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Formulaire en modale */

.champ-simple input { padding: 13px 16px; }

.champ select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--bleu-20);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--encre);
    background: var(--fond);
    outline: none;
    transition: var(--transition);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.champ select:focus {
    border-color: var(--bleu);
    background-color: var(--blanc);
    box-shadow: 0 0 0 4px var(--bleu-10);
}

.champ-mdp input { padding-right: 92px; font-family: 'Consolas', monospace; letter-spacing: .5px; }

.champ-boutons {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

.btn-champ {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: var(--bleu-10);
    color: var(--bleu);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-champ:hover {
    background: var(--bleu);
    color: var(--blanc);
    transform: translateY(-1px);
}

.btn-champ.copie-ok {
    background: var(--vert);
    color: var(--blanc);
}

.champ-case {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--gris);
    cursor: pointer;
    user-select: none;
    margin-bottom: 20px;
}

.champ-case input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--bleu);
    cursor: pointer;
}

.champ-aide {
    font-size: 12px;
    color: var(--gris-clair);
    margin-top: 6px;
}

.modale-boutons {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.btn-annuler {
    flex: 1;
    padding: 13px;
    border: 1.5px solid var(--bleu-20);
    border-radius: var(--radius-sm);
    background: var(--blanc);
    color: var(--gris);
    font-size: 14.5px;
    font-weight: 700;
    transition: var(--transition);
}

.btn-annuler:hover { border-color: var(--gris-clair); color: var(--encre); }

.btn-valider {
    flex: 1.4;
    padding: 13px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
    color: var(--blanc);
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(0, 92, 169, .3);
}

.btn-valider:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 92, 169, .42);
}

.btn-valider.danger {
    background: linear-gradient(135deg, var(--rouge) 0%, #B23A3A 100%);
    box-shadow: 0 6px 18px rgba(214, 69, 69, .3);
}

.btn-valider.danger:hover { box-shadow: 0 10px 26px rgba(214, 69, 69, .42); }

.modale-texte-confirmation {
    font-size: 14.5px;
    color: var(--gris);
    line-height: 1.7;
    margin-bottom: 22px;
}

.modale-texte-confirmation strong { color: var(--encre); }

@media (max-width: 1024px) {
    /* Sous cette largeur le tableau repasse en défilement horizontal */
    .tableau-partenaires { min-width: 880px; }
}

@media (max-width: 700px) {
    .gestion-entete { flex-direction: column; align-items: stretch; }
    .btn-ajouter { justify-content: center; }
    .page-gestion { padding: 28px 16px 60px; }
}

/* Pied de page */

.pied {
    border-top: 1px solid var(--bleu-20);
    background: var(--blanc);
    padding: 22px 28px;
}

.pied-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--gris);
}

.pied-logos { display: flex; align-items: center; gap: 14px; }
.pied-logos img { height: 28px; width: auto; opacity: .85; }

/* Notice élargissement de recherche */

.notice-region {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background: var(--vert-20);
    border: 1px solid var(--vert-60);
    color: var(--vert-fonce);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
    animation: fadeUp .35s ease both;
}

.notice-region.visible { display: flex; }
.notice-region svg { flex-shrink: 0; margin-top: 1px; }

/* Bouton remonter en haut */

.btn-haut {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce));
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0, 92, 169, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: var(--transition);
    z-index: 90;
}

.btn-haut.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-haut:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 92, 169, .5);
    background: linear-gradient(135deg, var(--bleu-80), var(--bleu));
}

/* Avertissement usage réservé */

.usage-modale { max-width: 560px; }

.usage-entete {
    background: linear-gradient(150deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
    padding: 26px 30px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--blanc);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.usage-icone {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(154, 196, 63, .25);
    border: 1.5px solid var(--vert);
    color: var(--vert);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}

.usage-titre { font-size: 18px; font-weight: 800; letter-spacing: .3px; z-index: 2; }

.usage-corps { padding: 26px 30px 30px; }

.usage-texte {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--gris);
}

.usage-texte strong { color: var(--encre); }

.btn-usage {
    margin-top: 24px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--vert) 0%, var(--vert-fonce) 100%);
    color: var(--blanc);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(127, 168, 46, .35);
}

.btn-usage:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(127, 168, 46, .48);
}

/* Mention usage dans le pied de page */

.pied-usage {
    max-width: 1280px;
    margin: 0 auto 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bleu-10);
    border: 1px solid var(--bleu-20);
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--gris);
}

.pied-usage svg { flex-shrink: 0; color: var(--bleu); margin-top: 2px; }
.pied-usage strong { color: var(--bleu-fonce); }

/* Durée d'accès (page connexion) */

.info-duree {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--vert-20);
    border: 1px solid var(--vert-60);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vert-fonce);
}

.info-duree svg { flex-shrink: 0; }

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

@media (max-width: 1024px) {
    .grille-adherents { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .hero-inner { padding: 44px 24px 84px; }
}

@media (max-width: 900px) {
    body, .login-body { background-attachment: scroll; }
    .login-card { grid-template-columns: 1fr; min-height: 0; }
    .login-visuel { display: none; }
    .login-form-pane { padding: 42px 32px; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .entete-titre span { display: none; }
    .hero h1 { font-size: 27px; }
}

@media (max-width: 700px) {
    .grille-adherents { grid-template-columns: 1fr; }
    .resultats-entete { flex-direction: column; align-items: flex-start; }
    .modale { max-width: 100%; }
    .modale-entete, .modale-corps, .usage-entete, .usage-corps { padding-left: 22px; padding-right: 22px; }
    .pied-inner { justify-content: center; text-align: center; }

    /* En-tête compact : boutons en icônes seules, pas de débordement */
    .entete-inner { padding: 10px 14px; gap: 10px; }
    .entete-titre { display: none; }
    .entete-logos { gap: 10px; }
    .entete-logos img { height: 30px; }
    .entete-droite { gap: 8px; }
    .lib-btn { display: none; }
    .btn-partenaires, .btn-deconnexion { padding: 10px; }
    .chip-utilisateur span:not(.avatar) { display: none; }
    .chip-utilisateur { padding: 4px; }
}

@media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; margin-top: -46px; }
    .stat-carte { padding: 16px 18px; }
    .hero h1 { font-size: 22px; }
    .hero p { font-size: 13.5px; }
    .hero-inner { padding: 36px 16px 76px; }
    .barre-recherche input { font-size: 16px; padding: 15px 52px; }
    .zone-filtres, .zone-resultats, .stats { padding-left: 16px; padding-right: 16px; }
    .chip-region { padding: 8px 13px; font-size: 12.5px; }
    .login-form-pane { padding: 34px 22px; }
    .login-logos { gap: 16px; }
    .login-logos img { height: 42px; }
    .login-title { font-size: 22px; }
    .login-body { padding: 14px; }
    .btn-haut { bottom: 18px; right: 18px; width: 46px; height: 46px; }
    .modale-identite { flex-direction: column; align-items: flex-start; }
    .visuel-valeurs { flex-wrap: wrap; justify-content: center; }
}