/* ===== Palette ===== */
/* L'atelier : chambray, fil marine, mètre ruban jaune */
:root {
    --fond: #E8EDF4;
    --surface: #FFFFFF;
    --encre: #16213E;
    --encre-douce: #4A5673;
    --metre: #F4C430;
    --metal-clair: #D3D8E1;
    --metal: #8C95A6;
    --metal-fonce: #5E6679;
}

/* Une teinte par rayon : pleine (texte, étiquette choisie) et douce (fond des visuels) */
.tone-rose     { --tone: #B3264A; --tone-doux: #F6DCE2; }
.tone-bleu     { --tone: #1F4E8C; --tone-doux: #D7E3F3; }
.tone-moutarde { --tone: #8A5A00; --tone-doux: #FBEBC0; }
.tone-sapin    { --tone: #2B6A4D; --tone-doux: #D6EADE; }
.tone-prune    { --tone: #6A3D9E; --tone-doux: #E7DDF3; }
.tone-marine   { --tone: var(--encre); --tone-doux: var(--surface); }

/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-optical-sizing: auto;
    color: var(--encre);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background-color: var(--fond);
    /* Trame de chambray, à peine visible */
    background-image:
        repeating-linear-gradient(0deg, rgba(22, 33, 62, 0.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 5px);
}

main { overflow-x: clip; }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 3px;
}

/* ===== En-tête ===== */
.entete {
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 24px 0;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.marque img {
    width: 48px;
    height: 48px;
}

.marque-nom {
    font-size: 1.4rem;
    font-weight: 800;
    font-stretch: 85%;
    letter-spacing: -0.01em;
}

/* ===== Vitrine ===== */
.vitrine {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 64px;
}

.titre {
    max-width: 17ch;
    font-size: clamp(2.8rem, 8vw, 7.4rem);
    font-weight: 800;
    font-stretch: 75%;
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.chapo {
    max-width: 44ch;
    margin-top: 22px;
    font-size: 1.2rem;
    color: var(--encre-douce);
}

/* Mètre ruban posé en travers, jusqu'au bord droit de l'écran */
.metre {
    position: relative;
    margin: 44px calc(50% - 50vw) 0 -8px;
    padding: 20px 24px 10px 44px;
    background-color: var(--metre);
    background-image:
        repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 60px),
        repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 12px);
    background-size: 100% 14px, 100% 7px;
    background-repeat: no-repeat;
    background-position: 30px 0, 30px 0;
    box-shadow: 0 6px 14px rgba(22, 33, 62, 0.14);
    transform: rotate(-1.2deg);
    transform-origin: left center;
}

/* Embout métallique du mètre */
.metre::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    bottom: -3px;
    width: 22px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--metal-fonce), var(--metal-clair) 45%, var(--metal));
}

.metre-maj {
    font-size: 0.95rem;
    font-weight: 700;
}

/* ===== Rayons : portant + grille ===== */
.rayons {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 24px 96px;
}

.rayons-tete h2 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    font-stretch: 80%;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.rayons-tete p {
    margin-top: 6px;
    color: var(--encre-douce);
    font-size: 1.05rem;
}

/* Le portant : une barre de métal, une étiquette suspendue par rayon */
.portant {
    margin-top: 28px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.portant::-webkit-scrollbar { display: none; }

.portant-barre {
    position: relative;
    display: flex;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    padding: 0 20px 18px;
}

.portant-barre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--metal-clair), var(--metal) 60%, var(--metal-fonce));
    box-shadow: 0 3px 6px rgba(22, 33, 62, 0.18);
}

.cintre {
    position: relative;
    flex-shrink: 0;
    padding-top: 36px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transform-origin: 50% 4px;
    transition: transform 0.3s ease;
}

/* La ficelle, de la barre jusqu'au trou de l'étiquette */
.cintre::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    width: 2px;
    height: 46px;
    margin-left: -1px;
    background: var(--encre);
}

/* La boucle autour de la barre */
.cintre::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border: 2px solid var(--encre);
    border-radius: 50%;
}

