/* Marley-cbd.fr : composants partagés (bannière de tête, façade vidéo, mini-jauges).
   CSS simple, chargé après Tailwind CDN. Palette : jungle #2D4A1A, olive #6B8E23,
   orange #FF6B00, ink #1A1A1A, paper #F5F5F0, kraft #E8DCC4, jaune #F5C518. */

/* ============ BANNIÈRE DE TÊTE ============ */
.mbn { container-type:inline-size; position:relative; isolation:isolate; overflow:hidden; color:#fff; background:#2D4A1A;
  border:4px solid #1A1A1A; box-shadow:7px 7px 0 0 #FF6B00; font-family:'Plus Jakarta Sans',sans-serif; }
.mbn::before { content:''; position:absolute; inset:0; z-index:-2; opacity:.09; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* bande diagonale orange derrière Marley */
.mbn-band { position:absolute; z-index:-1; top:-20%; bottom:-20%; right:4%; width:34%; background:#FF6B00;
  border-left:4px solid #1A1A1A; border-right:4px solid #1A1A1A; transform:skewX(-12deg); }
.mbn-band::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, transparent 0 14px, rgba(26,26,26,.13) 14px 17px); }
.mbn-ghost { position:absolute; z-index:-1; left:-.04em; bottom:-.22em; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:9rem; line-height:1; text-transform:uppercase; letter-spacing:-.04em; color:rgba(255,255,255,.05); white-space:nowrap; pointer-events:none; }
.mbn-inner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 34%; min-height:250px; }
.mbn-main { position:relative; z-index:2; padding:18px 18px 20px; display:flex; flex-direction:column; gap:14px; }
.mbn-chip { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:#F5F5F0; color:#1A1A1A;
  border:3px solid #1A1A1A; box-shadow:2px 2px 0 0 #1A1A1A; padding:3px 10px 3px 4px; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.02em; line-height:1; white-space:nowrap; }
.mbn-chip img { width:24px; height:24px; object-fit:contain; }
.mbn-chip b { color:#FF6B00; }
.mbn-chip i { font-style:normal; font-weight:500; text-transform:none; color:#1A1A1A99; }
.mbn-chip .sep { width:3px; height:14px; background:#1A1A1A; }
.mbn-title { font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.02em;
  line-height:.92; font-size:clamp(1.9rem, 5.2vw, 3.3rem); margin:0; }
.mbn-title span { display:block; color:#F5C518; }
.mbn-title small { display:block; max-width:32ch; font-size:.42em; letter-spacing:0; color:#ffffffcc; margin-top:.45em; line-height:1.15; text-transform:none; font-weight:500; font-family:'Plus Jakarta Sans',sans-serif; }
.mbn-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; }
.mbn-tile { display:inline-flex; align-items:center; justify-content:center; background:#fff; border:4px solid #1A1A1A;
  box-shadow:4px 4px 0 0 #1A1A1A; padding:8px 12px; }
.mbn-tile img { display:block; height:44px; width:auto; max-width:180px; object-fit:contain; }
.mbn-tile.tall img { height:78px; }
.mbn-tile.r1 { transform:rotate(-2.5deg); } .mbn-tile.r2 { transform:rotate(1.8deg); } .mbn-tile.r3 { transform:rotate(-1deg); }
.mbn-score { width:92px; height:92px; flex-shrink:0; border-radius:9999px; background:#F5C518; color:#1A1A1A; border:4px solid #1A1A1A;
  box-shadow:3px 3px 0 0 #1A1A1A; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(8deg);
  font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:.9; font-variant-numeric:tabular-nums; }
.mbn-score strong { font-size:30px; letter-spacing:-.02em; }
.mbn-score em { font-style:normal; font-size:12px; text-transform:uppercase; margin-top:3px; }
.mbn-tag { display:inline-block; padding:3px 9px; border:2px solid #1A1A1A; box-shadow:2px 2px 0 0 #1A1A1A; background:#fff; color:#1A1A1A;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; white-space:nowrap; }
.mbn-tag.o { background:#FF6B00; color:#fff; } .mbn-tag.y { background:#F5C518; } .mbn-tag.k { background:#1A1A1A; color:#fff; border-color:#fff; }
.mbn-side { position:relative; z-index:1; overflow:hidden; }
.mbn-marley { position:absolute; left:50%; bottom:-12%; width:150%; height:114%; max-width:none; transform:translateX(-50%);
  object-fit:contain; object-position:50% 100%; filter:drop-shadow(5px 0 0 #1A1A1A); }
/* logos des 5 boutiques */
.mbn-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:460px; }
.mbn-logos .mbn-tile { padding:6px 8px; height:58px; }
.mbn-logos .mbn-tile img { height:30px; max-width:100%; }
.mbn-logos .mbn-tile.tall img { height:44px; }
/* polaroïd produit */
.mbn-pola { background:#fff; padding:6px 6px 22px; border:3px solid #1A1A1A; box-shadow:4px 4px 0 0 #1A1A1A; transform:rotate(-4deg); position:relative; width:150px; flex-shrink:0; }
.mbn-pola img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:2px solid #1A1A1A; }
.mbn-pola span { position:absolute; left:0; right:0; bottom:3px; text-align:center; color:#1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; }
/* variante claire (sur fond jungle, ex. dans un hero) */
.mbn.on-dark { box-shadow:7px 7px 0 0 #FF6B00, 7px 7px 0 4px #1A1A1A; }
/* variante fine (page simple) */
.mbn.slim .mbn-inner { min-height:150px; }
.mbn.slim .mbn-title { font-size:clamp(1.6rem,4vw,2.4rem); }

@media (min-width:640px) {
  .mbn-main { padding:22px 24px 24px; gap:16px; }
  .mbn-tile img { height:52px; max-width:220px; }
  .mbn-tile.tall img { height:92px; }
  .mbn-score { width:104px; height:104px; } .mbn-score strong { font-size:34px; }
  .mbn-pola { width:180px; }
  .mbn-logos .mbn-tile { height:64px; }
  .mbn-logos .mbn-tile img { height:34px; }
  .mbn-logos .mbn-tile.tall img { height:50px; }
}
@container (max-width:540px) {
  .mbn-inner { grid-template-columns:minmax(0,1fr); min-height:0; }
  .mbn-band { display:none; }
  .mbn-side { order:-1; height:190px; overflow:hidden; border-bottom:4px solid #1A1A1A;
    background:#FF6B00 repeating-linear-gradient(-45deg, transparent 0 14px, rgba(26,26,26,.13) 14px 17px); }
  .mbn-marley { width:auto; height:340px; bottom:auto; top:14px; filter:none; object-fit:fill; }
  .mbn.wide .mbn-marley { width:auto; height:340px; right:auto; left:50%; transform:translateX(-50%); bottom:auto; top:14px; }
  .mbn.slim .mbn-side { height:130px; }
  .mbn.slim .mbn-marley { height:280px; }
  .mbn-ghost { font-size:6rem; }
  .mbn-chip { font-size:11px; }
  .mbn-title small { max-width:none; }
  .mbn-tag { white-space:normal; }
  .mbn-logos .mbn-tile span { font-size:10px !important; }
}
@container (max-width:400px) {
  .mbn-chip i, .mbn-chip .sep { display:none; }
  .mbn-score { width:76px; height:76px; } .mbn-score strong { font-size:24px; } .mbn-score em { font-size:10px; }
  .mbn-logos { gap:7px; }
  .mbn-logos .mbn-tile { height:48px; padding:4px 5px; border-width:3px; box-shadow:3px 3px 0 0 #1A1A1A; }
  .mbn-logos .mbn-tile img { height:22px; }
  .mbn-logos .mbn-tile.tall img { height:36px; }
  .mbn-pola { width:118px; }
}

/* ============ MINI-JAUGES (bulletin en petit) ============ */
.mgauges { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px 16px; }
.mgauge p { margin:0; }
.mgauge .lbl { display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:700;
  text-transform:uppercase; font-size:12px; letter-spacing:.03em; }
.mgauge .lbl b { font-size:13px; color:#2D4A1A; font-variant-numeric:tabular-nums; letter-spacing:0; }
.mgauge .bar { margin-top:5px; display:grid; grid-template-columns:repeat(10,1fr); gap:2px; height:9px; }
.mgauge .bar i { background:#F5F5F0; border:1.5px solid #1A1A1A; }
.mgauge .bar i.on { background:#6B8E23; }
.mgauge .bar i.half { background:linear-gradient(90deg,#6B8E23 50%,#F5F5F0 50%); }
@media (max-width:767px) { .mgauges { grid-template-columns:1fr 1fr; } .mgauges .mgauge:last-child { grid-column:span 2; } }

/* ============ FAÇADE VIDÉO YOUTUBE ============ */
.yt { position:relative; display:block; width:100%; aspect-ratio:16/9; background:#1A1A1A; overflow:hidden; }
.yt > button { all:unset; position:absolute; inset:0; cursor:pointer; display:block; }
.yt > button:focus-visible { outline:4px solid #FF6B00; outline-offset:-4px; }
.yt img.yt-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease, filter .3s; }
.yt > button:hover img.yt-thumb { transform:scale(1.03); filter:brightness(.92); }
.yt .yt-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:9999px; background:#FF6B00;
  border:4px solid #1A1A1A; box-shadow:4px 4px 0 0 #1A1A1A; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.yt > button:hover .yt-play { transform:translate(-50%,-50%) scale(1.08); }
.yt .yt-play svg { width:34px; height:34px; margin-left:5px; fill:#fff; }
.yt .yt-bar { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:22px 12px 8px;
  background:linear-gradient(to top, rgba(26,26,26,.88), transparent); color:#fff; font-weight:700; font-size:12px; }
.yt .yt-bar span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yt .yt-bar .yt-dur { flex-shrink:0; background:#1A1A1A; padding:1px 7px; font-family:'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt.sm .yt-play { width:52px; height:52px; border-width:3px; box-shadow:3px 3px 0 0 #1A1A1A; }
.yt.sm .yt-play svg { width:22px; height:22px; margin-left:3px; }
.yt.sm .yt-bar { padding:16px 8px 6px; font-size:11px; }
@media (min-width:768px) { .yt:not(.sm) .yt-play { width:96px; height:96px; } .yt:not(.sm) .yt-play svg { width:44px; height:44px; } .yt:not(.sm) .yt-bar { font-size:13px; padding:28px 16px 10px; } }

/* ============ CHAPITRES VIDÉO (frise) ============ */
.chapters { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.chap { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:12px;
  border:2px solid #1A1A1A; background:#fff; font:inherit; color:inherit; transition:background-color .15s; }
button.chap { cursor:pointer; }
button.chap:hover { background:rgba(245,197,24,.3); }
.chap[aria-pressed="true"] { background:#F5C518; box-shadow:2px 2px 0 0 #1A1A1A; }
.chap:focus-visible { outline:4px solid #FF6B00; outline-offset:3px; }
.chap-t { font-family:'Space Grotesk',sans-serif; font-weight:700; color:#C24F00; font-variant-numeric:tabular-nums; }
.chap-h { display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; line-height:1.15; margin-top:2px; }
.chap-d { display:none; font-size:14px; color:rgba(26,26,26,.7); margin-top:4px; line-height:1.4; }
@media (min-width:640px) {
  .chapters { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-top:26px; }
  .chapters::before { content:''; position:absolute; left:12px; right:12px; top:9px; height:3px; background:#1A1A1A; }
  .chap-dot { position:absolute; top:-24px; left:10px; width:16px; height:16px; border-radius:9999px; background:#FF6B00; border:3px solid #1A1A1A; }
  .chap[aria-pressed="true"] .chap-dot { background:#1A1A1A; }
  .chap-d { display:block; }
}

/* Marley large (loupe, bocal) : ancré à droite pour ne pas mordre sur le titre */
@container (min-width:541px) {
  .mbn.wide .mbn-marley { width:160%; left:auto; right:-30%; transform:none; bottom:-6%; height:106%; object-position:100% 100%; }
}

/* variante allégée (vignette sous un hero qui montre déjà Marley) : pas de Marley, pas de pastilles */
.mbn.lite { box-shadow:none; }
.mbn.lite .mbn-inner { grid-template-columns:minmax(0,1fr) 44%; min-height:0; align-items:center; }
.mbn.lite .mbn-main { padding:30px 24px; }
.mbn.lite .mbn-inner { min-height:300px; }
.mbn.lite .mbn-title { font-size:clamp(2rem,4.2vw,3.1rem); }
.mbn.lite .mbn-band { top:0; bottom:0; right:0; width:44%; transform:none; border-right:0; }
.mbn.lite .mbn-side { overflow:visible; display:flex; align-items:center; justify-content:center; padding:18px 14px; }
.mbn.lite .mbn-side { position:relative; justify-content:flex-start; padding-left:7%; }
.mbn.lite .mbn-side { align-self:stretch; align-items:flex-start; padding-top:26px; }
.mbn.lite .mbn-tile { transform:rotate(-4deg); }
.mbn.lite .mbn-pola { position:absolute; right:14px; bottom:16px; width:150px; transform:rotate(6deg); z-index:2; }
@container (max-width:540px) {
  .mbn.lite .mbn-inner { grid-template-columns:minmax(0,1fr); }
  .mbn.lite .mbn-side { height:auto; border-bottom:4px solid #1A1A1A; }
  .mbn.lite .mbn-inner { min-height:0; }
  .mbn.lite .mbn-side { min-height:150px; padding:18px 14px; }
  .mbn.lite .mbn-tile.tall img { height:70px; }
  .mbn.lite .mbn-pola { width:112px; right:10px; bottom:10px; }
}

/* ============ BANNIÈRE VERDICT (avis boutique, sans Marley) ============ */
.mkb-wrap { container-type:inline-size; }
.mkb { position:relative; isolation:isolate; overflow:hidden; margin:0; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:20px; flex:1; min-height:290px; padding:30px 30px 30px 28px; background:#2D4A1A; color:#fff; }
.mkb::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.09; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mkb-leaves { position:absolute; z-index:-1; left:-70px; bottom:-120px; width:340px; height:340px; fill:#6B8E23; opacity:.35; stroke:#1A1A1A; stroke-width:.6; }
.mkb-leaves path + path { fill:none; stroke:#2D4A1A; stroke-width:.8; }
.mkb-kicker { display:inline-block; margin-bottom:12px; padding:3px 10px; background:#FF6B00; color:#fff; border:2px solid #1A1A1A; box-shadow:2px 2px 0 0 #1A1A1A;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.mkb-title { font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:.95; font-size:clamp(2rem,7cqi,3.2rem); }
.mkb-title span { display:block; color:#F5C518; }
.mkb-sub { margin-top:14px; max-width:26ch; font-size:16px; line-height:1.4; color:#ffffffd9; }
.mkb-logo { position:relative; padding:4px 10px 26px 0; }
.mkb-disc { display:flex; align-items:center; justify-content:center; width:196px; height:196px; border-radius:9999px; background:#F5F5F0;
  border:4px solid #1A1A1A; box-shadow:7px 7px 0 0 #FF6B00, 7px 7px 0 4px #1A1A1A; }
.mkb-disc img { width:76%; height:auto; }
.mkb-stamp { position:absolute; left:50%; bottom:0; transform:translateX(-50%) rotate(-4deg); white-space:nowrap; padding:5px 11px; background:#F5C518; color:#1A1A1A;
  border:3px solid #1A1A1A; box-shadow:3px 3px 0 0 #1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; }
@container (max-width:520px) {
  .mkb { grid-template-columns:minmax(0,1fr); gap:22px; min-height:0; padding:24px 20px 26px; }
  .mkb-logo { order:-1; justify-self:center; }
  .mkb-disc { width:150px; height:150px; }
  .mkb-txt { text-align:center; } .mkb-sub { margin-inline:auto; }
  .mkb-leaves { left:auto; right:-90px; bottom:-140px; }
}
/* ============ CODE PROMO (bas de la carte verdict) ============ */
.mkcode { position:relative; z-index:10; display:flex; align-items:center; gap:18px; margin-top:auto; padding:20px 22px; background:#F5C518; border-top:4px solid #1A1A1A; }
.mkcode-txt { flex:1; min-width:0; }
.mkcode-lbl { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#1A1A1Ab3; }
.mkcode-code { margin-top:2px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:46px; line-height:1; letter-spacing:.01em; color:#1A1A1A; }
.mkcode-desc { margin-top:8px; font-size:14px; line-height:1.4; font-weight:600; color:#1A1A1A; }
.mkcode-btn { flex-shrink:0; padding:12px 18px; background:#1A1A1A; color:#fff; border:4px solid #1A1A1A; box-shadow:4px 4px 0 0 #FF6B00;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.mkcode-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 #FF6B00; }
@media (max-width:480px) { .mkcode { flex-direction:column; align-items:stretch; } .mkcode-code { font-size:40px; } }

/* ============ LOGO : Marley qui dépasse de l'étiquette ============ */
.mlogo { position:relative; display:inline-flex; align-items:flex-end; gap:6px; padding-top:30px; margin-top:6px; line-height:1; }
.mlogo-peek { position:absolute; left:15px; top:-4px; height:36px; width:auto; z-index:1; }
.mlogo-blk, .mlogo-cbd { position:relative; z-index:2; display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:1; }
.mlogo-blk { padding:5px 9px 4px; background:#1A1A1A; color:#fff; font-size:21px; }
.mlogo-cbd { margin-left:-10px; padding:4px 8px 3px; background:#FF6B00; color:#fff; border:3px solid #1A1A1A; box-shadow:3px 3px 0 #1A1A1A; font-size:17px; transform:rotate(-4deg) translateY(-6px); }
.mlogo-tld { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; color:#1A1A1A99; padding-bottom:2px; }
.mlogo.on-dark .mlogo-blk { background:#fff; color:#1A1A1A; }
.mlogo.on-dark .mlogo-cbd { border-color:#fff; box-shadow:3px 3px 0 #fff; }
.mlogo.on-dark .mlogo-tld { color:#ffffff99; }


/* ============ PAGES CATÉGORIES : cartes de la boucle ============ */
.ccs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; margin:0; padding:0; }
@media (max-width:1023px) { .ccs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .ccs { grid-template-columns:1fr; } }
.cc { position:relative; display:flex; flex-direction:column; height:100%; background:#fff; border:4px solid #1A1A1A; box-shadow:5px 5px 0 0 #1A1A1A; transition:transform .15s, box-shadow .15s; }
a.cc:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 0 #FF6B00; }
.cc.is-soon { box-shadow:none; border-style:dashed; border-color:#1A1A1A99; background:#ffffffb3; }
.cc-vis { position:relative; height:190px; display:flex; align-items:center; justify-content:center; border-bottom:4px solid #1A1A1A; overflow:hidden; }
.is-soon .cc-vis { border-bottom-style:dashed; border-bottom-color:#1A1A1A99; }
.cc-logo { background:#F5F5F0; padding:24px; }
.cc-logo img { max-width:70%; max-height:56px; }
.cc-logo img.tall { max-height:110px; }
.is-soon .cc-logo img { filter:grayscale(.35); opacity:.8; }
.cc-logos { background:#2D4A1A; gap:10px; padding:16px; }
.cc-logos span { display:flex; align-items:center; justify-content:center; width:31%; height:64px; background:#fff; border:3px solid #1A1A1A; box-shadow:3px 3px 0 #1A1A1A; }
.cc-logos span:first-child { height:96px; transform:rotate(-3deg); }
.cc-logos span:nth-child(2) { transform:rotate(2deg); }
.cc-logos img { max-width:84%; max-height:70%; }
.cc-illus { background:#FF6B00 repeating-linear-gradient(-45deg, transparent 0 14px, rgba(26,26,26,.08) 14px 17px); padding:16px; }
.cc-illus img { max-height:100%; max-width:100%; filter:drop-shadow(3px 3px 0 #1A1A1A); }
.cc-icon svg { width:96px; height:96px; opacity:.9; }
.is-soon .cc-icon { opacity:.75; }
.cc-body { flex:1; display:flex; flex-direction:column; padding:18px 20px 18px; }
.cc-k { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#C24F00; }
.cc-t { margin-top:4px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:23px; line-height:1.1; text-transform:uppercase; }
.cc-x { margin-top:8px; font-size:15px; line-height:1.5; color:#1A1A1Ac0; }
.cc-foot { margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.cc-meta { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:#2D4A1A; }
.cc-go { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#FF6B00; color:#fff; border:3px solid #1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; }
.cc-go.muted { padding:0; background:none; border:0; color:#C24F00; text-transform:none; font-family:inherit; font-size:13px; }
.cc-soon { padding:2px 9px; background:#F5C518; border:2px solid #1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; transform:rotate(-2deg); }
.cx { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; background:#fff; border:3px solid #1A1A1A; box-shadow:3px 3px 0 #1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; font-size:14px; }
.cx:hover { box-shadow:5px 5px 0 #FF6B00; }
.cc-stk { background:#1A1A1A; padding:14px; }
.cc-stk img { max-height:100%; transform:rotate(-4deg); }



/* ============ FIN DE PAGE : deux bandes horizontales pleine largeur (quiz puis auteur) ============ */
.endb { margin-top:96px; border-top:4px solid #1A1A1A; }
.endb-row { position:relative; overflow:hidden; }
.endb-q { background:#FF6B00; color:#1A1A1A; border-bottom:4px solid #1A1A1A; }
.endb-a { background:#2D4A1A; color:#fff; }
.endb-wrap { position:relative; max-width:1280px; margin:0 auto; padding:0 16px; display:grid; align-items:center; gap:32px; }
.endb-q .endb-wrap { grid-template-columns:150px minmax(0,1fr) auto; padding-top:30px; padding-bottom:30px; }
.endb-a .endb-wrap { grid-template-columns:230px minmax(0,1fr) auto; align-items:end; }
.endb-a .endb-txt { padding:44px 0; align-self:center; }
.endb-a .endb-cta { align-self:center; flex-direction:column; align-items:stretch; }
.endb-ill { width:150px; height:auto; transform:rotate(-6deg); filter:drop-shadow(4px 4px 0 #1A1A1A); }
.endb-m { width:100%; height:auto; max-height:330px; object-fit:contain; object-position:bottom; margin-top:24px; filter:drop-shadow(4px 0 0 #1A1A1A); }
.endb-k { display:inline-flex; align-items:center; gap:8px; margin:0 0 8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.endb-k::before { content:''; width:12px; height:12px; border:2px solid #1A1A1A; transform:rotate(45deg); }
.endb-q .endb-k::before { background:#fff; }
.endb-a .endb-k { color:#F5C518; } .endb-a .endb-k::before { background:#F5C518; }
.endb-t { margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(1.7rem,3vw,2.5rem); line-height:.98; letter-spacing:-.01em; }
.endb-p { margin:12px 0 0; font-size:17px; line-height:1.6; max-width:70ch; }
.endb-a .endb-p { color:#ffffffd9; }
.endb-cta { display:flex; gap:14px; }
.endb-cta .btn-brutal { white-space:nowrap; }
@media (max-width:900px) {
  .endb { margin-top:72px; }
  .endb-q .endb-wrap { grid-template-columns:96px minmax(0,1fr); gap:18px; }
  .endb-q .endb-cta { grid-column:1 / -1; }
  .endb-ill { width:96px; }
  .endb-a .endb-wrap { grid-template-columns:1fr; gap:0; }
  .endb-a .endb-txt { padding:40px 0 20px; }
  .endb-a .endb-cta { flex-direction:row; flex-wrap:wrap; padding-bottom:8px; }
  .endb-m { order:3; width:auto; height:200px; margin:16px auto 0; }
}

/* ============ HARMONISATION (proposition 03/10) ============
   Une seule étiquette « Bientôt », deux niveaux d'ombre, angles ±2°, boutons à la même taille. */
.ticket em, .shop em, .vt-s, .guide-st, .cc-soon {
  padding:2px 9px !important; background:#F5C518 !important; color:#1A1A1A !important; border:2px solid #1A1A1A !important;
  box-shadow:2px 2px 0 #1A1A1A !important; font-family:'Space Grotesk',sans-serif !important; font-weight:700 !important; font-size:11px !important;
  font-style:normal !important; text-transform:uppercase !important; letter-spacing:.04em !important; transform:rotate(-2deg) !important; }
.vt-s.on { background:#FF6B00 !important; color:#fff !important; }
.mkb-stamp { transform:translateX(-50%) rotate(-2deg); }
.mkcode-btn { font-size:16px; padding:12px 24px; box-shadow:4px 4px 0 0 #FF6B00; }
.endb-ill { transform:rotate(-2deg); }
.cc-stk img { transform:rotate(-2deg); }
.cc-logos span:first-child { transform:rotate(-2deg); } .cc-logos span:nth-child(2) { transform:rotate(2deg); }
.cc { box-shadow:4px 4px 0 0 #1A1A1A; }
a.cc:hover { box-shadow:6px 6px 0 0 #FF6B00; }

/* ============ TITRES : mot mis en avant en vert jungle + surligneur jaune (choix Sacha 03/10) ============ */
h2 .text-orange { color:#2D4A1A; background:linear-gradient(transparent 60%, #F5C518 60%, #F5C518 90%, transparent 90%); padding:0 .06em; }
.bg-ink h2 .text-orange, .bg-jungle h2 .text-orange, .text-white h2 .text-orange, h2.text-white .text-orange { color:#F5C518; background:none; padding:0; }
.kick { color:#2D4A1A; } .kick::before { background:#F5C518; }

/* ============ TEXTURE : grain papier très léger sur le fond crème (test 03/10) ============ */
body { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============ Bande quiz : kraft (moins agressif que l'orange plein), orange réservé au bouton ============ */
.endb-q { background:#E8DCC4; }
.endb-q .endb-k::before { background:#F5C518; }
.endb-q .endb-cta .btn-brutal { background:#FF6B00; color:#fff; }

/* Bande quiz : même motif que la bande kraft des vidéos (règle : bande kraft = motif) */
.endb-q { background:#E8DCC4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%232D4A1A' fill-opacity='0.07'%3E%3Cpath transform='translate(30 34) rotate(-20)' d='M0 -18C-9 -8 -9 6 0 16C9 6 9 -8 0 -18Z'/%3E%3Cpath transform='translate(90 92) rotate(25)' d='M0 -18C-9 -8 -9 6 0 16C9 6 9 -8 0 -18Z'/%3E%3C/g%3E%3Cg fill='%23FF6B00' fill-opacity='0.09'%3E%3Cpath transform='translate(88 26) rotate(45)' d='M0 -5L5 0L0 5L-5 0Z'/%3E%3Cpath transform='translate(26 96) rotate(45)' d='M0 -5L5 0L0 5L-5 0Z'/%3E%3C/g%3E%3C/svg%3E") repeat; background-size:120px 120px; }

/* ============ RÈGLE DES TEXTURES (03/10) : kraft = motif feuilles/losanges ; vert = grain papier ============ */
.bg-kraft, .endb-q { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%232D4A1A' fill-opacity='0.07'%3E%3Cpath transform='translate(30 34) rotate(-20)' d='M0 -18C-9 -8 -9 6 0 16C9 6 9 -8 0 -18Z'/%3E%3Cpath transform='translate(90 92) rotate(25)' d='M0 -18C-9 -8 -9 6 0 16C9 6 9 -8 0 -18Z'/%3E%3C/g%3E%3Cg fill='%23FF6B00' fill-opacity='0.09'%3E%3Cpath transform='translate(88 26) rotate(45)' d='M0 -5L5 0L0 5L-5 0Z'/%3E%3Cpath transform='translate(26 96) rotate(45)' d='M0 -5L5 0L0 5L-5 0Z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat; background-size:120px 120px; }
.bg-jungle, .endb-a, .mkb { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; }

/* Grands blocs noirs = même grain que les verts (boutons, badges, liens et barres restent plats) */
section.bg-ink, div.bg-ink, footer.bg-ink, aside.bg-ink, article.bg-ink, .pfs, .vk { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; }
div.bg-ink.font-display { background-image:none; }

/* Lettres géantes en filigrane retirées (03/10, Sacha) */
.mbn-ghost { display:none; }

/* ============ VIDÉO : une seule section compacte (lecteur + 2 lignes), seulement si une vidéo traite le sujet ============ */
.vid1 { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:center; padding:22px; background-color:#1A1A1A; color:#fff; border:4px solid #1A1A1A; box-shadow:6px 6px 0 0 #FF6B00; }
.vid1 .yt { border:3px solid #fff; }
.vid1-k { display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#F5C518; }
.vid1-k::before { content:''; width:12px; height:12px; background:#F5C518; border:2px solid #fff; transform:rotate(45deg); }
.vid1-t { margin-top:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.05; text-transform:uppercase; }
.vid1-x { margin-top:10px; font-size:16px; line-height:1.55; color:#ffffffd0; }
.vid1-b { display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:10px 16px; background:#fff; color:#1A1A1A; border:3px solid #fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; }
.vid1-b:hover { background:#F5C518; }
@media (max-width:900px) { .vid1 { grid-template-columns:1fr; padding:14px; gap:18px; } }

/* ============ BANNIÈRE D'ARTICLE EN VIGNETTE (pages catégories, guides de la home) ============ */
.cc-vis.bnr { position:relative; overflow:hidden; justify-content:space-between; gap:12px; padding:18px 18px 18px 20px; color:#fff; height:200px; }
.bnr-leaf { position:absolute; z-index:0; left:-50px; bottom:-90px; width:230px; height:230px; fill:#6B8E23; opacity:.35; stroke:#1A1A1A; stroke-width:.6; }
.bnr-leaf path + path { fill:none; stroke:#2D4A1A; }
.bnr-txt { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.bnr-k { padding:2px 8px; background:#FF6B00; color:#fff; border:2px solid #1A1A1A; box-shadow:2px 2px 0 #1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.bnr-t { margin-top:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; line-height:.95; text-transform:uppercase; letter-spacing:-.01em; }
.bnr-t em { display:block; font-style:normal; color:#F5C518; }
.bnr-logo { position:relative; z-index:1; flex-shrink:0; padding-bottom:18px; }
.bnr-disc { display:flex; align-items:center; justify-content:center; width:112px; height:112px; border-radius:9999px; background:#F5F5F0; border:4px solid #1A1A1A; box-shadow:5px 5px 0 0 #FF6B00, 5px 5px 0 3px #1A1A1A; overflow:hidden; }
.bnr-disc img { width:78%; height:auto; max-height:70%; object-fit:contain; }
.bnr-disc.stk img { width:84%; max-height:84%; }
.bnr-disc.txt { color:#2D4A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px; text-transform:uppercase; text-align:center; line-height:1; padding:8px; }
.bnr-stamp { position:absolute; left:50%; bottom:0; transform:translateX(-50%) rotate(-2deg); white-space:nowrap; padding:3px 8px; background:#F5C518; color:#1A1A1A; border:2px solid #1A1A1A; box-shadow:2px 2px 0 #1A1A1A; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px; text-transform:uppercase; }
.is-soon .bnr { filter:saturate(.75); }
.is-soon .cc-vis.bnr { border-bottom-style:solid; border-bottom-color:#1A1A1A; }
@media (max-width:400px) { .bnr-t { font-size:22px; } .bnr-disc { width:96px; height:96px; } }
/* bannières : titres plus longs + sous-titre */
.bnr-t { font-size:21px; line-height:1; max-width:15ch; }
.bnr-sub { margin-top:8px; font-size:12px; font-weight:600; color:#ffffffcc; }
.bnr-disc.stk img { width:88%; max-height:88%; }

/* ===== BANNIÈRE .ab : construction Altfap, charte Marley (voir data/banniere.py) ===== */
.ab { position:relative; display:block; isolation:isolate; overflow:hidden; container-type:inline-size; aspect-ratio:2/1; background:#2D4A1A; border:4px solid #1A1A1A; color:#fff; font-family:'Space Grotesk',sans-serif; text-decoration:none; }
.ab.fill { flex:1 0 auto; }
.ab::after { content:''; position:absolute; inset:0; z-index:9; pointer-events:none; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ab-wm { position:absolute; z-index:0; top:-10%; left:-8%; width:130%; transform:rotate(-9deg); display:flex; flex-direction:column; gap:1cqw; color:#fff; opacity:.055; font-weight:700; text-transform:uppercase; font-size:17cqw; line-height:.92; letter-spacing:-.04em; white-space:nowrap; user-select:none; }
.ab-wm span { display:block; } .ab-wm span:nth-child(even) { margin-left:-12cqw; }
.ab-card { position:absolute; z-index:2; left:50%; top:54%; transform:translate(-36%,-46%) rotate(2deg); width:31cqw; height:42cqw; background:#E8DCC4; background-image:none; border:.45cqw solid #1A1A1A; box-shadow:1cqw 1cqw 0 0 #1A1A1A; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ab-card img { max-width:86%; max-height:82%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 1cqw .8cqw rgba(26,26,26,.3)); }
.ab-card.logo { background:#fff; z-index:5; } .ab-card.logo img { max-width:78%; max-height:44%; filter:none; }
.ab-card.logos { background:#fff; z-index:5; flex-direction:column; gap:1.5cqw; padding:2cqw 0; }
.ab-card.logos img { max-width:72%; max-height:5.2cqw; filter:none; }
.ab-card.dark { background:#1A1A1A; }
.ab-card.marley { background:#2D4A1A; align-items:flex-end; } .ab-card.marley img { max-height:96%; max-width:92%; }
.ab-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:50%; background:rgba(45,74,26,.34); -webkit-backdrop-filter:grayscale(100%); backdrop-filter:grayscale(100%); border-right:.2cqw solid rgba(26,26,26,.35); }
.ab-curve { position:absolute; z-index:4; inset:0; width:100%; height:100%; pointer-events:none; }
.ab-h { position:absolute; z-index:6; left:5.5cqw; top:7.5cqw; max-width:62cqw; display:block; }
.ab-t { display:block; font-weight:700; text-transform:uppercase; font-size:8.2cqw; line-height:.9; letter-spacing:-.03em; text-shadow:.35cqw .35cqw 0 #FF6B00, .7cqw .7cqw 0 #1A1A1A; }
.ab-t.sm { font-size:6.6cqw; } .ab-t.xs { font-size:5.2cqw; line-height:.95; }
.ab-b { display:inline-block; margin-top:2.2cqw; padding:.8cqw 2cqw; background:#F5C518; color:#1A1A1A; border:.3cqw solid #1A1A1A; box-shadow:.45cqw .45cqw 0 #1A1A1A; font-weight:700; font-size:2.3cqw; line-height:1.15; text-transform:uppercase; letter-spacing:.03em; transform:rotate(-3deg); max-width:44cqw; }
.ab-r { position:absolute; z-index:7; right:3.5cqw; bottom:3.5cqw; width:15.5cqw; height:15.5cqw; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#FF6B00; color:#fff; border:.45cqw solid #1A1A1A; box-shadow:.7cqw .7cqw 0 0 #1A1A1A; text-align:center; transform:rotate(4deg); }
.ab-r b { font-size:5.6cqw; line-height:.95; letter-spacing:-.03em; font-weight:700; }
.ab-r b.txt { font-size:3.5cqw; text-transform:uppercase; }
.ab-r span { font-size:1.7cqw; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:0 1cqw; line-height:1.1; }
.ab-r.y { background:#F5C518; color:#1A1A1A; }
.ab-l { position:absolute; z-index:7; left:3.5cqw; bottom:3.5cqw; display:flex; align-items:center; }
.ab-l i { font-style:normal; padding:.5cqw 1.2cqw; background:#1A1A1A; color:#fff; font-weight:700; font-size:2.1cqw; text-transform:uppercase; border:.25cqw solid #fff; }
.ab-l em { font-style:normal; padding:.35cqw .9cqw; background:#FF6B00; color:#fff; font-weight:700; font-size:1.6cqw; border:.25cqw solid #1A1A1A; transform:rotate(-6deg); margin-left:-.6cqw; }
.ab.k { background:#E8DCC4; color:#1A1A1A; }
.ab.k .ab-wm { color:#2D4A1A; opacity:.07; }
.ab.k .ab-t { color:#1A1A1A; text-shadow:.35cqw .35cqw 0 #F5C518, .7cqw .7cqw 0 #FF6B00; }
.ab.k .ab-b { background:#1A1A1A; color:#fff; }
.ab.k .ab-card::after { background:rgba(26,26,26,.28); }
.ab.k .ab-l i { border-color:#1A1A1A; }
.ab.k .ab-card { left:61%; }
.ab.k .ab-h { max-width:50cqw; }
.cc > .ab { border:0; border-bottom:4px solid #1A1A1A; }
.cc.is-soon > .ab { opacity:.8; }
.mkb-wrap > .ab { border:0; }

/* ===== NEWSLETTER (bande en tête du pied de page, insérée par marley.js) ===== */
.nl { background:#F5C518; color:#1A1A1A; border-bottom:4px solid #1A1A1A; }
.nl-in { max-width:1280px; margin:0 auto; padding:34px 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:36px; align-items:center; }
.nl-k { display:inline-flex; align-items:center; gap:8px; margin:0 0 8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.nl-k::before { content:''; width:12px; height:12px; background:#FF6B00; border:2px solid #1A1A1A; transform:rotate(45deg); }
.nl-t { margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.02; text-transform:uppercase; letter-spacing:-.01em; color:#1A1A1A; }
.nl-x { margin:10px 0 0; max-width:52ch; font-size:16px; line-height:1.5; }
.nl-row { display:flex; border:4px solid #1A1A1A; box-shadow:5px 5px 0 0 #1A1A1A; background:#fff; }
.nl-row input[type=email] { flex:1; min-width:0; padding:14px 16px; border:0; background:#fff; color:#1A1A1A; font:inherit; font-size:17px; outline:none; }
.nl-row input[type=email]:focus { box-shadow:inset 0 0 0 3px #FF6B00; }
.nl-row button { flex-shrink:0; padding:0 22px; border:0; border-left:4px solid #1A1A1A; background:#1A1A1A; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; cursor:pointer; }
.nl-row button:hover { background:#FF6B00; } .nl-row button:disabled { opacity:.6; cursor:wait; }
.nl-hp, .nl-sr { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }
.nl-c { display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:14px; line-height:1.4; cursor:pointer; }
.nl-c input { width:20px; height:20px; margin:1px 0 0; accent-color:#1A1A1A; flex-shrink:0; }
.nl-c a { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.nl-m { min-height:20px; margin:10px 0 0; font-size:14.5px; font-weight:700; }
.nl-m.ko { color:#8A1C00; }
@media (max-width:860px) { .nl-in { grid-template-columns:1fr; gap:22px; } }
@media (max-width:440px) { .nl-row { flex-direction:column; } .nl-row button { border-left:0; border-top:4px solid #1A1A1A; padding:13px; } }