/*
======================================================================
FRANCE Inox — Thème minimaliste (Front + Admin)
Auteur : Sébastien SPIEGEL — 2025
======================================================================
*/

/* ------------------------- Variables & Reset ------------------------ */
:root{
    /* Couleurs (faciles à modifier partout) */
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --text: #212529;
    --muted: #495057;
    --border: #dee2e6;
    --bg: #ffffff;
    --bg-soft: #f8f9fa;

    --danger: #dc3545;
    --danger-hover: #bb2d3b; 
    --success: #28a745;
    --success-hover: #157347;

    /* Rayons & ombres */
    --radius: 12px;
    --shadow: 0 6px 18px rgba(0,0,0,.06);
}

*,
html,
body{ box-sizing: border-box; margin: 0; padding: 0; }

body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}

main section { background-color: var(--bg-soft) }
main section:nth-child(even) { background-color: var(--bg) }

/* ------------------------- Helpers ------------------------ */
.container{ width: min(1080px, 100% - 32px); margin-inline: auto; }
.section{ padding: 64px 0; }

h1{ font-size: 40px; margin: 0 0 24px; line-height:1.2; }
h2{ font-size: 28px; margin: 0 0 16px; }
p{ margin: 0 0 16px; color: var(--muted); }
.lead{ font-size: 1.1rem; }

.alert { width: 100%; padding: 8px; font-size: 1.5rem; text-align:center; border-radius: var(--radius); }
.alert-danger { color: var(--danger); border: 1px solid var(--danger); }
.alert-success { color: var(--success); border: 1px solid var(--success); }

.info-group { display: grid; grid-template-columns: repeat(2, 1fr); padding: 8px 0 8px 20px; }
.info-title { font-weight: 500;}
/* .info-data { } */

.nav-buttons { padding: 20px 0 0 20px; display: flex; gap: 24px; justify-content: left; align-items: center; }
.admin-buttons { display: flex; gap: 24px; justify-content: left; align-items: center; }

.header-buttons { display: flex; gap: 24px; justify-content: left; }

