/* =====================================================
   LAYOUT GLOBAL
===================================================== */
.page-wrapper {
    max-width: min(1400px, 95vw);
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

@media (max-width: 600px) {
    .page-wrapper {
        padding: 12px;
        border-radius: 0;
    }
}

/* =====================================================
   RESET
===================================================== */
* { box-sizing: border-box; margin:0; padding:0; }
img { display:block; }

/* =====================================================
   FORMULAIRE
===================================================== */
fieldset {
    border: 2px solid #d1d5db;
    border-radius: 14px;
    padding: 1.5rem 1.2rem;
    margin-bottom: 2rem;
    background: #f4f7fb;
}

legend {
    padding: 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #6366f1;
}

/* =====================================================
   RÉSUMÉ RECHERCHE
===================================================== */
.search-summary {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-summary .filter-name {
    font-weight: bold;
    font-size: 1.05em;
    color: #333;
}

@media (max-width: 500px) {
    .search-summary { font-size: 0.9em; }
}

/* =====================================================
   SWITCH AFFICHAGE
===================================================== */
.display-switch {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.display-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 20px;
    background: #f2f2f2;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #ddd;
    transition: 0.25s;
}

.display-btn:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

.display-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Icônes */
.icon-table,
.icon-grid {
    display: inline-block;
    width: 18px;
    height: 18px;
}

.icon-table {
    background: repeating-linear-gradient(to bottom,#333 0 3px,transparent 3px 6px);
}

.icon-grid {
    background:
        linear-gradient(to right,#333 1px,transparent 1px),
        linear-gradient(to bottom,#333 1px,transparent 1px);
    background-size: 6px 6px;
}

/*.badge-possession.cercle-vert,
.badge-possession.cercle-rouge{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-sizing:border-box;
}

.badge-possession.cercle-vert{
    border:3px solid #28a745;
}

.badge-possession.cercle-rouge{
    border:3px solid red !important;
    background: yellow;
}*/
/* =====================================================
   TABLEAU
===================================================== */
table.modern {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin: 2em auto;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

table.modern th,
table.modern td {
    padding: 0.5em 1em;
    text-align: center;
    border: 1px solid #ccc;
}

table.modern th {
    background: #e6fafa;
    font-weight: bold;
}

table.modern tr:hover {
    background: #f0f8ff;
}

/* cellule image NON compressée */
.photo-cell {
    width: 1%;
    white-space: nowrap;
}

/* image tableau */
.table-img-box {
    display: inline-block;
    position: relative;
    padding: 0 20px;
}

.table-img {
    width: auto;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
}

.table-img:hover {
    transform: scale(2.8);
    z-index: 9999;
    transform-origin: right center;
}

/* =====================================================
   GRILLE
===================================================== */
/* =====================================================
   GRILLE
===================================================== */
.cpa-grille {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

/* =====================================================
   CAS SPÉCIAL : GRILLE + RATIO 100
===================================================== */
.cpa-grille.ratio-100 .info {
    font-size: 0.75rem;
    line-height: 1.1;
}

.cpa-card {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
    text-align: center;
    z-index: 1;
}

/* 🔥 carte au-dessus des autres */
.cpa-card:hover {
    z-index: 10;
}

/* conteneur image */
.grid-img-box {
    position: relative;
    margin-bottom: 6px;
	z-index: 1;
}

/* image normale */
.grid-img-box img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.25s ease;
}

/* 🔥 zoom propre */
.cpa-card:hover img {
    transform: scale(2.8);
}

/* 🔥 badge caché uniquement sur la carte hover */
.cpa-card:hover .badge-possession {
    opacity: 0;
}

/* =====================================================
   BADGE
===================================================== */
.badge-possession{
    position: absolute;
    top: 6px;
    right: 6px;
	z-index: 999;

    width: 28px;
    height: 28px;

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

    border-radius: 50%;
    box-sizing: border-box;

    font-size: 14px;
    line-height: 1;
}

.badge-possession.cercle-vert{
    border: 3px solid #28a745;
    color: #28a745;
}

.badge-possession.cercle-rouge{
    border: 3px solid #dc3545;
    color: #dc3545;
}

/* =====================================================
   TEXTE / NO PHOTO
===================================================== */
.info {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.no-photo {
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    border-radius: 6px;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 700px) {
    .cpa-card { width: 45%; }
}

@media (max-width: 450px) {
    .cpa-card { width: 90%; }
}

/* =====================================================
   BOUTONS / ACTIONS
===================================================== */
.export-btn {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
}

.export-btn:hover {
    background: #15803d;
}

.export-btn.disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.7;
}

.actions-top,
.actions-bottom {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 25px 0;
}

.actions-wrapper {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 20px;
}

.action-btn {
    min-width: 220px;
    text-align: center;
    background: linear-gradient(90deg,#6366f1,#60a5fa);
    color: #fff;
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* =====================================================
   PAGINATION
===================================================== */
.pagination {
    text-align: center;
    margin: 25px 0;
}

.pagination .page,
.pagination .dots {
    display: inline-block;
    padding: 6px 10px;
    margin: 2px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.pagination .page:hover {
    background: #eee;
}

.pagination .current {
    background: #3b82f6;
    color: #fff;
    border-color: #2563eb;
}