/* ============================================================
   TERRA SERVICES FRONT - CSS v1.0.0
   ============================================================ */
:root {
    --ts-border:  #e8edf2;
    --ts-shadow:  0 2px 16px rgba(0,0,0,0.07);
    --ts-shadow-lg: 0 8px 32px rgba(0,0,0,0.13);
    --ts-radius:  14px;
    --ts-text:    #1a1a2e;
    --ts-muted:   #666;
}

.ts-wrapper { width:100%; box-sizing:border-box; }

.ts-header { text-align:center; margin-bottom:40px; }
.ts-header h2 { font-size:32px;font-weight:800;color:var(--ts-text);margin:0 0 10px; }
.ts-header p  { font-size:16px;color:var(--ts-muted);margin:0; }

/* Grille */
.ts-grid {
    display:grid;
    grid-template-columns:repeat(var(--ts-cols,3),1fr);
    gap:24px;
}

/* Card */
.ts-card {
    background:#fff;
    border:1px solid var(--ts-border);
    border-radius:var(--ts-radius);
    overflow:hidden;
    position:relative;
    box-shadow:var(--ts-shadow);
    transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
    display:flex;
    flex-direction:column;
}
.ts-card:hover { transform:translateY(-6px);box-shadow:var(--ts-shadow-lg); }

/* Barre accent */
.ts-card-accent {
    position:absolute;top:0;left:0;right:0;height:3px;
    transform:scaleX(0);transform-origin:left;
    transition:transform .35s ease;
}
.ts-card:hover .ts-card-accent { transform:scaleX(1); }

/* Image */
.ts-card-image { width:100%;height:180px;overflow:hidden;position:relative;background:#e9eef5;flex-shrink:0; }
.ts-card-image img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease; }
.ts-card:hover .ts-card-image img { transform:scale(1.06); }
.ts-card-image-overlay { position:absolute;inset:0;pointer-events:none; }

/* Body */
.ts-card-body { padding:18px 20px 20px;display:flex;flex-direction:column;flex:1; }

/* Badge catégorie */
.ts-cat-badge {
    display:inline-block;font-size:11px;font-weight:600;
    padding:3px 12px;border-radius:20px;border:1px solid;
    margin-bottom:10px;white-space:nowrap;letter-spacing:.3px;
}

/* Titre */
.ts-card-title { font-size:16px;font-weight:700;color:var(--ts-text);margin:0 0 8px;line-height:1.3; }

/* Excerpt */
.ts-card-excerpt { font-size:13px;color:var(--ts-muted);line-height:1.55;margin:0 0 12px;flex:1; }

/* Points clés */
.ts-card-features { list-style:none;padding:0;margin:0 0 14px; }
.ts-card-features li { font-size:12px;color:#555;padding:4px 0;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:6px; }
.ts-card-features li:last-child { border:none; }

/* Footer tarif/délai */
.ts-card-footer { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px; }
.ts-price { font-size:13px;font-weight:700;color:var(--ts-text); }
.ts-delay { font-size:12px;color:#888; }

/* Bouton */
.ts-btn {
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 20px;border-radius:25px;border:2px solid;
    font-size:13px;font-weight:600;text-decoration:none;
    transition:all .3s ease;position:relative;overflow:hidden;z-index:1;
    align-self:flex-start;
}
.ts-btn:hover { color:#fff!important;text-decoration:none; }
.ts-btn::before { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;z-index:-1;transition:left .3s ease; }
.ts-btn:hover::before { left:0;background:currentColor; }

/* Responsive */
@media(max-width:1024px){ .ts-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .ts-grid{ grid-template-columns:1fr; } }


/* ============================================================
   TERRA SERVICES PHOTO GRID - CSS (style maquette)
   ============================================================ */

.tspg-wrapper { width:100%; box-sizing:border-box; }

/* Grille */
.tspg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.tspg-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
    display: flex;
    flex-direction: column;
}

/* Effets hover */
.tspg-card.tspg-effect-lift:hover       { transform: translateY(-7px); box-shadow: 0 16px 40px rgba(0,0,0,0.14); }
.tspg-card.tspg-effect-border           { border: 2px solid transparent; transition: border-color .3s,box-shadow .3s; }
.tspg-card.tspg-effect-border:hover     { border-color: var(--accent,#0066CC); box-shadow:0 0 0 4px rgba(0,102,204,0.08); }

/* Image */
.tspg-card-img-link { display: block; }
.tspg-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #edf1f7;
    border-radius: 16px 16px 0 0;
}

.tspg-card-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .55s ease;
}

.tspg-card.tspg-effect-lift:hover .tspg-card-image img,
.tspg-card.tspg-effect-zoom:hover .tspg-card-image img { transform: scale(1.07); }

.tspg-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--accent,#0066CC) 20%, transparent) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity .35s;
    opacity: 0;
}
.tspg-card:hover .tspg-image-overlay { opacity: 1; }

.tspg-no-image {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
}

/* Barre accent */
.tspg-accent-bar {
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s ease;
    position: absolute; bottom: 0; left: 0; right: 0;
}
.tspg-card:hover .tspg-accent-bar { transform: scaleX(1); }

/* Body */
.tspg-card-body {
    padding: 16px 18px 20px;
    display: flex; flex-direction: column; flex: 1;
}

/* Badge catégorie */
.tspg-cat-badge {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    padding: 2px 10px; border-radius: 20px; border: 1px solid;
    margin-bottom: 8px; white-space: nowrap;
    letter-spacing: .3px; text-transform: uppercase;
}

/* Titre */
.tspg-title {
    font-size: 16px; font-weight: 700;
    color: #1a1a2e; margin: 0 0 8px; line-height: 1.3;
}
.tspg-title a {
    color: inherit; text-decoration: none;
    transition: color .2s;
}
.tspg-title a:hover { color: #0066CC; }

/* Excerpt */
.tspg-excerpt {
    font-size: 13px; color: #666;
    line-height: 1.55; margin: 0 0 12px; flex: 1;
}

/* Points clés */
.tspg-features {
    list-style: none; padding: 0; margin: 0 0 12px;
}
.tspg-features li {
    font-size: 12px; color: #555;
    padding: 5px 0; border-bottom: 1px solid #f5f5f5;
    display: flex; align-items: center; gap: 5px;
}
.tspg-features li:last-child { border: none; }

/* Prix */
.tspg-price {
    font-size: 13px; font-weight: 700;
    color: #1a1a2e; margin-bottom: 12px;
}

/* Bouton */
.tspg-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 20px; border-radius: 25px;
    border: 1.5px solid; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: all .28s ease;
    align-self: flex-start; position: relative; overflow: hidden; z-index: 1;
}
.tspg-btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
    background: currentColor;
}
.tspg-btn:hover { color: #fff !important; text-decoration: none; }
.tspg-btn:hover::before { transform: scaleX(1); }

/* Responsive */
@media(max-width:1100px) { .tspg-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:768px)  { .tspg-grid { grid-template-columns: repeat(2,1fr); } .tspg-card-image { height:170px; } }
@media(max-width:480px)  { .tspg-grid { grid-template-columns: 1fr; } }