/* JOAS · Fiche produit : règles propres à la page Produit des maquettes (onglets, choix du
 * savon, galerie, barre d'achat mobile). Chargé après components.css et shop-page.css. */
.jo-f-txt{max-width:860px;padding:28px 0 0}
.jo-f-txt h2{margin:0 0 14px;font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.15;text-transform:uppercase;color:var(--jo-teal)}
.jo-f-txt h3{margin:28px 0 10px;font-size:17px;line-height:1.3;font-weight:700;color:var(--jo-coral)}
.jo-f-txt p,.jo-f-txt li{font-size:16px;line-height:1.7;font-weight:500;color:var(--jo-green)}
.jo-f-txt p{margin:0 0 14px}
.jo-f-txt ul{margin:0 0 6px;padding-left:22px}
.jo-f-txt li{margin-bottom:6px}
.jo-f-txt a{color:var(--jo-teal);text-decoration:underline;text-underline-offset:3px}
.jo-f-table{width:100%;border-collapse:collapse}
.jo-f-table th,.jo-f-table td{padding:12px 14px;text-align:left;font-size:15px;line-height:1.5;border-bottom:1px solid var(--jo-sand);color:var(--jo-green)}
.jo-f-table th{width:200px;font-weight:700}
.jo-f-tab[aria-selected="true"]{background:var(--jo-ocre)}
.jo-f-tab:hover{background:var(--jo-sand-3)}
.jo-f-tab[aria-selected="true"]:hover{background:var(--jo-ocre)}
.jo-f-acc{display:none}
.jo-f-soap:hover:not(:disabled){border-color:var(--jo-green)}
.jo-f-soap[aria-checked="true"]{border-color:var(--jo-green);background:var(--jo-white)}
.jo-f-soap:disabled{opacity:.5;cursor:not-allowed}
.jo-f-tick{display:none}
.jo-f-soap[aria-checked="true"] .jo-f-tick{display:flex}
.jo-f-th[aria-current="true"]{box-shadow:0 0 0 2px var(--jo-green)}
/* Kit : bouton grisé tant que le choix n'est pas complet (reste cliquable pour afficher l'aide) */
.jo-f-add[aria-disabled="true"],.jo-f-add:disabled{opacity:1;background-color:#D8D4CD !important;color:var(--jo-ink-soft) !important;cursor:not-allowed}
.jo-f-add[aria-disabled="true"]:hover,.jo-f-add[aria-disabled="true"]:focus-visible,.jo-f-add:disabled:hover{background-size:0% 100% !important;color:var(--jo-ink-soft) !important}
.jo-f-add[aria-disabled="true"]:active,.jo-f-add:disabled:active{scale:1}
.jo-f-add[aria-disabled="true"] svg,.jo-f-add:disabled svg{stroke:var(--jo-ink-soft)}
.jo-f-bar{display:none}
@media (max-width:1000px){
  .jo-f-gal{max-width:560px}
  .jo-f-grid{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
}
@media (max-width:700px){
  #top{padding-bottom:84px}
  div.jo-f-crumb.jo-pad{padding:16px 20px 0 !important}
  section.jo-f-sec.jo-pad{padding:16px 20px 36px !important}
  section.jo-f-tabsec.jo-pad{padding:0 20px 48px !important}
  .jo-f-buy h1{font-size:30px !important}
  .jo-f-soaps{grid-template-columns:minmax(0,1fr) !important}
  .jo-f-tabs{display:none !important}
  .jo-f-panel{border-bottom:1px solid var(--jo-sand)}
  .jo-f-acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;border:0;background:transparent;font:inherit;font-size:17px;font-weight:700;color:var(--jo-green);cursor:pointer;text-align:left}
  .jo-f-acc[aria-expanded="true"] svg{transform:rotate(180deg)}
  .jo-f-txt{padding:0 0 18px}
  .jo-f-txt>h2:first-child{display:none}
  .jo-f-table th{width:110px}
  .jo-f-th,.jo-f-thumbs button{width:62px !important;height:62px !important}
  .jo-f-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:110;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--jo-cream);border-top:1px solid var(--jo-sand);box-shadow:0 -8px 20px rgba(1,69,81,.12)}
}
@media (prefers-reduced-motion: no-preference){
  .jo-f-crumb{animation:jo-fadein .7s ease .1s both}
  .jo-f-gal>*{animation:jo-rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--d,0)*.12s)}
}
/* Ajouts du thème : introduction, choix multiple, stock, avis */
.jo-f-intro p{margin:0 0 8px}
.jo-f-intro p:last-child{margin-bottom:0}
.jo-f-tick b{font-size:12px;font-weight:700;color:var(--jo-white);line-height:1}
.jo-f-reset{align-self:flex-start}
.jo-f-stock-low{color:var(--jo-coral-text) !important}
.jo-f-stock-low>span{background:var(--jo-coral) !important}
.jo-f-stock-out{color:var(--jo-ink-soft) !important}
.jo-f-stock-out>span{background:var(--jo-sand-5) !important}
.jo-f-add[aria-busy="true"]{cursor:progress}
.jo-f-add:disabled{cursor:not-allowed}
.jp-hero-12 .jo-stars{font-size:15px;margin-right:4px}
.jo-rev-note{font-size:14px !important;color:var(--jo-ink-soft) !important}
.jo-rev{list-style:none;margin:0;padding:0 !important;display:flex;flex-direction:column;gap:20px}
.jo-rev li{margin:0;padding:0 0 18px;border-bottom:1px solid var(--jo-sand)}
.jo-rev-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:6px;font-size:14px;color:var(--jo-ink-soft)}
.jo-rev-head b{color:var(--jo-green)}
.jo-rev-v{font-weight:700;color:var(--jo-success,#3B7A4A)}
.jo-rev p{margin:0 !important}
/* La maquette anime au défilement à partir de la 3e section : « Vous pouvez aussi aimer » en fait partie. */
@media (prefers-reduced-motion: no-preference) and (max-height:1400px){
@supports (animation-timeline: view()){
  #top>main>#aller-avec>div>*:not(.jo-pc),#top>main>#aller-avec .jo-pc>article{animation:jo-rise linear both;animation-timeline:view();animation-range:entry calc(var(--d,0)*4%) entry calc(55% + var(--d,0)*4%)}
}
}