/* Yazane Car, Agdal Rabat. Design system, one file for the whole site.
   Palette and typography are the client kit, panels 01 and 02. */

:root{
  /* Kit, panneau 01, verbatim */
  --noir:       #0D0D0D;
  --rouge:      #D62B2B;
  --anthracite: #2B2B2B;
  --argent:     #C0C0C0;
  --blanc:      #FFFFFF;

  /* Derives */
  --noir-2:     #121212;
  --noir-3:     #181818;
  --rouge-fonce:#B01F1F;
  --chrome:     #EDEEF0;
  --chrome-2:   #E0E2E5;

  --sur-noir:        #FFFFFF;
  --sur-noir-doux:   rgba(255,255,255,.70);
  --sur-noir-faible: rgba(255,255,255,.50);
  --ligne-noir:      rgba(255,255,255,.13);

  --encre:      #0D0D0D;
  --encre-doux: #55585C;
  --ligne:      #D2D5D9;

  /* Kit, panneau 02 : Montserrat Bold principale, Montserrat Regular secondaire */
  --police: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Rajdhani porte tout l'etage de micro-typo : nav, boutons, sur-titres, categories,
     filtres, labels, en-tetes de footer. Titres et corps restent au Montserrat du kit. */
  --police-micro: "Rajdhani", "Montserrat", sans-serif;

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

  --ease: cubic-bezier(.22,.61,.36,1);
  --ombre: 0 20px 54px -26px rgba(0,0,0,.85);
  --ombre-clair: 0 18px 44px -24px rgba(13,13,13,.30);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--noir);
  color:var(--sur-noir);
  font-family:var(--police);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.16; letter-spacing:-.015em }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:2px solid var(--rouge); outline-offset:3px }

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

/* --------------------------------------------------------------- typo */

.h1{ font-size:clamp(2.15rem, 5.6vw, 4rem) }
.h2{ font-size:clamp(1.65rem, 3.4vw, 2.55rem) }
.h3{ font-size:clamp(1.05rem, 1.7vw, 1.28rem); font-weight:700; letter-spacing:-.01em }

.label{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--police-micro);
  font-weight:600; font-size:.86rem; letter-spacing:.20em; text-transform:uppercase;
  color:var(--sur-noir-faible);
}
/* Le filet rouge en biais du kit, repris comme signe de sur-titre */
.label::before{
  content:""; width:26px; height:3px; background:var(--rouge);
  transform:skewX(-28deg); flex:0 0 auto;
}
.sec--chrome .label{ color:var(--encre-doux) }

.tete-sec{ max-width:660px; margin-bottom:clamp(28px,4vw,44px) }
.tete-sec .h2{ margin-top:14px }
.tete-sec p{ margin-top:14px; color:var(--sur-noir-doux) }
.sec--chrome .tete-sec p{ color:var(--encre-doux) }

/* ------------------------------------------------------------ boutons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:1px solid transparent; border-radius:2px;
  background:transparent;                 /* sinon le <button> prend le gris du navigateur */
  font-family:var(--police-micro);
  font-weight:700; font-size:1rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn--primaire{ background:var(--rouge); color:var(--blanc); border-color:var(--rouge) }
