/* ==========================================================================
   Défoulé KOW: Effets visuels "casse"
   Fonds texturés, portière de réservation, cartes sessions (Car / Free / Art).
   Dépend des couleurs de marque : --kow-jaune, --kow-rouge, --kow-turquoise.
   Les chemins d'images sont relatifs à ce fichier (../img/).
   ========================================================================== */

:root {
  --kow-noir: #000;
  --kow-jaune: #ffc914;
  --kow-rouge: #e3170a;
  --kow-turquoise: #17bebb;
  --kow-vert: #47682c;
  --kow-surface-raised: #0a0a0a;
}

/* --------------------------------------------------------------------------
   1. FONDS DE SECTION (éclats de verre / jets de peinture, très discrets)
   À poser sur une <section>. Alterner a → b → c → d d'une section à l'autre.
   -------------------------------------------------------------------------- */
.kow-bg-verre-a   { background: url(../img/tex-verre-a.webp)  center        / cover no-repeat, var(--kow-noir); }
.kow-bg-peinture-a{ background: url(../img/tex-paint-a.webp)  right top     / cover no-repeat, var(--kow-noir); }
.kow-bg-verre-b   { background: url(../img/tex-verre-b.webp)  left center   / cover no-repeat, var(--kow-noir); }
.kow-bg-peinture-b{ background: url(../img/tex-paint-b.webp)  center bottom / cover no-repeat, var(--kow-noir); }
/* variante section "surélevée" */
.kow-bg-raised.kow-bg-verre-a,
.kow-bg-raised.kow-bg-peinture-a,
.kow-bg-raised.kow-bg-verre-b,
.kow-bg-raised.kow-bg-peinture-b { background-color: var(--kow-surface-raised); }

/* Fond fixe pour les pages applicatives (réservation, ma réservation) */
.kow-bg-page {
  background:
    url(../img/tex-paint-a.webp) center / cover no-repeat fixed,
    url(../img/tex-verre-a.webp) center / cover no-repeat fixed,
    var(--kow-noir);
}
@media (max-width: 900px) { .kow-bg-page { background-attachment: scroll, scroll, scroll; } }

/* --------------------------------------------------------------------------
   2. BANDE VITRÉE (bas du hero)
   -------------------------------------------------------------------------- */
