:root {
  --bg:#070707;
  --panel:#0d0d0d;
  --panel2:#121212;
  --text:#f5f5f5;
  --muted:#a9a9a9;
  --yellow:#ffc400;
  --yellow2:#e6a900;
  --line:#2a2a2a;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px),var(--max));margin:auto}

/* HEADER */
.site-header{position:sticky;top:0;z-index:50;background:rgba(3,3,3,.94);backdrop-filter:blur(12px);border-bottom:1px solid #4b3900}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap}
.brand-logo-full{display:block;width:205px;height:auto;max-height:62px;object-fit:contain;object-position:left center}
.brand-mark{width:48px;height:56px;border:2px solid var(--yellow);border-radius:45% 45% 55% 55% / 38% 38% 62% 62%;display:grid;place-items:center;transform:rotate(-5deg);box-shadow:0 0 0 2px #171717 inset}
.brand-mark span{color:var(--yellow);font-weight:900;font-size:23px;font-style:italic;transform:rotate(5deg)}
.brand em{font-style:normal;color:var(--yellow)}
.main-nav{display:flex;align-items:center;gap:34px;text-transform:uppercase;font-weight:800;font-size:13px;letter-spacing:.7px}
.main-nav a{opacity:.86;padding:30px 0 27px;border-bottom:3px solid transparent}
.main-nav a:hover,.main-nav a.active{opacity:1;color:var(--yellow);border-color:var(--yellow)}
.lang{position:relative;display:flex;align-items:center}
.lang-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;color:#ddd;padding:8px 4px;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.2px}
.lang-toggle:hover,.lang-toggle:focus-visible{color:#fff}
.lang-toggle img{width:19px;height:21px;object-fit:contain;image-rendering:auto;opacity:.95}
.lang-toggle .chev{font-size:11px;color:#aaa;transition:transform .18s ease}
.lang.open .lang-toggle .chev{transform:rotate(180deg)}
.lang-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:#0d0d0d;border:1px solid #333;box-shadow:0 12px 28px rgba(0,0,0,.45);padding:6px;z-index:90}
.lang.open .lang-menu{display:block}
.lang-menu a{display:block;padding:9px 11px;border-radius:3px;color:#ddd;font-size:12px}
.lang-menu a:hover,.lang-menu a.active{background:#171717;color:var(--yellow)}
.lang-menu small{display:block;color:#777;font-size:10px;margin-top:2px}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}

/* BARRE DU HAUT : boutique, panier et langue (défile avec la page ; seule la barre principale reste collée) */
.header-top{position:relative;z-index:60;border-bottom:1px solid #4b3900;background:#070707}
.header-top-inner{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:44px}
.header-shop,.header-cart{display:inline-flex;align-items:center;gap:9px;color:#f0f0f0;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;transition:color .2s ease}
.header-shop{color:var(--yellow)}
.header-shop svg,.header-cart svg{width:21px;height:21px;flex:0 0 21px}
.header-shop:hover,.header-cart:hover{color:var(--yellow)}
.header-cart-count{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--yellow);color:#080808;font-size:11px;font-weight:900}
.header-sep{width:1px;height:22px;background:#3a3a3a}

/* Loupe et recherche */
.nav-tools{display:flex;align-items:center;gap:10px}
.nav-tools::before{content:"";width:1px;height:46px;margin-right:8px;background:#3a3a3a}
.search-toggle{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#f0f0f0;cursor:pointer;transition:color .2s ease,background .2s ease}
.search-toggle svg{width:24px;height:24px}
.search-toggle:hover,.search-toggle[aria-expanded="true"]{color:var(--yellow);background:rgba(255,196,0,.08)}
.header-search{border-top:1px solid #1f1f1f;background:#0a0a0a}
.header-search-form{display:flex;gap:10px;padding:14px 0}
.header-search-form input{flex:1;min-width:0;min-height:46px;padding:0 14px;border:1px solid #3b3b3b;background:#050505;color:#fff;font:inherit;font-size:15px}
.header-search-form input:focus{border-color:var(--yellow);outline:2px solid rgba(255,196,0,.25);outline-offset:0}
.header-search-form button{min-height:46px;padding:0 20px;border:0;background:var(--yellow);color:#080808;font:inherit;font-size:11px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;cursor:pointer}
.mobile-menu{display:none;padding:0 0 18px}
.mobile-menu a{display:block;padding:12px 0;border-top:1px solid #1d1d1d;text-transform:uppercase;font-weight:700;font-size:14px}

/* HERO */
/* Fond uniforme sur toute la largeur : aucune zone brune ou dorée à droite. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid #2c2300;background:#080808}
.hero-inner{min-height:455px;display:grid;grid-template-columns:1.02fr 1fr;align-items:stretch}
.hero-copy{position:relative;z-index:2;padding:50px 10px 46px 0;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#080808 0%,#080808 80%,rgba(8,8,8,0) 100%)}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:800;text-transform:uppercase;color:#d7d7d7;margin-bottom:20px}
.crumbs .current{color:var(--yellow)}
h1{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(58px,7vw,92px);line-height:.92;margin:0;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 2px 0 #222}
.stroke{height:8px;width:min(430px,88%);background:var(--yellow);margin:14px 0 22px;transform:skewX(-15deg);box-shadow:0 3px 0 #4b3900}
.hero-copy p{max-width:520px;font-size:17px;color:#e2e2e2;margin:0 0 20px}
.signature{font-family:'Segoe Script','Brush Script MT',cursive;color:var(--yellow);font-size:28px;transform:rotate(-2deg);width:max-content}
.role{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:800;margin-top:2px}
.hero-art{position:relative;min-height:455px;overflow:hidden;background:#080808}
.hero-art:before{content:"";position:absolute;z-index:1;left:18%;top:12%;width:58%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,196,0,.16) 0%,rgba(255,196,0,.06) 42%,transparent 72%);filter:blur(14px);pointer-events:none}
.hero-art img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;object-position:42% 48%;filter:saturate(.95) contrast(1.03);transform:scale(1.03)}
/* Le visuel se fond dans le même noir à gauche ET à droite. */
.hero-art:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.62) 10%,rgba(8,8,8,.03) 30%,rgba(8,8,8,.02) 76%,rgba(8,8,8,.74) 94%,#080808 100%);pointer-events:none}
.hero-logo{position:absolute;right:8%;top:10%;z-index:3;width:170px;height:190px;border:8px solid rgba(255,196,0,.18);border-radius:45% 45% 55% 55% / 40% 40% 60% 60%;display:grid;place-items:center;transform:rotate(-8deg);font:bold italic 76px/1 Arial;color:rgba(255,196,0,.22)}

/* FILTERS */
.filters-wrap{border-bottom:1px solid #1b1b1b;background:#090909;position:relative;z-index:3}
.filters{display:flex;gap:10px;padding:16px 0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
.filter{flex:0 0 auto;border:1px solid #3b3b3b;border-radius:999px;padding:10px 16px;text-transform:uppercase;font-weight:800;font-size:11px;letter-spacing:.2px;background:#0d0d0d;color:#f0f0f0;white-space:nowrap}
.filter-icon{width:18px;height:18px;object-fit:contain;display:inline-block;vertical-align:middle;margin-right:7px;flex:0 0 18px}
.filter.active .filter-icon{filter:brightness(0)}
.filter.active{background:var(--yellow);color:#111;border-color:var(--yellow)}
.filter b{margin-right:7px}

/* CONTENT */
.content{padding:34px 0 54px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.section-head h2{margin:0;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-size:34px;letter-spacing:1px}
.sort{display:flex;align-items:center;gap:10px;text-transform:uppercase;color:#bbb;font-size:11px;font-weight:800}
.sort select{background:#0c0c0c;color:#fff;border:1px solid #5b4700;padding:10px 32px 10px 12px;border-radius:4px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(#101010,#0a0a0a);border:1px solid #4b3b00;border-radius:3px;overflow:hidden;transition:.2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--yellow);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.thumb:before{content:"";position:absolute;inset:0;background:var(--thumb);transform:scale(1.02);filter:saturate(.9);}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 58%)}
.play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border:3px solid var(--yellow);border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.play:before{content:"";margin-left:4px;border-left:16px solid var(--yellow);border-top:10px solid transparent;border-bottom:10px solid transparent}
.duration{position:absolute;z-index:3;right:8px;bottom:8px;background:rgba(0,0,0,.78);padding:2px 6px;font-size:12px;border-radius:2px}
.card-body{padding:14px 14px 15px;min-height:105px;position:relative}
.card h3{font-size:17px;line-height:1.25;margin:0 26px 10px 0}
.meta{font-size:12px;color:#a6a6a6}
.more{position:absolute;right:12px;bottom:12px;color:var(--yellow);font-size:24px;line-height:1}
.load{display:block;margin:30px auto 0;background:transparent;border:1px solid var(--yellow2);color:#fff;border-radius:4px;padding:12px 32px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.load:hover{background:var(--yellow);color:#111}

/* CTA — UNIVERS GUITARE */
.cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid #5a4600;
  border-bottom:1px solid #5a4600;
  background:#080808;
  padding:42px 0;
}

/* Même texture/coup de pinceau que le footer — sans cercles décoratifs */
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--dg-fond,url("../images/fond.webp"));
  background-repeat:no-repeat;
  background-position:center 72%;
  background-size:cover;
  opacity:.36;
  pointer-events:none;
}

/* Voile sombre pour conserver une bonne lisibilité du texte */
.cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(5,5,5,.74) 0%,rgba(5,5,5,.58) 48%,rgba(5,5,5,.72) 100%);
  pointer-events:none;
}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);align-items:center;gap:48px}
.cta-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase}
.cta-kicker:before{content:"";width:44px;height:4px;background:var(--yellow);transform:skewX(-18deg)}
.cta-title{margin:0;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(42px,5vw,68px);line-height:.94;text-transform:uppercase;letter-spacing:.7px}
.cta-title span{color:var(--yellow);text-shadow:0 0 24px rgba(255,196,0,.14)}
.cta-copy{max-width:650px;margin:14px 0 0;color:#d2d2d2;font-size:15px}
.cta-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.cta-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--yellow);color:#080808;border:1px solid var(--yellow);font-size:12px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;transition:.2s ease}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,196,0,.18)}
.cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid #4c4c4c;background:rgba(255,255,255,.015);color:#fff;font-size:12px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;transition:.2s ease}
.cta-secondary:hover{border-color:var(--yellow);color:var(--yellow)}
.cta-socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cta-social{min-height:68px;padding:12px 14px;border:1px solid #303030;background:linear-gradient(135deg,#111,#090909);display:flex;align-items:center;gap:12px;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.4px;transition:.2s ease}
.cta-social:hover{border-color:var(--yellow);transform:translateY(-2px);background:linear-gradient(135deg,#151515,#0b0b0b)}
.cta-social .icon{flex:0 0 38px;width:38px;height:38px;border:1px solid #5c4800;border-radius:50%;display:grid;place-items:center;color:var(--yellow);font-size:17px;background:#0b0b0b;box-shadow:0 0 18px rgba(255,196,0,.06)}
.cta-social small{display:block;margin-top:2px;color:#8e8e8e;font-size:9px;font-weight:700;letter-spacing:.5px}

/* FOOTER */













/* RESPONSIVE */
@media (max-width: 980px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .main-nav{display:none}
  .nav-tools{margin-left:auto}
  .menu-btn{display:block}
  .mobile-menu.open{display:block}
  .nav{height:70px}
  .brand-logo-full{width:190px;max-height:56px}
  .hero-inner{grid-template-columns:1fr 1fr;min-height:410px}
  .hero-copy{padding:34px 0 32px}
  .hero-art{min-height:410px}
  h1{font-size:58px}
  .hero-copy p{font-size:15px}
  .hero-logo{width:120px;height:135px;font-size:54px}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{grid-template-columns:1fr;gap:26px}
  .cta-socials{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 680px){
  .container{width:min(calc(100% - 22px),var(--max))}
  .brand-logo-full{width:48px;height:48px;max-height:48px;object-fit:contain;object-position:center}
  .header-top-inner{gap:12px;min-height:40px}
  .header-shop,.header-cart{font-size:11px;gap:6px}
  .header-sep{height:18px}
  .nav-tools::before{height:34px;margin-right:2px}
  .header-search-form button{padding:0 14px}
  .brand-mark{width:40px;height:46px}
  .brand-mark span{font-size:20px}
  .brand{gap:0}
  .hero{background:#090909}
  .hero-inner{display:flex;flex-direction:column;min-height:0}
  .hero-copy{order:1;padding:24px 0 18px}
  .crumbs{font-size:10px;margin-bottom:13px}
  h1{font-size:50px}
  .stroke{height:6px;margin:10px 0 14px}
  .hero-copy p{font-size:14px;max-width:100%;margin-bottom:12px}
  .signature{font-size:22px}
  .role{font-size:9px;letter-spacing:2px}
  .hero-art{order:2;min-height:250px;height:250px;margin:0 -11px}
  .hero-art img{object-position:45% 45%}
  .hero-art:after{background:linear-gradient(180deg,#090909 0%,rgba(9,9,9,.10) 28%,rgba(9,9,9,.15) 75%,#090909 100%)}
  .hero-logo{display:none}
  .filters{padding:12px 0}
  .filter{padding:9px 13px;font-size:10px}
  .content{padding:28px 0 40px}
  .section-head{align-items:flex-start;flex-direction:column;margin-bottom:14px}
  .section-head h2{font-size:30px}
  .video-grid{grid-template-columns:1fr;gap:14px}
  .card-body{min-height:auto}
  .cta{padding:34px 0}
  .cta-inner{grid-template-columns:1fr;gap:24px}
  .cta-title{font-size:44px}
  .cta-copy{font-size:14px}
  .cta-actions{align-items:stretch}
  .cta-primary,.cta-secondary{width:100%}
  .cta-socials{grid-template-columns:1fr 1fr}
  .cta-social{min-height:64px;padding:10px 12px}
  
  
  
}

/* FOOTER */
.site-footer{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#050505;
  border-top:1px solid #5a4600;
}

/* Rappel du coup de pinceau jaune dans le bas de page */
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--dg-fond,url("../images/fond.webp"));
  background-repeat:no-repeat;
  background-position:center 78%;
  background-size:cover;
  opacity:.42;
  pointer-events:none;
}

/* Assombrit le fond pour garder le logo et les réseaux bien lisibles */
.site-footer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(5,5,5,.52) 0%,rgba(5,5,5,.72) 48%,rgba(5,5,5,.92) 100%);
  pointer-events:none;
}

.site-footer .container{
  position:relative;
  z-index:1;
}

.footer-top{
  min-height:112px;
  display:grid;
  grid-template-columns:minmax(240px,1.25fr) auto minmax(390px,1fr);
  align-items:center;
  gap:42px;
  padding:20px 0;
}

.footer-brand{
  display:flex;
  align-items:center;
  min-width:0;
}

.footer-logo{
  display:block;
  width:min(100%,300px);
  max-height:72px;
  object-fit:contain;
  object-position:left center;
  transition:transform .25s ease, filter .25s ease;
}

/* Logo du bas de page : s'agrandit au survol et s'ouvre en grand au clic (Lightbox) */
.footer-logo-zoom{
  display:block;
  cursor:zoom-in;
}

/* Taille réelle du logo pour que la zone cliquable corresponde au logo */
.footer-logo-zoom .footer-logo{
  width:auto;
  max-width:100%;
  height:auto;
}

.footer-logo-zoom:hover .footer-logo,
.footer-logo-zoom:focus-visible .footer-logo{
  transform:scale(1.06);
  filter:drop-shadow(0 0 10px rgba(255,196,0,.35));
}

.footer-logo-zoom:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:6px;
}

/* Cadre noir (au lieu du blanc de Lightbox) quand le logo est ouvert en grand */
.lb-outerContainer:has(.lb-image[src*="donald-loignon-logo-2026"]){
  background:#000;
}

.footer-follow{
  color:#cfcfcf;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  white-space:nowrap;
}

.footer-social{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:36px;
}

.footer-social-link{
  min-width:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#f1f1f1;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.35px;
  text-transform:uppercase;
  transition:transform .2s ease, color .2s ease;
}

.footer-social-link:hover{
  color:var(--yellow);
  transform:translateY(-2px);
}

.footer-social-link img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

/* Menus du bas de page : trois colonnes (Explorer, Boutique, Informations) */
.footer-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 40px;
  padding:26px 0 28px;
  border-top:1px solid rgba(255,196,0,.18);
}
.footer-nav-title{
  position:relative;
  margin:0 0 14px;
  padding-bottom:9px;
  color:#fff;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:19px;
  font-weight:400;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.footer-nav-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:34px;
  height:3px;
  background:var(--yellow);
  transform:skewX(-16deg);
}
.footer-nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
}
.footer-nav a{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  color:#bdbdbd;
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.footer-nav a::before{
  content:"";
  flex:0 0 5px;
  width:5px;
  height:5px;
  margin-top:.5em;
  border-radius:50%;
  background:#5a4600;
  transition:background .2s ease;
}
.footer-nav a:hover,
.footer-nav a:focus-visible{
  color:var(--yellow);
  transform:translateX(3px);
}
.footer-nav a:hover::before,
.footer-nav a:focus-visible::before{
  background:var(--yellow);
}

.footer-bottom{
  border-top:1px solid #1b1b1b;
  padding:14px 0 18px;
  color:#707070;
  font-size:11px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
}

@media (max-width:980px){
  .footer-top{
    grid-template-columns:minmax(210px,1fr) auto;
    gap:24px 30px;
  }
  .footer-follow{display:none}
  .footer-social{gap:24px}
}

@media (max-width:680px){
  .footer-top{
    min-height:0;
    grid-template-columns:1fr;
    justify-items:center;
    gap:22px;
    padding:24px 0;
  }
  .footer-brand{justify-content:center}
  .footer-logo{width:min(100%,270px);object-position:center}
  .footer-follow{display:block}
  .footer-social{justify-content:center;gap:22px;width:100%;flex-wrap:wrap}
  .footer-social-link img{width:32px;height:32px}
  .footer-bottom{font-size:10px;justify-content:center;text-align:center}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;padding:22px 0 24px}
  .footer-nav-col:first-child{grid-column:1 / -1}
  .footer-nav-col:first-child ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}

/* Texte réservé aux lecteurs d'écran (utilitaire WordPress standard) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Bouton lecture des cartes vidéo (liste des vidéos, page d'un short) */
.video-play{position:absolute;z-index:3;left:50%;top:50%;width:54px;height:54px;border:2px solid var(--yellow);border-radius:50%;background:rgba(0,0,0,.68);transform:translate(-50%,-50%);box-shadow:0 0 24px rgba(0,0,0,.35)}
.video-play::after{content:"";position:absolute;left:21px;top:15px;border-left:15px solid var(--yellow);border-top:10px solid transparent;border-bottom:10px solid transparent}

/* CARROUSEL ET CARTES DES SHORTS (format vertical 9:16) */
.shorts-carousel{position:relative}
.shorts-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 7 * 12px) / 8);gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none}
.shorts-track::-webkit-scrollbar{display:none}
.shorts-nav{position:absolute;top:50%;z-index:4;width:40px;height:40px;border:1px solid #5d4800;border-radius:50%;background:rgba(8,8,8,.92);color:#fff;font-size:26px;line-height:1;transform:translateY(-50%);cursor:pointer;transition:.2s ease}
.shorts-nav.prev{left:6px}
.shorts-nav.next{right:6px}
.shorts-nav:hover,.shorts-nav:focus-visible{border-color:var(--yellow);color:var(--yellow)}
.shorts-nav[hidden]{display:none}
.short-card{min-width:0;scroll-snap-align:start}
.short-card-link{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border:1px solid #353535;border-radius:6px;background:#111;transition:.22s ease}
.short-card-link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.88));pointer-events:none}
.short-card-link img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.short-card-link:hover{border-color:var(--yellow);transform:translateY(-3px)}
.short-card-link:hover img{transform:scale(1.04)}
.short-card .video-play{width:44px;height:44px}
.short-card .video-play::after{left:17px;top:11px;border-left-width:13px;border-top-width:9px;border-bottom-width:9px}
.short-card-title{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#fff;font-size:13px;font-weight:800;line-height:1.25}
.short-card-time{position:absolute;z-index:2;top:8px;right:8px;padding:3px 6px;border:1px solid rgba(255,196,0,.55);background:rgba(0,0,0,.82);color:var(--yellow);font-size:10px;font-weight:900}
@media(max-width:1080px){
  .shorts-track{grid-auto-columns:calc((100% - 4 * 12px) / 5)}
}
@media(max-width:680px){
  .shorts-track{grid-auto-columns:42%}
  .shorts-nav{display:none}
}

/* Tuiles des plateformes d'écoute : fond clair pour que tous les logos (dont les logos noirs) restent lisibles */
.platform-tile{border:1px solid #cfcfcf;border-radius:6px;background:linear-gradient(180deg,#f5f5f5,#dedede);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.platform-tile:hover,.platform-tile:focus-visible{border-color:var(--yellow);background:linear-gradient(180deg,#fff8dc,#f3d85a);box-shadow:0 6px 18px rgba(255,196,0,.18)}
.platform-tile:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.platform-tile img{filter:none;opacity:1}

/* Petit bouton d'achat d'une pièce (liste des pièces d'un album, boutique) */
.track-buy{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 9px;border:1px solid #4d3b00;color:#f0d154;font-size:12px;font-weight:800;white-space:nowrap;transition:.2s ease}
.track-buy svg{width:14px;height:14px;flex:0 0 auto}
.track-buy:hover,.track-buy:focus-visible{border-color:var(--yellow);background:var(--yellow);color:#080808}
.track-buy.in-cart{border-color:#2f2f2f;color:#bdbdbd;font-size:11px}

/* Photos agrandissables au clic (Lightbox2 : biographie, pochette des albums) */
.dg-photo-zoom{position:relative;display:block;overflow:hidden;cursor:zoom-in}
.dg-photo-zoom::after{content:"⤢";position:absolute;right:10px;bottom:10px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--yellow);border-radius:50%;background:rgba(0,0,0,.65);color:var(--yellow);font-size:17px;opacity:.85;transition:opacity .2s}
.dg-photo-zoom:hover::after,.dg-photo-zoom:focus-visible::after{opacity:1}
.dg-photo-zoom:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}

/* Médiator DL qui scintille (reflet + étoiles) : questionnaire, encadré du bas de page, bloc de l'accueil */
.dg-pick {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 64px;
    height: 63px;
    overflow: visible;
}

.dg-pick img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255, 196, 0, .35));
}

/* Reflet de lumière qui traverse le médiator, limité à sa forme */
.dg-pick::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    -webkit-mask: url("../images/donald-loignon-pick-dl-360.webp") center / contain no-repeat;
    mask: url("../images/donald-loignon-pick-dl-360.webp") center / contain no-repeat;
    animation: dg-pick-shine 3.6s ease-in-out infinite;
}

/* Petites étoiles qui s'allument pendant le passage du reflet */
.dg-pick-spark {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    opacity: 0;
    background: radial-gradient(circle, #fff 0 18%, transparent 20%),
        linear-gradient(#fff6c2, #fff6c2) center / 2px 100% no-repeat,
        linear-gradient(#fff6c2, #fff6c2) center / 100% 2px no-repeat;
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--yellow));
    animation: dg-pick-spark 3.6s ease-in-out infinite;
}

.dg-pick-spark-1 {
    top: -8px;
    right: -6px;
    animation-delay: .35s;
}

.dg-pick-spark-2 {
    bottom: 2px;
    left: -10px;
    width: 13px;
    height: 13px;
    animation-delay: .6s;
}

.dg-pick-spark-3 {
    top: 22px;
    right: -14px;
    width: 12px;
    height: 12px;
    animation-delay: .85s;
}

@keyframes dg-pick-shine {
    0%, 15% {
        background-position: 150% 0;
    }
    45%, 100% {
        background-position: -60% 0;
    }
}

@keyframes dg-pick-spark {
    0%, 22%, 52%, 100% {
        opacity: 0;
        transform: scale(.2) rotate(0deg);
    }
    34%, 40% {
        opacity: 1;
        transform: scale(1) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-pick::after,
    .dg-pick-spark {
        animation: none;
    }
}

/* Promotion du questionnaire : encadré du bas de page */
.quiz-promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 26px;
    padding: 18px 22px;
    border: 1px solid #6f5700;
    background: linear-gradient(90deg, rgba(255, 196, 0, .12), rgba(255, 196, 0, .02));
}

.quiz-promo-text {
    flex: 1;
    min-width: 0;
}

.quiz-promo-title {
    margin: 0 0 4px;
    color: #fff;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

.quiz-promo-title span {
    color: var(--yellow);
}

.quiz-promo-copy {
    margin: 0;
    color: #d4d4d4;
    font-size: 14px;
    line-height: 1.5;
}

.quiz-promo-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--yellow);
    color: #070707;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, transform .2s ease;
}

.quiz-promo-button:hover,
.quiz-promo-button:focus-visible {
    background: #fff;
    transform: translateY(-2px);
}

.quiz-promo-preview {
    position: absolute;
    top: -9px;
    right: 12px;
    padding: 1px 8px;
    background: #b32d2e;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

@media (max-width: 680px) {
    .quiz-promo {
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .quiz-promo-button {
        width: 100%;
        justify-content: center;
    }
}

.footer-quiz-promo {
    padding-top: 30px;
}

.footer-quiz-promo .quiz-promo {
    margin-bottom: 0;
}

/* Section du questionnaire sous « Suivez mon univers guitare » */
.quiz-promo-section {
    padding: 30px 0 4px;
    background: var(--panel, #0d0d0d);
    border-top: 1px solid #5a4600;
}

.quiz-promo-section .quiz-promo {
    margin-bottom: 0;
}


/* Pas de ligne entre le questionnaire et l'infolettre qui le suit */
.quiz-promo-section + .dg-nl-section {
    border-top: 0;
}

/* Infolettre (extension dg-newsletter) : enveloppe animée à côté du titre et lueur qui fait le tour du formulaire */
.dg-nl-title::after {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: .85em;
    margin-left: .3em;
    vertical-align: -.02em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46'%3E%3Crect x='2' y='4' width='52' height='38' rx='4' fill='none' stroke='%23ffc400' stroke-width='4'/%3E%3Cpath d='M4 7l24 19L52 7' fill='none' stroke='%23ffc400' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='54' cy='9' r='8' fill='%23ffc400' stroke='%23070707' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(255, 196, 0, .45));
    transform-origin: 50% 80%;
    animation: dg-envelope 4s ease-in-out infinite;
}

@keyframes dg-envelope {
    0%, 70%, 100% {
        transform: rotate(0) translateY(0);
    }
    75% {
        transform: rotate(-10deg) translateY(-3px);
    }
    80% {
        transform: rotate(9deg) translateY(-3px);
    }
    85% {
        transform: rotate(-6deg) translateY(-1px);
    }
    90% {
        transform: rotate(3deg);
    }
}

@property --dg-nl-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.dg-nl-form {
    position: relative;
}

.dg-nl-form::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 2px;
    background: conic-gradient(from var(--dg-nl-angle), transparent 0deg 270deg, rgba(255, 196, 0, .2) 300deg, var(--yellow) 345deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: dg-nl-border 5s linear infinite;
}

@keyframes dg-nl-border {
    to {
        --dg-nl-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dg-nl-title::after,
    .dg-nl-form::before {
        animation: none;
    }
}

/* Bouton « Je participe » : la flèche avance par petites poussées et le bouton pulse doucement */
.quiz-promo-button {
    animation: dg-cta-pulse 2.4s ease-in-out infinite;
}

.quiz-promo-button span[aria-hidden="true"] {
    display: inline-block;
    animation: dg-cta-arrow 1.2s ease-in-out infinite;
}

.quiz-promo-button:hover,
.quiz-promo-button:focus-visible {
    animation: none;
}

@keyframes dg-cta-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 196, 0, .55);
    }
    60% {
        box-shadow: 0 0 0 10px rgba(255, 196, 0, 0);
    }
}

@keyframes dg-cta-arrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-promo-button,
    .quiz-promo-button span[aria-hidden="true"] {
        animation: none;
    }
}

/* Bouton ▶ des vidéos et des shorts : grossit doucement puis revient (sans bouger), vignettes décalées (liste des vidéos, shorts associés) */
.video-play{animation:videos-play-grow 2.8s ease-in-out infinite}
.videos-grid > :nth-child(3n+2) .video-play,.shorts-track > :nth-child(4n+2) .video-play{animation-delay:.7s}
.videos-grid > :nth-child(3n) .video-play,.shorts-track > :nth-child(4n+3) .video-play{animation-delay:1.4s}
.videos-grid.is-shorts > :nth-child(5n+4) .video-play,.shorts-track > :nth-child(4n) .video-play{animation-delay:2.1s}
.video-card:hover .video-play,.short-card:hover .video-play,.video-card-link:focus-visible .video-play,.short-card-link:focus-visible .video-play{animation:none;transform:translate(-50%,-50%) scale(1.2);background:rgba(0,0,0,.85)}
@keyframes videos-play-grow{
  0%,55%,100%{transform:translate(-50%,-50%) scale(1)}
  75%{transform:translate(-50%,-50%) scale(1.22)}
}
@media(prefers-reduced-motion:reduce){.video-play{animation:none}}