/* =====================================================================
   SITES DE DÉMONSTRATION (dessinés en CSS, tailles en cqw = % de la largeur)
   ===================================================================== */
.site { position: absolute; inset: 0; font-family: var(--font-body); color: inherit; }
.site * { line-height: 1.2; }

/* ----- AVANT : le look « généré par IA » ----- */
.ai {
  background:
    radial-gradient(40cqw 30cqw at 78% 18%, rgba(168, 85, 247, .55), transparent 70%),
    radial-gradient(36cqw 28cqw at 15% 85%, rgba(236, 72, 153, .45), transparent 70%),
    #0d0a1e;
  color: #fff; padding: 2.4cqw 4cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 2cqw;
}
.ai nav { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 1.6cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: 1.15cqw; }
.ai nav b { font-size: 1.5cqw; background: linear-gradient(90deg, #c084fc, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai nav span { display: flex; gap: 2.2cqw; opacity: .8; }
.ai nav em { font-style: normal; padding: .7cqw 1.5cqw; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.ai .mid { text-align: center; align-self: center; display: grid; justify-items: center; gap: 1.6cqw; }
.ai .pill { font-size: 1.05cqw; padding: .5cqw 1.3cqw; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); }
.ai h4 { margin: 0; font-family: Inter, "Segoe UI", sans-serif; font-weight: 800; font-size: 4.6cqw; line-height: 1.05; letter-spacing: -0.03em; max-width: 26ch; }
.ai h4 span { background: linear-gradient(90deg, #c084fc, #f472b6, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai .sub { font-size: 1.45cqw; opacity: .7; max-width: 48ch; }
.ai .btns { display: flex; gap: 1.2cqw; }
.ai .btns i { font-style: normal; font-size: 1.25cqw; padding: 1.1cqw 2cqw; border-radius: 99px; }
.ai .btns i:first-child { background: linear-gradient(90deg, #8b5cf6, #ec4899); box-shadow: 0 0 3cqw rgba(236, 72, 153, .5); }
.ai .btns i:last-child { border: 1px solid rgba(255, 255, 255, .3); }
.ai .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.ai .card { padding: 1.6cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: 1.1cqw; display: grid; gap: .6cqw; }
.ai .card b { font-size: 1.4cqw; }
.ai .card .ic { width: 3cqw; height: 3cqw; border-radius: .9cqw; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.ai .card span { opacity: .65; }

/* ----- APRÈS : Maison Adjo, boutique de tissus wax ----- */
.adjo { background: #f4efe6; color: #1c2550; display: grid; grid-template-rows: auto 1fr; }
.adjo nav { display: flex; align-items: center; justify-content: space-between; padding: 2cqw 4cqw; font-size: 1.2cqw; }
.adjo nav b { font-family: var(--font-display); font-size: 2cqw; letter-spacing: -0.04em; font-weight: 750; }
.adjo nav span { display: flex; gap: 2.6cqw; }
.adjo nav em { font-style: normal; padding: .8cqw 1.6cqw; border-radius: 99px; background: #1f6b46; color: #fff; font-weight: 600; }
.adjo .body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3cqw; padding: 1cqw 4cqw 3.2cqw; }
.adjo .copy { order: 2; display: grid; align-content: center; gap: 1.8cqw; padding-left: 1.5cqw; }
.adjo h4 { margin: 0; font-family: var(--font-display); font-weight: 760; font-size: 5.4cqw; letter-spacing: -0.05em; line-height: .95; }
.adjo .sub { font-size: 1.5cqw; color: #4a5178; max-width: 34ch; line-height: 1.4; }
.adjo .cta { display: flex; gap: 1.4cqw; align-items: center; font-size: 1.3cqw; }
.adjo .cta i { font-style: normal; padding: 1.2cqw 2.2cqw; border-radius: 99px; background: #1c2550; color: #fff; font-weight: 600; }
.adjo .cta small { color: #4a5178; font-size: 1.2cqw; }
.adjo .visual { position: relative; border-radius: 1.6cqw; overflow: hidden; }
.wax {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, #e9a93b 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #1c2550 0 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, #c2412d 0 42%, transparent 43%),
    radial-gradient(circle at 0 0, #e9a93b 0 14%, transparent 15%),
    radial-gradient(circle at 100% 100%, #e9a93b 0 14%, transparent 15%),
    #2f3f86;
  background-size: 5.5cqw 5.5cqw;
}
.wax.v2 {
  background:
    radial-gradient(circle at 25% 25%, #f4efe6 0 10%, transparent 11%),
    radial-gradient(circle at 75% 75%, #f4efe6 0 10%, transparent 11%),
    conic-gradient(from 45deg, #1f6b46 0 25%, #e9a93b 0 50%, #1f6b46 0 75%, #e9a93b 0);
  background-size: 4cqw 4cqw;
}
.wax.v3 {
  background:
    radial-gradient(circle at 50% 50%, #1c2550 0 22%, transparent 23%),
    repeating-radial-gradient(circle at 50% 50%, #c2412d 0 6%, #f2b84b 6% 12%);
  background-size: 4.6cqw 4.6cqw;
}
.adjo .tagline {
  position: absolute; left: 1.4cqw; bottom: 1.4cqw; padding: .9cqw 1.4cqw; border-radius: 1cqw;
  background: #f4efe6; font-size: 1.15cqw; font-weight: 600;
}
.adjo .tagline small { display: block; font-weight: 400; color: #4a5178; }

/* ----- Galerie : boutique (grille produits) ----- */
.shop { background: #f4efe6; color: #1c2550; padding: 2.4cqw 4cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 2.4cqw; }
.shop nav { display: flex; justify-content: space-between; align-items: center; font-size: 1.3cqw; }
.shop nav b { font-family: var(--font-display); font-size: 2.2cqw; font-weight: 750; letter-spacing: -0.04em; }
.shop nav em { font-style: normal; padding: .8cqw 1.6cqw; border-radius: 99px; border: 1.5px solid #1c2550; font-weight: 600; }
.shop h4 { margin: 0; font-family: var(--font-display); font-size: 4.2cqw; letter-spacing: -0.05em; line-height: .95; font-weight: 760; }
.shop .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.shop .p { display: grid; grid-template-rows: 1fr auto; gap: 1cqw; }
.shop .p .wax { position: relative; border-radius: 1.2cqw; min-height: 20cqw; }
.shop .p b { font-size: 1.5cqw; display: flex; justify-content: space-between; }
.shop .p b span { font-weight: 500; color: #4a5178; }

/* ----- Galerie : restaurant ----- */
.resto { background: #12352a; color: #f3ead6; display: grid; grid-template-columns: 1fr 1fr; }
.resto .l { padding: 3.4cqw 4cqw; display: grid; align-content: space-between; }
.resto .brandname { font-family: var(--font-display); font-size: 2cqw; font-weight: 700; letter-spacing: -0.03em; }
.resto h4 { margin: 0; font-family: var(--font-display); font-size: 5.6cqw; font-weight: 760; letter-spacing: -0.05em; line-height: .92; }
.resto h4 span { color: #f2b84b; }
.resto .l p { font-size: 1.5cqw; opacity: .8; max-width: 30ch; margin-top: 1.4cqw; line-height: 1.4; }
.resto .l i { font-style: normal; display: inline-block; margin-top: 2cqw; padding: 1.2cqw 2.2cqw; border-radius: 99px; background: #f2b84b; color: #12352a; font-weight: 700; font-size: 1.35cqw; }
.resto .r { background: #f3ead6; color: #12352a; padding: 3.4cqw 3.6cqw; display: grid; align-content: center; gap: 1.6cqw; }
.resto .r small { font-size: 1.2cqw; text-transform: none; color: #5d6b5f; }
.resto .dish { display: grid; grid-template-columns: 1fr auto; gap: .4cqw 2cqw; padding-bottom: 1.4cqw; border-bottom: 1px dashed rgba(18, 53, 42, .3); font-size: 1.5cqw; }
.resto .dish b { font-family: var(--font-display); font-size: 1.9cqw; letter-spacing: -0.02em; }
.resto .dish span { grid-column: 1; color: #5d6b5f; font-size: 1.2cqw; }
.resto .dish em { grid-row: 1; grid-column: 2; font-style: normal; font-weight: 700; }

/* ----- Galerie : coach sportif ----- */
.coachsite { background: #fff; color: #111; padding: 2.6cqw 4cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 2cqw; }
.coachsite nav { display: flex; justify-content: space-between; font-size: 1.3cqw; align-items: center; }
.coachsite nav b { font-family: var(--font-display); font-size: 2cqw; font-weight: 800; letter-spacing: -0.05em; }
.coachsite nav em { font-style: normal; background: #ff5a2b; color: #fff; padding: .8cqw 1.6cqw; border-radius: .6cqw; font-weight: 700; }
.coachsite h4 { margin: 0; align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 7cqw; letter-spacing: -0.06em; line-height: .88; max-width: 12ch; }
.coachsite h4 span { color: #ff5a2b; white-space: nowrap; }
.coachsite .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.coachsite .plan { border: 2px solid #111; border-radius: 1cqw; padding: 1.4cqw 1.6cqw; font-size: 1.25cqw; display: grid; gap: .5cqw; }
.coachsite .plan b { font-size: 2.4cqw; font-family: var(--font-display); letter-spacing: -0.04em; }
.coachsite .plan.dark { background: #111; color: #fff; }

/* ----- Version téléphone des sites de démonstration (avant / après) ----- */
@media (max-width: 640px) {
  .compare-stage { aspect-ratio: 4 / 5.2; }
}
@container (max-width: 640px) {
  .ai { padding: 4cqw 5cqw; gap: 4cqw; grid-template-rows: auto 1fr; }
  .ai nav { font-size: 3.4cqw; padding: 2.6cqw 3.4cqw; border-radius: 3cqw; }
  .ai nav b { font-size: 4.2cqw; }
  .ai nav span { display: none; }
  .ai nav em { padding: 1.6cqw 3.2cqw; }
  .ai .mid { gap: 4cqw; align-self: start; padding-top: 6cqw; }
  .ai .pill { font-size: 3.2cqw; padding: 1.4cqw 3.2cqw; }
  .ai h4 { font-size: 10cqw; }
  .ai .sub { font-size: 3.8cqw; }
  .ai .btns { flex-direction: column; width: 100%; }
  .ai .btns i { font-size: 3.8cqw; padding: 3.4cqw; }
  .ai .cards { display: none; }

  .adjo nav { padding: 4.4cqw 5cqw; font-size: 3.4cqw; }
  .adjo nav b { font-size: 5.4cqw; }
  .adjo nav span { display: none; }
  .adjo nav em { padding: 1.8cqw 3.4cqw; }
  .adjo .body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 4cqw; padding: 0 5cqw 5cqw; }
  .adjo .copy { order: 0; padding-left: 0; gap: 3.6cqw; }
  .adjo h4 { font-size: 11cqw; }
  .adjo .sub { font-size: 3.8cqw; }
  .adjo .cta { font-size: 3.6cqw; flex-wrap: wrap; }
  .adjo .cta i { padding: 3cqw 5cqw; }
  .adjo .cta small { font-size: 3.2cqw; }
  .adjo .visual { border-radius: 3cqw; min-height: 30cqw; }
  .adjo .tagline { font-size: 3.2cqw; padding: 2cqw 3cqw; left: 3cqw; bottom: 3cqw; border-radius: 2cqw; }
  .wax { background-size: 11cqw 11cqw; }
}

/* ----- Galerie : salon de coiffure ----- */
.salon { background: #f6ede4; color: #2a1712; display: grid; grid-template-columns: 1fr 1.1fr; }
.salon .ph {
  position: relative;
  background:
    repeating-linear-gradient(115deg, #2a1712 0 1.6cqw, #4a281c 1.6cqw 3.2cqw, #c4532f 3.2cqw 3.6cqw),
    #2a1712;
}
.salon .ph::after { content: "Tresses collées, 3 h"; position: absolute; left: 2cqw; bottom: 2cqw; padding: .8cqw 1.4cqw; background: #f6ede4; font-size: 1.2cqw; font-weight: 600; }
.salon .tx { padding: 3cqw 4cqw; display: grid; align-content: space-between; }
.salon .tx b { font-family: var(--font-display); font-size: 2cqw; letter-spacing: -0.03em; }
.salon h4 { margin: 0; font-family: var(--font-display); font-size: 5cqw; font-weight: 760; letter-spacing: -0.05em; line-height: .95; }
.salon p { font-size: 1.45cqw; color: #6b4d42; margin-top: 1.4cqw; line-height: 1.4; }
.salon .slots { display: flex; flex-wrap: wrap; gap: 1cqw; }
.salon .slots span { padding: .9cqw 1.4cqw; border: 1.5px solid #2a1712; font-size: 1.25cqw; font-weight: 600; }
.salon .slots span.on { background: #c4532f; border-color: #c4532f; color: #fff; }

/* ----- Galerie : agence immobilière ----- */
.immo {
  color: #0f2e36; padding: 2.6cqw 4cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 2cqw;
  background:
    linear-gradient(#e8efe9 1px, transparent 1px) 0 0 / 4cqw 4cqw,
    linear-gradient(90deg, #e8efe9 1px, transparent 1px) 0 0 / 4cqw 4cqw,
    #f7faf7;
}
.immo nav { display: flex; justify-content: space-between; align-items: center; font-size: 1.3cqw; }
.immo nav b { font-family: var(--font-display); font-size: 2cqw; font-weight: 750; letter-spacing: -0.04em; }
.immo nav em { font-style: normal; padding: .8cqw 1.6cqw; background: #0f4c5c; color: #fff; font-weight: 600; }
.immo h4 { margin: 0; font-family: var(--font-display); font-size: 4.4cqw; font-weight: 760; letter-spacing: -0.05em; line-height: .95; max-width: 20ch; }
.immo .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; align-self: end; }
.immo .home { background: #fff; border: 1px solid #cfdcd3; display: grid; }
.immo .home i { display: block; height: 11cqw; background: linear-gradient(160deg, #0f4c5c 0 45%, #e2a33a 45% 60%, #b9d3c2 60%); }
.immo .home:nth-child(2) i { background: linear-gradient(200deg, #e2a33a 0 30%, #0f4c5c 30% 70%, #b9d3c2 70%); }
.immo .home:nth-child(3) i { background: linear-gradient(140deg, #b9d3c2 0 40%, #0f4c5c 40% 75%, #e2a33a 75%); }
.immo .home span { padding: 1cqw 1.2cqw; font-size: 1.2cqw; line-height: 1.35; }
.immo .home b { display: block; font-size: 1.5cqw; }