.btn{
    display:inline-block; padding: 10px 20px; border-radius: 10px;
    text-decoration:none; font-weight:600; transition: .3s ease;
    border: 1px solid transparent;
}
.btn-primary{ background: var(--primary); color:#fff;}
.btn-primary:hover{ background: var(--primary-hover); }
.btn-danger{ background: var(--danger); color:#fff;}
.btn-danger:hover{ background: var(--danger-hover); }
.btn-outline{ background-color: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover{ color:#fff; background: var(--primary); }

.dot{ width:4px; height:10px; border-radius:50%; background: var(--primary); box-shadow:0 0 0 6px rgba(13,110,253,.08); }
.card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; gap: 16px; }
.card-title { font-size: 20px; font-weight: 700; }
.card-body { padding-top: 16px;}
.card-body-grid { padding-top: 16px; display:grid; grid-template-columns: 1fr 1fr;}
.card-body-img { height: 100%; display: flex; justify-content: center; align-items: center;}
.card-body li { margin-left: 2.5rem; line-height: 2rem;}
.vetical-card-gap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){
    .grid-2{ grid-template-columns: 1fr; }
    .grid-3{ grid-template-columns: 1fr; }
}

.appercu { width: 100%; }

/* ------------------------- Navbar (front & admin) ------------------------ */
/* Navbar 100% width avec container interne pour alignement */
.navbar{ position: sticky; top:0; z-index:10; background: #fff; border-bottom:1px solid var(--border); }
.navbar .row{ display:flex; align-items:center; justify-content:space-between; gap: 24px; height:64px; }
.brand{ font-weight:800; letter-spacing:.2px; }
.nav{ display:flex; gap: 24px; align-items:center; }
.nav a{ color: var(--text); text-decoration:none; font-weight:600; opacity:.85; }
.nav a:hover{ opacity:1; }

/* Menu burger CSS-only (checkbox hack) */
#nav-toggle{ display:none; }
.nav-toggle-label{ display:none; width:40px; height:40px; border:1px solid var(--border); border-radius:10px; align-items:center; justify-content:center; }
.nav-toggle-label span{ width:18px; height:2px; background:var(--text); position:relative; display:block; }
.nav-toggle-label span::before,
.nav-toggle-label span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:var(--text); }
.nav-toggle-label span::before{ top:-6px; } .nav-toggle-label span::after{ top:6px; }

@media (max-width: 780px){
    .nav{ display:none; position:absolute; right:16px; top:64px; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; width: min(240px, calc(100% - 32px)); box-shadow: var(--shadow); }
    #nav-toggle:checked ~ .nav{ display:flex; }
    .nav-toggle-label{ display:flex; }
}

/* ------------------------- HERO (front) ------------------------ */
.hero{ background: var(--bg-soft); border-bottom: 1px solid var(--border); }

.hero-inner{
    display: flex;
    align-items: center;
    padding: 64px 0;
    gap: 32px;
}

.hero-visual img {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

@media (max-width: 900px){
    .hero-inner{
        flex-direction: column;
    }
    .hero-desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    h1 {
        font-size: 36px;
    }
    .hero-visual img {
        width: 100%;
    }
}

/* ------------------------- FOOTER ------------------------ */
.footer{ background: var(--bg-soft); border-top:1px solid var(--border); padding: 32px 0; color:#6c757d; font-size:14px; }

/* ------------------------- TABLE + FORMS ------------------------ */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border:1px solid var(--border); padding:12px; text-align:left; }
.table thead th{ background: var(--bg-soft); font-weight:700; }
.input{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; outline:none; }
.input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,110,253,.15); }

/* ------------------------- ADMIN LAYOUT ------------------------ */
.admin-wrap{ display:grid; grid-template-columns: 240px 1fr; /* min-height: calc(100vh - 64px); */ }
.admin-sidebar{ background: var(--primary); color:#fff; padding: 32px 24px; }
.admin-sidebar a{ color:#fff; text-decoration:none; opacity:.9; display:block; padding:10px 12px; border-radius:8px; }
.admin-sidebar a:hover, .admin-sidebar a.active{ background: rgba(255,255,255,.12); opacity:1; }
.admin-main{ padding: 32px; background:#fff; }
.admin-page-title {
    display: flex;
    gap: 24px;
    align-items: center;
}
.admin-main a {
    text-decoration: none;
    color: var(--primary);
}

@media (max-width: 980px){
    .admin-wrap{ grid-template-columns: 1fr; }
    .admin-sidebar{ position: sticky; top:64px; z-index: 5; display:flex; gap:8px; overflow:auto; white-space:nowrap; max-height: 100px; }
}

/* ------------------------- PAGINATIONS ------------------------ */
.pagination { padding-top: 16px; }
.pagination > ul { display: flex; justify-content: center; gap: 8px; list-style: none; }
.pagination a { text-decoration: none; }
.pagination li { padding: 4px 8px; border: 1px solid gray; color: rgb(0, 0, 0); margin: 0 4px; border-radius: 4px; }
.pagination .active { background-color: var(--primary); color: white; }

/* ------------------------- STEP PROGRESS (configurateur) ------------------------ */
.steps{ display:flex; gap:12px; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; }
.step .badge{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; background: var(--primary); }
.step.is-active{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,110,253,.12); }

/* ------------------------- SMALL UTILITIES ------------------------ */
.mt-2{ margin-top: 16px; } .mt-3{ margin-top: 24px; } .mt-4{ margin-top: 32px; }
.mb-2{ margin-bottom: 16px; } .mb-3{ margin-bottom: 24px; } .mb-4{ margin-bottom: 32px; }
.text-center{ text-align:center; }
.badge-kpi{ display:inline-block; background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-weight:700; }