/* ==========================================================================
   Base commune aux deux directions : remise à zéro, boutons, cartes, filtres,
   Cabine, panier, fenêtres, pages pièces. L'habillage (couleurs, polices,
   sections d'accueil) est dans theme.css, ajouté à la suite.
   Variables attendues : --fond --texte --doux --trait --carte --accent
   --plein --sur-plein --surface --rayon --titre --corps
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--corps); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.lock { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--titre); line-height: 1.05; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--plein); color: var(--sur-plein); border-radius: 999px; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- boutons, liens */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .8rem 1.4rem; border-radius: var(--rayon-btn, 999px);
  border: 1.5px solid transparent; font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.btn:active { transform: scale(.98); }
.btn-plein { background: var(--plein); color: var(--sur-plein); }
.btn-plein:hover { background: var(--plein-survol, var(--plein)); }
.btn-contour { border-color: currentColor; background: transparent; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-bloc { display: flex; width: 100%; }
.btn.desactive { opacity: .45; }
.lien {
  background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer;
}
.surtitre { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }

/* ---------------------------------------------------------------- navigation */

.nav { position: fixed; inset: 0 0 auto; z-index: 40; padding: max(.6rem, env(safe-area-inset-top)) clamp(.75rem, 3vw, 2rem) .6rem; transition: background .3s, color .3s, box-shadow .3s; }
.nav-barre { display: flex; align-items: center; gap: 1rem; max-width: 1440px; margin: 0 auto; }
.nav-logo { flex: none; display: block; }
.nav-logo img { height: 2.4rem; width: auto; }
.nav nav { flex: 1; }
.nav-links { display: flex; gap: 1.6rem; justify-content: center; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: .92rem; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: .3em; }
.nav-links-wa { display: none; }
.nav-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.nav-boutique, .nav-pointure, .nav-panier, .burger {
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .7rem; border-radius: 999px;
  border: 1px solid var(--trait); background: transparent; font-size: .85rem; font-weight: 600;
}
.nav-boutique svg, .nav-pointure svg, .nav-panier svg { width: 1.15rem; height: 1.15rem; flex: none; }
.nav-panier { justify-content: center; padding: 0; width: 2.75rem; }
.nav-panier-n {
  position: absolute; top: -.2rem; right: -.2rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; line-height: 1.2rem; text-align: center;
}
.burger { display: none; width: 2.75rem; padding: 0; justify-content: center; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 1.1rem; height: 1.5px; background: currentColor; transition: transform .25s; }
.nav.menu-ouvert .burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.menu-ouvert .burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav-boutique span { display: none; }
  .nav-boutique { width: 2.75rem; padding: 0; justify-content: center; }
  .nav-links {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: .4rem;
    padding: 6rem clamp(1rem, 6vw, 3rem) 3rem; background: var(--fond); color: var(--texte);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .nav.menu-ouvert .nav-links { opacity: 1; visibility: visible; }
  .nav-links a { font-family: var(--titre); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 700; line-height: 1.2; }
  .nav-links-wa { display: block; margin-top: 1.5rem; }
  .nav-links-wa a { font-family: var(--corps); font-size: 1rem; text-decoration: underline; }
}

/* ---------------------------------------------------------------- filtres, recherche */

.chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: .2rem 0; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: 0 1.05rem;
  border-radius: var(--rayon-chip, 999px); border: 1px solid var(--trait); background: transparent;
  font-size: .9rem; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.chip svg { width: 1rem; height: 1rem; }
.chip[aria-pressed="true"] { background: var(--plein); color: var(--sur-plein); border-color: var(--plein); }
.recherche { position: relative; display: block; }
.recherche svg { position: absolute; left: 1rem; top: 50%; width: 1.15rem; height: 1.15rem; transform: translateY(-50%); color: var(--doux); }
.recherche input {
  width: 100%; min-height: 3rem; padding: 0 1rem 0 2.8rem; border-radius: var(--rayon-chip, 999px);
  border: 1px solid var(--trait); background: var(--surface); color: var(--texte); font: inherit; font-size: 1rem;
}
.recherche input::placeholder { color: var(--doux); }
.select-pill { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 .9rem; border-radius: var(--rayon-chip, 999px); border: 1px solid var(--trait); font-size: .88rem; }
.select-pill span { color: var(--doux); }
.select-pill select { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.select-pill option { color: #111; }
.count { margin: 1.2rem 0 .8rem; color: var(--doux); font-size: .9rem; }

/* ---------------------------------------------------------------- cartes */

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.4rem); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; }
.card-lien { display: block; text-decoration: none; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--carte); }
.card-media img, .card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card-media video { opacity: 0; transition: opacity .3s; }
.card.playing .card-media video { opacity: 1; }
@media (hover: hover) { .card-lien:hover .card-media img { transform: scale(1.04); } }
.card-badges { position: absolute; left: .6rem; top: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: var(--fond); color: var(--texte); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.badge-nouveau { background: var(--accent); color: #fff; }
.card-play { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.card-play svg { width: .85rem; height: .85rem; }
.card-info { display: grid; gap: .1rem; padding: .7rem .1rem 0; }
.card-cat { font-size: .74rem; color: var(--doux); }
.card-nom { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.card-prix { font-size: .9rem; color: var(--doux); }
.coeur { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: transparent; }
.coeur svg { width: 1.3rem; height: 1.3rem; fill: transparent; transition: fill .2s, transform .2s; }
.coeur[aria-pressed="true"] svg { fill: var(--accent); color: var(--accent); }
.coeur:active svg { transform: scale(.85); }
.card-coeur { position: absolute; right: .35rem; top: .35rem; background: rgba(255, 255, 255, .85); color: #111; }
.more { display: flex; justify-content: center; margin-top: 2rem; }

/* mini cartes (vus récemment) */
.recents { margin-top: 3rem; }
.recents h3, .voisines h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.recents-liste { display: flex; gap: .8rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .4rem; }
.mini { flex: 0 0 8.5rem; }
.mini a { display: grid; gap: .3rem; text-decoration: none; }
.mini img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--rayon) * .7); background: var(--carte); }
.mini-nom { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.mini-prix { font-size: .78rem; color: var(--doux); }

/* ---------------------------------------------------------------- fenêtres (dialog) */

dialog { border: 0; padding: 0; color: var(--texte); background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(10, 9, 9, .55); backdrop-filter: blur(4px); }
.fenetre {
  width: min(100% - 1.5rem, 30rem); max-height: min(92vh, 46rem); margin: auto; overflow: auto;
  padding: 1.4rem; border-radius: calc(var(--rayon) * 1.4); background: var(--fond);
}
.fenetre-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.fenetre-tete h2 { font-size: 1.6rem; }
.fenetre-note { color: var(--doux); font-size: .92rem; margin-bottom: 1.1rem; }
.fermer { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--trait); background: var(--fond); flex: none; }
.fermer svg { width: 1.1rem; height: 1.1rem; }
.choix-boutiques { display: grid; gap: .6rem; }
.choix-boutique {
  display: grid; gap: .1rem; width: 100%; padding: .95rem 1rem; text-align: left; border-radius: var(--rayon);
  border: 1.5px solid var(--trait); background: var(--surface); transition: border-color .2s;
}
.choix-boutique strong { font-family: var(--titre); font-size: 1.2rem; }
.cb-ville { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.cb-repere, .cb-tel { font-size: .86rem; color: var(--doux); }
.choix-boutique[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.grille-pointures { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.pt, .opt {
  min-height: 3rem; border-radius: var(--rayon-chip, 12px); border: 1.5px solid var(--trait); background: var(--surface);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.pt[aria-pressed="true"], .opt[aria-pressed="true"] { background: var(--plein); color: var(--sur-plein); border-color: var(--plein); }
.pt-oublier { margin-top: 1rem; font-size: .88rem; color: var(--doux); }

/* panier */
.panier {
  width: min(100%, 27rem); height: 100%; max-height: none; margin: 0 0 0 auto; border-radius: 0;
  flex-direction: column; padding: 0;
}
/* display seulement à l'ouverture : sinon la fenêtre fermée resterait affichée en bas de page */
.panier[open] { display: flex; animation: entre-droite .35s cubic-bezier(.2, .7, .2, 1); }
.panier .fenetre-tete { padding: max(1.2rem, env(safe-area-inset-top)) 1.3rem .8rem; margin: 0; border-bottom: 1px solid var(--trait); }
.panier-corps { flex: 1; overflow: auto; padding: 1rem 1.3rem; }
.panier-vide { color: var(--doux); }
.panier-lignes { display: grid; gap: 1rem; }
.ligne { display: grid; grid-template-columns: 4.6rem 1fr; gap: .9rem; }
.ligne-img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--rayon) * .6); }
.ligne-txt { display: grid; gap: .25rem; align-content: start; }
.ligne-nom { font-weight: 600; text-decoration: none; line-height: 1.3; }
.ligne-meta { font-size: .85rem; color: var(--doux); }
.ligne-actions { display: flex; align-items: center; gap: 1rem; margin-top: .2rem; }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--trait); border-radius: 999px; }
.qte button { width: 2.4rem; height: 2.4rem; border: 0; background: none; font-size: 1.1rem; }
.qte span { min-width: 1.4rem; text-align: center; font-weight: 600; }
.ligne-retirer { border: 0; background: none; padding: 0; font-size: .85rem; text-decoration: underline; color: var(--doux); }
.panier-legende { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); margin-bottom: .5rem; }
.panier-boutique { margin-top: 1.6rem; }
.panier-bt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: .9rem 1rem; border-radius: var(--rayon); border: 1.5px solid var(--trait); background: var(--surface); text-align: left; }
.panier-modes { margin-top: 1.4rem; display: grid; gap: .5rem; }
.panier-modes.a-choisir .mode { border-color: var(--accent); }
.mode { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--rayon); border: 1.5px solid var(--trait); cursor: pointer; font-size: .92rem; }
.mode input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin-top: .15rem; }
.panier-pied { padding: 1rem 1.3rem max(1.2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); display: grid; gap: .8rem; }
.panier-total { display: flex; justify-content: space-between; font-size: 1.05rem; }
.panier-aide { font-size: .8rem; color: var(--doux); }

