:root {
  --navy: #1d3b4c;
  --navy-dark: #12262f;
  --gold: #d8a425;
  --gold-light: #f3e0ad;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1f2a30;
  --muted: #66757d;
  --border: #e1e6e9;
  --danger: #b3432e;
  --ok: #2f7a4f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.topbar {
  background: var(--navy);
  color: white;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
header.topbar img { height: 42px; }
header.topbar .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
header.topbar .brand-text strong { font-size: 1.05rem; }
header.topbar .brand-text span { color: var(--gold); font-size: 0.85rem; }
header.topbar .topbar-brand-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
header.topbar nav { margin-left: auto; display: flex; gap: 16px; }
header.topbar nav a { color: white; text-decoration: none; opacity: 0.85; font-size: 0.9rem; }
header.topbar nav a:hover { opacity: 1; text-decoration: underline; }
header.topbar nav .topbar-logout-btn {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.9;
}
header.topbar nav .topbar-logout-btn:hover { opacity: 1; background: rgba(255,255,255,0.12); }

/* Menu du header adapté au téléphone -- demande du 22/08/2026. Le bouton
   hamburger (#navToggle) n'existe/n'est visible qu'en dessous du seuil
   mobile ci-dessous ; au-dessus, le menu reste affiché en ligne comme
   avant et ce bloc n'a aucun effet (voir aussi nav.js). */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 6px;
  color: white;
  width: 40px;
  height: 36px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); }

@media (max-width: 760px) {
  header.topbar { flex-wrap: wrap; }
  .nav-toggle { display: block; }
  header.topbar nav.site-nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  header.topbar nav.site-nav.open { display: flex; }
  header.topbar nav.site-nav a,
  header.topbar nav.site-nav .topbar-logout-btn,
  header.topbar nav.site-nav .share-btn {
    padding: 10px 4px;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
  }
  header.topbar nav.site-nav .topbar-logout-btn { margin-top: 4px; }
  /* Espace admin (admin.php) : nav plus courte (2 liens + déconnexion), pas
     besoin d'un hamburger -- un simple retour à la ligne suffit. */
  header.topbar nav:not(.site-nav) { flex-wrap: wrap; justify-content: flex-end; gap: 8px; row-gap: 6px; }
}

/* Diaporama page d'accueil (photos/vidéos gérables depuis l'admin, juste
   avant "Nos points de vente") -- demande du 22/08/2026. .home-slider-track
   impose une taille d'affichage TOUJOURS identique (aspect-ratio fixe +
   object-fit: cover sur chaque image/vidéo), quelle que soit la taille
   réelle du fichier envoyé par l'admin, pour rester homogène d'un slide à
   l'autre. */
.home-slider-card { padding: 0; overflow: hidden; }
.home-slider { position: relative; }
.home-slider-track {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 8;
  overflow: hidden;
  background: #0d1b26;
}
@media (max-width: 640px) {
  .home-slider-track { aspect-ratio: 4 / 3; }
}
.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.home-slide.active { opacity: 1; pointer-events: auto; }
.home-slide img, .home-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
}
.home-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 20, 30, 0.45);
  color: white;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-slider-nav:hover { background: rgba(10, 20, 30, 0.7); }
.home-slider-prev { left: 12px; }
.home-slider-next { right: 12px; }
.home-slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.home-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid white;
  background: rgba(255,255,255,0.35);
  padding: 0;
  cursor: pointer;
}
.home-slider-dot.active { background: white; }

.home-hero { text-align: center; padding: 32px 22px; }
.home-hero h1 { font-size: 1.7rem; }
.home-hero .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
.home-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.primary-link, .secondary-link {
  display: inline-block;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.98rem;
}
.primary-link { background: var(--gold); color: var(--navy-dark); }
.primary-link:hover { filter: brightness(1.05); }
.secondary-link { background: white; color: var(--navy); border: 1.5px solid var(--navy); }
.secondary-link:hover { background: #eef3f6; }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
/* Page d'accueil : demande explicite du 22/08/2026 ("faut que ca s'adapte
   automatique a tout les ecran"). Sur grand ecran, la limite generique de
   760px laissait un enorme vide de part et d'autre (points de vente et
   nouveautes n'affichaient jamais plus d'une ou deux colonnes meme avec de
   la place disponible) -- la page d'accueil profite desormais de plus de
   largeur, ce qui permet aux grilles (.stores-grid, .product-grid, deja en
   `repeat(auto-fill, minmax(...))`) d'afficher naturellement plus de
   colonnes sur les grands ecrans, sans rien changer aux autres pages
   (rendez-vous, mentions legales, connexion) qui restent volontairement
   plus etroites pour la lisibilite d'un formulaire/texte long. */
main.home-main { max-width: 1100px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04);
}

