/* ===================================================================
   KeyTronic Auto — charte graphique
   Bleu nuit + dégradé bleu électrique → vert néon (logo KT),
   Montserrat (logotype) + Open Sans (texte courant).
=================================================================== */
:root{
  --bg:        #05090e;
  --bg-2:      #08111a;
  --bg-3:      #0c1824;
  --line:      #14283a;
  --line-2:    #1c3a54;

  --text:      #ecf5fb;
  --text-2:    #b3c6d4;
  --text-3:    #8199ad;

  --blue:      #17a6ff;
  --cyan:      #1fd3e6;
  --green:     #44e68b;
  --grad:      linear-gradient(90deg, #17a6ff 0%, #1fd3e6 52%, #44e68b 100%);
  --grad-soft: linear-gradient(135deg, rgba(23,166,255,.16), rgba(68,230,139,.10));
  --on-grad:   #03121b;

  --font-display: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', 'Segoe UI', sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0 28 8v16L14 32 0 24V8zM14 32v16' fill='none' stroke='%2317a6ff' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ overflow-x: hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); font-weight:800; text-wrap: balance; margin:0; color: var(--text); letter-spacing:-.01em; }
p{ margin:0; }
figure{ margin:0; }
::selection{ background: var(--cyan); color: var(--on-grad); }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.section{ padding: 96px 0; position:relative; }
@media (max-width: 640px){ .section{ padding: 72px 0; } }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background: var(--text); color: var(--bg); padding:.7rem 1rem; font-weight:700;
}
.skip-link:focus{ left:0; }
a:focus-visible, summary:focus-visible, button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

