/* ======================
   Location d’instruments – Scope .rent
   ====================== */

/* Tokens */
:root{
    --rent-brand:#6d0f22;
    --rent-ink:#2b1e17;
    --rent-muted:#5b4942;
    --rent-border:#e6d6c8;
    --rent-paper:#fffaf3;
    --rent-chip:#f6eee5;
    --rent-shadow:0 10px 30px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
}

.rent{
    color:var(--rent-ink);
    max-width:1080px; margin:0 auto;
    padding:28px 16px 36px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Titre & kicker */
.rent-hero{ text-align:center; margin-bottom:1rem; }
.rent-title{
    margin:0 0 .35rem; font-weight:800; letter-spacing:.2px;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
}
.rent-kicker{ color:var(--rent-muted); margin:.1rem auto .6rem; max-width:70ch; }

/* Intro card */
.rent-card{
    background:var(--rent-paper);
    border:1px solid var(--rent-border);
    border-radius:16px;
    padding:22px 18px;
    box-shadow:var(--rent-shadow);
}
.rent-h2{ font-weight:800; font-size: clamp(1.2rem, 1rem + .7vw, 1.45rem); margin:.1rem 0 .6rem; }
.rent-text p{ margin:0 0 .65rem; line-height:1.6; }

/* Tailles */
.rent-sizes{ margin:1rem 0 0; }
.rent-h3{ font-weight:800; margin:0 0 .45rem; }
.rent-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.rent-chip{
    background:var(--rent-chip); border:1px solid var(--rent-border);
    border-radius:999px; padding:.35rem .75rem; font-size:.95rem;
}
.rent-hint{ color:var(--rent-muted); margin:.55rem 0 0; font-size:.95rem; }

/* ===== Tarifs ===== */
.rent-title--sub{ font-weight:800; font-size: clamp(1.25rem, .9rem + 1.3vw, 1.6rem); margin:1.1rem 0 .6rem; }

.rent-table-wrap{ border-radius:16px; box-shadow:0 8px 18px rgba(0,0,0,.06); overflow-x:auto; }

.rent-table{
    --action-w: 140px;         /* largeur fixe de la colonne actions */
    background:#fff;
    border:1px solid var(--rent-border);
    border-radius:16px; overflow:hidden;
}

/* ====== Desktop (≥ 769px) : une seule grille partagée ====== */
@media (min-width: 769px){
    .rent-table{
        display:grid;
        grid-template-columns: 2.2fr 1fr 1fr 1fr var(--action-w);
    }
    /* CRUCIAL : aplatir les conteneurs intermédiaires */
    .rent-tbody, .rent-row{ display: contents; }

    .rent-row--head .rent-cell{
        background:#6d0f22; color:#fff; font-weight:700; border-top:0;
    }
    .rent-cell{
        padding:.85rem 1rem;
        border-top:1px solid var(--rent-border);
    }
    /* bouton à droite */
    .rent-row > .rent-cell:last-child{
        display:flex; align-items:center; justify-content:flex-end;
    }
}

/* Zébrage léger (fonctionne même avec display:contents) */
.rent-tbody .rent-row:nth-of-type(even) .rent-cell{ background:#fbf7f2; }

/* CTA */
.rent-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.5rem 1rem; border-radius:999px;
    border:2px solid var(--rent-brand); color:var(--rent-brand); background:transparent;
    font-weight:700; text-decoration:none; transition:all .2s ease; white-space:nowrap;
}
.rent-btn:hover{ background:var(--rent-brand); color:#fff; box-shadow:0 10px 18px rgba(109,15,34,.18); }
.rent-btn:focus-visible{ outline:none; box-shadow:0 0 0 .2rem rgba(109,15,34,.2); }

.rent-note{ color:var(--rent-muted); font-size:.95rem; margin:.6rem 0 0; }

/* ====== Mobile (≤ 768px) : table → cartes ====== */
@media (max-width: 768px){
    .rent{ padding:22px 14px 30px; }
    .rent-kicker{ font-size:.98rem; }

    .rent-table{ display:block; }       /* on désactive la grille */
    .rent-row--head{ display:none; }    /* on masque l’en-tête */

    .rent-row{
        display:grid; grid-template-columns:1fr;
        grid-row-gap:.35rem; padding:.55rem 0;
        border-top:1px solid var(--rent-border);
    }
    .rent-row:first-child{ border-top:0; }

    .rent-cell{ border:none; padding:.45rem 1rem; border-bottom:1px dashed var(--rent-border); }
    .rent-cell:last-child{ border-bottom:0; }

    .rent-cell[data-label]{ position:relative; padding-left:7.2rem; }
    .rent-cell[data-label]::before{
        content:attr(data-label);
        position:absolute; left:1rem; top:.45rem;
        font-weight:700; color:var(--rent-muted);
    }

    .rent-btn{ width:100%; }


}

/* ---- MOBILE : cacher uniquement l'en-tête vide ---- */
@media (max-width: 768px){
    /* masque complètement la rangée d'en-tête, même si d'autres styles la forcent */
    .rent .rent-table .rent-row--head,
    .rent .rent-table .rent-row--head .rent-cell{
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        height: 0 !important;
    }

    /* bordure haute seulement à partir de la première vraie ligne du corps */
    .rent .rent-tbody .rent-row{ border-top: 1px solid var(--rent-border); }
    .rent .rent-tbody .rent-row:first-of-type{ border-top: 0; }
}

/* Grands écrans : un peu d’air */
@media (min-width: 992px){
    .rent{ padding:32px 24px 40px; }
    .rent-card{ padding:24px 22px; }
}


/* ===== Modal .rent ===== */
.rent-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.rent-modal[aria-hidden="false"]{ display:block; }
.rent-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(120%) blur(2px); }
.rent-modal__dialog{
    position:relative; z-index:1; width:min(560px,92vw);
    margin:6vh auto 0; padding:20px 18px; background:var(--rent-paper);
    border:1px solid var(--rent-border); border-radius:16px; box-shadow:var(--rent-shadow);
}
.rent-modal__close{ position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:28px; color:var(--rent-muted); cursor:pointer; }
.rent-modal__close:hover{ color:var(--rent-ink); }

.rent-form{ display:grid; gap:12px; }
.rent-field{ display:grid; gap:6px; }
.rent-field label{ font-weight:700; font-size:.98rem; }
.rent-field input, .rent-field select{ font:inherit; padding:.55rem .7rem; border-radius:10px; width:100%; border:1px solid var(--rent-border); background:#fff; }
.rent-field input[readonly]{ background:#f9f5ef; }

.rent-total{ margin:.25rem 0 .5rem; font-weight:700; }
.rent-actions{ display:flex; gap:.6rem; justify-content:flex-end; }
.rent-btn--ghost{ background:transparent; color:var(--rent-brand); border:2px solid var(--rent-brand); }
.rent-btn--ghost:hover{ background:var(--rent-brand); color:#fff; }

/* Mobile modal */
@media (max-width:560px){
    .rent-modal__dialog{ margin:10vh auto 0; padding:18px 14px; }
    .rent-actions{ flex-direction:column-reverse; }
    .rent-actions .rent-btn{ width:100%; }
}