/**
 * Okane Presets — page de vente [okane_presets].
 * Design sombre éditorial assorti à la landing okane. Tout est scopé sous .okp
 * pour ne pas heurter le thème / WooCommerce.
 */
.okp{
  /* Jetons du thème (okane-portfolio) ; repli = mode sombre d'origine. */
  --okp-bg:var(--ok-bg,#0a0a0b);--okp-bg-soft:var(--ok-bg-soft,#111114);
  --okp-ink:var(--ok-ink,#f4f2ee);--okp-muted:var(--ok-muted,#8b8a86);
  --okp-line:var(--ok-line,rgba(255,255,255,.12));--okp-accent:var(--ok-accent,#e9dccb);
  /* Le bouton d'une carte ne suit pas l'accent du site : celui-ci passe au bronze
     en mode clair, ce qui donnait un bouton marron. Il reste crème dans les deux
     thèmes, avec son encre foncée — sinon le libellé serait blanc sur crème. */
  --okp-btn:#e9dccb;--okp-btn-ink:#0a0a0b;--okp-btn-line:rgba(0,0,0,.16);
  --okp-pad:clamp(20px,5vw,90px);
  /* Largeur du contenu. Partagée : la grille et le bandeau doivent s'aligner,
     et deux valeurs écrites séparément finissent toujours par diverger. */
  --okp-max:1240px;
  --okp-display:'Space Grotesk',system-ui,sans-serif;--okp-serif:'Fraunces',Georgia,serif;
  --okp-ease:cubic-bezier(.19,1,.22,1);
  position:relative;
  background:var(--okp-bg);color:var(--okp-ink);font-family:var(--okp-display);
  overflow-x:hidden;overflow-x:clip;
  /* full-bleed : occupe toute la largeur même dans une colonne « boxed ». */
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(80px,12vh,160px) var(--okp-pad) clamp(60px,10vh,120px);
}
.okp *{margin:0;padding:0;box-sizing:border-box}
.okp img{display:block;max-width:100%}
.okp a{color:inherit;text-decoration:none}
.okp ::selection{background:var(--okp-accent);color:var(--ok-on-accent,#0a0a0b)}
.okp h2,.okp h3{color:var(--okp-ink);font-weight:500}
.okp p{color:inherit}

/* grain */
.okp-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--ok-grain,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.okp>*{position:relative;z-index:1}

/* hero */
.okp-hero{max-width:1200px;margin:0 auto;text-align:center}
.okp-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--okp-muted)}
.okp-title{margin-top:18px;line-height:.98;letter-spacing:-.02em;
  font-size:clamp(2.6rem,8vw,6rem)}
.okp-title .okp-line{display:block}
.okp-title em{font-family:var(--okp-serif);font-style:italic;font-weight:400;color:var(--okp-accent)}
.okp-sub{margin:26px auto 0;max-width:56ch;color:var(--okp-muted);
  font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.6}

/* bandeau confiance */
.okp-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;
  margin:44px auto 0;max-width:1000px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--okp-muted)}
.okp-trust li{position:relative;padding-left:22px}
.okp-trust li::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;
  transform:translateY(-50%) rotate(45deg);background:var(--okp-accent);opacity:.7}

/* grille de presets */
.okp-grid{margin:clamp(50px,8vh,90px) auto 0;max-width:var(--okp-max);
  display:grid;gap:clamp(20px,2.4vw,34px);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* Reprise de la grille sous un bandeau : c'est la marge basse du bandeau qui
   fait l'espace, sans quoi les deux s'additionneraient. */
.okp-grid--suite{margin-top:0}
.okp-card{border:1px solid var(--okp-line);border-radius:14px;overflow:hidden;
  background:var(--okp-bg-soft);display:flex;flex-direction:column;
  transition:transform .5s var(--okp-ease),border-color .5s var(--okp-ease)}
.okp-card:hover{transform:translateY(-6px);border-color:var(--ok-line-strong,rgba(255,255,255,.22))}
.okp-card__media{display:block;aspect-ratio:4/3;overflow:hidden;background:#000}
.okp-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--okp-ease),filter .8s var(--okp-ease)}
.okp-card:hover .okp-card__media img{transform:scale(1.05)}
.okp-card__media.is-empty{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--okp-bg-soft),var(--okp-bg))}
.okp-card__mono{font-family:var(--okp-serif);font-size:3rem;color:var(--okp-accent);opacity:.55}
.okp-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.okp-card__name{font-size:1.35rem;letter-spacing:-.01em}
.okp-card__name a:hover{color:var(--okp-accent)}
.okp-card__desc{color:var(--okp-muted);font-size:.95rem;line-height:1.55;flex:1}
.okp-card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}
.okp-price{font-size:1.15rem;font-weight:600}
.okp-price .woocommerce-Price-amount{color:var(--okp-ink)}
.okp-price del{color:var(--okp-muted);font-weight:400;margin-right:8px;opacity:.7}
.okp-price ins{text-decoration:none}

/* ===== bannière de mise en avant ===== */
/* Le bandeau s'aligne sur la grille de produits : même largeur maximale, même
   centrage. Le retrait latéral de .okp ne suffisait pas — la grille est en plus
   plafonnée, et le bandeau la débordait sur grand écran. */
.okp-banniere{position:relative;display:flex;align-items:center;overflow:hidden;
  margin:clamp(40px,6vh,80px) auto;max-width:var(--okp-max);
  min-height:clamp(240px,36vh,420px);background:var(--okp-bg-soft)}
.okp-banniere:first-of-type{margin-top:0}
.okp-banniere__bg{position:absolute;inset:0}
.okp-banniere__bg img{width:100%;height:100%;object-fit:cover}
/* Voile sombre, et non tributaire du thème : le texte se pose sur une photo
   qu'on ne choisit pas, il doit rester lisible sur un mockup clair. */
