@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap");
/* =========================================================================
   KW ENTREPRISE — HABILLAGE VISUEL « ATELIER DE NUIT »
   Fichier de design uniquement : il ne contient aucune logique.
   Il ne fait qu'habiller les éléments existants (couleurs, fonds, images).
   Pour revenir à l'ancien design : retirer la ligne <link ... kw-design.css>.
   ========================================================================= */

:root {
  --kw-bitume: #0e0f12;
  --kw-acier: #1a1d22;
  --kw-acier-clair: #23272e;
  --kw-orange: #f56c14;
  --kw-braise: #b83a0e;
  --kw-ambre: #ffb547;
  --kw-ligne: rgba(255, 255, 255, 0.08);
}

/* ---------- Base : fond bitume légèrement grainé ---------- */
html body {
  background-color: var(--kw-bitume);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
html body ::selection { background: var(--kw-orange); color: #fff; }
html body :focus-visible { outline: 2px solid var(--kw-ambre); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--kw-braise) var(--kw-bitume); }

/* ---------- En-tête ---------- */
html body header.sticky {
  background-color: rgba(14, 15, 18, 0.86);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(245, 108, 20, 0.28), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- HERO : la scène d'atelier ---------- */
html body #accueil.bg-metallic {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(245, 108, 20, 0.16), transparent 70%),
    linear-gradient(180deg, #121419 0%, var(--kw-bitume) 60%, #120d0a 100%);
}
/* Rideau métallique : il se lève une fois au chargement.
   Son état de repos est « levé » : sans animation, il ne couvre jamais rien. */
html body #accueil.bg-metallic::before {
  z-index: 30;
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(100% - 46px), #f56c14 calc(100% - 46px), #f56c14 calc(100% - 40px), #2b2f36 calc(100% - 40px)),
    repeating-linear-gradient(180deg, #3a3f47 0 2px, #2a2e35 2px 20px, #1c1f24 20px 26px, #111317 26px 28px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(-101%);
  animation: kw-rideau 1.05s cubic-bezier(.7, 0, .3, 1) 0.15s backwards;
}
@keyframes kw-rideau {
  0%, 12% { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}
html body #accueil.bg-metallic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 520'%3E%3Cdefs%3E%3Cpattern id='h' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23f56c14' fill-opacity='.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='420' height='520' fill='url(%23h)'/%3E%3Cg fill='none' stroke='%23f56c14' stroke-opacity='.24' stroke-width='2' stroke-linejoin='round'%3E%3Cg transform='translate(70 70) rotate(-8)'%3E%3Ccircle cx='0' cy='-12' r='5'/%3E%3Cpath d='M-9 30 L-9 230 Q0 244 9 230 L9 30'/%3E%3Cpath d='M-26 8 A28 28 0 1 1 26 8 L12 -4 L12 -24 L-12 -24 L-12 -4 Z'/%3E%3Ccircle cx='0' cy='246' r='18'/%3E%3Ccircle cx='0' cy='246' r='9'/%3E%3C/g%3E%3Cg transform='translate(150 60)'%3E%3Ccircle cx='0' cy='-8' r='5'/%3E%3Crect x='-14' y='6' width='28' height='92' rx='10'/%3E%3Cpath d='M-14 30 H14 M-14 54 H14 M-14 78 H14' stroke-opacity='.25'/%3E%3Cpath d='M-4 98 V212 L0 226 L4 212 V98'/%3E%3C/g%3E%3Cg transform='translate(230 58) rotate(6)'%3E%3Ccircle cx='0' cy='-6' r='5'/%3E%3Cpath d='M-46 8 H40 Q56 8 60 22 L60 30 H-46 Z'/%3E%3Cpath d='M-46 8 Q-70 4 -84 22 Q-66 20 -54 30'/%3E%3Crect x='-7' y='30' width='14' height='210' rx='6'/%3E%3C/g%3E%3Cg transform='translate(330 70) rotate(-4)'%3E%3Ccircle cx='0' cy='-10' r='5'/%3E%3Cpath d='M-10 2 Q-22 40 -8 70 L-30 220 Q-24 232 -16 222 L2 92 Z'/%3E%3Cpath d='M10 2 Q22 40 8 70 L30 220 Q24 232 16 222 L-2 92 Z'/%3E%3Ccircle cx='0' cy='80' r='6'/%3E%3C/g%3E%3Cg transform='translate(110 360)'%3E%3Ccircle cx='0' cy='-10' r='5'/%3E%3Ccircle cx='0' cy='40' r='40'/%3E%3Ccircle cx='0' cy='40' r='22'/%3E%3Cpath d='M0 0 V18 M0 62 V80 M-40 40 H-18 M18 40 H40'/%3E%3C/g%3E%3Cg transform='translate(270 352)'%3E%3Ccircle cx='0' cy='-12' r='5'/%3E%3Cpath d='M-34 20 H34 V110 Q34 120 24 120 H-24 Q-34 120 -34 110 Z'/%3E%3Cpath d='M-20 20 V6 H20 V20 M34 50 L70 30 L74 38 L40 60'/%3E%3Cpath d='M-22 60 H22' stroke-opacity='.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 520'%3E%3Cdefs%3E%3Cpattern id='h' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23f56c14' fill-opacity='.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='420' height='520' fill='url(%23h)'/%3E%3Cg fill='none' stroke='%23f56c14' stroke-opacity='.24' stroke-width='2' stroke-linejoin='round'%3E%3Cg transform='translate(70 70) rotate(-8)'%3E%3Ccircle cx='0' cy='-12' r='5'/%3E%3Cpath d='M-9 30 L-9 230 Q0 244 9 230 L9 30'/%3E%3Cpath d='M-26 8 A28 28 0 1 1 26 8 L12 -4 L12 -24 L-12 -24 L-12 -4 Z'/%3E%3Ccircle cx='0' cy='246' r='18'/%3E%3Ccircle cx='0' cy='246' r='9'/%3E%3C/g%3E%3Cg transform='translate(150 60)'%3E%3Ccircle cx='0' cy='-8' r='5'/%3E%3Crect x='-14' y='6' width='28' height='92' rx='10'/%3E%3Cpath d='M-14 30 H14 M-14 54 H14 M-14 78 H14' stroke-opacity='.25'/%3E%3Cpath d='M-4 98 V212 L0 226 L4 212 V98'/%3E%3C/g%3E%3Cg transform='translate(230 58) rotate(6)'%3E%3Ccircle cx='0' cy='-6' r='5'/%3E%3Cpath d='M-46 8 H40 Q56 8 60 22 L60 30 H-46 Z'/%3E%3Cpath d='M-46 8 Q-70 4 -84 22 Q-66 20 -54 30'/%3E%3Crect x='-7' y='30' width='14' height='210' rx='6'/%3E%3C/g%3E%3Cg transform='translate(330 70) rotate(-4)'%3E%3Ccircle cx='0' cy='-10' r='5'/%3E%3Cpath d='M-10 2 Q-22 40 -8 70 L-30 220 Q-24 232 -16 222 L2 92 Z'/%3E%3Cpath d='M10 2 Q22 40 8 70 L30 220 Q24 232 16 222 L-2 92 Z'/%3E%3Ccircle cx='0' cy='80' r='6'/%3E%3C/g%3E%3Cg transform='translate(110 360)'%3E%3Ccircle cx='0' cy='-10' r='5'/%3E%3Ccircle cx='0' cy='40' r='40'/%3E%3Ccircle cx='0' cy='40' r='22'/%3E%3Cpath d='M0 0 V18 M0 62 V80 M-40 40 H-18 M18 40 H40'/%3E%3C/g%3E%3Cg transform='translate(270 352)'%3E%3Ccircle cx='0' cy='-12' r='5'/%3E%3Cpath d='M-34 20 H34 V110 Q34 120 24 120 H-24 Q-34 120 -34 110 Z'/%3E%3Cpath d='M-20 20 V6 H20 V20 M34 50 L70 30 L74 38 L40 60'/%3E%3Cpath d='M-22 60 H22' stroke-opacity='.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(14, 15, 18, 0.92) 0%, rgba(14, 15, 18, 0.55) 38%, rgba(14, 15, 18, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='floor' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f56c14' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='.22'/%3E%3C/linearGradient%3E%3ClinearGradient id='rim' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23b83a0e'/%3E%3Cstop offset='.6' stop-color='%23f56c14'/%3E%3Cstop offset='1' stop-color='%23ffb547'/%3E%3C/linearGradient%3E%3ClinearGradient id='body' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322252b'/%3E%3Cstop offset='1' stop-color='%230e0f12'/%3E%3C/linearGradient%3E%3ClinearGradient id='beam' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffd59a' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23ffb547' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='pool' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23f56c14' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='blur8' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3C/filter%3E%3Cfilter id='blur3' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cg stroke='%23f56c14' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M800 560 L-400 800 M800 560 L0 800 M800 560 L400 800 M800 560 L800 800 M800 560 L1200 800 M800 560 L1600 800 M800 560 L2000 800'/%3E%3Cpath d='M0 575 H1600 M0 600 H1600 M0 635 H1600 M0 685 H1600 M0 760 H1600'/%3E%3C/g%3E%3Crect y='560' width='1600' height='240' fill='url(%23floor)'/%3E%3Cellipse cx='1160' cy='672' rx='340' ry='38' fill='url(%23pool)'/%3E%3Cg transform='translate(1480 425) scale(-.64 .64)'%3E%3Cpath d='M925 212 L1700 110 L1700 340 L925 232 Z' fill='url(%23beam)' filter='url(%23blur8)'/%3E%3Cellipse cx='500' cy='372' rx='470' ry='22' fill='%23000' opacity='.7' filter='url(%23blur8)'/%3E%3Cpath d='M60,295 L60,215 C60,190 75,175 105,170 L190,158 C215,110 245,95 300,92 L560,90 C610,90 640,100 680,130 L740,170 C800,175 870,185 905,200 C930,212 940,235 940,262 L940,295 L835,295 A70,70 0 0 0 695,295 L305,295 A70,70 0 0 0 165,295 Z' fill='url(%23body)'/%3E%3Cpath d='M60,295 L60,215 C60,190 75,175 105,170 L190,158 C215,110 245,95 300,92 L560,90 C610,90 640,100 680,130 L740,170 C800,175 870,185 905,200 C930,212 940,235 940,262 L940,295 L835,295 A70,70 0 0 0 695,295 L305,295 A70,70 0 0 0 165,295 Z' fill='none' stroke='url(%23rim)' stroke-width='4' filter='url(%23blur3)' opacity='.9'/%3E%3Cpath d='M60,295 L60,215 C60,190 75,175 105,170 L190,158 C215,110 245,95 300,92 L560,90 C610,90 640,100 680,130 L740,170 C800,175 870,185 905,200 C930,212 940,235 940,262 L940,295 L835,295 A70,70 0 0 0 695,295 L305,295 A70,70 0 0 0 165,295 Z' fill='none' stroke='url(%23rim)' stroke-width='2'/%3E%3Cpath d='M212,156 C232,120 258,108 303,106 L470,105 L470,156 Z M490,105 L560,104 C600,104 625,113 655,135 L684,156 L490,156 Z' fill='%23f56c14' fill-opacity='.07' stroke='%23f56c14' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cpath d='M100 205 H930 M480 160 V290' stroke='%23f56c14' stroke-opacity='.35' stroke-width='1.2' fill='none'/%3E%3Cpath d='M250 92 L250 78 L600 76 L600 90' stroke='%23f56c14' stroke-opacity='.5' stroke-width='2' fill='none'/%3E%3Cg fill='%230a0b0d' stroke='url(%23rim)' stroke-width='3'%3E%3Ccircle cx='235' cy='300' r='58'/%3E%3Ccircle cx='765' cy='300' r='58'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f56c14' stroke-opacity='.6' stroke-width='1.5'%3E%3Ccircle cx='235' cy='300' r='34'/%3E%3Ccircle cx='765' cy='300' r='34'/%3E%3Ccircle cx='235' cy='300' r='8'/%3E%3Ccircle cx='765' cy='300' r='8'/%3E%3Cpath d='M235 266 V334 M201 300 H269 M211 276 L259 324 M259 276 L211 324 M765 266 V334 M731 300 H799 M741 276 L789 324 M789 276 L741 324' stroke-opacity='.35'/%3E%3C/g%3E%3Cellipse cx='925' cy='222' rx='16' ry='9' fill='%23ffd59a'/%3E%3Cellipse cx='925' cy='222' rx='34' ry='20' fill='%23ffb547' opacity='.55' filter='url(%23blur8)'/%3E%3Crect x='56' y='188' width='10' height='26' rx='3' fill='%23ff3b1f'/%3E%3Crect x='40' y='180' width='40' height='44' fill='%23ff3b1f' opacity='.45' filter='url(%23blur8)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 270px auto, 270px auto, 100% 100%, 1700px auto;
  background-position: left 0 top 60px, right 0 top 80px, center, center bottom;
  opacity: 0.85;
  animation: kw-phares 1.6s ease-out 1s both;
}
@keyframes kw-phares {
  0% { opacity: 0; filter: brightness(0.4); }
  55% { opacity: 0.85; filter: brightness(1.25); }
  100% { opacity: 0.85; filter: brightness(1); }
}
html body #accueil h1 { letter-spacing: 0.03em; }
html body #accueil .grid > div {
  background-color: rgba(14, 15, 18, 0.72);
  border-color: rgba(245, 108, 20, 0.22);
  backdrop-filter: blur(6px);
}
html body #accueil .offer-card { backdrop-filter: blur(4px); }
html body #accueil .border-t { border-top-color: rgba(245, 108, 20, 0.18); }

/* ---------- Vidéo : perforations de pellicule ---------- */
html body #video-presentation {
  background-color: #0b0c0f;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 16px, transparent 16px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 16px, transparent 16px 34px);
  background-size: 100% 9px, 100% 9px;
  background-position: 0 14px, 0 calc(100% - 14px);
  background-repeat: no-repeat;
}

