:root {
  /* Palette douce / pastels */
  --bg: #f7f8fc;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --text: #1b1f2a;
  --muted: #666e7a;
  --primary: #6aa9ff;  /* bleu pastel */
  --accent: #ffb6c1;   /* rose pastel */
  --mint: #a8e6cf;     /* vert pastel */
  --border: #e7ebf3;
  --chip: #eef4ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1116;
    --panel: #14171f;
    --panel-strong: #151922;
    --text: #e9ebf2;
    --muted: #9aa3af;
    --border: #212635;
    --chip: #1b2240;
    --primary: #7fb4ff;
    --accent: #ff9ec0;
    --mint: #7fdcc3;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), #fff 60%);
  /* layout: column flex so footer sits after main and is visible */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Make main expand to push footer to the bottom when content is short */
main { flex: 1 0 auto; }

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(160%) blur(8px);
  background: color-mix(in oklab, var(--panel), transparent 10%);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--panel);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.3px;
}

.links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.links a {
  font-size: 14px;
  color: var(--muted);
}

.links a:hover {
  color: var(--text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 500;
  font-size: 14px;
}

.btn.primary {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--primary), white 25%),
    var(--primary)
  );
  color: #0b0d12;
  border-color: color-mix(in oklab, var(--primary), black 12%);
}

/* Common Text Classes */
.muted { color: var(--muted); }

/* --- STYLES SPÉCIFIQUES GRILLE TARIFAIRE --- */

.pricing-section .pricing-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.card {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px #00000014;
}

/* Carousel styles for project cards */
.card.project .carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: 220px;
  background: var(--panel);
}
.card.project .slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.card.project .slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.card.project .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card.project .ctrl {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.card.project .ctrl button {
  background: color-mix(in oklab, var(--panel), transparent 8%);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  line-height: 1;
}
.card.project .ctrl button:hover { transform: scale(1.03); }

/* Thumbs (single-image cards) */
.card .thumb { height: 220px; overflow: hidden; border-radius: 12px; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display:block }

@media (max-width: 600px) {
  .card.project .carousel,
  .card .thumb { height: 160px; }
}

/* Blocs de prix */
.pricing-block {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), white 2%), var(--panel-strong));
  box-shadow: 0 4px 12px #00000008;
  border: 1px solid var(--border);
}

/* Bordures colorées sur le côté */
.pricing-block.block-maquettes { border-left: 5px solid var(--primary); }
.pricing-block.block-sites { border-left: 5px solid color-mix(in oklab, var(--primary), var(--accent) 30%); }
.pricing-block.block-applications { border-left: 5px solid var(--mint); }
.pricing-block.block-options { border-left: 5px solid var(--accent); }

/* En-tête du bloc */
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.heading h3 {
  margin: 0;
  font-size: 1.2rem;
}

.tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--chip);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tableaux */
.pricing {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
}

.pricing th, .pricing td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pricing thead tr {
  background: color-mix(in oklab, var(--bg), var(--panel) 50%);
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
}

.pricing tbody tr:last-child td {
  border-bottom: none;
}

/* Prix */
.price {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .price { color: var(--primary); }
}

.muted-small {
  color: var(--muted);
  font-size: 0.9rem;
  display: block;
  margin-top: 4px;
}

/* Note info */
.note {
  background: color-mix(in oklab, var(--accent), transparent 85%);
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Footer */
footer {
  padding: 36px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  margin-top: 40px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 980px) {
  .nav { padding: 0 10px; }
  .links a:not(.btn) { display: none; } /* On cache les liens sauf le bouton sur mobile */
  
  /* Tables en mode carte */
  .pricing thead { display: none; }
  
  .pricing tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  
  .pricing td {
    border-bottom: 1px solid var(--border);
    display: block;
    padding: 12px 16px;
  }
  
  .pricing td:last-child { border-bottom: none; }
  
  /* Ajout des labels via CSS */
  .pricing td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  
  .pricing .price {
    font-size: 1.2rem;
  }
}