/* ==========================================================================
   LOCATION — conditions, filtres, catalogue en grille éditoriale.
   ========================================================================== */

/* --- Rappel des conditions ---------------------------------------------- */
.location-conditions__grille {
    row-gap: var(--esp-s);
    padding-block: var(--esp-m);
}

.location-conditions__titre {
    color: var(--c-jaune);
}

.location-conditions__liste {
    display: grid;
    gap: 0.4rem var(--esp-m);
}

.location-conditions__liste li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--fs-legende);
}

.location-conditions__liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 0.7rem;
    height: 0.7rem;
    border: var(--trait) solid var(--c-jaune);
    border-radius: 50%;
}

.location-conditions__lien {
    justify-self: start;
    padding-block: 0.6rem;
    color: var(--c-jaune);
}

@media (min-width: 48em) {
    .location-conditions__liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .location-conditions__grille { align-items: center; }
    .location-conditions__titre { grid-column: 1 / span 2; }
    .location-conditions__liste { grid-column: 3 / span 7; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .location-conditions__lien { grid-column: 10 / span 3; justify-self: end; }
}

/* --- Filtres : une seule barre, sobre ------------------------------------
   Univers en une rangée de puces (défilable sur mobile), taille en liste
   déroulante, compteur à droite. */
.catalogue {
    padding-bottom: var(--esp-2xl);
}

.filtres {
    row-gap: var(--esp-s);
    align-items: center;
    padding-block: var(--esp-s);
    border-block: 1px solid var(--filet);
}

/* Mobile : puces sur toute la largeur, puis taille et compteur côte à côte. */
.filtres { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-s); }
.filtres > .filtres__groupe--taille { grid-column: 1; }
.filtres > .filtres__pied { grid-column: 2; justify-content: flex-end; }

.filtres__groupe--categorie {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--esp-2xs);
    margin-inline: calc(var(--marge) * -1);
    padding-inline: var(--marge);
    overflow-x: auto;
    scrollbar-width: none;
}

.filtres__groupe--categorie::-webkit-scrollbar {
    display: none;
}

.filtres .puce span {
    min-height: 40px;
    padding: 0.3rem 0.85rem;
}

.filtres__groupe--taille {
    display: block;
}

.filtres__liste {
    min-height: 40px;
    padding: 0.3rem 2.2rem 0.3rem 0.85rem;
    border: var(--trait) solid var(--c-encre);
    border-radius: 999px;
    background-color: transparent;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-encre) 50%), linear-gradient(135deg, var(--c-encre) 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.75rem) 55%;
    background-size: 0.3rem 0.3rem;
    background-repeat: no-repeat;
    color: var(--c-encre);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    appearance: none;
}

.filtres__liste:focus-visible {
    outline: var(--trait) solid var(--accent);
    outline-offset: 3px;
}

.filtres__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-m);
}

.filtres__compte {
    color: var(--discret);
}

@media (min-width: 48em) {
    .filtres { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--esp-m); }
    .filtres > *,
    .filtres > .filtres__groupe--taille,
    .filtres > .filtres__pied { grid-column: auto; }
    .filtres__groupe--categorie { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
}

/* --- Catalogue : grille éditoriale ---------------------------------------
   Six formats se répètent (taille, ratio, décalage vertical) : la grille
   respire comme une planche de magazine, sans cartes identiques. */
.catalogue__grille {
    row-gap: var(--esp-xl);
    align-items: start;
}

.costume-carte {
    position: relative;
}

.costume-carte__lien {
    display: grid;
    gap: var(--esp-s);
    text-decoration: none;
}