/* ---------- Planning : papier millimétré d'atelier + plan de disque ---------- */
html body #planning {
  position: relative;
  background-color: #0c0d10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23f56c14'%3E%3Cg stroke-opacity='.55' stroke-width='1.5'%3E%3Ccircle cx='300' cy='300' r='250'/%3E%3Ccircle cx='300' cy='300' r='215'/%3E%3Ccircle cx='300' cy='300' r='120'/%3E%3Ccircle cx='300' cy='300' r='55'/%3E%3C/g%3E%3Cg stroke-opacity='.4' stroke-width='1.2'%3E%3Ccircle cx='300' cy='215' r='14'/%3E%3Ccircle cx='381' cy='274' r='14'/%3E%3Ccircle cx='350' cy='369' r='14'/%3E%3Ccircle cx='250' cy='369' r='14'/%3E%3Ccircle cx='219' cy='274' r='14'/%3E%3C/g%3E%3Cg stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M300 30 V570 M30 300 H570' stroke-dasharray='14 6 3 6'/%3E%3Cpath d='M300 300 m0 -235 a235 235 0 0 1 0 470 a235 235 0 0 1 0 -470' stroke-dasharray='2 9'/%3E%3C/g%3E%3Cpath d='M440 120 C500 140 540 200 548 250 L548 350 C540 400 500 460 440 480 L470 470 C520 440 552 390 556 340 L556 260 C552 210 520 160 470 130 Z' fill='%23f56c14' fill-opacity='.12' stroke-opacity='.6' stroke-width='1.5'/%3E%3Cg stroke-opacity='.45' stroke-width='1'%3E%3Cpath d='M50 590 H550 M50 582 V598 M550 582 V598'/%3E%3Cpath d='M58 586 L50 590 L58 594 M542 586 L550 590 L542 594'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(245, 108, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 108, 20, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(245, 108, 20, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 108, 20, 0.025) 1px, transparent 1px);
  background-size: 560px 560px, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: right -170px top 30px, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}