.ic{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ic-text{ fill: currentColor; stroke:none; font-family: var(--font-display); font-weight:800; font-size:5.6px; letter-spacing:.2px; }

.grad-text{
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* ---------- kicker + titres à double trait (signature carte de visite) ---------- */
.kicker{
  font-family: var(--font-display); font-weight:600; font-size:.74rem;
  letter-spacing:.28em; text-transform:uppercase; color: var(--cyan); margin-bottom:.9rem;
}
.title-bars{ text-transform:uppercase; font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing:.01em; }
.title-bars::after{
  content:""; display:block; width: 150px; height:4px; margin-top:1rem;
  background:
    linear-gradient(90deg, var(--blue), var(--cyan)) left / 46% 100% no-repeat,
    linear-gradient(90deg, var(--cyan), var(--green)) right / 46% 100% no-repeat;
  border-radius: 2px;
}
.title-bars--center::after{ margin-left:auto; margin-right:auto; }
.section-head{ margin-bottom: 2.6rem; }
.section-head--center{ text-align:center; }
.section-lead{ color: var(--text-2); font-size:1.05rem; max-width: 48ch; margin-top:1.2rem; }

/* ---------- header ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(5,9,14,.9), rgba(5,9,14,0));
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid{ background: rgba(5,9,14,.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 1.2rem; }

.brand{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.brand-mark{ width: 62px; height:auto; filter: drop-shadow(0 0 10px rgba(31,211,230,.35)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family: var(--font-display); font-weight:800; font-size:1.08rem; text-transform:uppercase; letter-spacing:.02em;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color: transparent;
}
.brand-tag{ font-family: var(--font-display); font-weight:500; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color: var(--text-3); margin-top:.3rem; }
@media (max-width: 420px){
  .brand-mark{ width: 50px; }
  .brand-name{ font-size:.95rem; }
  .brand-tag{ display:none; }
}

.main-nav{ display:none; align-items:center; gap: 1.8rem; font-family: var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.main-nav a{ color: var(--text-2); padding:.4rem 0; position:relative; }
.main-nav a:not(.nav-rdv)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--grad);
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.main-nav a:hover{ color: var(--text); }
.main-nav a:hover::after{ transform: scaleX(1); }
.nav-rdv{ border:1.5px solid rgba(23,166,255,.55); border-radius:999px; padding:.55rem 1.1rem !important; color: var(--text) !important; }
.nav-rdv:hover{ border-color: var(--green); box-shadow: 0 0 18px rgba(68,230,139,.25); }
@media (min-width: 1040px){ .main-nav{ display:flex; } }

.header-call{
  display:flex; align-items:center; gap:.6rem; flex-shrink:0;
  min-height:44px; padding: 4px 16px 4px 4px; border-radius:999px;
  border:1.5px solid rgba(23,166,255,.6); background: rgba(8,17,26,.7);
  font-family: var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.02em;
  box-shadow: 0 0 18px rgba(23,166,255,.18);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.header-call:hover{ border-color: var(--cyan); box-shadow: 0 0 24px rgba(31,211,230,.35); }
@media (max-width: 640px){
  .header-call{ padding:0; width:44px; height:44px; justify-content:center; }
  .header-call-num{ display:none; }
  .header-call .pill-ico{ width:36px; height:36px; }
}

/* pastille ronde d'icône, comme sur la carte de visite */
.pill-ico{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 30%, #5cc8ff, #1178d6 70%);
  color:#fff; box-shadow: 0 0 12px rgba(23,166,255,.5);
}
.pill-ico .ic{ width:18px; height:18px; stroke-width:1.9; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height: 52px; padding: .5rem 1.6rem; border-radius: 999px;
  font-family: var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.01em;
  border: 1.5px solid transparent; cursor:pointer;
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.btn .ic{ width:20px; height:20px; }
.btn:active{ transform: scale(.98); }
.btn--primary{
  background: var(--grad); color: var(--on-grad); padding-left: .45rem;
  box-shadow: 0 10px 30px -10px rgba(31,211,230,.7);
}
.btn--primary .pill-ico{ background: var(--on-grad); color: var(--cyan); box-shadow:none; width:40px; height:40px; }
.btn--primary:hover{ box-shadow: 0 12px 36px -8px rgba(68,230,139,.75); transform: translateY(-1px); }
.btn--pulse{ animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(31,211,230,.45), 0 10px 30px -10px rgba(31,211,230,.7); }
  50%{ box-shadow: 0 0 0 10px rgba(31,211,230,0), 0 10px 36px -6px rgba(68,230,139,.8); }
}
.btn--outline{ background: rgba(8,17,26,.55); color: var(--text); border-color: rgba(23,166,255,.6); }
.btn--outline .ic{ color: var(--cyan); }
.btn--outline:hover{ border-color: var(--green); box-shadow: 0 0 22px rgba(68,230,139,.25); }
.btn--block{ flex:1; }
.btn--icon{ width:52px; padding:0; flex:0 0 auto; }

/* ---------- hero ---------- */
.hero{ position:relative; padding: 168px 0 96px; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media-video{ width:100%; height:100%; object-fit:cover; object-position:center 40%; filter: saturate(.55) contrast(1.05); }
.hero-media img{ position:absolute; inset:0; }
.hero-media-video{ position:relative; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 10% 90%, rgba(23,166,255,.22), transparent 60%),
    linear-gradient(90deg, rgba(5,9,14,.92) 0%, rgba(5,9,14,.6) 48%, rgba(5,9,14,.25) 100%),
    linear-gradient(180deg, rgba(5,9,14,.3) 0%, rgba(5,9,14,.2) 60%, var(--bg) 100%);
}
.hero-inner{ position:relative; z-index:1; }
.hero-inner > *{ max-width: 760px; }
.status-chip{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom: 1.6rem;
  padding:.45rem .95rem; border-radius:999px; border:1px solid rgba(68,230,139,.4); background: rgba(68,230,139,.08);
  font-family: var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--green);
}
.live-dot{ width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow: 0 0 0 0 rgba(68,230,139,.6); animation: live 2s ease-out infinite; }
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(68,230,139,.6); } 100%{ box-shadow:0 0 0 10px rgba(68,230,139,0); } }
.hero h1{ font-size: clamp(2.35rem, 6.2vw, 4.4rem); line-height:1.02; }
.hero-lead{ color: var(--text-2); font-size: 1.12rem; margin: 1.4rem 0 2.2rem; max-width: 50ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: .9rem; margin-bottom: 2.4rem; }
.hero-points{ display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; font-size:.9rem; color: var(--text-2); }
.hero-points li{ display:flex; align-items:center; gap:.55rem; }
.hero-points li::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
@media (max-width: 640px){
  .hero{ padding: 132px 0 64px; }
  .hero-actions .btn{ width:100%; }
  .hero-media img, .hero-media-video{ object-position: center 30%; }
  .hero-scrim{ background: linear-gradient(180deg, rgba(5,9,14,.75) 0%, rgba(5,9,14,.82) 60%, var(--bg) 100%); }
}

/* ---------- ticker ---------- */
.ticker{ border-block:1px solid var(--line); background: var(--bg-2); overflow:hidden; padding: 14px 0; }
.ticker-track{ display:flex; width:max-content; animation: ticker 32s linear infinite; }
.ticker-track span{
  display:flex; align-items:center; white-space:nowrap; padding: 0 1.4rem;
  font-family: var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color: var(--text-2);
}
.ticker-track span::after{ content:""; width:6px; height:6px; border-radius:50%; background: var(--cyan); margin-left: 2.8rem; box-shadow:0 0 8px var(--cyan); }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- photos en duotone de marque ---------- */
.duo{ position:relative; overflow:hidden; border-radius: var(--radius); background: var(--bg-3); }
.duo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.15) brightness(.8); }
.duo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, #17a6ff 0%, #1fd3e6 50%, #44e68b 100%);
  mix-blend-mode: color; opacity:.55;
}

