/* ==========================================================
   Modernisation du design A
   Active quand <html> porte la classe .mod (index.html). Même identité : vert #23848A,
   menu sapin #04344A, Plus Jakarta Sans + Sora pour les titres.
   ========================================================== */
.mod {
  --r-m: 14px; --r-l: 20px; --r-xl: 24px;
  --sh-1: 0 1px 2px rgba(8,36,48,.04), 0 8px 24px -12px rgba(8,36,48,.14);
  --sh-2: 0 2px 4px rgba(8,36,48,.05), 0 22px 44px -18px rgba(8,36,48,.28);
  --line-m: rgba(8,36,48,.08);
  --grad: linear-gradient(180deg, #2A9599, #23848A);
  --display: 'Sora', 'Plus Jakarta Sans', sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);
  scrollbar-color: #B8C5C9 transparent;
}
.mod ::selection { background: rgba(35,132,138,.18); }
.mod body {
  background:
    radial-gradient(1100px 520px at 105% -8%, rgba(35,132,138,.09), transparent 60%),
    radial-gradient(800px 480px at -10% 108%, rgba(91,192,194,.08), transparent 60%),
    #F2F7F7;
  background-attachment: fixed;
}
.mod ::-webkit-scrollbar { width: 10px; height: 10px; }
.mod ::-webkit-scrollbar-thumb { background: #C3CED2; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------- Typographie ---------- */
.mod h1, .mod h2, .mod .hero h2, .mod .login-art h1 { font-family: var(--display); letter-spacing: -.035em; }
.mod h1 { font-size: 30px; }
.mod .page-head p { font-size: 14.5px; }
.mod h3 { letter-spacing: -.01em; }
.mod .stat .value, .mod .p-price, .mod .pd .price, .mod .summary-row.total, .mod .li-total { font-family: var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- Menu latéral ---------- */
.mod .sidebar { background: linear-gradient(180deg, #06405A 0%, #04344A 55%, #032A3C 100%); box-shadow: 6px 0 16px -2px rgba(4,52,74,.35), 22px 0 48px -10px rgba(4,52,74,.45); }
.mod .sidebar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask: linear-gradient(180deg, #000, transparent 35%); mask: linear-gradient(180deg, #000, transparent 35%); }
.mod .brand-logo { filter: drop-shadow(0 4px 12px rgba(91,192,194,.35)); }
.mod .nav a { position: relative; border-radius: 12px; padding: 11px 12px; transition: background .2s, color .2s, transform .25s var(--ease-out); }
.mod .nav a:hover { transform: translateX(3px); background: rgba(255,255,255,.06); }
.mod .nav a.active { background: linear-gradient(90deg, rgba(91,192,194,.24), rgba(91,192,194,.06)); box-shadow: inset 0 0 0 1px rgba(91,192,194,.18); }
.mod .nav a.active::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #5BC0C2; box-shadow: 0 0 14px rgba(91,192,194,.8); }
.mod .sidebar-foot { position: relative; z-index: 1; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }

/* ---------- Barre du haut en verre ---------- */
.mod .topbar { background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line-m); }
.mod .topbar .search .input { border-radius: 12px; background: rgba(242,247,247,.9); transition: box-shadow .2s, background .2s, max-width .3s var(--ease-out); }
.mod .topbar .search { position: relative; }
.mod .topbar .search::after { content: '/'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 11px 'Plus Jakarta Sans'; color: #8F9EA3; border: 1px solid #D5DDE0; border-radius: 6px; padding: 1px 7px; background: #fff; pointer-events: none; }
.mod .topbar .search:focus-within::after { opacity: 0; }
.mod .icon-btn { border-radius: 12px; transition: background .2s, transform .2s var(--ease-out); }
.mod .icon-btn:hover { background: rgba(35,132,138,.08); transform: translateY(-1px); }
.mod .user-chip { border-radius: 14px; transition: background .2s; }
.mod .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(35,132,138,.35); }

/* ---------- Cartes ---------- */
.mod .card, .mod .p-card, .mod .cat-tile, .mod .modal { border-radius: var(--r-l); border-color: var(--line-m); box-shadow: var(--sh-1); }
.mod .card { transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.mod a.card:hover, .mod .card.stat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.mod .card-head { border-bottom-color: var(--line-m); }
.mod .stat { position: relative; overflow: hidden; }
.mod .stat::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(35,132,138,.08), transparent); pointer-events: none; }
.mod .stat .value { font-size: 28px; }

/* ---------- Boutons ---------- */
.mod .btn { border-radius: 12px; position: relative; overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .25s, background .2s, border-color .2s, filter .2s; }
.mod .btn-primary { background: var(--grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -6px rgba(35,132,138,.65); }
.mod .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 24px -8px rgba(35,132,138,.7); background: var(--grad); }
.mod .btn-outline, .mod .btn-outline-green, .mod .btn-danger-outline { box-shadow: 0 1px 2px rgba(8,36,48,.06); }
.mod .btn-outline:hover, .mod .btn-outline-green:hover, .mod .btn-danger-outline:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(8,36,48,.3); }
.mod .btn-sm { border-radius: 10px; } .mod .btn-xs { border-radius: 9px; }
.mod .btn:active { transform: translateY(0) scale(.97); }
.mod .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .25; pointer-events: none; animation: m-ripple .6s ease-out forwards; }
@keyframes m-ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Champs ---------- */
.mod .input, .mod .select, .mod .textarea { height: 46px; border-radius: 12px; border-color: #DCE3E5; background: #fff; box-shadow: 0 1px 2px rgba(8,36,48,.04); }
.mod .textarea { height: auto; }
.mod .input:hover, .mod .select:hover, .mod .textarea:hover { border-color: #C4CFD3; }
.mod .input:focus, .mod .select:focus, .mod .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(35,132,138,.14); }
.mod .search-big .input { height: 52px; border-radius: 14px 0 0 14px; }
.mod .search-big .btn { height: 52px; border-radius: 0 14px 14px 0; width: 60px; }

/* ---------- Filtres & onglets ---------- */
.mod .tab { height: 36px; border-color: var(--line-m); background: rgba(255,255,255,.8); transition: all .2s var(--ease-out); }
.mod .tab:hover { transform: translateY(-1px); background: #fff; }
.mod .tab.active { background: var(--grad); box-shadow: 0 6px 14px -6px rgba(35,132,138,.6); }
.mod .tab .n { background: rgba(8,36,48,.07); border-radius: 99px; padding: 0 7px; opacity: 1; font-weight: 700; }
.mod .tab.active .n { background: rgba(255,255,255,.22); }
.mod .utab { position: relative; border-bottom: 0; }
.mod .utab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.mod .utab.active::after { transform: scaleX(1); }

/* ---------- Tableaux ---------- */
.mod .table th { background: rgba(242,247,247,.7); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); position: sticky; top: 0; z-index: 1; }
.mod .table td { border-bottom-color: var(--line-m); }
.mod .table tbody tr td:first-child { box-shadow: inset 0 0 0 0 var(--primary); transition: box-shadow .2s; }
.mod .table tbody tr:hover { background: rgba(35,132,138,.045); }
.mod .table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--primary); }
.mod .table .thumb { border-radius: 10px; }

