/* ===== Biblio FabDal — style partagé (public + back-office) ===== */
:root{
  --ink:#0b0f14;
  --paper:#ffffff;
  --paper-2:#eaf4fb;
  --ochre:#0a5fae;
  --ochre-dark:#073e73;
  --forest:#073257;
  --blue1:#17a5e0;
  --blue2:#0a5fae;
  --navy:#073257;
  --line:rgba(10,20,30,.14);
  --danger:#c0392b;
  --success:#1a7a4c;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Montserrat',sans-serif; color:var(--ink); background:var(--paper); line-height:1.5;}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif; font-weight:700;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:3px; font-weight:600; font-size:14px; border:none; cursor:pointer;}
.btn-primary{background:var(--ochre); color:#fff;}
.btn-primary:hover{background:var(--ochre-dark);}
.btn-outline{border:1.5px solid var(--ink); color:var(--ink); background:none;}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-sm{padding:8px 14px; font-size:12.5px;}

/* Topbar / header / nav */
header.site{background:#fff; border-bottom:1px solid var(--line);}
.header-row{display:flex; align-items:center; justify-content:space-between; height:104px; gap:24px;}
.logo{font-size:26px; font-weight:800; color:var(--ochre);}
.logo span{color:var(--forest);}
.header-actions{display:flex; gap:22px; align-items:center; font-size:13.5px; font-weight:600;}
.cart-link{position:relative; display:inline-flex; align-items:center; gap:2px;}
.cart-badge{background:var(--ochre); color:#fff; border-radius:10px; padding:1px 6px; font-size:11px; margin-left:3px; font-weight:700;}
nav.mainnav{background:var(--ink);}
nav.mainnav .nav-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
nav.mainnav ul{display:flex; list-style:none;}
nav.mainnav a{display:block; padding:14px 22px; font-size:13.5px; font-weight:700; color:#fff; text-transform:uppercase;}
nav.mainnav li.active a, nav.mainnav a:hover{background:var(--ochre); color:#fff;}

/* Bloc compte (Bonjour / Déconnexion / Mon compte) — côté droit de la barre noire */
.nav-account{display:flex; align-items:center; gap:16px; padding:0 22px; border-left:1px solid rgba(255,255,255,.14);}
.nav-account a{padding:0; text-transform:none; font-size:13px; font-weight:600; color:#fff;}
.nav-account a:hover{background:none; color:var(--blue1);}
.nav-account form{display:inline;}
.nav-account button{background:none; border:none; color:#fff; cursor:pointer; font:inherit; font-size:13px; font-weight:600; padding:0;}
.nav-account button:hover{color:var(--blue1);}

/* Sous-menu déroulant (ex: Ouvrages > Achat / Location) */
nav.mainnav li.has-dropdown{position:relative;}
nav.mainnav .dropdown{display:none; position:absolute; top:100%; left:0; min-width:170px; background:var(--ink); list-style:none; box-shadow:0 8px 18px rgba(0,0,0,.25); z-index:20;}
nav.mainnav li.has-dropdown:hover .dropdown, nav.mainnav li.has-dropdown:focus-within .dropdown{display:block;}
nav.mainnav .dropdown li{display:block;}
nav.mainnav .dropdown a{padding:12px 18px; text-transform:none; font-size:13px;}

/* Petit chevron indiquant qu'un lien de premier niveau a un sous-menu
   (desktop uniquement — purement décoratif, ne gêne pas le survol) */
nav.mainnav > .nav-row > ul > li.has-dropdown > a::after,
nav.mainnav > .nav-row > ul > li.has-flyout > a::after{
  content:'▾'; display:inline-block; margin-left:6px; font-size:10px; vertical-align:middle; opacity:.75;
}

/* Bouton chevron injecté par nav.js pour l'accordéon MOBILE : cette même
   classe est réutilisée à la fois pour les sous-menus de premier niveau et
   pour les colonnes du méga-panel « Rites ». Masqué par défaut (desktop),
   il n'est réaffiché qu'à l'intérieur de la media query mobile ci-dessous
   — sans cette ligne, le navigateur lui appliquait son style de bouton par
   défaut (petit encart blanc) et laissait apparaître un bouton fantôme sous
   les liens « Ouvrages » et « Décors » même en version bureau. */
.dropdown-toggle{display:none;}

/* Sous-sous-menu imbriqué (ex: Décors > Rites > REAA Loges Bleues...) qui
   n'a pas lui-même de petits-enfants : simple flyout latéral */
nav.mainnav .dropdown li.has-flyout{position:relative;}
nav.mainnav .dropdown-flyout{top:0; left:100%; min-width:220px;}
nav.mainnav .dropdown li.has-flyout:hover > .dropdown-flyout,
nav.mainnav .dropdown li.has-flyout:focus-within > .dropdown-flyout{display:block;}

/* Méga-panel multi-colonnes (ex: Décors > Rites, où chaque famille de rite
   affiche ses 7 sous-catégories dans sa propre colonne, côte à côte) */
nav.mainnav .mega-panel{display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:25; padding:20px 24px; max-width:96vw; overflow-x:auto;}
nav.mainnav li.has-flyout:hover > .mega-panel,
nav.mainnav li.has-flyout:focus-within > .mega-panel{display:flex; flex-direction:row; align-items:flex-start; gap:32px;}
nav.mainnav .mega-col{flex:0 0 200px; width:200px; display:flex; flex-direction:column;}
nav.mainnav .mega-col-title{display:block; width:100%; padding:0 0 10px; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.15); font-size:12.5px; font-weight:800; text-transform:uppercase; color:#fff; white-space:normal; line-height:1.3;}
nav.mainnav .mega-col-title:hover{background:none; color:var(--blue1);}
nav.mainnav .mega-col ul{list-style:none; display:flex; flex-direction:column; width:100%;}
nav.mainnav .mega-col li{display:block; width:100%;}
nav.mainnav .mega-col a{display:block; width:100%; padding:7px 0; text-transform:none; font-size:12.5px; font-weight:500; color:#dce7f0; white-space:normal; line-height:1.4;}
nav.mainnav .mega-col a:hover{background:none; color:var(--blue1);}
@media(max-width:1000px){
  nav.mainnav .mega-panel{position:static; display:none !important; flex-direction:column; box-shadow:none; padding:6px 0 6px 16px; max-width:none; overflow-x:visible; transform:none; left:auto;}
  nav.mainnav li.has-flyout:hover .mega-panel{display:flex !important;}
  nav.mainnav .mega-col{width:100%; flex:1 1 auto;}
}

/* Bande défilante d'information (livraison offerte), fixe en bas d'écran */
.site-marquee{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--ochre-dark); color:#fff; overflow:hidden; white-space:nowrap; padding:9px 0; box-shadow:0 -2px 10px rgba(0,0,0,.18);}
.site-marquee-track{display:inline-flex; gap:60px; animation:site-marquee-scroll 22s linear infinite;}
.site-marquee-track span{font-size:13px; font-weight:700; letter-spacing:.02em; padding-right:60px;}
@keyframes site-marquee-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
body.has-marquee{padding-bottom:38px;}

/* Flash messages */
.alert{padding:14px 18px; border-radius:4px; font-size:14px; margin:18px 0;}
.alert-error{background:#fdecea; color:var(--danger); border:1px solid #f3c8c3;}
.alert-success{background:#e9f7ef; color:var(--success); border:1px solid #b7e2c9;}
.site-flash{padding-top:22px; padding-bottom:0;}
.site-flash-msg{transition:opacity .4s ease; opacity:1;}
.site-flash-msg.is-fading{opacity:0;}

/* Sections / cards */
section{padding:50px 0;}
.sec-head{text-align:center; max-width:560px; margin:0 auto 36px;}
.sec-head .eyebrow{text-transform:uppercase; font-size:12px; font-weight:700; color:var(--ochre-dark); letter-spacing:.1em;}
.sec-head h2{font-size:28px; margin:10px 0;}
.book-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:800px){.book-grid{grid-template-columns:repeat(2,1fr);}}
.book-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media(max-width:900px){.book-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.book-grid-4{grid-template-columns:1fr;}}
.book-card{background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; position:relative; display:flex; flex-direction:column; height:100%;}
.book-card .cover{aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; padding:10px; color:#fff; background-color:#eef2f5; background-size:contain; background-repeat:no-repeat; background-position:center;}
.book-card .cover.placeholder{background:linear-gradient(150deg,var(--blue2),var(--navy)); align-items:flex-end; padding:16px;}
.book-card .info{padding:14px 16px; display:flex; flex-direction:column; flex:1;}
.book-card .name{font-weight:700; font-size:14px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;}
.book-card .price{color:var(--ochre-dark); font-weight:700; font-size:14px;}
.book-card .old{color:#999; text-decoration:line-through; font-weight:400; font-size:12px; margin-left:6px;}
.book-card .actions{display:flex; gap:8px; margin-top:auto; padding-top:10px;}
.tag{position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; padding:4px 8px; border-radius:2px; text-transform:uppercase; z-index:2;}
.tag.new{background:var(--blue1); color:#022;}
.tag.promo{background:var(--ochre); color:#fff;}
.stock-note-out{font-size:12px; color:var(--danger); font-weight:600; margin-bottom:6px;}

/* Cartes Actualités */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:800px){.news-grid{grid-template-columns:repeat(2,1fr);}}
.news-card{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; height:100%;}
.news-card-cover{aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#eef2f5;}
.news-card-cover.placeholder{background:linear-gradient(150deg,var(--blue2),var(--navy));}
.news-card-body{padding:16px; display:flex; flex-direction:column; flex:1;}
.news-card-date{font-size:11.5px; color:#98a; font-weight:700; text-transform:uppercase; margin-bottom:6px;}
.news-card-title{font-weight:700; font-size:15px; margin-bottom:8px;}
.news-card-excerpt{font-size:13px; color:#556; margin-bottom:12px; flex:1;}
.news-card-link{font-size:12.5px; font-weight:700; color:var(--ochre); margin-top:auto;}

/* Forms */
.form-card{max-width:440px; margin:40px auto; background:#fff; border:1px solid var(--line); border-radius:6px; padding:32px;}
.form-card.wide{max-width:640px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:3px; font-family:inherit; font-size:13.5px; transition:border-color .15s ease, box-shadow .15s ease;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ochre); box-shadow:0 0 0 3px rgba(10,95,174,.12);}
.field textarea{min-height:120px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){.field-row{grid-template-columns:1fr;}}

/* Formulaire de contact — carte flottante + interactions douces */
.contact-form{background:#fff; padding:34px 0; position:relative; z-index:2;}
.contact-char-count{text-align:right; font-size:11.5px; color:#98a; margin-top:4px;}
.contact-submit{position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;}
.contact-submit:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(10,95,174,.28);}
.contact-submit.is-sending{opacity:.75; cursor:wait; transform:none;}

/* Footer */
footer{background:var(--ink); color:#fff; margin-top:60px;}
footer .wrap{padding:26px 24px; display:flex; justify-content:center; text-align:center; font-size:13px;}

/* ===== Fond plein écran pour la page de connexion ===== */
body.has-auth-bg{
  background-size:cover;         /* couvre tout l'écran sans étirer/déformer */
  background-position:center;    /* recadre proprement, jamais d'aplatissement */
  background-repeat:no-repeat;
  background-attachment:fixed;   /* reste plein écran même si la page défile */
}
body.has-auth-bg main{min-height:70vh;}
body.has-auth-bg footer{background:var(--navy);}
body.has-auth-bg footer .wrap{justify-content:center; text-align:center;}

/* ===== Page de connexion / inscription épurée (aucun menu) ===== */
body.auth-only{min-height:100vh; display:flex; flex-direction:column;}
body.auth-only.has-auth-bg{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.auth-shell{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; min-height:100vh;}
.auth-shell .auth-logo{display:block; margin-bottom:16px;}
.auth-shell .auth-logo-box{display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:16px 28px; box-shadow:0 6px 20px rgba(0,0,0,.12);}
.auth-shell .auth-logo-box img{height:100px; width:auto; margin:0 auto; display:block;}
.auth-shell .form-card{margin:10px auto;}
.auth-footnote{margin-top:18px; font-size:12px; color:#cfc7b8; text-align:center;}
body.auth-only.has-auth-bg .auth-footnote{color:#fff; opacity:.85;}
body.auth-only.has-auth-bg .form-card{background:rgba(255,255,255,.97);}

/* ===== Admin back-office ===== */
.admin-body{display:flex; min-height:100vh; background:#f4f6f8;}
.admin-sidebar{width:230px; background:var(--ink); color:#dce7f0; flex:none; padding:20px 0;}
.admin-sidebar .brand{padding:0 20px 20px; font-weight:800; font-size:18px; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:14px;}
.admin-sidebar a{display:block; padding:11px 20px; font-size:13.5px; font-weight:600;}
.admin-sidebar a:hover, .admin-sidebar a.active{background:var(--ochre); color:#fff;}
.admin-main{flex:1; min-width:0;}
.admin-topbar{background:#fff; border-bottom:1px solid var(--line); padding:14px 26px; display:flex; justify-content:space-between; align-items:center;}
.admin-content{padding:26px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:30px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:6px; padding:20px;}
.stat-card .num{font-size:28px; font-weight:800; color:var(--ochre-dark);}
.stat-card .label{font-size:12.5px; color:#667;}
table.admin-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);}
table.admin-table th, table.admin-table td{padding:12px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line);}
table.admin-table th{background:#f7f9fb; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
.badge{display:inline-block; padding:3px 9px; border-radius:10px; font-size:11px; font-weight:700;}
.badge-pending{background:#fff4e0; color:#a86400;}
.badge-active{background:#e9f7ef; color:var(--success);}
.badge-rejected, .badge-suspended{background:#fdecea; color:var(--danger);}
.badge-paid{background:#e9f7ef; color:var(--success);}
.badge-failed{background:#fdecea; color:var(--danger);}
.card-box{background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px; margin-bottom:22px;}
.pagination{display:flex; gap:6px; margin-top:20px;}
.pagination a, .pagination span{padding:7px 12px; border:1px solid var(--line); border-radius:3px; font-size:13px;}
.pagination .active{background:var(--ochre); color:#fff; border-color:var(--ochre);}

/* ================================================================
   OPTIMISATION MOBILE — Front-office + Back-office
   ================================================================ */

/* --- Respiration générale sur petits écrans --- */
@media(max-width:900px){
  .wrap{padding:0 16px;}
  section{padding:32px 0;}
  .sec-head h2{font-size:23px;}
}

/* --- Header mobile --- */
@media(max-width:900px){
  .header-row{height:72px; gap:10px;}
  .logo img{height:52px !important;}
  .header-actions{gap:14px; font-size:12.5px;}
}

/* --- Bouton hamburger --- */
.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; border:none; background:none; cursor:pointer; flex:none; padding:0;}
.nav-toggle span{position:relative; display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:background-color .2s ease;}
.nav-toggle span::before, .nav-toggle span::after{content:''; position:absolute; left:0; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, top .25s ease, opacity .2s ease;}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}
body.nav-open .nav-toggle span{background:transparent;}
body.nav-open .nav-toggle span::before{top:0; transform:rotate(45deg);}
body.nav-open .nav-toggle span::after{top:0; transform:rotate(-45deg);}
@media(max-width:900px){ .nav-toggle{display:inline-flex;} }

/* --- Voile sombre derrière les tiroirs (front + back-office) --- */
.nav-overlay, .admin-nav-overlay{display:none; position:fixed; inset:0; background:rgba(6,10,16,.5); z-index:150; opacity:0; transition:opacity .25s ease;}
body.nav-open .nav-overlay, body.admin-nav-open .admin-nav-overlay{display:block; opacity:1;}
body.nav-open, body.admin-nav-open{overflow:hidden;}

/* --- Nav principale : tiroir plein écran depuis la droite --- */
@media(max-width:900px){
  nav.mainnav{
    position:fixed; top:0; right:0; bottom:0; width:84%; max-width:340px;
    background:var(--ink); overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .3s ease; z-index:200;
    box-shadow:-10px 0 30px rgba(0,0,0,.35);
    padding-top:env(safe-area-inset-top,0); padding-bottom:env(safe-area-inset-bottom,0);
  }
  body.nav-open nav.mainnav{transform:translateX(0);}
  nav.mainnav .nav-row{display:block; padding:14px 0;}
  nav.mainnav ul{display:block;}
  nav.mainnav li{border-bottom:1px solid rgba(255,255,255,.08); position:relative;}
  nav.mainnav > .nav-row > ul > li > a{padding:16px 52px 16px 24px; font-size:14px;}
  nav.mainnav > .nav-row > ul > li.has-dropdown > a::after,
  nav.mainnav > .nav-row > ul > li.has-flyout > a::after{display:none;}

  /* dropdown / mega-menu → accordéon (le survol n'existe pas au tactile) */
  nav.mainnav .dropdown, nav.mainnav .mega-panel, nav.mainnav .dropdown-flyout{
    display:none; position:static !important; box-shadow:none; background:rgba(255,255,255,.04);
    padding:0; min-width:0; transform:none; left:auto; max-width:none; overflow-x:visible;
  }
  nav.mainnav li.is-open > .dropdown, nav.mainnav li.is-open > .mega-panel, nav.mainnav li.is-open > .dropdown-flyout{
    display:block !important;
  }
  nav.mainnav .mega-panel{flex-direction:column; gap:0; padding:0 0 0 14px;}
  nav.mainnav .mega-col{width:100%; flex:none; padding:10px 0;}
  nav.mainnav .mega-col ul{display:none;}
  nav.mainnav .mega-col.is-open ul{display:flex;}
  nav.mainnav .dropdown a, nav.mainnav .mega-col a, nav.mainnav .dropdown-flyout a{padding:12px 24px;}
  nav.mainnav .mega-col-title{padding:12px 24px 12px 14px !important;}

  /* Bouton chevron injecté en JS pour ouvrir/fermer un sous-menu */
  .dropdown-toggle{
    position:absolute; top:0; right:0; width:52px; height:52px; border:none; background:none;
    color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease;
  }
  .mega-col .dropdown-toggle{position:static; width:auto; height:auto; padding:0 14px; margin-left:auto;}
  li.is-open > .dropdown-toggle, .mega-col.is-open > .dropdown-toggle{transform:rotate(180deg);}

  nav.mainnav .nav-account{
    flex-direction:column; align-items:flex-start; gap:14px; padding:20px 24px 28px;
    border-top:1px solid rgba(255,255,255,.12); border-left:none; margin-top:6px;
  }
  nav.mainnav .nav-account a, nav.mainnav .nav-account .btn{font-size:14px;}
}

/* --- Barre de navigation basse (type application) --- */
.mobile-tabbar{display:none;}
@media(max-width:900px){
  .mobile-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:#fff; border-top:1px solid var(--line);
    padding:6px 2px calc(6px + env(safe-area-inset-bottom,0));
    box-shadow:0 -6px 16px rgba(0,0,0,.07);
  }
  .mobile-tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; font-weight:700; color:#68758a; padding:5px 2px; position:relative;}
  .mobile-tabbar a .ico{font-size:20px; line-height:1;}
  .mobile-tabbar a.active{color:var(--ochre);}
  .mobile-tabbar .tab-badge{position:absolute; top:0; right:20%; background:var(--ochre); color:#fff; font-size:10px; font-weight:700; border-radius:8px; padding:0 5px; min-width:15px; text-align:center; line-height:1.5;}
  body.has-tabbar{padding-bottom:64px;}
  body.has-tabbar.has-marquee{padding-bottom:100px;}
  body.has-tabbar .site-marquee{bottom:64px;}
}

/* --- Grilles produits / actualités sur très petits écrans --- */
@media(max-width:420px){
  .book-grid{gap:12px;}
  .book-card .name{font-size:13px;}
  .news-grid{grid-template-columns:1fr;}
}

/* --- Formulaires : cibles tactiles confortables --- */
@media(max-width:600px){
  .field input, .field select, .field textarea{padding:13px 12px; font-size:16px;} /* 16px = pas de zoom auto iOS */
  .btn{padding:13px 22px;}
}

/* ================================================================
   BACK-OFFICE — tiroir latéral + tableaux défilants
   ================================================================ */
.admin-nav-toggle{display:none;}
@media(max-width:960px){
  .admin-nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:none; background:#eef2f5; border-radius:8px; cursor:pointer; flex:none; font-size:18px;
  }
  .admin-body{display:block;}
  .admin-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:80%; max-width:280px; z-index:200;
    transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:10px 0 30px rgba(0,0,0,.35);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  body.admin-nav-open .admin-sidebar{transform:translateX(0);}
  .admin-main{width:100%;}
  .admin-topbar{padding:10px 14px; gap:10px; flex-wrap:nowrap;}
  .admin-topbar > div:first-child{display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .admin-connected-as{display:none;}
  .admin-content{padding:14px;}
  .stat-grid{gap:12px;}
}
@media(max-width:600px){
  .admin-topbar a.btn.btn-outline.btn-sm{display:none;} /* "Voir le site" reste accessible via le tiroir */
  .stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* Tableaux admin : défilement horizontal + colonne + en-tête figés */
@media(max-width:760px){
  table.admin-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; max-width:100%;}
  table.admin-table thead{position:sticky; top:0; z-index:3;}
  table.admin-table th:first-child, table.admin-table td:first-child{
    position:sticky; left:0; z-index:2; background:#fff; box-shadow:2px 0 5px rgba(0,0,0,.06);
  }
  table.admin-table th:first-child{background:#f7f9fb; z-index:4;}
  table.admin-table td, table.admin-table th{padding:11px 12px;}
}

/* ================================================================
   CORRECTIF — mises en page en grille (autrefois en style inline,
   ne s'adaptaient jamais au mobile : catalogue, fiche produit,
   fiche décor, durées de location)
   ================================================================ */
.catalogue-layout{display:grid; grid-template-columns:250px 1fr; gap:36px; align-items:start;}
@media(max-width:860px){
  .catalogue-layout{grid-template-columns:1fr; gap:22px;}
  .catalogue-layout aside.card-box{padding:18px;}
}

.product-detail-layout{display:grid; grid-template-columns:320px 1fr; gap:40px;}
@media(max-width:760px){
  .product-detail-layout{grid-template-columns:1fr; gap:22px;}
}

.rent-duration-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center;}
@media(max-width:700px){
  .rent-duration-grid{grid-template-columns:1fr; gap:14px;}
}