/* ============================================================
   Les Trouvailles de Kiki — feuille de style principale
   Palette : rouge profond, bleu marine, or, crème, encre.
   ============================================================ */

:root {
    --red: #a4243b;
    --red-dark: #7c1a2c;
    --navy: #1f3a5f;
    --navy-dark: #142844;
    --gold: #c8a45c;
    --gold-light: #e0c997;
    --cream: #f7f1e3;
    --cream-dark: #ece3cc;
    --ink: #1c1c1c;
    --muted: #6a6a6a;
    --line: #e3dac3;
    --success: #2f6f4e;
    --warn: #b27a2a;
    --danger: #9b2b2b;

    --serif: "Cormorant Garamond", "Garamond", "Playfair Display", Georgia, serif;
    --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

    --radius: 4px;
    --shadow: 0 4px 18px rgba(20, 40, 68, 0.07);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--navy-dark);
    font-weight: 600;
    margin: 0 0 .6em;
    letter-spacing: .01em;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ============== Top bar & header ============== */
.topbar {
    background: var(--navy-dark);
    color: var(--cream);
    font-size: .82rem;
    padding: 8px 0;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.topbar .gold { color: var(--gold-light); }

.site-header {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Marges latérales du .container conservées : sans elles, logo et panier touchaient les bords de l'écran */
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 20px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand img { width: 60px; height: 60px; border-radius: 50%; box-shadow: var(--shadow); }
.brand-text {
    display: flex; flex-direction: column;
}
.brand-text .title {
    font-family: var(--serif);
    color: var(--red);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
}
.brand-text .kanji {
    font-size: .8rem;
    color: var(--navy);
    letter-spacing: .3em;
    margin-top: 4px;
}

/* Une seule ligne : un intitulé ne se coupe jamais en deux (sous 1 240 px, le menu passe derrière le bouton Menu) */
.main-nav { display: flex; gap: 16px; flex: 1; justify-content: center; }
.main-nav > a, .main-nav .nav-item > a {
    color: var(--navy-dark);
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    padding: 8px 0;
}
.main-nav a:hover { color: var(--red); }
.main-nav > a.active::after, .main-nav .nav-item > a.active::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--gold);
}

/* Menu déroulant « Boutique » : le lien ouvre la boutique, la flèche (ou le survol) déroule les catégories ;
   les sous-catégories sont en retrait sous leur catégorie */
.nav-item { position: relative; display: flex; align-items: center; }
.sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy-dark); cursor: pointer; }
.sub-toggle:hover { color: var(--red); }
.sub-toggle .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nav-item.sub-open > .sub-toggle .icon { transform: rotate(180deg); }
.sub-menu { list-style: none; margin: 0; padding: 0; }
.sub-menu ul { list-style: none; margin: 0; padding: 0; }
.sub-menu a { display: block; color: var(--navy-dark); text-decoration: none; }
.sub-menu a:hover { color: var(--red); text-decoration: none; }
/* Instagram dans la liste du menu : seulement sur téléphone, l'en-tête a son icône sinon */
.nav-instagram { display: none; }
.nav-instagram .icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1240px) {
    .sub-menu {
        display: none;
        position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
        min-width: 230px; padding: 10px 0;
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: 0 14px 28px rgba(20, 40, 68, .14);
        z-index: 60;
    }
    /* Bande invisible entre le lien et le panneau : le survol ne se perd pas en descendant la souris */
    .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
    .nav-item:hover > .sub-menu, .nav-item.sub-open > .sub-menu, .nav-item:focus-within > .sub-menu { display: block; }
    .sub-menu a { padding: 8px 20px; font-size: .9rem; white-space: nowrap; }
    .sub-menu > li > a { font-weight: 600; }
    .sub-menu > li:first-child > a { font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 10px; }
    .sub-menu ul a { padding: 6px 20px 6px 34px; font-weight: 400; color: var(--navy); }
    .sub-menu ul a::before { content: "– "; color: var(--gold); }
}

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-actions a {
    color: var(--navy-dark);
    font-size: .9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.header-actions a:hover { color: var(--red); }
.cart-pill {
    background: var(--red);
    color: var(--cream);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
}
.cart-pill:hover { background: var(--red-dark); color: var(--cream); text-decoration: none; }
.header-actions .icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Texte clair sur le rouge, survol compris (la couleur des liens de l'en-tête l'emportait : texte sombre, puis rouge sur rouge) */
.header-actions .cart-pill, .header-actions .cart-pill:hover { color: var(--cream); }
/* Nom d'un client connecté : coupé s'il est long, pour que la barre tienne sur une ligne */
.account-link .label { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cart-badge { display: none; }
.instagram-link { color: var(--navy-dark); }
/* Six entrées de menu (avec « Artisans ») : Instagram en icône seule pour que la barre tienne dans les 1 192 px du site ;
   son nom reste lu par les lecteurs d'écran et affiché au survol (title) */
.header-actions .instagram-link .label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold-light) !important; font-size: .9rem; }
.footer-social:hover { color: var(--cream) !important; }
.footer-social .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy-dark); cursor: pointer; }
.menu-toggle:hover { color: var(--red); }
.menu-toggle .icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle .icon-close, .nav-open .menu-toggle .icon-open { display: none; }
.nav-open .menu-toggle .icon-close { display: block; }