/* ---------- Accueil ---------- */
.mod .hero { border-radius: var(--r-xl); min-height: 260px; box-shadow: var(--sh-2); }
.mod .hero::before { background: linear-gradient(90deg, rgba(5,22,30,.94) 0%, rgba(4,38,52,.68) 45%, rgba(4,38,52,.05) 85%), radial-gradient(60% 80% at 0% 100%, rgba(91,192,194,.35), transparent 70%); }
.mod .hero h2 { font-size: 32px; line-height: 1.08; }
.mod .hero .btn-primary { box-shadow: 0 10px 26px -8px rgba(91,192,194,.7); }
.mod .hero-dots span { height: 6px; }
.mod .hero-dots span.on { width: 28px; box-shadow: 0 0 10px rgba(91,192,194,.8); }
.mod .search-big { box-shadow: var(--sh-1); border-radius: 14px; }
.mod .cat-tile { border-radius: var(--r-l); }
.mod .cat-tile:hover { transform: translateY(-4px); }

/* ---------- Catalogue & produit ---------- */
.mod .p-card { transform-style: preserve-3d; transition: transform .25s var(--ease-out), box-shadow .3s; }
.mod .p-card:hover { box-shadow: var(--sh-2); }
.mod .p-img { margin: 8px 8px 0; border-radius: 14px; height: 150px; }
.mod .p-img .tag { backdrop-filter: blur(6px); }
.mod .p-price { font-size: 18px; color: #1C6F74; }
.mod .pd-img { border-radius: var(--r-l); box-shadow: var(--sh-1); }
.mod .pd .price { font-size: 32px; background: linear-gradient(90deg, #1C6F74, #2A9599); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mod .opt, .mod .pay-option, .mod .method, .mod .acc { border-radius: var(--r-m); transition: border-color .2s, background .2s, transform .2s var(--ease-out), box-shadow .2s; }
.mod .opt:hover, .mod .pay-option:hover, .mod .method:hover, .mod .acc:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.mod .opt.on, .mod .pay-option.on, .mod .method.on { box-shadow: 0 0 0 3px rgba(35,132,138,.12); }
.mod .qty { border-radius: 12px; }

/* ---------- Étapes ---------- */
.mod .step .n { transition: all .3s var(--ease-out); }
.mod .step.on .n { background: var(--grad); box-shadow: 0 0 0 5px rgba(35,132,138,.14), 0 6px 14px -4px rgba(35,132,138,.6); }
.mod .step-line { height: 3px; }
.mod .step-line.done { background: linear-gradient(90deg, #23848A, #5BC0C2); }

/* ---------- Fenêtres, notifications, toasts ---------- */
.mod .modal-back { background: rgba(3,26,36,.42); backdrop-filter: blur(8px); }
.mod .modal { border-radius: var(--r-xl); box-shadow: 0 40px 90px -30px rgba(3,26,36,.55); animation: m-modal .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes m-modal { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.mod .dropdown-panel { border-radius: 18px; border-color: var(--line-m); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); box-shadow: var(--sh-2); }
.mod .notif { border-radius: 12px; }
.mod .toast { border-radius: 14px; background: rgba(4,52,74,.92); backdrop-filter: blur(10px); position: relative; overflow: hidden; padding: 13px 18px; }
.mod .toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #5BC0C2, #23848A); transform-origin: left; animation: m-toast 3.2s linear forwards; }
@keyframes m-toast { to { transform: scaleX(0); } }
.mod .alert { border-radius: var(--r-m); }
.mod .empty .ic { border-radius: 22px; }

/* ---------- Apparition au défilement ---------- */
.mod .reveal { opacity: 0; transform: translateY(16px); }
.mod .reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }

/* ---------- Connexion ---------- */
.mod .login-art { background: linear-gradient(130deg, #032634, #04344A 35%, #0E425A 65%, #23848A); background-size: 220% 220%; animation: m-mesh 14s ease-in-out infinite alternate; }
@keyframes m-mesh { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.mod .login-art h1 { font-size: 44px; line-height: 1.05; }
.mod .login-feats div { border-radius: 18px; backdrop-filter: blur(8px); transition: transform .3s var(--ease-out), background .3s; }
.mod .login-feats div:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.mod .login-form { background: transparent; }
.mod .acc { border-color: var(--line-m); box-shadow: 0 1px 2px rgba(8,36,48,.04); }

@media (prefers-reduced-motion: reduce) {
  .mod *, .mod *::before, .mod *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .mod .reveal { opacity: 1; transform: none; }
}

/* ---------- Listes déroulantes modernes ---------- */
.m-select { position: relative; display: block; min-width: 0; }
.m-select > select.select { position: absolute; inset: 0; opacity: 0; pointer-events: none; height: 100%; }
.m-select-btn { width: 100%; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border: 1px solid #DCE3E5; border-radius: 12px; background: #fff;
  font: 600 14px 'Plus Jakarta Sans', sans-serif; color: var(--text); cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(8,36,48,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.m-select-btn:hover { border-color: #C4CFD3; transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(8,36,48,.3); }
.m-select-btn:focus-visible, .m-select.open .m-select-btn { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(35,132,138,.14); transform: none; }
.m-select-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.m-select-val span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-opt-ico { font-size: 18px; color: var(--primary); flex-shrink: 0; }
.m-caret { font-size: 16px; color: var(--muted); transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .2s; }
.m-select.open .m-caret { transform: rotate(180deg); color: var(--primary); }
.m-select-menu { position: fixed; z-index: 400; max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 16px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(8,36,48,.08); box-shadow: 0 24px 48px -18px rgba(3,26,36,.35), 0 2px 6px rgba(8,36,48,.06);
  transform-origin: top center; animation: m-menu .22s cubic-bezier(.22,1,.36,1); scrollbar-width: thin; }
.m-select-menu.up { transform-origin: bottom center; }
@keyframes m-menu { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.m-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; cursor: pointer; font: 600 13.5px 'Plus Jakarta Sans', sans-serif; color: var(--text-2);
  transition: background .15s, color .15s, padding-left .2s cubic-bezier(.22,1,.36,1); white-space: nowrap; }
.m-opt span { flex: 1; }
.m-opt .m-opt-ico { color: var(--muted); transition: color .15s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.m-opt.kb { background: rgba(35,132,138,.08); color: var(--text); padding-left: 15px; }
.m-opt.kb .m-opt-ico { color: var(--primary); transform: scale(1.15); }
.m-opt-check { font-size: 16px; color: var(--primary); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.m-opt.on { color: var(--primary-700); font-weight: 700; background: linear-gradient(90deg, rgba(35,132,138,.12), rgba(35,132,138,.04)); }
.m-opt.on .m-opt-ico { color: var(--primary); }
.m-opt.on .m-opt-check { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .m-select-menu { animation: none; } }

/* ---------- Champs avec icône (moderne.js : M_enhanceInputs) ---------- */
.f-ic { position: relative; display: block; min-width: 0; }
.row > .f-ic, .form-grid .row > .f-ic { flex: 1 1 0; }
.f-ic > .f-icn { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--muted); pointer-events: none; z-index: 1; transition: color .2s, transform .3s var(--spring, ease); }
.f-ic.f-ta > .f-icn { top: 13px; transform: none; }
.f-ic > .input, .f-ic > .textarea { padding-left: 40px; width: 100%; }
.f-ic:focus-within > .f-icn { color: var(--primary); transform: translateY(-50%) scale(1.12); }
.f-ic.f-ta:focus-within > .f-icn { transform: scale(1.12); }
.f-ic:has(> .input:invalid:not(:placeholder-shown)) > .f-icn { color: var(--danger); }
[data-theme="dark"] .pp-card { border-color: rgba(255,255,255,.14); }
.mod .f-ic > .input::placeholder, .mod .f-ic > .textarea::placeholder { color: #8FA3AB; }

/* ---------- Photos : prendre une photo / galerie ---------- */
.pp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 120px; padding: 18px 10px;
  border: 1.5px dashed #D6DEE0; border-radius: 18px; background: var(--surface, #fff); cursor: pointer; font: 700 13.5px 'Plus Jakarta Sans', sans-serif; color: var(--text);
  transition: border-color .2s, background .2s, transform .25s var(--spring, ease); }
.pp-card:hover { border-color: var(--primary); background: var(--primary-50); transform: translateY(-2px); }
.pp-tile { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; color: var(--primary-700); background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--primary-200); }
.pp-tile.solid { color: #fff; background: linear-gradient(180deg, #2A9599, #1C6F74); box-shadow: 0 8px 18px -8px rgba(35,132,138,.8); }
.pp-tile.solid i.icn.ph-duotone::before { color: #fff; opacity: .35; }
.pp-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pp-list:empty { display: none; }
.pp-thumb { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--surface-2, #F2F7F7); box-shadow: inset 0 0 0 1px var(--border); }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb.is-main { box-shadow: 0 0 0 2.5px var(--primary); }
.pp-thumb.broken img { display: none; }
.pp-thumb.broken::after { content: 'Image introuvable'; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--muted); padding: 6px; }
.pp-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; }
.pp-del, .pp-main { position: absolute; top: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(10,24,30,.62); color: #fff; font-size: 14px; backdrop-filter: blur(4px); }
.pp-del { right: 6px; } .pp-main { left: 6px; }
.pp-del:hover { background: var(--danger); } .pp-main:hover { background: var(--primary); }
.pp-url { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pp-url summary { cursor: pointer; font-weight: 600; }
.cam-box { border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.cam-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .pp-card { min-height: 104px; font-size: 12.5px; } .pp-thumb { width: 84px; height: 84px; } }

/* ---------- Support : cartes de contact ---------- */
.contact-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-width: 0; color: inherit; }
.contact-card > div { min-width: 0; }
.contact-card .strong { font-size: 15px; line-height: 1.3; }
.contact-card .cc-mail { overflow-wrap: break-word; }
.cc-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, #23848A, #5BC0C2); box-shadow: 0 8px 18px -8px rgba(35,132,138,.7); transition: transform .35s var(--spring, ease); }
.cc-ic i.icn.ph-duotone::before { color: #fff; opacity: .4; }
.contact-card:hover .cc-ic { transform: translateY(-2px) rotate(-6deg); }
.mod a.contact-card:hover { transform: translateY(-3px); }

/* ---------- Recherche du haut : largeur minimale, texte qui ne passe plus sous la touche « / » ---------- */
.topbar .search { flex: 1 1 320px; min-width: 270px; }
.topbar .search .input { padding-right: 40px; text-overflow: ellipsis; }
.topbar .search .input::placeholder { text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .mod .topbar .search::after { display: none; }   /* raccourci clavier « / » : utile seulement sur grand écran */
  .topbar .search .input { padding-right: 14px; }
}
@media (max-width: 960px) { .topbar .search { min-width: 180px; } .m-title { flex-shrink: 1; } }