/* ATHR Stories — rangée de vidéos verticales et lecteur plein écran.
   Couleurs et polices reprises du thème athr (variables), avec des valeurs de secours. */
.stories{padding:104px 0 112px}
.stories--fiche{padding:0;margin-top:120px}
.stories__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.stories__fleches{display:flex;gap:8px;flex:none}
.stories__fleches[hidden]{display:none}
.stories__fleche{width:44px;height:44px;padding:0;border:1px solid var(--trait,#D8CEBC);background:transparent;cursor:pointer;position:relative;
  transition:border-color .2s,opacity .2s}
.stories__fleche::before{content:"";position:absolute;inset:14px;background:var(--texte,#0A0A0A);
  -webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat}
.stories__fleche:hover:not(:disabled){border-color:var(--texte,#0A0A0A)}
.stories__fleche:disabled{opacity:.35;cursor:default}
.stories__fleche--prec{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.stories__fleche--suiv{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.stories__titre{font-size:30px;line-height:1.25;margin:0}
.stories__rangee{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,240px);gap:14px;
  list-style:none;margin:0;padding:0 0 8px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--trait,#D8CEBC) transparent;scroll-behavior:smooth}
.stories__item{margin:0;scroll-snap-align:start}
.stories__carte{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;margin:0;
  background:var(--section,#18352B);overflow:hidden;cursor:pointer;color:#fff;text-align:left}
.stories__carte img,.stories__carte video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.stories__carte:hover img,.stories__carte:hover video{transform:scale(1.04)}
.stories__carte::after{content:"";position:absolute;inset:auto 0 0;height:45%;
  background:linear-gradient(to top,rgba(10,10,10,.65),rgba(10,10,10,0))}
.stories__carte:focus-visible{outline:2px solid var(--bronze,#A98755);outline-offset:3px}
.stories__lecture{position:absolute;top:12px;right:12px;z-index:1;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);background:rgba(10,10,10,.18);transition:background-color .25s}
.stories__lecture::before{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff}
.stories__carte:hover .stories__lecture{background:rgba(10,10,10,.4)}
.stories__legende{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;font-family:var(--police-titres,serif);
  font-size:13px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase}

/* Lecteur */
html.stories-ouvert{overflow:hidden}
.stories-lecteur{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff}
.stories-lecteur::backdrop{background:rgba(10,10,10,.92)}
.stories-lecteur__cadre{position:relative;height:min(92dvh,calc(100vw * 16 / 9));aspect-ratio:9/16;margin:4dvh auto 0;
  background:#000;overflow:hidden}
.stories-lecteur__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* Dégradé sous les barres, le titre et les boutons : lisibles même sur une vidéo claire. */
.stories-lecteur__cadre::before{content:"";position:absolute;inset:0 0 auto;height:130px;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(10,10,10,.5),rgba(10,10,10,0))}
.stories-lecteur__son::before,.stories-lecteur__fermer::before{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.stories-lecteur__barres{position:absolute;top:10px;left:10px;right:10px;z-index:3;display:flex;gap:4px}
.stories-lecteur__barres span{flex:1;height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.stories-lecteur__barres i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.stories-lecteur__haut{position:absolute;top:22px;left:14px;right:8px;z-index:3;display:flex;align-items:center;gap:4px}
.stories-lecteur__titre{flex:1;margin:0;font-family:var(--police-titres,serif);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.stories-lecteur__son,.stories-lecteur__fermer{width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;
  position:relative;color:#fff}
.stories-lecteur__son::before,.stories-lecteur__fermer::before{content:"";position:absolute;inset:10px;background:#fff;
  -webkit-mask:var(--icone) center/contain no-repeat;mask:var(--icone) center/contain no-repeat}
.stories-lecteur__fermer{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E")}
.stories-lecteur__son{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23000'/%3E%3Cpath d='M16 8.5a5 5 0 010 7M18.5 6a8.5 8.5 0 010 12' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
.stories-lecteur__son.est-muet{--icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23000'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.stories-lecteur__son:focus-visible,.stories-lecteur__fermer:focus-visible{outline:2px solid #fff;outline-offset:2px}
.stories-lecteur__zone{position:absolute;top:70px;bottom:96px;z-index:2;padding:0;border:0;background:transparent;cursor:pointer}
.stories-lecteur__zone--prec{left:0;width:35%}
.stories-lecteur__zone--suiv{right:0;width:65%}
/* Flèches haut/bas à droite du cadre (ordinateur) */
.stories-lecteur__nav{position:absolute;right:10px;top:50%;z-index:3;display:flex;flex-direction:column;gap:8px;transform:translateY(-50%)}
.stories-lecteur__fleche{width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  background:rgba(10,10,10,.3);cursor:pointer;position:relative}
.stories-lecteur__fleche::before{content:"";position:absolute;inset:11px;background:#fff;
  -webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat}
.stories-lecteur__fleche:disabled{opacity:.35;cursor:default}
.stories-lecteur__fleche--prec{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 15l8-8 8 8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E")}
.stories-lecteur__fleche--suiv{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9l8 8 8-8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E")}
.stories-lecteur__fleche:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Fiche produit en bas de la vidéo */
.stories-lecteur__produit{position:absolute;left:12px;right:12px;bottom:14px;z-index:3;display:grid;grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;gap:12px;padding:10px;background:rgba(246,244,240,.95);color:var(--texte,#0A0A0A);text-decoration:none}
.stories-lecteur__produit[hidden]{display:none}
.stories-lecteur__produit img{width:48px;height:48px;object-fit:cover;background:var(--surface,#ECE8E1)}
.stories-lecteur__produit-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Nom sur deux lignes au plus, sans être coupé au milieu d'un mot. */
.stories-lecteur__produit-nom{font-family:var(--police-titres,serif);font-size:13px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.stories-lecteur__produit-prix{font-size:13px;color:var(--sourdine,#6A6052)}
.stories-lecteur__produit-bouton{padding:10px 14px;background:var(--texte,#0A0A0A);color:var(--fond,#F6F4F0);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.stories-lecteur__produit:hover .stories-lecteur__produit-bouton{background:var(--section,#18352B)}
.stories-lecteur__produit:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:720px){
  .stories{padding:72px 0 80px}
  .stories--fiche{padding:0;margin-top:72px}
  .stories__titre{font-size:23px}
  .stories__fleches,.stories-lecteur__nav{display:none}
  .stories-lecteur__produit{gap:10px;padding:8px}
  .stories-lecteur__produit-bouton{padding:10px 11px;letter-spacing:.12em}
  .stories__rangee{grid-auto-columns:42%;gap:10px;margin-inline:calc(-1 * var(--gouttiere,16px));padding-inline:var(--gouttiere,16px);
    scroll-padding-inline:var(--gouttiere,16px)}
  /* Téléphone : le lecteur occupe tout l'écran. */
  .stories-lecteur__cadre{width:100vw;height:100dvh;aspect-ratio:auto;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .stories__carte img,.stories__carte video{transition:none}
}