/* ===================================================================
   APEX TOURS, Agdal Rabat.
   Location de voitures, transport touristique, transport du personnel.

   Coque NAVY. Le kit est massivement bleu nuit et le logo chromé
   n'existe qu'en clair sur foncé : le navy est la couleur du client.
   Pride Car pose sa flotte en bande NOIRE sur un site CLAIR ; ici on
   fait l'inverse, la flotte est une bande ACIER claire au milieu d'un
   site navy. Même effet, geste opposé.

   Kit mono-famille : Montserrat en trois rôles distincts,
   nav 900 capitales espacées / titres 800 / corps 400-500.
   Écrit à la main, sans framework.
   =================================================================== */

:root{
  /* Palette du kit, panneau 01 */
  --bleu:      #0D4DA2;
  --navy:      #0B1525;
  --ardoise:   #333B47;
  --argent:    #A6A9AD;
  --blanc:     #FFFFFF;

  /* Dérivés */
  --bleu-clair:#1565C8;
  --bleu-nuit: #08101C;
  --navy-2:    #111F33;
  --navy-3:    #16263D;
  --acier:     #F1F4F8;
  --acier-2:   #E3E9F1;

  --sur-navy:      #FFFFFF;
  --sur-navy-doux: rgba(255,255,255,.72);
  --sur-navy-faible: rgba(255,255,255,.52);
  --ligne-navy:    rgba(255,255,255,.14);

  --encre:      #0B1525;
  --encre-doux: #4A5462;
  --ligne:      #D7DFE9;

  --police: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Chakra Petch : les angles biseautés reprennent le chevron du logo. Il porte toute la
     micro-typo (nav, boutons, sur-titres, petites capitales). Montserrat garde titres et corps. */
  --police-nav: "Chakra Petch", "Montserrat", sans-serif;

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

  --r-carte: 14px;
  --r-widget: 20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ombre: 0 20px 50px -24px rgba(3,8,16,.55);
  --ombre-claire: 0 18px 44px -26px rgba(11,21,37,.32);
}

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

body{
  background:var(--navy);
  color:var(--sur-navy);
  font-family:var(--police);
  font-size:16.5px;
  font-weight:400;
  line-height:1.68;
  -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(--bleu-clair); outline-offset:3px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

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

h1,h2,h3,h4{ font-weight:800; letter-spacing:-.02em; line-height:1.14 }

.h1{ font-size:clamp(2.1rem, 5.4vw, 3.9rem); font-weight:800; letter-spacing:-.028em }
.h2{ font-size:clamp(1.6rem, 3.2vw, 2.5rem) }
.h3{ font-size:clamp(1.08rem, 1.7vw, 1.32rem); font-weight:700; letter-spacing:-.012em }

.label{
  display:inline-block; font-family:var(--police-nav);
  font-size:.74rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bleu-clair); margin-bottom:14px;
}
.sec--acier .label{ color:var(--bleu) }

.lead{ color:var(--sur-navy-doux); font-size:1.03rem; max-width:60ch; margin-top:14px }
.sec--acier .lead{ color:var(--encre-doux) }

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

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:transparent; border:1px solid transparent; border-radius:999px;
  font-family:var(--police-nav);
  padding:14px 28px; font-size:.84rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }
.btn--primaire{ background:var(--bleu); color:#fff }
.btn--primaire:hover{ background:var(--bleu-clair) }
.btn--clair{ background:#fff; color:var(--navy) }
.btn--clair:hover{ background:var(--acier-2) }
.btn--fantome{ border-color:var(--ligne-navy); color:#fff }
.btn--fantome:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06) }
.btn--contour{ border-color:var(--ligne); color:var(--encre) }
.btn--contour:hover{ border-color:var(--bleu); color:var(--bleu) }
.btn--sm{ padding:10px 20px; font-size:.78rem }

.rangee-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px }

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

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.est-defile{ background:var(--navy); box-shadow:0 1px 0 var(--ligne-navy) }
body.nav-ouvert .site-header{ z-index:110 }

