/* ============================================================
   Premium overrides — JSL Distribution (XXXL)
   Chargé après styles.css : surcharges ciblées, sans refonte HTML
   ============================================================ */

/* Prevent iPhone horizontal overflow (padding included in widths) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* -----------------------------
   1) Design tokens unifiés
   ----------------------------- */
:root {
  /* Palette institutionnelle (bleu/gris/blanc) */
  --premium-bg: #ffffff;
  --premium-fg: #0f172a;
  --premium-muted: #475569;
  --premium-card: #ffffff;
  --premium-border: #e5e7eb;
  --premium-border-strong: #d7dde6;

  --premium-primary-500: #2563eb;
  --premium-primary-600: #1d4ed8;

  /* Espace / radius / ombres (sobres) */
  --premium-space-2: .5rem;
  --premium-space-3: .75rem;
  --premium-space-4: 1rem;
  --premium-space-6: 1.5rem;

  --premium-radius-8: 8px;
  --premium-radius-12: 12px;
  --premium-radius-16: 16px;

  --premium-shadow-1: 0 2px 10px rgba(15, 23, 42, .06);
  --premium-shadow-2: 0 14px 34px rgba(15, 23, 42, .10);

  /* Mapping tokens legacy → premium (compat) */
  --bg: var(--premium-bg);
  --fg: var(--premium-fg);
  --muted: var(--premium-muted);
  --card: var(--premium-card);
  --border-strong: var(--premium-border);
  --primary-500: var(--premium-primary-500);
  --primary-600: var(--premium-primary-600);

  --primary: var(--premium-primary-500);
  --primary-dark: var(--premium-primary-600);
  --radius: var(--premium-radius-12);
  --shadow: var(--premium-shadow-1);
  --shadow-hover: var(--premium-shadow-2);

  /* Éviter transition: all (perf) */
  --transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --premium-bg: #0b1220;
    --premium-fg: #e5e7eb;
    --premium-muted: #9aa4b2;
    --premium-card: #0f1623;
    --premium-border: #2b3442;
    --premium-border-strong: #303b4a;
    --premium-primary-500: #60a5fa;
    --premium-primary-600: #93c5fd;
    --premium-shadow-1: 0 2px 10px rgba(0,0,0,.35);
    --premium-shadow-2: 0 18px 40px rgba(0,0,0,.45);
  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* About — single value should span full width */
.about-cards.about-cards--single {
  grid-template-columns: 1fr;
}

/* About — center value cards text */
.about-card__head {
  justify-content: center;
  text-align: center;
}

.about-card__title,
.about-card__desc {
  text-align: center;
}

/* Large display: add columns where it helps */
@media (min-width: 1920px) {
  .about-cards:not(.about-cards--single) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .about-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .about-team {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 2560px) {
  .about-cards:not(.about-cards--single) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .about-gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .about-team {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* -----------------------------
   Layout full-height global (public + app)
   - main prend l’espace disponible
   - footer collé en bas sur contenus courts
   - aucun impact sur pages longues
   ----------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.page-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

/* -----------------------------
   Responsive strategy (breakpoints by resolution)
   Mobile:  ≤ 768px  (default rules)
   Tablet:  769–1023px
   Desktop: 1024–1919px
   Large:   ≥ 1920px
   Ultra:   ≥ 2560px
   ----------------------------- */
:root {
  /* Layout tokens (defaults keep current mobile feel) */
  --ui-pad-y: 10px;
  --ui-pad-x: 16px;
  --ui-content-max: 1100px;
  /* Mobile-first: reduce card padding to avoid iPhone cramped layout */
  --ui-card-pad-y: 18px;
  --ui-card-pad-x: 18px;

  /* Typography tokens */
  --ui-font-base: 16px;
  --ui-h1: clamp(1.5rem, 1.2vw + 1.1rem, 2.25rem);
  --ui-h2: clamp(1.1rem, 0.8vw + 0.9rem, 1.6rem);
  --ui-h3: clamp(1.0rem, 0.6vw + 0.85rem, 1.25rem);

  /* Tables */
  --ui-table-font: 0.95rem;
  --ui-table-cell-pad: 0.9rem;
}

@media (min-width: 769px) and (max-width: 1023px) {
  :root {
    --ui-pad-y: 12px;
    --ui-pad-x: 20px;
    --ui-content-max: 1200px;
    --ui-card-pad-y: 30px;
    --ui-card-pad-x: 44px;
    --ui-font-base: 16px;
    --ui-table-font: 0.95rem;
    --ui-table-cell-pad: 0.9rem;
  }
}

@media (min-width: 1024px) and (max-width: 1919px) {
  :root {
    --ui-pad-y: 14px;
    --ui-pad-x: 28px;
    --ui-content-max: 1380px;
    --ui-card-pad-y: 34px;
    --ui-card-pad-x: 52px;
    --ui-font-base: 16px;
    --ui-table-font: 0.95rem;
    --ui-table-cell-pad: 0.95rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --ui-pad-y: 16px;
    --ui-pad-x: 44px;
    --ui-content-max: 1680px;
    --ui-card-pad-y: 42px;
    --ui-card-pad-x: 64px;
    --ui-font-base: 18px;
    --ui-h1: clamp(2.0rem, 1.0vw + 1.6rem, 2.8rem);
    --ui-h2: clamp(1.4rem, 0.8vw + 1.1rem, 2.0rem);
    --ui-h3: clamp(1.15rem, 0.6vw + 1.0rem, 1.5rem);
    --ui-table-font: 1.0rem;
    --ui-table-cell-pad: 1.0rem;
  }
}

@media (min-width: 2560px) {
  :root {
    --ui-pad-y: 18px;
    --ui-pad-x: 72px;
    --ui-content-max: 2200px;
    --ui-card-pad-y: 48px;
    --ui-card-pad-x: 76px;
    --ui-font-base: 19px;
    --ui-h1: clamp(2.2rem, 0.9vw + 1.9rem, 3.2rem);
    --ui-h2: clamp(1.5rem, 0.75vw + 1.25rem, 2.25rem);
    --ui-h3: clamp(1.2rem, 0.55vw + 1.05rem, 1.65rem);
    --ui-table-font: 1.05rem;
    --ui-table-cell-pad: 1.05rem;
  }
}

/* iPhone / very small screens: keep mobile behavior intact */
@media (max-width: 480px) {
  :root {
    --ui-pad-y: 8px;
    --ui-pad-x: 14px;
    --ui-card-pad-y: 16px;
    --ui-card-pad-x: 14px;
    --ui-table-font: 0.9rem;
    --ui-table-cell-pad: 0.75rem;
  }
}

html {
  font-size: var(--ui-font-base);
}

main.page-content {
  /* Safe-area for iPhone notch (no-op elsewhere) */
  padding-top: calc(var(--ui-pad-y) + env(safe-area-inset-top));
  padding-bottom: calc(var(--ui-pad-y) + env(safe-area-inset-bottom));
  padding-left: calc(var(--ui-pad-x) + env(safe-area-inset-left));
  padding-right: calc(var(--ui-pad-x) + env(safe-area-inset-right));
}

/* Fluid typography for public pages (keep app/admin styles intact) */
main.page-content .login-card h1 {
  font-size: var(--ui-h1);
  line-height: 1.15;
}

main.page-content .login-card h2 {
  font-size: var(--ui-h2);
  line-height: 1.25;
}

main.page-content .login-card h3 {
  font-size: var(--ui-h3);
  line-height: 1.25;
}

/* Distance reading: strengthen key titles on very large screens */
@media (min-width: 1920px) {
  main.page-content .section-title.modern,
  main.page-content .depot-title.modern,
  main.page-content .employe-title.modern {
    letter-spacing: 0.3px;
  }
}

/* -----------------------------
   2) Accessibilité (focus)
   ----------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-500) 45%, transparent);
  outline-offset: 2px;
}

/* -----------------------------
   3) Mouvement (perf + a11y)
   ----------------------------- */
.fadeIn { animation-duration: 360ms; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------
   Accueil — image hero (stable, responsive, cohérente)
   ----------------------------- */
.home-hero__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--border-strong) 60%, transparent);
  margin: 0 0 14px 0;
}

/* -----------------------------
   4) Top nav (sobre, institutionnel)
   ----------------------------- */
.top-nav a {
  color: color-mix(in srgb, var(--fg) 88%, var(--primary-600));
  font-weight: 700;
  border: 1px solid transparent;
}
.top-nav a:hover {
  background: color-mix(in srgb, var(--primary-500) 10%, var(--card));
  box-shadow: none;
  border-color: color-mix(in srgb, var(--primary-500) 22%, var(--border-strong));
  transform: none;
}
.top-nav-logout button {
  background: var(--primary-500);
  box-shadow: none;
}
.top-nav-logout button:hover {
  background: var(--primary-600);
  box-shadow: none;
}

/* -----------------------------
   5) Login cards (hiérarchie premium)
   ----------------------------- */
.login-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  border-radius: var(--premium-radius-16);
  width: min(100%, var(--ui-content-max));
  padding: var(--ui-card-pad-y) var(--ui-card-pad-x);
  margin-left: auto;
  margin-right: auto;
}
.login-card h1,
.login-card h2 {
  letter-spacing: .2px;
}
.login-card h1 { color: var(--fg); }
.login-card h2 { color: color-mix(in srgb, var(--fg) 75%, var(--muted)); }
.login-card p { color: color-mix(in srgb, var(--fg) 78%, var(--muted)); }
.login-card img {
  display: block;
  border-radius: var(--premium-radius-12);
  box-shadow: var(--premium-shadow-1);
}

/* Page containers (public + guided screens) */
.about-page,
.services-page,
.support-page,
.page-about,
.guided-center,
.container {
  max-width: var(--ui-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Allow app shell to breathe on large displays */
.app-layout {
  max-width: none;
}

/* -----------------------------
   7) Titres sections (moins “flashy”)
   ----------------------------- */
.section-title.modern,
.section-title,
.depot-title,
.employe-title {
  box-shadow: var(--shadow);
}

/* Dark mode manuel existant : adoucir les accents */
body.dark-mode .section-title,
body.dark-mode .depot-title,
body.dark-mode .employe-title,
.dark-mode .section-title,
.dark-mode .depot-title,
.dark-mode .employe-title {
  color: var(--primary-500);
  box-shadow: var(--shadow);
  text-shadow: none;
}
body.dark-mode .section-title:hover,
body.dark-mode .depot-title:hover,
body.dark-mode .employe-title:hover,
.dark-mode .section-title:hover,
.dark-mode .depot-title:hover,
.dark-mode .employe-title:hover {
  transform: none;
}

/* -----------------------------
   8) Tables (lisibilité)
   ----------------------------- */
.table-container {
  border: 1px solid var(--border-strong);
  border-radius: var(--premium-radius-16);
  box-shadow: var(--shadow);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: min(70vh, 900px);
}
.styled-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--ui-table-font);
}
.styled-table thead {
  background: color-mix(in srgb, var(--card) 92%, var(--primary-500));
}
.styled-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-500) 8%, var(--card));
}

