/* Jour Dit : parcours d'achat du 11/11/2026 (accueil + pages kit). Valeurs : marque/tokens.json, via site.css. */

/* ---------- Accueil : bande « ce que vous achetez » ---------- */
.faits{border-top:1px solid var(--encre)}
.faits ul{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.faits li{padding:28px 24px 30px;border-left:1px solid #DCDCD6}
.faits li:first-child{border-left:0;padding-left:0}
.faits strong{display:block;font-weight:500;font-size:var(--t-h3);line-height:1.25}
.faits span{display:block;margin-top:6px;color:var(--encre-2);font-size:15px}
@media (max-width:760px){
  .faits ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faits li{padding:20px 12px 22px 16px}
  .faits li:nth-child(odd){border-left:0;padding-left:0}
  .faits li:nth-child(n+3){border-top:1px solid #DCDCD6}
  .faits strong{font-size:17px}
  .faits span{font-size:14px}
}

/* Accueil : rangée d'un kit (lien vers sa page) */
.kit-meta{margin-top:10px;font-size:15px;color:var(--encre-2);font-variant-numeric:tabular-nums}
a.kit-planche{text-decoration:none;cursor:pointer}
@media (hover:hover) and (pointer:fine){
  a.kit-planche img{transition:transform 250ms var(--courbe)}
  a.kit-planche:hover img{transform:translateY(-4px)}
}

/* ---------- Page kit ---------- */
.ariane{padding-top:20px;font-size:14px;color:var(--encre-2)}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.ariane li+li::before{content:"/";margin:0 10px;color:#B9B9B2}
.ariane a{display:inline-block;padding-block:12px;margin-block:-12px}

.fiche{padding:28px 0 var(--section)}
.fiche .grille{align-items:start}
.fiche-tete{grid-column:1 / span 7}
.fiche-tete h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em}
.fiche-ligne{margin-top:16px;max-width:34em;font-size:19px;line-height:1.5}
.galerie{grid-column:1 / span 7;margin-top:40px}
.achat{grid-column:9 / span 4;grid-row:1 / span 2;position:sticky;top:88px}

/* La grande pièce sur l'aplat du kit, entourée des traits de coupe (le signe, une fois par page) */
.vue-coupe{margin:24px}
.vue{margin:0;background:var(--aplat-k);aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;padding:9%}
.vue img{max-height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:-2px 8px 18px rgba(17,17,17,.14),-1px 1px 2px rgba(17,17,17,.08);transition:opacity 150ms ease}
.vue-coupe i{transition:opacity 200ms var(--courbe),transform 200ms var(--courbe)}
.vue-coupe.change img{opacity:0}
.vue-coupe.change i{opacity:0}
@media (prefers-reduced-motion:no-preference){.vue-coupe.change i{transform:scale(.6)}}
.vue-legende{margin:14px 24px 0;font-size:14px;color:var(--encre-2)}
.vue-legende .piece-nom{color:var(--encre)}

.vignettes{list-style:none;margin:28px 0 0;padding:0 24px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.vignettes a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;font-size:12px;line-height:1.25;text-align:center;color:var(--encre-2);padding:8px 4px 6px;border-radius:2px;min-height:48px;position:relative}
.vignettes img{height:64px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(17,17,17,.2))}
.vignettes a[aria-current="true"]{color:var(--encre)}
.vignettes a[aria-current="true"]::after{content:"";position:absolute;left:20%;right:20%;bottom:-6px;height:1px;background:var(--encre)}
@media (hover:hover) and (pointer:fine){.vignettes a:hover{color:var(--encre)}}

/* Panneau d'achat (collant en bureau) */
.achat-carte{border-top:1px solid var(--encre);padding-top:20px}
.achat-prix{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.montant-k{font-size:56px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.achat-prix-sous{font-size:15px;color:var(--encre-2)}
.achat-fichiers{margin-top:16px;font-size:15px;line-height:1.5;color:#2b2b28}
.achat-fichiers strong{font-weight:500;color:var(--encre)}
.achat-bouton{margin-top:22px;width:100%;min-height:52px;font-size:17px}
.suite{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--encre-2)}
.suite li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:baseline}
.suite .num{font-weight:500;font-size:12px;color:var(--encre);font-variant-numeric:tabular-nums}
.achat-note{margin-top:16px;padding-top:14px;border-top:1px solid #E3E3DD;font-size:13px;color:var(--encre-2)}

@media (max-width:980px){
  .fiche-tete,.galerie,.achat{grid-column:1 / -1}
  .achat{grid-row:auto;position:static;margin-top:40px}
  .galerie{margin-top:28px}
}
@media (max-width:760px){
  .fiche{padding-top:12px}
  .fiche-ligne{font-size:17px;margin-top:12px}
  .galerie{margin-top:20px;margin-left:calc(var(--marge) * -1);margin-right:calc(var(--marge) * -1)}
  .vue-coupe{margin:16px 32px}
  .vue{padding:8%}
  .vue-legende{margin:12px var(--marge) 0}
  /* Vignettes : rangée qui défile de côté, la suivante visible (design-site-premium §16) */
  .vignettes{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--marge) 10px;margin-top:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vignettes::-webkit-scrollbar{display:none}
  .vignettes li{flex:0 0 78px;scroll-snap-align:start}
  .vignettes img{height:58px}
  .achat{margin-top:28px}
  .montant-k{font-size:48px}
}

/* Les 8 pièces : grille à filets fins (Woset), sur l'aplat du kit */
.pieces{grid-column:1 / -1;margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px;border-top:1px solid var(--encre);overflow:hidden}
.piece{margin:0;padding:28px 0 32px;border-bottom:1px solid #DCDCD6;display:flex;flex-direction:column;position:relative}
.piece::before{content:"";position:absolute;left:-24px;top:0;bottom:0;width:1px;background:#DCDCD6}
.piece-visuel{position:relative;display:block;background:var(--aplat-k);aspect-ratio:4 / 5;cursor:zoom-in}
.piece-visuel img{position:absolute;inset:0;margin:auto;max-width:70%;max-height:74%;width:auto;height:auto;box-shadow:-2px 6px 14px rgba(17,17,17,.13),-1px 1px 2px rgba(17,17,17,.08)}
@media (hover:hover) and (pointer:fine){.piece-visuel img{transition:transform 250ms var(--courbe)}.piece-visuel:hover img{transform:translateY(-4px)}}
.piece figcaption{margin-top:16px;display:grid;gap:4px}
.piece-nom{font-weight:500}
.piece-format{font-size:14px;color:var(--encre-2);font-variant-numeric:tabular-nums}
.piece-noms{font-size:14px;color:#2b2b28;margin-top:6px}
@media (max-width:980px){.pieces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .pieces{margin-top:32px;column-gap:24px}
  .piece{padding:20px 0 24px}
  .piece::before{left:-12px}
  .piece-noms{font-size:13px}
}

/* Ce que vous recevez */
.recevez{grid-column:7 / span 6;display:grid;gap:32px}
.fragment-page{-webkit-mask-image:none;mask-image:none;padding:20px 22px}
.fragment-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #E6E6E1}
.fragment-tete .prenom{font-size:22px}
.impression{margin:0;display:grid;gap:0}
.impression div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid #DCDCD6}
.impression div:first-child{border-top:1px solid var(--encre)}
.impression dt{font-weight:500}
.impression dd{margin:0;color:#2b2b28;font-size:16px}
@media (max-width:980px){.recevez{grid-column:1 / -1;margin-top:32px}}
@media (max-width:760px){.impression div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* Étapes sur 4 colonnes */
.etapes-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.etapes-4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media (max-width:760px){.etapes-4{grid-template-columns:minmax(0,1fr);row-gap:32px}}

/* Fin de page : commander, ou voir l'autre kit */
.final-kit .grille{align-items:center}
.final-gauche{grid-column:1 / span 6}
.final-kit h2{grid-column:auto}
.final-kit .actions{grid-column:auto}
.autre-kit{grid-column:8 / span 5;display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;text-decoration:none;border:1px solid #DCDCD6;padding:20px;transition:border-color 200ms ease}
.autre-kit img{width:96px;height:auto;box-shadow:0 1px 3px rgba(17,17,17,.18)}
.autre-texte{display:grid;gap:6px}
.autre-nom{font-size:var(--t-h3);font-weight:500}
.autre-texte .secondaire{font-size:15px}
.autre-lien{margin-top:4px;font-size:15px;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.autre-kit:hover{border-color:var(--encre)}}
.autre-kit:active{border-color:var(--encre)}
@media (max-width:980px){.final-gauche,.autre-kit{grid-column:1 / -1}.autre-kit{margin-top:40px}}
@media (max-width:760px){.autre-kit{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px}.autre-kit img{width:72px}}

/* Barre d'achat collante, mobile seulement */
.barre-achat{position:fixed;left:0;right:0;bottom:0;z-index:12;display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--marge) calc(12px + env(safe-area-inset-bottom));background:rgba(250,250,247,.94);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--encre);transform:translateY(100%);visibility:hidden;transition:transform 250ms var(--courbe),visibility 0s linear 250ms}
.barre-achat p{font-size:15px;line-height:1.3;display:grid}
.barre-nom{font-weight:500}
.barre-achat .secondaire{font-size:13px}
.barre-achat .bouton{min-height:48px;padding:0 28px}
.barre-achat.visible{transform:none;visibility:visible;transition:transform 250ms var(--courbe),visibility 0s}
@media (max-width:980px){.barre-achat:not([hidden]){display:flex}}
@media (prefers-reduced-motion:reduce){.barre-achat{transition:opacity 200ms ease,visibility 0s linear 200ms;transform:none;opacity:0}.barre-achat.visible{opacity:1;transition:opacity 200ms ease,visibility 0s}}
@media (max-width:980px){.page-kit .pied{padding-bottom:110px}}

/* Accueil, mobile : le kit se voit avant son texte */
@media (max-width:980px){
  .kit a.kit-planche{order:-1;margin-top:0;margin-bottom:28px}
}
.fiche .galerie{margin-top:16px}
@media (max-width:760px){.fiche .galerie{margin-top:12px}}

/* Critique du 11/11 : ce qu'on achète dit sous le titre ; un seul « Commander » à la fois sur mobile ; focus jamais caché par la barre */
.fiche-quoi{margin-top:14px;max-width:34em;font-size:19px;line-height:1.45;font-weight:500}
.vignettes{scroll-padding-inline:16px}
@media (max-width:760px){.fiche-quoi{font-size:17px}}
@media (max-width:980px){
  html:has(#barre-achat){scroll-padding-bottom:96px}
  body:has(#barre-achat) .entete .bouton{display:none}
}