/* ===== Palette ===== */
/* Relevée sur le logo : bois du coffre, anneau jaune, lettrage « JOUETS » */
:root {
    --fond: #FFF7E8;
    --creme: #FFF1D6;
    --bois-clair: #9A6431;
    --bois: #7A4B22;
    --bois-fonce: #5C3A1A;
    --encre: #3B2414;
    --secondaire: #7A5A43;
    --anneau: #F5A800;
    --surface: #FFFFFF;

    --rouge: #D62B22;
    --rose: #D6246E;
    --orange: #C2530A;
    --vert: #1E8A3A;
    --bleu: #1760D0;
    --violet: #7B34C4;
}

/* Une teinte par tranche d'âge : pleine, foncée (relief), douce (fond) */
.tone-rose   { --tone: var(--rose);   --tone-fonce: #9E1450; --tone-doux: #FDE7F0; }
.tone-orange { --tone: var(--orange); --tone-fonce: #8C3A05; --tone-doux: #FFEBD9; }
.tone-vert   { --tone: var(--vert);   --tone-fonce: #135E26; --tone-doux: #E2F5E6; }
.tone-bleu   { --tone: var(--bleu);   --tone-fonce: #0E4396; --tone-doux: #E3EEFD; }
.tone-violet { --tone: var(--violet); --tone-fonce: #55218C; --tone-doux: #F0E6FB; }
.tone-bois   { --tone: var(--bois);   --tone-fonce: #4A2E14; --tone-doux: var(--creme); }

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

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--encre);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-color: var(--fond);
    /* Confettis discrets */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(214, 36, 110, 0.10) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 60%, rgba(23, 96, 208, 0.10) 0 3px, transparent 4px),
        radial-gradient(circle at 45% 85%, rgba(245, 168, 0, 0.16) 0 3px, transparent 4px),
        radial-gradient(circle at 90% 15%, rgba(30, 138, 58, 0.10) 0 3px, transparent 4px);
    background-size: 140px 140px;
}

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

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

/* ===== Vitrine : bannière + sceau ===== */
.vitrine {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

.vitrine-banniere {
    border-radius: 0 0 36px 36px;
    overflow: hidden;
    aspect-ratio: 2000 / 744;
    background: var(--creme);
    box-shadow: 0 12px 30px rgba(92, 58, 26, 0.18);
}

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

.sceau {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 150px;
    height: 150px;
    transform: translate(-50%, 50%) rotate(-6deg);
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    box-shadow: 0 10px 24px rgba(92, 58, 26, 0.28);
    transition: transform 0.25s ease;
}

.sceau:hover { transform: translate(-50%, 50%) rotate(4deg) scale(1.04); }

.sceau img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ===== Intro ===== */
.intro {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 104px 24px 16px;
    text-align: center;
}

.intro-maj {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--secondaire);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.titre {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 800;
    line-height: 1.05;
    color: var(--bois-fonce);
}

.titre-ligne {
    display: block;
    font-size: 2.2rem;
}

.titre-fou {
    display: block;
    font-size: 4rem;
    margin-top: 4px;
    white-space: nowrap;
}

/* Lettres cernées de brun, comme le lettrage « JOUETS » du logo */
.lettre {
    display: inline-block;
    -webkit-text-stroke: 7px var(--encre);
    paint-order: stroke fill;
    text-shadow: 0 5px 0 var(--encre);
}

.lettre:nth-child(odd)  { transform: rotate(-4deg); }
.lettre:nth-child(even) { transform: rotate(3deg) translateY(-3px); }

.lettre-rouge  { color: #F2382E; }
.lettre-bleu   { color: #2B86F5; }
.lettre-vert   { color: #3DBB4F; }
.lettre-rose   { color: #F2408C; }
.lettre-orange { color: #FF8A1F; }
.lettre-violet { color: #9A4DE8; }

.espace { display: inline-block; width: 0.3em; }

/* Étiquettes façon coups de pinceau de la bannière */
.etiquettes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    margin-top: 26px;
}

.etiquette {
    background: var(--tone);
    color: #fff;
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 8px 22px 6px;
    clip-path: polygon(3% 8%, 98% 0, 100% 88%, 1% 100%);
}

.etiquette:nth-child(odd)  { transform: rotate(-2deg); }
.etiquette:nth-child(even) { transform: rotate(1.5deg); }

/* ===== Coffre : filtres + grille ===== */
.coffre {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}

.coffre-tete {
    text-align: center;
    margin-bottom: 20px;
}

.coffre-tete h2 {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--bois-fonce);
    line-height: 1.1;
}

.coffre-tete p {
    color: var(--secondaire);
    font-weight: 700;
    font-size: 1.02rem;
}

/* Briques de construction */
.briques {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 18px 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

.brique {
    position: relative;
    flex-shrink: 0;
    min-width: 96px;
    padding: 10px 16px 8px;
    border: none;
    border-radius: 10px;
    background: var(--tone);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    box-shadow: 0 7px 0 var(--tone-fonce);
    transform: translateY(0);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    margin-bottom: 7px;
}

/* Les deux plots de la brique */
.brique::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 18px;
    width: 22px;
    height: 10px;
    border-radius: 6px 6px 0 0;
    background: var(--tone);
    box-shadow: 38px 0 0 var(--tone);
}

.brique:hover { transform: translateY(-3px); box-shadow: 0 10px 0 var(--tone-fonce); }

.brique[aria-pressed="true"] {
    transform: translateY(6px);
    box-shadow: 0 1px 0 var(--tone-fonce), 0 0 0 3px var(--fond), 0 0 0 6px var(--tone);
}

.brique-gros {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
}

.brique-petit {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.9;
}

/* Grille des offres */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 34px 28px;
    margin-top: 30px;
}

.carte {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 26px;
    border: 3px solid var(--tone-doux);
    box-shadow: 0 10px 24px rgba(92, 58, 26, 0.10);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.carte:hover {
    transform: translateY(-5px) rotate(-0.6deg);
    box-shadow: 0 18px 34px rgba(92, 58, 26, 0.16);
}

.carte-sceau {
    position: absolute;
    top: -14px;
    left: -10px;
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tone);
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(92, 58, 26, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: rotate(-10deg);
}

.carte-sceau-gros {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
}

.carte-sceau-petit {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.carte-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    padding: 14px;
    background: var(--tone-doux);
    border-radius: 23px 23px 0 0;
    overflow: hidden;
}

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

.carte:hover .carte-image img { transform: scale(1.06) rotate(-2deg); }

.carte-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 22px;
}

.carte-titre {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

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

.carte-desc {
    font-size: 0.9rem;
    color: var(--secondaire);
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carte-cta {
    margin-top: auto;
    display: block;
    text-align: center;
    background: var(--tone);
    color: #fff;
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 9px 20px 7px;
    border-radius: 12px;
    box-shadow: 0 5px 0 var(--tone-fonce);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.carte-cta:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tone-fonce); }
.carte-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tone-fonce); }

/* ===== Chargement ===== */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--secondaire);
    font-size: 0.95rem;
    font-weight: 700;
}

/* ===== Pied de page : planches de bois ===== */
.planches {
    position: relative;
    color: rgba(255, 241, 214, 0.85);
    padding: 72px 24px 40px;
    text-align: center;
    background-color: var(--bois);
    background-image:
        repeating-linear-gradient(180deg, transparent 0 62px, rgba(0, 0, 0, 0.28) 62px 65px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, var(--bois-clair), var(--bois-fonce));
    border-top: 6px solid var(--anneau);
}

.planches-inner {
    max-width: 640px;
    margin: 0 auto;
}

.planches-logo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: -120px auto 16px;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.planches-devise {
    font-family: 'Baloo 2', 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFF1D6;
    line-height: 1.2;
    margin-bottom: 8px;
}

.planches-desc {
    font-size: 0.92rem;
    margin-bottom: 24px;
}

/* Étiquette crème clouée sur la planche */
.disclaimer {
    position: relative;
    background: var(--creme);
    color: var(--encre);
    font-size: 0.86rem;
    line-height: 1.65;
    padding: 18px 26px;
    border-radius: 6px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    transform: rotate(-0.8deg);
    margin-bottom: 22px;
}

.disclaimer::before,
.disclaimer::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #A89A8A;
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.3);
}

.disclaimer::before { left: 9px; }
.disclaimer::after  { right: 9px; }

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

/* ===== Mouvement réduit ===== */
@media (prefers-reduced-motion: reduce) {
    .sceau, .brique, .carte, .carte-image img, .carte-cta { transition: none; }
    .carte:hover, .carte:hover .carte-image img { transform: none; }
    .sceau:hover { transform: translate(-50%, 50%) rotate(-6deg); }
}

/* ===== Responsive ===== */
/* Sur grand écran la bannière porte déjà ces messages : étiquettes réservées au mobile */
@media (min-width: 769px) {
    .etiquettes { display: none; }
}

@media (max-width: 768px) {
    .vitrine { padding: 0; }
    .vitrine-banniere { border-radius: 0 0 24px 24px; }
    .sceau { width: 110px; height: 110px; }

    .intro { padding: 76px 16px 8px; }
    .titre-ligne { font-size: 1.6rem; }
    .titre-fou { font-size: 2.9rem; }
    .lettre { -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--encre); }

    .coffre { padding: 44px 16px 64px; }
    .coffre-tete h2 { font-size: 1.9rem; }
    .briques { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .sceau { width: 96px; height: 96px; }
    .intro { padding-top: 66px; }
    .titre-ligne { font-size: 1.35rem; }
    .titre-fou { font-size: 2.35rem; }
    .lettre { -webkit-text-stroke-width: 5px; text-shadow: 0 3px 0 var(--encre); }
    .etiquette { font-size: 0.85rem; padding: 7px 16px 5px; }
    .brique { min-width: 84px; padding: 9px 12px 7px; }
    .brique::before { left: 14px; box-shadow: 34px 0 0 var(--tone); }
    .brique-gros { font-size: 1.35rem; }
    .grille { gap: 30px; }
    .carte-image { height: 200px; }
}