.styled-table th,
.styled-table td {
  padding: var(--ui-table-cell-pad);
}

/* -----------------------------
   9) Cards / KPI (cohérence)
   ----------------------------- */
.summary-card,
.summary-box,
.depot-summary,
.sidebar-box {
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

/* Mobile : ombres plus légères */
@media (max-width: 640px) {
  .login-card,
  .table-container,
  .summary-card,
  .depot-summary,
  .sidebar-box {
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  }
}

/* -----------------------------
   À propos — Hero gradient box (fallback subtitle)
   ----------------------------- */
.hero-gradient-box {
  max-width: 780px;
  margin: 20px auto 0 auto;
  padding: 22px 28px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 40%, #2563eb 100%);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}
.hero-gradient-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.4), transparent 60%);
  pointer-events: none;
}
.hero-gradient-text {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0f172a;
}

@media (max-width: 640px) {
  .hero-gradient-box {
    padding: 18px 16px;
  }
  .hero-gradient-text {
    font-size: 18px;
  }
}

@media (prefers-color-scheme: dark) {
  .hero-gradient-box {
    background: linear-gradient(135deg, #1e293b 0%, #334155 40%, #2563eb 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .hero-gradient-text {
    color: #ffffff;
  }
}

/* -----------------------------
   À propos — Direction générale (bloc dirigeant exécutif unique)
   ----------------------------- */
.executive-card {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  border: 1px solid rgba(2, 6, 23, 0.08);
}
.executive-card__photo {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.executive-card__role {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #2563eb;
  font-weight: 800;
}
.executive-card__headline {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: color-mix(in srgb, #0f172a 80%, #2563eb);
  margin-bottom: 10px;
}
.executive-card__name {
  font-size: 28px;
  font-weight: 900;
  margin: 8px 0 14px 0;
}
.executive-card__desc {
  font-size: 16px;
  line-height: 1.75;
  color: #475569;
}

@media (max-width: 900px) {
  .executive-card {
    grid-template-columns: 1fr;
  }
  .executive-card__photo {
    min-height: 240px;
  }
}

/* -----------------------------
   Avis Google 5★ — section statique premium
   (aucune iframe Reviews / aucun scraping / pas d’UI Google copiée)
   ----------------------------- */
.reviews-summary {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 18px auto 22px auto;
  padding: 18px 18px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  box-shadow: var(--shadow);
  max-width: 1050px;
}
.reviews-summary__score {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}
.reviews-summary__value {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .5px;
  color: color-mix(in srgb, var(--fg) 82%, var(--primary-500));
}
.reviews-summary__stars,
.review-card__stars {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #d1a22b; /* doré sobre */
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.reviews-summary__meta {
  color: var(--muted);
  line-height: 1.55;
}
.reviews-summary__cta {
  display: flex;
  justify-content: flex-end;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  max-width: 1050px;
  margin: 0 auto;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  box-shadow: var(--shadow);
  min-height: 180px;
  transition: var(--transition);
}
.review-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--primary-500) 30%, var(--border-strong));
  transform: translateY(-1px);
}
.review-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.review-card__name {
  font-weight: 900;
  letter-spacing: .3px;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.review-card__meta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--muted) 92%, var(--primary-500));
}
.review-card__text {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .reviews-summary {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .reviews-summary__cta {
    justify-content: center;
    width: 100%;
  }
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .review-card {
    min-height: 0;
  }
}

/* -----------------------------
   Commentaires/Réputation — Avis (format ligne par ligne)
   ----------------------------- */
.reviews-list {
  max-width: 900px;
  margin: 10px auto 0 auto;
  text-align: left;
}
.review-line {
  display: grid;
  gap: 6px;
  padding: 12px 2px;
}
.review-line__name {
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.review-line__stars {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #d1a22b; /* doré sobre */
}
.review-line__text {
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.review-line__note {
  font-weight: 700;
  letter-spacing: .2px;
  color: color-mix(in srgb, var(--muted) 80%, var(--primary-500));
}
.reviews-divider {
  height: 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  margin: 12px auto;
  max-width: 900px;
}

@media (prefers-color-scheme: dark) {
  .reviews-divider {
    border-top: 1px solid color-mix(in srgb, var(--border-strong) 85%, transparent);
  }
}

/* -----------------------------
   App (enterprise) — Badges débit/crédit + previews
   ----------------------------- */
.badge.credit {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #22c55e;
}
.badge.debit {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}
.enterprise-preview pre {
  background: color-mix(in srgb, var(--card) 92%, var(--border-strong));
  border: 1px solid color-mix(in srgb, var(--border-strong) 75%, transparent);
  border-radius: 12px;
  padding: 12px;
}