html body #planning > div > .bg-zinc-900 {
  background-color: rgba(22, 24, 29, 0.94);
  border-color: var(--kw-ligne);
  box-shadow: inset 0 3px 0 var(--kw-orange), 0 30px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- Services : tôle orange perforée + engrenage ---------- */
html body #services.bg-orange-pattern {
  background-color: var(--kw-orange);
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 16%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-110 -110 220 220'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M-9 -100 L9 -100 L12 -84 A85 85 0 0 1 32 -76 L45 -86 L58 -74 L49 -61 A85 85 0 0 1 59 -40 L75 -38 L79 -21 L64 -14 A85 85 0 0 1 64 8 L79 15 L75 32 L59 34 A85 85 0 0 1 48 55 L57 68 L44 80 L31 70 A85 85 0 0 1 11 79 L8 94 L-9 94 L-12 79 A85 85 0 0 1 -32 70 L-45 80 L-58 68 L-48 55 A85 85 0 0 1 -59 34 L-75 32 L-79 15 L-64 8 A85 85 0 0 1 -64 -14 L-79 -21 L-75 -38 L-59 -40 A85 85 0 0 1 -49 -61 L-58 -74 L-45 -86 L-32 -76 A85 85 0 0 1 -12 -84 Z'/%3E%3Ccircle r='58'/%3E%3Ccircle r='22'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-110 -110 220 220'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M-9 -100 L9 -100 L12 -84 A85 85 0 0 1 32 -76 L45 -86 L58 -74 L49 -61 A85 85 0 0 1 59 -40 L75 -38 L79 -21 L64 -14 A85 85 0 0 1 64 8 L79 15 L75 32 L59 34 A85 85 0 0 1 48 55 L57 68 L44 80 L31 70 A85 85 0 0 1 11 79 L8 94 L-9 94 L-12 79 A85 85 0 0 1 -32 70 L-45 80 L-58 68 L-48 55 A85 85 0 0 1 -59 34 L-75 32 L-79 15 L-64 8 A85 85 0 0 1 -64 -14 L-79 -21 L-75 -38 L-59 -40 A85 85 0 0 1 -49 -61 L-58 -74 L-45 -86 L-32 -76 A85 85 0 0 1 -12 -84 Z'/%3E%3Ccircle r='58'/%3E%3Ccircle r='22'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #c2410c 0%, var(--kw-orange) 45%, #d84315 100%);
  background-size: 8px 8px, 640px 640px, 300px 300px, 100% 100%;
  background-position: 0 0, left -220px bottom -260px, right -90px top -80px, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
