:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--success:#10b981;
--success-dark:#059669;

--background:#f5f7fb;
--card:#ffffff;

--text:#111827;
--muted:#6b7280;

--border:#e5e7eb;

--shadow:0 8px 20px rgba(15,23,42,.05);

}

*{

font-family:'Inter',sans-serif;

}

body{

background:var(--background);

}

/*==================================================
PAGE
==================================================*/

.matching-page{

padding:28px 0 45px;

}

/*==================================================
HEADER
==================================================*/

.matching-header{

display:flex;

justify-content:space-between;

align-items:center;

background:#fff;

padding:20px 24px;

border-radius:16px;

box-shadow:var(--shadow);

margin-bottom:18px;

}

.matching-header h1{

margin:0;

font-size:28px;

font-weight:800;

}

.matching-header p{

margin:4px 0 0;

font-size:14px;

color:#6b7280;

}

.matching-count{

background:#eef4ff;

color:#2563eb;

padding:10px 15px;

border-radius:10px;

font-weight:700;

}

/*==================================================
TOOLBAR
==================================================*/

.matching-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

gap:18px;

margin-bottom:22px;

}

.matching-tabs{

display:flex;

gap:10px;

flex-wrap:wrap;

}

.matching-tab{

padding:10px 18px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:10px;

text-decoration:none;

font-weight:600;

color:#374151;

transition:.2s;

}

.matching-tab:hover{

background:#eef4ff;

color:#2563eb;

}

.matching-tab.active{

background:#2563eb;

border-color:#2563eb;

color:#fff;

}

/*==================================================
SEARCH
==================================================*/

.search-box{

display:flex;

align-items:center;

gap:10px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:12px;

padding:10px 14px;

min-width:280px;

}

.search-box input{

border:none;

outline:none;

width:100%;

background:none;

}

/*==================================================
GRID
==================================================*/

.matching-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(290px,1fr));

gap:16px;

}

/*==================================================
CARD
==================================================*/

.match-item{

background:#fff;

border:1px solid #e5e7eb;

border-radius:16px;

padding:15px;

box-shadow:var(--shadow);

transition:.25s;

}

.match-item:hover{

transform:translateY(-3px);

border-color:#2563eb;

box-shadow:0 12px 24px rgba(37,99,235,.10);

}

/*==================================================
TOP
==================================================*/

.match-top{

display:flex;

gap:12px;

margin-bottom:12px;

}

.match-avatar img{

width:50px;

height:50px;

border-radius:50%;

object-fit:cover;

border:2px solid #eef4ff;

}

.match-avatar-placeholder{

width:50px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

font-size:16px;
font-weight:700;

border:2px solid #eef4ff;

text-transform:uppercase;

flex-shrink:0;

}

.match-info{

flex:1;

min-width:0;

}

.match-info h5{

display:flex;

align-items:center;

gap:6px;

margin:0;

font-size:16px;

font-weight:700;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.country-flag{

width:20px;

height:15px;

border-radius:2px;

object-fit:cover;

}

.match-meta{

margin-top:8px;

display:flex;

justify-content:space-between;

font-size:13px;

font-weight:600;

color:#6b7280;

}

/*==================================================
LANGUAGES
==================================================*/

.match-languages{

display:flex;

justify-content:space-between;

font-size:13px;

padding:12px 0;

border-top:1px solid #f1f5f9;

border-bottom:1px solid #f1f5f9;

margin-bottom:12px;

}

.match-languages strong{

display:block;

font-size:12px;

color:#6b7280;

margin-bottom:2px;

}

/*==================================================
MATCH
==================================================*/

.match-progress{

margin-bottom:10px;

}

.progress{

height:7px;

border-radius:999px;

background:#edf2f7;

}

.progress-bar{

background:#2563eb;

}

.match-badge{

font-size:13px;

font-weight:700;

margin-bottom:14px;

color:#2563eb;

}

/*==================================================
BUTTONS
==================================================*/

.match-actions{

display:flex;

gap:8px;

}

.match-actions a{

flex:1;

display:flex;

align-items:center;

justify-content:center;

padding:9px 10px;

border-radius:10px;

font-size:13px;

font-weight:600;

text-decoration:none;

transition:.2s;

}

.profile-btn{

background:#eef4ff;

color:#2563eb;

}

.profile-btn:hover{

background:#2563eb;

color:#fff;

}

.add-btn{

background:#10b981;

color:#fff;

}

.add-btn:hover{

background:#059669;

color:#fff;

}

/*==================================================
EMPTY
==================================================*/

.empty-matching{

background:#fff;

border-radius:16px;

padding:70px 25px;

text-align:center;

box-shadow:var(--shadow);

}

.empty-icon{

font-size:60px;

margin-bottom:16px;

}

/*=========================================
EMPTY SEARCH
=========================================*/

.search-empty{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

background:#fff;

border:1px dashed #dbe4f0;

border-radius:16px;

padding:40px 20px;

margin-top:18px;

box-shadow:0 8px 20px rgba(15,23,42,.04);

}

.search-empty i{

font-size:38px;

color:#2563eb;

margin-bottom:12px;

}

.search-empty h5{

margin:0 0 6px;

font-size:18px;

font-weight:700;

color:#111827;

}

.search-empty p{

margin:0;

font-size:14px;

color:#6b7280;

}


@media (max-width:768px){

.matching-page{

padding:20px 0 35px;

}

.matching-header{

flex-direction:column;

align-items:flex-start;

gap:16px;

padding:18px;

}

.matching-header h1{

font-size:24px;

}

.matching-header p{

font-size:13px;

}

.matching-header-right{

width:100%;

display:flex;

justify-content:center;

}

.matching-count{

width:100%;

text-align:center;

}

.matching-toolbar{

flex-direction:column;

align-items:stretch;

gap:14px;

}

.matching-tabs{

display:flex;

flex-direction:row;

gap:8px;

width:100%;

}

.matching-tab{

flex:1;

text-align:center;

}

.matching-search{

width:100%;

}

.search-box{

min-width:100%;

}

/* Deux cartes par ligne */

.matching-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

gap:12px;

}

/* Cartes plus compactes */

.match-item{

padding:12px;

}

.match-top{

gap:10px;

margin-bottom:10px;

}

.match-avatar img{

width:42px;

height:42px;

}

.match-info h5{

font-size:13px;

}

.match-meta{

font-size:11px;

margin-top:5px;

}

.match-languages{

font-size:11px;

padding:10px 0;

margin-bottom:10px;

}

.match-languages strong{

font-size:10px;

}

.progress{

height:6px;

}

.match-badge{

font-size:11px;

margin-bottom:10px;

}

.match-actions{

gap:6px;

}

.match-actions a{

padding:7px 8px;

font-size:11px;

}

.search-empty{

padding:30px 16px;

}

.search-empty i{

font-size:30px;

}

.search-empty h5{

font-size:16px;

}

.search-empty p{

font-size:13px;

}

.match-avatar-placeholder{

width:42px;
height:42px;

font-size:14px;

}

}

/* Très petits téléphones */

@media (max-width:400px){

.matching-grid{

grid-template-columns:1fr;

}

}


.language-name{
    color: #20209f;
    font-weight: 600;
}