.nav{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
  height:var(--nav-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}
.nav__marque{ position:relative; z-index:120; justify-self:start; display:block }
.nav__marque img{ height:42px; width:auto }

.nav__liens{ display:flex; align-items:center; gap:30px; justify-self:center }
.nav__liens a{
  font-family:var(--police-nav);
  font-size:.80rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sur-navy-doux); position:relative; padding:6px 0;
  transition:color .22s var(--ease);
}
.nav__liens a:hover, .nav__liens a.actif{ color:#fff }
.nav__liens a.actif::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--bleu-clair);
}
.nav__fin{ position:relative; z-index:120; justify-self:end; display:flex; align-items:center; gap:14px }
.nav__liens .nav__cta--menu{ display:none }

.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--ligne-navy); border-radius:999px;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:17px; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span{ position:relative }
.burger span::before{ position:absolute; top:-6px }
.burger span::after{ position:absolute; top:6px }
body.nav-ouvert .burger span{ background:transparent }
body.nav-ouvert .burger span::before{ transform:translateY(6px) rotate(45deg) }
body.nav-ouvert .burger span::after{ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:980px){
  .burger{ display:flex }
  .nav__cta--tete{ display:none }
  .nav__liens{
    position:fixed; top:0; left:0; width:100vw; height:100dvh; z-index:100;
    background:var(--navy); flex-direction:column; justify-content:center; gap:8px;
    padding:calc(var(--nav-h) + 20px) var(--pad) 40px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  body.nav-ouvert .nav__liens{ opacity:1; visibility:visible; transform:none }
  .nav__liens a{ font-size:1.12rem; letter-spacing:.1em; padding:16px 0; color:#fff }
  .nav__liens a.actif::after{ display:none }
  /* Bat .nav__liens a (0,2,1) : sinon le CTA sort en texte crème sur crème. */
  .nav__liens a.nav__cta--menu, .site-header .nav__liens .nav__cta--menu{
    display:inline-flex; margin-top:18px; background:var(--bleu); color:#fff;
    font-size:.82rem; letter-spacing:.06em; padding:15px 30px;
  }
}

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

.hero{
  position:relative; min-height:min(100svh, 860px);
  display:flex; align-items:center; padding:calc(var(--nav-h) + 56px) 0 60px;
  overflow:hidden;
}
.hero__fond{ position:absolute; inset:0; z-index:0 }
.hero__fond picture{ position:absolute; inset:0; display:block }
.hero__fond img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1) } to{ transform:scale(1.08) } }

.hero__voile{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,21,37,.86) 0%, rgba(11,21,37,.55) 34%, rgba(11,21,37,.80) 100%),
    linear-gradient(90deg, rgba(11,21,37,.52) 0%, rgba(11,21,37,.16) 60%);
}
.hero__inner{ position:relative; z-index:2; width:100%; text-align:center }
.hero .h1{ max-width:19ch; margin:0 auto; text-wrap:balance }
.hero__sous{
  margin:20px auto 0; max-width:56ch; font-size:1.06rem; color:rgba(255,255,255,.82);
}

/* ------------------------------- widget de devis posé sur la photo */