/* ============== Buttons & forms ============== */
.btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--red); color: var(--cream); }
.btn-primary:hover { background: var(--red-dark); color: var(--cream); text-decoration: none; }
.btn-dark { background: var(--navy-dark); color: var(--cream); }
.btn-dark:hover { background: var(--navy); color: var(--cream); text-decoration: none; }
.btn-outline {
    background: transparent;
    border: 1px solid var(--navy-dark);
    color: var(--navy-dark);
}
.btn-outline:hover { background: var(--navy-dark); color: var(--cream); text-decoration: none; }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold-light); text-decoration: none; }
.btn-sm { padding: 8px 14px; font-size: .82rem; }
.btn-block { width: 100%; }

form label { display: block; font-size: .85rem; color: var(--navy-dark); margin-bottom: 6px; font-weight: 600; letter-spacing: .04em; }
form input[type=text], form input[type=email], form input[type=password], form input[type=number], form input[type=tel], form input[type=date], form input[type=datetime-local], form input[type=url], form input:not([type]), form select, form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    transition: border .15s, box-shadow .15s;
}
form input:focus, form select:focus, form textarea:focus {
    outline: 0;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 164, 92, .2);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.field-validation-error { color: var(--danger); font-size: .82rem; display: block; margin-top: 4px; }
.validation-summary-errors { background: #fdecec; border: 1px solid #f3c2c2; color: var(--danger); padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
/* Résumé de validation sans erreur : rien à afficher (il gardait la bordure rose) */
.validation-summary-valid { display: none; }
form input:disabled { background: var(--cream-dark); color: var(--muted); cursor: not-allowed; }
.form-group small { display: block; margin-top: 4px; line-height: 1.4; }

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: .95rem;
}
.alert-success { background: #e8f5ee; border: 1px solid #c2e0cf; color: var(--success); }
.alert-danger { background: #fdecec; border: 1px solid #f3c2c2; color: var(--danger); }
.alert-info { background: #eef3fa; border: 1px solid #c9d8ec; color: var(--navy-dark); }

/* ============== Hero ============== */
.hero {
    position: relative;
    min-height: 540px;
    color: var(--cream);
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(rgba(20, 40, 68, .55), rgba(20, 40, 68, .35)), url("/images/acceuil.jpg") center/cover no-repeat;
    z-index: 0;
}
.hero-inner {
    position: relative; z-index: 1;
    max-width: 720px;
    padding: 64px 24px;
}
.hero .eyebrow {
    color: var(--gold-light);
    letter-spacing: .3em;
    text-transform: uppercase;
    font-size: .85rem;
    margin-bottom: 14px;
}
.hero h1 {
    color: var(--cream);
    font-size: 3.4rem;
    line-height: 1.1;
    margin-bottom: 18px;
}
.hero p {
    font-size: 1.15rem;
    max-width: 540px;
    margin-bottom: 28px;
    color: var(--cream);
}
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============== Sections ============== */
section { padding: 72px 0; }

/* Annonce de la vendeuse : encadré sur l'accueil, entre la bannière et « Nos univers » ; bandeau sur les autres pages */
.announcement-section { padding: 40px 0 0; }
.announcement {
    background: #fff;
    border: 1px solid var(--gold);
    border-left: 6px solid var(--red);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px;
    text-align: center;
}
.announcement .section-eyebrow { margin-bottom: 6px; }
.announcement h2 { font-size: 1.7rem; margin-bottom: 10px; }
.announcement p { margin: 0 auto 14px; max-width: 760px; white-space: pre-line; color: var(--ink); }
.announcement .btn { margin-top: 4px; }
.announcement-bar {
    background: var(--gold-light);
    color: var(--navy-dark);
    border-bottom: 1px solid var(--gold);
    font-size: .92rem;
    padding: 10px 0;
    text-align: center;
}
.announcement-bar strong { margin-right: 8px; }
.announcement-bar a { margin-left: 10px; color: var(--red); text-decoration: underline; white-space: nowrap; }
@media (max-width: 600px) {
    .announcement-bar { font-size: .85rem; padding: 8px 0; }
    .announcement { padding: 22px 18px; }
    .announcement h2 { font-size: 1.4rem; }
}
.section-title { text-align: center; margin-bottom: 14px; }
.section-eyebrow {
    text-align: center;
    color: var(--red);
    letter-spacing: .3em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: 8px;
}
.section-intro {
    text-align: center;
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto 48px;
}

/* ============== Category grid ============== */
.categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.cat-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3/4;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--cream);
    display: block;
}
.cat-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20, 40, 68, .85) 0%, rgba(20, 40, 68, .15) 60%);
}
.cat-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.cat-card:hover img { transform: scale(1.05); }
.cat-card .label {
    position: absolute;
    left: 18px; right: 18px; bottom: 18px;
    z-index: 1;
    color: var(--cream);
}
.cat-card .label .name {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
}
.cat-card .label .arrow { color: var(--gold-light); font-size: .85rem; letter-spacing: .2em; }
.cat-card:hover { text-decoration: none; color: var(--cream); }