html body #services .card-3d {
  background: linear-gradient(165deg, var(--kw-acier-clair) 0%, #121418 100%);
  border: 1px solid var(--kw-ligne);
  border-top: 3px solid var(--kw-orange);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 24px 44px rgba(60, 18, 0, 0.45);
}
html body #services .card-3d > div:first-child {
  color: #ff8a3d;
  background: radial-gradient(circle at 50% 40%, rgba(245, 108, 20, 0.22), rgba(245, 108, 20, 0.04) 70%);
  border: 1px solid rgba(245, 108, 20, 0.35);
  border-radius: 9999px;
  width: 6rem;
  height: 6rem;
}
html body #services .card-3d p { color: #d4d4d8; }
html body #services .card-3d h3 { text-shadow: none; }
html body #services .card-3d > span { background-color: var(--kw-orange); color: #fff; }
html body #services .card-3d > span i { color: #fff; }

/* ---------- Véhicules : showroom éclairé ---------- */
html body #vehicules {
  background:
    radial-gradient(ellipse 22% 55% at 20% -10%, rgba(255, 181, 71, 0.16), transparent 70%),
    radial-gradient(ellipse 22% 55% at 50% -10%, rgba(255, 181, 71, 0.2), transparent 70%),
    radial-gradient(ellipse 22% 55% at 80% -10%, rgba(255, 181, 71, 0.16), transparent 70%),
    linear-gradient(180deg, #0b0d12 0%, #0b0d12 70%, #120f0d 100%) !important;
}
html body #vehicules > div > div[style] {
  background: rgba(11, 13, 18, 0.82) !important;
  backdrop-filter: blur(2px);
}
html body #vehicules article { transition: border-color 0.3s, box-shadow 0.3s; }
html body #vehicules article:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 108, 20, 0.25); }

/* ---------- Bande « sculpture de pneu » (séparateurs) ---------- */
html body #engagement,
html body footer {
  position: relative;
}
html body #engagement::before,
html body footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Cpath d='M0 2 L11 8 L0 14 M22 2 L33 8 L22 14' fill='none' stroke='%23f56c14' stroke-width='3.5' stroke-linecap='square'/%3E%3Cpath d='M15 0 V16 M37 0 V16' stroke='%23f56c14' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 44px 16px;
  opacity: 0.22;
  pointer-events: none;
}
html body #engagement {
  background:
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(245, 108, 20, 0.07), transparent 70%),
    #0c0d10;
}

/* ---------- Réalisations : vignettes sur plan technique ---------- */
html body #realisations-scroll > div > div.h-40 {
  background-image:
    linear-gradient(rgba(245, 108, 20, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 108, 20, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 55%, rgba(245, 108, 20, 0.18), transparent 60%),
    linear-gradient(160deg, #1d2026, #0e0f12);
  background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%;
}
html body #realisations-scroll > div > div.h-40 i { color: #ff8a3d; opacity: 0.85; }

/* ---------- Avis : vert forêt, grand guillemet ---------- */
html body #avis {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 60% at 15% 20%, rgba(52, 168, 83, 0.14), transparent 70%),
    linear-gradient(180deg, #06170e 0%, #082214 50%, #04110a 100%) !important;
}
html body #avis::before {
  content: "\201C";
  position: absolute;
  right: 4%;
  top: 0.02em;
  font-family: 'Oswald', serif;
  font-size: clamp(14rem, 28vw, 26rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}
html body #avis > div { position: relative; }

/* ---------- FAQ ---------- */
html body #faq details { transition: border-color 0.2s, background-color 0.2s; }
html body #faq details[open] {
  background-color: #17191e;
  box-shadow: inset 3px 0 0 var(--kw-orange);
}