@keyframes entre-droite { from { transform: translateX(100%); } to { transform: none; } }
@keyframes entre-bas { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }

/* notification */
.toast {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem; width: max-content; max-width: calc(100% - 2rem);
  padding: .75rem .9rem .75rem 1.2rem; border-radius: 999px; background: var(--texte); color: var(--fond);
  font-size: .9rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); animation: entre-bas .3s;
}
.toast-action { flex: none; border: 0; border-radius: 999px; padding: .45rem .9rem; background: var(--fond); color: var(--texte); font-weight: 600; font-size: .85rem; }

/* ---------------------------------------------------------------- la Cabine */

.cabine { width: 100%; height: 100%; margin: 0; background: var(--fond); }
.cabine[open] { animation: entre-bas .35s cubic-bezier(.2, .7, .2, 1); }
.cabine::backdrop { background: rgba(10, 9, 9, .8); }
.cabine-inner { position: relative; display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.cabine-fermer { position: absolute; z-index: 5; top: max(.8rem, env(safe-area-inset-top)); right: .8rem; background: rgba(255, 255, 255, .9); color: #111; border: 0; }
.cabine-media { position: relative; overflow: hidden; background: var(--carte); touch-action: pan-x; }
.cabine-media img, .cabine-media video { width: 100%; height: 100%; object-fit: contain; }
.cabine-points { position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); display: flex; gap: .35rem; padding: .35rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .35); }
.cabine-points button { width: .55rem; height: .55rem; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); }
.cabine-points button[aria-pressed="true"] { background: #fff; width: 1.3rem; border-radius: 999px; }
.cabine-points button::after { content: ""; position: absolute; inset: -.7rem -.2rem; }
.cabine-points button { position: relative; }
.cabine-rail { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); display: grid; gap: .45rem; justify-items: center; }
.rail-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #111; }
.rail-btn svg { width: 1.2rem; height: 1.2rem; }
.rail-btn:disabled { opacity: .35; }
.rail-btn.coeur[aria-pressed="true"] svg { fill: var(--accent); color: var(--accent); }
.rail-pos { font-size: .75rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #111; font-variant-numeric: tabular-nums; }
.cabine-astuce { position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); padding: .5rem 1rem; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-size: .85rem; white-space: nowrap; }
.cabine-corps { max-height: 46vh; overflow: auto; padding: 1.2rem clamp(1rem, 4vw, 2rem) max(1.2rem, env(safe-area-inset-bottom)); display: grid; gap: .7rem; align-content: start; }
.cabine-corps h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); }
.cabine-prix-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.cabine-prix { font-size: 1.15rem; font-weight: 700; }
.cabine-desc { color: var(--doux); }
.options legend { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
.options-liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.opt { min-width: 3rem; padding: 0 .8rem; }
.options-note { margin-top: .5rem; font-size: .82rem; color: var(--doux); }
.options-aide { margin-top: .4rem; font-size: .88rem; font-weight: 600; color: var(--accent); }
.cabine-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cabine-boutons .btn { padding-inline: .8rem; }
.cabine-boutique, .cabine-note { font-size: .85rem; color: var(--doux); }
.cabine-boutique .lien { color: var(--texte); }
.cabine-liens { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .88rem; }
.glisse-haut { animation: glisse-haut .4s cubic-bezier(.2, .7, .2, 1); }
.glisse-bas { animation: glisse-bas .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes glisse-haut { from { transform: translateY(8%); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes glisse-bas { from { transform: translateY(-8%); opacity: .2; } to { transform: none; opacity: 1; } }

@media (min-width: 821px) {
  .cabine-inner { grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 1fr); grid-template-rows: 100%; }
  .cabine-corps { max-height: none; height: 100%; padding: 5rem clamp(2rem, 4vw, 4rem) 2rem; align-content: center; }
  .cabine-fermer { right: 1.2rem; top: 1.2rem; }
}

/* ---------------------------------------------------------------- page d'une pièce */

.page-piece main { padding: 6rem clamp(1rem, 5vw, 4rem) 4rem; max-width: 1440px; margin: 0 auto; }
.piece { display: grid; gap: 2rem; }
@media (min-width: 900px) { .piece { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.piece-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--rayon); background: var(--carte); }
.piece-media img, .piece-media video { width: 100%; height: 100%; object-fit: cover; }
.piece-vignettes { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; }
.vignette { flex: none; width: 4.5rem; padding: 0; border-radius: calc(var(--rayon) * .5); border: 2px solid transparent; overflow: hidden; background: none; }
.vignette[aria-pressed="true"] { border-color: var(--texte); }
.vignette img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.piece-info { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 900px) { .piece-info { position: sticky; top: 6rem; } }
.piece-info h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.fil { font-size: .85rem; color: var(--doux); }
.fil a { text-decoration: none; }
.piece-actions { display: flex; gap: .3rem; margin-left: auto; }
.piece-actions .rail-btn { background: transparent; color: inherit; border: 1px solid var(--trait); }
.piece-actions .coeur { border: 1px solid var(--trait); }
.piece-etiquette { font-size: .85rem; color: var(--doux); }
.voisines { margin-top: 5rem; }
.grid-voisines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .grid-voisines { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- pied de page */

.pied { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem) 2rem; }
.pied-haut { display: grid; gap: 1.4rem; max-width: 1440px; margin: 0 auto; }
.pied-logo { width: 11rem; height: auto; }
.pied-phrase { font-family: var(--titre); font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.1; max-width: 22ch; }
.pied-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.pied-boutiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.6rem; max-width: 1440px; margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--pied-trait, rgba(255, 255, 255, .15)); }
.pied-boutiques li { display: grid; gap: .2rem; align-content: start; font-size: .9rem; }
.pied-ville { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.pied-quartier { font-family: var(--titre); font-size: 1.25rem; }
.pied-repere { opacity: .7; }
.pied-boutiques a { text-decoration: none; }
.pied-boutiques .lien { text-decoration: underline; justify-self: start; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; max-width: 1440px; margin: 3rem auto 0; font-size: .78rem; opacity: .6; }

/* apparitions */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- idées communes (idees.js) : structure */

/* Pointure dès l'accueil */
.hero-pointures { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; max-width: 30rem; }
.hero-pointures .pt { min-height: 2.75rem; font-size: .95rem; }

/* Ta vibe ? : paquet de cartes, la carte du dessus est la dernière */
.vibe-jeu { display: grid; justify-items: center; gap: 1.2rem; }
.paquet { position: relative; width: min(84vw, 22rem); aspect-ratio: 4 / 5; touch-action: pan-y; outline-offset: 8px; }
.carte-vibe {
  position: absolute; inset: 0; border-radius: var(--rayon); overflow: hidden; background: var(--carte);
  transform-origin: 50% 110%; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .35s;
}
.carte-vibe img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.carte-vibe .cv-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1rem 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; }
.cv-nom { display: block; font-family: var(--titre); font-size: 1.3rem; line-height: 1.05; }
.cv-prix { font-size: .9rem; opacity: .85; }
.cv-tampon { position: absolute; top: 1.2rem; padding: .3rem .7rem; border: 3px solid; border-radius: 6px; font-family: var(--titre); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; opacity: 0; }
.cv-garde { left: 1rem; color: #2fbf6a; transform: rotate(-12deg); }
.cv-passe { right: 1rem; color: #fff; transform: rotate(12deg); }
.carte-vibe:nth-last-child(2) { transform: scale(.95) translateY(14px); }
.carte-vibe:nth-last-child(3) { transform: scale(.9) translateY(28px); opacity: .6; }
.carte-vibe.prise { transition: none; cursor: grabbing; }
.vibe-boutons { display: flex; align-items: center; gap: 1rem; }
.vibe-btn { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; border: 0; transition: transform .15s; }
.vibe-btn:active { transform: scale(.92); }
.vibe-btn svg { width: 1.6rem; height: 1.6rem; }
.vibe-garder { width: 4.6rem; height: 4.6rem; }
.vibe-voir { width: auto; height: 3rem; padding: 0 1.3rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.vibe-compte { font-size: .9rem; font-variant-numeric: tabular-nums; }
.vibe-fin { display: grid; gap: 1.2rem; justify-items: center; text-align: center; width: 100%; max-width: 40rem; }
.vibe-fin .recents-liste { justify-content: flex-start; max-width: 100%; }
.vibe-fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* Arrivages : un jour par rangée */
.jours { display: grid; gap: 3rem; }
.jour { display: grid; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--trait); }
.jour-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; }
.jour-date { font-family: var(--titre); font-size: clamp(2.6rem, 7vw, 5rem); line-height: .9; font-variant-numeric: tabular-nums; }
.jour-txt { display: grid; gap: .1rem; }
.jour-jour { font-weight: 700; font-size: .8rem; color: var(--accent); }
.jour-accroche { color: var(--doux); }
.jour-n { margin-left: auto; font-size: .85rem; color: var(--doux); }
.jour-rang { display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .3rem; }
.jour-rang::-webkit-scrollbar { display: none; }
.jour-rang .mini { flex: 0 0 clamp(9rem, 22vw, 13rem); scroll-snap-align: start; }
.jour-rang button.mini-ouvrir { all: unset; cursor: pointer; display: grid; gap: .3rem; }
.jour-rang button.mini-ouvrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   Écrin — direction Apple × Nike : clair, beaucoup d'air, le produit en héros.
   Signature : la rosace (leur photo de chaussures en cercle) qui tourne.
   ========================================================================== */

:root {
  --fond: #F5F4F2;
  --texte: #141313;
  --doux: #645E5B;
  --trait: rgba(20, 19, 19, .14);
  --carte: #E8E5E2;
  --surface: #FFFFFF;
  --accent: #E12424;
  --plein: #141313;
  --plein-survol: #000;
  --sur-plein: #FFFFFF;
  --parquet: #6F6966;
  --rayon: 18px;
  --rayon-chip: 999px;
  --titre: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --corps: "Inter", "Helvetica Neue", Arial, sans-serif;
  --marge: clamp(1rem, 5vw, 5rem);
}

.ecrin h1, .ecrin h2, .ecrin h3 { font-weight: 700; letter-spacing: -.035em; word-spacing: .08em; }
.btn-blanc { background: #fff; color: #141313; }

/* ---------------------------------------------------------------- navigation */

.nav { color: var(--texte); }
.nav.dense { background: rgba(245, 244, 242, .82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 var(--trait); }
.nav.sur-sombre { color: #fff; background: rgba(20, 19, 19, .72); box-shadow: none; }
.nav.sur-sombre .nav-logo img { filter: brightness(0) invert(1); }
.nav.sur-sombre .nav-boutique, .nav.sur-sombre .nav-panier, .nav.sur-sombre .burger { border-color: rgba(255, 255, 255, .3); }
.nav.menu-ouvert { color: var(--texte); background: transparent; }
.nav.menu-ouvert .nav-logo img { filter: none; }

/* ---------------------------------------------------------------- accueil */

.hero {
  position: relative; min-height: 100svh; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center;
  padding: 5.5rem var(--marge) 2rem; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse 70% 55% at 50% 62%, #fff 0%, var(--fond) 70%);
}
.hero-sur { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.hero-titre {
  margin-top: .6rem; font-size: clamp(3.2rem, 11.5vw, 10.5rem); font-weight: 800; letter-spacing: -.065em; line-height: .9;
  position: relative; z-index: 2;
}
.hero-titre span { font-weight: 500; color: var(--doux); }
.hero-scene { position: relative; display: grid; place-items: center; width: 100%; margin-top: clamp(-4.5rem, -6vw, -1.5rem); }
.disque {
  --rot: 0deg; position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--parquet);
  transform: rotate(var(--rot)); box-shadow: 0 40px 80px -30px rgba(40, 30, 25, .45), inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.disque img { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; }
.disque-hero { width: min(78vw, 58vh, 620px); }
/* Rotation lente au repos (le défilement ajoute la sienne, sur le disque) */
.disque .tour { position: absolute; inset: 0; animation: tourne 120s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.hero-ombre { position: absolute; bottom: -2.5rem; width: min(60vw, 44vh, 480px); height: 2.5rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 30, 25, .28), transparent); }
.hero-bas { display: grid; gap: 1.1rem; justify-items: center; margin-top: 2.2rem; }
.hero-lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--doux); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

@media (min-width: 1000px) {
  /* Ordinateur : le titre à gauche, la rosace à droite, le texte en bas à gauche */
  .hero { grid-template-columns: 1fr minmax(0, 1fr); grid-template-rows: auto 1fr auto; justify-items: start; text-align: left; padding-top: 7rem; }
  .hero-sur { grid-column: 1; }
  .hero-titre { grid-column: 1; grid-row: 2; align-self: center; font-size: clamp(5rem, 9vw, 10rem); }
  .hero-scene { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; }
  .disque-hero { width: min(42vw, 78vh, 760px); }
  .hero-bas { grid-column: 1; grid-row: 3; justify-items: start; }
  .hero-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- la rosace (familles) */

.rosace { padding: 4rem var(--marge) 2rem; overflow-x: clip; }
.rosace-colle { position: relative; display: grid; max-width: 1440px; margin: 0 auto; }
.rosace-scene {
  position: sticky; top: 4.5rem; z-index: 1; display: grid; place-items: center; height: 48vh;
  background: linear-gradient(var(--fond) 82%, transparent);
}
.disque-rosace { width: min(80vw, 42vh); }
.disque-rosace img { opacity: 0; transition: opacity .7s; }
.disque-rosace img.actif { opacity: 1; }
.rosace-chapitres { position: relative; z-index: 0; }
.chapitre { min-height: 62vh; display: grid; align-content: start; gap: .9rem; padding: 1rem 0 4rem; max-width: 34rem; }
.chapitre-n { font-family: var(--titre); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.chapitre h3 { font-size: clamp(2.8rem, 9vw, 6.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .92; }
.chapitre-txt { color: var(--doux); font-size: 1.08rem; }
.chapitre { opacity: .25; transition: opacity .5s; }
.chapitre.actif, .no-js .chapitre { opacity: 1; }

@media (min-width: 900px) {
  .rosace-colle { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4vw; }
  .rosace-scene { top: 0; height: 100vh; background: none; }
  .disque-rosace { width: min(44vw, 74vh, 700px); }
  .chapitre { min-height: 100vh; padding: 0; align-content: center; }
}

/* ---------------------------------------------------------------- faits */

.faits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.5rem;
  max-width: 1440px; margin: 2rem auto 0; padding: 3rem var(--marge); border-block: 1px solid var(--trait);
}
@media (min-width: 900px) { .faits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.faits li { display: grid; gap: .3rem; }
.faits strong { font-family: var(--titre); font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -.05em; line-height: 1; }
.faits span { color: var(--doux); font-size: .95rem; max-width: 18ch; }

/* ---------------------------------------------------------------- le vestiaire */

.collection { max-width: 1440px; margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) var(--marge) 4rem; }
.collection-tete { display: grid; gap: .8rem; margin-bottom: 2.2rem; }
.collection-tete h2 { font-size: clamp(2.4rem, 6.5vw, 5.6rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.collection-note { color: var(--doux); max-width: 34rem; }
.filtres { position: sticky; top: 3.9rem; z-index: 10; display: grid; gap: .7rem; padding: .8rem 0; background: linear-gradient(var(--fond) 85%, rgba(245, 244, 242, 0)); }
.filtres-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtres-ligne .recherche { flex: 1 1 16rem; }
.chip-pointure[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.card-media { background: #fff; }

/* ---------------------------------------------------------------- grandes pointures */

.grandes {
  display: grid; gap: 2.5rem; align-items: center; padding: clamp(4rem, 9vw, 8rem) var(--marge);
  background: #141313; color: #fff;
}
.grandes-video { justify-self: center; width: min(78vw, 22rem); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #222; }
.grandes-video video { width: 100%; height: 100%; object-fit: cover; }
.grandes-texte { display: grid; gap: 1.2rem; max-width: 34rem; }
.grandes .surtitre { color: rgba(255, 255, 255, .6); }
.grandes h2 { font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 800; letter-spacing: -.06em; line-height: .88; }
.grandes h2 span { color: var(--accent); }
.grandes-texte > p:not(.surtitre) { color: rgba(255, 255, 255, .75); font-size: 1.08rem; }
.grandes .btn { justify-self: start; }
@media (min-width: 900px) { .grandes { grid-template-columns: auto minmax(0, 1fr); gap: 7vw; justify-content: center; } }

/* ---------------------------------------------------------------- quatre adresses */

.adresses { max-width: 1440px; margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) var(--marge) 3rem; }
.adresses-tete { display: grid; gap: .8rem; margin-bottom: 2.5rem; }
.adresses-tete h2 { font-size: clamp(2.3rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.adresses-tete h2 span { color: var(--doux); }
.adresses-liste { display: grid; gap: 1rem; }
@media (min-width: 800px) { .adresses-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adresse {
  position: relative; display: grid; gap: .5rem; align-content: start; padding: 1.6rem; border-radius: 24px;
  background: var(--surface); border: 1.5px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.adresse.choisie { border-color: var(--accent); box-shadow: 0 20px 50px -30px rgba(225, 36, 36, .5); }
.adresse-ville { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.adresse h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -.05em; }
.adresse-repere { color: var(--doux); }
.adresse-tel { font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.adresse-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.adresse-actions .btn { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .9rem; }
.adresse-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .3rem .7rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; }
.adresse-note { font-size: .82rem; color: var(--doux); }

/* ---------------------------------------------------------------- la quatrième */

.ouverture { display: grid; gap: 2rem; max-width: 1440px; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) var(--marge); }
.ouverture figure { margin: 0; overflow: hidden; border-radius: 24px; background: var(--carte); }
.ouverture img { width: 100%; height: 100%; object-fit: cover; }
.ouverture-grande { aspect-ratio: 4 / 5; }
.ouverture-petite { aspect-ratio: 1; }
.ouverture-texte { display: grid; gap: 1rem; align-content: center; }
.ouverture h2 { font-size: clamp(2.8rem, 8vw, 6rem); font-weight: 800; letter-spacing: -.06em; }
.ouverture-texte > p:not(.surtitre) { color: var(--doux); font-size: 1.05rem; max-width: 30rem; }
.ouverture .lien { justify-self: start; }
@media (min-width: 900px) {
  .ouverture { grid-template-columns: 1.1fr 1fr .8fr; align-items: center; }
  .ouverture-petite { align-self: end; }
}

/* ---------------------------------------------------------------- pied */

.pied { background: #141313; color: #fff; --pied-trait: rgba(255, 255, 255, .14); }
.pied .btn-plein { background: #fff; color: #141313; }
.pied .btn-contour { color: #fff; }

/* ---------------------------------------------------------------- pages pièces, fenêtres */

.page-piece { background: var(--fond); }
.page-piece .nav { background: rgba(245, 244, 242, .85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cabine-media { background: #fff; }
.fenetre, .panier, .cabine { background: var(--fond); }

/* ---------------------------------------------------------------- reprises d'Arrivage, au style Écrin */

/* La pointure dès l'accueil : une rangée de pastilles blanches, la choisie en noir */
.hero-pointure { display: grid; gap: .5rem; justify-items: inherit; width: 100%; max-width: 30rem; }
.hero-pointure-l { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.hero-pointures { width: 100%; }
.hero-pointures .pt { border-radius: 999px; border-color: var(--trait); background: rgba(255, 255, 255, .7); }
.hero-pointures .pt[aria-pressed="true"] { background: var(--plein); border-color: var(--plein); color: #fff; }
@media (min-width: 1000px) {
  .hero-pointure { max-width: 36rem; }
  .hero-pointures { grid-template-columns: repeat(12, 1fr); }
  .hero-pointures .pt { min-height: 2.6rem; font-size: .88rem; }
}

/* Ta vibe ? : le paquet posé sur un plateau blanc, comme un produit en vitrine */
.vibe { display: grid; gap: 3rem; max-width: 1440px; margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) var(--marge); align-items: center; }
.vibe-tete { display: grid; gap: 1rem; }
.vibe-tete h2 { font-size: clamp(2.8rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .92; }
.vibe-tete h2 span { color: var(--accent); }
.vibe-note { color: var(--doux); max-width: 28rem; font-size: 1.05rem; }
.vibe-jeu { padding: clamp(2rem, 5vw, 3.5rem) 1rem; border-radius: 32px; background: radial-gradient(ellipse 80% 70% at 50% 40%, #fff, var(--carte)); }
.paquet .carte-vibe { border-radius: 24px; box-shadow: 0 30px 60px -28px rgba(40, 30, 25, .5); }
.cv-nom { font-weight: 700; letter-spacing: -.02em; }
.vibe-btn { background: #fff; color: var(--texte); box-shadow: 0 10px 30px -12px rgba(40, 30, 25, .4); }
.vibe-garder { background: var(--plein); color: var(--accent); }
.vibe-voir { background: #fff; }
.vibe-compte { color: var(--doux); }
.vibe-fin h3 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.05em; }
@media (min-width: 900px) { .vibe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5vw; } }

/* Arrivages : des dates en grand, très serrées, et une rangée de pièces par jour */
.arrivages { max-width: 1440px; margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--marge) 2rem; }
.arrivages-tete { display: grid; gap: .8rem; margin-bottom: 2.5rem; }
.arrivages-tete h2 { font-size: clamp(2.4rem, 6.5vw, 5.6rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.arrivages-tete h2 span { color: var(--doux); }
.jour-date { font-weight: 800; letter-spacing: -.06em; }
.jour-jour { text-transform: none; letter-spacing: 0; }
.jour-rang .mini img { border-radius: 16px; background: #fff; }