/* ---------- services ---------- */
.services{ background: var(--bg); }
.services::before{
  content:""; position:absolute; top:0; bottom:0; right:0; width: 38%; pointer-events:none;
  background-image: var(--hex);
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
          mask-image: linear-gradient(270deg, #000, transparent);
  opacity:.8;
}
.services-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items:start; position:relative; }
.services-aside{ position: sticky; top: 110px; }
.services-photo{ aspect-ratio: 4/5; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); border:1px solid var(--line); }
@media (max-width: 960px){
  .services-grid{ grid-template-columns: 1fr; gap: 36px; }
  .services-aside{ position: static; }
  .services-photo{ aspect-ratio: 16/9; }
}

.service-list{ display:flex; flex-direction:column; gap: 14px; }
.service{
  display:grid; grid-template-columns: 64px 1fr; gap: 1.2rem; align-items:center;
  padding: 1.35rem 1.4rem; border-radius: var(--radius);
  background: var(--bg-2); border:1px solid var(--line);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.service:hover{ border-color: var(--line-2); background: var(--bg-3); transform: translateX(4px); }
.service-ico{
  width:64px; height:56px; display:flex; align-items:center; justify-content:center; position:relative;
  color: #3cc2ff; border-right: 3px solid var(--green); padding-right: 14px;
}
.service-ico .ic{ width:40px; height:40px; stroke-width:1.5; filter: drop-shadow(0 0 6px rgba(23,166,255,.55)); }
@media (max-width: 560px){
  .service{ grid-template-columns: 46px 1fr; gap: .9rem; padding: 1.1rem 1rem; }
  .service-ico{ width:46px; height:44px; padding-right:10px; }
  .service-ico .ic{ width:30px; height:30px; }
}
.service-body h3{ font-size:1.08rem; font-weight:700; line-height:1.3; margin-bottom:.35rem; }
.service-body p{ color: var(--text-2); font-size:.95rem; }

/* ---------- méthode ---------- */
.method{ background: var(--bg-2); border-block:1px solid var(--line); overflow:hidden; }
.method-bg{ position:absolute; inset:0; opacity:.14; }
.method-bg img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) blur(2px); }
.method .wrap{ position:relative; }
.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 960px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step{
  position:relative; padding: 1.8rem 1.5rem 1.6rem; border-radius: var(--radius);
  background: rgba(5,9,14,.75); border:1px solid var(--line); backdrop-filter: blur(4px);
}
.step::before{
  content:""; position:absolute; left:1.5rem; right:1.5rem; top:0; height:2px; background: var(--grad); border-radius:2px;
}
.step-num{
  display:block; font-family: var(--font-display); font-weight:800; font-size:2.4rem; line-height:1; margin-bottom:1rem;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h3{ font-size:1.15rem; margin-bottom:.5rem; }
.step p{ color: var(--text-2); font-size:.94rem; }

/* ---------- statement / équipement ---------- */
.statement{ position:relative; padding: 120px 0; overflow:hidden; }
.statement-media{ position:absolute; inset:0; border-radius:0; }
.statement::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(5,9,14,.95) 0%, rgba(5,9,14,.7) 55%, rgba(5,9,14,.35) 100%);
}
.statement-inner{ position:relative; z-index:1; }
.statement-inner > *{ max-width: 640px; }
.statement-inner h2{ font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 1.2rem; }
.statement-inner p:last-child{ color: var(--text-2); font-size:1.06rem; max-width: 52ch; }
@media (max-width: 640px){ .statement{ padding: 84px 0; } .statement::after{ background: rgba(5,9,14,.82); } }