/* ---------- Contact : courbes de niveau (relief) ---------- */
html body #contact.bg-metallic {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f56c14' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='.22'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23ffb547' stop-opacity='.9'/%3E%3Cstop offset='.6' stop-color='%23f56c14' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='above'%3E%3Crect width='1600' height='250'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='1600' height='250' fill='url(%23sky)'/%3E%3Ccircle cx='760' cy='250' r='150' fill='url(%23sun)' clip-path='url(%23above)'/%3E%3Ccircle cx='760' cy='250' r='62' fill='%23ffb547' fill-opacity='.55' clip-path='url(%23above)'/%3E%3Cg fill='%2316110e'%3E%3Cpath d='M0 250 V214 H40 V196 H70 V222 H110 V180 H130 V170 H150 V230 H190 V204 H240 V250 Z'/%3E%3Cpath d='M300 250 V226 H330 V210 H360 V190 H372 V160 H384 V190 H400 V218 H440 V232 H480 V250 Z'/%3E%3Cpath d='M1260 250 V230 H1290 V200 H1330 V186 H1360 V214 H1400 V176 H1418 V150 H1430 V176 H1450 V222 H1500 V206 H1540 V250 Z'/%3E%3C/g%3E%3Crect y='250' width='1600' height='110' fill='%230d0c0d'/%3E%3Cg stroke='%23ffb547' stroke-linecap='round' fill='none'%3E%3Cpath d='M670 266 H850' stroke-opacity='.5' stroke-width='3'/%3E%3Cpath d='M700 284 H820' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M725 302 H795' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M740 320 H780' stroke-opacity='.18' stroke-width='3'/%3E%3C/g%3E%3Cg stroke='%23f56c14' stroke-opacity='.18' stroke-width='1.5' fill='none' stroke-dasharray='30 22'%3E%3Cpath d='M0 276 H1600'/%3E%3Cpath d='M40 300 H1600' stroke-dashoffset='20'/%3E%3Cpath d='M0 330 H1600' stroke-dashoffset='8'/%3E%3C/g%3E%3Cg fill='%230a0909'%3E%3Cpath d='M160 360 C170 300 182 250 210 196 L216 198 C192 252 182 300 176 360 Z'/%3E%3Cpath d='M212 196 C180 176 150 180 120 200 C152 190 180 192 212 200 Z M212 196 C200 160 172 146 146 148 C176 158 196 176 208 200 Z M212 196 C232 160 262 150 292 160 C262 162 236 176 216 200 Z M212 196 C248 184 280 194 300 214 C274 202 246 198 216 202 Z M212 196 C214 170 228 150 244 140 C232 160 222 178 216 198 Z'/%3E%3Cpath d='M1520 360 C1508 296 1492 240 1462 190 L1456 193 C1482 244 1496 300 1504 360 Z'/%3E%3Cpath d='M1460 190 C1490 168 1522 170 1552 188 C1520 180 1492 184 1460 194 Z M1460 190 C1470 154 1498 140 1526 140 C1496 152 1476 170 1464 194 Z M1460 190 C1440 156 1410 146 1380 156 C1410 158 1436 172 1456 194 Z M1460 190 C1424 178 1392 188 1372 208 C1398 196 1426 192 1456 196 Z'/%3E%3Cpath d='M1384 360 C1380 320 1372 290 1356 262 L1351 264 C1364 292 1370 322 1372 360 Z'/%3E%3Cpath d='M1354 262 C1334 248 1312 250 1294 264 C1314 256 1334 258 1352 266 Z M1354 262 C1372 246 1394 246 1412 258 C1392 254 1372 258 1356 266 Z M1354 262 C1352 242 1362 228 1376 222 C1366 236 1360 250 1356 264 Z'/%3E%3C/g%3E%3C/svg%3E") center bottom / 1600px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' fill='none' stroke='%23f56c14' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M-20 420 C120 360 220 470 360 410 S600 300 820 360'/%3E%3Cpath d='M-20 450 C130 390 230 500 370 440 S610 330 820 390'/%3E%3Cpath d='M-20 480 C140 420 240 530 380 470 S620 360 820 420'/%3E%3Cpath d='M-20 510 C150 450 250 560 390 500 S630 390 820 450'/%3E%3Cpath d='M560 160 C620 120 700 150 700 200 C700 260 620 280 570 250 C530 225 520 185 560 160 Z'/%3E%3Cpath d='M540 145 C620 90 730 130 728 205 C726 285 610 305 550 265 C500 230 495 175 540 145 Z'/%3E%3Cpath d='M520 130 C620 60 760 110 756 210 C752 310 600 335 528 280 C470 238 470 165 520 130 Z'/%3E%3Cpath d='M90 120 C150 80 230 110 220 160 C210 210 130 220 100 190 C75 165 70 135 90 120 Z'/%3E%3Cpath d='M70 105 C150 50 260 95 246 165 C232 235 120 245 82 205 C50 172 45 125 70 105 Z'/%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(circle at 20% 20%, #1c1f25 0%, #111317 60%, #0b0c0f 100%);
}
html body #contact.bg-metallic { padding-bottom: 240px; }
html body #contact .bg-zinc-900\/80 { background-color: rgba(23, 25, 30, 0.88); }

/* ---------- Pied de page ---------- */
html body footer { background-color: #08090b; padding-top: 2.75rem; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  html body #accueil.bg-metallic::after {
    background-size: 0 0, 0 0, 100% 100%, 980px auto;
    background-position: 0 0, 0 0, center, right -150px bottom 120px;
  }
  html body #planning { background-size: 380px 380px, 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: right -200px top 10px, 0 0, 0 0, 0 0, 0 0; }
  html body #services .card-3d > div:first-child { width: 5.5rem; height: 5.5rem; }
  html body #contact.bg-metallic { padding-bottom: 170px; background-size: 1100px auto, cover, auto; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html body #accueil.bg-metallic::after { animation: none; }
  html body #accueil.bg-metallic::before { animation: none; display: none; }
}

/* =========================================================================
   DÉTAILS D'ATELIER
   ========================================================================= */

/* Jauge de lecture : un trait orange sous l'en-tête se remplit pendant le défilement */
@supports (animation-timeline: scroll()) {
  html body header.sticky::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--kw-braise), var(--kw-orange) 70%, var(--kw-ambre));
    transform-origin: left center;
    transform: scaleX(0);
    animation: kw-jauge linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes kw-jauge { to { transform: scaleX(1); } }
}