.okp-banniere::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,10,11,.82),rgba(10,10,11,.42) 58%,rgba(10,10,11,.06))}
.okp-banniere__in{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:14px;color:#f4f2ee;
  padding:clamp(28px,5vw,64px);max-width:min(640px,82%)}
.okp-banniere__t{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.01em;color:#f4f2ee}
.okp-banniere__p{color:#d3d0ca;font-size:1rem;line-height:1.55;max-width:46ch}
.okp-banniere__btn{display:inline-flex;align-items:center;justify-content:center;margin-top:6px;
  padding:13px 26px;border-radius:999px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;background:var(--okp-btn);color:var(--okp-btn-ink);
  transition:transform .3s var(--okp-ease);white-space:nowrap}
.okp-banniere__btn:hover{transform:translateY(-2px)}
.okp .okp-banniere a{text-decoration:none}
@media(max-width:700px){
  /* En colonne étroite, un dégradé latéral laisse le texte sur la partie claire
     de l'image : le voile passe de haut en bas, et la bande respire davantage. */
  .okp-banniere{min-height:clamp(300px,52vh,420px);align-items:flex-end}
  .okp-banniere::after{background:linear-gradient(0deg,rgba(10,10,11,.88),rgba(10,10,11,.3))}
  .okp-banniere__in{max-width:100%}
}

/* Astra souligne tous les liens de la zone de contenu (réglage
   « underline-content-links », actif par défaut) : le trait passait sous le nom
   du produit et sous le bouton de chaque carte. Sa règle vaut (0,2,1) ; celle-ci
   monte d'un cran pour l'emporter sans recourir à !important. */
.okp .okp-grid .okp-card a,
.okp .okp-grid .okp-card a:hover{text-decoration:none}

/* bouton ajouter / CTA */
.okp-add{display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:999px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;background:var(--okp-btn);color:var(--okp-btn-ink);
  /* Sur un fond clair, un bouton crème sur une carte crème n'a plus de contour :
     ce filet lui rend sa forme. Invisible sur fond sombre. */
  border:1px solid var(--okp-btn-line);
  transition:transform .3s var(--okp-ease),opacity .3s var(--okp-ease);white-space:nowrap}
.okp-add:hover{transform:translateY(-2px)}
.okp-add.loading{opacity:.6;pointer-events:none}
.okp-add.added{background:#3f9a6b;color:#fff}

.okp-checkout{margin:clamp(46px,7vh,80px) auto 0;text-align:center}
.okp-checkout__btn{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--okp-serif);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);
  border-bottom:1px solid var(--okp-line);padding-bottom:6px;transition:border-color .4s var(--okp-ease)}
.okp-checkout__btn:hover{border-color:var(--okp-accent);color:var(--okp-accent)}

/* état vide */
.okp-empty{margin:clamp(50px,8vh,90px) auto 0;max-width:640px;text-align:center;
  color:var(--okp-muted);font-family:var(--okp-serif);font-style:italic;font-size:1.4rem}
.okp-empty .okp-hint{display:block;margin-top:16px;font-family:var(--okp-display);font-style:normal;font-size:.9rem}
.okp-empty a{color:var(--okp-accent);border-bottom:1px solid currentColor}

@media(max-width:640px){
  .okp-hero{text-align:left}
  .okp-trust{justify-content:flex-start}
  .okp-grid{grid-template-columns:1fr}
}

/* ---- Variante « Tirages » : chaque visuel présenté dans un cadre ---- */
/* Moulure + passe-partout + ombre portée : rendu « accroché au mur ». */
.okp-frames{--okp-mat:#ece9e1;--okp-frame:#17140f}
/* La carte s'efface : c'est le cadre qui porte le visuel sur le fond sombre. */
.okp-frames .okp-card{background:transparent;border:0;overflow:visible}
.okp-frames .okp-card:hover{transform:translateY(-6px)}
.okp-frames .okp-card__media{
  position:relative;display:block;aspect-ratio:4/5;overflow:visible;
  background:var(--okp-mat);                       /* passe-partout */
  padding:clamp(16px,7%,34px);                     /* largeur du passe-partout */
  border:11px solid var(--okp-frame);              /* moulure */
  border-radius:2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),               /* arête claire de la moulure */
    inset 0 0 0 1px rgba(0,0,0,.30),               /* creux du passe-partout */
    0 34px 55px -26px rgba(0,0,0,.85);             /* ombre portée sur le mur */
}
.okp-frames .okp-card__media img{
  width:100%;height:100%;object-fit:contain;       /* photo entière, non rognée */
  background:var(--okp-mat);
}
/* reflet de verre discret */
.okp-frames .okp-card__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.12),rgba(255,255,255,0) 34%);
}
/* pas de zoom interne : un cadre ne « zoome » pas */
.okp-frames .okp-card:hover .okp-card__media img{transform:none}
/* placeholder (sans image) : monogramme centré dans le passe-partout */
.okp-frames .okp-card__media.is-empty{background:var(--okp-mat)}
.okp-frames .okp-card__media.is-empty .okp-card__mono{color:var(--okp-frame);opacity:.5}


/* Boutique pas encore ouverte : le bloc doit tenir seul au milieu de la page,
   la ou la grille des presets se trouverait. */
.okp-bientot{display:grid;gap:14px;justify-items:center;text-align:center;
  padding:clamp(48px,10vh,110px) 0}
.okp-bientot__t{font-family:var(--okp-serif);font-style:italic;
  font-size:clamp(30px,5vw,58px);line-height:1.05;color:var(--okp-ink)}
.okp-bientot__s{max-width:44ch;font-size:15px;line-height:1.6;color:var(--okp-muted)}