/*
Theme Name: Pururin Records
Theme URI: https://pururin.records
Author: Phantoms Records / Logan
Description: Thème WordPress sur mesure pour Pururin Records, un label de bootlegs vinyles. Conçu pour fonctionner avec WooCommerce (fiche produit, catalogue filtrable, page d'accueil). Esthétique "service d'archives phonographiques" : carton manille, tampons d'archiviste, mimeographe.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Uniquement pour usage privé de Pururin Records
Text Domain: pururin-records
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* ==========================================================================
   Le CSS ci-dessous est repris tel quel des maquettes HTML fournies
   (index.html, catalogue.html, product.html) : base commune + styles
   spécifiques à chaque page, fusionnés dans une seule feuille de style
   chargée sur tout le site (plus simple à maintenir).
   Quelques règles WooCommerce ont été ajoutées tout en bas.
   ========================================================================== */

<style>
/* ==========================================================================
   PURURIN RECORDS — feuille de style commune
   System: "phonographic archive service" — manila card stock,
   archivist's stamps, mimeograph, card-catalogue index.
   ========================================================================== */

/* Note : la police Google Fonts n'est plus importée ici en @import (mauvais
   pour la performance) mais enqueue proprement dans functions.php. */

:root{
  /* --- papier & encre --- */
  --papier:            #e4dbbf;
  --papier-ombre:      #d3c7a2;
  --carton-manille:    #c9a86a;
  --carton-manille-sombre: #a9853f;
  --encre:             #18171a;
  --encre-douce:       #423d33;
  --liseré:            rgba(24, 23, 26, 0.16);
  --liseré-fort:       rgba(24, 23, 26, 0.34);

  /* --- tampons d'archiviste --- */
  --tampon-lie-de-vin: #7e2f22;
  --tampon-lie-de-vin-clair: #9c4230;
  --violet-roneo:      #5f4869;
  --ambre-adhesif:     #c9932f;

  /* --- typographie --- */
  --police-affiche: 'Anton', 'Arial Narrow', sans-serif;
  --police-mono:    'JetBrains Mono', ui-monospace, monospace;
  --police-manus:   'Caveat', cursive;

  --marge: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papier);
  color:var(--encre-douce);
  font-family:var(--police-mono);
  font-size:16px;
  line-height:1.55;
  position:relative;
  overflow-x:hidden;
}

/* paper grain — subtle, applied once to the background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3{
  font-family:var(--police-affiche);
  font-weight:400;
  letter-spacing:.01em;
  margin:0;
  color:var(--encre);
  text-transform:uppercase;
}

.eyebrow{
  font-family:var(--police-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--encre-douce);
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--liseré-fort);
}

/* ------------------------------------------------------------------ */
/* general structure                                                   */
/* ------------------------------------------------------------------ */
.enveloppe{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--marge);
}

header.entete{
  position:sticky; top:0; z-index:50;
  background:var(--papier);
  border-bottom:2px solid var(--encre);
}
header.entete .enveloppe{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.entete__logo img{ height:30px; width:auto; }
.entete__nav{ display:flex; gap:clamp(14px,3vw,32px); align-items:center; }
.entete__nav a{
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre);
  position:relative;
  padding-bottom:3px;
}
.entete__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--tampon-lie-de-vin); transition:right .25s ease;
}
.entete__nav a:hover::after{ right:0; }
.entete__nav .fiche{
  border:1.5px solid var(--encre);
  padding:6px 12px;
}