.kow-bande-vitree {
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
          backdrop-filter: saturate(150%) blur(20px);
  border-top: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* --------------------------------------------------------------------------
   3. PORTIÈRE DE VOITURE = carte de réservation
   Structure HTML : voir demo.html
   -------------------------------------------------------------------------- */
.kow-door-wrap {
  position: relative; width: 100%; max-width: 440px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
}
/* carcasse de la voiture autour (se fond dans la photo) */
.kow-door-carcasse {
  position: absolute; z-index: 0; left: -150px; right: -90px; top: -70px; bottom: -34px; pointer-events: none;
  background:
    url(../img/fx-carrosserie.webp) 30% 40% / 900px auto no-repeat,
    radial-gradient(130px 130px at 8% 104%, #000 0 58%, #1a1a1a 60%, #0d0d0d 66%, transparent 67%),
    linear-gradient(90deg, transparent 0 141px, rgba(0,0,0,0.9) 141px 146px, transparent 146px),
    linear-gradient(90deg, transparent 0 calc(100% - 92px), rgba(0,0,0,0.9) calc(100% - 92px) calc(100% - 86px), transparent calc(100% - 86px)),
    linear-gradient(165deg, #3d0b07 0%, #23110f 30%, #170504 60%, #0b0302 100%);
  -webkit-mask-image: radial-gradient(70% 72% at 55% 55%, #000 35%, transparent 78%);
          mask-image: radial-gradient(70% 72% at 55% 55%, #000 35%, transparent 78%);
  opacity: 0.9;
}
.kow-door {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  clip-path: polygon(96px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 34px), 0 128px);
  background:
    url(../img/fx-carrosserie.webp) 60% 10% / 840px auto no-repeat,
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.09) 46%, rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #7a1810 0%, #5a0f09 35%, #3a0805 70%, #250503 100%);
}
.kow-door__cadre-vitre { position: relative; height: 164px; padding: 12px 12px 0; background: #050505; }
.kow-door__vitre {
  position: relative; height: 100%;
  clip-path: polygon(88px 0, 100% 0, 100% 100%, 0 100%, 0 120px);
  background:
    url(../img/fx-vitre-portiere.webp) right top / 100% auto no-repeat,
    linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0) 44%),
    rgba(150,170,180,0.10);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 0 18px 16px;
}
.kow-door__vitre > * { text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.kow-chrome { height: 6px; background: linear-gradient(180deg, #d9d9d9 0%, #6e6e6e 55%, #2a2a2a 100%); }
.kow-poignee {
  position: absolute; right: 22px; top: 186px; width: 74px; height: 20px; border-radius: 10px;
  background: linear-gradient(180deg, #120201, #2a0705);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.12);
}
.kow-poignee::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 6px; height: 7px; border-radius: 4px;
  background: linear-gradient(180deg, #f0f0f0, #8a8a8a 60%, #4a4a4a);
  transform: rotate(-4deg); transform-origin: left center; box-shadow: 0 2px 3px rgba(0,0,0,0.6);
}
.kow-door__tole {
  display: flex; flex-direction: column; gap: 12px; padding: 34px 22px 20px 26px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 18px 30px -20px rgba(0,0,0,0.7);
}
/* champs "enfoncés" dans la tôle */
.kow-door__champ {
  border-radius: 4px; background: rgba(0,0,0,0.42); border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
/* éclats de verre tombés au sol */
.kow-eclats { position: absolute; z-index: 2; left: 10%; right: 4%; bottom: -22px; height: 26px; pointer-events: none; }
.kow-eclats span { position: absolute; background: rgba(200,220,230,0.3); }
.kow-eclats span:nth-child(1){ left:6%;  bottom:4px;  width:14px; height:9px;  clip-path:polygon(0 100%,40% 0,100% 70%); }
.kow-eclats span:nth-child(2){ left:18%; bottom:0;    width:8px;  height:6px;  clip-path:polygon(0 60%,70% 0,100% 100%); }
.kow-eclats span:nth-child(3){ left:41%; bottom:6px;  width:18px; height:8px;  clip-path:polygon(0 80%,55% 0,100% 100%); }
.kow-eclats span:nth-child(4){ left:63%; bottom:2px;  width:10px; height:10px; clip-path:polygon(20% 100%,0 10%,100% 40%); }
.kow-eclats span:nth-child(5){ left:80%; bottom:7px;  width:6px;  height:5px;  clip-path:polygon(0 100%,50% 0,100% 100%); }
.kow-eclats span:nth-child(6){ left:30%; bottom:12px; width:4px;  height:4px;  clip-path:polygon(0 100%,50% 0,100% 100%); }
@media (max-width: 900px) { .kow-door-carcasse { display: none; } }

/* --------------------------------------------------------------------------
   4. CARTES SESSIONS
   .kow-card = base ; ajouter --car / --free / --art
   -------------------------------------------------------------------------- */
.kow-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  transition: transform 200ms cubic-bezier(0.16,0.84,0.44,1), box-shadow 200ms cubic-bezier(0.16,0.84,0.44,1);
}
.kow-card:hover { transform: translateY(-4px); }
.kow-card__photo { position: relative; height: 188px; }
.kow-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kow-card__overlay { position: absolute; inset: 0; pointer-events: none; }

/* Défoul'Car : tôle cabossée turquoise + vitre fissurée */
.kow-card--car {
  background:
    url(../img/fx-carrosserie.webp) 40% 30% / 760px auto no-repeat,
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.07) 48%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg, #1d4241 0%, #102a2a 45%, #071515 100%);
  border: 1px solid rgba(0,0,0,0.6); border-top: 3px solid var(--kow-turquoise);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.kow-card--car:hover { box-shadow: 0 20px 46px rgba(23,190,187,0.22); }
.kow-card--car .kow-card__photo { border-bottom: 10px solid #050505; }
.kow-card--car .kow-card__overlay { background: url(../img/fx-vitre-portiere.webp) 85% 10% / 520px auto no-repeat; opacity: 0.7; }
.kow-card--car .kow-poignee { top: auto; right: 18px; margin-top: 10px; width: 58px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #030a0a, #0f2626); }
.kow-card--car .kow-poignee::after { left: 6px; right: 6px; top: 5px; height: 6px; }

/* Défoul'Free : bouteille brisée (verre vert, bord en dents de scie) */
.kow-card--free {
  position: relative;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(71,104,44,0.35), transparent 70%),
    linear-gradient(180deg, #0f1a0c 0%, #0a1008 60%, #070a06 100%);
  border: 1px solid rgba(118,168,74,0.22); border-top: 3px solid var(--kow-rouge);
  box-shadow: inset 1px 0 0 rgba(200,255,180,0.08), inset -1px 0 0 rgba(200,255,180,0.05);
}
.kow-card--free:hover { box-shadow: 0 20px 46px rgba(227,23,10,0.22); }
.kow-card--free .kow-card__photo {
  height: 200px;
  clip-path: polygon(0 0,100% 0,100% 86%,93% 95%,86% 84%,77% 100%,68% 88%,59% 96%,50% 82%,40% 98%,31% 87%,22% 100%,13% 85%,6% 94%,0 84%);
}
.kow-card--free .kow-card__overlay {
  background:
    url(../img/fx-verre-bouteille.webp) 30% 60% / 620px auto no-repeat,
    linear-gradient(90deg, rgba(200,255,180,0.10) 0%, transparent 14%, transparent 80%, rgba(200,255,180,0.08) 100%),
    rgba(71,104,44,0.14);
}
.kow-card--free .kow-eclats { position: relative; left: 0; right: 0; bottom: auto; height: 0; }
.kow-card--free .kow-eclats span { background: rgba(190,240,170,0.3); }

/* Défoul'Art : toile tendue + coulures jaunes */
.kow-card--art {
  background:
    url(../img/tex-paint-b.webp) 80% 100% / 900px auto no-repeat,
    url(../img/fx-toile.webp) 0 0 / 150px 150px repeat,
    #161513;
  border: 1px solid #262626;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.025), inset 0 0 22px rgba(0,0,0,0.6);
}
.kow-card--art:hover { box-shadow: 0 20px 46px rgba(255,201,20,0.22), inset 0 0 0 6px rgba(255,255,255,0.025); }
.kow-card--art .kow-card__overlay {
  bottom: auto; height: 110px;
  background: url(../img/fx-coulures-jaune.webp) 0 0 / 100% auto no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

@media (prefers-reduced-motion: reduce) {
  .kow-card, .kow-card:hover { transition: none; transform: none; }
}