/* ORTENEO — Product Highlights & Countdown v0.2.0 (fiche produit uniquement)
   Modèle de référence : liste compacte à pastilles rondes + bandeau compteur horizontal.
   Palette marque : --navy #001E45, --gold #BF964B, blanc. */

/* ---------- Points forts (compacts, sous le titre) ---------- */
.oph-highlights{ list-style:none; margin:2px 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; }
.oph-highlight{ display:flex; align-items:center; gap:9px; margin:0; }
.oph-highlight__text{ font-size:15px; line-height:1.25; color:var(--navy, #001E45); font-weight:500; }

/* Petite pastille ronde glass */
.oph-chip{
  position:relative; flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; isolation:isolate; color:var(--oph-ink);
  border:1px solid rgba(255,255,255,.85);
  background:linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.15));
  -webkit-backdrop-filter:blur(6px) saturate(150%); backdrop-filter:blur(6px) saturate(150%);
  box-shadow:0 3px 8px -4px var(--oph-glow), inset 0 1px 0 rgba(255,255,255,.9);
}
.oph-chip::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(circle at 32% 28%, var(--oph-c1), var(--oph-c2) 85%);
}
.oph-chip svg{ width:14px; height:14px; }
.oph-highlight--rose{ --oph-c1:#FDE7EE; --oph-c2:#F4B6C9; --oph-ink:#B0315C; --oph-glow:rgba(233,138,168,.6); }
.oph-highlight--bleu{ --oph-c1:#E6F0FD; --oph-c2:#A9C6EE; --oph-ink:#1D4F96; --oph-glow:rgba(127,166,222,.6); }
.oph-highlight--or  { --oph-c1:#FAF1DC; --oph-c2:#E2C68E; --oph-ink:#8A6420; --oph-glow:rgba(191,150,75,.6); }
.oph-highlight--hydra, .oph-highlight--fermete, .oph-highlight--sebum{ --oph-c1:#E6F0FD; --oph-c2:#A9C6EE; --oph-ink:#1D4F96; --oph-glow:rgba(127,166,222,.6); }
.oph-highlight--confort, .oph-highlight--rides, .oph-highlight--pores{ --oph-c1:#FDE7EE; --oph-c2:#F4B6C9; --oph-ink:#B0315C; --oph-glow:rgba(233,138,168,.6); }

/* ---------- Prix : nouveau prix d'abord, ancien barré à côté, pastille d'économie dessous ---------- */
.oph-on .orteneo-product__buybox h1{ margin-bottom:8px; }
.oph-on .orteneo-product__price{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:8px;
  border:0; padding:4px 0 0; margin-bottom:4px; font-size:32px; font-weight:700; color:var(--navy, #001E45); line-height:1.1;
}
.oph-on .orteneo-product__price ins{ order:1; text-decoration:none; }
.oph-on .orteneo-product__price del{ order:2; font-size:20px; font-weight:500; color:#9AA0AA; margin:0; }
.oph-on .orteneo-product__price::after{ content:""; order:3; flex-basis:100%; height:0; } /* saut de ligne avant la pastille */
.oph-on .orteneo-product__savings{
  order:4; display:inline-block; margin:0;
  padding:6px 14px; border-radius:999px; font-size:14px; font-weight:700; line-height:1.2;
  background:#FBF1DE; color:#8A6420; border:1px solid rgba(191,150,75,.35);
}

/* ---------- Compte à rebours (bandeau horizontal) ---------- */
.oph-countdown{
  display:flex; align-items:center; gap:14px;
  margin:14px 0 18px; padding:14px 16px; border-radius:18px;
  background:linear-gradient(135deg, #FFFFFF 0%, #FBF6EC 100%);
  border:1.5px solid rgba(191,150,75,.55);
  box-shadow:0 10px 26px -16px rgba(0,30,69,.35);
}
.oph-countdown__bolt{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #0A3A75, #001E45 75%); color:#D5B274;
  box-shadow:0 6px 14px -6px rgba(0,30,69,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.oph-countdown__bolt svg{ width:22px; height:22px; }
.oph-countdown__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.oph-countdown__title{ font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#001E45; line-height:1.2; }
.oph-countdown__sub, .oph-countdown__ended{ font-size:13px; color:#5B6270; line-height:1.3; }
.oph-countdown__cells{ flex:0 0 auto; display:flex; gap:7px; }
.oph-cell{
  width:52px; padding:8px 0 6px; border-radius:12px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(160deg, #0A3A75 0%, #001E45 100%);
  box-shadow:0 6px 12px -6px rgba(0,30,69,.7), inset 0 1px 0 rgba(255,255,255,.18);
}
.oph-cell b{ font-size:22px; line-height:1; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.oph-cell small{ margin-top:4px; font-size:10px; font-weight:600; letter-spacing:.08em; color:#D5B274; }
.oph-countdown.is-ended .oph-countdown__bolt{ filter:grayscale(1); opacity:.55; }

@media (max-width:480px){
  .oph-highlight__text{ font-size:15px; }
  .oph-on .orteneo-product__price{ font-size:28px; }
  .oph-on .orteneo-product__price del{ font-size:18px; }
  .oph-countdown{ gap:10px; padding:12px; }
  .oph-countdown__bolt{ flex-basis:40px; width:40px; height:40px; }
  .oph-countdown__title{ font-size:13px; }
  .oph-countdown__sub, .oph-countdown__ended{ font-size:12px; }
  .oph-cell{ width:44px; }
  .oph-cell b{ font-size:19px; }
}
@media (max-width:350px){
  .oph-countdown{ flex-wrap:wrap; }
  .oph-countdown__text{ flex:1 1 calc(100% - 52px); }
  .oph-countdown__cells{ width:100%; }
  .oph-cell{ flex:1 1 0; width:auto; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .oph-chip{ background:rgba(255,255,255,.4); }
}
.oph-countdown [hidden]{ display:none !important; }

/* =================== v0.3 — finitions premium =================== */

/* Actifs clés : pastilles */
.oph-actives{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.oph-active{
  display:inline-block; padding:5px 11px; border-radius:999px; font-size:13px; font-weight:600; line-height:1.2;
  color:#001E45; background:#F4F6FA; border:1px solid #E1E6EF;
}
.oph-on .orteneo-product__facts{ display:flex; flex-direction:column; gap:14px; padding:16px 0; border-top:1px solid #ECECEC; margin-top:6px; }
.oph-on .orteneo-product__fact{ display:flex; flex-direction:column; gap:4px; }
.oph-on .orteneo-product__fact-label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#BF964B; }
.oph-on .orteneo-product__fact-value{ font-size:14.5px; line-height:1.55; color:#12172A; }

/* Mode d'emploi */
.oph-howto{ margin:4px 0 18px; padding:16px; border-radius:16px; background:#FAFAF9; border:1px solid #ECECEC; }
.oph-howto__title{ margin:0 0 12px; font-size:15px; font-weight:700; color:#001E45; letter-spacing:.01em; }
.oph-howto__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.oph-howto__list li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; color:#12172A; margin:0; }
.oph-howto__list strong{ color:#001E45; }
.oph-howto__n{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#fff; background:#001E45; margin-top:1px;
}

/* Accordéons */
.oph-on .orteneo-product__accordion{ border:0; border-top:1px solid #ECECEC; margin:0; padding:0; }
.oph-on .orteneo-product__accordion:last-of-type{ border-bottom:1px solid #ECECEC; }
.oph-on .orteneo-product__accordion > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px; font-size:15px; font-weight:600; color:#001E45;
}
.oph-on .orteneo-product__accordion > summary::-webkit-details-marker{ display:none; }
.oph-on .orteneo-product__accordion > summary::marker{ content:""; }
.oph-on .orteneo-product__accordion > summary::after{
  content:""; width:9px; height:9px; flex:0 0 9px; margin-left:12px;
  border-right:1.6px solid #BF964B; border-bottom:1.6px solid #BF964B;
  transform:rotate(45deg) translateY(-3px); transition:transform .2s ease;
}
.oph-on .orteneo-product__accordion[open] > summary::after{ transform:rotate(-135deg) translateY(-1px); }
.oph-on .orteneo-product__accordion-body{ padding:0 2px 16px; font-size:14px; line-height:1.6; color:#5B6270; }

/* Réassurance (icônes linéaires au lieu des emojis) */
.oph-on .orteneo-product__trust{ flex-direction:row; flex-wrap:wrap; gap:10px 18px; font-size:13px; color:#5B6270; }
.oph-trust{ display:inline-flex; align-items:center; gap:8px; }
.oph-trust svg{ width:20px; height:20px; flex:0 0 20px; color:#BF964B; }

/* Barre d'achat fixe mobile */
.oph-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  display:flex; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid rgba(191,150,75,.35); box-shadow:0 -8px 24px -14px rgba(0,30,69,.35);
  transform:translateY(110%); transition:transform .25s ease;
}
.oph-sticky.is-visible{ transform:none; }
.oph-sticky__info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.oph-sticky__name{ font-size:13px; color:#5B6270; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oph-sticky__price{ font-size:17px; font-weight:700; color:#001E45; }
.oph-sticky__btn{
  flex:0 0 auto; padding:12px 22px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none;
  background:#BF964B; color:#001E45 !important;
}
body.oph-sticky-on{ padding-bottom:72px; }
@media (min-width:768px){ .oph-sticky{ display:none !important; } body.oph-sticky-on{ padding-bottom:0; } }
@media (prefers-reduced-motion:reduce){ .oph-sticky, .orteneo-product__accordion > summary::after{ transition:none; } }

/* =================== v0.4 — badge, protocole, galerie =================== */

/* Badge promo : pastille marine + or (le texte affiche le % réel) */
.oph-on .orteneo-product__promo-badge{
  top:14px; left:14px; padding:7px 13px; border-radius:999px;
  background:#001E45; color:#D5B274; font-size:12px; font-weight:700; letter-spacing:.06em;
  box-shadow:0 6px 14px -8px rgba(0,30,69,.7);
}

/* Galerie : points de navigation (mobile, si plusieurs photos) */
.oph-dots{ display:none; justify-content:center; gap:7px; margin-top:12px; }
.oph-dots span{ width:7px; height:7px; border-radius:50%; background:#D9DDE4; transition:width .2s ease, background .2s ease; }
.oph-dots span.is-active{ width:20px; border-radius:999px; background:#BF964B; }
@media (max-width:767px){
  .oph-on .orteneo-product__gallery-thumbs{ display:none; }
  .oph-dots{ display:flex; }
}

/* « Complétez votre protocole » : le kit complet passe en tête, cartes premium */
.oph-on .orteneo-upsell{ display:flex; flex-direction:column; }
.oph-on .orteneo-upsell > h2{ order:1; }
.oph-on .orteneo-upsell > .orteneo-upsell__sub{ order:2; }
.oph-on .orteneo-upsell > .orteneo-upsell__bundle{ order:3; margin-top:4px; margin-bottom:20px; }
.oph-on .orteneo-upsell > .orteneo-upsell__grid{ order:4; }
.oph-on .orteneo-upsell > *:not(h2):not(.orteneo-upsell__sub):not(.orteneo-upsell__bundle):not(.orteneo-upsell__grid){ order:5; }

.oph-on .orteneo-upsell__bundle{ border-radius:20px; overflow:hidden; box-shadow:0 18px 40px -24px rgba(0,30,69,.8); }
.oph-on .orteneo-upsell__bundle-badge{ border-radius:999px; padding:5px 12px; }
.oph-on .orteneo-upsell__bundle .btn{ border-radius:12px; }

.oph-on .orteneo-upsell__card{
  border:1px solid #ECECEC; border-radius:18px; padding:14px; background:#fff;
  box-shadow:0 8px 22px -18px rgba(0,30,69,.45); transition:transform .2s ease, box-shadow .2s ease;
}
.oph-on .orteneo-upsell__card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -18px rgba(0,30,69,.5); }
.oph-on .orteneo-upsell__card-visual{ border-radius:12px; overflow:hidden; }
.oph-on .orteneo-upsell__step{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.1em; color:#BF964B; margin-bottom:4px;
}
.oph-on .orteneo-upsell__card h4{ font-size:14px; color:#001E45; }
.oph-on .orteneo-upsell__price{ font-size:15px; font-weight:700; color:#001E45; }
.oph-on .orteneo-upsell__price del{ font-size:12.5px; font-weight:500; color:#9AA0AA; margin-right:6px; }
.oph-on .orteneo-upsell__price ins{ text-decoration:none; }
@media (prefers-reduced-motion:reduce){ .oph-on .orteneo-upsell__card{ transition:none; } }

/* v0.4.1 — espacements et boutons homogènes */
.oph-on .orteneo-product__buynow{ border-radius:12px; }
.oph-on .orteneo-product__trust{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #ECECEC; }
.oph-on .orteneo-product__short-desc{ margin-top:0; }

/* =================== v0.5 — boutique fermée & fiches ingrédients =================== */

/* Bouton « Bientôt disponible » (pré-lancement) */
.oph-on .orteneo-product__buynow.oph-soon,
.oph-on .oph-soon{
  background:#ECECEB !important; color:#59616B !important; border-color:#ECECEB !important;
  cursor:not-allowed; pointer-events:none; box-shadow:none !important;
}
.oph-soon-note{ display:block; margin:-12px 0 20px; font-size:12.5px; color:#5B6270; text-align:center; }
/* v0.12 : le sélecteur reste visible en boutique fermée (aperçu des prix), bouton désactivé « Bientôt disponible ». */
.oph-store-closed .orteneo-upsell-selector__submit.oph-soon{ background:#ECECEB !important; color:#59616B !important; border-color:#ECECEB !important; cursor:not-allowed; pointer-events:none; box-shadow:none !important; }

/* Pastille ingrédient cliquable (seulement si une fiche validée existe) */
.oph-active--link{ cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; transition:border-color .15s, background .15s; }
.oph-active--link:hover, .oph-active--link:focus-visible{ border-color:#BF964B; background:#FBF6EC; outline:none; }
.oph-active__i{ width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; font-style:italic; color:#fff; background:#BF964B; }

/* Fiche ingrédient : panneau bas (mobile) / fenêtre centrée (desktop) */
.oph-sheet{ border:0; padding:0; max-width:520px; width:calc(100% - 32px); border-radius:20px; color:#12172A; box-shadow:0 30px 60px -20px rgba(0,30,69,.45); }
.oph-sheet::backdrop{ background:rgba(0,16,42,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.oph-sheet__in{ padding:22px 22px 24px; position:relative; }
.oph-sheet__eyebrow{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#BF964B; }
.oph-sheet__title{ margin:6px 0 10px; font-size:20px; color:#001E45; }
.oph-sheet__text{ margin:0; font-size:15px; line-height:1.65; color:#3A4150; }
.oph-sheet__close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:0; background:#F4F6FA; color:#001E45; font-size:20px; line-height:1; cursor:pointer; }
@media (max-width:767px){
  .oph-sheet{ margin:auto 0 0; width:100%; max-width:none; border-radius:20px 20px 0 0; }
  .oph-sheet__in{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}

/* v0.11 — bloc de réassurance (faits de service, audit 29/10) */
.orteneo-product__trustbar.trustbar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; border:0; padding:0; margin-top:28px; }
.orteneo-product__trustbar .trust-col{
  background:#fff; border:1px solid rgba(0,30,69,.08) !important; border-radius:16px; padding:20px 14px 18px; text-align:center;
  box-shadow:0 14px 30px -26px rgba(0,30,69,.5);
}
.orteneo-product__trustbar .oph-ti{ width:46px; height:46px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:rgba(191,150,75,.12); color:#BF964B; }
.orteneo-product__trustbar .oph-ti svg{ width:22px; height:22px; }
.orteneo-product__trustbar .trust-col h3{ font-size:13.5px !important; letter-spacing:.02em !important; text-transform:none !important; line-height:1.3; margin:0 0 6px !important; color:#001E45; }
.orteneo-product__trustbar .trust-col p{ font-size:12px !important; letter-spacing:0 !important; text-transform:none !important; line-height:1.45; color:#6b7584; margin:0 !important; }
@media (min-width:900px){ .orteneo-product__trustbar.trustbar{ grid-template-columns:repeat(4,1fr); } }
.orteneo-product__trustbar a.oph-trust-link{ display:block; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s; }
.orteneo-product__trustbar a.oph-trust-link:hover{ border-color:#BF964B !important; transform:translateY(-1px); }