html, body { min-height: 100%; }
body { margin: 10px 20px 20px 20px; font-family: Roboto, Arial, sans-serif; color: #fff; background: linear-gradient(180deg,#0f2027,#203a43,#2c5364); background-attachment: fixed;}
*, *::before, *::after { box-sizing: border-box; }

/* ====== EN-TETE ====== */
.site-header { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-bottom:10px; text-align:center;}
.site-header h1 { font-size:40px; color:#BEE916; letter-spacing:1px; margin:8px 0 0 0; }
.menu { display:flex; justify-content:center; align-items:center; gap:27px; flex-wrap:wrap; font-size:17px; text-transform: uppercase;}
.menu a { color:#ffffff; text-decoration:none; font-weight:600; padding:5px 12px; border-radius:8px; transition:0.2s;}
.menu a:hover { background:#BEE916; color:#000; }
hr { border: none; height: 1px; background-color: #30596A; margin: 0px 0px 20px 0px; }
.header-marques { display: flex; justify-content: space-between; align-items: center; }
.search { margin-bottom:10px; margin-right:10px; }
.search input { width:178px; padding:12px 16px; font-size:14px; border-radius:10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color:#e6f0f5; transition: border 0.2s ease, box-shadow 0.2s ease;}
.search input:hover, .search input:focus-visible { border:1px solid #BEE916; outline: none; }

/* ====== EN-TETE SOUS-BOCKS ====== */
.header-sb { display:flex; flex-wrap:wrap; justify-content: space-between; gap:40px; width: min(1780px, 95%); margin: 0 auto; align-items: flex-start; margin-bottom: 24px}
.header-sb h1 { margin-top:0; margin-bottom:6px; font-size:38px; color:#ffffff;}
.header-sb a { color:#fff; text-decoration:none; border-bottom:1px solid #5F889C; }
.header-sb a:hover { color:#BEE916;  border-color:#BEE916; }
.header-sb small { display:block; font-size:20px; color:#ffffff; opacity:.8;}
.details { border-collapse:collapse; font-size:16px; }
.details td { padding:4px 6px 4px 0px; vertical-align:top; line-height: 25px;}
.details td:first-child { color:#b8c7cf; white-space:nowrap; }
.details a { color:#fff; text-decoration: underline; text-decoration-color: #5F889C; text-decoration-thickness: 1px; text-underline-offset: 4px;}
.details a:hover { color:#BEE916; text-decoration-color:#BEE916; outline: none;}

/* ====== PAGES INDEX ====== */
.index { flex-wrap:wrap; justify-content: space-between; gap:40px; width: min(1780px, 95%); margin: 0 auto; align-items: flex-start; }
.index h1 { margin-top:0; margin-bottom:10px; padding-right:0px; font-size:38px; color:#ffffff;}
.index small { display:block; font-size:22px; color:#eeeeee; margin-bottom:30px; line-height: 30px; letter-spacing:1px;}
.index p { font-size:16px; color:#ffffff; margin: -16px 0 20px 0; line-height: 26px;}
.index a { color:#fff; text-decoration: underline; text-decoration-color: #5F889C; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.index a:hover { color:#BEE916; text-decoration-color:#BEE916; }
.index-titre { display: flex; align-items: center; gap: 20px; margin-bottom: 25px;  }
.index-titre h2 { font-size: 28px; margin: 0; white-space: nowrap; color:#eade59;}
.index-titre::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);}
.index-marques { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); font-size: 20px; margin-bottom:48px; }
.index-marques a { display: flex; color:#ffffff; justify-content: center; text-decoration-color: #5F889C; align-items: center; background: rgba(255, 255, 255, 0.05); margin: 0px 10px 12px 0px; height: 44px; border-radius: 10px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.2s; break-inside: avoid; text-overflow: ellipsis;}
.index-marques a:hover { color:#BEE916; background: rgba(255, 255, 255, 0.1); border-color: #BEE916; transform: scale(1.04)}
.index-intro { column-width: 230px; column-gap:30px; margin: 20px 0 30px 0; padding-bottom: 40px; }
.index-intro a { display: flex; align-items: center; gap: 10px; height: 48px; background: rgba(255, 255, 255, 0.05); font-size: 17px; padding: 8px; border-radius: 10px; text-decoration: none; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.2s; margin: 0px 0px 12px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.index-intro a span { font-size: 20px; }
.index-intro a:hover { background: rgba(255, 255, 255, 0.1); border-color: #BEE916; transform: scale(1.03); }
.index-grid { column-width: 230px; column-gap:30px; font-size: 17px; margin-bottom:60px;}
.index-grid a,.index-collections a { display: flex; color:#ffffff; justify-content: space-between; text-decoration-color: #5F889C; align-items: center; background: rgba(0, 0, 0, 0.2); padding: 8px 14px; margin: 0px 0px 12px 0px; height: 44px; border-radius: 10px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); transition: 0.2s; break-inside: avoid; text-overflow: ellipsis;}
.index-grid a:hover { color:#BEE916; background: rgba(255, 255, 255, 0.1); border-color: #BEE916; transform: scale(1.02)}
.index-collections { column-width: 440px; column-gap:10px; font-size: 16px; margin-bottom:30px; }
.index-collections a:hover { color:#BEE916; background: rgba(255, 255, 255, 0.1); border-color: #BEE916; transform: scale(1.01)}
.complet { color:#CFCFCF; font-size: 14px;}
.flag-img { width: 30px; height: 20px; border-radius: 2px; flex-shrink: 0; }
.flag-img-big { width: 39px; height: 26px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; flex-shrink: 0; }
.count { font-size: 14px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 4px;}
.txt-orange { color: #FFCC33; }

/* ====== SOUS-BOCKS ====== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; width: min(1800px, 95%); margin: 0 auto;}
.card { background:#1b3646; border:1px solid #425E6C; border-radius:16px; padding:15px 20px 15px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(0,0,0,0.50); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card img { width:100%; height:180px; object-fit:contain; background:#000; border:1px solid #425E6C; border-radius:12px; padding:10px; }
.card img:hover { border:3px solid #BEE916; padding:8px; cursor: zoom-in;}
.card h2 { font-size:20px; color:#BEE916; text-align:center; margin:0; }
.details-sb { width:100%; font-size:14px; line-height:1.4; }
.details-sb ul { list-style:none; padding:0; margin:0; }
.details-sb li { margin-bottom:6px; }
.label { color:#b8c7cf; }

/* ====== FOOTER ====== */
footer { margin-top:50px; padding:0px 10px; text-align:center; font-size:14px; color:#b8c7cf; }

/* ====== IMAGE ADRANDIE ====== */
.lightbox { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.4s ease; }
.lightbox.show { opacity: 1; pointer-events: auto; cursor: zoom-out;}
.lightbox-img { max-width: 90%; max-height: 90%; background: #000; border: 1px solid #425E6C; border-radius: 12px; padding: 20px; transform: scale(0.8); opacity: 0; transition: transform 0.8s ease, opacity 0.4s ease; }
.lightbox.show .lightbox-img { transform: scale(1); opacity: 1; }

/* ====== RESPONSIVE ====== */
@media (max-width: 980px) {
.header-sb { flex-direction: column; align-items: flex-start; gap: 0; margin: 0 0 30px 17px ;}
.details { margin-top: 21px; }
 }

@media (max-width: 768px) {
.site-header h1 { font-size:32px; }
.menu { gap:12px; font-size:15px; }
.header-sb h1 { font-size:30px; }
.details { font-size:18px; }
.details-sb { font-size:16px; }
 }