/* Règle graduée sous les grands titres centrés */
html body #planning h2,
html body #services h2,
html body #vehicules h2,
html body #engagement h2,
html body #avis h2,
html body #faq h2 {
  padding-bottom: 26px;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 40px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px);
  background-size: 162px 14px, 161px 7px;
  background-position: center bottom, center bottom;
  background-repeat: no-repeat;
}
html body #planning h2, html body #vehicules h2, html body #avis h2, html body #faq h2 { color: #fff; }

/* Planning : jours en feuillets d'éphéméride (anneaux de reliure) */
html body #daysContainer button {
  position: relative;
  padding-top: 22px;
  background-image:
    radial-gradient(circle at calc(50% - 22px) 8px, #050608 0 4px, rgba(255, 255, 255, 0.18) 4.5px, transparent 5.5px),
    radial-gradient(circle at calc(50% + 22px) 8px, #050608 0 4px, rgba(255, 255, 255, 0.18) 4.5px, transparent 5.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 16px, transparent 16px);
}
html body #daysContainer button:not([disabled]) .font-heading { font-size: 1.45rem; letter-spacing: 0.02em; }

/* Planning : créneaux en tableau à volets */
html body #slotsContainer .slot-btn {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 50%, rgba(0, 0, 0, 0.22) 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 0 rgba(0, 0, 0, 0.5);
}
html body #slotsContainer .slot-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
html body #slotsContainer .slot-btn.available { font-size: 0.85rem; }

