body { overflow-x: hidden; min-width: 1250px;  background: radial-gradient(circle at top, #121212, #000); font-family: Arial, Helvetica, sans-serif; color: #fff; }

.box { background: rgba(0, 0, 0, 0.8); padding: 55px 45px; border-radius: 18px; box-shadow: 0 0 25px rgba(0, 180, 255, 0.80); max-width: 560px; width: 92%;}
h1 { font-size: 34px; margin-bottom: 12px; color: #00b4ff; letter-spacing: 1px;}
h2 { font-size: 22px; margin-bottom: 5px; color: #00b4ff; letter-spacing: 1px;}
h5 { font-size: 25px; margin: 5px; color: #00b4ff; letter-spacing: 1px;}
.hrbleu { border: 0; height: 2px; margin: 10px auto; background: linear-gradient(to right, transparent, #00b4ff, transparent); box-shadow: 0 0 10px rgba(0, 180, 255, 0.5); opacity: 0.7; }

.line { width: 90px; height: 3px; background: #00b4ff; margin: 20px auto 30px auto; border-radius: 2px;}
p { font-size: 18px; line-height: 1.6; margin: 0 0 22px 0; color: #e8e8e8;}
.small { font-size: 14px; color: #aaa; margin-top: 10px;}
.logo { width: min(280px, 70%); height: auto; display: block; margin: 0 auto 18px auto; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.55));}

/* --- Contact page --- */
.contact-box { max-width: 760px; }
.muted { color: rgba(255,255,255,0.75); }
.alert { margin: 18px auto 10px auto; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); text-align: center; font-size: 14px;}
.alert.ok { border-color: rgba(90, 220, 130, 0.35); background: rgba(90, 220, 130, 0.12);}
.alert.err { border-color: rgba(255, 90, 90, 0.35); background: rgba(255, 90, 90, 0.12);}
.contact-form { margin-top: 16px; text-align: left;}
.contact-form label { display: block; margin: 12px 0 6px 0; font-size: 14px; color: rgba(255,255,255,0.85);}
.contact-form input,
.contact-form textarea { width: 100%; box-sizing: border-box; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.25); color: #fff; outline: none;}
.contact-form input:focus,
.contact-form textarea:focus { border-color: rgba(255,255,255,0.28);}
.checkbox-align { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; user-select: none;}
.checkbox-align input[type="checkbox"] { width: 18px; height: 18px; margin: 0;}
.btn-row { display: flex; gap: 10px; margin-top: 16px;}
.btn { border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; background: rgba(255,255,255,0.18); color: #fff; font-size: 14px;}
.btn:hover { background: rgba(255,255,255,0.26); }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.20);}
.btn-ghost:hover { background: rgba(255,255,255,0.10); }
.link { color: rgba(255,255,255,0.80); text-decoration: none;}
.link:hover { text-decoration: underline; }

/* Honeypot invisible */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;}
/* --- Wapinou Boutique Button (classy, compact) --- */
.wbtn{ display:inline-flex; align-items:center; gap:10px; padding: 1px 14px 1px 1px; /* gauche collé, droite respirante */ min-height:38px; border-radius:25px 0px 25px 25px; border:1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); color:#fff; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.2px; line-height:1; box-sizing:border-box; box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;}
.wbtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.26); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); box-shadow: 0 14px 32px rgba(0,0,0,.42);}
.wbtn:active{ transform: translateY(0); box-shadow: 0 9px 18px rgba(0,0,0,.30);}
.wbtn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.35); border-color: rgba(255,255,255,.35);}
.wbtn-icon{ width:35px; height:35px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.14); font-size:20px; /* plus propre que 25 pour les emojis */ line-height:1; transition: transform .25s ease;}
.wbtn:hover .wbtn-icon{ transform: rotate(-25deg);}
.wbtn-text{ white-space: nowrap; }
.wbtn.wbtn-ghost{ background: transparent; box-shadow:none; border:1px solid rgba(255,255,255,.20);}
.wbtn.wbtn-ghost:hover{ background: rgba(255,255,255,.08);}
.wbtn[aria-disabled="true"], .wbtn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
.page{ min-width:1100px; margin:0 auto; width: 98%; padding:18px 16px; position: relative; top: 50px}
#main { transition: margin-left .5s; padding: 0px; overflow:hidden; width:100%; text-align: left; ;}
.footer { padding: 20px 10px; text-align: center; font-size: 14px; color: #ccc;}
.footer-identity { margin-bottom: 8px; font-size: 15px;}
.footer-links { margin-bottom: 8px;}
.footer-links a { color: #9fd7ff; text-decoration: none;}
.footer-links a:hover { text-decoration: underline;}
.footer-legal { margin-bottom: 6px; font-size: 13px; opacity: 0.85;}
.visits-counter { font-size: 12px; opacity: 0.7;}
.small{ font-size:12px; }
.frame_tete, .frame_midle{ font-size: 25px;  font-weight: bold;
  text-align: center;  vertical-align: top; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; color:#00b4ff;
  height: 31px;  position: relative; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); z-index: 2}
.frame_corp{ padding:12px; border:1px solid rgba(255,255,255,.10); border-top:0; background: rgba(0,0,0,.22); border-radius:0 0 25px 25px; }
.frame_fin{ height:0; }

/* Header */
.topbar{ position: relative; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 8px 20px;}
.topbar-left{ display:flex; align-items:center; }
.topbarf {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 130px;
    background: black;
    padding: 0;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
.topbarf td,
.topbarf th {
    padding: 0;

}
.topbar-inner{ max-width:1100px; margin:0 auto; padding:10px 16px; align-items:center; justify-content:space-between; gap:14px;}
.brand-logo { height: 100px; width: auto; display: block; object-fit: contain; left: 30px; border:1px solid rgba(255,255,255,.18); border-radius: 14px 0px 14px 0px ; box-sizing: border-box; /* Pour inclure la bordure dans la taille totale */}
.brand{ text-decoration:none; color:#fff; display:flex; flex-direction:column; line-height:1.1;}
.brand-name{ font-size:18px; font-weight:800; letter-spacing:.3px; }
.brand-sub{ font-size:12px; opacity:.7; margin-top:4px; }
.topbar-nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

/* Badges */
.badge{ display:inline-flex; align-items:center; justify-content:center; height:18px; min-width:18px; padding:0 6px; border-radius:999px; font-size:12px; font-weight:800; margin-left:6px; border:1px solid rgba(255,255,255,.20);}
.badge-cart{ background: rgba(255,255,255,.10); }
.badge-warn{ background: rgba(255,0,0,.18); border-color: rgba(255,0,0,.35); }

/* Mobile */
@media (max-width: 720px){ 
 .topbar{ flex-direction:column; align-items:flex-start; }
 .topbar-nav{ width:100%; justify-content:flex-start; }
}

.corp{  position: relative; }
.tbl { background: rgba(0, 0, 0, 0.8); padding: 55px 45px; border-radius: 5px; box-shadow: 0 0 25px rgba(0, 180, 255, 0.80); margin: 0 auto; border-collapse: collapse;}
.tbl tr th{ border-bottom:1px solid rgba(255,255,255,.10);}

/* Lignes normales */
.tbl tr td{ border-bottom:1px solid rgba(255,255,255,.10);}

/* Lignes impaires plus claires */
.tbl tbody tr:nth-child(odd) td { background: rgba(0,0,0,0.2);}

/* Si tu veux, tu peux forcer les lignes paires aussi */
.tbl tbody tr:nth-child(even) td {
  background: rgba(17,17,17);
  
}

/* =======================================================================================================================
   Messages système (erreur / succès)
======================================================================================================================= */
.error,.success{ margin: 10px auto; padding: 12px 14px; max-width: 720px; border-radius: 14px; font-weight: 600; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.25);}
.error{ background: rgba(180, 20, 20, .18); border: 1px solid rgba(255, 80, 80, .35); color: #fff;}
.success{ background: rgba(20, 140, 60, .18); border: 1px solid rgba(80, 255, 150, .30); color: #fff;}
/* =======================================================================================================================
   Boutique : grille produits
======================================================================================================================= */
.prod-grid{ display:flex; flex-wrap:wrap; gap:30px; justify-content:center;}
.prod-card{ width:240px; padding:10px; border-radius:10px; box-shadow:0 0 25px rgba(0, 180, 255, 0.80); background:rgba(255,255,255,.04); display:flex; flex-direction:column; min-height: 390px;}
.prod-link{ text-decoration:none; color:#fff; display:block; }
.prod-img{ width:100%; height:240px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.12); display:block;}
.prod-name{ margin-top:10px; font-weight:800; font-size:14px;}
.prod-price{ margin-top:4px; opacity:.9; font-weight:700;}
.prod-actions{ margin-top:auto; text-align:center; padding-top:12px;}
.card-rating { margin-top: 6px; font-size: 13px;}
.card-rating .star.full { color: #ffcc33;}
.card-rating .star.empty { color: #777;}
.rating-scoreb { font-size: 13px; font-weight: bold;}
.rating-count { opacity: .7;}
/* =======================================================================================================================
   Produit : détail
======================================================================================================================= */
.prod-detail{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.prod-price-big{ margin-top:6px; font-size:18px; font-weight:800; opacity:.95; }
.prod-stock{ margin-top:8px; font-weight:800; }
.prod-stock.in{ color:#9fffb8; }
.prod-stock.out{ color:#ff9a9a; }
.prod-desc{ font-size:17px; color: white; }
.prod-thumbs{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.prod-thumb{ width:72px; height:72px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.12); cursor:pointer; }
.prod-sheet{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:22px; padding:18px; color:#1a1a1a; box-shadow: 0 14px 40px rgba(0,0,0,.35);}
.prod-table{  border-collapse:collapse; }
.prod-table td{ vertical-align:top; }
.prod-table .col-mid { padding-left: 25px; padding-right: 25px; border-left: 1px solid rgba(255,255,255,0.80); border-right: 1px solid rgba(255,255,255,0.80); }
.prod-left{ width:300px;  padding-left: 2px;  padding-right: 25px;}
.prod-right{ width:350px; padding-left: 25px; padding-right: 0px; line-height: 1.5;}
.prod-main{  height:320px;  border-radius:12px; border:1px solid rgba(0,0,0,.35); box-shadow: 0 8px 22px rgba(0,0,0,.25); display:block;}
.prod-thumbs-left{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.prod-thumb-left{ width:52px; height:52px; object-fit:cover; border-radius:10px; border:1px solid rgba(0,0,0,.35); cursor:pointer; box-shadow: 0 6px 14px rgba(0,0,0,.18);}
.prod-thumb-left:hover{ transform: translateY(-1px); }
.tech-box{ margin-top:14px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);  border-radius:12px; padding:12px;}
.tech-title{ font-weight:900; color:lime; margin-bottom:8px;}
.tech-box .tech-line{ font-size:13px; line-height:1.95; margin:2px 0; color:white;}
.prod-title{ font-size:30px; font-weight:900; margin:0 0 6px 0; color: #00b4ff;}
.prod-sub{ font-size:13px; color:#333; margin-bottom:10px;}
.hrline{ border:0; border-top:1px solid rgba(0,0,0,.30); margin:10px 0;}
.price-stock{ margin-top:12px; font-weight:900; color:lime;}
.price-stock .price{ font-size:16px;}
.price-stock .stock{ margin-top:4px; font-size:13px; font-weight:800; color:lime;}
.qty-wrap{ margin-top:14px; text-align:center; }
.qty-label{ font-weight:900; color:white; margin-bottom:6px; }
.qty-box{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; box-shadow: 0 6px 14px rgba(0,0,0,.35);}
.qty-btn{ width:42px; height:34px; border:0; background:rgba(255,255,255,.10); color:#fff; font-weight:900; cursor:pointer; transition: background .15s ease, transform .05s ease;}
.qty-btn:hover{ background:rgba(255,255,255,.18);}
.qty-btn:active{ transform: scale(.97);}
.qty-input{ width:56px; height:34px; border:0; outline:0; text-align:center; background:transparent; color:#fff; font-weight:800;}
.qty-input:disabled{ opacity:.45; cursor:not-allowed;}
.prod-actions-center{ margin-top:auto; text-align:center; padding-top:12px;}
.nav-ouvrages { display: flex; max-width: 1500px; margin: 30px auto;}
.nav-prev { position: relative;}
.nav-prev a { display: block; padding: 10px 28px 10px 40px; background: #303030; color: #fff; font-weight: bold; text-decoration: none; border-radius: 0 18px 18px 0;}
/* triangle gauche */
.nav-prev::before { content: ""; position: absolute; left: -35px; /* ← CLÉ */ top: 0; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 19px solid transparent; border-right: 35px solid #303030;}
.nav-next { margin-left: auto; position: relative;}
.nav-next a { display: block; padding: 10px 40px 10px 28px; background: #303030; color: #fff; font-weight: bold; text-decoration: none; border-radius: 18px 0 0 18px;}
/* triangle droite */
.nav-next::after { content: ""; position: absolute; right: -35px; /* ← CLÉ */ top: 0; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 19px solid transparent; border-left: 35px solid #303030;}
.nav-prev a:hover, .nav-next a:hover { background: #0b3f58; }
.nav-prev:hover::before { border-right-color: #0b3f58;}
.nav-next:hover::after { border-left-color: #0b3f58;}
.nav-prev a,.nav-next a {
    box-shadow:
        0 6px 12px rgba(11, 63, 88, 0.6),
        0 2px 0 rgba(11, 63, 88, 0.9);
}
.nav-prev a:hover,.nav-next a:hover {
    box-shadow:
        0 8px 16px rgba(11, 63, 88, 0.8),
        0 3px 0 rgba(11, 63, 88, 1);
}

.produit-nav {
      position: relative;
    top: -22px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 3px 16px;
    background: #232f3e;
    overflow-x: auto;
    white-space: nowrap;

}

.produit-nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.produit-nav-link:hover {
    background: rgba(255,255,255,0.15);
}

.produit-nav-link.active {
    background: #febd69;
    color: #111;
    font-weight: bold;
}
.recherche {
    margin-left: auto;
}

/* Boutons orange (variant pour wbtn) */
.wbtn.wbtn-orange{ background: linear-gradient(180deg, rgba(240,170,80,.95), rgba(210,120,35,.95)); border:1px solid rgba(0,0,0,.25); color:#1a1a1a;}
.wbtn.wbtn-orange .wbtn-icon{ background: rgba(255,255,255,.22); border:1px solid rgba(0,0,0,.18);}
.prod-main { cursor: zoom-in; }
.img-zoom{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.92); z-index: 99999;}
.img-zoom.open{ display:flex; }
.img-zoom img{ max-width: 92vw; max-height: 90vh; border-radius: 12px;}
.img-zoom-close{ position:absolute; top:14px; right:14px; border:0; background: rgba(255,255,255,.12); color:#fff; font-size:22px; padding:10px 12px; border-radius:12px; cursor:pointer;}
.img-zoom-nav{ position:absolute; top:50%; transform: translateY(-50%); border:0; background: rgba(255,255,255,.12); color:#fff; font-size:44px; line-height: 1; padding: 6px 14px; border-radius: 14px; cursor:pointer; user-select:none;}
.img-zoom-nav.prev{ left:14px; }
.img-zoom-nav.next{ right:14px; }
.img-zoom-nav[disabled]{ opacity:.25; cursor: default;}


/* Bouton Admin */
.wband{ display:flex; align-items:center; justify-content:flex-start;  gap:10px; flex-wrap:wrap; margin:12px 0; padding:10px 12px; border:1px solid rgba(255,255,255,.10);  border-radius: 25px 0px 25px 0px; background: rgba(17,17,17);  box-shadow:0 0 0 1px rgba(0,180,255,.08) inset;}
.wband-left{ display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap;}
.wband hr { flex: 0 0 100%; width: 100%; border: none; border-top: 1px solid rgba(255,255,255,.15); margin: 8px 0;}

/* --------############################################# Page Index ################################### */
.home-card-centre{ background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px; box-shadow: 0 0 25px rgba(0, 180, 255, 0.80); height: auto; overflow: visible;}
.home-card-left{ background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px; box-shadow: 0 0 25px rgba(0, 180, 255, 0.80); height: auto; overflow: visible;}
.home-card{ background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px; height: 410px; box-shadow: 0 0 25px rgba(0, 180, 255, 0.80); overflow-y: auto;     /* ascenseur vertical */ overflow-x: hidden;   /* pas de scroll horizontal */   /* Firefox */ scrollbar-width: thin; scrollbar-color: rgba(0,180,255,.55) rgba(255,255,255,.06);}
/* Chrome / Edge / Safari */
.home-card::-webkit-scrollbar{ width: 10px;}
.home-card::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 12px;}
.home-card::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(0,180,255,.85), rgba(0,120,255,.65)); border-radius: 12px; border: 2px solid rgba(0,0,0,.35); /* pour l'effet "incrusté" */ box-shadow: 0 0 10px rgba(0,180,255,.25);}
.home-card::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, rgba(0,210,255,.95), rgba(0,140,255,.75)); box-shadow: 0 0 14px rgba(0,180,255,.35);}
.home-card-title{ font-weight:700; margin-bottom:10px;}
.news-viewport{ height: 300px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px;}
.news-ticker{ display:block;}
.news-item{ width:100%; margin-bottom:12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(0,0,0,.35); overflow:hidden; height: 300px;}
.news-img{ background:#000;  width:100%; height:300px; overflow:hidden; }
.news-img img{ width:100%; height:100%; object-fit: fill; display:block;}
.news-txt{ float:left; width:70%; height:300px; padding:14px; box-sizing:border-box;}
.news-name{font-weight:700;margin-bottom:6px;}
.news-price{color:#00b4ff;font-weight:700;margin-bottom:10px;}
.home-small{color:#aaa;font-size:13px;}

/* Liens dans le bloc Points de vente */
a:link{ color: rgba(0,180,255,.95); text-decoration: none;}
a:visited{ color: rgba(180,180,180,.85); }
a:hover{ color: rgba(120,220,255,.98); text-decoration: underline;}
a:active{ color: rgba(0,140,255,.98);}
a:focus-visible{ outline: 2px solid rgba(0,180,255,.55); outline-offset: 2px; border-radius: 6px;}

.shop-icons {  display: flex;  gap: 30px;  align-items: center;  position: relative; }

.shop-icon { text-align: center; text-decoration: none; color: #cfd6dc; font-size: 13px;}
.shop-icon img { width: 35px; height: 35px; display: block; margin: 0 auto 6px; transition: transform .2s ease, opacity .2s ease;}
.shop-icon:hover img { transform: scale(1.12); opacity: .9;}
.shop-icon:hover span { color: #ffffff;}
.cart-icon { position: relative;}
.cart-badge { position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; background: #d42c2c; color: #fff; font-size: 11px; font-weight: bold; line-height: 18px; text-align: center; border-radius: 10px; box-shadow: 0 0 6px rgba(0,0,0,.6);}
.dark-tab-menu { display: flex; background: #111; border-bottom: 1px solid rgba(255,255,255,.08);}
.tab-item { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 14px 18px; text-decoration: none; color: #cfcfcf; font-size: 14px; font-weight: 600; background: #111; transition: background .2s ease, color .2s ease;}
.tab-item:hover {
    background: #1c1c1c;
    color: #ffffff;
    text-decoration: none; 
}
.tab-item.active { background: #1f1f1f; color: #ffffff; border-bottom: 3px solid #00c8ff;}
.tab-icon { font-size: 16px; line-height: 1;}
.tab-item:hover .tab-icon {
    text-decoration: none;
    display: inline-block;
}
.boutique-bandeau{ background: rgba(17,17,17); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 12px; margin-bottom: 16px;}
.boutique-bandeau-form{ display: flex; gap: 10px; align-items: center;}
.boutique-select, .boutique-search{ background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.15); color: #eee; padding: 8px 10px; border-radius: 10px; font-size: 14px;}
.boutique-search{ width: 260px; max-width: 260px;}
.boutique-select option{ background: #111; color: #eee;}
.boutique-btn-search{ background: linear-gradient(135deg, #111, #333); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 8px 14px; border-radius: 10px; cursor: pointer;}
.boutique-btn-search:hover{ background: linear-gradient(135deg, #222, #444);}

/* page sql erreur */
.admin-table{ width:100%; border-collapse: collapse; margin-top: 15px;}
.admin-table th, .admin-table td{ border:1px solid rgba(255,255,255,.1); padding:8px; vertical-align: top;}
.admin-table th{ background: rgba(0,0,0,.5); }
.sqlerr{ max-width: 1500px; max-height: 160px; overflow: auto; white-space: pre-wrap; font-size: 12px; background: rgba(0,0,0,.4); padding:6px; border-radius:6px;}
.admin-actions{ margin-top: 15px;}
.admin-info{ background: linear-gradient(135deg, rgba(0,120,0,.35), rgba(0,0,0,.55)); border: 1px solid rgba(0,180,0,.4); padding: 25px;}
 
 /* ##################################  Payer #################################### */
.order-recap-wrap { max-width: 900px; margin: 0 auto; padding: 20px;}
.order-recap { background: rgba(0,0,0,0.35); border-radius: 12px; padding: 25px;}
.order-items { list-style: none; padding: 0; margin: 0;}
.order-item { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.item-name { color: #fff;}
.item-qty { color: #aaa;}
.item-price { font-weight: 600; white-space: nowrap;}
.order-totals { margin-top: 320px; margin: 30px auto 0; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 15px;}
.order-totals .line { display: flex; justify-content: space-between; margin-bottom: 8px;}
.order-totals .total { font-size: 1.25em; font-weight: 700; margin-top: 12px;}
.order-action { margin-top: 30px; text-align: center;}

/* ################################ Evaluation des pdroduits ################################## */
.rating-stars { color: #ffcc33; text-shadow: 0 0 6px rgba(255, 204, 51, 0.6);}
.stars { display: inline-flex; gap: 1px;}
.star.full { color: #ffcc33; }
.star.empty { color: #bbb; opacity: .6;}
.rating-summary { margin: 15px 0; padding: 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;}
.rating-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
.rating-score { font-size: 22px; font-weight: bold;}
.rating-stars { color: #ffcc33;}
.rating-count { opacity: .7;}
.rating-line { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0;}
.rating-line span { width: 50px;}
.rating-line .bar { flex: 1; height: 8px; background: rgba(255,255,255,.15); border-radius: 6px; overflow: hidden;}
.rating-line .fill { height: 100%; background: #ff9900;}
.rating-link { margin-top: 8px; font-size: 13px;}
.rating-inline { cursor: pointer; display: inline-flex; align-items: center; gap: 6px;}
.rating-inline .stars { color: #ffcc33;}
.rating-popover { display: none; position: absolute; margin-top: 6px; background: #111; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 12px; width: 260px; z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,.6);}

/* ################################ Page avis Produits ################################## */
.avis-item { margin-bottom: 15px;}
.avis-stars { margin-bottom: 4px;}
.avis-date { font-size: 12px; opacity: .6; margin-top: 4px;}
.avis-user { font-size: 12px; opacity: .7; margin-bottom: 4px;}
.avis-commentaire { overflow: hidden; line-height: 1.6; background: rgb(45, 45, 45); padding: 6px 8px; border-radius: 5px;}
.avis-commentaire.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.avis-toggle { display: inline-block; margin-top: 6px; font-size: 13px; opacity: .75; cursor: pointer;}
.avis-toggle:hover { opacity: 1;}

.td-top { vertical-align: top; padding: 10px 25px 10px 25px; /* haut | droite | bas | gauche */}
.td-top-center { vertical-align: top; text-align: center; padding: 10px 25px 10px 25px;}
.img-cadre { border-radius: 14px;  box-shadow:  0 0 0 1px rgba(0, 180, 255, 0.80), 0 0 18px rgba(0, 180, 255, 0.80);}
.fond-gris { background: rgb(35, 35, 35);}
.tbl td.td-top.fond-gris { background: rgb(35, 35, 35);}
.tbl td.td-top-center.fond-gris { background: rgb(35, 35, 35);}
.avis-edit { margin-top: 4px; font-size: 12px;}
.pagination { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;}
.pagination a { opacity: .8;}
.pagination a:hover { opacity: 1;}

/* -------------------------------- Suppression compte ---------------------------------- */
.danger-zone { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); text-align: center;}
.btn-danger { background: rgba(180, 40, 40, .85); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 14px;}
.btn-danger:hover { background: rgba(220, 60, 60, .95);}
.danger-text { font-size: 12px; color: #ccc; margin-top: 8px;}
.info-box { background: rgba(0, 120, 180, .15); border: 1px solid rgba(0, 180, 255, .35); color: #e6f6ff; padding: 12px 16px; border-radius: 12px; margin: 20px auto; width: fit-content; max-width: 90%; box-shadow: 0 0 18px rgba(0, 180, 255, .25); font-size: 14px; text-align: center;}

/* -------------------------------- Page Pro ---------------------------------- */
.pro-texte-image { font-size: 16px; line-height: 1.6;}
.pro-image-droite { float: right; max-width: 700px;  margin: 10px 10px 20px 100px;}
/*###########################################################################################################*/
/*######################################## Mail Box – Dark Wapinou #########################################*/
/*###########################################################################################################*/

#val-mailbox { display: flex; gap: 20px; font-family: Arial, sans-serif; width: 100%; box-sizing: border-box;}
/* ==================== Barre latérale ==================== */
#mail-sidebar { width: 220px; background: rgba(0,0,0,0.85); color: #e6e6e6; padding: 16px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 0 18px rgba(0,180,255,0.35);}
#mail-sidebar h2 { font-size: 18px; margin-bottom: 12px; color: #00b4ff;}
#mail-sidebar ul { list-style: none; padding: 0; margin: 0;}
#mail-sidebar li { margin: 6px 0;}
#mail-sidebar a { color: #a9b0bb; text-decoration: none; display: block; padding: 6px 8px; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease;}
#mail-sidebar a.active,
#mail-sidebar a:hover { color: #fff; font-weight: bold; background: rgba(0,180,255,0.18);}
/* Bouton composer */
#compose-btn { margin-top: 16px; background: linear-gradient(180deg, #00b4ff, #006699); color: #fff; border: none; border-radius: 10px; padding: 10px 12px; cursor: pointer; width: 100%; font-weight: bold; box-shadow: 0 0 14px rgba(0,180,255,0.6);}
#compose-btn:hover { box-shadow: 0 0 20px rgba(0,180,255,0.9);}
/* ==================== Zone principale ==================== */
#mail-content { flex-grow: 1; background: rgba(0,0,0,0.8); border-radius: 14px; padding: 20px; box-sizing: border-box; overflow-x: auto; box-shadow: 0 0 22px rgba(0,180,255,0.35); color: #e6e6e6;}
/* ==================== Tableau des messages ==================== */
.val-mail-table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,0.65); table-layout: fixed; border-radius: 10px; overflow: hidden;}
.val-mail-table th,.val-mail-table td { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 7px 8px; word-wrap: break-word; font-size: 13px; color: #e6e6e6;}
.val-mail-table th { background: rgba(0,180,255,0.15); color: #00b4ff;}
.val-mail-table tr:hover { background: rgba(0,180,255,0.10); cursor: pointer;}
/* ==================== Statuts ==================== */
.read { color: #00ff99; font-weight: bold;}
.unread { color: #ff4c4c; font-weight: bold;}
.mail-unread { font-weight: bold; color: #00b4ff !important; background: rgba(0,180,255,0.12);}
/* ==================== Contenu message ==================== */
.mail-msg-content { text-align: left !important; vertical-align: top; color: #e6e6e6;}
.mail-msg-content td { text-align: left !important; vertical-align: top;}
.val-mail-page { background: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 16px; width: 97.5%; box-shadow: 0 0 25px rgba(0, 180, 255, 0.35); color: #e6e6e6;}
/* ==================== Message ouvert ==================== */
.mail-opened { background: rgba(15, 20, 30, 0.9); border-radius: 12px; padding: 16px 22px; margin: 12px 0; box-shadow: 0 0 18px rgba(0,180,255,0.25); color: #e6e6e6; font-family: Georgia, serif; animation: fadeIn 0.3s ease;}
.mail-opened h3 { font-size: 18px; color: #00b4ff;}
.mail-opened .meta { font-size: 13px; color: #a9b0bb;}
.mail-opened hr { border: none; border-top: 1px solid rgba(0,180,255,0.3);}
/* ==================== Corps du message ==================== */
.mail-body { background: rgba(0,0,0,0.65); border-radius: 10px; padding: 14px; line-height: 1.6em; box-shadow: inset 0 0 6px rgba(0,0,0,0.6); color: #e6e6e6; overflow-wrap: break-word;}
/* ==================== Actions ==================== */
.mail-actions { margin-top: 12px; text-align: right;}
.mail-actions button { background: linear-gradient(180deg, #b87333, #8a4e1f); border: none; color: #fff; padding: 6px 12px; border-radius: 10px; margin-left: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 0 8px rgba(184,115,51,0.5); transition: transform 0.15s ease, box-shadow 0.15s ease;}
.mail-actions button:hover { transform: translateY(-2px); box-shadow: 0 0 14px rgba(0,180,255,0.7);}
/* bouton "non lu" */
.mail-actions button:nth-child(3) { background: linear-gradient(180deg, #003366, #001a33); box-shadow: 0 0 10px rgba(0,180,255,0.5);}
/* ==================== Tableau ==================== */
.val-mail-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: rgba(0,0,0,0.7); border-radius: 10px; overflow: hidden;}
.val-mail-table th,.val-mail-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.val-mail-table th { background: rgba(0,180,255,0.15); color: #00b4ff;}
.val-mail-table tr:hover { background: rgba(0,180,255,0.08);}
/* ==================== Toolbar ==================== */
.mail-toolbar { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.6); border: 1px solid rgba(0,180,255,0.3); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.6); color: #e6e6e6;}
.trash-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: #a9b0bb; transition: transform 0.2s ease, color 0.2s ease;}
.trash-btn:hover { transform: scale(1.15);}
.trash-btn.delete:hover { color: #ff4c4c; }
.trash-btn.read:hover   { color: #00ff99; }
/* ==================== Réponse ==================== */
.reply-box { background: rgba(0,0,0,0.7); border: 1px solid rgba(0,180,255,0.4); border-radius: 10px; padding: 12px; box-shadow: inset 0 0 6px rgba(0,0,0,0.7);}
.send-reply-btn { background: linear-gradient(180deg, #00b4ff, #006699); border: none; color: #fff; padding: 8px 16px; border-radius: 10px; font-weight: bold; box-shadow: 0 0 12px rgba(0,180,255,0.7);}
/* ==================== Boutons centraux ==================== */
.valp-btn { display: flex; align-items: center; gap: 8px; padding: 12px 22px; font-weight: bold; border-radius: 12px; color: #fff; background: linear-gradient(180deg, #111, #000); box-shadow: 0 0 18px rgba(0,180,255,0.5);}
.valp-btn.send { background: linear-gradient(180deg, #00b4ff, #006699);}
.valp-btn.draft { background: linear-gradient(180deg, #444, #222);}
/* ==================== Suggestions ==================== */
.suggestions-box { background: #0b0f14; border: 1px solid #00b4ff; border-radius: 8px; box-shadow: 0 0 15px rgba(0,180,255,0.6);}
.suggest-item { padding: 6px 10px; cursor: pointer; color: #e6e6e6;}
.suggest-item:hover { background: rgba(0,180,255,0.2);}
/* ==================== Badge ==================== */
.badge { background: #00b4ff; color: #000; border-radius: 10px; padding: 2px 6px; font-size: 0.85em; font-weight: bold;}

/* ---------------------------------------- Style spécifique pour le Livre d'Or Wapinou --------------------------------------- */
.livre-container { display: flex; flex-direction: column; align-items: center; width: 100%;}
.livre-box {  background: rgba(0, 0, 0, 0.8);  padding: 55px 45px;  border-radius: 18px;  box-shadow: 0 0 25px rgba(0, 180, 255, 0.80);  max-width: 560px;  width: 92%; text-align: left; margin-bottom: 40px;}
.livre-input { width: 100%;  background: rgba(255, 255, 255, 0.05) !important;  border: 1px solid rgba(0, 180, 255, 0.3) !important;  color: #fff !important;  padding: 12px;  border-radius: 8px;  margin-bottom: 15px; outline: none; box-sizing: border-box;}
.livre-input:focus {  border-color: #00b4ff !important;  box-shadow: 0 0 10px rgba(0, 180, 255, 0.2); }
.livre-btn {  background: #00b4ff;  color: #000;  border: none;  padding: 12px 25px;  border-radius: 8px;  font-weight: bold;  cursor: pointer;  transition: 0.3s;}
.livre-btn:hover {  background: #fff;  box-shadow: 0 0 15px #00b4ff; }
.livre-msg-item { background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 25px rgba(0, 180, 255, 0.80);  margin-left: auto; margin-right: auto; padding: 20px;  border-radius: 10px;  margin-bottom: 20px;  border-left: 4px solid #00b4ff; max-width: 1100px; width: 92%; text-align: left;}
.livre-box-hidden { display: none; }
.livre-box-visible { display: block !important; opacity: 1 !important; transform: translateY(0) !important;}
.livre-wrapper-overflow { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 1.5s ease-in-out, opacity 1s ease;}
.livre-wrapper-ouvert { max-height: 1000px; opacity: 1;}
.livre-box-descendue { transform: translateY(0);}
input[name="check_hidden"], .email-pro-container { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
.livre-reponse-wap {
    margin-top: 20px;
    margin-left: 25px; /* Décalage pour l'effet réponse */
    padding: 15px;
    background: rgba(0, 180, 255, 0.05); /* Léger fond bleu */
    border-left: 3px solid #00b4ff; /* Ligne de rappel à gauche */
    border-radius: 0 10px 10px 0;
    position: relative;
}

/* Optionnel : un petit triangle pour faire "bulle de BD" */
.livre-reponse-wap::before {
    content: "↳";
    position: absolute;
    left: -20px;
    top: 0;
    color: #00b4ff;
    font-size: 1.2em;
}
/* fin Livre d'Or Wapinou*/

.tbl td.ana_td_auto {
    vertical-align: top;
    padding: 10px;
    max-width: 250px;
}

/* Le conteneur interne indispensable pour le scroll */
.ana_scroll_limit {
    display: block; /* Force le navigateur à respecter la hauteur */
    max-height: 70px; /* Environ 7 lignes */
    line-height: 1.2em;
    overflow-y: auto; 
    max-width: 100%;
    white-space: pre-line; 
    font-size: 0.85em;
    color: #ccc;
    scrollbar-width: thin; 
    scrollbar-color: #00b4ff rgba(0,0,0,0); /* Aux couleurs de ta lueur bleue */
}

/* Style de l'ascenseur pour Chrome/Safari */
.ana_scroll_limit::-webkit-scrollbar { width: 5px; }
.ana_scroll_limit::-webkit-scrollbar-thumb { background: #00b4ff; border-radius: 5px; }



.pager-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Espace entre chaque élément */
    margin: 20px 0;
    flex-wrap: wrap; /* Permet de revenir à la ligne sur mobile si vraiment trop long */
}

.pager-link, .pager-disabled, .pager-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px; /* Largeur minimum pour les chiffres */
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s;
}

/* Style sombre et discret */
.pager-link {
    color: #bbb;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pager-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.pager-link.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: bold;
    border-color: #666;
}

.pager-disabled {
    color: #444;
    background: transparent;
    border: 1px solid #222;
    cursor: default;
}

.pager-dots {
    color: #666;
    border: none;
    background: transparent;
}

/*################################ Analyses des Visiteurs ############################*/

.stats-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));  gap: 50px; }
.chart-box {  background: rgba(0,0,0,0.3);  padding: 25px;  border-radius: 18px;   box-shadow: 0 0 25px rgba(0, 180, 255, 0.80);  border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center;}
.chart-container {  width: 300px;  height: 300px;  position: relative; margin-bottom: 20px;}
.custom-legend {  list-style: none;  padding: 0;  margin: 0;  width: 100%; max-width: 280px;}
.custom-legend li {  font-size: 14px;  color: #bbb;  margin-bottom: 8px;  display: flex;  align-items: center;  justify-content: flex-start; }
.dot {  width: 12px;  height: 12px;  border-radius: 3px;  margin-right: 12px;  flex-shrink: 0; }
.val {  margin-left: auto;  color: #00b4ff;  font-weight: bold; }

/* ##################################### Page Actualité ########################### */
  .actu_item { margin-bottom: 30px; padding: 20px; border: double 8px #00b4ff; position: relative; border-radius: 0px 25px 0px 25px; }
  .actu_date { font-size: 0.8em; color: gray; top:-20px; }
  .add-btn { position: relative; left: 10px; background: green; color: white; padding: 8px 12px; border: none; border-radius: 5px;
   cursor: pointer; font-size: 16px; z-index: 5;}
  .add-form, .edit-form { display: none; margin: 10px 0; padding: 10px; background: rgba(255,255,255,0.8); border: 2px dashed #00b4ff; 
    border-radius: 10px; }
  .edit-btn { position: absolute; bottom: 10px; right: 10px; background: orange; color: white; padding: 5px 8px; border: none; border-radius: 5px; cursor: pointer; }
  .actu_titre{ font-size: 24px; color: #00b4ff; font-family: 'Metamorphous'; font-weight: bold; }
  .actu_text{ font-size: 16px; padding: 10px;  border: solid 2px  #00b4ff;     font-family: verdana, tahoma, arial, sans-serif; }

  /* Conteneur principal du dropdown */
.menu_dropdown {
    position: relative;
    display: inline-block;
}

/* La petite flèche à côté du texte */
.menu_arrow {
    font-size: 0.75em;
    margin-left: 5px;
    opacity: 0.8;
}

/* Le bloc du sous-menu (caché) */
.menu_submenu {
    display: none;
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: #1a1a1a; /* Fond sombre */
    min-width: 220px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
    z-index: 999;
    border: 1px solid #333;
    border-radius: 4px; /* Un petit arrondi pour le style */
}

/* Affichage au survol */
.menu_dropdown:hover .menu_submenu {
    display: flex;
    flex-direction: column;
}

/* Style des liens internes au sous-menu */
.menu_subitem {
    padding: 12px 15px;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s ease;
}

.menu_subitem:hover {
    background-color: #2a2a2a;
    color: #00aaff; /* Ou la couleur d'accent de ton site */
}


/* =======================================================================================================================
   BIBLIOTHÈQUE & LECTEUR PDF WAPINOU (Version Unifiée 2026)
======================================================================================================================= */

/* --- Conteneur principal (Aligné sur tes pages standards) --- */

@media (max-width: 1500px) {
    .pdf_nyro_biblio {
        flex-wrap: wrap; /* Permet aux blocs de passer en dessous sur petits écrans */
    }
    .pdf_top4, .pdf_perso {
        flex: 1 1 100%; /* Prend toute la largeur si l'écran est trop petit */
        position: static;
    }
}

.pdf_nyro_biblio { 
    width: 95%; 
    max-width: 1600px; /* Augmenté pour laisser de la place aux deux colonnes */
    margin: 30px auto; 
    display: flex; /* Active le mode côte à côte */
    flex-direction: row;
    gap: 40px; /* Espace entre le Top 4 et le contenu */
    align-items: flex-start; 
}
.pdf_top4, .pdf_perso {
    flex: 0 0 280px; /* Largeur fixe pour les colonnes latérales */
    position: sticky;
    top: 20px;
    background: radial-gradient(circle at top, #121212, #000); 
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 0 25px rgba(0, 180, 255, 0.40);
    border: 1px solid rgba(255,255,255,0.10);
    color: #ddd;
}

.pdf_nyro_content {
    flex: 1; /* Prend tout l'espace disponible à droite du Top 4 */
    background: radial-gradient(circle at top, #121212, #000); 
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 0 25px rgba(0, 180, 255, 0.40);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    z-index: 1;
}


.pdf_top4 h3 {
    text-align: center;
    color: #00b4ff;
    margin: 6px 0 12px;
    font-size: 22px;
    letter-spacing: 1px;
}

.pdf_top4_item { 
    margin-bottom: 12px; 
    padding-bottom: 10px;
    /* On définit d'abord une bordure classique pour la taille */
    border-bottom: 2px solid;
    /* On applique le dégradé via border-image */
    border-image: linear-gradient(to right, transparent, #00b4ff, transparent) 1;
}


.pdf_top4_title { font-weight: bold; color: #00b4ff; }
.pdf_top4_meta { font-size: 13px; color: #aaa; margin-top: 6px; }

/* --- Barre de Sélection (Alignée sur 560px) --- */
.pdf_barre_haut {
    margin: 0 auto 20px auto;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 180, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.pdf_selector_row { 
    display: flex; 
    flex-direction: column; /* Empilé pour rester dans les 560px */
    align-items: center; 
    gap: 10px; 
}

.pdf_select {
    
    padding: 10px;
    background: #000;
    color: #eee;
    border: 1px solid rgba(0, 180, 255, 0.4);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}

/* --- Zone du Lecteur --- */
.pdf_reader_area {  display: flex;  flex-direction: column;  min-height: 400px; }

.pdf_reader_inner { 
    width: 100%;
    max-width: 920px; /* Aligné sur tes tableaux .tbl */
    margin: 0 auto; 
}

.pdf_container { 
    background: rgba(0,0,0,0.3); 
    padding: 20px; 
    border-radius: 14px; 
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative; 
}

/* --- Contrôles & Navigation (Style Boutons Wapinou) --- */
.pdf_controls_bar, .pdf_navigation_controls {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center; /* Aligne verticalement tous les enfants au centre */
    gap: 15px;           /* Espace un peu plus important pour l'aération */
    flex-wrap: wrap;
    background: rgba(0,0,0,0.5);
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}
/* On stylise spécifiquement le compteur de pages */
.pdf_page_count {
    color: #eee;
    font-weight: bold;
    font-family: Arial, sans-serif;
    display: flex;       /* Permet un alignement précis */
    align-items: center;
    height: 100%;        /* S'assure qu'il utilise la hauteur disponible */
    margin: 0 5px;
}
.pdf_btn, .pdf_nav_btn { 
    padding: 8px 14px; 
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); 
    color: white; 
    border: 1px solid rgba(255,255,255,0.16); 
    border-radius: 10px; 
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.12s ease;
}

.pdf_btn:hover, .pdf_nav_btn:hover { 
    background: rgba(0, 180, 255, 0.2); 
    border-color: #00b4ff;
}

.pdf_primary_btn { 
    background: linear-gradient(180deg, #00b4ff, #006699); 
    border: none;
    box-shadow: 0 0 12px rgba(0,180,255,0.4);
}

.pdf_exit_btn { 
    background: rgba(180, 40, 40, 0.8); 
    color: #fff; 
    border: 1px solid rgba(255,255,255,0.2); 
}

/* --- Canvas & Protection --- */
#my_pdf_viewer canvas {
    position: relative;
    z-index: 99;
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto !important;
    box-shadow: 0 0 30px rgba(0, 180, 255, 0.3);
    border-radius: 6px;
    user-select: none !important;
    pointer-events: none;
}

.pdf_canvas { user-select: none !important; }

/* --- Mode Plein Écran (Wapinou Dark) --- */
.pdf_fullscreen_active {
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Mode Nuit --- */
.pdf_viewer.pdf_night_mode canvas {
    filter: invert(90%) hue-rotate(180deg) brightness(85%) contrast(110%) !important;
}

/* --- Divers --- */
.pdf_page_input {
    width: 50px;
    height: 34px;        /* Hauteur fixe pour matcher les boutons */
    padding: 0;
    text-align: center;
    background: #000;
    color: #00b4ff;
    border: 1px solid #444;
    border-radius: 8px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

.pdf_link_button { 
    background: none; border: none; color: #00b4ff; cursor: pointer; text-decoration: none; 
}
.pdf_link_button:hover { text-decoration: underline; }
.pdf_intro {
    text-align: center;         /* Centre le texte horizontalement */
    margin: 10px auto;          /* Centre le bloc si besoin et ajoute un espace */
    font-style: italic;         /* Un style poétique pour tes manuscrits */
    color: #00b4ff;             /* Le bleu signature de ton site */
    font-size: 1.2rem;          /* Taille adaptée */
    text-shadow: 0 0 10px rgba(0, 180, 255, 0.5); /* Effet lumineux discret */
    width: 100%;                /* S'assure qu'il prend toute la largeur pour centrer */
}

/* S'assure aussi que le h1 parent ne bloque pas le centrage */
.pdf_barre_haut h1 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
}

/* ##################################### Page Poèmes ########################### */

/* Conteneur global si besoin (optionnel) */
.poemes_block {
  margin-top: 10px;
}

/* Un poème = un item (équivalent actu_item) */
.poemes_item {
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
    border: solid 0px #00b4ff;
  border-radius: 18px;
  max-width: 1200px;
  
}

/* Grille 2 colonnes : texte + image */
.poemes_row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}

/* Colonnes */
.poemes_col_text {
  flex: 1 1 55%;
  min-width: 280px;
}

.poemes_col_img {
  flex: 1 1 45%;
  min-width: 220px;

}

/* Alternance : item pair = inverse (texte droite / image gauche) */
.poemes_item:nth-child(even) .poemes_row {
  flex-direction: row-reverse;
}

/* Bloc texte (contient titre + date + contenu) */
.poemes_textbox {
  padding: 15px;
  border: solid 0px #00b4ff;
  border-radius: 18px;
  box-shadow: 0 0 25px rgba(0, 180, 255, 0.80);
  background: rgba(255,255,255,0.06);
  text-align: center;          /* ton besoin : centré */
  line-height: 1.6;            /* interligne */
  font-family: verdana, tahoma, arial, sans-serif;
  font-size: 16px;
}

/* Titre dans le bloc texte */
.poemes_titre {
  font-size: 24px;
  color: #00b4ff;
  font-family: 'Metamorphous';
  font-weight: bold;
  margin: 0 0 8px 0;
}

/* Date (mise en ligne seulement) */
.poemes_date {
  font-size: 0.8em;
  color: gray;
  margin-bottom: 12px;
}

/* Contenu du poème */
.poemes_texte {
  font-size: 16px;
  white-space: normal;
}

/* Image : cadre propre + responsive */
.poemes_imgbox { width: 100%; max-width: 420px; border: solid 0px #00b4ff; border-radius: 18px; box-shadow: 0 0 25px rgba(0, 180, 255, 0.80); overflow: hidden; background: rgba(255,255,255,0.06);}

.poemes_imgbox img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fallback si pas d'image */
.poemes_img_placeholder {
  width: 100%;
  max-width: 420px;
  padding: 35px 20px;
  border: dashed 2px #00b4ff;
  border-radius: 12px;
  text-align: center;
  color: #00b4ff;
  opacity: 0.9;
  font-family: verdana, tahoma, arial, sans-serif;
}

/* Boutons admin (mêmes que ton style mais préfixés) */
.poemes_add_btn {
  position: relative;
  left: 10px;
  background: green;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 5;
}

.poemes_edit_btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: orange;
  color: white;
  padding: 5px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.poemes_add_form,
.poemes_edit_form {
  display: none;
  margin: 10px 0;
  padding: 10px;
  background: rgba(255,255,255,0.8);
  border: 2px dashed #00b4ff;
  border-radius: 10px;
}

/* Responsive : sur mobile -> texte au-dessus, image dessous, sans alternance */
@media (max-width: 900px) {
  .poemes_row {
    flex-direction: column;
  }
  .poemes_item:nth-child(even) .poemes_row {
    flex-direction: column;
  }
  .poemes_col_text,
  .poemes_col_img {
    min-width: 100%;
  }
  .poemes_imgbox,
  .poemes_img_placeholder {
    max-width: 100%;
  }
}