/* ===== Identité à domicile — feuille de style ===== */
:root {
  --primary: #0369a1;
  --primary-dark: #0c4a6e;
  --primary-light: #e0f2fe;
  --navy: #0f172a;
  --secondary: #d97706;
  --accent: #15803d;
  --danger: #b91c1c;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --white: #ffffff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14);
  --font-head: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.06  0 0 0 0 0.09  0 0 0 0 0.16  0 0 0 0 0.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.22; color: var(--navy); font-weight: 700; overflow-wrap: break-word; }
* { min-width: 0; }
img { max-width: 100%; display: block; }
.icon-svg { display: block; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes heroEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero-enter { opacity: 0; animation: heroEnter .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .hero-enter { opacity: 1; animation: none; }
}

a, button, .btn, .product-card, input[type="file"], select, .filter-tabs a {
  cursor: pointer;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .product-card:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.muted { color: var(--muted); font-size: 0.9em; }
.fw-bold { font-weight: 700; }
.lead-sm { font-size: 1.05rem; color: #3a4356; max-width: 62ch; }

.top-banner { background: var(--navy); color: #cdd8ee; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.78rem; font-weight: 500; padding: 8px 16px; letter-spacing: .01em; }
.top-banner span { display: inline-flex; align-items: center; gap: 6px; }
.top-banner svg { color: #7dd3fc; }
.top-banner-dot { opacity: .5; }

/* Header */
.site-header { background: rgba(248,250,252,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 16px; position: relative; }
.header-actions { display: flex; align-items: center; gap: 6px; order: 3; }
.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--navy); border-radius: 8px; }
.nav-toggle:hover { background: var(--primary-light); }
.nav-toggle-icon-close { color: var(--primary); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--navy); }
.logo-img { height: 44px; width: auto; display: block; }
.logo em { color: var(--primary); font-style: normal; }
.logo-icon { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--primary), #0c4a6e); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(3,105,161,.32); }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: var(--text); font-weight: 600; font-size: 0.95rem; position: relative; }
.main-nav a:not(.cart-link)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--primary); transition: right .2s ease; }
.main-nav a:not(.cart-link):hover::after { right: 0; }
.main-nav a:hover { color: var(--primary); text-decoration: none; }
.cart-link, .account-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-badge { background: var(--secondary); color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 50%; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.cart-badge.pulse { animation: cartPulse .5s ease; }
@keyframes cartPulse { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

.fly-dot { position: fixed; width: 18px; height: 18px; border-radius: 50%; background: var(--secondary); box-shadow: 0 4px 10px rgba(217,119,6,.4); z-index: 999; pointer-events: none; transition: transform .55s cubic-bezier(.3,.6,.4,1), opacity .55s ease; }

.btn-success-state { background: var(--accent) !important; }
@media (prefers-reduced-motion: reduce) {
  .cart-badge.pulse { animation: none; }
  .fly-dot { display: none; }
}

/* Hero */
.hero { position: relative; overflow: hidden; padding: 84px 0 70px; }
.hero-grid-pattern {
  position: absolute; inset: 0; z-index: 0; opacity: .55;
  background-image:
    radial-gradient(circle at 82% 8%, var(--primary-light), transparent 42%),
    radial-gradient(circle at 6% 92%, #fdf1dd, transparent 40%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 20%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 20%, #000 40%, transparent 85%);
}
.hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 56px; }
.hero-copy { flex: 1.1; min-width: 300px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-light); color: var(--primary-dark); font-weight: 700; font-size: 0.82rem; padding: 7px 14px; border-radius: 30px; margin-bottom: 20px; }
.hero h1 { font-size: 2.7rem; margin: 0 0 18px; letter-spacing: -.01em; }
.hero h1 em { color: var(--primary); font-style: normal; }
.hero .lead { font-size: 1.15rem; color: #3a4356; max-width: 46ch; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 26px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hero-badge { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 600; color: #33415a; }
.hero-badge svg { transition: transform .3s ease; }
.hero-badge:hover svg { transform: scale(1.2) rotate(-6deg); }
.hero-badge svg { color: var(--accent); }
.hero-visual { flex: 1; min-width: 260px; display: flex; justify-content: center; position: relative; z-index: 1; }
.hero-card { position: relative; width: 270px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 26px; border: 1px solid var(--border); animation: heroCardFloat 5s ease-in-out infinite; }
.hero-card:hover { animation-play-state: paused; transform: rotate(0deg) translateY(-6px); }
@keyframes heroCardFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .hero-card { animation: none; transform: rotate(-3deg); } }
.hero-card-photo { width: 100%; aspect-ratio: 4/5; border-radius: 16px; object-fit: cover; object-position: center; background: #fff; margin-bottom: 16px; }
.hero-card-crosshair { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.85); }
.hero-card-crosshair.top-left { top: 40px; left: 40px; border-right: none; border-bottom: none; }
.hero-card-crosshair.top-right { top: 40px; right: 40px; border-left: none; border-bottom: none; }
.hero-card-crosshair.bottom-left { bottom: 82px; left: 40px; border-right: none; border-top: none; }
.hero-card-crosshair.bottom-right { bottom: 82px; right: 40px; border-left: none; border-top: none; }
.hero-card-line { height: 10px; border-radius: 6px; background: var(--border); margin-bottom: 8px; }
.hero-card-line.short { width: 60%; }
.hero-card-check { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(21,128,61,.4); }
.hero-stamp { position: absolute; top: -18px; left: -34px; width: 96px; height: 96px; color: var(--secondary); animation: stampSpin 22s linear infinite; filter: drop-shadow(0 6px 10px rgba(217,119,6,.25)); }
.hero-stamp-svg { width: 100%; height: 100%; }
@keyframes stampSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-stamp { animation: none; } }

/* Trust strip */
.trust-strip { background: #10192e; padding: 22px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.trust-item { display: flex; align-items: center; gap: 12px; color: #dbe4f5; font-weight: 600; font-size: 0.92rem; }
.trust-item svg { transition: transform .3s ease; }
.trust-item:hover svg { transform: scale(1.15); }
.trust-item svg { color: var(--secondary); flex-shrink: 0; }

/* Section heading */
.section-heading { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.section-heading-left { text-align: left; margin: 0 0 30px; max-width: none; }
.section-kicker { display: inline-block; color: var(--primary); font-weight: 700; font-size: 0.82rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.section-heading h2, .section-heading h1 { margin: 0; font-size: 1.9rem; }

/* Buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 10px; font-weight: 600; font-family: var(--font-head); border: 2px solid transparent; cursor: pointer; font-size: 0.98rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 22px rgba(3,105,161,.28); }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%); transition: transform .5s ease; }
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: #fff; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: #fff; border-color: var(--primary); color: var(--primary); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; justify-content: center; text-align: center; }

/* Steps */
.steps { padding: 70px 20px; }
/* Photo unique en tête des étapes + étapes en liste (refonte demandée par le
   client : une seule image, les paragraphes regroupés dessous). */
.steps-hero { margin: 0 0 30px; }
/* Pas de cadre a ratio fixe : l'image garde ses proportions naturelles, donc
   aucune bande blanche quel que soit le format de la photo, et aucun rognage. */
.steps-hero-img { width: 100%; max-width: 620px; height: auto; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px 30px; }
.step-item { display: flex; gap: 14px; align-items: flex-start; }
.step-item .step-num { flex-shrink: 0; margin: 2px 0 0; }
.step-item h3 { font-size: 1.02rem; margin: 0 0 6px; }
.step-item p { margin: 0; font-size: 0.93rem; color: var(--muted); }
@media (max-width: 620px) { .steps-list { grid-template-columns: 1fr; } }

.step-num { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #3b7fd1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-head); margin-bottom: 14px; transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); transition-delay: .25s; }
[data-reveal].is-visible .step-num { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .step-num { transform: scale(1); } }
.callout { display: flex; gap: 24px; align-items: center; background: linear-gradient(120deg, var(--primary-light), #fdf6ea); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; }
.callout p { margin: 6px 0; }
.callout .note { color: var(--muted); font-size: 0.9rem; }

/* Products */
.products { padding: 10px 20px 76px; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.product-card { background: #fff; border-radius: var(--radius); padding: 0 0 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow: hidden; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; }
/* Repli sans photo : icône du type de produit sur aplat clair. Le site
   n'utilise plus de photos d'illustration génériques (demande client). */
.product-card-icon { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--primary-light), #f2f7fc); color: var(--primary); transition: transform .5s ease; }
.product-card:hover .product-card-icon { transform: scale(1.06); }
/* Confirmation d'ajout au panier, sous le bouton : elle porte la suite du
   parcours (commander / voir le panier), donc elle reste affichée. */
.add-to-cart-done { margin-top: 16px; padding: 16px 18px; background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid var(--accent); border-radius: var(--radius); animation: ajoutPanier .35s ease; }
.add-to-cart-done-msg { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #14532d; }
.add-to-cart-done-msg svg { color: var(--accent); flex-shrink: 0; }
.add-to-cart-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes ajoutPanier { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .add-to-cart-done { animation: none; } }
@media (max-width: 480px) { .add-to-cart-actions .btn { flex: 1 1 100%; text-align: center; } }

.product-detail-icon { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--primary-light), #f2f7fc); color: var(--primary); border-radius: var(--radius); box-shadow: var(--shadow); }

.product-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #fff; transition: transform .5s ease; }
.product-card:hover .product-card-img { transform: scale(1.06); }
.product-card h3, .product-card .desc, .product-card .product-card-foot { margin-left: 22px; margin-right: 22px; }
.product-card h3 { font-size: 1.05rem; min-height: 2.6em; margin-top: 18px; }
.price { font-size: 1.35rem; font-weight: 800; color: var(--primary); font-family: var(--font-head); }
.price-lg { font-size: 1.8rem; }
.desc { color: var(--muted); font-size: 0.92rem; flex: 1; }
.product-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--border); }
.product-card-arrow { color: var(--primary); font-weight: 700; transition: transform .15s ease; }
.product-card:hover .product-card-arrow { transform: translateX(4px); }

/* Page sections */
.page-section { padding: 44px 20px 76px; }
.narrow-section { max-width: 520px; }
.narrow-section .admin-form { max-width: none; }
.admin-image-preview { display: block; width: 100%; max-width: 260px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 10px; }
.site-image-card { padding: 0 0 18px; }
/* Il n'y a que 2-3 photos de site à remplacer : sans plafond, la grille
   générique (pensée pour des dizaines de produits) les étire en énormes
   cartes sur un écran large. */
.site-images-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); }
.site-image-form { margin: 10px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.site-image-form input[type="file"] { font-size: 0.82rem; }
.admin-logo-preview { display: block; max-width: 240px; max-height: 100px; object-fit: contain; background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; }
.code-block { background: #0f172a; color: #e2e8f0; padding: 14px 18px; border-radius: var(--radius-sm); overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.88rem; }
.breadcrumb { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }

/* Product detail */
.product-detail { display: flex; gap: 40px; background: #fff; border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); border: 1px solid var(--border); flex-wrap: wrap; }
.product-detail-visual { flex: 0 0 240px; }
.product-detail-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.product-detail-info { flex: 1; min-width: 280px; }
.notice { background: #fff8e6; border-left: 4px solid var(--secondary); border-radius: 8px; padding: 14px 18px; margin: 16px 0; }
.note { color: var(--muted); font-size: 0.9rem; }

/* Forms */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.form-row-split { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.add-to-cart-form { max-width: 340px; }

.alert { padding: 14px 18px; border-radius: 8px; margin: 16px 0; }
.alert-success { background: #e6f7ee; color: #146c43; border: 1px solid #b7e4c7; }
.alert-error { background: #fdecec; color: #b02a2a; border: 1px solid #f3b8b8; }

/* Cart */
.empty-state { text-align: center; padding: 60px 20px; }

.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 22px 0 40px; }
.account-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.account-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; }
.account-card-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.account-card h3 { margin: 0 0 4px; font-size: 1.02rem; }

.address-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 20px 0 36px; }
.address-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.address-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.address-card p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.address-card-actions { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 780px) { .address-columns { grid-template-columns: 1fr; } }
.cart-table-wrap { background: #fff; border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); overflow-x: auto; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.qty-input { width: 65px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; }
.qty-stepper { display: inline-flex; align-items: center; gap: 6px; }
.qty-stepper-btn { width: 28px; height: 28px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--text); }
.qty-stepper-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.qty-stepper .qty-input { width: 42px; text-align: center; }
.qty-stepper .qty-input::-webkit-inner-spin-button,
.qty-stepper .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper .qty-input { -moz-appearance: textfield; appearance: textfield; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes flashUpdate { 0% { background-color: #d1e7dd; } 100% { background-color: transparent; } }
.flash-update { animation: flashUpdate 0.9s ease; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .flash-update { animation: none; } }
.remove-link { color: var(--danger); font-size: 0.9rem; }
.cart-actions { padding: 12px; text-align: right; }
.cart-summary { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 26px; margin-top: 20px; flex-wrap: wrap; gap: 16px; }
.cart-summary-lines { flex-basis: 100%; }
.cart-summary-line { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--muted); padding: 3px 0; }
.cart-summary-total { font-size: 1.3rem; font-weight: 700; }
.cart-summary-total span { color: var(--primary); margin-left: 10px; }

/* Checkout */
.checkout-layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.checkout-main { flex: 2; min-width: 320px; background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.checkout-main h2 { margin-top: 26px; font-size: 1.15rem; border-bottom: 2px solid var(--primary-light); padding-bottom: 8px; }
.checkout-main h2:first-child { margin-top: 0; }
.upload-item { background: var(--bg); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.upload-item h3 { font-size: 1rem; margin: 0 0 10px; }
.checkout-summary { flex: 1; min-width: 260px; background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); position: sticky; top: 90px; }
.summary-list { list-style: none; padding: 0; margin: 0 0 14px; }
.summary-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.summary-total { display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 700; margin-bottom: 18px; }
.summary-total span { color: var(--primary); }
.suivi-resultat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin-top: 20px; }
.suivi-resultat h2 { margin-top: 0; }
.faq-categorie { margin-top: 32px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--primary); font-weight: 400; margin-left: 12px; flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 10px 0 2px; color: var(--muted); }
.faq-item p a { color: var(--primary); }



/* Redirect / confirmation */
.redirect-box { text-align: center; padding: 80px 20px; font-family: inherit; }
.spinner { width: 44px; height: 44px; margin: 20px auto; border: 5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.confirmation-box { max-width: 560px; margin: 40px auto; background: #fff; border-radius: var(--radius); padding: 50px 30px; box-shadow: var(--shadow); }
.confirmation-icon { font-size: 3.5rem; margin-bottom: 10px; }
.confirmation-box.error { border-top: 4px solid var(--danger); }
.confirmation-box.success { border-top: 4px solid var(--accent); }

/* Legal page */
.legal-page h2 { margin-top: 30px; }
.legal-page ul { padding-left: 20px; }

/* Footer */
.site-footer { background: linear-gradient(180deg, #10192e, #0b1220); color: #a9b7cf; margin-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 52px 20px 40px; }

.footer-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-logo em { color: #7dd3fc; font-style: normal; }
.footer-logo-icon { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), #0c4a6e); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.footer-logo-img { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; }
/* Un logo est en général dessiné pour un fond clair : on lui pose une plaque
   blanche arrondie plutôt que de le laisser se fondre dans le pied de page
   sombre (vaut aussi bien pour ce logo que pour un futur logo importé). */
.footer-logo-plate { display: inline-flex; align-items: center; background: #fff; border-radius: 10px; padding: 8px 14px; }
.footer-tagline { font-size: 0.88rem; line-height: 1.6; margin: 0 0 16px; max-width: 32ch; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-badges span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #7dd3fc; font-weight: 600; }

.footer-col h3 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-address { display: flex; align-items: center; gap: 8px; color: #a9b7cf; font-size: 0.9rem; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-col a svg, .footer-address svg { color: #64748b; flex-shrink: 0; }
.footer-company { color: #fff; font-weight: 600; margin: 0; font-size: 0.92rem; }
.footer-col .muted { font-size: 0.85rem; margin: 0; }

.footer-bottom { text-align: center; padding: 18px; font-size: 0.8rem; border-top: 1px solid #1e293b; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ===== Admin ===== */
.admin-body { background: var(--bg); }
.admin-login-box { max-width: 360px; margin: 90px auto; background: #fff; padding: 34px; border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: #10192e; color: #cbd5e1; padding: 24px 0; flex-shrink: 0; }
.admin-logo { padding: 0 20px 20px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-head); }
.admin-logo > span { display: flex; align-items: center; gap: 8px; }
.admin-logo-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Repli du menu admin sur mobile : bouton caché sur desktop, où le menu reste
   toujours visible dans la barre latérale. */
.admin-nav-toggle { display: none; background: none; border: none; color: #fff; padding: 6px; cursor: pointer; }
.admin-sidebar nav { display: flex; flex-direction: column; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 10px; color: #cbd5e1; padding: 11px 20px; font-weight: 500; font-size: 0.93rem; border-left: 3px solid transparent; }
.admin-sidebar nav a svg { flex-shrink: 0; opacity: .85; }
.admin-sidebar nav a:hover { background: #1e2c52; text-decoration: none; color: #fff; }
.admin-sidebar nav a.active { background: #16233f; color: #fff; border-left-color: var(--secondary); font-weight: 600; }
.admin-sidebar .logout-link { margin-top: 20px; color: #f3a4a4; }
.admin-content { flex: 1; padding: 30px 40px; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 20px 0 34px; }
.stat-card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); text-align: center; }
.stat-num { font-size: 1.7rem; font-weight: 700; color: var(--primary); }
.stat-label { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: var(--shadow); }
.table-responsive .admin-table { box-shadow: none; border-radius: 0; }
.admin-table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* Petits tableaux à 2-3 colonnes (ex. « Produits les plus vendus » du tableau
   de bord) : le min-width générique les forçait à déborder de leur colonne. */
.admin-table--compact { min-width: 0; }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.92rem; }
.admin-table-actions { display: flex; gap: 8px; align-items: center; }
.admin-table-actions .inline-form { display: inline; }
.form-row label input[type="checkbox"] { width: auto; margin-right: 8px; }
.admin-table th { background: var(--primary-light); }

.badge { padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; background: #eee; }
.badge-en-attente { background: #fff3cd; color: #916a00; }
.badge-payée { background: #d1e7dd; color: #146c43; }
.badge-en-cours-de-traitement { background: #cfe2ff; color: #084298; }
.badge-envoyée { background: #d1e7dd; color: #146c43; }
.badge-annulée { background: #fdecec; color: #b02a2a; }
.badge-conforme { background: #d1e7dd; color: #146c43; }
.badge-non-conforme { background: #fdecec; color: #b02a2a; }

.order-item-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.order-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.order-item-head h3 { margin: 0; font-size: 1.02rem; }
.order-item-body { display: flex; gap: 26px; flex-wrap: wrap; }
.order-item-files { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 220px; }
.order-item-actions { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 260px; }
.text-danger { color: var(--danger); font-weight: 600; }
.fichier-final-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.fichier-final-block h4 { margin: 0 0 6px; font-size: 0.92rem; }
.fichier-final-etat { margin: 0 0 8px; font-weight: 600; color: var(--accent); }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input[type="text"] { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; }
.reupload-form input[type="text"] { flex: 1; min-width: 160px; }
.btn-sm { padding: 7px 14px; font-size: 0.85rem; }
.input-with-toggle { display: flex; gap: 8px; align-items: center; }
.input-with-toggle input { flex: 1; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }
.user-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Consentement CGV avant paiement */
.cgv-consent { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }
.cgv-consent > label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.cgv-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.cgv-consent .note { margin-top: 10px; font-size: 0.82rem; }

/* Zone de suppression de compte (RGPD) */
.danger-zone { border: 1px solid #fecaca; background: #fef2f2; border-radius: var(--radius); padding: 20px 22px; margin-top: 10px; }
.danger-zone h2 { margin-top: 0; }

/* Code promo dans le panier */
.promo-form { display: flex; gap: 8px; margin: 12px 0 4px; flex-basis: 100%; }
.promo-form input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; text-transform: uppercase; }
.promo-error { color: var(--danger); font-size: 0.86rem; margin: 4px 0 0; flex-basis: 100%; }
.promo-line { color: var(--accent); font-weight: 600; }
.promo-remove { color: var(--muted); text-decoration: none; margin-left: 6px; font-size: 0.85em; }
.promo-remove:hover { color: var(--danger); text-decoration: none; }

/* Page contact */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; }
.contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 1rem; resize: vertical; }
.contact-aside { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.contact-aside h2 { font-size: 1.05rem; margin-top: 0; }
.contact-aside h2 + p, .contact-aside p { font-size: 0.92rem; }
.contact-aside a { word-break: break-word; }
.mini-faq dt { font-weight: 700; font-size: 0.9rem; margin-top: 14px; }
.mini-faq dd { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }
/* Champ piège anti-robot : retiré du flux sans display:none, que certains
   robots détectent et contournent. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 780px) { .contact-layout { grid-template-columns: 1fr; } }

/* Page 404 */
.error-page { text-align: center; }
.error-code { font-family: var(--font-head); font-size: 7rem; font-weight: 700; line-height: 1; color: var(--primary-light); letter-spacing: -.03em; }
.error-page h1 { margin-top: 0; }
.error-page .lead-sm { max-width: 52ch; margin-left: auto; margin-right: auto; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 40px; }
.error-page .products-grid { text-align: left; }

/* Tableau de bord admin */
.dashboard-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stat-trend { font-size: 0.78rem; font-weight: 600; margin-top: 4px; }
.stat-trend.is-up { color: var(--accent); }
.stat-trend.is-down { color: var(--danger); }
.dashboard-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; align-items: start; }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.todo-card { display: block; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: var(--text); }
.todo-card:hover { text-decoration: none; box-shadow: var(--shadow); }
.todo-card.is-active { border-left-color: var(--secondary); background: #fffbf3; }
.todo-card.is-waiting { border-left-color: var(--primary); background: #f2f9ff; }
.todo-num { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.todo-label { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 14px 8px; }
.chart-bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
.chart-bar { width: 100%; max-width: 34px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius: 4px 4px 0 0; transition: opacity .15s ease; }
.chart-bar-wrap:hover .chart-bar { opacity: .75; }
.chart-label { font-size: 0.68rem; color: var(--muted); text-transform: capitalize; }
@media (max-width: 900px) { .dashboard-cols { grid-template-columns: 1fr; } }

/* Barre de recherche des commandes */
.search-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.search-field { flex: 1; min-width: 240px; }
.search-field input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; }
.search-dates { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--muted); flex-wrap: wrap; }
.search-dates input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; flex: 1 1 120px; min-width: 0; }
.search-summary { margin: 0 0 14px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
@media (max-width: 780px) {
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-field { min-width: 0; }
  .search-dates { width: 100%; }
}







.user-actions .inline-form input[type="password"] { min-width: 190px; }


/* Choix « appareil photo » / « fichier » : les deux <input type=file> sont
   masqués et pilotés par des <label> stylés en boutons. */
.visually-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Boutons compacts, texte sur une seule ligne : les classes .btn génériques
   (pensées pour de gros appels à l'action) donnaient deux pavés surdimensionnés
   au look d'icônes d'appli plutôt qu'un sélecteur de fichier discret. */
/* Sélecteur :is(.file-choice, .sig-tabs) .file-choice-btn (et pas juste
   .file-choice-btn) : ces boutons sont soit des <label> dans un .form-row —
   et « .form-row label » (plus haut dans ce fichier) impose display:block
   avec une spécificité plus forte qu'une simple classe, sans ce renfort il
   écrase l'inline-flex et empile l'icône au-dessus du texte — soit des
   <button> de .sig-tabs, qui ont juste besoin du même style. */
:is(.file-choice, .sig-tabs) .file-choice-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; font-family: var(--font-head); font-weight: 600; font-size: 0.88rem;
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
:is(.file-choice, .sig-tabs) .file-choice-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); text-decoration: none; }
/* La prise de selfie est le chemin principal (photo prise à l'instant) : on la
   met en avant, « Choisir un fichier » reste une option secondaire discrète.
   Même spécificité que la règle de base ci-dessus : sans ça, la règle de
   base — plus haut mais tout aussi spécifique désormais — gagnerait et le
   bouton resterait blanc au lieu de bleu. */
:is(.file-choice, .sig-tabs) .file-choice-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
:is(.file-choice, .sig-tabs) .file-choice-btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.file-choice-status { font-size: 0.88rem; color: var(--muted); margin: 0; }
.file-choice-status.is-filled { color: var(--accent); font-weight: 600; }

/* Vignette d'aperçu affichée après sélection, à la place du seul nom de fichier.
   Nommée à part (pas « .file-preview ») : ce nom est déjà pris plus bas par la
   galerie d'aperçus de l'admin (figure/figcaption), qui n'a rien à voir. */
.upload-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--border); background: var(--bg); flex-shrink: 0; }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-thumb-doc { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.6rem; }
.upload-thumb--clickable { cursor: zoom-in; }
.upload-thumb--clickable:hover { border-color: var(--primary); }

/* Agrandissement de la vignette d'aperçu au clic. */
.lightbox-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,.86); display: flex; align-items: center; justify-content: center; padding: 30px; }
.lightbox-modal[hidden] { display: none; }
.lightbox-modal img { max-width: min(90vw, 640px); max-height: 85vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.28); }

/* Pavé de signature tactile */
/* Prise de vue par la webcam (ordinateur) */
.cam-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cam-modal[hidden] { display: none; }
.cam-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 24px; width: 100%; max-width: 520px; }
.cam-title { margin: 0 0 6px; font-size: 1.15rem; }
.cam-hint { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.cam-stage { position: relative; background: #0f172a; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.cam-stage video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
/* Repère de cadrage : aide au centrage du visage, purement visuel. */
.cam-guide { position: absolute; left: 50%; top: 48%; width: 46%; aspect-ratio: 4/5; transform: translate(-50%,-50%); border: 2px dashed rgba(255,255,255,.75); border-radius: 50% / 42%; pointer-events: none; }
.cam-error { margin: 12px 0 0; padding: 10px 14px; background: #fef2f2; border-left: 4px solid var(--danger); border-radius: 8px; color: #7f1d1d; font-size: .9rem; }
.cam-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cam-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 480px) { .cam-actions .btn { flex: 1 1 100%; justify-content: center; } }

.sig-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sig-hint { cursor: pointer; }
.sig-hint:hover { color: var(--primary); }

/* Fenêtre de signature : une grande zone de dessin plutôt qu'un pavé étriqué
   coincé dans la page, plus confortable à signer au doigt comme à la souris. */
.sig-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sig-modal[hidden] { display: none; }
.sig-modal-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 24px; width: 100%; max-width: 720px; }
.sig-modal-title { font-size: 1.1rem; margin: 0 0 14px; }
.sig-modal-canvas { width: 100%; aspect-ratio: 900/380; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.sig-modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.sig-modal-actions-right { display: flex; gap: 10px; }
/* Aperçus des fichiers client dans la fiche commande admin */
.file-previews { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.file-preview { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.file-preview figcaption { font-weight: 600; font-size: 0.9rem; }
.file-preview-img { width: 190px; height: 240px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 10px; display: block; }
.file-preview-doc { width: 190px; height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--border); border-radius: 10px; background: #fff; font-weight: 700; text-align: center; }
.file-preview-actions { display: flex; gap: 8px; }

.ia-verdict { background: var(--bg); border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; max-width: 320px; }
.ia-verdict p { margin: 4px 0 0; }
.ia-conforme { border-left: 3px solid var(--accent); }
.ia-non_conforme { border-left: 3px solid var(--danger); }
.ia-indetermine { border-left: 3px solid #999; }

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tabs a { padding: 6px 14px; border-radius: 20px; background: #fff; border: 1px solid var(--border); font-size: 0.85rem; color: var(--text); }
.filter-tabs a.active, .filter-tabs a:hover { background: var(--primary); color: #fff; border-color: var(--primary); text-decoration: none; }

.order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.mini-table { width: 100%; margin-top: 16px; border-collapse: collapse; }
.mini-table th, .mini-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9rem; }
.mini-table th { color: var(--muted); font-weight: 600; width: 40%; }
.admin-form { max-width: 560px; background: #fff; padding: 26px; border-radius: var(--radius); box-shadow: var(--shadow); }

.email-template-card { cursor: pointer; }
.email-template-swatch { width: 100%; aspect-ratio: 4/1.4; }

.email-edit-layout { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 26px; align-items: start; }
.email-edit-layout .admin-form { max-width: none; }
.email-preview { position: sticky; top: 20px; background: #e2e8f0; border-radius: var(--radius); padding: 14px; }
.email-preview-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.email-preview-frame { width: 100%; height: 560px; border: none; border-radius: 10px; background: #fff; }
@media (max-width: 900px) { .email-edit-layout { grid-template-columns: 1fr; } .email-preview { position: static; } }

.shipping-mode-choice { display: flex; flex-direction: column; gap: 10px; }
.shipping-mode-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.shipping-mode-option:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.shipping-mode-option input { margin-top: 4px; }

/* Menu mobile : le nav principal devient un panneau déroulant sous le header */
@media (max-width: 860px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  /* Une valeur fixe se retrouve toujours trop juste dès qu'un lien s'ajoute
     (le dernier était alors rogné) : on prend large et on laisse défiler au
     besoin plutôt que de deviner une hauteur exacte à chaque ajout de lien. */
  .main-nav.open { max-height: 80vh; overflow-y: auto; }
  .main-nav a { padding: 15px 20px; border-bottom: 1px solid var(--border); width: 100%; }
  .main-nav a:not(.cart-link)::after { display: none; }
  .cart-link-label { display: none; }
}

@media (max-width: 780px) {
  .top-banner { font-size: 0.7rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-cta-row, .hero-badges { justify-content: center; }
  .hero-card { animation: none; transform: none; }
  .section-heading-left { text-align: center; }
  /* Menu admin en tiroir latéral plutôt qu'en volet déroulant du haut : le
     bandeau logo reste fixe en haut, le <nav> devient un panneau qui glisse
     depuis la gauche par-dessus le contenu, avec un fond assombri derrière. */
  .admin-shell { display: block; }
  .admin-sidebar { width: 100%; padding-bottom: 0; position: sticky; top: 0; z-index: 1001; }
  .admin-logo { padding: 14px 16px; }
  .admin-nav-toggle { display: flex; align-items: center; justify-content: center; }
  .admin-sidebar nav {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 82vw;
    overflow-y: auto; padding: 70px 0 20px;
    background: #10192e;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .admin-sidebar nav.open { transform: translateX(0); }
  .admin-nav-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1000;
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  .admin-nav-backdrop.open { opacity: 1; pointer-events: auto; }
  .admin-content { padding: 22px 16px; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .callout { flex-direction: column; }

  /* Liste des commandes (8 colonnes) : illisible en tableau sur un écran
     étroit, on forçait à défiler horizontalement pour tout voir. Devient une
     liste de cartes empilées, comme le panier. */
  .table-responsive:has(.admin-table--stack) { overflow-x: visible; box-shadow: none; border-radius: 0; }
  /* min-width: 0 remplace le min-width: 560px de la règle .admin-table
     générale (pensée pour un tableau classique) : sans ça il force encore la
     largeur et fait déborder le mode cartes. */
  .admin-table--stack, .admin-table--stack tbody, .admin-table--stack tr, .admin-table--stack td { display: block; width: 100%; min-width: 0; }
  .admin-table--stack thead { display: none; }
  .admin-table--stack tr { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
  .admin-table--stack td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: none; text-align: right; }
  .admin-table--stack td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 0.88rem; text-align: left; }
  .admin-table--stack td.admin-table-stack-title { display: block; text-align: left; font-weight: 700; font-size: 1rem; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
  .admin-table--stack td.admin-table-stack-title::before { content: none; }
  .admin-table--stack td.admin-table-stack-action { justify-content: flex-end; padding-top: 10px; }

  /* Panier : la table devient une liste de cartes empilées (illisible en colonnes
     sur un écran étroit : le nom du produit se coupe mot à mot et les dernières
     colonnes sortent de l'écran). */
  .cart-table-wrap { background: transparent; box-shadow: none; padding: 0; overflow-x: visible; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
  .cart-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: none; text-align: right; }
  .cart-table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 0.88rem; text-align: left; }
  .cart-table td.cart-cell-name { display: block; text-align: left; font-weight: 700; font-size: 1rem; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
  .cart-table td.cart-cell-remove { justify-content: flex-end; padding-top: 10px; }
  .cart-summary { flex-direction: column; align-items: stretch; }
  .cart-summary .btn { width: 100%; }
}

/* Photo déjà prise et validée par l'application mobile (checkout) */
.photo-validee { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.photo-validee-img { width: 92px; height: auto; border-radius: 6px; border: 1px solid #d9dee5; }
.photo-validee .note { margin: 0; flex: 1 1 200px; }

/* Photo conservée par le client malgré le refus du contrôle automatique */
.alerte-forcage {
  background: #fef3c7; border: 1px solid #fcd34d; border-left: 4px solid #b45309;
  border-radius: 8px; padding: .7rem .9rem; margin: .6rem 0; color: #78350f;
}
.alerte-forcage strong { display: block; margin-bottom: .3rem; }
.alerte-forcage p { margin: .2rem 0; font-size: .9rem; }

/* Réglages des connexions sociales */
.oauth-bloc { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.oauth-bloc legend { font-family: var(--font-head); font-weight: 700; color: var(--primary-dark); padding: 0 .5rem; }
.oauth-bloc textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .82rem; }

/* Connexion par compte externe */
.oauth-choix { margin-top: 1.4rem; }
.oauth-separateur { position: relative; text-align: center; margin: 0 0 1rem; }
.oauth-separateur::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border);
}
.oauth-separateur span {
  position: relative; background: var(--white); padding: 0 .8rem;
  color: var(--muted); font-size: .84rem;
}
.oauth-boutons { display: grid; gap: .55rem; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 46px; padding: .6rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.oauth-btn:hover { text-decoration: none; background: #f8fafc; }
.oauth-btn--apple { background: #000; color: #fff; border-color: #000; }
.oauth-btn--apple:hover { background: #1a1a1a; }
.oauth-logo { display: flex; }

/* Avis clients */
.avis-etoiles { color: #d97706; letter-spacing: 1px; }
.avis-liste { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.avis-item { border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px); padding: 1rem 1.25rem; background: #fff; }
.avis-item-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.avis-item p { margin: 0; }

/* Onglets simples d'administration (ex. modération des avis) */
.admin-tabs { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.admin-tabs a { padding: .5rem 1rem; border-radius: var(--radius, 8px); border: 1px solid var(--border, #e2e8f0); text-decoration: none; color: inherit; }
.admin-tabs a.active { background: var(--primary, #0369a1); color: #fff; border-color: var(--primary, #0369a1); }