/* Mamorine · bloc d'achat et suites de la page produit. Mobile d'abord.
   L'image, le prix, le coloris et la pointure tiennent dans le premier ecran. */

.achat{padding:0 0 var(--air)}
.achat-grille{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:920px){
  .achat-grille{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);padding-top:32px;align-items:start}
}

/* vitrine : un defilement par coloris, une vue par ecran (balayage sur telephone) */
.vitrine{background:var(--os-2);position:relative}
@media(max-width:919px){.vitrine{margin-inline:calc(50% - 50vw)}}
@media(min-width:920px){.vitrine-colonne{position:sticky;top:calc(var(--entete-h) + 16px)}}
.vitrine .vue{display:none}
.vitrine .vue.actif{display:block}
.defile{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.defile::-webkit-scrollbar{display:none}
.defile img{flex:0 0 100%;width:100%;scroll-snap-align:center;aspect-ratio:6/5;object-fit:contain;object-position:50% 50%;background:var(--os-2)}
@media(min-width:920px){.defile img{aspect-ratio:1/1}}
.points-vues{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.points-vues i{width:7px;height:7px;border-radius:50%;background:rgba(21,20,15,.25)}
.points-vues i.actif{background:var(--marque)}
.vignettes{display:none}
@media(min-width:920px){
  .vignettes{display:flex;gap:10px;margin-top:10px}
  .vignettes button{flex:1;max-width:96px;padding:0;border:1.5px solid var(--pierre);background:var(--os-2);cursor:pointer}
  .vignettes button.actif{border-color:var(--encre)}
  .vignettes img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
}

/* panneau d'achat */
.panneau{padding:22px 0 0}
@media(min-width:920px){.panneau{padding:0}}
.panneau h1,.panneau h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.panneau .accroche{color:var(--gris);font-size:15.5px;margin-bottom:16px;max-width:46ch}
.prix-ligne{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:6px}
.prix-ligne .p{font-family:var(--titre);font-size:30px;font-weight:700}
.prix-ligne .repere{font-size:12.5px;color:var(--gris)}

.groupe{border:0;padding:0;margin:20px 0 0;min-width:0}
.groupe .etiquette{display:flex;justify-content:space-between;gap:12px;width:100%;padding:0;margin-bottom:10px;
  font-family:var(--titre);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.groupe .etiquette em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--encre)}
.groupe .etiquette em a{color:var(--gris)}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.puce span,.taille span{display:flex;align-items:center;gap:8px;border:1.5px solid var(--pierre);background:var(--os);
  cursor:pointer;font-size:13.5px;transition:border-color .15s ease,background .15s ease}
.puce span{padding:9px 13px}
.puce i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(21,20,15,.22);flex:none}
.puce input:checked + span{border-color:var(--encre);background:#fff}
.puce--bientot span{opacity:.42;cursor:not-allowed}
.choix--tailles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
@media(min-width:520px){.choix--tailles{grid-template-columns:repeat(9,minmax(0,1fr))}}
.taille span{justify-content:center;padding:13px 0;font-size:14.5px}
.taille input:checked + span{border-color:var(--marque);background:var(--marque);color:var(--os);font-weight:600}
.puce input:focus-visible + span,.taille input:focus-visible + span{outline:2px solid var(--terre);outline-offset:2px}
.choix--tailles.manque span{border-color:var(--terre)}
.stock-ligne{font-size:13px;color:var(--vert);margin:10px 0 0}
.stock-ligne::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--vert);margin-right:8px}

.bouton--achat{margin-top:20px;padding:19px 28px;font-size:15px}
.garanties{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:14px 0 0;font-size:12.5px;color:var(--gris)}
.garanties li::before{content:'✓';color:var(--vert);font-weight:700;margin-right:6px}
.duo-mini{display:flex;gap:13px;align-items:center;margin-top:20px;padding:13px;border:1.5px solid var(--pierre);text-decoration:none}
.duo-mini img{width:58px;height:58px;object-fit:cover;background:var(--os-2);flex:none}
.duo-mini .t{flex:1;font-size:13px;line-height:1.4;color:var(--gris)}
.duo-mini .t b{display:block;font-family:var(--titre);font-size:14px;font-weight:600;color:var(--encre)}

/* trois raisons, juste sous l'achat */
.raisons{background:var(--os-2);border-block:1px solid var(--pierre)}
.raisons .col{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.raisons .col{grid-template-columns:repeat(3,minmax(0,1fr))}}
.raisons div{padding:22px 0;border-top:1px solid var(--pierre)}
.raisons div:first-child{border-top:0}
@media(min-width:760px){.raisons div{padding:30px 28px 30px 0;border-top:0}.raisons div + div{padding-left:28px;border-left:1px solid var(--pierre)}}
.raisons b{display:block;font-family:var(--titre);font-size:21px;font-weight:700;margin-bottom:6px}
.raisons span{font-size:14.5px;color:var(--gris);line-height:1.5;display:block;max-width:34ch}

.produits--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.texte-fiche{max-width:62ch}
.faq .accordeon{margin-top:18px}

/* barre d'achat collante, telephone seulement : elle apparait quand le bouton sort de l'ecran */
.barre-achat{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;align-items:center;gap:12px;
  background:rgba(250,249,247,.98);border-top:1px solid var(--pierre);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .22s ease}
.barre-achat.visible{transform:none}
.barre-achat .t{flex:1;min-width:0;font-family:var(--titre);font-size:15px;font-weight:700;line-height:1.25}
.barre-achat .t b{display:block;font-size:13px;font-weight:500;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-achat .bouton{padding:14px 18px;flex:none}
@media(max-width:919px){.barre-achat{display:flex}body.avec-barre{padding-bottom:78px}}

/* telephone : tout l'achat dans le premier ecran */
@media(max-width:619px){
  .entete nav{display:none}
  .defile img{aspect-ratio:4/3}
  .panneau{display:flex;flex-direction:column;padding-top:14px}
  .panneau>h1,.panneau>h2{order:1;font-size:26px;margin-bottom:4px}
  .panneau>.prix-ligne{order:2;margin-bottom:0}
  .panneau>.groupe{order:3;margin-top:12px}
  .panneau>.bouton--achat{order:4;margin-top:12px;padding:17px 20px}
  .panneau>.accroche{order:5;font-size:14px;margin:16px 0 0}
  .panneau>.garanties{order:6}
  .panneau>.duo-mini{order:7}
  .prix-ligne{gap:0 12px}
  .prix-ligne .p{font-size:26px;line-height:1.1}
  .prix-ligne .repere{font-size:11.5px}
  .groupe .etiquette{margin-bottom:8px}
  .puce span{font-size:0;padding:5px;gap:0}
  .puce i{width:28px;height:28px}
  .choix--tailles{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
  .taille span{padding:12px 0;font-size:13.5px}
  .stock-ligne{margin-top:8px;font-size:12.5px}
}