/* ===================================================================
   SQUARE CAR, location de voitures, Haut-Agdal Rabat.
   Blue-field design system: the kit's blue is the ground, not an accent.
   Palette sampled from the client logo (the kit's palette panel is
   blown out in the supplied file). Square motif is structural:
   radius 0 everywhere, the pixel checkerboard as section transition.
   Hand-written, no framework.
   =================================================================== */

:root{
  /* Brand, sampled from the logo PNG */
  --blue-vif:   #00A2EF;   /* top of the logo gradient */
  --blue:       #0066CC;   /* bottom of the gradient, the dominant field */
  --blue-deep:  #004396;   /* the wordmark colour */
  --blue-dark:  #00306D;   /* deepest, for gradients and veils */
  --charcoal:   #1F2937;   /* text and the cars band */
  --charcoal-2: #161E29;
  --grey:       #8E9AA5;   /* captions */
  --paper:      #F5F7FA;   /* light sections */
  --white:      #FFFFFF;

  --ink:        #131A24;   /* body text on light */
  --ink-soft:   #46525F;
  --line:       #DDE3EA;
  --line-dark:  rgba(255,255,255,.16);
  --on-blue:    #FFFFFF;
  --on-blue-mut:rgba(255,255,255,.76);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 60px);
  --nav-h: 78px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --sh-1: 0 2px 10px rgba(19,26,36,.06);
  --sh-2: 0 18px 46px -22px rgba(19,26,36,.30);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:transparent; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--blue-vif); outline-offset:3px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.wrap--wide{ max-width:1440px }

/* ------------------------------------------------------------ type */

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.14 }
.h1{ font-size:clamp(33px,5.2vw,62px); font-weight:800; letter-spacing:-.028em; line-height:1.08 }
.h2{ font-size:clamp(26px,3.4vw,42px); font-weight:700 }
.h3{ font-size:clamp(18px,1.7vw,21px); font-weight:700; letter-spacing:-.012em }
.lead{ font-size:clamp(16px,1.35vw,18.5px); color:var(--ink-soft); max-width:60ch }
.muted{ color:var(--grey) }
.small{ font-size:13.5px }

.label{
  font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.label--light{ color:var(--on-blue-mut) }

/* --------------------------------------------------------- sections */

.sec{ padding:clamp(58px,7.5vw,112px) 0 }
.sec--tight{ padding:clamp(42px,5vw,68px) 0 }
.sec--paper{ background:var(--paper) }
.sec--ink{ background:var(--charcoal); color:var(--white) }
.sec--ink .lead{ color:rgba(255,255,255,.72) }
.sec--blue{
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 52%,var(--blue-vif) 140%);
  color:var(--on-blue);
}
.sec--blue .lead{ color:var(--on-blue-mut) }

.sec-head{ max-width:60ch; margin-bottom:clamp(30px,4vw,52px) }
.sec-head .lead{ margin-top:14px }

/* ------------------------------------------- the square motif (kit) */
/* Checkerboard of squares that dissolves. This is the logo's pixel
   mosaic turned into a divider, generated in CSS, never an image. */

.mosaic{
  --sq:14px;
  height:calc(var(--sq)*4);
  background-image:conic-gradient(from 90deg,
      currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0);
  background-size:var(--sq) var(--sq);
  opacity:.30;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
  mask-image:linear-gradient(to bottom,#000,transparent);
  pointer-events:none;
}
.mosaic--up{
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent);
}
.mosaic--blue{ color:var(--blue) }
.mosaic--white{ color:#fff; opacity:.18 }

/* ---------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; min-height:50px;
  background:transparent;                    /* never inherit the UA grey */
  border:1.5px solid transparent; border-radius:0;
  font-family:var(--display); font-size:14px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px) }
.btn--primary{ background:var(--blue); color:#fff; border-color:var(--blue) }
.btn--primary:hover{ background:var(--blue-deep); border-color:var(--blue-deep) }
.btn--light{ background:#fff; color:var(--blue-deep); border-color:#fff }
.btn--light:hover{ background:var(--paper); border-color:var(--paper) }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue) }
/* on the dark cars band the outline button needs light ink, not --ink on --charcoal */
.sec--ink .btn--outline{ color:#fff; border-color:rgba(255,255,255,.34) }
.sec--ink .btn--outline:hover{ color:#fff; border-color:var(--blue-vif); background:rgba(0,162,239,.16) }
.cars--light .btn--outline{ color:var(--ink); border-color:var(--line) }
.cars--light .btn--outline:hover{ color:var(--blue); border-color:var(--blue); background:transparent }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55) }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff }
.btn--sm{ padding:10px 18px; min-height:40px; font-size:12.5px }