.equipment{ padding-top: 72px; }
.tool-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1040px){ .tool-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .tool-grid{ grid-template-columns: 1fr; } }
.tool{
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.1rem 1.4rem;
  transition: border-color .25s ease;
}
.tool:hover{ border-color: var(--line-2); }
.tool-shot{
  aspect-ratio: 4/3; border-radius: var(--radius-sm); border:1px dashed var(--line-2);
  background: var(--hex), var(--bg-3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding: 1rem;
  position:relative; margin-bottom: 1.1rem; text-align:center;
}
.tool-shot-ic{ width:26px; height:26px; color: var(--cyan); }
.tool-shot p{ font-size:.74rem; line-height:1.55; color: var(--text-3); }
.tool-tag{
  position:absolute; top:10px; left:10px;
  font-family: var(--font-display); font-weight:700; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green); background: rgba(68,230,139,.08); border:1px solid rgba(68,230,139,.35);
  padding:.25rem .55rem; border-radius:999px;
}
.tool-model{ font-family: var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--cyan); margin-bottom:.35rem; }
.tool h3{ font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.tool-desc{ color: var(--text-2); font-size:.9rem; }

/* ---------- rendez-vous ---------- */
.booking{ background: var(--bg-2); border-block:1px solid var(--line); }
.booking-inner{ display:grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items:center; }
@media (max-width: 960px){ .booking-inner{ grid-template-columns:1fr; gap:44px; } }
.booking-copy > p{ color: var(--text-2); margin: 1.4rem 0 1.4rem; max-width: 52ch; }
.check-list{ display:flex; flex-direction:column; gap:.75rem; margin-bottom: 2rem; }
.check-list li{ display:flex; align-items:center; gap:.7rem; color: var(--text); font-size:.96rem; }
.check-list li::before{
  content:""; width:22px; height:22px; flex-shrink:0; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' stroke='%2303121b' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat,
    var(--grad);
}

/* pilules contact (reprise des boutons de la carte de visite) */
.contact-pills{ display:flex; flex-wrap:wrap; gap: 12px; }
.contact-pills--center{ justify-content:center; }
.contact-pill{
  display:inline-flex; align-items:center; gap:.8rem; min-height:52px;
  padding: 6px 22px 6px 6px; border-radius:999px; background: rgba(5,9,14,.6);
  font-family: var(--font-body); font-weight:700; font-size:.95rem; color: var(--text);
  transition: box-shadow .25s ease, transform .15s ease;
}
.contact-pill:active{ transform: scale(.98); }
.contact-pill--blue{ border:2px solid rgba(23,166,255,.75); box-shadow: 0 0 16px rgba(23,166,255,.25), inset 0 0 12px rgba(23,166,255,.12); }
.contact-pill--blue:hover{ box-shadow: 0 0 26px rgba(23,166,255,.5), inset 0 0 12px rgba(23,166,255,.2); }
.contact-pill--green{ border:2px solid rgba(68,230,139,.7); box-shadow: 0 0 16px rgba(68,230,139,.22), inset 0 0 12px rgba(68,230,139,.1); }
.contact-pill--green:hover{ box-shadow: 0 0 26px rgba(68,230,139,.45), inset 0 0 12px rgba(68,230,139,.18); }
.contact-pill--green .pill-ico{ background: radial-gradient(circle at 35% 30%, #7cf2b0, #16a35c 70%); box-shadow: 0 0 12px rgba(68,230,139,.5); }
.contact-pill--lg{ min-height:60px; font-size:1.1rem; padding-right: 28px; }
.contact-pill--lg .pill-ico{ width:46px; height:46px; }
.contact-pill--lg .pill-ico .ic{ width:22px; height:22px; }
@media (max-width: 480px){
  .contact-pill{ width:100%; font-size:.9rem; }
  .contact-pill--lg{ font-size:1rem; }
}

/* ---------- calendrier (aperçu) ---------- */
.calendar-mock{
  background: var(--bg); border:1px solid var(--line-2); border-radius: var(--radius); overflow:hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 40px -10px rgba(23,166,255,.2);
}
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem 1.3rem; border-bottom:1px solid var(--line); background: var(--bg-3); }
.cal-tech{ display:flex; align-items:center; gap:.75rem; }
.avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: var(--grad); color: var(--on-grad); font-family: var(--font-display); font-weight:800; font-size:.8rem;
}
.cal-name{ font-family: var(--font-display); font-weight:700; font-size:.92rem; }
.cal-sub{ font-size:.76rem; color: var(--text-3); margin-top:.1rem; }
.cal-duration{ font-family: var(--font-display); font-weight:700; font-size:.68rem; letter-spacing:.1em; color: var(--text-2); border:1px solid var(--line-2); padding:.3rem .6rem; border-radius:999px; white-space:nowrap; }
.cal-body{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 1.6rem; padding: 1.3rem; }
@media (max-width: 560px){ .cal-body{ grid-template-columns:1fr; } }
.cal-month-head{ display:flex; align-items:center; justify-content:space-between; font-family: var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:.7rem; }
.cal-nav{ color: var(--text-3); letter-spacing:.3em; }
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; text-align:center; font-variant-numeric: tabular-nums; }
.cal-dow{ font-family: var(--font-display); font-weight:600; font-size:.64rem; color: var(--text-3); padding:.3rem 0; }
.cal-days span{ font-size:.76rem; padding:.42rem 0; border-radius:8px; color: var(--text-3); }
.cal-days span.in-month{ color: #5d7488; }
.cal-days span.is-avail{ color: var(--text); background: rgba(23,166,255,.1); border:1px solid rgba(23,166,255,.3); }
.cal-days span.is-selected{ background: var(--grad); color: var(--on-grad); font-weight:700; border-color:transparent; }
.cal-slots-label{ font-family: var(--font-display); font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-3); margin-bottom:.6rem; }
.cal-slot-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; margin-bottom:1rem; font-variant-numeric: tabular-nums; }
.cal-slot-grid span{ text-align:center; font-size:.84rem; padding:.55rem 0; border-radius:999px; border:1px solid var(--line-2); color: var(--text-2); }
.cal-slot-grid span.is-selected{ background: var(--grad); border-color:transparent; color: var(--on-grad); font-weight:700; }
.cal-confirm{
  display:block; text-align:center; padding:.75rem; border-radius:999px; background: var(--grad); color: var(--on-grad);
  font-family: var(--font-display); font-weight:700; font-size:.9rem; opacity:.9;
}
.cal-note{ font-size:.7rem; color: var(--text-3); text-align:center; margin-top:.6rem; }