/* ------------------------------------------------------------------ */
/* boutons / tampons                                                   */
/* ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--police-mono);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 22px;
  border:1.5px solid var(--encre);
  background:transparent;
  color:var(--encre);
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--encre); }
.btn--plein{ background:var(--encre); color:var(--papier); }
.btn--plein:hover{ box-shadow:4px 4px 0 var(--tampon-lie-de-vin); }

.tampon{
  font-family:var(--police-mono);
  font-weight:700;
  font-size:.65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:5px 10px;
  border:2px solid currentColor;
  border-radius:3px;
  display:inline-block;
  transform:rotate(-3deg);
  mix-blend-mode:multiply;
}
.tampon--dispo{ color:#2f5a3d; }
.tampon--epuise{ color:var(--tampon-lie-de-vin); }
.tampon--limitee{ color:var(--violet-roneo); }

/* ------------------------------------------------------------------ */
/* vinyl record — reusable component                                  */
/* ------------------------------------------------------------------ */
.vinyle{
  position:relative;
  border-radius:50%;
  aspect-ratio:1;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #0c0c0e 0px, #0c0c0e 1.4px,
      #1c1c1f 1.4px, #1c1c1f 3.2px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 18px 30px -14px rgba(0,0,0,.55);
}
.vinyle::after{ /* reflet */
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 210deg at 30% 25%, rgba(255,255,255,.16), transparent 32%);
  pointer-events:none;
}
.vinyle__etiquette{
  position:absolute; left:50%; top:50%;
  width:36%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--tampon-lie-de-vin-clair);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:6%;
  color:#f2e9d3;
  font-family:var(--police-mono);
  font-size:.56rem;
  line-height:1.25;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.vinyle__etiquette::after{
  content:"";
  position:absolute; width:8%; aspect-ratio:1; border-radius:50%;
  background:var(--papier);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
}