.btn--primaire:hover{ background:var(--rouge-fonce); border-color:var(--rouge-fonce) }
.btn--contour{ border-color:var(--ligne-noir); color:var(--sur-noir) }
.btn--contour:hover{ border-color:var(--rouge); color:var(--rouge) }
.sec--chrome .btn--contour{ border-color:var(--ligne); color:var(--encre) }
.sec--chrome .btn--contour:hover{ border-color:var(--rouge); color:var(--rouge) }
.btn--clair{ background:var(--blanc); color:var(--noir); border-color:var(--blanc) }
.btn--clair:hover{ background:var(--argent); border-color:var(--argent) }
.btn--sm{ padding:10px 18px; font-size:.9rem }

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

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.est-defile{
  background:rgba(13,13,13,.95);
  border-bottom-color:var(--ligne-noir);
}
.nav{
  width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad);
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
}
.nav__marque{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; justify-self:start;
  position:relative; z-index:120;
}
.nav__marque img{ height:46px; width:auto }
.nav__mot{ display:flex; align-items:baseline; gap:6px; line-height:1 }
.nav__mot b{
  font-family:var(--police); font-weight:800; font-size:1.16rem;
  letter-spacing:.05em; color:var(--blanc);
}
.nav__mot i{
  font-family:var(--police); font-style:normal; font-weight:800; font-size:1.16rem;
  letter-spacing:.05em; color:var(--rouge);
}
.nav__liens{
  justify-self:center;
  display:flex; align-items:center; gap:clamp(18px,2.4vw,34px);
}
.nav__liens a{
  font-family:var(--police-micro);
  font-weight:600; font-size:1.02rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sur-noir-doux); text-decoration:none;
  transition:color .2s var(--ease);
}
.nav__liens a:hover,
.nav__liens a.actif{ color:var(--blanc) }
.nav__fin{
  justify-self:end; display:flex; align-items:center; gap:12px;
  position:relative; z-index:120;
}
.nav__cta--menu{ display:none }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--ligne-noir); border-radius:2px;
  cursor:pointer; position:relative;
}
.burger span,
.burger::before,
.burger::after{
  content:""; position:absolute; left:12px; width:20px; height:2px;
  background:var(--blanc); transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.burger::before{ top:15px }
.burger span{ top:21px }
.burger::after{ top:27px }
body.nav-ouvert .burger::before{ transform:translateY(6px) rotate(45deg) }
body.nav-ouvert .burger span{ opacity:0 }
body.nav-ouvert .burger::after{ transform:translateY(-6px) rotate(-45deg) }

/* ------------------------------------------------------- hero et pages */

.hero{
  position:relative; min-height:min(94vh, 860px);
  display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(48px,7vw,86px);
  overflow:hidden;
}
.hero__fond{ position:absolute; inset:0 }
.hero__fond picture{ position:absolute; inset:0; display:block }
.hero__fond img{ width:100%; height:100%; object-fit:cover; object-position:center }
.hero__voile{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(13,13,13,.96) 0%, rgba(13,13,13,.66) 42%, rgba(13,13,13,.36) 72%),
    linear-gradient(to bottom, rgba(13,13,13,.80) 0%, rgba(13,13,13,0) 30%);
}
.hero__inner{ position:relative; z-index:2; width:100% }
.hero__sous{
  margin-top:16px; max-width:44ch;
  font-size:clamp(1rem,1.5vw,1.15rem); color:var(--sur-noir-doux);
}

/* Tete de page interieure : photo + voile, jamais un aplat noir */
.tete-page{
  position:relative; overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(56px,8vw,96px));
  padding-bottom:clamp(44px,6vw,74px);
}
.tete-page__fond{ position:absolute; inset:0 }
.tete-page__fond img{ width:100%; height:100%; object-fit:cover }
.tete-page::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,13,13,.95), rgba(13,13,13,.62) 55%, rgba(13,13,13,.82));
}
.tete-page .wrap{ position:relative; z-index:2 }
.tete-page .h1{ margin-top:14px; font-size:clamp(1.9rem,4.4vw,3.1rem) }

/* --------------------------------------------------------- le widget */

.widget{
  margin-top:clamp(26px,3.4vw,38px);
  display:grid; gap:1px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;
  background:var(--ligne-noir);
  border:1px solid var(--ligne-noir);
  border-radius:2px;
  max-width:940px;
  overflow:hidden;
  box-shadow:var(--ombre);
}
.champ{
  background:rgba(13,13,13,.90);
  padding:12px 16px 13px;
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.champ label{
  font-family:var(--police-micro);
  font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sur-noir-faible);
}
.champ select,
.champ input{
  width:100%; min-width:0;
  background:transparent; border:0; padding:0;
  color:var(--blanc); font-family:var(--police); font-size:1rem; font-weight:500;
  appearance:none; -webkit-appearance:none;
}
.champ select option{ background:var(--noir-2); color:var(--blanc) }
.champ input::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.6; cursor:pointer }
.champ select:focus,
.champ input:focus{ outline:none }
.champ:focus-within{ background:rgba(20,20,20,.96) }
.widget .btn{ border-radius:0; height:100%; padding-inline:30px }