.btn ion,.btn svg{ flex:none }

/* -------------------------------------------------------------- nav */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header::after{                          /* readability veil over the hero */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,rgba(0,20,50,.42),rgba(0,20,50,0));
  transition:opacity .3s var(--ease);
}
.site-header.scrolled{ background:var(--white); box-shadow:0 1px 0 var(--line), var(--sh-1) }
.site-header.scrolled::after{ opacity:0 }

.nav{
  width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}
.nav__brand{ position:relative; z-index:120; justify-self:start; display:flex; align-items:center }
.nav__brand img{ height:34px; width:auto; display:block }
.nav__brand .logo-dark{ display:none }
.site-header.scrolled .nav__brand .logo-light{ display:none }
.site-header.scrolled .nav__brand .logo-dark{ display:block }

.nav__links{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); justify-self:center }
.nav__links a{
  font-family:var(--display); font-size:12.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#fff;
  padding:6px 0; position:relative; transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:currentColor; transition:right .3s var(--ease);
}
.nav__links a:hover::after,.nav__links a.active::after{ right:0 }
.site-header.scrolled .nav__links a{ color:var(--ink) }
.site-header.scrolled .nav__links a:hover,
.site-header.scrolled .nav__links a.active{ color:var(--blue) }

.nav__end{ position:relative; z-index:120; justify-self:end; display:flex; align-items:center; gap:12px }
.nav__cta{ padding:11px 20px; min-height:42px; font-size:12.5px }
.site-header:not(.scrolled) .nav__cta{ background:#fff; color:var(--blue-deep); border-color:#fff }
.nav__links .nav__cta--menu{ display:none }   /* mobile duplicate, hidden on desktop */

.burger{
  display:none; width:44px; height:44px; position:relative; z-index:120;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:22px; height:2px; background:#fff; position:relative;
  transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:inherit;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:-7px } .burger span::after{ top:7px }
.site-header.scrolled .burger span{ background:var(--ink) }
body.nav-open .burger span{ background:transparent }
body.nav-open .burger span::before{ top:0; transform:rotate(45deg); background:#fff }
body.nav-open .burger span::after{ top:0; transform:rotate(-45deg); background:#fff }

/* --------------------------------------------------------- the hero */

.hero{
  position:relative; min-height:min(100svh,860px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(48px,7vw,88px);
  color:#fff; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2 }
.hero__bg picture{ position:absolute; inset:0; display:block }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top,rgba(0,32,80,.90) 0%,rgba(0,42,100,.52) 42%,rgba(0,60,130,.28) 100%),
    linear-gradient(to right,rgba(0,40,95,.55),rgba(0,40,95,0) 62%);
}
.hero__inner{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.hero .h1{ max-width:16ch }
.hero__sub{ margin-top:18px; font-size:clamp(16px,1.5vw,19px); color:rgba(255,255,255,.86); max-width:46ch }
.hero__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px }

/* Booking widget sitting in the hero (Jad, 2026-09-04, Pride Car treatment).
   Square, in this site's language: no pill, no radius. */
.hero__widget{
  margin-top:34px; background:var(--white); color:var(--ink);
  padding:18px; box-shadow:var(--sh-2); max-width:940px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:14px; align-items:end;
}
.hero__widget .field{ margin-bottom:0 }
.hero__widget .btn{ height:48px; min-height:48px }
.hero__facts{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 30px;
  font-size:14.5px; color:rgba(255,255,255,.9);
}
.hero__facts span{ display:inline-flex; align-items:center; gap:9px }
.hero__facts svg{ flex:none; width:16px; height:16px; stroke:var(--blue-vif); fill:none; stroke-width:1.8 }
.hero__facts a:hover{ text-decoration:underline }

@media (max-width:900px){
  .hero__widget{ grid-template-columns:1fr 1fr; max-width:none }
  .hero__widget .field:first-child{ grid-column:1 / -1 }
  .hero__widget .btn{ grid-column:1 / -1; width:100% }
}
@media (max-width:680px){
  .hero__widget{ grid-template-columns:1fr; padding:16px; gap:12px }
  .hero__facts{ gap:8px 18px; font-size:13.5px }
}
.hero__mosaic{
  position:absolute; left:0; right:0; bottom:0; height:56px; color:#fff; opacity:.14;
  background-image:conic-gradient(from 90deg,currentColor 25%,transparent 0 50%,currentColor 0 75%,transparent 0);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent);
}

/* word-by-word entrance */
.hero .h1 .w{ display:inline-block; overflow:hidden; vertical-align:top }
.hero .h1 .w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%); transition:transform .72s var(--ease-out);
}
.hero.is-in .h1 .w > i{ transform:none }