/* Services : cadran de tableau de bord autour de chaque icône */
html body #services .card-3d > div:first-child::before,
html body #services .card-3d > div:first-child::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
html body #services .card-3d > div:first-child::before {
  background: repeating-conic-gradient(from 225deg, rgba(255, 255, 255, 0.35) 0 1.2deg, transparent 1.2deg 13.5deg);
  -webkit-mask: conic-gradient(from 225deg, #000 0 270deg, transparent 270deg), radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  -webkit-mask-composite: source-in;
  mask: conic-gradient(from 225deg, #000 0 270deg, transparent 270deg) intersect, radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
html body #services .card-3d > div:first-child::after {
  inset: -18px;
  background: conic-gradient(from 225deg, var(--kw-braise), var(--kw-orange) 150deg, var(--kw-ambre) 205deg, transparent 205deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 0.9;
  transition: transform 0.6s cubic-bezier(.3, 1.4, .5, 1);
}
html body #services .card-3d:hover > div:first-child::after { transform: rotate(40deg); }
html body #services .card-3d > div:first-child { margin-bottom: 2.25rem; margin-top: 0.5rem; }

/* Garanties : numéros en plaques rivetées */
html body #engagement .space-y-6 > div > div:first-child {
  background:
    radial-gradient(circle at 6px 6px, #c9ccd2 0 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 6px) 6px, #c9ccd2 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 6px calc(100% - 6px), #c9ccd2 0 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #c9ccd2 0 1.6px, transparent 2.4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #3a3f47, #1c1f24);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--kw-ambre);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
html body #engagement .space-y-6 > div { transition: border-color 0.3s; }
html body #engagement .space-y-6 > div:hover { border-color: rgba(245, 108, 20, 0.45); }

/* Réalisations : chaque carte devient un bon d'intervention (encoches + ligne prédécoupée) */
html body #realisations-scroll > div {
  -webkit-mask:
    radial-gradient(circle 9px at 0 160px, transparent 98%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 160px, transparent 98%, #000 100%) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 9px at 0 160px, transparent 98%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 160px, transparent 98%, #000 100%) right / 51% 100% no-repeat;
  background: linear-gradient(180deg, #17191e, #121418);
}
html body #realisations-scroll > div > div.p-3 {
  border-top: 2px dashed rgba(245, 108, 20, 0.35);
  padding-top: 14px;
  padding-bottom: 16px;
}

/* Véhicules : prix sur étiquette de concession */
html body #veh-grid article .text-xl.font-extrabold {
  display: inline-block;
  padding: 6px 16px 6px 26px;
  background:
    radial-gradient(circle at 12px 50%, #121620 0 3.5px, transparent 4px),
    linear-gradient(90deg, rgba(255, 85, 0, 0.16), rgba(255, 85, 0, 0.06));
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  font-variant-numeric: tabular-nums;
}

/* Contact : encadré d'urgence en bandes de signalisation */
html body #contact .bg-red-950\/40 {
  border: 5px solid transparent;
  background:
    linear-gradient(#1a0c0a, #1a0c0a) padding-box,
    repeating-linear-gradient(-45deg, var(--kw-orange) 0 12px, #111317 12px 24px) border-box;
}

/* Avis : étoiles dorées un peu plus lumineuses */
html body #avis .text-amber-400 { filter: drop-shadow(0 0 6px rgba(255, 181, 71, 0.35)); }

@media (prefers-reduced-motion: reduce) {
  html body header.sticky::after { animation: none; transform: scaleX(0); }
  html body #services .card-3d > div:first-child::after { transition: none; }
}

/* =========================================================================
   KW ENTREPRISE — 2e COUCHE : LISIBILITÉ, COULEURS ET PHOTOS (oct. 2026)
   Toujours du design uniquement : aucune fonction du site n'est touchée.
   Les photos utilisées sont les fichiers kw-photo-*.webp placés à côté de ce fichier.
   ========================================================================= */

/* ---------- Police de lecture plus claire ---------- */
html body {
  font-family: 'Source Sans 3', 'Roboto', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body p { line-height: 1.65; }
html body .font-heading, html body h1, html body h2 { letter-spacing: 0.035em; }
html body h3 { line-height: 1.25; }

/* Petits textes : un cran plus grands pour être lus sans effort */
html body .text-\[9px\] { font-size: 11px; }
html body .text-\[10px\] { font-size: 12px; }
html body .text-\[11px\] { font-size: 13px; }
html body .text-xs { font-size: 0.84rem; line-height: 1.5; }
html body .text-sm { font-size: 0.95rem; line-height: 1.6; }

/* Gris trop pâles : remontés pour un bon contraste sur fond sombre */
html body .text-zinc-500, html body .text-gray-500 { color: #a8a8b3; }
html body .text-zinc-600, html body .text-gray-600 { color: #8e8e99; }
html body .text-zinc-400, html body .text-gray-400 { color: #c3c3cc; }
html body .text-zinc-300 { color: #dcdce2; }

/* Bandeau défilant du haut : plus lisible */
html body .ticker-track span { font-size: 12.5px; letter-spacing: 0.08em; }

/* ---------- Navigation ---------- */
html body header nav a { position: relative; padding: 4px 2px; }
html body header nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px;
  background: var(--kw-orange); transform: scaleX(0); transition: transform .25s ease;
}
html body header nav a:hover::after { transform: scaleX(1); }

/* ---------- HERO : vraie photo de l'atelier KW ---------- */
html body #accueil.bg-metallic {
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(245, 108, 20, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(14, 15, 18, 0.74) 0%, rgba(14, 15, 18, 0.62) 45%, rgba(14, 15, 18, 0.96) 100%),
    url("kw-photo-atelier.webp") center 35% / cover no-repeat,
    #0e0f12;
}
/* la scène dessinée laisse place à la photo ; on garde seulement les outils suspendus */
html body #accueil.bg-metallic::after {
  background-size: 270px auto, 270px auto, 100% 100%, 0 0;
  opacity: 0.55;
}
html body #accueil h1 { text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.9); }
html body #accueil p.text-lg { color: #ff8a3d; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
html body #accueil .offer-card { background: linear-gradient(135deg, rgba(234, 88, 12, 0.30), rgba(10, 10, 12, 0.82)); }

/* ---------- Titres de section : petit badge + soulignement ---------- */
html body #video-presentation h2, html body #realisations h2, html body #contact h2 {
  padding-bottom: 12px;
  background: linear-gradient(90deg, var(--kw-orange), rgba(245, 108, 20, 0) 70%) left bottom / 180px 3px no-repeat;
}
html body section span.tracking-widest.text-orange-500,
html body section div.tracking-widest.text-orange-500 {
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- Planning : étapes et choix plus visibles ---------- */
html body #planning label span.rounded-full.bg-orange-500 {
  width: 30px; height: 30px; font-size: 14px;
  box-shadow: 0 0 0 4px rgba(245, 108, 20, 0.2), 0 0 14px rgba(245, 108, 20, 0.5);
}
html body #planning .service-type-btn { transition: transform .15s, border-color .2s, box-shadow .2s, background-color .2s; }
html body #planning .service-type-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
html body #planning .service-type-btn i {
  width: 46px; height: 46px; border-radius: 12px; display: grid !important; place-items: center;
  background: rgba(245, 108, 20, 0.14); border: 1px solid rgba(245, 108, 20, 0.35);
}
html body #planning .service-type-btn:nth-child(2) i { color: #f59e0b; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); }
html body #planning .service-type-btn:nth-child(3) i { color: #f87171; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.4); }
html body #planning .service-type-btn:nth-child(4) i { color: #60a5fa; background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.4); }
html body #planning .service-type-btn:nth-child(1) i { color: #22d3ee; background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.4); }

/* ---------- Services : photo en haut de chaque grande carte ---------- */
html body #services .card-3d {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 20, 24, 0.35) 0%, rgba(18, 20, 24, 0.82) 120px, #121418 210px),
    var(--kw-svc-photo, none) center top / 100% 220px no-repeat,
    linear-gradient(165deg, var(--kw-acier-clair) 0%, #121418 100%);
}
html body #services .grid > .card-3d:nth-child(1) { --kw-svc-photo: url("kw-photo-diagnostic.webp"); }
html body #services .grid > .card-3d:nth-child(2) { --kw-svc-photo: url("kw-photo-filtre.webp"); }
html body #services .grid > .card-3d:nth-child(3) { --kw-svc-photo: url("kw-photo-freins.webp"); }
html body #services .card-3d > div:first-child {
  background: radial-gradient(circle at 50% 40%, rgba(245, 108, 20, 0.35), rgba(14, 15, 18, 0.85) 70%);
  backdrop-filter: blur(3px);
}
html body #services .card-3d p { color: #e4e4e9; }
html body #services .card-3d h3 { font-size: 1.45rem; }

/* Petites prestations : une couleur chacune */
html body #services .grid.grid-cols-2 > div {
  background: rgba(10, 10, 12, 0.62); border-left: 0; border-top: 3px solid var(--kw-mini, #fff);
  transition: transform .15s, background-color .2s;
}
html body #services .grid.grid-cols-2 > div:hover { transform: translateY(-2px); background: rgba(10, 10, 12, 0.8); }
html body #services .grid.grid-cols-2 > div i {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  color: var(--kw-mini, #fff) !important; background: rgba(255, 255, 255, 0.08);
}
html body #services .grid.grid-cols-2 > div:nth-child(1) { --kw-mini: #7dd3fc; }
html body #services .grid.grid-cols-2 > div:nth-child(2) { --kw-mini: #d1d5db; }
html body #services .grid.grid-cols-2 > div:nth-child(3) { --kw-mini: #86efac; }
html body #services .grid.grid-cols-2 > div:nth-child(4) { --kw-mini: #fcd34d; }

/* ---------- Véhicules : photo du showroom en fond du titre ---------- */
html body #vehicules > div > div.text-center:first-child {
  padding: 34px 16px 30px; border-radius: 18px; overflow: hidden; position: relative;
  background:
    linear-gradient(180deg, rgba(11, 13, 18, 0.55), rgba(11, 13, 18, 0.92)),
    url("kw-photo-showroom.webp") center 40% / cover no-repeat;
  border: 1px solid rgba(245, 108, 20, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- Garanties : cartes plus aérées + photo sur le bloc chiffres ---------- */
html body #engagement .space-y-6 > div { padding: 1.4rem; }
html body #engagement .space-y-6 > div p { font-size: 0.95rem; }
html body #engagement .grid > div.bg-gradient-to-b {
  background:
    linear-gradient(180deg, rgba(24, 24, 27, 0.75), rgba(9, 9, 11, 0.97) 55%),
    url("kw-photo-pieces.webp") center top / 100% auto no-repeat,
    #0e0f12;
}
html body #engagement .grid.grid-cols-2 > div { background: rgba(9, 9, 11, 0.78); backdrop-filter: blur(4px); }

/* ---------- Réalisations : photos de l'atelier dans les vignettes ---------- */
html body #realisations-scroll > div > div.h-40 { background-size: cover; background-position: center; position: relative; }
html body #realisations-scroll > div > div.h-40 i { opacity: 0; }
html body #realisations-scroll > div:nth-child(6n+1) > div.h-40 { background-image: linear-gradient(180deg, transparent 50%, rgba(14,15,18,.7)), url("kw-photo-moteur.webp"); }
html body #realisations-scroll > div:nth-child(6n+2) > div.h-40 { background-image: linear-gradient(180deg, transparent 50%, rgba(14,15,18,.7)), url("kw-photo-freins.webp"); }
html body #realisations-scroll > div:nth-child(6n+3) > div.h-40 { background-image: linear-gradient(180deg, transparent 50%, rgba(14,15,18,.7)), url("kw-photo-diagnostic.webp"); }
html body #realisations-scroll > div:nth-child(6n+4) > div.h-40 { background-image: linear-gradient(180deg, transparent 50%, rgba(14,15,18,.7)), url("kw-photo-entretien.webp"); }
html body #realisations-scroll > div:nth-child(6n+5) > div.h-40 { background-image: linear-gradient(180deg, transparent 50%, rgba(14,15,18,.7)), url("kw-photo-distribution.webp"); }
html body #realisations-scroll > div:nth-child(6n+6) > div.h-40 { background-image: linear-gradient(180deg, transparent 50%, rgba(14,15,18,.7)), url("kw-photo-showroom.webp"); }
html body #realisations-scroll h3 { font-size: 0.9rem; }

/* ---------- Avis : cartes lisibles ---------- */
html body #avis .grid > div { background: rgba(0, 0, 0, 0.5); border-color: rgba(52, 168, 83, 0.35); transition: transform .2s, border-color .2s; }
html body #avis .grid > div:hover { transform: translateY(-3px); border-color: rgba(74, 222, 128, 0.6); }
html body #avis .grid > div p { font-size: 0.98rem; color: #e4e4e9; }

/* ---------- FAQ : questions plus confortables ---------- */
html body #faq summary { font-size: 1.02rem; padding: 4px 0; }
html body #faq details p { font-size: 1rem; color: #dcdce2; }
html body #faq details:hover { border-color: rgba(245, 108, 20, 0.45); }

/* ---------- Contact ---------- */
html body #contact .space-y-4 > div { transition: border-color .2s, transform .15s; }
html body #contact .space-y-4 > div:hover { border-color: rgba(245, 108, 20, 0.5); transform: translateX(3px); }
html body #contact .space-y-4 > div > i {
  width: 44px; height: 44px; margin-top: 0 !important; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.1rem !important;
  background: rgba(245, 108, 20, 0.14); border: 1px solid rgba(245, 108, 20, 0.35);
}

/* ---------- Champs de formulaire : plus grands et plus nets ---------- */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="date"], html body select, html body textarea {
  font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
html body input:focus, html body select:focus, html body textarea:focus {
  box-shadow: 0 0 0 3px rgba(245, 108, 20, 0.22);
}
html body label { letter-spacing: 0.04em; }

/* ---------- Boutons principaux : reflet ---------- */
html body .btn-3d { position: relative; overflow: hidden; }
html body .btn-3d::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); animation: kw-reflet 4s ease-in-out infinite;
}
@keyframes kw-reflet { 0%, 65% { left: -60%; } 100% { left: 130%; } }

/* ---------- Pied de page plus lisible ---------- */
html body footer { font-size: 0.9rem; color: #b4b4bd; }
html body footer a:hover { color: #ff8a3d; }

@media (max-width: 768px) {
  html body { font-size: 16px; }
  html body #services .card-3d { background-size: auto, 100% 190px, auto; }
}
@media (prefers-reduced-motion: reduce) {
  html body .btn-3d::after, html body header nav a::after { animation: none; transition: none; }
}

/* En-tête : tailles d'origine conservées pour ne pas casser la ligne */
html body header .text-xs { font-size: 0.75rem; }
html body header .text-sm { font-size: 0.875rem; }
html body header .text-\[10px\] { font-size: 10px; }
html body header a[href^="tel"] { white-space: nowrap; }
html body header nav { row-gap: 6px; }

/* Mobile : badge « Planning en direct » sur une ou deux lignes propres */
@media (max-width: 640px) {
  html body #accueil > div > div:first-child { display: block; text-align: center; line-height: 1.5; padding: 8px 16px; font-size: 11.5px; }
  html body #accueil > div > div:first-child > span:first-child { display: inline-block; vertical-align: middle; margin-right: 6px; }
}