/* ---------- FAQ ---------- */
.faq-inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items:start; }
@media (max-width: 960px){ .faq-inner{ grid-template-columns:1fr; gap: 12px; } }
.faq-list{ display:flex; flex-direction:column; gap: 12px; }
.faq-item{ border:1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); transition: border-color .25s ease; }
.faq-item[open]{ border-color: var(--line-2); background: var(--bg-3); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:56px; padding: 1rem 1.3rem;
  font-family: var(--font-display); font-weight:700; font-size:1rem; line-height:1.35;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; width:12px; height:12px; flex-shrink:0; margin-right:4px;
  border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform: rotate(45deg) translateY(-3px); transition: transform .25s ease;
}
.faq-item[open] summary::after{ transform: rotate(-135deg) translateY(-2px); }
.faq-item p{ padding: 0 1.3rem 1.25rem; color: var(--text-2); max-width: 62ch; }

/* ---------- bandeau CTA ---------- */
.cta-band{
  position:relative; overflow:hidden; padding: 96px 0 104px; text-align:center;
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(23,166,255,.12), transparent 70%),
    var(--bg);
  border-top:1px solid var(--line);
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none; background-image: var(--hex);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}
.chevrons{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter: drop-shadow(0 0 6px rgba(31,211,230,.8)); opacity:.85; }
.cta-inner{ position:relative; }
.cta-logo{ width: min(520px, 88%); height:auto; margin: 0 auto 1.4rem; filter: drop-shadow(0 0 24px rgba(31,211,230,.25)); }
.cta-services{
  font-family: var(--font-display); font-weight:600; font-size: clamp(.8rem, 2.2vw, 1.05rem); letter-spacing:.2em; text-transform:uppercase;
  margin-bottom: 2.4rem;
}
.cta-services span{ color: var(--cyan); margin: 0 .6rem; }
@media (max-width: 640px){ .chevrons{ opacity:.45; } }

/* ---------- footer ---------- */
.site-footer{ background: var(--bg-2); border-top:1px solid var(--line); padding-top: 64px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2.8rem; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; gap: 2rem; } }
.footer-blurb{ color: var(--text-3); font-size:.92rem; margin-top: 1.1rem; max-width: 40ch; }
.footer-label{ font-family: var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--cyan); margin-bottom: 1rem; }
.footer-list{ display:flex; flex-direction:column; gap:.6rem; color: var(--text-2); font-size:.94rem; }
.footer-list a:hover{ color: var(--text); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.4rem;
  border-top:1px solid var(--line); padding-top: 1.4rem; padding-bottom: 1.6rem;
  font-size:.78rem; color: var(--text-3);
}
@media (max-width: 640px){ .site-footer{ padding-bottom: 84px; } }

/* ---------- barre d'appel mobile ---------- */
.sticky-call{
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  display:none; gap:.6rem; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(5,9,14,.95); backdrop-filter: blur(10px); border-top:1px solid var(--line);
  transform: translateY(100%); transition: transform .3s ease;
}
.sticky-call.is-visible{ transform: translateY(0); }
@media (max-width: 640px){ .sticky-call{ display:flex; } }

/* ---------- apparition au scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hero-media-video{ display:none; }
  .btn--pulse, .ticker-track, .live-dot{ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .service:hover{ transform:none; }
}