/* Palette reprise directement du logo "Fils d'idées 3D" */
:root {
    --color-ink: #1D2224;       /* noir/charbon du corps de l'imprimante */
    --color-slate: #314957;     /* bleu ardoise du texte "Fils d'idées" */
    --color-teal: #3A7474;      /* teal du "3D" et des accents imprimante */
    --color-teal-light: #708F98;/* teal clair, accents secondaires */
    --color-bg: #F5F8F8;        /* fond de page, blanc cassé froid */
    --color-white: #FFFFFF;
    --color-border: #E1E8E8;
    --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Nunito Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--color-ink);
    line-height: 1.55;
    /* Fond légèrement texturé (grille de points, très discrète) pour éviter
       que les grands écrans paraissent vides sur les côtés. Les blocs avec
       leur propre fond (header, footer, cartes, encarts...) le recouvrent. */
    background-color: var(--color-bg);
    background-image: radial-gradient(rgba(58, 116, 116, 0.16) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    /* Pied de page collé en bas de l'écran (et pas juste sous le contenu)
       même sur les pages courtes comme "Connexion" */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, .logo, button, .btn {
    font-family: 'Baloo 2', 'Nunito Sans', system-ui, sans-serif;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 640px; }

/* Header */
.site-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.header-inner {
    display: flex; justify-content: space-between; align-items: center;
    height: 84px; width: 100%; padding: 0 40px;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 60px; width: auto; display: block; }

nav { display: flex; align-items: center; gap: 8px; }
nav a {
    text-decoration: none; color: var(--color-slate); margin-left: 16px;
    font-weight: 600; padding: 8px 4px; transition: color 0.15s ease;
}
nav a:hover { color: var(--color-teal); }
.cart-count {
    display: inline-block; background: var(--color-teal); color: #fff;
    border-radius: 999px; padding: 1px 9px; font-size: 0.8rem; margin-left: 6px;
    font-weight: 700;
}
.nav-account { margin-left: 16px; color: var(--color-slate); font-weight: 600; font-size: 0.95rem; }

.form-note-link { margin-top: 16px; font-size: 0.9rem; color: var(--color-slate); }
.form-note-link a { color: var(--color-teal); font-weight: 600; }

main { padding: 48px 0; flex: 1 0 auto; }
main.home { padding-top: 0; }

h1 { margin-bottom: 28px; color: var(--color-ink); font-weight: 700; letter-spacing: -0.01em; }

/* Hero (page d'accueil) — bandeau étiré sur toute la largeur de la page */
.hero {
    background: linear-gradient(135deg, var(--color-slate), var(--color-teal));
    padding: 22px 40px;
    margin-bottom: 20px;
    text-align: center;
}
.hero-content { max-width: 560px; margin: 0 auto; }
.hero h1 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.hero-tagline { color: #eaf1f1; font-size: 1rem; margin-bottom: 18px; line-height: 1.5; }
.hero .btn { background: #fff; color: var(--color-slate); }
.hero .btn:hover { background: var(--color-bg); }

.section-title {
    font-size: 1.6rem; margin-bottom: 28px; color: var(--color-ink); font-weight: 700;
}

/* Section "Comment ça marche" (page d'accueil) */
.how-it-works { padding: 8px 20px 36px; text-align: center; }
.how-it-works-content { max-width: 900px; margin: 0 auto; }
.how-it-works h2 { font-size: 1.5rem; margin-bottom: 32px; color: var(--color-ink); }
.steps { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.step { flex: 1 1 220px; max-width: 260px; }
.step-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-teal); color: #fff; font-weight: 700;
    margin-bottom: 12px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--color-ink); }
.step p { font-size: 0.9rem; color: var(--color-slate); line-height: 1.5; }

/* Présentation des prestations (page d'accueil) */
.services-showcase { padding: 8px 20px 40px; text-align: center; }
.services-showcase-content { max-width: 1100px; margin: 0 auto; }
.services-showcase h2 { font-size: 1.6rem; margin-bottom: 32px; color: var(--color-ink); }
.services-showcase .services-grid { margin-bottom: 0; grid-template-columns: repeat(4, 1fr); }
.services-showcase .service-card { text-align: center; }

/* Bandeau d'appel à l'action vers la page "Sur-mesure" (page d'accueil) */
.cta-banner {
    background: linear-gradient(135deg, var(--color-teal), var(--color-slate));
    padding: 32px 40px;
    text-align: center;
}
.cta-banner-content { max-width: 560px; margin: 0 auto; }
.cta-banner h2 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.cta-banner p { color: #eaf1f1; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
.cta-banner .btn { background: #fff; color: var(--color-slate); }
.cta-banner .btn:hover { background: var(--color-bg); }

/* Carousel (page d'accueil) — carré, centré, pas étiré sur toute la largeur */
.carousel {
    position: relative;
    max-width: 460px;
    margin: 0 auto 28px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-ink);
}
.carousel-viewport { overflow: hidden; }
.carousel-track {
    display: flex;
    transition: transform 0.45s ease;
}
.carousel-slide {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 1 / 1;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.carousel-slide img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.carousel-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px;
    background: linear-gradient(to top, rgba(29,34,36,0.85), rgba(29,34,36,0));
    color: #fff;
}
.carousel-caption span:first-child { font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1.05rem; }
.carousel-price { font-weight: 700; color: #cdeaea; }

.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.85); color: var(--color-ink);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.carousel-btn:hover { background: #fff; }
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

.carousel-dots {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
}
.carousel-dot {
    width: 9px; height: 9px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.5); cursor: pointer; padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-dot.is-active { background: #fff; transform: scale(1.2); }

@media (max-width: 720px) {
    .carousel { max-width: calc(100% - 32px); }
    .carousel-caption { padding: 12px 16px; }
    .carousel-btn { width: 34px; height: 34px; font-size: 1.2rem; }
}

/* Filtres par catégorie (boutique) */
.category-filters {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 28px;
}
.category-filter {
    display: inline-block; padding: 8px 18px; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--color-white);
    color: var(--color-slate); text-decoration: none; font-weight: 600; font-size: 0.92rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.category-filter:hover { border-color: var(--color-teal-light); }
.category-filter.is-active { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }

/* Mots-clés (tags) sur la fiche produit */
.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.tag-pill {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    background: var(--color-bg); color: var(--color-teal);
    text-decoration: none; font-weight: 600; font-size: 0.85rem;
    border: 1px solid var(--color-border); transition: background 0.15s ease, color 0.15s ease;
}
.tag-pill:hover { background: var(--color-teal); color: var(--color-white); }

/* Grille produits */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}
.product-card {
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 18px; text-decoration: none; color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.product-card:hover {
    box-shadow: 0 8px 20px rgba(29, 34, 36, 0.08);
    border-color: var(--color-teal-light);
    transform: translateY(-2px);
}
.product-card img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 14px;
    background: var(--color-bg);
}
.product-card h2 { font-size: 1.1rem; color: var(--color-slate); font-weight: 600; margin: 0 0 4px; }
.price { font-weight: 700; margin-top: 4px; color: var(--color-teal); }

/* Détail produit */
.product-detail { display: flex; gap: 40px; flex-wrap: wrap; }
.product-detail img { width: 100%; max-width: 400px; border-radius: var(--radius); background: var(--color-bg); }
.product-info { flex: 1; min-width: 260px; }

/* Photo cliquable (ouvre le zoom plein écran) — utilisé sur la fiche produit
   et sur la page "À propos". .photo-zoom-trigger fait le reset générique
   (annule le style bouton par défaut du site, y compris au survol), les
   classes spécifiques (.product-photo-trigger, .about-photo-trigger) gèrent
   juste la largeur propre à leur contexte. */
.photo-zoom-trigger,
.photo-zoom-trigger:hover,
.photo-zoom-trigger:focus,
.photo-zoom-trigger:active {
    position: relative; display: block; padding: 0; border: none; background: none;
    cursor: zoom-in; width: 100%; text-align: left; border-radius: 0;
}
.photo-zoom-trigger img { display: block; }
.product-photo-trigger { max-width: 400px; }
.photo-zoom-hint {
    position: absolute; right: 12px; bottom: 12px; padding: 6px 10px;
    background: rgba(29, 34, 36, 0.72); color: #fff; font-size: 0.8rem; border-radius: 999px;
    opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.photo-zoom-trigger:hover .photo-zoom-hint,
.photo-zoom-trigger:focus-visible .photo-zoom-hint { opacity: 1; }

/* Lightbox plein écran (zoom photo produit) */
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 1000; background: rgba(15, 17, 18, 0.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-img {
    max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 4px;
    cursor: zoom-in; transition: transform 0.2s ease; touch-action: pinch-zoom;
}
.lightbox-img.is-zoomed {
    max-width: none; max-height: none; width: auto; height: auto;
    transform: scale(2); cursor: zoom-out;
}
.lightbox-overlay.has-zoomed-img { overflow: auto; }
.lightbox-close,
.lightbox-close:hover,
.lightbox-close:focus,
.lightbox-close:active {
    position: absolute; top: 16px; right: 20px; background: none; border: none;
    color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 4px 8px;
    border-radius: 0;
}
.lightbox-hint { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; margin: 0; }
@media (max-width: 640px) {
    .lightbox-img.is-zoomed { transform: scale(1.6); }
}
.product-info h1 { color: var(--color-slate); }
.product-info form { margin-top: 20px; display: flex; gap: 12px; align-items: center; }
.product-info input[type="number"] {
    width: 70px; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px;
}

button, .btn {
    background: var(--color-teal); color: #fff; border: none; padding: 12px 24px;
    border-radius: 999px; cursor: pointer; font-size: 1rem; font-weight: 700;
    text-decoration: none; display: inline-block; transition: background 0.15s ease;
}
button:hover, .btn:hover { background: var(--color-slate); }
button:disabled, .btn:disabled { background: var(--color-border); color: var(--color-teal-light); cursor: not-allowed; }

.remove-link { background: transparent; color: #b23b3b; font-size: 0.9rem; padding: 4px 8px; font-weight: 600; }
.remove-link:hover { background: #fbeaea; color: #8f2d2d; }

/* Panier + tableaux (admin) */
.cart-table-wrapper { overflow-x: auto; margin-bottom: 28px; }
.cart-table, .data-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cart-table th, .data-table th {
    text-align: left; padding: 12px 8px; border-bottom: 2px solid var(--color-ink);
    color: var(--color-slate); font-family: 'Baloo 2', sans-serif; font-size: 0.95rem;
}
.cart-table td, .data-table td { text-align: left; padding: 14px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.quantity-form { display: flex; gap: 8px; align-items: center; }
.quantity-form input[type="number"] { width: 60px; padding: 8px; border: 1px solid var(--color-border); border-radius: 6px; }
.cart-summary { max-width: 320px; margin: 0 0 24px auto; }
.cart-summary p { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--color-slate); }
.cart-summary .cart-total { font-size: 1.3rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0; padding-top: 8px; border-top: 1px solid var(--color-border); }
.cart-total { text-align: right; font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; color: var(--color-ink); }

.out-of-stock { color: #b23b3b; font-weight: 600; margin-top: 16px; }

.site-footer {
    background: var(--color-ink); color: #cfd8d8; padding: 28px 0; text-align: center;
}
.site-footer p { font-size: 0.9rem; }
.footer-social { margin-bottom: 10px; }
.footer-sep { margin: 0 8px; opacity: 0.5; }
.contact-trigger {
    background: none; border: none; padding: 0; margin: 0;
    color: var(--color-teal-light); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.contact-trigger:hover { color: #fff; }
.footer-link {
    color: var(--color-teal-light); font-size: 0.9rem; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.footer-link:hover { color: #fff; }

.shipping-badges {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 12px; font-size: 0.8rem !important;
}
.shipping-badges-label {
    color: #9fb0b0; text-transform: uppercase; letter-spacing: 0.03em;
}
.shipping-logo {
    height: 22px; width: auto; display: block; border-radius: 4px;
}
.shipping-logo--gls { height: 22px; } /* logo GLS livré avec son fond bleu marine d'origine */

/* Page mentions légales / CGV / CGU */
.legal-page h2 { font-size: 1.35rem; margin-top: 36px; margin-bottom: 14px; color: var(--color-ink); }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page h3 { font-size: 1.05rem; margin-top: 22px; margin-bottom: 8px; color: var(--color-slate); }
.legal-page p { margin-bottom: 12px; line-height: 1.6; }
.legal-page ul { margin: 0 0 12px 20px; }
.legal-page li { margin-bottom: 6px; line-height: 1.6; }
.legal-page .todo { color: #b23b3b; font-weight: 600; }
.legal-page .legal-updated { color: var(--color-teal-light); font-size: 0.85rem; margin-bottom: 32px; }

.service-video {
    display: block; width: 100%; max-width: 340px; margin: 8px auto 24px;
    border-radius: var(--radius); background: var(--color-ink);
}

/* Bloc encadré réutilisable (récap adresse, commande, demande sur-mesure...) */
.legal-block { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }

/* Page "À propos" */
.about-intro { font-size: 1.05rem; color: var(--color-slate); margin-bottom: 24px; }
.about-photo {
    width: 100%; height: auto; display: block; border-radius: var(--radius);
    border: 1px solid var(--color-border); margin: 20px 0;
}
.about-photo--hero { margin-top: 4px; }
.about-address {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 14px 18px; display: inline-block;
    font-weight: 600; color: var(--color-slate); margin-bottom: 12px;
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-block--top-spaced { margin-top: 20px; }

/* Modale de contact */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(29, 34, 36, 0.6);
    align-items: center; justify-content: center;
    padding: 20px; z-index: 100;
}
/* Important : ne mettre display:flex QUE quand l'attribut "hidden" est absent,
   sinon cette règle empêche le navigateur de masquer la fenêtre. */
.modal-overlay:not([hidden]) { display: flex; }
.modal-box {
    position: relative;
    background: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    width: 100%; max-width: 440px;
    max-height: 90vh; overflow-y: auto;
}
.modal-box h2 { margin-bottom: 8px; color: var(--color-ink); }
.modal-subtitle { color: var(--color-slate); margin-bottom: 20px; font-size: 0.95rem; }
.modal-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; font-size: 1.6rem; line-height: 1;
    color: var(--color-slate); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--color-bg); color: var(--color-ink); }

.form-field { margin-bottom: 16px; }
.form-field label {
    display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-slate); font-size: 0.9rem;
}
.form-field input, .form-field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
    border-radius: 8px; font-family: inherit; font-size: 1rem; color: var(--color-ink);
    resize: vertical;
}
.form-field input:focus, .form-field textarea:focus {
    outline: none; border-color: var(--color-teal);
}
.hp-field {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Auto-complétion d'adresse (Mon compte) */
.address-autocomplete { position: relative; }
.address-suggestions {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 8px 20px rgba(29, 34, 36, 0.12); list-style: none; margin: 0; padding: 4px;
    max-height: 220px; overflow-y: auto;
}
.address-suggestions li {
    padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 0.92rem; color: var(--color-ink);
}
.address-suggestions li:hover, .address-suggestions li.is-active { background: var(--color-bg); }
.modal-box .btn { width: 100%; text-align: center; }
.form-status { margin-top: 12px; font-size: 0.9rem; min-height: 1.2em; }
.form-status.is-success { color: #1e7d4f; }
.form-status.is-error { color: #b23b3b; }

/* Page "Sur-mesure" */
.page-intro { color: var(--color-slate); margin-bottom: 32px; max-width: 56ch; }

.form-field-label {
    display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-slate); font-size: 0.9rem;
}
.form-hint { margin-top: 6px; font-size: 0.85rem; color: var(--color-teal-light); }
.form-hint a { color: var(--color-teal); font-weight: 600; }
.char-counter { margin-top: 6px; font-size: 0.85rem; color: var(--color-teal-light); text-align: right; }
.char-counter.is-near-limit { color: #b23b3b; font-weight: 600; }
.form-note {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px;
    padding: 14px 16px; font-size: 0.9rem; color: var(--color-slate); margin-bottom: 20px;
}

/* Prestations et tarifs (page Sur-mesure) */
.services-section, .pricing-section { margin-bottom: 40px; }
.services-section h2, .pricing-section h2 { font-size: 1.3rem; margin-bottom: 16px; color: var(--color-ink); }
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.service-card {
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius);
    border-top: 3px solid var(--color-teal);
    padding: 26px 22px;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.service-card:hover {
    box-shadow: 0 8px 20px rgba(29, 34, 36, 0.08);
    border-color: var(--color-teal-light);
    transform: translateY(-2px);
}
.service-card h3 { font-size: 1.05rem; color: var(--color-slate); font-weight: 700; margin: 0 0 8px; }
.service-card p { font-size: 0.9rem; color: var(--color-ink); margin: 0; line-height: 1.4; }

.pricing-table th:last-child, .pricing-table td:last-child { text-align: right; white-space: nowrap; font-weight: 700; color: var(--color-teal); }
.pricing-table strong a { color: var(--color-slate); text-decoration: underline; text-underline-offset: 2px; }
.pricing-table strong a:hover { color: var(--color-teal); }

.service-links { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.service-links a {
    display: inline-block; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--color-white);
    color: var(--color-slate); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.service-links a:hover { border-color: var(--color-teal-light); color: var(--color-teal); }
.pricing-desc { margin: 4px 0 0; font-size: 0.85rem; color: var(--color-slate); font-weight: 400; line-height: 1.4; }
.pricing-details { margin-top: 24px; }
.pricing-details h3 { font-size: 1.05rem; margin: 20px 0 8px; color: var(--color-ink); }
.pricing-details h3:first-child { margin-top: 0; }
.pricing-details p, .pricing-details li { font-size: 0.92rem; color: var(--color-slate); line-height: 1.5; }
.pricing-details ul { margin: 0 0 0 20px; padding: 0; }
.pricing-note { margin-top: 16px; font-weight: 700; color: var(--color-ink); }

.request-form-title { font-size: 1.3rem; margin-bottom: 16px; color: var(--color-ink); }

/* Encart d'information (ex : propriété intellectuelle sur la page Sur-mesure) */
.notice-box {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-teal); border-radius: var(--radius);
    padding: 14px 18px; margin-bottom: 20px; font-size: 0.88rem; color: var(--color-slate);
}
.notice-box strong {
    display: block; margin-bottom: 6px; font-family: 'Baloo 2', sans-serif; color: var(--color-ink);
}
.notice-box p { margin: 0; line-height: 1.5; }

#customRequestForm select,
#customRequestForm input[type="text"],
#customRequestForm input[type="email"],
#customRequestForm textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
    border-radius: 8px; font-family: inherit; font-size: 1rem; color: var(--color-ink);
    background: var(--color-white);
}
#customRequestForm select:focus,
#customRequestForm input:focus,
#customRequestForm textarea:focus { outline: none; border-color: var(--color-teal); }

/* Champ fichier + bouton "retirer" à l'intérieur d'un même cadre */
.file-input-row {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white);
    padding-right: 4px; transition: border-color 0.15s ease;
}
.file-input-row:focus-within { border-color: var(--color-teal); }
.file-input-row input[type="file"] {
    flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 12px;
}
.file-input-row input[type="file"]:focus { outline: none; }
.file-clear-btn {
    flex-shrink: 0; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    background: transparent; color: var(--color-slate); border: none;
    font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.file-clear-btn:hover { background: #fbeaea; color: #b23b3b; }
/* Le style global "button { display: inline-block }" prime sur l'attribut
   HTML "hidden" tout seul : on le réaffirme ici pour qu'il masque vraiment. */
.file-clear-btn[hidden] { display: none; }

/* Champs conditionnels : masqués par défaut, affichés via JS (classe is-active) */
.type-fields { display: none; }
.type-fields.is-active { display: block; }

fieldset.type-fields {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 16px 20px 4px; margin-bottom: 20px;
}
fieldset.type-fields legend {
    padding: 0 8px; font-weight: 700; font-family: 'Baloo 2', sans-serif; color: var(--color-ink);
}

.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-option { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; cursor: pointer; }
.radio-option input { width: auto; }
.radio-option.is-out-of-stock { color: var(--color-teal-light); text-decoration: line-through; cursor: not-allowed; }

/* Choix des couleurs (impression multicolore) */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.checkbox-option {
    display: flex; align-items: center; gap: 8px; font-size: 0.95rem; cursor: pointer;
}
.checkbox-option input { width: auto; }
.checkbox-option.is-out-of-stock { color: var(--color-teal-light); text-decoration: line-through; cursor: not-allowed; }
.color-swatch {
    display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--color-border); flex-shrink: 0;
}

/* Choix du coloris sur la fiche produit (boutique) : menu déroulant + pastille d'aperçu */
.product-color-field { margin-bottom: 20px; }
.color-select-row { display: flex; align-items: center; gap: 10px; }
.color-select-row select { flex: 1; }
.color-swatch.is-empty { background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 8px 8px; }

/* Coloris choisi, affiché sous le nom du produit dans le panier */
.cart-item-color { font-size: 0.85rem; color: var(--color-teal-light); }

/* --- Espace admin --- */
.admin-header-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px;
}
.admin-logout-link { font-size: 0.9rem; color: var(--color-teal-light); }
.admin-nav {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.admin-nav a {
    text-decoration: none; color: var(--color-slate); font-weight: 600; font-size: 0.92rem;
    padding: 7px 14px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease;
}
.admin-nav a:hover { background: var(--color-bg); }
.admin-nav a.is-active { background: var(--color-teal); color: #fff; }
.admin-colors-list { list-style: none; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.admin-colors-list li { display: flex; align-items: center; gap: 12px; }
.admin-color-row { display: flex; align-items: center; gap: 10px; font-size: 1rem; cursor: pointer; }
.admin-color-row input { width: auto; }
.admin-color-name-input {
    flex: 1 1 220px; max-width: 280px; padding: 6px 10px; font-size: 0.95rem;
    border: 1px solid var(--color-border); border-radius: 6px;
}
.btn-icon-delete {
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--color-border);
    background: var(--color-white); color: #b3392f; font-size: 0.9rem; line-height: 1; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-icon-delete:hover { background: #b3392f; color: #fff; border-color: #b3392f; }
.is-hidden { display: none; }
.admin-add-color-form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.admin-add-color-form .form-field { flex: 1 1 200px; margin-bottom: 0; }
.admin-add-color-form input[type="color"] { padding: 4px; height: 42px; cursor: pointer; }
.btn--secondary { background: var(--color-white); color: var(--color-teal); border: 1px solid var(--color-teal); }
.btn--secondary:hover { background: var(--color-bg); }
.btn--small { padding: 7px 16px; font-size: 0.88rem; }
.btn--danger { background: #b23b3b; }
.btn--danger:hover { background: #8f2d2d; }

.admin-table-thumb {
    width: 46px; height: 46px; object-fit: cover; border-radius: 6px; background: var(--color-bg);
    border: 1px solid var(--color-border); vertical-align: middle;
}
.status-badge {
    display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.82rem;
    font-weight: 700; background: var(--color-bg); color: var(--color-slate); white-space: nowrap;
}
.status-badge.is-paid, .status-badge.is-termine { background: #e3f2e6; color: #2e7d32; }
.status-badge.is-pending, .status-badge.is-nouveau { background: #fdf1de; color: #a9660b; }
.status-badge.is-cancelled, .status-badge.is-refuse { background: #fbeaea; color: #b23b3b; }
.status-badge.is-en_cours { background: #e6eef7; color: #2f5f9e; }
.status-badge.is-shipped { background: #e6eef7; color: #2f5f9e; }
.admin-tracking-form {
    display: flex; flex-direction: column; gap: 6px; min-width: 160px;
}
.admin-tracking-form select,
.admin-tracking-form input[type="text"] {
    padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.85rem;
}
.status-select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.88rem; }
.admin-inactive-row { opacity: 0.55; }
.admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.admin-details-list { margin: 0 0 8px; padding: 0; list-style: none; font-size: 0.9rem; color: var(--color-slate); line-height: 1.5; }
.admin-details-list li { margin-bottom: 2px; }
.data-table details summary { cursor: pointer; color: var(--color-teal); font-weight: 600; font-size: 0.9rem; }
.data-table details[open] summary { margin-bottom: 8px; }

#customRequestForm .btn { margin-top: 8px; }

/* Responsive */
@media (max-width: 900px) {
    .services-showcase .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .header-inner { flex-direction: column; height: auto; padding: 16px 20px; gap: 12px; }
    .logo img { height: 48px; }
    nav { flex-wrap: wrap; justify-content: center; }
    nav a { margin-left: 0; margin-right: 16px; }
    .nav-account { margin-left: 0; }

    main { padding: 32px 0; }

    .container { padding: 0 16px; }

    .hero { padding: 24px 20px; border-radius: 14px; }
    .hero h1 { font-size: 1.5rem; }
    .hero-tagline { font-size: 0.9rem; }

    .how-it-works { padding: 4px 20px 28px; }
    .steps { gap: 24px; }

    .services-showcase .services-grid { grid-template-columns: 1fr; }

    .cta-banner { padding: 28px 20px; }
    .cta-banner h2 { font-size: 1.3rem; }

    .product-detail { flex-direction: column; gap: 24px; }
    .product-detail img { max-width: 100%; }

    .product-info form { flex-wrap: wrap; }
}