.hero__faits{
  margin-top:clamp(24px,3vw,34px);
  display:flex; flex-wrap:wrap; gap:12px 30px;
}
.hero__faits span{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.95rem; color:var(--sur-noir-doux);
}
.hero__faits a{ color:inherit; text-decoration:none }
.hero__faits a:hover{ color:var(--blanc) }
.hero__faits svg{
  display:block; width:17px; height:17px; flex:0 0 17px;
  fill:none; stroke:var(--rouge); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

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

.sec{ padding:clamp(56px,7.5vw,104px) 0; position:relative }
.sec--serre{ padding:clamp(44px,5.5vw,70px) 0 }
.sec--noir2{ background:var(--noir-2) }
.sec--chrome{ background:var(--chrome); color:var(--encre) }
.sec--chrome .h2,
.sec--chrome .h3{ color:var(--encre) }

/* Le filet rouge en biais du kit, en separateur */
.filet{ height:3px; background:var(--anthracite); position:relative; overflow:hidden }
.filet::after{
  content:""; position:absolute; inset:0 auto 0 0; width:min(38%, 420px);
  background:var(--rouge); transform:skewX(-28deg); transform-origin:left;
}

/* Trois categories */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px) }
.cat{
  border:1px solid var(--ligne-noir); border-radius:2px;
  padding:clamp(20px,2.6vw,30px);
  background:var(--noir-2);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.cat:hover{ border-color:rgba(214,43,43,.55); background:var(--noir-3) }
.cat__num{
  font-family:var(--police-micro); font-weight:700; font-size:.9rem;
  letter-spacing:.18em; color:var(--rouge);
}
.cat .h3{ margin-top:12px }
.cat p{ margin-top:8px; color:var(--sur-noir-doux); font-size:.96rem }

/* --------------------------------------------------------- la flotte */

.filtres{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(22px,3vw,32px) }
.filtre{
  padding:9px 18px; border:1px solid var(--ligne); border-radius:2px;
  background:transparent; color:var(--encre-doux);
  font-family:var(--police-micro); font-weight:600; font-size:.92rem;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:all .2s var(--ease);
}
.filtre:hover{ border-color:var(--encre); color:var(--encre) }
.filtre.actif{ background:var(--noir); border-color:var(--noir); color:var(--blanc) }

.flotte{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px) }
.vehicule{
  display:flex; flex-direction:column;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:2px;
  overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.vehicule:hover{ border-color:#B9BDC2; box-shadow:var(--ombre-clair); transform:translateY(-3px) }
.vehicule__media{
  position:relative;
  background:linear-gradient(160deg, #F7F8F9 0%, #E4E6E9 100%);
  padding:14px 14px 4px;
}
.vehicule__media img{ width:100%; height:auto }
.vehicule__cat{
  position:absolute; top:13px; left:14px;
  font-family:var(--police-micro); font-weight:600; font-size:.8rem;
  letter-spacing:.18em; text-transform:uppercase; color:#8B9096;
}
.vehicule__corps{ padding:4px 20px 0 }
.vehicule__specs{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--ligne);
  display:flex; flex-wrap:wrap; gap:6px 16px;
  font-size:.88rem; color:var(--encre-doux);
}
.vehicule__pied{
  margin-top:auto; padding:16px 20px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.vehicule__prix{ font-size:.92rem; color:var(--encre-doux) }
.vehicule__prix b{ color:var(--encre); font-weight:800; font-size:1.02rem }
.note-tarif{ margin-top:clamp(20px,2.6vw,28px); font-size:.9rem; color:var(--encre-doux) }

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

.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px) }
.svc{
  border:1px solid var(--ligne-noir); border-radius:2px; overflow:hidden;
  background:var(--noir-2); display:flex; flex-direction:column;
  transition:border-color .25s var(--ease);
}
.svc:hover{ border-color:rgba(214,43,43,.5) }
.svc__media{ height:210px; overflow:hidden }
.svc__media img{ width:100%; height:100%; object-fit:cover }
.svc__corps{ padding:clamp(18px,2.2vw,26px) }
.svc__corps p{ margin-top:10px; color:var(--sur-noir-doux); font-size:.96rem }

/* Le duo texte plus photo */
.duo{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,60px); align-items:center;
}
.duo__media{ max-width:520px; width:100%; justify-self:end }
.duo__media img{ width:100%; height:auto; border-radius:2px }
.duo p{ margin-top:16px; color:var(--sur-noir-doux) }
.duo p + p{ margin-top:12px }

/* Bande photo pleine largeur, le temps fort horizontal d'une page courte */
.bande-photo{
  position:relative; overflow:hidden;
  min-height:clamp(320px,42vw,440px);
  display:flex; align-items:center;
}
.bande-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.bande-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.80) 46%, rgba(13,13,13,.40) 100%);
}
.bande-photo__texte{ position:relative; z-index:2; padding-block:clamp(40px,5vw,60px) }
.bande-photo__texte .h2{ margin-top:14px; max-width:16ch }
.bande-photo__texte p{ margin-top:14px; color:var(--sur-noir-doux); max-width:40ch }
.bande-photo__act{ margin-top:24px }

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