.cintre-etiquette {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 112px;
    padding: 28px 18px 14px;
    background: var(--surface);
    color: var(--tone);
    line-height: 1.1;
    clip-path: polygon(24% 0, 76% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
    -webkit-mask: radial-gradient(circle at 50% 13px, transparent 4.5px, #000 5px);
    mask: radial-gradient(circle at 50% 13px, transparent 4.5px, #000 5px);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cintre-nom {
    font-size: 1.1rem;
    font-weight: 800;
    font-stretch: 85%;
}

.cintre-compte {
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.85;
}

.cintre:hover { transform: rotate(-3deg); }

.cintre[aria-pressed="true"] .cintre-etiquette {
    background: var(--tone);
    color: #fff;
}

.cintre.balance { animation: balance 0.9s ease-out; }

@keyframes balance {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(8deg); }
    45%  { transform: rotate(-5deg); }
    70%  { transform: rotate(2.5deg); }
    100% { transform: rotate(0); }
}

/* Grille des pièces */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 52px 28px;
    margin-top: 36px;
}

.piece {
    display: flex;
    flex-direction: column;
}

.piece-vitrine { position: relative; }

.piece-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    padding: 32px;
    background: var(--tone-doux);
    overflow: hidden;
}

.piece-image img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    /* Fond le blanc des photos Amazon dans la teinte du rayon */
    mix-blend-mode: multiply;
    transition: transform 0.4s ease;
}

.piece:hover .piece-image img { transform: scale(1.04); }

/* Petite étiquette de rayon, accrochée au visuel */
.piece-etiquette {
    position: absolute;
    top: 16px;
    left: 14px;
    padding: 4px 12px 4px 24px;
    background: var(--surface);
    color: var(--tone);
    font-size: 0.82rem;
    font-weight: 700;
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
    -webkit-mask: radial-gradient(circle at 12px 50%, transparent 3px, #000 3.5px);
    mask: radial-gradient(circle at 12px 50%, transparent 3px, #000 3.5px);
    transform: rotate(-4deg);
}

.piece-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 16px;
}

.piece-titre {
    font-size: 1.22rem;
    font-weight: 700;
    font-stretch: 90%;
    line-height: 1.2;
}

.piece-titre a { transition: color 0.18s; }
.piece-titre a:hover { color: var(--tone); }

.piece-desc {
    margin: 8px 0 18px;
    font-size: 0.93rem;
    color: var(--encre-douce);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.piece-cta {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 22px;
    border-radius: 4px;
    background: var(--encre);
    color: #fff;
    font-weight: 700;
    transition: background-color 0.18s ease;
}

.piece-cta:hover { background: var(--tone); }

/* ===== Chargement ===== */
.loading {
    padding: 40px;
    text-align: center;
    color: var(--encre-douce);
    font-weight: 600;
}

/* ===== Pied de page : lisière de denim ===== */
.lisiere {
    position: relative;
    padding: 72px 24px 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    background-color: var(--encre);
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px);
}

/* Surpiqûre jaune */
.lisiere::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--metre);
    opacity: 0.8;
}

.lisiere-inner {
    max-width: 620px;
    margin: 0 auto;
}

.lisiere-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
}

.lisiere-devise {
    font-size: 1.6rem;
    font-weight: 800;
    font-stretch: 80%;
    color: #fff;
    line-height: 1.15;
}

.lisiere-desc {
    margin: 8px 0 28px;
    font-size: 0.95rem;
}

/* Étiquette cousue */
.disclaimer {
    margin-bottom: 24px;
    padding: 20px 28px;
    border-radius: 3px;
    background: var(--surface);
    color: var(--encre);
    font-size: 0.86rem;
    line-height: 1.6;
    outline: 1.5px dashed rgba(22, 33, 62, 0.35);
    outline-offset: -8px;
}

.copyright {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ===== Mouvement réduit ===== */
@media (prefers-reduced-motion: reduce) {
    .cintre, .cintre-etiquette, .piece-image img, .piece-cta { transition: none; }
    .cintre:hover, .piece:hover .piece-image img { transform: none; }
    .cintre.balance { animation: none; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .entete { padding: 16px 16px 0; }
    .vitrine { padding: 36px 16px 48px; }
    .chapo { font-size: 1.08rem; }
    .metre { margin-top: 32px; }
    .rayons { padding: 16px 16px 72px; }
    .portant { margin-left: -16px; margin-right: -16px; }
    .portant-barre { padding: 0 16px 18px; gap: 12px; }
    .cintre-etiquette { min-width: 100px; padding: 26px 14px 12px; }
}

@media (max-width: 480px) {
    .grille { grid-template-columns: 1fr; gap: 44px; }
    .piece-image { aspect-ratio: 5 / 4; padding: 24px; }
}