/* --------------------------------------------------- page banner */

.banner{
  position:relative; min-height:clamp(260px,34vw,400px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 36px); padding-bottom:clamp(30px,4vw,52px);
  color:#fff; overflow:hidden;
}
.banner__bg{ position:absolute; inset:0; z-index:-2 }
.banner__bg img{ width:100%; height:100%; object-fit:cover }
.banner__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(0,32,80,.88),rgba(0,45,105,.55));
}
.banner__inner{ position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.banner .lead{ color:rgba(255,255,255,.84); margin-top:12px }

/* ------------------------------------------------------ facts band */

.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.22) }
.facts__item{
  background:transparent; padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,30px);
  display:flex; flex-direction:column; gap:7px;
}
.facts__k{
  font-family:var(--display); font-size:10.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.66);
}
.facts__v{ font-size:16px; color:#fff; font-weight:500; line-height:1.45 }
.facts__v a:hover{ text-decoration:underline }

/* ------------------------------------------------------ categories */

.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px) }
.cat{
  position:relative; background:var(--white); border:1px solid var(--line);
  padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:12px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cat:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--sh-2) }
.cat__n{
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--blue);
}
.cat__media{ aspect-ratio:16/9; background:var(--paper); display:grid; place-items:center; padding:8px }
.cat__media img{ max-height:100%; width:auto; object-fit:contain }
.cat p{ color:var(--ink-soft); font-size:15.5px }
.cat__link{
  margin-top:auto; padding-top:6px;
  font-family:var(--display); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px;
}
.cat__link span{ transition:transform .25s var(--ease) }
.cat:hover .cat__link span{ transform:translateX(5px) }

/* ---------------------------------------------------- car cards */
/* Anatomy fixed by references/location-voitures/flotte-standard */

.cars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px) }
.car{
  background:var(--charcoal-2); border:1px solid var(--line-dark);
  display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.car:hover{ border-color:rgba(0,162,239,.55); transform:translateY(-3px) }
.car__media{ position:relative; aspect-ratio:11/6.2; background:#111823; display:grid; place-items:center; padding:10px }
.car__media img{ max-height:100%; width:auto; object-fit:contain }
.car__cat{
  position:absolute; top:12px; left:14px;
  font-family:var(--display); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.car__body{ padding:18px 20px 0; display:flex; flex-direction:column; gap:8px; flex:1 }
.car__body h3{ color:#fff }
.car__body p{ font-size:14.5px; color:rgba(255,255,255,.62); line-height:1.55 }
.car__specs{
  margin-top:auto; padding:14px 0 0; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:6px 14px;
  font-size:12.5px; color:rgba(255,255,255,.58);
}
.car__specs span{ display:inline-flex; align-items:center; gap:6px }
.car__foot{
  padding:14px 20px; border-top:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.car__price{ font-size:13.5px; color:rgba(255,255,255,.66) }
.car__price b{ font-family:var(--display); font-size:16px; font-weight:700; color:#fff; letter-spacing:-.01em }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,34px) }
.filter{
  padding:9px 18px; border:1px solid var(--line-dark); background:transparent;
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.66);
  transition:all .22s var(--ease);
}
.filter:hover{ color:#fff; border-color:rgba(255,255,255,.4) }
.filter.is-on{ background:var(--blue); border-color:var(--blue); color:#fff }
.tarif-note{ margin-top:26px; font-size:13.5px; color:rgba(255,255,255,.52) }

/* light variant of the cards, used on the voitures page band */
.cars--light .car{ background:var(--white); border-color:var(--line) }
.cars--light .car__media{ background:var(--paper) }
.cars--light .car__body h3{ color:var(--ink) }
.cars--light .car__body p{ color:var(--ink-soft) }
.cars--light .car__specs{ color:var(--grey); border-top-color:var(--line) }
.cars--light .car__foot{ border-top-color:var(--line) }
.cars--light .car__price{ color:var(--ink-soft) }
.cars--light .car__price b{ color:var(--ink) }
.cars--light .car__cat{ color:var(--grey) }

/* -------------------------------------------------------- services */

.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px) }
.svc{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line) }
.svc__media{ aspect-ratio:4/3; overflow:hidden }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.svc:hover .svc__media img{ transform:scale(1.045) }
.svc__body{ padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:10px; flex:1 }
.svc__body p{ color:var(--ink-soft); font-size:15.5px }

/* ----------------------------------------- split (services page) */

.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4.5vw,64px); align-items:center }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.split__body > * + *{ margin-top:16px }
.split__body ul{ list-style:none; display:grid; gap:11px; margin-top:20px }
.split__body li{ position:relative; padding-left:24px; color:var(--ink-soft); font-size:15.5px }
.split__body li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; background:var(--blue);
}
.split--rev .split__media{ order:2 }
.svc-split + .svc-split{ margin-top:clamp(38px,5vw,72px) }

/* ---------------------------------------------------------- avis */

.avis{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.2vw,28px) }
.avi{ background:var(--white); border:1px solid var(--line); padding:clamp(24px,3vw,34px) }
.avi__q{ font-size:16.5px; line-height:1.7; color:var(--ink) }
.avi__n{
  margin-top:16px; font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
}
.sec--blue .avi{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2) }
.sec--blue .avi__q{ color:#fff }
.sec--blue .avi__n{ color:rgba(255,255,255,.72) }

/* -------------------------------------------------------- contact */

.contact-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(24px,3.5vw,52px); align-items:stretch }
.info{ display:grid; gap:22px; align-content:start }
.info__row{ display:grid; gap:5px; padding-bottom:20px; border-bottom:1px solid var(--line) }
.info__row:last-child{ border-bottom:0; padding-bottom:0 }
.info__k{
  font-family:var(--display); font-size:10.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--blue);
}
.info__v{ font-size:16.5px; color:var(--ink); line-height:1.55 }
.info__v a:hover{ color:var(--blue) }
.hours{ display:grid; gap:5px; font-size:15.5px; color:var(--ink-soft) }
.hours div{ display:flex; justify-content:space-between; gap:16px; max-width:340px }
.hours b{ font-weight:600; color:var(--ink) }

