/* Digraf Group - boutique et fiche produit (couleurs du logo) */
#dg-epi{
  /* === COULEURS DU SITE : modifiez uniquement ces 7 lignes === */
  --ink:#0d0d0d;      /* noir du logo : en-tête, boutons foncés */
  --steel:#4a4a4a;    /* texte secondaire */
  --mist:#f4f4f3;     /* fond des images produits */
  --line:#dddddb;     /* bordures */
  --paper:#ffffff;    /* fond de page */
  --hiviz:#ff6600;    /* orange du logo : boutons, étiquettes, bande */
  --hiviz-d:#e05a00;  /* couleur principale au survol */
  /* ========================================================= */
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.55; box-sizing:border-box;
}
#dg-epi *,#dg-epi *::before,#dg-epi *::after{box-sizing:border-box}
#dg-epi a{text-decoration:none;color:inherit}
#dg-epi :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#dg-epi .wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* Bandeau */
#dg-epi .hero{color:#fff;padding:54px 0 46px;background:linear-gradient(100deg,rgba(13,13,13,.97) 0%,rgba(13,13,13,.9) 55%,rgba(13,13,13,.72) 100%),url('https://digrafgroup.sn/wp-content/uploads/2025/08/En-tete.png') center/cover no-repeat,var(--ink)}
#dg-epi .hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:end}
#dg-epi .crumbs{font-size:14px;color:#bdbdbd;margin-bottom:16px}
#dg-epi .crumbs a:hover{color:var(--hiviz)}
#dg-epi .hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(36px,5.6vw,64px);line-height:1;margin:0 0 16px;max-width:14ch}
#dg-epi .hero p{margin:0;max-width:58ch;color:#dcdcdc;font-size:17px}
#dg-epi .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
#dg-epi .hero-cta .btn{padding:0 24px;height:48px}
#dg-epi .hero-cta .btn-alt{background:transparent;color:#fff;border-color:#fff}
#dg-epi .hero-cta .btn-alt:hover{background:#fff;color:var(--ink)}
#dg-epi .stats{display:flex;flex-wrap:wrap;gap:8px 30px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.22)}
#dg-epi .stats div{display:flex;flex-direction:column}
#dg-epi .stats dt{font:700 28px/1 'Barlow Condensed',sans-serif;color:var(--hiviz)}
#dg-epi .stats dd{margin:3px 0 0;font-size:13.5px;color:#cfcfcf}
#dg-epi .panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-left:5px solid var(--hiviz);border-radius:10px;padding:20px 22px}
#dg-epi .panel h2{font:700 22px 'Barlow Condensed',sans-serif;margin:0 0 10px}
#dg-epi .panel ul{list-style:none;margin:0;padding:0}
#dg-epi .panel li+li{border-top:1px solid rgba(255,255,255,.14)}
#dg-epi .panel a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;color:#fff;font-weight:500}
#dg-epi .panel a::after{content:'+';color:var(--hiviz);font-weight:700}
#dg-epi .panel a:hover{color:var(--hiviz)}
#dg-epi .tape{height:14px;background:repeating-linear-gradient(-45deg,var(--hiviz) 0 16px,var(--ink) 16px 32px)}
@media (max-width:860px){#dg-epi .hero-grid{grid-template-columns:1fr;gap:28px}}

/* Barre d'outils */
#dg-epi .bar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
#dg-epi .bar-in{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;padding:14px 0}
#dg-epi .chips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 420px}
#dg-epi .chip{font:600 14px 'Barlow',sans-serif;border:1.5px solid var(--line);background:var(--paper);color:var(--steel);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
#dg-epi .chip:hover{border-color:var(--ink)}
#dg-epi .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
#dg-epi .tools{display:flex;gap:10px;flex:0 1 auto;flex-wrap:wrap}
#dg-epi .field{font:500 15px 'Barlow',sans-serif;height:42px;border:1.5px solid var(--line);border-radius:8px;padding:0 12px;background:var(--paper);color:var(--ink)}
#dg-epi .field:focus{border-color:var(--ink);outline:none}
#dg-epi input.field{width:210px}
#dg-epi .count{font-size:14px;color:var(--steel);padding:18px 0 4px}

/* Grille produits */
#dg-epi .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;padding:14px 0 36px;margin:0;list-style:none}
#dg-epi .card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;transition:border-color .15s,box-shadow .15s}
#dg-epi .card:hover{border-color:var(--ink);box-shadow:0 6px 0 var(--hiviz)}
#dg-epi .card[hidden]{display:none}
#dg-epi .pic{position:relative;aspect-ratio:1/1;background:var(--mist);display:flex;align-items:center;justify-content:center;overflow:hidden}
#dg-epi .pic img{width:100%;height:100%;object-fit:contain;padding:10px;mix-blend-mode:multiply}
#dg-epi .pic .ph{width:84px;height:84px;fill:none;stroke:#9aa7b1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#dg-epi .tag{position:absolute;left:12px;top:12px;background:var(--hiviz);color:var(--ink);font:700 13px 'Barlow',sans-serif;padding:4px 10px;border-radius:5px}
#dg-epi .body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;flex:1}
#dg-epi .cat{font-size:13.5px;color:var(--steel)}
#dg-epi .name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:23px;line-height:1.12;margin:0}
#dg-epi .name a:hover{text-decoration:underline;text-decoration-color:var(--hiviz-d);text-decoration-thickness:3px;text-underline-offset:3px}
#dg-epi .price{font-size:15px;color:var(--steel);margin-top:2px}
#dg-epi .actions{display:grid;gap:8px;margin-top:auto;padding-top:14px}
#dg-epi .btn{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:8px;font:600 15px 'Barlow',sans-serif;border:2px solid var(--ink);transition:background .15s,color .15s}
#dg-epi .btn-main{background:var(--hiviz);border-color:var(--hiviz);color:var(--ink)}
#dg-epi .btn-main:hover{background:var(--hiviz-d);border-color:var(--hiviz-d)}
#dg-epi .btn-alt{background:var(--paper);color:var(--ink)}
#dg-epi .btn-alt:hover{background:var(--ink);color:#fff}

#dg-epi .empty{display:none;text-align:center;padding:60px 20px;color:var(--steel)}
#dg-epi .empty strong{display:block;font:700 26px 'Barlow Condensed',sans-serif;color:var(--ink);margin-bottom:6px}
#dg-epi .empty button{margin-top:14px;font:600 15px 'Barlow',sans-serif;padding:10px 20px;border-radius:8px;border:2px solid var(--ink);background:var(--paper);cursor:pointer}

/* Pagination */
#dg-epi .pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:6px 0 48px}
#dg-epi .pager a,#dg-epi .pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:8px;font-weight:600;padding:0 12px}
#dg-epi .pager a:hover{border-color:var(--ink)}
#dg-epi .pager .nav{padding:0 18px}
#dg-epi .pager .off{opacity:.4;cursor:not-allowed}
#dg-epi .pic.has .ph{display:none}
#dg-epi .pager .cur{background:var(--ink);border-color:var(--ink);color:#fff}

/* Bandeau devis */
#dg-epi .quote{background:var(--hiviz);padding:34px 0}
#dg-epi .quote-in{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
#dg-epi .quote h2{font:700 clamp(26px,3.6vw,38px)/1.1 'Barlow Condensed',sans-serif;margin:0 0 6px}
#dg-epi .quote p{margin:0;max-width:56ch}
#dg-epi .quote .btn{padding:0 26px;background:var(--ink);border-color:var(--ink);color:#fff;height:50px}
#dg-epi .quote .btn:hover{background:#000}

@media (max-width:640px){
  #dg-epi .hero{padding:34px 0 30px}
  #dg-epi .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  #dg-epi .body{padding:12px}
  #dg-epi .name{font-size:19px}
  #dg-epi .btn{font-size:14px;height:42px}
  #dg-epi input.field,#dg-epi .field{width:100%;flex:1 1 100%}
  #dg-epi .tools{width:100%}
  #dg-epi .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  #dg-epi .chip{white-space:nowrap}
}
@media (max-width:380px){#dg-epi .grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#dg-epi *{transition:none!important}}

#dg-prod{
  /* === COULEURS DU LOGO : modifiez uniquement ces lignes === */
  --ink:#0d0d0d; --steel:#4a4a4a; --mist:#f4f4f3; --line:#dddddb; --paper:#ffffff;
  --hiviz:#ff6600; --hiviz-d:#e05a00;
  /* ======================================================== */
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;box-sizing:border-box;
}
#dg-prod *,#dg-prod *::before,#dg-prod *::after{box-sizing:border-box}
#dg-prod a{text-decoration:none;color:inherit}
#dg-prod :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
#dg-prod .wrap{max-width:1240px;margin:0 auto;padding:0 20px}
#dg-prod .tape{height:14px;background:repeating-linear-gradient(-45deg,var(--hiviz) 0 16px,var(--ink) 16px 32px)}

/* Fil d'Ariane */
#dg-prod .crumbs{background:var(--mist);border-bottom:1px solid var(--line);font-size:14px;color:var(--steel)}
#dg-prod .crumbs .wrap{padding-top:12px;padding-bottom:12px}
#dg-prod .crumbs a:hover{color:var(--hiviz-d);text-decoration:underline}
#dg-prod .crumbs [aria-current]{color:var(--ink);font-weight:600}

/* Produit */
#dg-prod .pgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;padding:40px 0 30px;align-items:start}
#dg-prod .gallery{position:sticky;top:20px}
#dg-prod .main{position:relative;aspect-ratio:1/1;background:var(--mist);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#dg-prod .main img{width:100%;height:100%;object-fit:contain;padding:18px;mix-blend-mode:multiply}
#dg-prod .main .tag{position:absolute;left:16px;top:16px;background:var(--hiviz);color:var(--ink);font:700 14px 'Barlow',sans-serif;padding:5px 12px;border-radius:6px}
#dg-prod .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
#dg-prod .thumbs button{width:80px;height:80px;padding:0;border:2px solid var(--line);border-radius:8px;background:var(--mist);cursor:pointer;overflow:hidden}
#dg-prod .thumbs button[aria-current="true"]{border-color:var(--hiviz)}
#dg-prod .thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

#dg-prod .eyebrow{font-size:14px;font-weight:600;color:var(--hiviz-d)}
#dg-prod .eyebrow:hover{text-decoration:underline}
#dg-prod h1{font:700 clamp(36px,5vw,54px)/1.02 'Barlow Condensed',sans-serif;margin:6px 0 10px}
#dg-prod .ref{font-size:14px;color:var(--steel);margin:0 0 4px}
#dg-prod .price{display:flex;align-items:baseline;gap:10px;padding:14px 0;margin:10px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#dg-prod .price strong{font:700 28px 'Barlow Condensed',sans-serif}
#dg-prod .price span{font-size:14px;color:var(--steel)}
#dg-prod .short{margin:0 0 20px;color:var(--steel);font-size:17px}
#dg-prod .lbl{display:block;font-weight:600;font-size:15px;margin:0 0 8px}
#dg-prod .sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
#dg-prod .sizes input{position:absolute;opacity:0;width:1px;height:1px}
#dg-prod .sizes label{min-width:48px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1.5px solid var(--line);border-radius:8px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
#dg-prod .sizes label:hover{border-color:var(--ink)}
#dg-prod .sizes input:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
#dg-prod .sizes input:focus-visible+label{outline:3px solid var(--hiviz);outline-offset:2px}
#dg-prod .buy{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
#dg-prod .qty{display:inline-flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;height:52px}
#dg-prod .qty button{width:46px;border:0;background:var(--mist);font:600 22px 'Barlow',sans-serif;cursor:pointer;color:var(--ink)}
#dg-prod .qty button:hover{background:var(--line)}
#dg-prod .qty input{width:62px;border:0;text-align:center;font:600 17px 'Barlow',sans-serif;color:var(--ink);-moz-appearance:textfield}
#dg-prod .qty input::-webkit-outer-spin-button,#dg-prod .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#dg-prod .btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:8px;font:600 16px 'Barlow',sans-serif;border:2px solid var(--ink);transition:background .15s,color .15s}
#dg-prod .btn-main{flex:1 1 220px;background:var(--hiviz);border-color:var(--hiviz);color:var(--ink)}
#dg-prod .btn-main:hover{background:var(--hiviz-d);border-color:var(--hiviz-d)}
#dg-prod .btn-alt{background:var(--paper);color:var(--ink)}
#dg-prod .btn-alt:hover{background:var(--ink);color:#fff}
#dg-prod .wa{margin-top:12px;width:100%}
#dg-prod .facts{list-style:none;margin:24px 0 0;padding:18px 20px;background:var(--mist);border-left:5px solid var(--hiviz);border-radius:8px;display:grid;gap:10px;font-size:15px}
#dg-prod .facts b{display:block;font-weight:600}
#dg-prod .facts span{color:var(--steel)}

/* Onglets */
#dg-prod .tabs{padding:20px 0 44px}
#dg-prod [role=tablist]{display:flex;gap:6px;border-bottom:2px solid var(--line);overflow-x:auto}
#dg-prod [role=tab]{font:600 16px 'Barlow',sans-serif;background:none;border:0;padding:12px 20px;color:var(--steel);cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
#dg-prod [role=tab][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--hiviz)}
#dg-prod [role=tabpanel]{padding:26px 0 0;max-width:820px}
#dg-prod [role=tabpanel][hidden]{display:none}
#dg-prod [role=tabpanel] p{margin:0 0 14px}
#dg-prod table{width:100%;border-collapse:collapse}
#dg-prod th,#dg-prod td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
#dg-prod th{width:34%;background:var(--mist);font-weight:600}
#dg-prod .steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:14px}
#dg-prod .steps li{counter-increment:s;display:flex;gap:14px}
#dg-prod .steps li::before{content:counter(s);flex:0 0 32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Produits similaires */
#dg-prod .rel{background:var(--mist);padding:40px 0 46px;border-top:1px solid var(--line)}
#dg-prod .rel h2{font:700 clamp(28px,3.4vw,36px)/1.1 'Barlow Condensed',sans-serif;margin:0 0 20px}
#dg-prod .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;list-style:none;margin:0;padding:0}
#dg-prod .rcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;height:100%;transition:border-color .15s,box-shadow .15s}
#dg-prod .rcard:hover{border-color:var(--ink);box-shadow:0 6px 0 var(--hiviz)}
#dg-prod .rpic{aspect-ratio:1/1;background:var(--mist);display:flex;align-items:center;justify-content:center}
#dg-prod .rpic img{width:100%;height:100%;object-fit:contain;padding:10px;mix-blend-mode:multiply}
#dg-prod .rpic svg{width:64px;height:64px;fill:none;stroke:#9a9a98;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#dg-prod .rbody{padding:14px 16px 16px}
#dg-prod .rbody h3{font:700 21px/1.12 'Barlow Condensed',sans-serif;margin:0 0 6px}
#dg-prod .rbody span{font-size:14px;font-weight:600;color:var(--hiviz-d)}

/* Bandeau devis */
#dg-prod .quote{background:var(--hiviz);padding:34px 0}
#dg-prod .quote-in{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
#dg-prod .quote h2{font:700 clamp(26px,3.6vw,38px)/1.1 'Barlow Condensed',sans-serif;margin:0 0 6px}
#dg-prod .quote p{margin:0;max-width:56ch}
#dg-prod .quote .btn{background:var(--ink);border-color:var(--ink);color:#fff;height:50px}
#dg-prod .quote .btn:hover{background:#000}

/* Barre fixe mobile */
#dg-prod .sticky{display:none}
@media (max-width:860px){
  #dg-prod .pgrid{grid-template-columns:1fr;gap:26px;padding-top:24px}
  #dg-prod .gallery{position:static}
  #dg-prod .sticky{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
  #dg-prod .sticky .btn{height:48px;flex:1;padding:0 12px}
  #dg-prod .quote{margin-bottom:68px}
}
@media (prefers-reduced-motion:reduce){#dg-prod *{transition:none!important}}

/* ===== Ajouts pour WordPress / WooCommerce ===== */
#dg-epi .chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
#dg-epi a.chip{display:inline-block;line-height:1.3}
#dg-epi .pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
#dg-epi .pager .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:8px;font-weight:600;padding:0 12px}
#dg-epi .pager a.page-numbers:hover{border-color:var(--ink)}
#dg-epi .searchform{display:flex;gap:10px;flex-wrap:wrap}
#dg-epi .searchform select,#dg-epi .searchform input{margin:0}
#dg-epi .card .pic .ph{width:84px;height:84px;fill:none;stroke:#9a9a98;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#dg-prod .woocommerce-Reviews,#dg-prod #reviews{max-width:820px}
body.woocommerce #dg-epi,body.woocommerce #dg-prod{width:100%;max-width:none;float:none}