/* =========================================================
   AF Mobilier — components.css
   Éléments réutilisés sur plusieurs pages : la carte produit
   et la grille qui les affiche (accueil ET "produits liés"
   sur la fiche produit).
   ========================================================= */

.grid{display:flex;flex-wrap:wrap;gap:2px;background:transparent;margin-bottom:90px;}
.card{background:var(--paper);display:flex;flex-direction:column;flex:0 0 calc(33.333% - 1.334px);}
.card-img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--line);}
.card-img img{transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.card:hover .card-img img{transform:scale(1.05);}
.no-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:12px;font-family:'IBM Plex Mono',monospace;}
.badge-new{position:absolute;top:14px;left:14px;background:var(--sage);color:#F3F1E8;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.08em;padding:5px 10px;border-radius:999px;text-transform:uppercase;}
.badge-photos{position:absolute;bottom:14px;right:14px;background:rgba(34,29,24,0.72);color:#F3F1E8;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.04em;padding:4px 9px;border-radius:999px;}
.plaque{padding:16px 20px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.plaque .name{font-family:'Fraunces',serif;font-size:17px;font-weight:500;}
.plaque .meta{color:var(--ink-soft);font-size:12.5px;margin-top:4px;font-weight:300;}
.plaque .right{text-align:right;white-space:nowrap;}
.plaque .price{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent);}
.plaque .n{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-soft);display:block;margin-top:4px;}
.empty-state{flex:1 1 100%;background:var(--paper);padding:60px 20px;text-align:center;color:var(--ink-soft);font-size:14px;}

@media (max-width:900px){
  .card{flex:0 0 calc(50% - 1px);}
}
@media (max-width:560px){
  .card{flex:0 0 100%;}
}

/* =========================================================
   Champs de formulaire et bouton — partagés entre le formulaire
   de contact et les formulaires de l'admin.
   ========================================================= */

.field label{display:block;font-size:11.5px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);margin-bottom:8px;}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:2px;background:var(--paper);padding:13px 14px;font-size:14.5px;color:var(--ink);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:110px;}
.field .err{color:var(--danger);font-size:12px;margin-top:6px;}
.field.invalid input,.field.invalid textarea{border-color:var(--danger);}

.submit-btn{
  display:inline-block;
  background:var(--ink);color:var(--paper);padding:16px 28px;border-radius:2px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
  transition:all .25s ease;margin-top:6px;
}
.submit-btn:hover{background:var(--accent);color:var(--paper);}