.widget{
  margin:38px auto 0; max-width:1000px; background:#fff; border-radius:var(--r-widget);
  padding:20px; display:grid; gap:14px; text-align:left;
  grid-template-columns:1.5fr 1fr 1fr auto; align-items:end;
  box-shadow:0 30px 70px -30px rgba(3,8,16,.7);
}
.champ{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.champ label{
  font-family:var(--police-nav);
  font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:#7C8798;
}
.champ select, .champ input{
  font:inherit; font-size:.94rem; color:var(--encre); width:100%;
  background:var(--acier); border:1px solid transparent; border-radius:10px;
  padding:13px 14px; appearance:none; -webkit-appearance:none;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.champ input[type="date"]{ -webkit-appearance:none; min-height:48px }
.champ select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8798' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:38px;
}
.champ select:focus, .champ input:focus{ outline:none; border-color:var(--bleu); background:#fff }
.widget .btn{ height:48px; padding-inline:26px }

.hero__faits{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px;
  margin-top:30px; font-size:.86rem; color:rgba(255,255,255,.78);
}
.hero__faits span{ display:inline-flex; align-items:center; gap:9px }
.hero__faits svg{ width:17px; height:17px; flex:none; stroke:var(--bleu-clair); fill:none; stroke-width:1.6 }
.hero__faits a:hover{ color:#fff }

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

.sec{ padding:clamp(66px, 8vw, 108px) 0; position:relative }
.sec--acier{ background:var(--acier); color:var(--encre) }
.sec--acier h1,.sec--acier h2,.sec--acier h3{ color:var(--encre) }
.sec--serre{ padding:clamp(52px, 6vw, 78px) 0 }

.tete-sec{ max-width:64ch; margin-bottom:44px }
.tete-sec--centre{ margin-left:auto; margin-right:auto; text-align:center }
.tete-sec--centre .lead{ margin-left:auto; margin-right:auto }

/* --------------------------------------------- 3 activités du kit */

.activites{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.acte{
  background:var(--navy-2); border:1px solid var(--ligne-navy); border-radius:var(--r-carte);
  padding:34px 30px 30px; display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.acte:hover{ border-color:rgba(13,77,162,.7); background:var(--navy-3); transform:translateY(-3px) }
.acte__icone{ width:46px; height:46px; margin-bottom:22px; stroke:var(--bleu-clair); fill:none; stroke-width:1.5 }
.acte p{ color:var(--sur-navy-doux); margin-top:12px; font-size:.97rem }
.acte__lien{
  margin-top:auto; padding-top:22px; font-family:var(--police-nav);
  font-size:.82rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bleu-clair); display:inline-flex; align-items:center; gap:9px;
}
.acte__lien span{ transition:transform .25s var(--ease) }
.acte:hover .acte__lien span{ transform:translateX(4px) }

/* ------------------------------------------------- flotte, cartes */

.filtres{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px }
.filtre{
  border:1px solid var(--ligne); border-radius:999px; padding:9px 20px;
  font-family:var(--police-nav);
  font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--encre-doux); background:#fff; transition:all .22s var(--ease);
}
.filtre:hover{ border-color:var(--bleu); color:var(--bleu) }
.filtre.actif{ background:var(--navy); border-color:var(--navy); color:#fff }

.flotte{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.vehicule{
  background:#fff; border:1px solid var(--acier-2); border-radius:var(--r-carte);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.vehicule:hover{ transform:translateY(-4px); box-shadow:var(--ombre-claire); border-color:#CBD6E4 }
.vehicule__media{
  position:relative; background:linear-gradient(170deg, #EDF1F7 0%, #DFE7F1 100%);
  padding:16px; display:flex; align-items:center; justify-content:center; min-height:186px;
}
.vehicule__media img{ width:100%; height:auto }
.vehicule__cat{
  position:absolute; top:14px; left:16px; font-family:var(--police-nav);
  font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#8A94A4;
}
.vehicule__corps{ padding:22px 24px 6px; flex:1 }
.vehicule__corps p{ color:var(--encre-doux); font-size:.93rem; margin-top:8px }
.vehicule__specs{
  display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:16px; padding-top:15px;
  border-top:1px solid var(--acier-2); font-size:.78rem; color:#77828F;
}
.vehicule__pied{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 24px 22px;
}
.vehicule__prix{ font-size:.82rem; color:var(--encre-doux) }
.vehicule__prix b{ color:var(--bleu); font-weight:800; font-size:.98rem }

.note-tarif{ margin-top:30px; font-size:.84rem; color:#77828F }
.sec:not(.sec--acier) .note-tarif{ color:var(--sur-navy-faible) }

/* -------------------------------------------------- pavés services */

.services{ display:grid; gap:26px }
.service{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px); align-items:center;
}
.service:nth-child(even) .service__media{ order:2 }
.service__media{ border-radius:var(--r-carte); overflow:hidden; align-self:center }
.service__media img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.service__icone{ width:42px; height:42px; margin-bottom:18px; stroke:var(--bleu-clair); fill:none; stroke-width:1.5 }
.service__corps p{ color:var(--sur-navy-doux); margin-top:14px }
.sec--acier .service__corps p{ color:var(--encre-doux) }

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

.avis{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
.avi{
  background:var(--navy-2); border:1px solid var(--ligne-navy); border-left:3px solid var(--bleu);
  border-radius:var(--r-carte); padding:34px 34px 30px;
}
.avi__q{ font-size:1.02rem; line-height:1.75; color:rgba(255,255,255,.88) }
.avi__n{
  margin-top:20px; font-family:var(--police-nav);
  font-size:.78rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--argent);
}

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

.bande-cta{ position:relative; overflow:hidden; background:var(--bleu-nuit) }
.bande-cta::before{
  content:""; position:absolute; top:50%; right:-60px; transform:translateY(-50%);
  width:min(460px,48vw); height:min(460px,48vw);
  background:url("assets/logo/marque.webp") no-repeat center/contain;
  opacity:.07; pointer-events:none;
}
.bande-cta .wrap{ position:relative; z-index:1 }

/* ------------------------------------------- bannière de page */

.tete-page{
  position:relative; padding:calc(var(--nav-h) + 76px) 0 66px; overflow:hidden;
}
.tete-page__fond{ position:absolute; inset:0; z-index:0 }
.tete-page__fond img{ width:100%; height:100%; object-fit:cover }
.tete-page::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,21,37,.90) 0%, rgba(11,21,37,.62) 55%, rgba(11,21,37,.88) 100%);
}
.tete-page .wrap{ position:relative; z-index:2 }
.tete-page .lead{ margin-top:16px }

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

.contact-grille{ display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:stretch }
.contact-carte{
  background:var(--navy-2); border:1px solid var(--ligne-navy); border-radius:var(--r-carte);
  padding:38px 34px;
}
.contact-bloc + .contact-bloc{ margin-top:28px; padding-top:28px; border-top:1px solid var(--ligne-navy) }
.contact-bloc h3{ font-family:var(--police-nav); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--argent) }
.contact-bloc p, .contact-bloc a{ margin-top:10px; color:rgba(255,255,255,.86) }
.contact-bloc a:hover{ color:var(--bleu-clair) }

.horaires{ margin-top:12px; width:100%; border-collapse:collapse; font-size:.94rem }
.horaires th, .horaires td{ padding:9px 0; text-align:left; font-weight:400; color:rgba(255,255,255,.86) }
.horaires th{ font-weight:600; color:rgba(255,255,255,.66) }
.horaires td{ text-align:right }
.horaires tr + tr th, .horaires tr + tr td{ border-top:1px solid rgba(255,255,255,.08) }

.plan{ position:relative; border-radius:var(--r-carte); overflow:hidden; min-height:420px }
.plan iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.05) }

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

.site-footer{ background:var(--bleu-nuit); padding:66px 0 0; border-top:1px solid var(--ligne-navy) }
.pied{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:38px; padding-bottom:46px }
.pied__marque img{ height:52px; width:auto; margin-bottom:20px }
.pied__marque p{ color:var(--sur-navy-faible); font-size:.9rem; max-width:38ch }
.pied h4{ font-family:var(--police-nav); font-size:.74rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--argent); margin-bottom:18px }
.pied ul{ list-style:none; display:flex; flex-direction:column; gap:11px }
.pied a, .pied__note{ color:var(--sur-navy-doux); font-size:.92rem }
.pied a:hover{ color:#fff }
.pied__note{ line-height:1.8 }

.barre-pied{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding:22px 0 28px; border-top:1px solid var(--ligne-navy);
  font-size:.78rem; color:var(--sur-navy-faible);
}
.credit{ font-family:var(--police-nav); text-transform:uppercase; letter-spacing:.12em; font-weight:700; text-decoration:none }
.credit:hover{ color:#fff }

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

.devis{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s;
}
.devis.est-ouvert{ opacity:1; visibility:visible }
.devis__fond{ position:absolute; inset:0; background:rgba(4,9,17,.78); backdrop-filter:blur(3px) }
.devis__panneau{
  position:relative; width:100%; max-width:540px; max-height:90dvh; overflow-y:auto;
  background:#fff; color:var(--encre); border-radius:var(--r-widget); padding:38px 34px 30px;
  transform:translateY(12px); transition:transform .32s var(--ease-out);
}
.devis.est-ouvert .devis__panneau{ transform:none }
.devis__fermer{
  position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:999px;
  font-size:1.5rem; line-height:1; color:#8A94A4; display:flex; align-items:center; justify-content:center;
}
.devis__fermer:hover{ background:var(--acier); color:var(--encre) }
.devis__barre{ height:3px; background:var(--acier-2); border-radius:999px; margin-bottom:28px; overflow:hidden }
.devis__barre i{ display:block; height:100%; width:50%; background:var(--bleu); transition:width .35s var(--ease) }
.devis__etape{ display:none }
.devis__etape.est-active{ display:block; animation:monte .3s var(--ease-out) }
@keyframes monte{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.devis__etape h3{ font-size:1.22rem }
.devis__etape > p{ color:var(--encre-doux); font-size:.94rem; margin:8px 0 22px }
.devis__panneau .champ + .champ{ margin-top:16px }
.grille-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.recap{ background:var(--acier); border-radius:12px; padding:20px 22px; margin-bottom:24px }
.recap > div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0 }
.recap > div + div{ border-top:1px solid var(--acier-2) }
.recap dt{ font-family:var(--police-nav); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7C8798 }
.recap dd{ font-size:.94rem; font-weight:600; text-align:right }
.appel-final{ display:flex; flex-direction:column; gap:10px }
.appel-final .btn{ width:100% }
.devis__nav{ display:flex; gap:12px; justify-content:space-between; margin-top:26px }
.devis__nav .btn{ flex:1 }

/* ------------------------------------------------------ animations */

[data-reveal], [data-stagger] > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].vu, [data-stagger].vu > *{ opacity:1; transform:none }
[data-stagger].vu > *:nth-child(2){ transition-delay:.09s }
[data-stagger].vu > *:nth-child(3){ transition-delay:.18s }
[data-stagger].vu > *:nth-child(4){ transition-delay:.27s }
[data-stagger].vu > *:nth-child(5){ transition-delay:.34s }
[data-stagger].vu > *:nth-child(6){ transition-delay:.41s }
[data-stagger].vu > *:nth-child(n+7){ transition-delay:.48s }

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

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

@media (max-width:1080px){
  .pied{ grid-template-columns:1fr 1fr; gap:34px }
  .pied__marque{ grid-column:1 / -1 }
}
@media (max-width:960px){
  .widget{ grid-template-columns:1fr 1fr; }
  .widget .btn{ grid-column:1 / -1; width:100% }
  .activites, .flotte{ grid-template-columns:repeat(2,1fr) }
  .contact-grille{ grid-template-columns:1fr }
  .plan{ min-height:340px }
  .service, .service:nth-child(even) .service__media{ grid-template-columns:1fr; order:0 }
}
@media (max-width:680px){
  :root{ --nav-h:72px }
  .nav__marque img{ height:32px }
  .widget{ grid-template-columns:1fr; padding:18px }
  .activites, .flotte, .avis{ grid-template-columns:1fr }
  .grille-2{ grid-template-columns:1fr }
  .hero__faits{ flex-direction:column; align-items:center; gap:11px }
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 44px) 0 52px }
  .devis__panneau{ padding:32px 22px 26px }
  .barre-pied{ justify-content:center; text-align:center }
}