/* ===================================================================
   RIBAL CARS, Agdal Rabat.
   Location de voitures et transport touristique.

   Coque CLAIRE. Le kit est vert / or / creme sur fond ivoire, et le
   logo n'existe qu'en pleine couleur sur clair. La flotte est posee
   sur une bande VERTE pleine largeur : c'est le seul moment sombre de
   la page, donc elle ressort au lieu de faire un site sombre de plus.

   Typo : Playfair Display (police nommee par le kit) pour les titres,
   la nav et les capitales espacees, en 400/500 jamais en gras. Work
   Sans porte le corps, les boutons et les specs.
   Motif : le swoosh or du logo, en filet de section.
   Ecrit a la main, sans framework.
   =================================================================== */

:root{
  /* Kit, panneau 01, verbatim */
  --vert:   #2F5E4E;
  --or:     #D4B27A;
  --creme:  #EDE4D1;
  --blanc:  #F8F9F6;
  --noir:   #2D2D2D;

  /* Derives */
  --vert-2:   #264E41;
  --vert-3:   #1D3E34;
  --vert-clair:#3C7361;
  --or-2:     #C29C5F;
  --creme-2:  #E3D7BE;
  --papier:   #FFFFFF;

  --encre:      #2D2D2D;
  --encre-doux: #5C6360;
  --encre-faible:#8A908D;
  --ligne:      #DCD6C7;

  --sur-vert:       #FFFFFF;
  --sur-vert-doux:  rgba(255,255,255,.76);
  --sur-vert-faible:rgba(255,255,255,.54);
  --ligne-vert:     rgba(255,255,255,.16);

  --titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --corps: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

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

  --r: 12px;
  --r-lg: 18px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ombre: 0 18px 44px -26px rgba(29,62,52,.34);
  --ombre-fort: 0 26px 60px -28px rgba(29,62,52,.46);
}

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

body{
  background:var(--blanc);
  color:var(--encre);
  font-family:var(--corps);
  font-size:16.5px;
  line-height:1.7;
  font-weight:400;
  -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 }
select,input{ font:inherit; color:inherit }

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

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

h1,h2,h3,h4{ font-family:var(--titre); font-weight:400; line-height:1.18 }

.h1{ font-size:clamp(33px,5vw,58px); line-height:1.12; letter-spacing:-.005em }
.h2{ font-size:clamp(26px,3.3vw,40px) }
.h3{ font-size:clamp(19px,1.9vw,23px) }

/* Capitales espacees Playfair : le meme geste que le wordmark du logo. */
.label{
  display:inline-block;
  font-family:var(--titre);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--vert);
}
.sec--vert .label,
.pied .label{ color:var(--or) }

.lead{ font-size:17px; color:var(--encre-doux); max-width:56ch }
.sec--vert .lead{ color:var(--sur-vert-doux) }

/* --------------------------------------------------------- le swoosh
   Reprise de l'arc du logo : il monte, il gonfle, il retombe en pointe.
   Sert de filet sous les titres de section et de separateur. */

.swoosh{ display:block; width:104px; height:13px; margin-top:14px }
.swoosh path{ fill:var(--or) }
.tete-sec--centre .swoosh{ margin-left:auto; margin-right:auto }

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

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  background:transparent;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--corps);
  font-size:14.5px; font-weight:600; letter-spacing:.02em;
  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(--vert); color:#fff; border-color:var(--vert) }
.btn--primaire:hover{ background:var(--vert-3); border-color:var(--vert-3) }