.costume-carte__media {
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.costume-carte__media img {
    transition: scale var(--dur-lente) var(--ease-entree);
}

.costume-carte__lien:hover .costume-carte__media img,
.costume-carte__lien:focus-visible .costume-carte__media img {
    scale: 1.05;
}

.costume-carte__infos {
    display: grid;
    gap: 0.25rem;
}

.costume-carte__univers,
.costume-carte__tailles {
    color: var(--discret);
}

.costume-carte__nom {
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.costume-carte__prix {
    font-weight: 600;
}

.costume-carte__prix .mono {
    color: var(--discret);
}

/* Réservé : un sticker de travers sur la photo, la photo passe en gris. */
.costume-carte--reserve .costume-carte__media img {
    filter: grayscale(1) contrast(1.05);
}

.costume-carte__reserve-etiquette {
    position: absolute;
    top: var(--esp-s);
    left: calc(var(--esp-xs) * -1);
    padding: 0.35em 0.7em 0.25em;
    background: var(--c-rouge);
    color: var(--c-creme);
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--c-encre);
    rotate: -6deg;
}

@media (min-width: 48em) {
    .catalogue__item { grid-column: span 4; }
    .catalogue__item--a { grid-column: 1 / span 5; }
    .catalogue__item--b { grid-column: 6 / span 3; margin-top: var(--esp-xl); }
    .catalogue__item--c { grid-column: 1 / span 4; }
    .catalogue__item--d { grid-column: 5 / span 4; }
    .catalogue__item--e { grid-column: 2 / span 3; }
    .catalogue__item--f { grid-column: 5 / span 4; margin-top: var(--esp-l); }

}

@media (min-width: 64em) {
    .catalogue__item--a { grid-column: 1 / span 5; }
    .catalogue__item--b { grid-column: 7 / span 3; margin-top: var(--esp-2xl); }
    .catalogue__item--c { grid-column: 10 / span 3; margin-top: var(--esp-l); }
    .catalogue__item--d { grid-column: 2 / span 3; }
    .catalogue__item--e { grid-column: 6 / span 4; margin-top: var(--esp-xl); }
    .catalogue__item--f { grid-column: 10 / span 3; }
}

/* --- Le portant (avec JS) -------------------------------------------------
   Appliqué dès le premier rendu (classe .portant-auto posée par head.js, sauf si
   le visiteur a choisi « Tout voir ») : pas de saut de mise en page au chargement.
   Les costumes pendent à des cintres sur une tringle qu'on fait glisser
   (souris : glisser-déposer avec inertie ; tactile : défilement natif aimanté).
   Chaque carte se balance autour de son crochet (rotation, lue par location.js).
   Sans JS ou en vue « Tout voir », la grille éditoriale ci-dessus s'applique. */
.costume-carte__cintre,
.portant__progression {
    display: none;
}

.vues {
    display: none;
    row-gap: var(--esp-s);
    align-items: center;
    padding-block: var(--esp-s) var(--esp-xs);
}

.js .vues {
    display: grid;
}

.vues__choix {
    display: inline-flex;
    justify-self: start;
    border: 1px solid var(--c-encre);
    border-radius: 999px;
    padding: 3px;
}

.vues__bouton {
    min-height: 40px;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color var(--dur-rapide) linear, color var(--dur-rapide) linear;
}

.vues__bouton[aria-pressed="true"] {
    background: var(--c-encre);
    color: var(--c-jaune);
}

.vues__fleches {
    display: none;
    gap: var(--esp-2xs);
}

.vues__fleche {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: var(--trait) solid var(--c-encre);
    border-radius: 50%;
    transition: background-color var(--dur-rapide) linear, color var(--dur-rapide) linear, opacity var(--dur-rapide) linear;
}

.vues__fleche svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.vues__fleche:hover:not(:disabled) {
    background: var(--c-encre);
    color: var(--c-creme);
}

.vues__fleche:disabled {
    opacity: 0.3;
    cursor: default;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .vues__fleches { display: none; }

@media (hover: hover) and (pointer: fine) {
    :is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .vues__fleches { display: flex; justify-self: end; }
}

@media (min-width: 48em) {
    .vues { grid-template-columns: auto 1fr; column-gap: var(--esp-m); }
    .vues > * { grid-column: auto; }
}

.portant {
    --portant-largeur: clamp(15rem, 66vw, 23rem);
    position: relative;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__grille {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
    max-width: none;
    padding-top: var(--esp-s);
    padding-bottom: var(--esp-l);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--marge);
    scrollbar-width: none;
    cursor: grab;
    position: relative;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__grille::-webkit-scrollbar {
    display: none;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__grille.est-saisi {
    cursor: grabbing;
    user-select: none;
}

/* La tringle : passe dans le crochet des cintres. */
:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .portant::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--esp-s) + var(--portant-largeur) * 0.05 - 2px);
    height: 4px;
    background: var(--c-encre);
    border-radius: 2px;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__item {
    flex: 0 0 var(--portant-largeur);
    margin-top: 0;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__item .costume-carte__media {
    aspect-ratio: 2 / 3;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .costume-carte {
    transform-origin: 50% calc(var(--portant-largeur) * 0.05);
    will-change: transform;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .costume-carte__cintre {
    display: block;
    width: 72%;
    margin: 0 auto -1px;
    overflow: visible;
    fill: none;
    stroke: var(--c-encre);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .costume-carte__cintre path {
    vector-effect: non-scaling-stroke;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .costume-carte__reserve-etiquette {
    top: calc(var(--portant-largeur) * 0.24 + var(--esp-s));
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .costume-carte__lien img {
    -webkit-user-drag: none;
}

:is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .portant__progression {
    display: block;
    height: 2px;
    margin-inline: var(--marge);
    margin-top: calc(var(--esp-m) * -1);
    background: var(--filet);
}

.portant__progression span {
    display: block;
    height: 100%;
    background: var(--c-encre);
    transform-origin: 0 50%;
    transform: scaleX(0);
}

/* Tactile : défilement natif, chaque costume s'aimante au bord. */
@media (pointer: coarse) {
    :is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__grille {
        scroll-snap-type: x mandatory;
    }
    :is(.est-portant, .portant-auto .catalogue:not(.est-grille)) .catalogue__item {
        scroll-snap-align: start;
    }
}

@media (min-width: 64em) {
    .portant { --portant-largeur: clamp(18rem, 22vw, 26rem); }
}

/* --- État vide ------------------------------------------------------------ */
.catalogue__vide {
    row-gap: var(--esp-m);
    padding-block: var(--esp-xl);
    margin-top: var(--esp-l);
}

.catalogue__vide-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-m);
}

@media (min-width: 64em) {
    .catalogue__vide-titre { grid-column: 1 / span 8; }
    .catalogue__vide-texte,
    .catalogue__vide-actions { grid-column: 1 / span 6; }
}

/* --- Fiche costume (même feuille : page « costume ») ---------------------- */
.fiche__grille {
    row-gap: var(--esp-l);
    padding-top: calc(var(--hauteur-entete) + var(--esp-l));
    padding-bottom: var(--esp-2xl);
}

.fiche__fil {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-xs);
    color: var(--discret);
}

.fiche__fil a {
    color: var(--texte);
    padding-block: 0.6rem;
}

.fiche__fil span[aria-current] {
    padding-block: 0.6rem;
}

.fiche__principale {
    aspect-ratio: 2 / 3;     /* mascottes en pied : tête et pieds visibles */
    view-transition-name: costume-image;
}

/* --- La cabine d'essayage : miroir de loge ---------------------------------
   Photo dans un ovale, double filet, ampoules sur le cadre, ticket de vestiaire.
   Avec JS (costume.js) : ampoules qui s'allument, projecteur (masque radial, la
   seule propriété animée hors transform/opacity, comme le hero), ticket détaché. */
.miroir {
    --miroir-pad: clamp(0.85rem, 0.5rem + 1.6vw, 1.75rem);
    position: relative;
    padding: var(--miroir-pad);
    border: var(--trait) solid var(--c-encre);
    border-radius: 50%;
}

.miroir::before {
    content: "";
    position: absolute;
    inset: calc(var(--miroir-pad) * 0.42);
    border: 1px solid var(--c-encre);
    border-radius: 50%;
    pointer-events: none;
}

.miroir .fiche__principale {
    border-radius: 50%;
}

.miroir__ampoules {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.miroir__ampoule {
    position: absolute;
    left: calc(50% + cos(var(--a)) * 50%);
    top: calc(50% + sin(var(--a)) * 50%);
    width: clamp(0.6rem, 0.45rem + 0.5vw, 0.95rem);
    aspect-ratio: 1;
    border: var(--trait) solid var(--c-encre);
    border-radius: 50%;
    background: var(--c-jaune);
    translate: -50% -50%;
}

.miroir__ampoule:nth-child(1) { --a: -90deg; }
.miroir__ampoule:nth-child(2) { --a: -64.29deg; }
.miroir__ampoule:nth-child(3) { --a: -38.57deg; }
.miroir__ampoule:nth-child(4) { --a: -12.86deg; }
.miroir__ampoule:nth-child(5) { --a: 12.86deg; }
.miroir__ampoule:nth-child(6) { --a: 38.57deg; }
.miroir__ampoule:nth-child(7) { --a: 64.29deg; }
.miroir__ampoule:nth-child(8) { --a: 90deg; }
.miroir__ampoule:nth-child(9) { --a: 115.71deg; }
.miroir__ampoule:nth-child(10) { --a: 141.43deg; }
.miroir__ampoule:nth-child(11) { --a: 167.14deg; }
.miroir__ampoule:nth-child(12) { --a: 192.86deg; }
.miroir__ampoule:nth-child(13) { --a: 218.57deg; }
.miroir__ampoule:nth-child(14) { --a: 244.29deg; }

/* Projecteur au survol (souris) : voile sombre percé d'un cercle de lumière qui
   suit le pointeur (élément et variables créés par costume.js). */
.miroir__ombre {
    position: absolute;
    inset: var(--miroir-pad);
    border-radius: 50%;
    background: var(--c-encre);
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle var(--spot-r, 0px) at var(--spot-x, 50%) var(--spot-y, 40%), transparent 55%, #000 100%);
    mask-image: radial-gradient(circle var(--spot-r, 0px) at var(--spot-x, 50%) var(--spot-y, 40%), transparent 55%, #000 100%);
}

/* Ticket de vestiaire, suspendu au cadre par une ficelle. */
.ticket {
    position: absolute;
    top: 9%;
    right: 1%;
    display: grid;
    justify-items: center;
    transform-origin: 50% 0;
    rotate: 7deg;
    pointer-events: none;
}

.ticket__ficelle {
    width: 2px;
    height: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    background: var(--c-encre);
}

.ticket__corps {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    width: clamp(4.75rem, 4rem + 2.4vw, 6rem);
    padding: 1.35rem 0.3rem 0.6rem;
    margin-top: -0.45rem;
    border: var(--trait) solid var(--c-encre);
    background: var(--c-jaune);
    color: var(--c-encre);
    clip-path: polygon(18% 0, 82% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
}

/* Œillet du ticket. */
.ticket__corps::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: 0.55rem;
    aspect-ratio: 1;
    border: var(--trait) solid var(--c-encre);
    border-radius: 50%;
    background: var(--c-creme);
    translate: -50% 0;
}

/* Les coins coupés mangent la bordure : filet redessiné dans les angles. */
.ticket__corps::after {
    content: "";
    position: absolute;
    inset: 0;
    border-top: var(--trait) solid var(--c-encre);
    clip-path: inherit;
    pointer-events: none;
}

.ticket__libelle {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.2;
}

.ticket__numero {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
    font-weight: 800;
    line-height: 0.9;
}

.ticket__numero small {
    margin-right: 0.1em;
    font-size: 0.5625rem;
    font-weight: 600;
    vertical-align: 0.9em;
}

.fiche__principale picture,
.fiche__principale img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fiche__vignettes {
    display: flex;
    gap: var(--esp-xs);
    margin-top: var(--esp-xs);
}

.fiche__vignette {
    display: block;
    width: 5.5rem;
    aspect-ratio: 2 / 3;
    outline: var(--trait) solid transparent;
    outline-offset: 2px;
}

.fiche__vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fiche__vignette.est-active {
    outline-color: var(--c-encre);
}

.fiche__infos {
    display: grid;
    gap: var(--esp-m);
    align-content: start;
}

.fiche__univers {
    color: var(--c-rouge);
}

.fiche__details {
    display: grid;
    border-top: var(--trait) solid var(--c-encre);
}

.fiche__detail {
    display: grid;
    gap: var(--esp-xs);
    padding-block: var(--esp-s);
    border-bottom: 1px solid var(--filet);
}

.fiche__detail dt {
    color: var(--discret);
}

.fiche__tailles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2xs);
}

.fiche__taille {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0.6rem;
    border: var(--trait) solid var(--c-encre);
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    font-weight: 600;
}

.fiche__tarifs {
    width: 100%;
    border-collapse: collapse;
}

.fiche__tarifs th,
.fiche__tarifs td {
    padding-block: 0.3rem;
    text-align: left;
    font-weight: 400;
}

.fiche__tarifs td {
    text-align: right;
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 800;
}

.fiche__dispo {
    display: flex;
    align-items: center;
    gap: var(--esp-xs);
    font-weight: 600;
}

.fiche__dispo-puce {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--c-encre);
}

.fiche__dispo--non .fiche__dispo-puce {
    background: var(--c-rouge);
}

.fiche__duo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--esp-xs);
    padding-top: var(--esp-s);
    border-top: 1px solid var(--filet);
}

.fiche__duo-lien {
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 800;
    text-transform: uppercase;
}

.fiche__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-m);
}

.fiche__conditions {
    padding-block: 0.75rem;
}

@media (min-width: 64em) {
    .fiche__fil { grid-column: 1 / -1; }
    .fiche__galerie { grid-column: 1 / span 6; }
    .fiche__infos {
        grid-column: 8 / span 5;
        position: sticky;
        top: calc(var(--hauteur-entete) + var(--esp-l));
        align-self: start;
    }
}

.fiche-autres__grille {
    row-gap: var(--esp-l);
    padding-block: var(--esp-xl);
}

.fiche-autres__liste {
    display: grid;
    gap: var(--esp-l);
}

.fiche-autres__lien {
    display: grid;
    gap: 0.3rem;
    text-decoration: none;
}

.fiche-autres__media {
    aspect-ratio: 2 / 3;
    margin-bottom: var(--esp-xs);
}

.fiche-autres__univers {
    color: var(--discret);
}

.fiche-autres__nom {
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 800;
    text-transform: uppercase;
}

@media (min-width: 48em) {
    .fiche-autres__liste {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gouttiere);
    }
    .fiche-autres__liste li:nth-child(2) { margin-top: var(--esp-l); }
}

@media (prefers-reduced-motion: reduce) {
    .costume-carte__media img { transition: none; }
}