/* ------------------------------------------------------------------ */
/* dossier d'archive — carte produit (mappable WooCommerce)            */
/* ------------------------------------------------------------------ */
.dossier{
  --decale-x: 0px; --decale-y: 0px;
  position:relative;
  background:transparent;
}
.dossier__lien{
  display:block;
  color:inherit;
  text-decoration:none;
}
.dossier__languette{
  font-family:var(--police-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--encre-douce);
  display:flex; justify-content:space-between;
  padding:0 2px 8px;
  border-bottom:1px dashed var(--liseré-fort);
  margin-bottom:14px;
}
.dossier__scene{
  position:relative;
  aspect-ratio:1/1.02;
  background:var(--carton-manille);
  border:1.5px solid var(--encre);
  clip-path:polygon(0 0, 62% 0, 70% 6%, 100% 6%, 100% 100%, 0 100%);
  overflow:hidden;
}
.dossier__vinyle-hote{
  position:absolute;
  width:78%; aspect-ratio:1;
  right:6%; top:14%;
  /* record sits half-out of the sleeve at rest -- no hover needed to see it */
  transform:translate(-4%,2%) rotate(2deg);
  transition:transform .5s cubic-bezier(.22,.9,.3,1);
  will-change:transform;
}
.dossier__pochette{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px;
  background:
    linear-gradient(160deg, var(--pochette-a, #4b4636), var(--pochette-b, #2c2a22));
  border-right:1.5px solid rgba(0,0,0,.35);
  /* sleeve is nudged open by default so the vinyl already peeks out */
  transform:translate(8%,-3%) rotate(-1.5deg);
  transition:transform .5s cubic-bezier(.22,.9,.3,1), box-shadow .5s ease;
  will-change:transform;
  box-shadow:8px 0 18px -10px rgba(0,0,0,.5);
}
.dossier__scene:hover .dossier__pochette,
.dossier__scene:focus-within .dossier__pochette{
  transform:translate(20%,-8%) rotate(-3deg);
}
.dossier__scene:hover .dossier__vinyle-hote,
.dossier__scene:focus-within .dossier__vinyle-hote{
  transform:translate(-7%,5%) rotate(4deg);
}
.dossier__statut{
  position:absolute; top:10px; left:10px; z-index:3;
}
.dossier__titre-pochette{
  color:#f2e9d3;
  font-family:var(--police-affiche);
  font-size:1.15rem;
  text-transform:uppercase;
  line-height:1.05;
}
.dossier__meta{ padding-top:14px; }
.dossier__meta h3{
  font-size:1.05rem;
  margin-bottom:4px;
}
.dossier__artiste{
  font-size:.82rem;
  color:var(--encre-douce);
  margin:0 0 10px;
}
.dossier__ligne{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.dossier__prix{
  font-family:var(--police-affiche);
  font-size:1.15rem;
  color:var(--encre);
}
.dossier__panier{
  font-family:var(--police-mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--encre);
  background:transparent;
  padding:9px 14px;
}
.dossier__panier:hover{ background:var(--encre); color:var(--papier); }
.dossier__edition{
  font-family:var(--police-manus);
  font-size:1.05rem;
  color:var(--violet-roneo);
  margin:8px 0 0;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

footer.registre{
  margin-top:min(14vw,140px);
  border-top:2px solid var(--encre);
  background:var(--encre);
  color:var(--papier);
}
footer.registre .enveloppe{ padding-top:56px; padding-bottom:32px; }
footer.registre h3{ color:var(--papier); font-size:1rem; margin-bottom:14px; }
footer.registre a{ text-decoration:none; opacity:.85; }
footer.registre a:hover{ opacity:1; text-decoration:underline; }
.registre__grille{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(228,219,191,.25);
}
.registre__bas{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:18px;
  font-size:.72rem;
  letter-spacing:.05em;
  opacity:.7;
}
@media (max-width:760px){
  .registre__grille{ grid-template-columns:1fr; gap:26px; }
}

  /* ---------- landing page specific styles ---------- */

  .heros{
    position:relative;
    padding:min(14vw,120px) 0 min(10vw,90px);
    overflow:hidden;
    border-bottom:2px solid var(--encre);
  }
  .heros__vinyle-fond{
    position:absolute;
    right:-8%;
    top:8%;
    width:min(52vw,560px);
    opacity:.9;
    animation:tourner 46s linear infinite;
    will-change:transform;
  }
  @keyframes tourner{ to{ transform:rotate(360deg); } }
  .heros__contenu{ position:relative; z-index:2; max-width:640px; }
  .heros__logo{
    width:min(560px,86vw);
    margin:18px 0 22px;
    transform:rotate(-1.4deg);
    filter:drop-shadow(3px 3px 0 rgba(24,23,26,.18));
  }
  .heros__accroche{
    font-family:var(--police-affiche);
    font-size:clamp(1.3rem,2.6vw,1.7rem);
    line-height:1.25;
    color:var(--encre);
    text-transform:none;
    max-width:22ch;
    margin-bottom:22px;
  }
  .heros__texte{
    font-size:.95rem;
    color:var(--encre-douce);
    max-width:46ch;
    margin-bottom:30px;
  }
  .heros__cta{ display:flex; gap:14px; flex-wrap:wrap; }
  .heros__fiche{
    position:absolute; right:6%; bottom:6%;
    width:172px;
    background:var(--papier);
    border:1.5px solid var(--encre);
    padding:12px 14px;
    font-size:.68rem;
    box-shadow:6px 6px 0 rgba(24,23,26,.14);
    transform:rotate(2.2deg);
    display:none;
  }
  @media (min-width:900px){ .heros__fiche{ display:block; } }
  .heros__fiche b{ font-family:var(--police-affiche); font-size:.85rem; display:block; margin-bottom:4px; text-transform:uppercase;}

  /* ---- principle / memo section ---- */
  section.memo{ padding:min(10vw,100px) 0; }
  .memo__grille{
    display:grid; grid-template-columns:.85fr 1.15fr; gap:min(6vw,70px);
    align-items:start;
  }
  .memo__carte{
    background:var(--papier-ombre);
    border:1.5px solid var(--encre);
    padding:26px 24px 30px;
    position:relative;
  }
  .memo__carte::before{
    content:"";
    position:absolute; top:-10px; left:24px;
    width:34px; height:16px;
    border:1.5px solid var(--liseré-fort);
    border-bottom:none;
    background:linear-gradient(var(--papier-ombre),var(--papier-ombre));
  }
  .memo__carte h2{ font-size:1.5rem; margin-bottom:14px; }
  .memo__carte p{ font-size:.86rem; margin:0 0 12px; }
  .memo__tampon-note{
    font-family:var(--police-manus);
    font-size:1.15rem;
    color:var(--tampon-lie-de-vin);
    transform:rotate(-2deg);
    margin-top:16px;
  }
  .memo__liste{ display:grid; gap:20px; }
  .memo__item{
    display:grid; grid-template-columns:64px 1fr; gap:16px;
    padding-bottom:20px;
    border-bottom:1px dashed var(--liseré-fort);
  }
  .memo__item:last-child{ border-bottom:none; }
  .memo__num{
    font-family:var(--police-affiche);
    font-size:1.5rem;
    color:var(--liseré-fort);
  }
  .memo__item h3{ font-size:1rem; margin-bottom:6px; }
  .memo__item p{ font-size:.85rem; margin:0; color:var(--encre-douce); }

  /* ---- section vitrine / fiche courante ---- */
  section.vitrine{
    padding:min(10vw,100px) 0;
    background:var(--carton-manille);
    border-top:2px solid var(--encre);
    border-bottom:2px solid var(--encre);
  }
  .vitrine__entete{
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
    margin-bottom:min(6vw,50px); flex-wrap:wrap;
  }
  .vitrine__entete h2{ font-size:clamp(1.6rem,4vw,2.4rem); }
  .vitrine__grille{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:36px;
  }
  .vitrine .dossier__languette{ border-bottom-color:var(--liseré-fort); }

  /* ---- registre / newsletter ---- */
  section.inscription{ padding:min(10vw,100px) 0; }
  .inscription__bloc{
    border:1.5px solid var(--encre);
    padding:min(6vw,50px);
    display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
    background:var(--papier-ombre);
  }
  .inscription__bloc h2{ font-size:clamp(1.3rem,3vw,1.9rem); margin-bottom:8px; }
  .inscription__bloc p{ font-size:.86rem; max-width:44ch; }
  form.ligne-signature{ display:flex; gap:10px; flex-wrap:wrap; }
  form.ligne-signature input{
    font-family:var(--police-mono);
    font-size:.82rem;
    padding:13px 14px;
    border:1.5px solid var(--encre);
    background:var(--papier);
    min-width:220px;
  }
  @media (max-width:760px){
    .memo__grille{ grid-template-columns:1fr; }
    .inscription__bloc{ grid-template-columns:1fr; }
  }
</style>
  /* ---------- catalogue page specific styles ---------- */

  .fronton{
    padding:min(9vw,80px) 0 min(6vw,50px);
    border-bottom:2px solid var(--encre);
  }
  .fronton__haut{
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
    margin-bottom:10px;
  }
  .fronton h1{ font-size:clamp(1.8rem,5vw,3rem); }
  .fronton__compteur{
    font-family:var(--police-mono);
    font-size:.78rem;
    letter-spacing:.05em;
    text-align:right;
    color:var(--encre-douce);
  }
  .fronton__compteur b{ color:var(--encre); font-size:1rem; }
  .fronton__intro{ max-width:56ch; font-size:.9rem; margin-top:14px; }

  /* filter bar — card-drawer tabs */
  .tiroir{
    position:sticky; top:63px; z-index:40;
    background:var(--papier);
    border-bottom:1.5px solid var(--encre);
  }
  .tiroir__enveloppe{
    display:flex; gap:0; overflow-x:auto;
    scrollbar-width:none;
  }
  .tiroir__enveloppe::-webkit-scrollbar{ display:none; }
  .onglet{
    font-family:var(--police-mono);
    font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
    white-space:nowrap;
    padding:14px 18px;
    border:none; border-right:1px solid var(--liseré);
    background:transparent;
    color:var(--encre-douce);
    position:relative;
  }
  .onglet[aria-pressed="true"]{
    color:var(--encre);
    background:var(--papier-ombre);
  }
  .onglet[aria-pressed="true"]::after{
    content:""; position:absolute; left:0; right:0; bottom:-1.5px; height:2px;
    background:var(--tampon-lie-de-vin);
  }

  /* grille catalogue */
  section.rayonnage{ padding:min(7vw,60px) 0 min(12vw,100px); }
  .rayonnage__grille{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:40px 32px;
  }
  .dossier.est-cachee{ display:none; }

  .rayonnage__vide{
    display:none;
    padding:60px 0; text-align:center;
    font-family:var(--police-manus);
    font-size:1.4rem;
    color:var(--encre-douce);
  }
  .rayonnage__vide.visible{ display:block; }

  @media (max-width:600px){
    .tiroir{ top:57px; }
  }
</style>
  /* ---------- single product page ---------- */

  .chemin{
    padding:18px 0;
    font-size:.78rem;
    color:var(--encre-douce);
  }
  .chemin a{ text-decoration:none; }
  .chemin a:hover{ text-decoration:underline; }
  .chemin .separateur{ margin:0 6px; opacity:.5; }
  .chemin .courant{ color:var(--encre); }

  section.produit{ padding:min(4vw,30px) 0 min(10vw,90px); }
  .produit__grille{
    display:grid; grid-template-columns:1fr 1fr;
    gap:min(6vw,64px); align-items:start;
  }
  @media (max-width:820px){ .produit__grille{ grid-template-columns:1fr; } }

  .produit__visuel{ position:sticky; top:96px; }
  @media (max-width:820px){ .produit__visuel{ position:static; } }

  .produit__cadre{
    position:relative;
    aspect-ratio:1/1.04;
    background:var(--carton-manille);
    border:1.5px solid var(--encre);
    overflow:hidden;
    box-shadow:10px 10px 0 rgba(24,23,26,.12);
  }
  .produit__vue{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.96);
    transition:opacity .45s ease, transform .45s ease;
    pointer-events:none;
  }
  .produit__vue.est-active{
    opacity:1; transform:scale(1);
    pointer-events:auto;
  }

  /* view 1 — close-up of the sleeve */
  .produit__vue--pochette{
    display:flex; flex-direction:column; justify-content:flex-end;
    align-items:flex-start;
    padding:28px;
    background:linear-gradient(160deg, var(--pochette-a,#4b4636), var(--pochette-b,#2c2a22));
  }
  .produit__titre-pochette{
    color:#f2e9d3;
    font-family:var(--police-affiche);
    font-size:clamp(1.4rem,3vw,1.9rem);
    text-transform:uppercase;
    line-height:1.05;
  }
  .produit__statut{ position:absolute; top:16px; left:16px; z-index:3; }

  /* view 2 — close-up of the record itself */
  .produit__vue--vinyle{
    background:
      radial-gradient(circle at 50% 50%, var(--papier-ombre) 0%, var(--carton-manille-sombre) 120%);
  }
  .produit__vue--vinyle .vinyle{ width:76%; }
  .produit__vue--vinyle .vinyle__etiquette{ font-size:.62rem; }

  .produit__fleche{
    position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid var(--encre); background:var(--papier);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--police-mono); font-size:1rem;
    cursor:pointer; z-index:6;
    transition:background .18s ease, color .18s ease;
  }
  .produit__fleche:hover{ background:var(--encre); color:var(--papier); }
  .produit__fleche--prec{ left:12px; }
  .produit__fleche--suiv{ right:12px; }

  .produit__miniatures{ display:flex; gap:12px; margin-top:14px; }
  .produit__mini{
    width:68px; height:68px;
    padding:0; border:1.5px solid var(--liseré-fort);
    background:var(--papier-ombre);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; cursor:pointer;
    opacity:.55;
    transition:opacity .2s ease, border-color .2s ease;
  }
  .produit__mini.est-active{ opacity:1; border-color:var(--encre); }
  .produit__mini--pochette{
    background:linear-gradient(160deg, var(--pochette-a,#4b4636), var(--pochette-b,#2c2a22));
  }
  .produit__mini .vinyle{ width:82%; }
  .produit__mini .vinyle__etiquette{ font-size:.32rem; }

  .produit__legende{
    margin-top:12px;
    font-size:.76rem;
    color:var(--encre-douce);
    text-align:center;
  }

  .produit__info .eyebrow{ margin-bottom:10px; }
  .produit__info h1{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:10px; }
  .produit__artiste{ color:var(--encre-douce); font-size:.92rem; margin-bottom:22px; }
  .produit__prix-ligne{
    display:flex; align-items:center; gap:14px;
    margin-bottom:22px; flex-wrap:wrap;
  }
  .produit__prix{ font-family:var(--police-affiche); font-size:1.8rem; color:var(--encre); }
  .produit__teaser{ font-size:.95rem; color:var(--encre-douce); margin-bottom:26px; max-width:52ch; }

  .produit__achat{
    display:flex; align-items:center; gap:12px;
    margin-bottom:12px; flex-wrap:wrap;
  }
  .produit__achat label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
  .produit__achat input[type="number"]{
    width:64px; font-family:var(--police-mono); font-size:.9rem;
    padding:12px 10px; border:1.5px solid var(--encre); background:var(--papier);
  }
  .produit__cta{ flex:1; min-width:220px; justify-content:center; }
  .produit__note{ font-size:.76rem; color:var(--encre-douce); opacity:.85; }

  section.produit__details{
    padding:min(8vw,70px) 0;
    background:var(--carton-manille);
    border-top:2px solid var(--encre);
    border-bottom:2px solid var(--encre);
  }
  .produit__details-grille{ display:grid; grid-template-columns:1.3fr 1fr; gap:min(6vw,60px); }
  .produit__details-grille h2{ font-size:1.3rem; margin-bottom:14px; }
  .produit__details-grille p{ font-size:.9rem; margin:0 0 12px; }
  .produit__details-grille ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:.88rem; }
  .produit__details-grille li{ padding-bottom:10px; border-bottom:1px dashed var(--liseré-fort); }
  @media (max-width:760px){ .produit__details-grille{ grid-template-columns:1fr; } }

  section.produit__pistes{ padding:min(8vw,70px) 0; }
  section.produit__pistes h2{ font-size:1.3rem; margin-bottom:20px; }
  .pistes__liste{ list-style:none; margin:0; padding:0; max-width:640px; }
  .pistes__liste li{
    display:flex; align-items:baseline; gap:14px;
    padding:12px 0; border-bottom:1px dashed var(--liseré-fort);
    font-size:.9rem;
  }
  .pistes__liste li span:first-child{ font-family:var(--police-mono); color:var(--encre-douce); width:24px; }
  .pistes__duree{ margin-left:auto; font-family:var(--police-mono); color:var(--encre-douce); }

  section.produit__suite{
    padding:min(8vw,70px) 0 min(12vw,110px);
    background:var(--carton-manille);
    border-top:2px solid var(--encre);
  }
  section.produit__suite h2{ font-size:1.4rem; margin-bottom:min(6vw,40px); }
  .produit__suite-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; }
</style>

/* ==========================================================================
   Ajouts spécifiques WooCommerce
   ========================================================================== */

/* on masque les styles par défaut de WooCommerce qu'on ne veut pas hériter */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{ margin:0; }
.woocommerce span.onsale{ display:none; } /* on utilise nos propres "tampons" */
.woocommerce .star-rating{ display:none; }

/* image produit réelle dans la pochette (remplace le dégradé de démo) */
.produit__vue--pochette img.produit__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.produit__vue--pochette .produit__statut,
.produit__vue--pochette .produit__titre-pochette{ position:relative; z-index:1; }
.produit__vue--pochette::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.dossier__pochette img.dossier__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.dossier__pochette::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%);
}
.dossier__pochette > *{ position:relative; z-index:1; }

/* quantité + bouton woocommerce, calés sur .produit__achat */
.produit__achat .quantity{ display:inline-block; }
.produit__achat input.qty{
  font-family:var(--police-mono);
  font-size:.9rem;
  width:64px;
  padding:12px 10px;
  border:1.5px solid var(--encre);
  background:var(--papier);
  color:var(--encre);
  margin-right:10px;
}
.produit__achat button[type="submit"]{ border:1.5px solid var(--encre); }
.produit__achat .stock{
  display:block;
  margin-top:10px;
  font-size:.78rem;
  color:var(--encre-douce);
}
.produit__achat .stock.out-of-stock{ color:var(--tampon-lie-de-vin); }

/* notices woocommerce (ajout panier, erreurs) habillées en "fiche archiviste" */
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  list-style:none;
  margin:0 0 24px;
  padding:14px 18px;
  border:1.5px solid var(--encre);
  background:var(--papier-ombre);
  font-family:var(--police-mono);
  font-size:.82rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button{
  display:inline-flex; align-items:center;
  font-family:var(--police-mono);
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px;
  border:1.5px solid var(--encre);
  color:var(--encre);
  text-decoration:none;
}

/* pagination catalogue */
.pururin-pagination{
  display:flex; justify-content:center; gap:10px;
  padding:20px 0 60px;
}
.pururin-pagination a, .pururin-pagination span{
  font-family:var(--police-mono);
  font-size:.78rem;
  padding:8px 14px;
  border:1.5px solid var(--encre);
  text-decoration:none;
  color:var(--encre);
}
.pururin-pagination span.current{ background:var(--encre); color:var(--papier); }

/* prix affiché par WooCommerce dans les cartes catalogue */
.dossier__prix .woocommerce-Price-amount{ font-weight:700; }
.dossier__prix del{ opacity:.5; font-weight:400; margin-right:6px; }

/* accueil : grille "currently preserved" alimentée par WooCommerce */
.vitrine__grille .dossier{ text-decoration:none; }

/* ==========================================================================
   Habillage des pages générées par les shortcodes WooCommerce
   (Panier, Paiement, Mon compte) — gabarit générique page.php + markup
   standard WooCommerce, redécoré pour rester dans le ton "archive".
   ========================================================================== */

.page-contenu input[type="text"],
.page-contenu input[type="email"],
.page-contenu input[type="tel"],
.page-contenu input[type="password"],
.page-contenu input[type="number"],
.page-contenu textarea,
.page-contenu select{
  font-family:var(--police-mono);
  font-size:.85rem;
  padding:11px 12px;
  border:1.5px solid var(--encre);
  background:var(--papier);
  color:var(--encre);
}
.page-contenu label{
  font-family:var(--police-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--encre-douce);
}

/* boutons génériques WooCommerce (paiement, mise à jour panier, etc.) */
.page-contenu .button,
.page-contenu button.button,
.page-contenu input.button{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--police-mono);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 22px;
  border:1.5px solid var(--encre);
  background:var(--encre);
  color:var(--papier);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.page-contenu .button:hover,
.page-contenu button.button:hover,
.page-contenu input.button:hover{
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--tampon-lie-de-vin);
}

/* tableau panier / récapitulatif de commande */
.page-contenu table.shop_table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0 30px;
  font-family:var(--police-mono);
  font-size:.85rem;
}
.page-contenu table.shop_table th{
  text-align:left;
  text-transform:uppercase;
  font-size:.7rem;
  letter-spacing:.08em;
  padding:10px;
  border-bottom:2px solid var(--encre);
}
.page-contenu table.shop_table td{
  padding:14px 10px;
  border-bottom:1px solid var(--liseré-fort);
  vertical-align:middle;
}
.page-contenu table.shop_table tfoot th,
.page-contenu table.shop_table tfoot td{
  border-bottom:none;
  font-weight:700;
}
.page-contenu .product-remove a{
  color:var(--tampon-lie-de-vin);
  text-decoration:none;
  font-size:1.1rem;
}
.page-contenu .quantity input.qty{
  width:60px;
  font-family:var(--police-mono);
  padding:8px;
  border:1.5px solid var(--encre);
  background:var(--papier);
}