.btn--contour{ border-color:var(--vert); color:var(--vert) }
.btn--contour:hover{ background:var(--vert); color:#fff }

.btn--clair{ background:var(--creme); color:var(--vert-3); border-color:var(--creme) }
.btn--clair:hover{ background:#fff; border-color:#fff }

.btn--contour-clair{ border-color:var(--sur-vert-faible); color:#fff }
.btn--contour-clair:hover{ background:var(--or); border-color:var(--or); color:var(--vert-3) }

.btn--sm{ padding:10px 20px; font-size:13.5px }

/* ------------------------------------------------------------ entete */

.site-entete{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
.site-entete::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(29,62,52,.55), rgba(29,62,52,0));
  transition:opacity .3s var(--ease);
}
.site-entete.defile{
  height:72px;
  background:var(--blanc);
  box-shadow:0 1px 0 var(--ligne), 0 10px 30px -22px rgba(29,62,52,.4);
}
.site-entete.defile::before{ 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:18px;
}

.nav__marque{ display:flex; align-items:center; justify-self:start; position:relative; z-index:120 }
.nav__marque img{ height:44px; width:auto; transition:height .3s var(--ease) }
.site-entete.defile .nav__marque img{ height:37px }
.nav__marque .lg-clair{ display:block }
.nav__marque .lg-couleur{ display:none }
.site-entete.defile .nav__marque .lg-clair{ display:none }
.site-entete.defile .nav__marque .lg-couleur{ display:block }

.nav__liens{ display:flex; align-items:center; gap:30px; justify-self:center }
.nav__liens a{
  font-family:var(--titre);
  font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
  position:relative; padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__liens a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--or); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__liens a:hover::after,.nav__liens a.actif::after{ transform:scaleX(1) }
.site-entete.defile .nav__liens a{ color:var(--vert) }

.nav__fin{ display:flex; align-items:center; gap:12px; justify-self:end; position:relative; z-index:120 }
.nav__cta--tete{ background:var(--or); color:var(--vert-3); border-color:var(--or) }
.nav__cta--tete:hover{ background:#fff; border-color:#fff }
.site-entete.defile .nav__cta--tete{ background:var(--vert); color:#fff; border-color:var(--vert) }
.site-entete.defile .nav__cta--tete:hover{ background:var(--vert-3); border-color:var(--vert-3) }

.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; position:relative }
.burger span,.burger span::before,.burger span::after{
  content:""; display:block; width:22px; height:1.5px; background:#fff; transition:.28s var(--ease);
}
.burger span::before{ position:absolute; transform:translateY(-7px) }
.burger span::after{ position:absolute; transform:translateY(7px) }
.site-entete.defile .burger span,
.site-entete.defile .burger span::before,
.site-entete.defile .burger span::after{ background:var(--vert) }

/* Menu mobile : FRERE de l'entete, jamais un enfant, sinon un filtre
   sur l'entete en ferait le bloc contenant et l'overlay s'effondrerait. */
.menu{
  position:fixed; top:0; left:0; width:100vw; height:100dvh; z-index:90;
  background:var(--vert-3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
body.menu-ouvert .menu{ opacity:1; visibility:visible }
body.menu-ouvert{ overflow:hidden }
body.menu-ouvert .site-entete{ z-index:110; background:transparent; box-shadow:none; height:var(--nav-h) }
body.menu-ouvert .site-entete .nav__liens a{ color:#fff }
body.menu-ouvert .nav__marque .lg-clair{ display:block }
body.menu-ouvert .nav__marque .lg-couleur{ display:none }
/* Ces trois regles doivent battre `.site-entete.defile .burger span` (0,3,1), sinon
   sur une page scrollee la barre du milieu survit et la croix sort en asterisque. */
body.menu-ouvert .site-entete .burger span{ background:transparent }
body.menu-ouvert .site-entete .burger span::before{ background:#fff; transform:rotate(45deg) }
body.menu-ouvert .site-entete .burger span::after{ background:#fff; transform:rotate(-45deg) }
body.menu-ouvert .site-entete .nav__marque img{ height:44px }
.menu a{
  font-family:var(--titre); font-size:23px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.menu a.actif{ color:var(--or) }
.menu .btn{ margin-top:10px }

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

.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 46px;
  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; object-position:center }
.hero__voile{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(29,62,52,.90) 0%, rgba(29,62,52,.72) 44%, rgba(29,62,52,.38) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; color:#fff }
.hero .h1{ color:#fff; max-width:16ch }
.hero__sous{ margin-top:16px; font-size:17.5px; color:var(--sur-vert-doux); max-width:52ch }

/* ---------------------------------------------- widget de devis hero */

.widget{
  margin-top:32px;
  background:rgba(255,255,255,.96);
  border-radius:var(--r-lg);
  box-shadow:var(--ombre-fort);
  padding:16px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr auto; gap:12px; align-items:end;
  max-width:900px;
}
.champ{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.champ label{
  font-family:var(--titre);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--encre-faible);
  padding-left:2px;
}
.champ select,.champ input{
  width:100%; min-width:0;
  padding:12px 14px;
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:10px;
  font-size:14.5px; color:var(--encre);
  appearance:none; -webkit-appearance:none;
}
.champ select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%232F5E4E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:34px;
}
.champ select:focus,.champ input:focus{ outline:2px solid var(--vert); outline-offset:1px }
.widget .btn{ height:45px }

.hero__faits{
  margin-top:30px;
  display:flex; flex-wrap:wrap; gap:12px 32px;
  font-size:14.5px; color:var(--sur-vert-doux);
}
.hero__faits span{ display:inline-flex; align-items:center; gap:9px }
.hero__faits svg{
  display:block; width:17px; height:17px; flex:none;
  fill:none; stroke:var(--or); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.hero__faits a:hover{ color:#fff }

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

.sec{ padding:clamp(64px,8vw,110px) 0 }
.sec--creme{ background:var(--creme) }
.sec--vert{ background:var(--vert); color:#fff }
.sec--serre{ padding:clamp(48px,6vw,74px) 0 }

.tete-sec{ margin-bottom:clamp(34px,4vw,52px); max-width:60ch }
.tete-sec--centre{ margin-left:auto; margin-right:auto; text-align:center }
.tete-sec .h2{ margin-top:10px }
.sec--vert .tete-sec .h2{ color:#fff }
.tete-sec .lead{ margin-top:14px }

/* ------------------------------------------------------- activites */

.activites{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px }
.acte{
  background:var(--papier);
  border:1px solid var(--ligne);
  border-radius:var(--r-lg);
  padding:34px 30px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.acte:hover{ transform:translateY(-3px); box-shadow:var(--ombre) }
/* Le wrapper d'icone est un BLOC avec des px explicites sur le wrapper ET
   le svg : en inline, la taille est ignoree et l'icone explose. */
.acte__icone{ display:block; width:42px; height:42px; margin-bottom:20px }
.acte__icone svg{
  display:block; width:42px; height:42px;
  fill:none; stroke:var(--vert); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.acte .h3{ color:var(--vert) }
.acte p{ margin-top:10px; color:var(--encre-doux); font-size:15.5px }
.acte__lien{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:14px; font-weight:600; color:var(--vert);
}
.acte__lien span{ transition:transform .25s var(--ease) }
.acte__lien:hover span{ transform:translateX(4px) }

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

.filtres{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px }
.filtre{
  padding:9px 20px;
  border:1px solid var(--ligne-vert); border-radius:999px;
  font-family:var(--titre); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--sur-vert-doux);
  transition:.25s var(--ease);
}
.filtre:hover{ color:#fff; border-color:var(--sur-vert-faible) }
.filtre.actif{ background:var(--or); border-color:var(--or); color:var(--vert-3) }

.flotte{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.voiture{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.055);
  border:1px solid var(--ligne-vert);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.voiture:hover{ border-color:var(--or); transform:translateY(-4px); background:rgba(255,255,255,.085) }
.voiture__plaque{
  position:relative;
  background:var(--creme);
  padding:22px 18px 12px;
}
.voiture__plaque img{ width:100%; height:auto }
.voiture__cat{
  position:absolute; top:14px; left:16px;
  font-family:var(--titre); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--encre-faible);
}
.voiture__corps{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 }
.voiture .h3{ color:#fff }
.voiture__specs{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--ligne-vert);
  font-size:13px; color:var(--sur-vert-faible);
}
.voiture__pied{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:auto; padding-top:20px;
}
.voiture__prix{ font-size:13.5px; color:var(--sur-vert-doux) }
.voiture__prix b{ display:block; font-size:17px; color:var(--or); font-weight:600 }
.note-tarif{ margin-top:30px; font-size:13.5px; color:var(--sur-vert-faible) }

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

.avis{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.avis blockquote{
  background:var(--papier);
  border:1px solid var(--ligne);
  border-radius:var(--r-lg);
  padding:28px 28px 24px;
  position:relative;
}
.avis blockquote::before{
  content:"\201C";
  position:absolute; top:8px; right:22px;
  font-family:var(--titre); font-size:56px; line-height:1; color:var(--creme-2);
}
.avis p{ font-size:15.5px; color:var(--encre-doux); position:relative }
.avis cite{
  display:block; margin-top:16px;
  font-family:var(--titre); font-style:normal;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--vert);
}

/* Une seule voix de client sur l'accueil, la liste complete vit sur A propos. */
.citation{ max-width:820px; margin:0 auto; text-align:center }
.citation .swoosh{ margin:0 auto 22px }
.citation blockquote{
  font-family:var(--titre); font-size:clamp(21px,2.6vw,31px); line-height:1.42; color:var(--vert);
}
.citation blockquote::before{ content:"\201C" }
.citation blockquote::after{ content:"\201D" }
.citation figcaption{
  margin-top:20px;
  font-family:var(--titre); font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux);
}
.citation .acte__lien{ margin-top:22px }

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

/* Toujours en blanc : la bande suit soit la flotte verte, soit les avis en creme,
   donc en creme elle fusionnerait avec la section du dessus. */
.bande-cta{ background:var(--blanc); border-top:1px solid var(--ligne); text-align:center }
.bande-cta .h2{ color:var(--vert) }
.bande-cta .lead{ margin:14px auto 0 }
.bande-cta__btns{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center }

/* ------------------------------------------------- tete de page int. */

.tete-page{
  position:relative;
  min-height:clamp(300px,42vh,420px);
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 46px) 0 46px;
  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__voile{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(29,62,52,.90), rgba(29,62,52,.60));
}
.tete-page__inner{ position:relative; z-index:2; color:#fff }
.tete-page .h1{ color:#fff; font-size:clamp(30px,4.2vw,48px) }
.tete-page .label{ color:var(--or) }
.tete-page .lead{ color:var(--sur-vert-doux); margin-top:14px }

/* --------------------------------------------------------- a propos */

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center }
.duo p{ color:var(--encre-doux) }
.duo .swoosh + p{ margin-top:22px }
.duo p + p{ margin-top:14px }
.duo .acte__lien{ margin-top:20px }
.coord .bande-cta__btns{ justify-content:flex-start; margin-top:4px }

.horaires{ width:100%; border-collapse:collapse; font-size:15px }
.horaires th,.horaires td{ padding:11px 0; text-align:left; border-bottom:1px solid var(--ligne) }
.horaires th{ font-weight:500; color:var(--encre); width:52% }
.horaires td{ color:var(--encre-doux); text-align:right }
.horaires tr:last-child th,.horaires tr:last-child td{ border-bottom:0 }
.horaires .ferme{ color:var(--encre-faible) }

.encart{
  background:var(--creme); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px);
}
.encart .h3{ color:var(--vert) }

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

.contact{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,52px); align-items:stretch }
.coord{ display:flex; flex-direction:column; gap:26px }
.coord__item{ display:flex; gap:16px }
.coord__ic{ display:block; width:38px; height:38px; flex:none }
.coord__ic svg{
  display:block; width:38px; height:38px;
  fill:none; stroke:var(--vert); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.coord__item h3{ font-size:17px; color:var(--vert) }
.coord__item p,.coord__item a{ color:var(--encre-doux); font-size:15.5px }
.coord__item a:hover{ color:var(--vert) }

/* La colonne des coordonnees est etroite : sans ca "14h30 a 20h" passe a la ligne tout seul. */
.coord .horaires{ font-size:14px }
.coord .horaires th{ width:46%; font-size:14.5px }
.coord .horaires td{ white-space:nowrap }

/* La carte doit remplir toute la hauteur de sa colonne. */
.carte{ position:relative; min-height:380px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--ligne) }
.carte iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

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

.pied{ background:var(--vert-3); color:var(--sur-vert-doux); padding:clamp(52px,6vw,74px) 0 0 }
.pied__haut{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px }
.pied__marque img{ height:74px; width:auto }
.pied__marque p{ margin-top:18px; font-size:14.5px; max-width:36ch }
.pied h4{
  font-family:var(--titre); font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--or); margin-bottom:16px;
}
.pied ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14.5px }
.pied a:hover{ color:#fff }
.pied__bas{
  margin-top:clamp(40px,5vw,58px); padding:22px 0;
  border-top:1px solid var(--ligne-vert);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  font-size:12.5px; color:var(--sur-vert-faible);
}
.credit{ text-transform:uppercase; text-decoration:none; letter-spacing:.08em }
.credit:hover{ color:var(--or) }

/* ------------------------------------------------------ modale 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.ouverte{ opacity:1; visibility:visible }
body.devis-ouvert{ overflow:hidden }
.devis__fond{ position:absolute; inset:0; background:rgba(21,44,37,.62); backdrop-filter:blur(3px) }
.devis__panneau{
  position:relative; width:100%; max-width:540px;
  max-height:88vh; overflow-y:auto;
  background:var(--blanc); border-radius:var(--r-lg);
  padding:34px clamp(22px,4vw,38px) 30px;
  box-shadow:0 40px 90px -30px rgba(21,44,37,.6);
  transform:translateY(14px); transition:transform .32s var(--ease);
}
.devis.ouverte .devis__panneau{ transform:none }
.devis__fermer{
  position:absolute; top:14px; right:16px;
  width:36px; height:36px; border-radius:50%;
  font-size:22px; line-height:1; color:var(--encre-faible);
  display:flex; align-items:center; justify-content:center;
}
.devis__fermer:hover{ background:var(--creme); color:var(--vert) }
.devis__barre{ height:2px; background:var(--ligne); border-radius:2px; margin-bottom:26px; overflow:hidden }
.devis__barre i{ display:block; height:100%; width:33%; background:var(--or); transition:width .35s var(--ease) }
.devis__etape{ display:none }
.devis__etape.est-active{ display:block }
.devis__etape h3{ font-size:22px; color:var(--vert) }
.devis__etape > p{ margin-top:8px; font-size:15px; color:var(--encre-doux) }
.devis__champs{ margin-top:22px; display:flex; flex-direction:column; gap:16px }
.devis__recap{ margin-top:20px; background:var(--creme); border-radius:var(--r); padding:20px 22px }
.devis__recap dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:15px }
.devis__recap dt{ color:var(--encre-doux) }
.devis__recap dd{ text-align:right; font-weight:600; color:var(--vert) }
.devis__joindre{ margin-top:20px; display:flex; flex-direction:column; gap:10px }
.devis__tel{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; border-radius:var(--r);
  background:var(--vert); color:#fff; font-weight:600; font-size:16px;
}
.devis__tel:hover{ background:var(--vert-3) }
.devis__nav{ margin-top:26px; display:flex; gap:10px; justify-content:space-between }
.devis__nav .btn{ flex:1 }

/* --------------------------------------------------------- reveals
   Verticaux uniquement : une translation en X depasse le padding de
   .wrap et cree un vrai debordement horizontal vers 1024px. */

[data-reveal],[data-stagger] > *{
  opacity:0; transform:translateY(18px);
  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:.30s }
[data-stagger].vu > *:nth-child(6){ transition-delay:.36s }
[data-stagger].vu > *:nth-child(7){ transition-delay:.42s }
[data-stagger].vu > *:nth-child(8){ transition-delay:.48s }
[data-stagger].vu > *:nth-child(9){ transition-delay:.54s }

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

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

@media (max-width:1080px){
  .flotte{ grid-template-columns:repeat(2,1fr) }
  .pied__haut{ grid-template-columns:1fr 1fr; gap:34px }
  .pied__marque{ grid-column:1 / -1 }
}

@media (max-width:920px){
  .nav__liens{ display:none }
  .burger{ display:flex }
  .nav{ grid-template-columns:auto 1fr }
  .nav__fin{ grid-column:2 }
  .nav__cta--tete{ display:none }
  .widget{ grid-template-columns:1fr 1fr; }
  .widget .champ--vehicule{ grid-column:1 / -1 }
  .widget .btn{ grid-column:1 / -1; width:100% }
  .contact{ grid-template-columns:1fr }
  .duo{ grid-template-columns:1fr }
}

@media (max-width:760px){
  body{ font-size:16px }
  .activites{ grid-template-columns:1fr }
  .avis{ grid-template-columns:1fr }
  .flotte{ grid-template-columns:1fr }
  .hero{ min-height:0; padding:calc(var(--nav-h) + 60px) 0 54px }
  .hero__voile{ background:linear-gradient(to bottom, rgba(29,62,52,.62) 0%, rgba(29,62,52,.82) 100%) }
  .hero .h1{ max-width:none }
  .hero__faits{ gap:10px 22px; font-size:13.5px }
  .widget{ grid-template-columns:1fr; padding:14px }
  .pied__haut{ grid-template-columns:1fr }
  .pied__bas{ flex-direction:column }
}

@media (max-width:420px){
  .nav__marque img{ height:38px }
  .site-entete.defile .nav__marque img{ height:33px }
}