h1 { font-size: 1.5rem; color: var(--navy); margin: 6px 0 4px; }
h2 { font-size: 1.05rem; color: var(--navy); margin: 0 0 14px; border-bottom: 2px solid var(--gold-light); padding-bottom: 8px; }
p.lead { color: var(--muted); margin-top: 0; }

.step-label {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  margin-right: 8px;
}

label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}
small.hint { color: var(--muted); display: block; margin-top: 4px; }

.services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }
.service-option {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: 0.15s;
}
.service-option:hover { border-color: var(--gold); }
.service-option.selected { border-color: var(--navy); background: #eef3f6; }
.service-option strong { display: block; font-size: 0.9rem; color: var(--navy); }
.service-option span { font-size: 0.8rem; color: var(--muted); }
.service-option .tag {
  display: block;
  width: fit-content;
  font-size: 0.7rem;
  color: var(--navy);
  background: var(--gold-light);
  padding: 1px 7px;
  border-radius: 10px;
  margin: 3px 0 4px;
}
.service-option .desc { display: block; }

.cat-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.cat-list label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text); margin: 0; }
.cat-list input[type=checkbox] { width: auto; }
button.secondary {
  background: white;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
}
button.secondary:hover { background: #eef3f6; }
button.secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.slots { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.slot-btn {
  flex: 1 1 100px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: white;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}
.slot-btn.selected { background: var(--navy); color: white; border-color: var(--navy); }
.slot-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

.price-box {
  display: flex; align-items: center; justify-content: space-between;
  background: #fdf7e8; border: 1px solid var(--gold-light); border-radius: 8px;
  padding: 12px 16px; margin-top: 10px;
}
.price-box .amount { font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.price-box .zone-label { font-size: 0.8rem; color: var(--muted); }

button.primary {
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 16px;
}
button.primary:hover { filter: brightness(1.05); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.msg { padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; margin-top: 12px; }
.msg.error { background: #fbe9e5; color: var(--danger); border: 1px solid #f0c4b8; }
.msg.ok, .msg.success { background: #e7f4ec; color: var(--ok); border: 1px solid #bfe2cc; }
.msg.muted { background: #eef1f3; color: var(--muted); }
.msg.warn { background: #fdf1d8; color: #8a6d16; border: 1px solid #f3ddac; margin-top: 8px; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.86rem; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table th { color: var(--muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.02em; }
.admin-table tbody tr:hover { background: #f7f9fa; }
.photo-ok { color: var(--ok); font-weight: 700; }
.photo-note { color: #8a6d16; cursor: help; }

/* Tableaux de l'espace admin (rendez-vous, produits, fermetures, zones) sur
   smartphone : demande explicite du 22/08/2026 ("il faut que tout soit
   adapté à toutes les tailles d'écran"). Chaque tableau .admin-table se
   transforme en pile de "cartes" -- une par ligne -- avec le nom de colonne
   affiché devant chaque valeur (via data-label posé sur chaque <td> côté
   admin.js), plutôt que de rester une grille illisible ou de déborder de
   l'écran. */
@media (max-width: 760px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px;
    padding: 4px 12px; background: #fff;
  }
  .admin-table tr:last-child { margin-bottom: 0; }
  .admin-table td {
    text-align: left; padding: 8px 0; border-bottom: 1px solid #eef1f3;
  }
  .admin-table td:last-child { border-bottom: none; }
  /* Libellé de colonne au-dessus de la valeur (plutôt que côte à côte) :
     évite les retours à la ligne illisibles pour les champs longs (adresse,
     prestation...). */
  .admin-table td[data-label]::before {
    content: attr(data-label); display: block; font-weight: 700; color: var(--muted);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 3px;
  }
  /* Cellules sans intitulé de colonne (boutons d'action) : pas de label. */
  .admin-table td[data-label=""]::before { content: none; }
}

.diag-check { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: #fbfcfc; }
.diag-body {
  margin: 6px 0 0; padding: 8px 10px; background: #f4f6f7; border-radius: 6px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.78rem; white-space: pre-wrap;
  word-break: break-word; max-height: 220px; overflow-y: auto;
}

.cat-tree-admin { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px; }
.cat-tree-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.cat-tree-admin-row label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text); margin: 0; }
.cat-tree-admin-row input[type=checkbox] { width: auto; }
.cat-tree-admin-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cat-tree-admin-check { flex-shrink: 0; }
.cat-tree-admin-check-service {
  font-size: 0.78rem;
  color: var(--muted);
  border-left: 1px dashed var(--border);
  padding-left: 10px;
  margin-left: 2px;
}
.cat-tree-admin-check-service:has(input:checked) { color: var(--gold); font-weight: 600; }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 0.76rem; text-decoration: underline; font-family: inherit;
}
.link-btn:hover { color: var(--navy); }
.link-btn.danger:hover { color: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--navy); background: #f0f3f5; }
.badge { padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.badge.confirmed { background: #e7f4ec; color: var(--ok); }
.badge.cancelled { background: #fbe9e5; color: var(--danger); }
.badge.sync-yes { background: #e7f4ec; color: var(--ok); }
.badge.sync-no { background: #f3ecd6; color: #8a6d16; }
button.small { padding: 5px 10px; font-size: 0.78rem; border-radius: 6px; border: 1px solid var(--border); background: white; cursor: pointer; }
button.small:hover { border-color: var(--danger); color: var(--danger); }

footer.note {
  max-width: 760px; margin: 0 auto 40px; padding: 0 16px;
  color: var(--muted); font-size: 0.78rem;
}

/* --- Navigation client (Catalogue / Prise de rendez-vous), commune aux pages client --- */
header.topbar nav.site-nav { align-items: center; }
.nav-link { font-weight: 600; }
.nav-link.active { color: var(--gold); opacity: 1; text-decoration: underline; }
.nav-link.admin-link { opacity: 0.65; font-weight: 400; margin-left: 8px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.25); }

/* --- Footer legal commun (mentions legales, RGPD) --- */
footer.site-footer {
  background: var(--navy-dark); color: rgba(255,255,255,0.85);
  margin-top: 32px; padding: 32px 16px 20px;
}
.footer-cols {
  max-width: 900px; margin: 0 auto; display: grid;
  /* auto-fit plutot que repeat(3, 1fr) fixe : s'adapte proprement a 3
     colonnes (par defaut) ou 4 (quand la colonne "Suivez-nous" est affichee,
     voir #socialLinksFooterCol / social-links.js) sans casser la mise en
     page -- demande du 22/08/2026 (icones reseaux sociaux dans le pied de
     page). */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px;
}
.footer-cols strong { color: white; display: block; margin-bottom: 8px; font-size: 0.9rem; }
.footer-cols p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.footer-cols a { display: block; color: rgba(255,255,255,0.8); font-size: 0.82rem; text-decoration: none; margin-bottom: 4px; }
.footer-cols a:hover { text-decoration: underline; color: white; }
.footer-bottom {
  max-width: 900px; margin: 20px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.74rem; color: rgba(255,255,255,0.55);
}
@media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr; gap: 16px; } }

/* --- Icones reseaux sociaux (pied de page) + boutons "Partager" (header et
   fiche produit) -- demande du 22/08/2026 --- */
.social-links-footer { display: flex; flex-wrap: wrap; gap: 8px; }
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: white; font-size: 0.78rem; font-weight: 700;
  text-decoration: none; letter-spacing: -0.02em;
  transition: transform 0.15s ease, opacity 0.15s ease; opacity: 0.9;
}
.social-icon:hover { transform: translateY(-2px); opacity: 1; text-decoration: none; }

.nav-link.share-btn {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: inherit;
  padding: 0; margin: 0; opacity: 0.85;
}
.nav-link.share-btn:hover { opacity: 1; text-decoration: underline; }

.product-modal-share {
  display: inline-block; margin-top: 10px; background: none; cursor: pointer;
}

.share-popover {
  z-index: 200; background: white; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 8px; display: flex; flex-direction: column; min-width: 170px;
}
.share-popover a, .share-popover button {
  display: block; text-align: left; padding: 8px 10px; border-radius: 6px;
  color: var(--navy); text-decoration: none; font-size: 0.88rem;
  border: none; background: none; cursor: pointer; font-family: inherit;
}
.share-popover a:hover, .share-popover button:hover { background: #f0f3f5; }
.share-copy-btn { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }

/* --- Nos points de vente (accueil) --- */
.stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 4px; }
.store-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.store-photo { aspect-ratio: 16 / 9; background: #eef1f3; overflow: hidden; }
.store-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.store-name { color: var(--navy); font-size: 0.98rem; }
.store-line { font-size: 0.82rem; color: var(--muted); }
.store-website { color: var(--navy); text-decoration: underline; }
.store-status-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 0; }
.store-status-open { color: var(--ok); }
.store-status-soon { color: #8a6d16; }
.store-status-closed { color: var(--danger); }

/* --- Nouveautes (accueil) --- */
.product-grid-compact .product-card { cursor: default; text-decoration: none; color: inherit; }
.see-all-link { display: inline-block; margin-top: 10px; }

main.catalogue-main { max-width: 1240px; }

/* --- Catalogue produits (page catalogue.html) --- */
.cat-page-head h1 { margin-bottom: 2px; }
.cat-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 24px;
}
.cat-toolbar input[type=search] {
  flex: 1 1 280px; max-width: 420px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 24px; font-size: 0.95rem; font-family: inherit;
  background: var(--card);
}
.sync-info { font-size: 0.76rem; color: var(--muted); }

/* --- Page "Services d'impression" (services.html) -- a l'ecart du
   catalogue produits, demande du 22/08/2026 --- */
.services-group h2 { margin-bottom: 6px; }
.services-table { width: 100%; border-collapse: collapse; }
.services-table td { padding: 12px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.services-table tr:last-child td { border-bottom: none; }
.services-name-cell strong { color: var(--navy); }
.services-ref { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.services-desc { font-size: 0.86rem; color: var(--muted); margin-top: 4px; max-width: 560px; }
.services-price-cell { text-align: right; white-space: nowrap; font-weight: 700; color: var(--navy); vertical-align: middle; }
@media (max-width: 520px) {
  .services-table tbody, .services-table tr { display: block; }
  .services-table td { display: block; width: 100%; }
  .services-table tr { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 8px; }
  .services-table tr:last-child { border-bottom: none; }
  .services-table td { border-bottom: none; padding: 2px 0; }
  .services-price-cell { text-align: left; }
}

.cat-menu-toggle {
  display: none;
  align-items: center; gap: 7px;
  background: white; border: 1.5px solid var(--navy); color: var(--navy);
  padding: 9px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.cat-menu-toggle-icon::before { content: "☰"; }

.catalogue-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 28px;
  align-items: start;
}

.catalogue-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  position: sticky;
  top: 16px;
  box-shadow: 0 2px 14px rgba(18, 38, 47, 0.06);
}
.cat-sidebar-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--navy); margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--gold-light);
  display: flex; align-items: center; justify-content: space-between;
}
.cat-sidebar-close { display: none; background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 0 4px; }

.cat-tree { display: flex; flex-direction: column; gap: 2px; }
.cat-tree-item { margin-top: 1px; }
.cat-tree-children { margin-top: 2px; display: flex; flex-direction: column; gap: 2px; }
.cat-tree-row { display: flex; align-items: center; gap: 2px; }
.cat-tree-row .cat-tree-link { flex: 1 1 auto; min-width: 0; }
.cat-tree-toggle {
  flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px; cursor: pointer; color: var(--muted);
  font-size: 0.95rem; font-weight: 700; line-height: 1; padding: 0;
}
.cat-tree-toggle:hover { background: #eef3f6; color: var(--navy); }
.cat-tree-toggle-spacer { flex-shrink: 0; width: 22px; height: 22px; }
.cat-tree-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: none; border: none; border-left: 3px solid transparent; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; font-size: 0.86rem; color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
/* Indentation progressive par profondeur (0, 1, 2, ...) plutot que des
   traits de liaison imbriques : rendu plus sobre, plus proche d'un menu
   de boutique en ligne classique. Le niveau racine garde le padding par
   defaut de .cat-tree-link (10px) defini plus haut. */
.cat-tree-children .cat-tree-link { padding-left: 24px; font-size: 0.82rem; }
.cat-tree-children .cat-tree-children .cat-tree-link { padding-left: 38px; }
.cat-tree-children .cat-tree-children .cat-tree-children .cat-tree-link { padding-left: 52px; }
.cat-tree-link:hover { background: #eef3f6; }
.cat-tree-link.active {
  background: rgba(29, 59, 76, 0.07);
  border-left-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
}
.cat-tree-link.active .cat-count { background: var(--navy); color: white; }
.cat-tree-link.cat-tree-all {
  font-weight: 700; color: var(--navy);
  border-bottom: 1px solid var(--border); border-left: none; border-radius: 0;
  padding: 6px 10px 12px; margin-bottom: 6px;
}
.cat-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count {
  font-size: 0.68rem; font-weight: 700; color: var(--muted); background: #eef1f3;
  flex-shrink: 0; padding: 1px 7px; border-radius: 10px; min-width: 1.4em; text-align: center;
}

.cat-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 16px; font-size: 0.85rem; min-height: 1.5em; }
.crumb-link { background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--muted); font-size: inherit; font-family: inherit; }
.crumb-link:hover { text-decoration: underline; color: var(--navy); }
.crumb-link.active { color: var(--navy); font-weight: 700; }
.crumb-sep { color: var(--border); }

.catalogue-content { min-width: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 30, 40, 0.08); }
.product-card:hover .product-img::after { opacity: 1; }
.product-card.is-out { opacity: 0.72; }

.product-img {
  aspect-ratio: 1 / 1;
  background: #eef1f3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-placeholder { width: 40%; height: 40%; color: var(--border); }
/* Petite icone loupe discrete au survol : indique que la fiche s'agrandit au clic. */
.product-img::after {
  content: "🔍"; position: absolute; right: 8px; bottom: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; opacity: 0; transition: opacity 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.product-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-name { font-size: 0.95rem; color: var(--navy); line-height: 1.3; display: block; }
.product-ref { font-size: 0.7rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; white-space: nowrap; display: block; margin-bottom: 4px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.product-price { font-size: 1.1rem; font-weight: 700; color: var(--navy); }

.stock-line { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stock-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.stock-badge.ok { background: #e7f4ec; color: var(--ok); }
.stock-badge.last { background: #fdf1d8; color: #8a6d16; }
.stock-badge.rupture { background: #fbe9e5; color: var(--danger); }
.stock-qty { font-size: 0.68rem; color: var(--muted); }

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .product-body { padding: 10px; }
}

/* --- Fiche produit en grand (ouverte au clic sur une carte) --- */
.product-modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(18, 38, 47, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.product-modal-overlay[hidden] { display: none; }
.product-modal {
  background: var(--card);
  border-radius: 16px;
  max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 320px) 1fr;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  position: relative;
}
.product-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.92); color: var(--navy); font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.product-modal-img {
  background: #eef1f3; display: flex; align-items: center; justify-content: center;
  min-height: 240px; overflow: hidden;
}
.product-modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-modal-img .product-placeholder { width: 45%; height: 45%; color: var(--border); }
.product-modal-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.product-modal-cat { font-size: 0.74rem; color: var(--muted); }
.product-modal-name { font-size: 1.3rem; color: var(--navy); margin: 0; line-height: 1.25; }
.product-modal-ref { font-size: 0.76rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; }
.product-modal-desc { font-size: 0.92rem; color: var(--text); line-height: 1.5; }
.product-modal-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); }
.product-modal-price { font-size: 1.5rem; font-weight: 700; color: var(--navy); }

@media (max-width: 640px) {
  .product-modal { grid-template-columns: 1fr; max-height: 92vh; }
  .product-modal-img { min-height: 200px; }
}

/* --- Popup de confirmation personnalisee (admin, remplace confirm()) --- */
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(18, 38, 47, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.confirm-modal-overlay[hidden] { display: none; }
.confirm-modal {
  background: var(--card);
  border-radius: 14px;
  max-width: 420px; width: 100%;
  padding: 26px 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.confirm-modal h2 { margin: 0 0 12px; font-size: 1.1rem; color: var(--navy); }
.confirm-modal p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm-modal-actions button { margin-top: 0; }
button.confirm-modal-danger { background: var(--danger); color: white; }
button.confirm-modal-danger:hover { filter: brightness(1.08); }

/* --- Bandeau de consentement aux cookies (pages publiques) -- demande
   explicite du 22/08/2026 : "ajouté le bandeaux des cookies a valider ou
   refuser". Reutilise .confirm-modal-overlay/.confirm-modal (voir ci-dessus)
   pour la fenetre de blocage affichee en cas de refus (voir cookie-consent.js). --- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--navy); color: white;
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.cookie-banner-text { margin: 0; font-size: 0.88rem; line-height: 1.5; max-width: 640px; flex: 1 1 320px; }
.cookie-banner-text a { color: var(--gold-light); }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner-actions button { margin-top: 0; white-space: nowrap; }
@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
}

/* --- Catalogue : bascule menu categories en tiroir plein ecran sur mobile --- */
@media (max-width: 860px) {
  .catalogue-layout { grid-template-columns: 1fr; }
  .cat-menu-toggle { display: inline-flex; }
  .catalogue-sidebar {
    display: none;
    position: fixed; inset: 0; z-index: 60;
    border-radius: 0; max-height: 100vh; overflow-y: auto;
    padding: 18px 16px 40px;
  }
  .catalogue-sidebar.open { display: block; }
  .cat-sidebar-title { font-size: 0.95rem; margin-bottom: 16px; }
  .cat-sidebar-close { display: inline-block; }
  .cat-tree-link { padding: 10px 9px; font-size: 0.92rem; }
}

/* --- Espace admin : onglets, formulaires en ligne, pagination --- */
main.admin-main { max-width: 1080px; }

.admin-tabs { display: flex; gap: 4px; margin: 6px 0 20px; border-bottom: 2px solid var(--border); }
.admin-tab {
  background: none; border: none; padding: 10px 18px; font-size: 0.95rem; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
  font-family: inherit;
}
.admin-tab:hover { color: var(--navy); }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--gold); }

/* Sur mobile, les onglets admin deviennent un pseudo-slider horizontal
   (on glisse du doigt de gauche à droite) au lieu de passer à la ligne --
   demande du 22/08/2026. */
@media (max-width: 760px) {
  .admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .admin-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

.form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.form-row input[type=text] { width: auto; flex: 1; min-width: 180px; }
.form-row input[type=date] { width: auto; min-width: 150px; }
.form-row input[type=time] { width: auto; min-width: 100px; }
.form-row select { width: auto; }
.inline-label { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.checkbox-label { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 0.85rem; margin-top: 8px; cursor: pointer; }
.checkbox-label input[type=checkbox] { width: auto; margin-top: 2px; flex-shrink: 0; }

.pagination { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pagination-info, .pagination-page { color: var(--muted); font-size: 0.82rem; }
.pagination .link-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.caldav-step { font-size: 0.85rem; padding: 4px 0; }
.caldav-step.ok { color: var(--ok); }
.caldav-step.fail { color: var(--danger); }

tr.is-cancelled { opacity: 0.55; }
.link-btn.danger { color: var(--danger); }
.link-btn.danger:hover { color: var(--danger); filter: brightness(0.85); }
.admin-table td { line-height: 1.4; }

/* --- Onglet admin "Entreprise" (points de vente multi-magasins) --- */
.store-admin-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.store-admin-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: #fbfcfc; }
.store-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.store-admin-head strong { font-size: 1.02rem; color: var(--navy); }
.store-admin-actions { display: flex; gap: 12px; }
.store-admin-status { font-size: 0.78rem; font-weight: 700; }
.store-admin-status.open { color: var(--ok); }
.store-admin-status.closing_soon { color: #8a6d16; }
.store-admin-status.closed, .store-admin-status.closed_exceptional, .store-admin-status.closed_holiday { color: var(--danger); }
.store-admin-status.repair { color: var(--danger); }

/* --- Onglet admin "Page d'accueil" (diaporama) --- */
.home-slides-admin-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.home-slide-admin-card {
  display: flex;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fbfcfc;
  flex-wrap: wrap;
}
.home-slide-admin-thumb {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  background: #0d1b26;
  flex-shrink: 0;
}
.home-slide-admin-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.home-slide-admin-order { display: flex; gap: 14px; font-size: 0.82rem; }
.home-slide-admin-order .link-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.store-repair-toggle { flex: 1 1 260px; max-width: 320px; font-size: 0.8rem; }
.store-admin-photo { width: 90px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.store-admin-body { display: flex; gap: 14px; flex-wrap: wrap; }
.store-admin-fields { flex: 1 1 260px; font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.hours-grid { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; font-size: 0.84rem; }
.hours-grid label { margin: 0; font-weight: 400; color: var(--text); }
.hours-day-block { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #fff; }
.hours-day-head { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.hours-shifts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-left: 22px; }
.hours-shift-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hours-shift-label { display: inline-flex; align-items: center; gap: 6px; min-width: 100px; }
.hours-shift-row input[type=time] { width: auto; }
.hours-shift-row input[type=checkbox], .hours-day-head input[type=checkbox] { width: auto; }
.store-closures-list { margin-top: 10px; font-size: 0.82rem; }
.store-closures-list .admin-table { font-size: 0.8rem; }
details.store-admin-edit { margin-top: 10px; }
details.store-admin-edit summary { cursor: pointer; color: var(--navy); font-size: 0.82rem; font-weight: 600; }