.map{ position:relative; min-height:380px; border:1px solid var(--line) }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }

/* --------------------------------------------------------- footer */

.site-footer{
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 62%,var(--blue-vif) 165%);
  color:#fff; padding:clamp(48px,6vw,76px) 0 0;
}
.foot{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px);
  padding-bottom:clamp(34px,4vw,52px);
}
.foot__brand img{ height:42px; width:auto; display:block }
.foot__brand p{ margin-top:16px; color:var(--on-blue-mut); font-size:15px; max-width:34ch }
.foot h4{
  font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.62);
  margin-bottom:14px;
}
.foot ul{ list-style:none; display:grid; gap:9px }
.foot a{ color:rgba(255,255,255,.88); font-size:15px }
.foot a:hover{ color:#fff; text-decoration:underline }
.foot__note{ color:var(--on-blue-mut); font-size:14.5px; line-height:1.6 }

.foot-bar{
  border-top:1px solid rgba(255,255,255,.2); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--on-blue-mut);
}
.credit{
  font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.72);
  text-decoration:none;
}
.credit:hover{ color:#fff; text-decoration:none }

/* ---------------------------------------------------- devis modal */

.devis{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.devis.is-open{ display:flex }
.devis__backdrop{ position:absolute; inset:0; background:rgba(6,18,38,.72) }
.devis__panel{
  position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  background:var(--white); border-top:4px solid var(--blue);
  padding:clamp(24px,3.2vw,38px);
  animation:devisIn .3s var(--ease-out);
}
@keyframes devisIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.devis__close{
  position:absolute; top:12px; right:12px; width:40px; height:40px;
  display:grid; place-items:center; font-size:22px; line-height:1; color:var(--grey);
}
.devis__close:hover{ color:var(--ink) }
.devis__bar{ height:3px; background:var(--line); margin-bottom:22px }
.devis__bar i{ display:block; height:100%; background:var(--blue); width:33%; transition:width .3s var(--ease) }
.devis__step{ display:none } .devis__step.is-on{ display:block }
.devis__step h3{ font-size:20px; margin-bottom:6px }
.devis__step > p{ color:var(--ink-soft); font-size:15px; margin-bottom:20px }

.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  padding:10px 16px; border:1px solid var(--line); background:transparent;
  font-size:14px; color:var(--ink); transition:all .2s var(--ease);
}
.chip:hover{ border-color:var(--blue); color:var(--blue) }
.chip.is-on{ background:var(--blue); border-color:var(--blue); color:#fff }

.field{ display:grid; gap:7px; margin-bottom:16px }
.field label{
  font-family:var(--display); font-size:10.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--grey);
}
.field input,.field select{
  padding:12px 14px; border:1px solid var(--line); border-radius:0;
  font-family:var(--body); font-size:15px; color:var(--ink); background:var(--white);
}
.field input:focus,.field select:focus{ outline:none; border-color:var(--blue) }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.devis__nav{ display:flex; gap:10px; margin-top:24px }
.devis__nav .btn{ flex:1 }

.recap{ background:var(--paper); padding:18px 20px; margin-bottom:20px; display:grid; gap:8px }
.recap div{ display:flex; justify-content:space-between; gap:14px; font-size:14.5px }
.recap dt{ color:var(--grey) } .recap dd{ color:var(--ink); font-weight:600; text-align:right }
.reveal-contact{ display:grid; gap:10px }
.reveal-contact a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 20px; font-family:var(--display); font-size:14px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.reveal-contact .rc-tel{ background:var(--blue); color:#fff }
.reveal-contact .rc-tel:hover{ background:var(--blue-deep) }
.reveal-contact .rc-wa{ background:var(--charcoal); color:#fff }
.reveal-contact .rc-wa:hover{ background:var(--charcoal-2) }

/* ------------------------------------------------------ animation */

[data-reveal]{ opacity:0; transform:translateY(22px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
[data-stagger] > *{ opacity:0; transform:translateY(22px) }
[data-stagger].is-in > *{ opacity:1; transform:none; transition:opacity .62s var(--ease-out), transform .62s var(--ease-out) }
[data-stagger].is-in > *:nth-child(1){ transition-delay:.02s }
[data-stagger].is-in > *:nth-child(2){ transition-delay:.10s }
[data-stagger].is-in > *:nth-child(3){ transition-delay:.18s }
[data-stagger].is-in > *:nth-child(4){ transition-delay:.26s }
[data-stagger].is-in > *:nth-child(5){ transition-delay:.34s }
[data-stagger].is-in > *:nth-child(6){ transition-delay:.42s }
[data-stagger].is-in > *:nth-child(7){ transition-delay:.50s }
[data-stagger].is-in > *:nth-child(8){ transition-delay:.58s }
[data-stagger].is-in > *:nth-child(9){ transition-delay:.66s }

/* ----------------------------------------------------- responsive */

@media (max-width:1080px){
  .foot{ grid-template-columns:1fr 1fr; gap:32px }
  .cars,.svcs,.cats{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:900px){
  .nav{ grid-template-columns:auto 1fr; }
  .nav__end{ grid-column:2; justify-self:end }
  .burger{ display:flex }
  .nav__cta--head{ display:none }

  .nav__links{
    position:fixed; top:0; left:0;
    width:100vw; height:100dvh; min-height:100vh;
    z-index:100;
    flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(150deg,var(--blue-deep),var(--blue) 70%,var(--blue-vif) 150%);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  body.nav-open .nav__links{ opacity:1; visibility:visible; transform:none }
  body.nav-open{ overflow:hidden }
  body.nav-open .site-header{ z-index:110; background:transparent; box-shadow:none }
  body.nav-open .site-header::after{ opacity:0 }
  /* In the open menu the logo is always the light one, whatever the scroll state.
     Needs to out-specify .site-header.scrolled .nav__brand .logo-* (0,4,0),
     hence the extra .site-header here (0,4,1). */
  body.nav-open .site-header .nav__brand .logo-light{ display:block }
  body.nav-open .site-header .nav__brand .logo-dark{ display:none }

  .nav__links a{ font-size:19px; letter-spacing:.1em; padding:13px 0; color:#fff }
  .site-header.scrolled .nav__links a{ color:#fff }
  .nav__links a::after{ display:none }
  /* the menu CTA must beat .site-header.scrolled .nav__links a on specificity */
  .nav.x .nav__links a.nav__cta--menu,
  .nav__links a.nav__cta--menu{
    display:inline-flex; margin-top:20px; padding:14px 30px;
    background:#fff; color:var(--blue-deep); font-size:13px; letter-spacing:.06em;
  }
  .site-header.scrolled .nav__links a.nav__cta--menu{ color:var(--blue-deep) }

  .split{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr }
  .facts{ grid-template-columns:1fr; gap:1px }
  .avis{ grid-template-columns:1fr }
}

@media (max-width:680px){
  :root{ --nav-h:66px }
  .cars,.svcs,.cats{ grid-template-columns:1fr }
  .foot{ grid-template-columns:1fr; gap:28px }
  .hero{ min-height:min(96svh,760px) }
  .hero .h1{ max-width:none }
  .hero__cta .btn{ width:100%; }
  .grid-2{ grid-template-columns:1fr }
  .foot-bar{ flex-direction:column; align-items:flex-start }
  .hours div{ max-width:none }
}

@media (hover:none){
  .btn:hover,.cat:hover,.car:hover{ transform:none }
  .svc:hover .svc__media img{ transform:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  [data-reveal],[data-stagger] > *{ opacity:1 !important; transform:none !important }
  .hero .h1 .w > i{ transform:none !important }
}