/* ============== Product grid ============== */
.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}
.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.product-card a.media {
    display: block;
    aspect-ratio: 1/1;
    background: var(--cream-dark);
    overflow: hidden;
}
.product-card a.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card:hover a.media img { transform: scale(1.04); }
.product-card .info { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .cat { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .15em; }
.product-card .name { font-family: var(--serif); font-size: 1.15rem; color: var(--navy-dark); text-decoration: none; }
.product-card .name:hover { color: var(--red); text-decoration: none; }
.product-card .price { color: var(--red); font-weight: 700; font-size: 1.15rem; margin-top: 4px; }
.product-card .price .old { color: var(--muted); font-weight: 400; text-decoration: line-through; margin-left: 6px; font-size: .9rem; }
.product-card .actions { margin-top: auto; padding-top: 12px; }
.badge {
    display: inline-block;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: .7rem;
    padding: 3px 10px;
    border-radius: 99px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ============== Product detail ============== */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 48px 0; }
.product-detail .gallery {
    background: var(--cream-dark);
    border-radius: var(--radius);
    aspect-ratio: 1/1;
    overflow: hidden;
}
.product-detail .gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-detail h1 { font-size: 2.2rem; margin-bottom: 6px; }
.product-detail .cat { color: var(--muted); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; margin-bottom: 16px; }
.product-detail .price-block { font-size: 1.8rem; color: var(--red); font-weight: 700; margin: 16px 0; }
.product-detail .price-block .old { color: var(--muted); text-decoration: line-through; font-size: 1.1rem; margin-left: 12px; font-weight: 400; }
.product-detail .meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 24px 0; font-size: .9rem; color: var(--navy-dark); }
.product-detail .meta dt { font-weight: 700; }
.product-detail .add-form { display: flex; gap: 12px; align-items: end; margin: 24px 0; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -8px 0 8px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy-dark); font: inherit; font-size: .85rem; cursor: pointer; }
.share-btn:hover { border-color: var(--navy-dark); color: var(--red); }
/* « Partager » reste masqué tant que le navigateur n'a pas de feuille de partage (attribut hidden posé dans la page) */
.share-btn[hidden] { display: none; }
.share-btn .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-feedback { flex-basis: 100%; font-size: .85rem; color: var(--success); min-height: 1.2em; }
.share-feedback.error { color: var(--danger); }
.product-detail .add-form .qty { width: 90px; }
.product-detail .stock-ok { color: var(--success); font-size: .9rem; }
.product-detail .stock-low { color: var(--warn); font-size: .9rem; }
.product-detail .stock-out { color: var(--danger); font-size: .9rem; font-weight: 700; }

.product-detail .stock-preorder { color: var(--navy); font-size: .9rem; font-weight: 700; }
.preorder-tag {
    display: inline-block;
    background: var(--navy-dark);
    color: var(--cream);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 4px;
}

/* ============== Carrousel fiche produit ============== */
.product-media { min-width: 0; }
.carousel { position: relative; }
.carousel-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.carousel-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(247, 241, 227, .92);
    color: var(--navy-dark);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.carousel-btn:hover { background: var(--cream); }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.carousel-thumbs button {
    flex: 0 0 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cream-dark);
    cursor: pointer;
    opacity: .7;
}
.carousel-thumbs button.active, .carousel-thumbs button:hover { border-color: var(--gold); opacity: 1; }
.carousel-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============== Cart ============== */
.cart-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.cart-table th, .cart-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table th { background: var(--cream-dark); font-weight: 600; color: var(--navy-dark); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; }
.cart-table td.right, .cart-table th.right { text-align: right; }
.cart-table img.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }
.cart-table .qty-input { width: 70px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; text-align: center; }
.cart-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; }
.cart-summary .row.total { font-size: 1.3rem; font-weight: 700; color: var(--red); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; }
.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }

.empty-state {
    text-align: center;
    padding: 80px 24px;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}
.empty-state h2 { color: var(--navy-dark); }

/* ============== Order tracking / timeline ============== */
.order-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 24px;
}
.order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.order-meta .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; }
.order-meta .value { font-weight: 600; color: var(--navy-dark); }