.avis{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px) }
.avis blockquote{
  margin:0; padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--ligne-noir); border-radius:2px; background:var(--noir-2);
  display:flex; flex-direction:column; gap:16px; height:100%;
}
.avis p{ color:var(--sur-noir-doux); font-size:.98rem }
.avis cite{
  font-style:normal; margin-top:auto;
  font-family:var(--police-micro); font-weight:600; font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blanc);
}
.avis cite::before{
  content:""; display:block; width:22px; height:3px; background:var(--rouge);
  transform:skewX(-28deg); margin-bottom:12px;
}

/* -------------------------------------------------------- bande CTA */

.bande-cta{ background:var(--noir-2); border-block:1px solid var(--ligne-noir) }
.bande-cta .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,44px); flex-wrap:wrap;
}
.bande-cta .h2{ font-size:clamp(1.4rem,2.6vw,2rem); max-width:22ch }
.bande-cta__act{ display:flex; gap:12px; flex-wrap:wrap }

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

.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(26px,4vw,54px); align-items:stretch }
.coord{ display:grid; gap:22px; align-content:start }
.coord__item{ display:flex; gap:14px }
.coord__ico{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px;
  border:1px solid rgba(214,43,43,.55); border-radius:50%;
}
.coord__ico svg{
  display:block; width:16px; height:16px;
  fill:none; stroke:var(--rouge); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.coord h3{ font-family:var(--police-micro); font-weight:600; font-size:.9rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sur-noir-faible) }
.coord p, .coord a{ margin-top:5px; color:var(--sur-noir); text-decoration:none; display:block }
.coord a:hover{ color:var(--rouge) }
.carte{ position:relative; min-height:380px; border:1px solid var(--ligne-noir); border-radius:2px; overflow:hidden }
.carte iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05) }

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

.site-footer{ background:var(--noir-2); border-top:1px solid var(--ligne-noir); padding:clamp(44px,5vw,66px) 0 26px }
.pied{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px) }
.pied__marque img{ height:74px; width:auto }
.pied__sous{
  margin-top:12px;
  font-family:var(--police-micro); font-weight:600; font-size:.82rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--sur-noir-faible);
}
.pied__marque p{ margin-top:14px; color:var(--sur-noir-doux); font-size:.94rem; max-width:34ch }
.pied h4{
  font-family:var(--police-micro); font-weight:600; font-size:.86rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blanc); margin-bottom:14px;
}
.pied li{ margin-bottom:9px }
.pied a{ color:var(--sur-noir-doux); text-decoration:none; font-size:.94rem }
.pied a:hover{ color:var(--rouge) }
.pied__note{ color:var(--sur-noir-doux); font-size:.94rem }
.barre-pied{
  margin-top:clamp(30px,4vw,46px); padding-top:22px; border-top:1px solid var(--ligne-noir);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.86rem; color:var(--sur-noir-faible);
}
.credit{
  color:var(--sur-noir-faible); text-decoration:none;
  font-family:var(--police-micro); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.credit:hover{ color:var(--blanc) }

/* --------------------------------------------------- modale de devis */

.devis{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.devis.est-ouvert{ display:flex }
.devis__fond{ position:absolute; inset:0; background:rgba(5,5,5,.82); backdrop-filter:blur(3px) }
.devis__panneau{
  position:relative; width:100%; max-width:520px;
  background:var(--noir-2); border:1px solid var(--ligne-noir); border-radius:2px;
  padding:clamp(26px,3.4vw,38px);
  max-height:calc(100dvh - 40px); overflow-y:auto;
}
.devis__fermer{
  position:absolute; top:12px; right:14px; width:36px; height:36px;
  background:transparent; border:0; color:var(--sur-noir-faible);
  font-size:1.7rem; line-height:1; cursor:pointer;
}
.devis__fermer:hover{ color:var(--blanc) }
.devis__barre{ height:2px; background:var(--anthracite); margin-bottom:26px }
.devis__barre i{ display:block; height:100%; width:33%; background:var(--rouge); transition:width .3s var(--ease) }
.devis__etape{ display:none }
.devis__etape.est-active{ display:block }
.devis__etape h3{ font-size:1.24rem }
.devis__etape > p{ margin-top:8px; margin-bottom:20px; color:var(--sur-noir-doux); font-size:.95rem }
.devis .champ{
  background:transparent; border:1px solid var(--ligne-noir); border-radius:2px; padding:11px 14px 12px;
}
.devis .champ:focus-within{ background:transparent; border-color:rgba(214,43,43,.6) }
.grille-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.recap{ margin:0 0 22px; display:grid; gap:1px; background:var(--ligne-noir); border:1px solid var(--ligne-noir) }
.recap > div{ background:var(--noir-2); padding:12px 14px; display:flex; justify-content:space-between; gap:14px }
.recap dt{
  font-family:var(--police-micro); font-weight:600; font-size:.84rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sur-noir-faible);
}
.recap dd{ margin:0; text-align:right; font-size:.95rem }
.appel-final{ display:grid; gap:10px }
.appel-final .btn{ width:100% }
.devis__nav{ display:flex; justify-content:space-between; gap:12px; margin-top:24px }

/* --------------------------------------------------------- reveals */

[data-reveal],[data-stagger] > *{
  opacity:0; transform:translateY(18px);            /* vertical seulement, pas de X : pas de debordement */
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].vu,[data-stagger].vu > *{ opacity:1; transform:none }
[data-stagger].vu > *:nth-child(2){ transition-delay:.08s }
[data-stagger].vu > *:nth-child(3){ transition-delay:.16s }
[data-stagger].vu > *:nth-child(4){ transition-delay:.24s }
[data-stagger].vu > *:nth-child(5){ transition-delay:.32s }
[data-stagger].vu > *:nth-child(6){ transition-delay:.40s }
[data-stagger].vu > *:nth-child(7){ transition-delay:.44s }
[data-stagger].vu > *:nth-child(8){ transition-delay:.48s }
[data-stagger].vu > *:nth-child(9){ transition-delay:.52s }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  [data-reveal],[data-stagger] > *{ opacity:1; transform:none }
}

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