/* bloc "Cupon" + totaux */
.page-contenu .cart-collaterals,
.page-contenu .cart_totals{
  background:var(--papier-ombre);
  border:1.5px solid var(--encre);
  padding:20px 24px;
  margin-top:20px;
}
.page-contenu .cart_totals h2{ font-size:1.2rem; margin-bottom:14px; }

/* formulaire de paiement : blocs de section façon "fiches" */
.page-contenu #customer_details,
.page-contenu #order_review{
  background:var(--papier-ombre);
  border:1.5px solid var(--encre);
  padding:24px;
  margin-bottom:24px;
}
.page-contenu .woocommerce-billing-fields h3,
.page-contenu #order_review_heading{
  font-family:var(--police-affiche);
  text-transform:uppercase;
  margin-bottom:16px;
}
.page-contenu .form-row{ margin-bottom:14px; }
.page-contenu .form-row label{ display:block; margin-bottom:4px; }
.page-contenu .form-row input,
.page-contenu .form-row select,
.page-contenu .form-row textarea{ width:100%; }

/* onglets "Mon compte" façon languettes de dossier */
.page-contenu .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0 0 30px; padding:0;
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:2px solid var(--encre);
}
.page-contenu .woocommerce-MyAccount-navigation li{ margin:0; }
.page-contenu .woocommerce-MyAccount-navigation a{
  display:block;
  font-family:var(--police-mono);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 18px;
  text-decoration:none;
  color:var(--encre-douce);
  border:1.5px solid var(--encre);
  border-bottom:none;
  margin-right:-1.5px;
}
.page-contenu .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--encre);
  color:var(--papier);
}
.page-contenu .woocommerce-MyAccount-content{
  background:var(--papier-ombre);
  border:1.5px solid var(--encre);
  padding:26px;
}

/* liens de connexion / inscription */
.page-contenu .woocommerce-form-login,
.page-contenu .woocommerce-form-register{
  background:var(--papier-ombre);
  border:1.5px solid var(--encre);
  padding:24px;
  max-width:460px;
}

@media (max-width:760px){
  .page-contenu .woocommerce-MyAccount-navigation ul{ flex-direction:column; border-bottom:none; }
  .page-contenu .woocommerce-MyAccount-navigation a{ border-bottom:1.5px solid var(--encre); margin-right:0; }
}