.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.status-EnAttente { background: #f3eccf; color: #7c6314; }
.status-Confirmee { background: #d6e6f7; color: var(--navy-dark); }
.status-EnPreparation { background: #f0e3c4; color: #815a14; }
.status-Expediee { background: #c8e0d2; color: var(--success); }
.status-Livree { background: var(--success); color: var(--cream); }
.status-Annulee { background: #f0c8c8; color: var(--danger); }
.status-Remboursee { background: #e2dcef; color: #4b3a78; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
    position: relative;
    padding: 0 0 22px 28px;
    border-left: 2px solid var(--line);
    margin-left: 8px;
}
.timeline li::before {
    content: "";
    position: absolute; left: -7px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--cream);
}
.timeline li.done::before { background: var(--red); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline .when { color: var(--muted); font-size: .82rem; }
.timeline .title { font-weight: 600; color: var(--navy-dark); }

/* ============== Tables (admin) ============== */
/* minmax(0, …) : un tableau large défile dans sa colonne au lieu d'élargir toute la page */
.admin-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar {
    background: var(--navy-dark);
    color: var(--cream);
    padding: 24px 0;
}
.admin-sidebar .logo { display: flex; align-items: center; gap: 12px; padding: 0 24px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-sidebar .logo img { width: 44px; height: 44px; border-radius: 50%; }
.admin-sidebar .logo .label { font-family: var(--serif); font-size: 1.15rem; color: var(--gold-light); }
.admin-sidebar nav { display: flex; flex-direction: column; padding-top: 16px; }
.admin-sidebar nav a {
    color: var(--cream);
    padding: 12px 24px;
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.admin-sidebar nav a:hover { background: rgba(255,255,255,.05); }
.admin-sidebar nav a.active { background: rgba(255,255,255,.08); border-left-color: var(--gold); color: var(--gold-light); }
.admin-sidebar .footer { padding: 24px; font-size: .78rem; color: rgba(255,255,255,.5); }

.admin-main { background: var(--cream); padding: 32px 40px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-header h1 { margin: 0; font-size: 1.7rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 32px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.stat-card .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; }
.stat-card .value { font-family: var(--serif); font-size: 2.2rem; color: var(--navy-dark); margin-top: 6px; }
.stat-card .delta { color: var(--gold); font-size: .82rem; }

.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }
.data-table th { background: var(--cream-dark); font-weight: 600; color: var(--navy-dark); text-transform: uppercase; font-size: .74rem; letter-spacing: .12em; }
.data-table tr:hover td { background: #fafafa; }
.data-table td.right, .data-table th.right { text-align: right; }
.data-table .actions a { margin-right: 10px; font-size: .85rem; }
.data-table img.thumb { width: 42px; min-width: 42px; height: 42px; object-fit: cover; border-radius: 3px; }
/* Tableau à côté d'un formulaire (colonne étroite) : cellules resserrées */
.data-table.compact th, .data-table.compact td { padding: 10px 10px; }

/* ============== Footer ============== */
.site-footer {
    background: var(--navy-dark);
    color: var(--cream);
    padding: 56px 0 24px;
    margin-top: 80px;
}
.site-footer .grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.site-footer h4 { color: var(--gold-light); font-size: 1rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 18px; }
.site-footer p, .site-footer li { color: rgba(255,255,255,.7); font-size: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 4px 0; }
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.site-footer .copyright {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 20px;
    text-align: center;
    font-size: .82rem;
    color: rgba(255,255,255,.5);
}

/* ============== Contact ============== */
/* Formulaire large, coordonnées en colonne étroite ; sur téléphone, les coordonnées passent sous le formulaire, en petit */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; margin-top: 32px; align-items: start; }
.contact-aside { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.contact-aside h3 { font-size: 1.2rem; }
.contact-aside p { margin: 0 0 10px; font-size: .95rem; }
.contact-kanji { font-family: var(--serif); color: var(--gold); font-size: 1.4rem; letter-spacing: .3em; margin-top: 16px !important; }
@media (max-width: 760px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .contact-aside { padding: 16px 18px; font-size: .9rem; }
    .contact-aside h3 { font-size: 1.05rem; margin-bottom: 8px; }
    .contact-aside p { font-size: .88rem; margin-bottom: 6px; }
    .contact-kanji { font-size: 1.1rem; margin-top: 8px !important; }
}

/* ============== Pages légales (mentions, CGV, confidentialité) ============== */
.legal h2 { font-size: 1.35rem; margin-top: 36px; }
.legal h3 { font-size: 1.1rem; }
.legal p, .legal li { line-height: 1.65; }
.legal table { width: 100%; border-collapse: collapse; background: #fff; margin: 12px 0; font-size: .88rem; }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--cream-dark); font-weight: 600; }
.legal-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 16px 0; font-size: .9rem; }
.legal-box p { margin: 0 0 8px; }

/* ============== Auth (login / register) ============== */
.auth-shell { max-width: 460px; margin: 60px auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
.auth-shell h1 { text-align: center; }
.auth-shell .helper { text-align: center; color: var(--muted); margin-bottom: 28px; }
.auth-shell .switch { text-align: center; margin-top: 18px; font-size: .92rem; color: var(--muted); }

/* ============== Misc ============== */
.divider-orn {
    text-align: center;
    margin: 24px 0;
    color: var(--gold);
    letter-spacing: .8em;
    font-size: 1.2rem;
}
.text-muted { color: var(--muted); }
.text-red { color: var(--red); }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ============== Admin : photos produit ============== */
.admin-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.admin-photo { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.admin-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.admin-photo-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: .8rem; }
.admin-photo-bar button { background: none; border: 0; cursor: pointer; font-size: .95rem; padding: 2px 4px; color: var(--navy-dark); }

/* ============== Responsive ============== */
@media (max-width: 960px) {
    .hero h1 { font-size: 2.4rem; }
    .product-detail { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .site-footer .grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .container { padding: 0 16px; }
    .hero-inner { padding: 40px 16px; }
    .hero h1 { font-size: 1.9rem; }
    h1 { font-size: 1.7rem; }
    .site-footer .grid { grid-template-columns: 1fr; }
}

/* Admin > Produits > Organiser l'affichage : vignettes à glisser */
.sort-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.sort-tabs a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--navy-dark); background: #fff; text-decoration: none; }
.sort-tabs a.active { background: var(--navy-dark); border-color: var(--navy-dark); color: var(--cream); }
.sort-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.sort-spacer { flex: 1; }
.sort-dirty { color: var(--warn); font-size: .85rem; font-weight: 600; }
.sort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sort-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; user-select: none; }
.sort-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.sort-item.inactive { opacity: .55; }
.sort-item.dragging { box-shadow: 0 12px 30px rgba(20, 40, 68, .28); }
.sort-name { margin-top: 6px; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.sort-meta { font-size: .75rem; color: var(--muted); }
.sort-flags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.sort-flags span { font-size: .68rem; background: var(--cream-dark); color: var(--navy-dark); border-radius: 3px; padding: 1px 6px; }
.sort-handle { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); font-size: 1.1rem; line-height: 1; cursor: grab; touch-action: none; }
.sort-item.dragging .sort-handle { cursor: grabbing; }
.sort-pos { position: absolute; top: 14px; right: 14px; min-width: 22px; text-align: center; background: var(--navy-dark); color: var(--cream); font-size: .7rem; border-radius: 10px; padding: 2px 7px; }
.sort-arrows { display: flex; justify-content: space-between; margin-top: 6px; }
.sort-arrows button { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 2px 12px; cursor: pointer; }
.sort-placeholder { border: 2px dashed var(--gold); border-radius: var(--radius); background: rgba(200, 164, 92, .08); }

/* Boutique : tri choisi par le client */
.shop-sort { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.shop-sort label { display: inline; margin: 0; font-size: .85rem; font-weight: 400; color: var(--muted); }
form.shop-sort select { width: auto; min-width: 210px; padding: 8px 12px; font-size: .9rem; cursor: pointer; }
@media (max-width: 600px) {
    form.shop-sort select { flex: 1; min-width: 0; }
}

/* Boutique : filtres du client (panneau à gauche, étiquettes des filtres actifs au-dessus des produits) */
.shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; margin-top: 28px; align-items: start; }
.filters-toggle { display: none; }
.filters-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px 18px; }
.filters-title { font-size: 1.35rem; margin: 14px 0 6px; }
.facet { border-top: 1px solid var(--line); padding: 8px 0; }
.facet > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-weight: 700; color: var(--navy-dark); }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform .15s; }
.facet:not([open]) > summary::after { transform: rotate(45deg); }
.facet-heading { display: block; margin: 8px 0; font-weight: 700; color: var(--navy-dark); font-size: .95rem; letter-spacing: 0; }
form .facet-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 0; font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.facet-option input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--navy-dark); cursor: pointer; }
.facet-count { color: var(--muted); font-size: .85em; }
.swatch { display: inline-block; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); vertical-align: -3px; }
.facet-link { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .9rem; color: var(--ink); text-decoration: none; }
.facet-link:hover { color: var(--red); text-decoration: none; }
.facet-link.current { font-weight: 700; color: var(--red); }
.facet-chevron { color: var(--muted); font-size: 1.1rem; }
.facet-more > summary { list-style: none; cursor: pointer; padding: 4px 0; font-size: .85rem; color: var(--navy); text-decoration: underline; }
.facet-more > summary::-webkit-details-marker { display: none; }
.facet-more[open] > summary .more, .facet-more:not([open]) > summary .less { display: none; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.catalog-count { margin: 0; color: var(--muted); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.filter-chip { padding: 4px 12px; border-radius: 999px; background: var(--cream-dark); color: var(--navy-dark); font-size: .85rem; text-decoration: none; }
.filter-chip:hover { background: var(--line); text-decoration: none; }
.filter-clear { font-size: .85rem; }
@media (max-width: 860px) {
    .shop-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .filters-toggle { display: inline-flex; justify-self: start; }
    .js .filters-panel { display: none; }
    .js .filters-panel.open { display: block; }
}

/* Admin : couleurs d'un produit, cochées sur sa fiche */
.color-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
form .color-choice { display: inline-flex; align-items: center; margin: 0; font-size: .88rem; font-weight: 400; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.color-choice input { margin-right: 6px; }

/* Sous 1 240 px, la barre de navigation ne tient plus sur une ligne à côté du logo et du panier :
   elle se replie derrière le bouton Menu et s'ouvre sous l'en-tête */
@media (max-width: 1239.98px) {
    .site-header .menu-toggle { display: inline-flex; }
    .js .main-nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0;
        padding: 4px 0 10px;
        background: var(--cream);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 24px rgba(20, 40, 68, .1);
    }
    .js .site-header.nav-open .main-nav { display: flex; }
    .js .main-nav > a, .js .main-nav .nav-item > a { padding: 14px 24px; }
    .js .main-nav > * + * { border-top: 1px solid var(--line); }
    .js .main-nav a.active { color: var(--red); }
    .js .main-nav a.active::after { display: none; }
    /* Boutique : le lien prend la ligne, la flèche à droite déroule les catégories en accordéon */
    .js .nav-item { flex-wrap: wrap; align-items: stretch; }
    .js .nav-item > a { flex: 1; }
    .js .sub-toggle { width: 52px; height: auto; margin: 0; border-radius: 0; border-left: 1px solid var(--line); }
    .js .sub-toggle .icon { width: 20px; height: 20px; }
    .js .sub-menu { display: none; flex-basis: 100%; background: #fff; border-top: 1px solid var(--line); padding: 6px 0; }
    .js .nav-item.sub-open > .sub-menu { display: block; }
    .js .sub-menu a { padding: 11px 24px 11px 40px; font-size: .9rem; text-transform: none; letter-spacing: .02em; }
    .js .sub-menu > li > a { font-weight: 600; }
    .js .sub-menu ul a { padding-left: 58px; font-weight: 400; color: var(--navy); }
    .js .sub-menu ul a::before { content: "– "; color: var(--gold); }
    .nav-instagram { display: block; }
    /* Sans JavaScript, pas de bouton : les liens restent visibles, sur une ligne à part sous le logo */
    html:not(.js) .site-header .menu-toggle { display: none; }
    html:not(.js) .header-inner { flex-wrap: wrap; }
    html:not(.js) .main-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
    html:not(.js) .sub-toggle, html:not(.js) .sub-menu { display: none; }
}

/* Téléphone : Connexion et Panier deviennent des icônes ; leur texte reste lu par les lecteurs d'écran */
@media (max-width: 760px) {
    .header-inner { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
    .brand { gap: 10px; min-width: 0; }
    .brand img { width: 46px; height: 46px; }
    .brand-text { min-width: 0; }
    .brand-text .title { font-size: 1.15rem; }
    .brand-text .kanji { font-size: .72rem; letter-spacing: .25em; }
    .js .main-nav > a, .js .main-nav .nav-item > a { padding: 14px 16px; }
    .js .sub-menu a { padding-left: 32px; }
    .js .sub-menu ul a { padding-left: 50px; }
    /* Quatre icônes ne tiennent pas à côté du logo : Instagram est dans le menu replié */
    .header-actions .instagram-link { display: none; }
    .header-actions { gap: 4px; flex-shrink: 0; }
    .header-actions a { position: relative; width: 44px; height: 44px; justify-content: center; border-radius: 50%; }
    .header-actions .icon { width: 24px; height: 24px; }
    .header-actions .label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .cart-pill { padding: 0; }
    .cart-badge {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: -3px; right: -3px;
        min-width: 20px; height: 20px; padding: 0 5px;
        border-radius: 10px; border: 2px solid var(--cream);
        background: var(--navy-dark); color: var(--cream);
        font-size: .7rem; font-weight: 700; line-height: 1;
    }
}
/* Petits téléphones (360 px) : logo, nom et trois boutons doivent tenir sur une ligne */
@media (max-width: 400px) {
    .header-inner { gap: 8px; }
    .brand { gap: 8px; }
    .brand img { width: 40px; height: 40px; }
    .brand-text .title { font-size: 1rem; }
    .brand-text .kanji { font-size: .68rem; letter-spacing: .2em; }
    .header-actions { gap: 2px; }
    .header-actions a, .menu-toggle { width: 40px; height: 40px; }
}

/* Panier : sur téléphone, chaque article devient une carte (photo, nom, prix, quantité, total) au lieu d'un tableau
   plus large que l'écran */
.cart-table td.cart-thumb { width: 80px; }
.cart-label { display: none; }
.cart-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody { display: block; }
    .cart-table tr {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas: "thumb name remove" "thumb unit unit" "thumb qty total";
        gap: 6px 12px;
        padding: 14px;
        border-bottom: 1px solid var(--line);
    }
    .cart-table tr:last-child { border-bottom: 0; }
    .cart-table td { display: block; padding: 0; border: 0; }
    .cart-table td.cart-thumb { grid-area: thumb; width: auto; }
    .cart-table td.cart-name { grid-area: name; align-self: center; }
    .cart-table td.cart-unit { grid-area: unit; text-align: left; color: var(--muted); font-size: .85rem; }
    .cart-table td.cart-qty { grid-area: qty; }
    .cart-table td.cart-total { grid-area: total; align-self: center; }
    .cart-table td.cart-remove { grid-area: remove; }
    .cart-label { display: inline; }
}

/* Accueil, « Notre démarche » : photo et texte côte à côte, la photo au-dessus du texte sur téléphone */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-media { margin: 0; }
.split-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.split-media figcaption { display: none; }
@media (max-width: 860px) {
    .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* Photo étroite : la mention incrustée dans l'image devient illisible, elle est répétée dessous */
@media (max-width: 600px) {
    .split-media figcaption { display: block; margin-top: 8px; font-size: .78rem; font-style: italic; color: var(--muted); text-align: right; }
}

/* Catégorie qui a des sous-catégories : sous-menu au-dessus des produits (Tout, Tasses, Assiettes, Bols) */
.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.subcat { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy-dark); font-size: .9rem; text-decoration: none; }
.subcat:hover { border-color: var(--navy-dark); color: var(--navy-dark); text-decoration: none; }
.subcat.current { background: var(--navy-dark); border-color: var(--navy-dark); color: var(--cream); }
.subcat.current .facet-count { color: rgba(255, 255, 255, .75); }
/* Panneau des filtres : sous-catégories en retrait sous leur catégorie */
.facet-link.facet-sub { margin-left: 4px; padding-left: 12px; border-left: 2px solid var(--line); font-size: .86rem; }
.facet-link.facet-sub.current { border-left-color: var(--red); }

/* Fiche produit : retour à la liste de sa catégorie */
.product-back { padding-top: 28px; }
.product-back + .product-detail { padding-top: 20px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy-dark); font-size: .9rem; }
.back-link span { font-size: 1.25rem; line-height: 1; }
.back-link:hover { border-color: var(--navy-dark); color: var(--navy-dark); text-decoration: none; }

/* CGV : adresse de retour, à recopier sur le colis */
.legal-address { display: inline-block; margin: 0 0 12px; padding: 12px 18px; font-style: normal; line-height: 1.5; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
/* ============== Admin sur téléphone et tablette ============== */
.admin-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.admin-cols.even { grid-template-columns: 1fr 1fr; }
.admin-cols > * { min-width: 0; }
.admin-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-topbar .menu-toggle { color: var(--cream); }
.admin-topbar .menu-toggle:hover { color: var(--gold-light); }

/* Un champ d'envoi de fichier ne dépasse plus de sa colonne */
input[type=file] { max-width: 100%; }

/* Jusqu'à 1 100 px (téléphone, tablette même à l'horizontale) : la colonne de gauche devient une barre en haut de l'écran,
   le menu s'ouvre par le bouton, les deux colonnes d'une page passent l'une sous l'autre */
@media (max-width: 1100px) {
    .admin-shell { grid-template-columns: minmax(0, 1fr); }
    .admin-main { padding: 20px; }
    .admin-sidebar { position: sticky; top: 0; z-index: 40; padding: 0; }
    .admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 16px; }
    .admin-sidebar .logo { padding: 0; border-bottom: 0; }
    .admin-sidebar .logo img { width: 36px; height: 36px; }
    .admin-topbar .menu-toggle { display: inline-flex; }
    .js .admin-menu { display: none; }
    .js .admin-sidebar.nav-open .admin-menu { display: block; max-height: calc(100vh - 56px); overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, .1); }
    .admin-sidebar nav { padding-top: 4px; }
    .admin-sidebar nav a { padding: 13px 20px; }
    .admin-sidebar .footer { padding: 14px 20px 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
    /* Sans JavaScript, pas de bouton : les liens restent affichés, les uns à côté des autres */
    html:not(.js) .admin-topbar .menu-toggle { display: none; }
    html:not(.js) .admin-sidebar nav { flex-direction: row; flex-wrap: wrap; }
    .admin-cols, .admin-cols.even { grid-template-columns: minmax(0, 1fr); }
}

/* Ordinateur : une adresse email longue se coupe plutôt que d'élargir le tableau ; s'il reste trop large,
   il défile dans son cadre (enveloppe posée par admin-tables.js) au lieu d'élargir la page */
.admin-main .data-table td { overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }

/* Téléphone : marges resserrées */
@media (max-width: 760px) {
    .admin-main { padding: 16px 12px 32px; }
    .admin-header { flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 14px; }
    .admin-header h1 { font-size: 1.4rem; }
    .admin-filters { width: 100%; }
    .admin-filters select, .admin-filters input { flex: 1 1 140px; min-width: 0; }
    .admin-main .flex-between { flex-wrap: wrap; gap: 8px; }
    .admin-main .order-card { padding: 18px 14px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 1.5rem; }
}

/* Téléphone et tablette : chaque ligne d'un tableau devient une carte « titre de colonne : valeur »
   (titres posés par admin-tables.js) */
@media (max-width: 1100px) {
    .admin-main .data-table, .admin-main .data-table tbody, .admin-main .data-table tfoot { display: block; width: 100%; }
    .admin-main .data-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .admin-main .data-table thead { display: none; }
    .admin-main .data-table tbody tr { display: block; margin-bottom: 10px; padding: 4px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
    .admin-main .data-table tbody td { display: block; position: relative; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
    .admin-main .data-table tbody td:last-child { border-bottom: 0; }
    .admin-main .data-table tbody td[data-label] { min-height: 36px; padding-left: 38%; }
    .admin-main .data-table tbody td[data-label]::before {
        content: attr(data-label);
        position: absolute; left: 0; top: 10px; width: 35%;
        color: var(--muted); font-size: .7rem; font-weight: 600; line-height: 1.3;
        text-transform: uppercase; letter-spacing: .08em;
    }
    .admin-main .data-table tr:hover td { background: none; }
    /* Totaux d'une commande : libellé à gauche, montant à droite */
    .admin-main .data-table tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
    .admin-main .data-table tfoot td { padding: 4px 0; border: 0; }
    /* Tableau déjà dans un cadre (détail d'une commande) : des lignes séparées plutôt que des cartes dans la carte */
    .admin-main .order-card .data-table tbody tr { margin: 0; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
}
/* Connexion (admin et comptes clients) : le cadre ne colle plus aux bords d'un téléphone */
@media (max-width: 600px) {
    .auth-shell { width: calc(100% - 24px); margin: 24px auto; padding: 28px 20px; }
}
/* Admin > Catégories : sous-catégorie en retrait sous sa catégorie principale (sur téléphone, la carte a déjà son titre) */
.data-table td.cat-child { padding-left: 28px; }
/* Admin > Référencement : liste de contrôle du site */
.char-counter { display: block; margin-top: 4px; font-size: .78rem; }
.seo-check { list-style: none; padding: 0; margin: 0; }
.seo-check li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.seo-check li:first-child { border-top: 0; }
.seo-check .mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; }
.seo-check .ok .mark { background: var(--success); }
.seo-check .todo .mark { background: var(--warn); }
.seo-check .ko .mark { background: var(--danger); }
.seo-check small { display: block; color: var(--muted); margin-top: 2px; }
.seo-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.seo-mark.ok { background: var(--success); } .seo-mark.todo { background: var(--warn); } .seo-mark.ko { background: var(--danger); }

/* Admin > Vente sur place : lignes d'articles, dans le style des formulaires (pas un tableau) */
.sale-line { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px; gap: 10px; align-items: center; padding: 6px 0; }
.sale-line select, .sale-line input { margin: 0; }
.sale-line [data-line-total] { font-weight: 600; color: var(--navy-dark); }
.sale-line.sale-line-empty [data-line-total] { color: var(--muted); font-weight: 400; }
.sale-line-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-bottom: 2px; }
.sale-line-foot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-weight: 700; }
.sale-line-foot [data-sale-total] { color: var(--red); font-size: 1.1rem; }
@media (max-width: 600px) {
    .sale-line { grid-template-columns: minmax(0, 1fr) 70px 80px; gap: 6px; }
    .sale-line-head { display: none; }
}
form .plain-choice { display: block; margin: 4px 0 0; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .92rem; }

/* Artisans : lien sous le nom d'une pièce, section « Du même artisan », pages des artisans */
.product-card .artisan-link { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); font-style: italic; text-decoration: none; }
.product-card .artisan-link:hover { color: var(--red); text-decoration: underline; }
.same-artisan { background: var(--cream); border-top: 1px solid var(--line); }
/* Déjà dit par le titre de la section ou de la page : pas de « par … » sous chaque pièce */
.same-artisan .artisan-link, .artisan-products .artisan-link { display: none; }
.sub-menu .sub-count { color: var(--muted); font-size: .85em; font-weight: 400; }
.artisan-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; }
.artisan-hero img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
/* Sans photo, la présentation prend toute la largeur */
.artisan-hero.no-photo { grid-template-columns: minmax(0, 1fr); }
.artisan-hero .region { color: var(--muted); letter-spacing: .08em; margin: -4px 0 14px; }
.artisan-hero .bio { max-width: 720px; }
.artisan-hero .bio p { margin: 0 0 12px; }
.artisan-hero .bio ul { margin: 0 0 12px; padding-left: 22px; }
.artisan-hero .bio u { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Admin : boutons de mise en forme au-dessus d'un texte (gras, souligné, italique, liste) */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.md-toolbar button { min-width: 36px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--navy-dark); font: inherit; font-size: .9rem; cursor: pointer; }
.md-toolbar button:hover { border-color: var(--navy-dark); color: var(--red); }
.md-preview { margin-top: 8px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; font-size: .92rem; }
.md-preview p { margin: 0 0 8px; }
.md-preview:empty { display: none; }
.artisan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.artisan-tile { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .2s; }
.artisan-tile:hover { transform: translateY(-3px); text-decoration: none; }
.artisan-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.artisan-tile .body { padding: 14px 16px 16px; }
.artisan-tile .name { font-family: var(--serif); font-size: 1.3rem; color: var(--navy-dark); font-weight: 600; }
.artisan-tile .meta { color: var(--muted); font-size: .88rem; }
@media (max-width: 760px) {
    .artisan-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .artisan-hero img { max-width: 320px; }
}

/* Admin > Paramètres : état de l'annonce selon ses dates */
.announcement-state { font-size: .85rem; font-weight: 600; margin: 0 0 12px; }
.announcement-state.on { color: var(--success); }
.announcement-state.soon { color: var(--warn); }
.announcement-state.off { color: var(--muted); }