@media (max-width:1080px){
  .widget{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .widget .btn{ grid-column:1 / -1; padding-block:16px }
  .champ:first-child{ grid-column:1 / -1 }
  .pied{ grid-template-columns:1fr 1fr; gap:32px }
}

@media (max-width:980px){
  /* Le menu passe en position:fixed, donc la colonne du milieu ne pese plus rien et les
     deux pistes 1fr se partageaient l'espace a egalite : le lockup depassait sa piste et
     le burger venait mordre sur le mot CAR. En auto, la marque prend sa largeur reelle. */
  .nav{ grid-template-columns:auto 1fr auto }
  .nav__liens{
    position:fixed; inset:0; z-index:100;
    width:100vw; height:100dvh;
    background:var(--noir);                  /* opaque, le menu est un frere du header */
    flex-direction:column; justify-content:center; gap:26px;
    transform:translateY(-100%); transition:transform .32s var(--ease);
    padding:var(--nav-h) var(--pad) 40px;
  }
  body.nav-ouvert .nav__liens{ transform:none }
  body.nav-ouvert{ overflow:hidden }
  body.nav-ouvert .site-header{ z-index:260 }   /* le burger reste cliquable pour fermer */
  .nav__liens a{ font-size:1.35rem }
  .nav__liens .nav__cta--menu{ display:inline-flex; margin-top:10px; color:var(--blanc) }
  .nav__cta--tete{ display:none }
  .burger{ display:block }
  .cats,.flotte,.services,.avis{ grid-template-columns:repeat(2,1fr) }
  .duo{ grid-template-columns:1fr; gap:30px }
  .duo__media{ justify-self:start; max-width:460px }
  .contact{ grid-template-columns:1fr }
  .carte{ min-height:320px }
}

@media (max-width:720px){
  :root{ --nav-h:72px }
  .nav__marque img{ height:40px }
  .nav__mot b,.nav__mot i{ font-size:1.04rem }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 90px) }
  .widget{ grid-template-columns:1fr }
  .champ:first-child{ grid-column:auto }
  .cats,.flotte,.services,.avis{ grid-template-columns:1fr }
  .grille-2{ grid-template-columns:1fr }
  .pied{ grid-template-columns:1fr }
  .bande-cta .wrap{ flex-direction:column; align-items:flex-start }
  .bande-cta__act{ width:100% }
  .bande-cta__act .btn{ flex:1 1 auto }
  .barre-pied{ flex-direction:column; align-items:flex-start; gap:10px }
  .avis blockquote{ height:auto }
}

@media (max-width:420px){
  .hero__faits{ gap:10px 18px }
  .hero__faits span{ font-size:.9rem }
  .vehicule__pied{ flex-direction:column; align-items:flex-start }
}