/* ============================================================
   FERMONTOURS — Feuille de style du site (palette bleu pastel)
   Palette : ardoise #3D5C88 · bleu #5C82B8 · bleu moyen #5F87BE
             pastel #A9C6E8 · pâle #C7DCF3 · fond #F5F9FD
   Typo : Anton (titres) · Archivo (texte) · Caveat (manuscrit)
   ============================================================ */

:root {
  --navy: #3D5C88;
  --navy-deep: #2E4568;
  --blue: #5C82B8;
  --blue-mid: #5F87BE;
  --blue-hover: #4E76AD;
  --sky: #89ACD9;
  --pastel: #A9C6E8;
  --pastel-light: #CFE1F4;
  --pale: #C7DCF3;
  --nav-link: #DCE9F8;
  --bg: #F5F9FD;
  --ink: #2B3B52;
  --text-soft: #5A6B80;
  --border-soft: #CBDCEF;
  --footer-text: #C2D4EA;
  --footer-line: #46618C;
  --footer-muted: #8FA9CB;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--navy); }

body {
  font-family: 'Archivo', 'Helvetica Neue', sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-mid); }
::selection { background: var(--pale); color: var(--navy); }

img, video { display: block; }

h1, h2, h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; margin: 0; }

.script { font-family: 'Caveat', cursive; color: var(--blue-mid); transform: rotate(-1deg); }

/* ---------- Étiquettes (badges Anton inclinés) ---------- */

.tag {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.tag--blue { background: var(--blue-mid); color: var(--white); }
.tag--pale { background: var(--pale); color: var(--navy); transform: rotate(1.5deg); }
.tag--lg { font-size: 20px; padding: 8px 16px; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: none;
}
.btn--primary {
  background: var(--blue-mid); color: var(--white);
  padding: 18px 34px; font-size: 20px;
  box-shadow: 5px 5px 0 var(--pale);
  transform: rotate(-1deg);
}
.btn--primary:hover { background: var(--blue-hover); color: var(--white); }
.btn--pale {
  background: var(--pale); color: var(--navy);
  padding: 18px 36px; font-size: 20px;
  box-shadow: 5px 5px 0 var(--navy);
}
.btn--pale:hover { background: var(--white); color: var(--navy); }
.btn--navy {
  background: var(--navy); color: var(--white);
  padding: 15px 28px; font-size: 17px;
  box-shadow: 5px 5px 0 var(--pale);
}
.btn--navy:hover { background: var(--blue-mid); color: var(--white); }

.link-underline {
  color: var(--white); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 3px solid var(--pale); padding-bottom: 3px;
}
.link-underline--navy { color: var(--navy); font-size: 14px; border-bottom-width: 3px; }

/* ---------- Barre supérieure ---------- */

.topbar {
  background: var(--blue-mid); color: var(--white);
  font-size: 13px; font-weight: 700;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 9px 48px; letter-spacing: 0.04em; text-transform: uppercase;
}
.topbar a { color: var(--pale); text-decoration: underline; }

/* ---------- Navigation ---------- */

.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 48px; background: var(--navy); color: var(--white);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 4px 16px rgba(61, 92, 136, 0.35);
}
.nav__brand { display: flex; align-items: center; gap: 14px; }
.nav__brand img { height: 52px; width: auto; }
.nav__badge {
  background: var(--blue-mid); color: var(--white);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; padding: 4px 10px; transform: rotate(-2deg);
}
.nav__links {
  display: flex; gap: 30px; font-size: 15px; font-weight: 700;
  align-items: center; text-transform: uppercase; letter-spacing: 0.03em;
}
.nav__links a { color: var(--nav-link); }
.nav__links a:hover { color: var(--pale); }
.nav__links a.is-active { color: var(--white); }
.nav__cta {
  background: var(--pale); color: var(--navy) !important;
  padding: 12px 24px; font-weight: 800;
  transform: rotate(-1deg); box-shadow: 4px 4px 0 var(--blue-mid);
}
.nav__cta:hover { background: var(--white); color: var(--navy) !important; }

/* ---------- Hero (séparation diagonale) ---------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 60%, var(--sky) 100%);
  color: var(--white);
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
}
.hero--home { grid-template-columns: 1.3fr 1fr; min-height: 680px; }
.hero__content {
  position: relative; z-index: 2;
  padding: 90px 24px 90px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.hero__tags { display: flex; align-items: center; gap: 12px; }
.hero__title { font-size: 62px; line-height: 0.98; letter-spacing: 0.01em; }
.hero--home .hero__title { font-size: 74px; }
.hero__title .accent { color: var(--pale); }
.hero__script { font-size: 34px; line-height: 1.15; margin: 0; color: var(--white); }
.hero__text { font-size: 17px; line-height: 1.65; margin: 0; font-weight: 500; color: #DCE6F5; text-wrap: pretty; }
.hero__actions { display: flex; gap: 18px; align-items: center; margin-top: 10px; }

/* Media diagonale : trois couches qui suivent la même pente */
.hero__media { position: relative; min-height: 420px; }
.hero__layer {
  position: absolute; top: 0; bottom: 0; right: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__layer--1 { left: 0; background: var(--pastel); }
.hero__layer--2 { left: 16px; background: var(--pastel-light); }
.hero__layer--media { left: 42px; overflow: hidden; }
.hero__layer--media img,
.hero__layer--media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__layer--media .shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(95, 135, 190, 0.35) 0%, rgba(95, 135, 190, 0) 40%);
}
.hero__sticker {
  position: absolute; right: 36px; bottom: 40px; z-index: 4;
  background: var(--blue-mid); color: var(--white);
  border: 4px solid var(--white); border-radius: 999px;
  width: 132px; height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(6deg);
  box-shadow: 0 8px 20px rgba(61, 92, 136, 0.45);
}
.hero__sticker strong { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 34px; line-height: 1; }
.hero__sticker span { font-size: 12px; font-weight: 800; text-transform: uppercase; text-align: center; line-height: 1.2; }

/* ---------- Bande défilante ---------- */

.marquee {
  background: var(--pale); color: var(--navy);
  font-family: 'Anton', sans-serif; font-size: 18px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; justify-content: center; gap: 40px; padding: 14px 48px;
}

/* ---------- Sections ---------- */

.section { padding: 90px 48px; background: var(--bg); }
.section--navy { background: var(--navy); color: var(--white); }
.section__head { text-align: center; margin-bottom: 48px; }
.section__head .tag { margin-bottom: 16px; }
.section__head h2 { font-size: 52px; line-height: 1; color: var(--navy); }
.section--navy .section__head h2 { color: var(--white); }
.section__head h2 .accent { color: var(--blue-mid); }
.section--navy .section__head h2 .accent { color: var(--pale); }
.section__head .script { font-size: 30px; margin: 12px 0 0 0; display: block; }
.section--navy .section__head .script { color: var(--pale); }
.section__row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 44px; gap: 32px;
}
.section__row .tag { margin-bottom: 16px; }
.section__row h2 { font-size: 52px; line-height: 1; }

/* ---------- Cartes service (accueil) ---------- */

.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-card {
  background: var(--white); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 6px 6px 0 var(--navy);
}
.service-card__num { font-family: 'Anton', sans-serif; font-size: 30px; color: var(--blue-mid); }
.service-card__title { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--navy); text-transform: uppercase; line-height: 1.1; }
.service-card__desc { font-size: 14.5px; color: var(--text-soft); line-height: 1.55; font-weight: 500; }

/* ---------- Cartes véhicule ---------- */

.fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.vehicle-card {
  background: var(--white); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: 7px 7px 0 rgba(95, 135, 190, 0.9);
}
.section--navy .vehicle-card { box-shadow: 7px 7px 0 rgba(61, 92, 136, 0.5); }
.vehicle-card__media {
  height: 200px; position: relative; overflow: hidden;
  border-bottom: 5px solid var(--pale);
}
.vehicle-card__media--blue { border-bottom-color: var(--blue-mid); }
.vehicle-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
.vehicle-card__seats {
  position: absolute; top: 12px; left: 12px;
  background: var(--blue-mid); color: var(--white);
  font-family: 'Anton', sans-serif; font-size: 15px;
  letter-spacing: 0.05em; padding: 5px 12px;
}
.vehicle-card__norm {
  position: absolute; top: 12px; right: 12px;
  background: var(--navy); color: var(--pale);
  font-family: 'Anton', sans-serif; font-size: 13px;
  letter-spacing: 0.05em; padding: 5px 10px;
}
.vehicle-card__body { padding: 20px 22px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vehicle-card__driver { font-family: 'Caveat', cursive; font-size: 24px; color: var(--blue-mid); line-height: 1; }
.vehicle-card__model { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--navy); text-transform: uppercase; line-height: 1.1; }
.vehicle-card__desc { font-size: 14px; color: var(--text-soft); line-height: 1.55; font-weight: 500; flex: 1; }
.vehicle-card__link {
  color: var(--navy); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 3px solid var(--pale); padding-bottom: 2px;
  align-self: flex-start; margin-top: 6px;
}

/* ---------- Chiffres clés ---------- */

.stats {
  background: var(--pale); color: var(--navy);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 26px 48px; text-align: center;
}
.stats__item { display: flex; flex-direction: column; gap: 4px; }
.stats__value { font-family: 'Anton', sans-serif; font-size: 40px; line-height: 1; }
.stats__label { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Histoire / timeline ---------- */

.history {
  padding: 90px 48px; background: var(--bg);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start;
}
.history__media { position: sticky; top: 130px; }
.history__media img {
  width: 100%; height: 440px; object-fit: cover;
  border: 6px solid var(--white);
  box-shadow: 10px 10px 0 var(--navy);
  transform: rotate(-1.5deg);
}
.history__caption {
  position: absolute; bottom: -18px; left: 24px;
  font-family: 'Caveat', cursive; font-size: 30px; color: var(--blue-mid);
  background: var(--white); padding: 2px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 12px rgba(61, 92, 136, 0.2);
}
.history__content { display: flex; flex-direction: column; gap: 22px; }
.history__content .tag { align-self: flex-start; transform: rotate(-1.5deg); }
.history__content h2 { font-size: 46px; line-height: 1.02; color: var(--navy); }
.history__content > p { font-size: 16.5px; line-height: 1.65; color: var(--text-soft); margin: 0; font-weight: 500; text-wrap: pretty; }

.timeline { display: flex; flex-direction: column; margin-top: 8px; }
.timeline__row { display: grid; grid-template-columns: 110px 26px 1fr; gap: 0 18px; align-items: start; }
.timeline__year { font-family: 'Anton', sans-serif; font-size: 26px; color: var(--blue-mid); text-align: right; line-height: 1.1; }
.timeline__spine { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.timeline__dot {
  width: 16px; height: 16px; background: var(--pale);
  border: 3px solid var(--navy); border-radius: 999px;
  flex-shrink: 0; margin-top: 5px;
}
.timeline__line { width: 3px; flex: 1; background: var(--border-soft); margin-top: 4px; }
.timeline__body { padding-bottom: 28px; }
.timeline__title { font-family: 'Anton', sans-serif; font-size: 19px; color: var(--navy); text-transform: uppercase; margin-bottom: 4px; }
.timeline__desc { font-size: 15px; color: var(--text-soft); line-height: 1.55; font-weight: 500; }

/* ---------- Équipe ---------- */

.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.team-card {
  background: var(--white); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: 7px 7px 0 rgba(61, 92, 136, 0.5);
}
.team-card__media { height: 220px; position: relative; overflow: hidden; border-bottom: 5px solid var(--blue-mid); }
.team-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.team-card__body { padding: 16px 18px 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.team-card__name { font-family: 'Anton', sans-serif; font-size: 19px; color: var(--navy); text-transform: uppercase; line-height: 1.1; }
.team-card__role { font-size: 13.5px; color: var(--text-soft); line-height: 1.4; font-weight: 600; }

/* ---------- Galerie / remorques ---------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gallery--2col { grid-template-columns: 1fr 1fr; gap: 20px; }
.gallery__item {
  height: 220px; overflow: hidden; position: relative;
  border: 5px solid var(--white);
  box-shadow: 6px 6px 0 var(--navy);
}
.gallery--2col .gallery__item { height: 190px; }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Inclinaisons décoratives */
.tilt-1 { transform: rotate(-1deg); }
.tilt-2 { transform: rotate(0.8deg); }
.tilt-3 { transform: rotate(-0.6deg); }
.tilt-4 { transform: rotate(1deg); }
.tilt-5 { transform: rotate(0.7deg); }
.tilt-6 { transform: rotate(-0.9deg); }
.tilt-7 { transform: rotate(0.6deg); }
.tilt-8 { transform: rotate(-0.8deg); }

/* ---------- Section entreprise (accueil) ---------- */

.about {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px;
  padding: 90px 48px; align-items: center; background: var(--bg);
}
.about__content { display: flex; flex-direction: column; gap: 18px; }
.about__content .tag { align-self: flex-start; transform: rotate(-1.5deg); }
.about__content h2 { font-size: 50px; line-height: 1.02; color: var(--navy); }
.about__content p { font-size: 17px; line-height: 1.65; color: var(--text-soft); margin: 0; font-weight: 500; text-wrap: pretty; }
.about__content .btn { align-self: flex-start; }
.about__media { position: relative; }
.about__media img {
  width: 100%; height: 400px; object-fit: cover;
  border: 6px solid var(--white);
  box-shadow: 10px 10px 0 var(--navy);
  transform: rotate(1.5deg);
}
.about__caption {
  position: absolute; bottom: -18px; left: 24px;
  font-family: 'Caveat', cursive; font-size: 30px; color: var(--blue-mid);
  background: var(--white); padding: 2px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 12px rgba(61, 92, 136, 0.2);
}

/* ---------- Remorques (flotte) ---------- */

.trailers {
  padding: 90px 48px; background: var(--bg);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center;
}
.trailers__content { display: flex; flex-direction: column; gap: 18px; }
.trailers__content .tag { align-self: flex-start; transform: rotate(-1.5deg); }
.trailers__content h2 { font-size: 46px; line-height: 1.02; color: var(--navy); }
.trailers__content h2 .accent { color: var(--blue-mid); }
.trailers__content p { font-size: 16.5px; line-height: 1.65; color: var(--text-soft); margin: 0; font-weight: 500; text-wrap: pretty; }
.trailers__content .btn { align-self: flex-start; }

/* ---------- CTA Devis ---------- */

.cta {
  padding: 90px 48px;
  background: linear-gradient(160deg, var(--blue-mid) 0%, var(--blue-hover) 100%);
  color: var(--white); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.cta__mascotte { height: 90px; width: auto; transform: rotate(-3deg); filter: drop-shadow(0 6px 12px rgba(61, 92, 136, 0.35)); }
.cta h2 { font-size: 56px; line-height: 1; max-width: 21ch; text-wrap: balance; }
.cta .script { font-size: 32px; color: var(--white); }
.cta__actions { display: flex; gap: 20px; align-items: center; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.cta__phone { font-size: 17px; font-weight: 700; }
.cta__phone strong { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.03em; }

/* ---------- Formulaire de devis ---------- */

.quote { padding: 80px 48px; background: var(--bg); display: flex; justify-content: center; }
.quote__inner { width: 860px; max-width: 100%; }

.stepper { display: flex; align-items: center; margin-bottom: 36px; }
.stepper__step { display: flex; align-items: center; gap: 12px; flex: 1; }
.stepper__step--right { justify-content: flex-end; }
.stepper__num {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--white); color: var(--navy);
  font-family: 'Anton', sans-serif; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--navy); flex-shrink: 0;
}
.stepper__step.is-active .stepper__num { background: var(--pale); }
.stepper__label { font-family: 'Anton', sans-serif; font-size: 17px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.03em; }
.stepper__bar { height: 4px; flex: 0 0 80px; background: var(--border-soft); margin: 0 16px; }
.stepper__bar.is-active { background: var(--pale); }

.form-card {
  background: var(--white);
  box-shadow: 8px 8px 0 var(--navy);
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 26px;
}
.form-card__heading {
  display: inline-block; align-self: flex-start;
  background: var(--navy); color: var(--pale);
  font-family: 'Anton', sans-serif; font-size: 16px;
  letter-spacing: 0.06em; padding: 5px 14px;
  transform: rotate(-1.5deg);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--navy);
}
.form-field .req { color: var(--blue-mid); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: 'Archivo', sans-serif;
  padding: 13px 14px;
  border: 2px solid var(--border-soft);
  font-size: 15px; font-weight: 500;
  background: var(--white); color: var(--ink);
  color-scheme: light;
}
.form-field textarea { resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid var(--pale); outline-offset: 0;
  border-color: var(--navy);
}
.form-checks { display: flex; gap: 22px; align-items: center; padding: 12px 0; }
.form-checks label, .form-consent label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.form-checks input[type="checkbox"], .form-consent input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--blue-mid);
}
.form-consent {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg); padding: 20px 22px;
  border-left: 5px solid var(--pale);
}
.form-consent label { align-items: flex-start; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-soft); }
.form-consent input[type="checkbox"] { flex-shrink: 0; margin-top: 1px; }
.form-nav { display: flex; justify-content: space-between; margin-top: 8px; }
.form-nav--end { justify-content: flex-end; }
.btn--next {
  background: var(--blue-mid); color: var(--white);
  padding: 16px 36px; font-size: 19px;
  box-shadow: 5px 5px 0 var(--pale);
}
.btn--next:hover { background: var(--blue-hover); }
.btn--back {
  background: var(--white); color: var(--navy);
  border: 3px solid var(--navy);
  padding: 14px 30px; font-size: 17px;
}
.btn--back:hover { background: var(--bg); }

.form-done { text-align: center; align-items: center; padding: 60px 48px; }
.form-done h2 { font-size: 42px; line-height: 1; color: var(--navy); }
.form-done h2 .accent { color: var(--blue-mid); }
.form-done .script { font-size: 30px; }
.form-done p { font-size: 15px; color: var(--text-soft); margin: 0; max-width: 50ch; line-height: 1.6; font-weight: 500; }
.form-done img { height: 90px; width: auto; transform: rotate(-3deg); }

.is-hidden { display: none !important; }

/* ---------- Pages légales ---------- */

.hero--compact { grid-template-columns: 1fr; }
.hero--compact .hero__content { padding: 60px 48px; max-width: 900px; }

.legal { padding: 70px 48px; background: var(--bg); display: flex; justify-content: center; }
.legal__inner {
  width: 880px; max-width: 100%;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--navy);
  padding: 52px 56px;
}
.legal__inner h2 {
  font-size: 24px; color: var(--navy);
  margin: 34px 0 10px 0;
}
.legal__inner h2:first-child { margin-top: 0; }
.legal__inner p, .legal__inner li {
  font-size: 15px; line-height: 1.7;
  color: var(--text-soft); font-weight: 500;
  margin: 8px 0;
}
.legal__inner ul { margin: 10px 0; padding-left: 22px; }
.legal__updated {
  margin-top: 36px !important;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px !important;
  color: var(--footer-muted) !important;
}

/* ---------- Footer ---------- */

.footer { background: var(--navy-deep); color: var(--footer-text); padding: 60px 48px 28px 48px; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
  padding-bottom: 44px; border-bottom: 1px solid var(--footer-line);
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer__brand img { height: 56px; width: auto; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer__heading {
  font-family: 'Anton', sans-serif; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pale); margin-bottom: 4px;
}
.footer__col a { color: var(--footer-text); }
.footer__col a:hover { color: var(--white); }
.footer__social { display: flex; gap: 16px; margin-top: 4px; }
.footer__social a { color: var(--white); }
.footer__legal {
  padding-top: 22px; display: flex; flex-wrap: wrap;
  gap: 8px 26px; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.footer__legal a { color: var(--footer-text); }
.footer__legal a:hover { color: var(--white); }
.footer__bottom {
  padding-top: 14px; font-size: 13px; color: var(--footer-muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */

@media (max-width: 800px) {
  .topbar { flex-wrap: wrap; padding: 6px 14px; font-size: 11px; gap: 4px 8px; text-align: center; }

  .nav { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .nav__brand img { height: 38px; }
  .nav__links { gap: 10px 16px; font-size: 12px; flex-wrap: wrap; }

  .hero, .hero--home { grid-template-columns: 1fr; min-height: 0; }
  .hero__content { padding: 44px 20px; }
  .hero__title, .hero--home .hero__title { font-size: 38px; }
  .hero__script { font-size: 24px; }
  .hero__media { min-height: 240px; }
  .hero__sticker { transform: scale(0.75) rotate(6deg); right: 12px; bottom: 12px; }

  .marquee { flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px; font-size: 14px; }

  .section, .about, .history, .trailers, .cta, .quote { padding: 52px 20px; }
  .section__head h2, .section__row h2, .about__content h2,
  .history__content h2, .trailers__content h2, .cta h2 { font-size: 28px; }
  .section__head .script { font-size: 24px; }
  .section__row { flex-direction: column; align-items: flex-start; }

  .services { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fleet, .team, .gallery { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .about, .history, .trailers { grid-template-columns: 1fr; gap: 40px; }
  .history__media { position: static; }
  .history__media img { height: 260px; }
  .about__media img { height: 260px; }
  .stats { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 20px; }
  .stepper__bar { flex: 0 0 16px; margin: 0 8px; }
  .stepper__label { font-size: 13px; }

  .legal { padding: 40px 16px; }
  .legal__inner { padding: 28px 20px; }
  .footer { padding: 44px 20px 24px 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Bandeau cookies (RGPD) ---------- */

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--navy-deep); color: var(--footer-text);
  box-shadow: 0 -8px 24px rgba(46, 69, 104, 0.35);
  transform: translateY(110%); transition: transform 0.25s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: 1100px; margin: 0 auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.cookie-banner__text strong { color: var(--white); font-size: 15px; }
.cookie-banner__text p { margin: 6px 0 0 0; font-size: 13.5px; line-height: 1.6; font-weight: 500; }
.cookie-banner__text a { color: var(--pale); text-decoration: underline; }
.cookie-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: rgba(255, 255, 255, 0.07); }
.cookie-panel[hidden] { display: none; }
.cookie-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cookie-toggle input { width: 18px; height: 18px; accent-color: var(--blue-mid); }
.cookie-toggle span { color: var(--footer-muted); font-weight: 500; font-size: 12.5px; }
.cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-btn {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 12px 22px; cursor: pointer; border: none;
}
.cookie-btn--primary { background: var(--pale); color: var(--navy); box-shadow: 3px 3px 0 var(--blue-mid); }
.cookie-btn--primary:hover { background: var(--white); }
.cookie-btn--ghost { background: transparent; color: var(--footer-text); border: 2px solid var(--footer-line); }
.cookie-btn--ghost:hover { color: var(--white); border-color: var(--footer-text); }

/* ---------- Anti-spam (captcha) ---------- */

.captcha-box {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: var(--bg); padding: 16px 18px;
  border-left: 5px solid var(--blue-mid);
}
.captcha-box .form-field { flex: 0 0 220px; }
.captcha-box__question { font-family: 'Anton', sans-serif; font-size: 20px; color: var(--navy); letter-spacing: 0.04em; padding-bottom: 12px; }
.captcha-box__hint { font-size: 12.5px; color: var(--footer-muted); font-weight: 500; width: 100%; }

@media (max-width: 800px) {
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-btn { flex: 1; padding: 12px 10px; }
}

/* ---------- Renvoi vers FMT Voyages (page d'accueil) ---------- */

.fmt {
  padding: 70px 48px;
  background: var(--navy);
  display: flex;
  justify-content: center;
}
.fmt__box {
  width: 100%;
  max-width: 1000px;
  background: var(--white);
  box-shadow: 10px 10px 0 var(--blue-mid);
  border: 3px solid var(--pale);
  padding: 38px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 44px;
}
.fmt__content { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fmt__content .tag { transform: rotate(-1.5deg); }
.fmt__content h2 { font-size: 34px; line-height: 1.06; color: var(--navy); }
.fmt__content h2 .accent { color: var(--blue-mid); }
.fmt__content p {
  font-size: 16px; line-height: 1.65; color: var(--text-soft);
  margin: 0; font-weight: 500; text-wrap: pretty;
}
.fmt__qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fmt__qr img {
  width: 148px; height: 148px; display: block;
  border: 3px solid var(--border-soft); border-radius: 12px;
  background: var(--white); padding: 8px;
}
.fmt__qr-legende {
  font-family: 'Anton', sans-serif; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-mid);
}

@media (max-width: 800px) {
  .fmt { padding: 44px 20px; }
  .fmt__box {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 22px;
    box-shadow: 6px 6px 0 var(--blue-mid);
    text-align: center;
  }
  .fmt__content { align-items: center; }
  .fmt__content h2 { font-size: 26px; }
  .fmt__content .btn { align-self: stretch; text-align: center; }
  .fmt__qr { order: -1; }
  .fmt__qr img { width: 132px; height: 132px; }
}

/* ============================================================
   COMPLÉMENTS WORDPRESS / ELEMENTOR — thème Fermontours
   (le bloc ci-dessus provient de la maquette et reste la référence)
   ============================================================ */

/* ---------- Accessibilité ---------- */

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto;
  display: block; top: 8px; left: 8px; z-index: 100000;
  background: var(--white); color: var(--navy);
  padding: 12px 22px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(18, 38, 66, .3);
}

/* ---------- Menu mobile (hamburger) ---------- */

.nav__toggle { display: none; }

/* ---------- Enveloppe des pages ---------- */

.site-main { display: block; }

.page-content--full { width: 100%; }

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px 80px;
}
.page-content--full { max-width: none; padding: 0; }

.page-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 60%, var(--sky) 100%);
  color: var(--white);
  padding: 72px 48px;
}
.page-hero__inner { max-width: 1200px; margin: 0 auto; }
.page-hero__title {
  font-family: 'Anton', sans-serif; font-weight: 400;
  font-size: 46px; line-height: 1.06; margin: 0;
  text-wrap: balance;
}
.page-hero__meta, .page-hero__desc { margin-top: 10px; color: var(--pale); font-weight: 600; }

/* Contenu éditorial classique (hors Elementor) */
.page-content h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 32px; color: var(--navy); margin: 40px 0 14px; }
.page-content h3 { font-size: 22px; color: var(--navy); margin: 30px 0 10px; }
.page-content p, .page-content li { font-size: 16.5px; line-height: 1.75; color: var(--text-soft); }
.page-content ul, .page-content ol { padding-left: 22px; }
.page-content li { margin-bottom: 8px; }
.page-content img { max-width: 100%; height: auto; border-radius: 14px; }
.page-content a { text-decoration: underline; }
.page-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.page-content th, .page-content td { border: 1px solid var(--border-soft); padding: 10px 14px; text-align: left; }
.page-content th { background: var(--bg); color: var(--navy); }
.page-content blockquote {
  margin: 26px 0; padding: 18px 26px;
  border-left: 4px solid var(--pastel); background: var(--bg);
  font-family: 'Caveat', cursive; font-size: 24px; color: var(--blue);
}

/* ---------- Blog ---------- */

.liste-articles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.carte-article {
  background: var(--white); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(61, 92, 136, .14);
}
.carte-article__media img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; }
.carte-article__corps { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.carte-article__titre { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 21px; margin: 0; }
.carte-article__titre a { color: var(--navy); }
.carte-article__extrait p { font-size: 15px; margin: 0; }
.lien-souligne {
  align-self: flex-start; font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--blue); border-bottom: 3px solid var(--pastel); padding-bottom: 2px;
}
.article-media img { width: 100%; max-height: 460px; object-fit: cover; }

.pagination { margin-top: 40px; display: flex; justify-content: center; }
.pagination .page-numbers {
  display: inline-block; padding: 10px 16px; margin: 0 4px;
  border-radius: 999px; font-weight: 700; color: var(--navy); background: var(--bg);
}
.pagination .page-numbers.current { background: var(--blue); color: var(--white); }

.aucun-resultat { text-align: center; color: var(--text-soft); font-size: 17px; }

/* ---------- Page 404 ---------- */

.erreur-404 {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue) 100%);
  color: var(--white); padding: 110px 48px; text-align: center;
}
.erreur-404__inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.erreur-404 h1 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 46px; margin: 0; }
.erreur-404 .script { font-family: 'Caveat', cursive; font-size: 30px; color: var(--pale); margin: 0; }
.erreur-404__texte { color: var(--pale); font-size: 16.5px; line-height: 1.7; margin: 0; }
.erreur-404__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

/* ---------- Élément de menu WordPress : le nav rend des <a> à plat ---------- */

.nav__links li { list-style: none; }
.nav__links ul { display: contents; margin: 0; padding: 0; }

/* ============================================================
   RESPONSIVE — compléments WordPress
   ============================================================ */

@media (max-width: 900px) {
  .liste-articles { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .nav { position: relative; padding: 12px 16px; }
  .nav__brand img { height: 40px; }
  .nav__badge { display: none; }

  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 46px; height: 46px; flex-shrink: 0;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px; cursor: pointer; padding: 0;
  }
  .nav__toggle span {
    display: block; width: 20px; height: 2.5px; border-radius: 2px;
    background: var(--white); transition: transform .25s ease, opacity .2s ease;
  }
  .nav--open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 6px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 18px 28px rgba(18, 38, 66, .35);
    font-size: 14px; z-index: 30;
  }
  .nav--open .nav__links { display: flex; }
  .nav__links a { padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nav__links a.nav__cta {
    margin-top: 14px; text-align: center; border-bottom: none;
    padding: 14px 24px; transform: none; box-shadow: 3px 3px 0 var(--blue-mid);
  }

  .page-content { padding: 44px 20px 56px; }
  .page-hero { padding: 48px 20px; }
  .page-hero__title { font-size: 30px; }
  .page-content h2 { font-size: 25px; }
  .liste-articles { grid-template-columns: 1fr; }
  .erreur-404 { padding: 70px 20px; }
  .erreur-404 h1 { font-size: 31px; }
  .erreur-404__actions { flex-direction: column; align-self: stretch; }
}

/* WordPress enveloppe chaque lien dans un <li> : on le rend transparent pour
   que les <a> redeviennent les enfants directs du flex .nav__links (comme dans
   la maquette), sinon le CSS du menu ne s'applique pas. */
.nav__links li,
.nav__links ul,
.footer__col ul, .footer__col li,
.footer__legal ul, .footer__legal li { display: contents; list-style: none; }

/* ============================================================
   ADAPTATION ELEMENTOR — thème Fermontours
   ------------------------------------------------------------
   Elementor enveloppe chaque contenu dans .elementor-widget >
   .elementor-widget-container > (h1|p|a…) et rend les sections
   en flex (.e-con). Les classes de la maquette sont portées par
   le CONTENEUR du widget : sans ces règles, la balise interne
   applique ses propres styles (Roboto, vert #61CE70, 2em…).

   Principe : les enveloppes deviennent transparentes
   (display:contents) et le contenu hérite de la classe.
   Sélecteurs doublés (.e-con.x) pour passer devant Elementor.
   ============================================================ */

/* « overflow-x: hidden » sur html/body casse position:sticky (la photo
   « Une histoire de famille ! » ne suivait plus le défilement).
   « clip » rogne pareil sans créer de contexte de défilement. */
html, body { overflow-x: clip; }
.e-con, .e-con-inner { max-width: 100%; }

/* ---------- 1. Enveloppes transparentes + héritage ---------- */

.e-con .elementor-widget-container,
.e-con .elementor-button-wrapper { display: contents; }

/* :where() met la spécificité à zéro : les règles propres de la maquette
   (.section__head h2, .service-card__desc…) restent prioritaires, et seuls
   les éléments sans style dédié héritent de leur conteneur. */
/* Les titres héritent de la taille et de la couleur, mais PAS de la police :
   la maquette impose Anton via « h1, h2, h3 », et hériter écraserait cette
   règle (le titre repassait en Archivo). */
.e-con :where(.elementor-heading-title) {
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
/* NE PAS hériter de font-family, font-weight ni text-transform : la maquette
   les fixe dans « h1, h2, h3 { font-family: Anton; font-weight: 400;
   text-transform: uppercase } ». Hériter les écrasait — les titres
   perdaient Anton et les majuscules. */

.e-con :where(.elementor-widget-text-editor p),
.e-con :where(.elementor-widget-text-editor > div) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}

/* Le widget lui-même ne doit ajouter ni marge ni largeur forcée. */
.e-con .elementor-widget { margin: 0; }

/* ---------- 2. Boutons ---------- */
/* La classe (.btn, .btn--primary…) est sur le conteneur du widget :
   c'est lui qui porte fond, ombre et rotation ; le <a> interne s'efface. */

.e-con .elementor-widget-button { width: auto; }
.e-con .elementor-button,
.e-con a.elementor-button {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  fill: currentColor;
  text-align: inherit;
  display: inline;
}
.e-con .elementor-button:hover,
.e-con .elementor-button:focus { background-color: transparent; color: inherit; }
.e-con .elementor-button-content-wrapper { display: contents; }
.e-con .elementor-button-text { display: inline; }

/* Les widgets qui portent une classe « bouton » redeviennent inline-block. */
.e-con .elementor-widget.btn,
.e-con .elementor-widget.link-underline,
.e-con .elementor-widget[class*="btn--"] { display: inline-block; width: auto; }

/* ---------- 3. Hero ----------
   La disposition (grid 2 colonnes, couches en biais) vient désormais
   de la maquette elle-même : on ne garde ici que ce qu'Elementor casse. */

.elementor .hero__media { position: relative; display: block; padding: 0; }

.elementor .hero__layer {
  position: absolute; top: 0; bottom: 0; right: 0; left: 0;
  padding: 0; margin: 0; width: auto; max-width: none;
}
.elementor .hero__layer--media .elementor-widget-video,
.elementor .hero__layer--media .elementor-wrapper,
.elementor .hero__layer--media .e-hosted-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; padding: 0; margin: 0;
}
.elementor .hero__layer--media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.elementor .hero__layer--media .elementor-custom-embed-image-overlay {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.elementor .hero__layer--media .elementor-custom-embed-play { display: none; }

/* ---------- 4. Bande pastel ---------- */

.e-con.marquee, .e-con .marquee {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 8px 24px;
}
.e-con.marquee > * { flex: 0 0 auto; }
.e-con .marquee__inner {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: center; align-items: center;
}

/* ---------- 6. En-têtes de section ---------- */

.e-con .section__head {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; max-width: 900px; margin: 0 auto 44px;
}
.e-con .section__head > * { text-align: center; }
.e-con .section__row {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 40px;
}

/* ---------- 8. Appel au devis ---------- */

.e-con.cta {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
}

/* la taille de la mascotte vient de la maquette (90px) */
.e-con .cta__actions {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 20px; align-items: center; justify-content: center;
}

/* ---------- 9. Contenus longs / pages légales ---------- */

.e-con .prose, .e-con .content-narrow {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.e-con .legal__inner > *, .e-con .prose > * { text-align: left; }
.e-con .elementor-widget-text-editor ul,
.e-con .elementor-widget-text-editor ol { padding-left: 22px; }
.e-con .elementor-widget-text-editor li { margin-bottom: 6px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .e-con .services > .service-card { flex: 1 1 calc(50% - 11px); max-width: calc(50% - 11px); }
  .e-con .fleet > .vehicle-card { flex: 1 1 calc(50% - 13px); max-width: calc(50% - 13px); }
  .e-con .grid-4 > * { flex: 1 1 calc(50% - 11px); max-width: calc(50% - 11px); }
}

@media (max-width: 900px) {
  .e-con.hero { min-height: 0; }
  .e-con.hero > .hero__content,
  .e-con.hero > .hero__media { flex-basis: 100%; max-width: 100%; }
  .e-con.hero > .hero__content { padding: 48px 20px; }
  .e-con.hero > .hero__media { min-height: 280px; }
  .e-con .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .e-con .hero__actions > .elementor-widget { width: 100%; text-align: center; }
  .e-con .hero__sticker { right: 16px; bottom: 16px; width: 104px; height: 104px; max-width: 104px; }

  .e-con.about { gap: 30px; }
  .e-con.about > .about__content,
  .e-con.about > .about__media { flex-basis: 100%; max-width: 100%; }
  .e-con .about__media img { height: 260px; }

  .e-con .section__row { flex-direction: column; align-items: flex-start; }
  .e-con .grid-2 > *, .e-con .grid-3 > * { flex-basis: 100%; max-width: 100%; }
}

@media (max-width: 640px) {
  .e-con .services > .service-card,
  .e-con .fleet > .vehicle-card,
  .e-con .grid-4 > * { flex-basis: 100%; max-width: 100%; }
  .e-con .cta__actions { flex-direction: column; }
}

/* ============================================================
   FORMULAIRE DE DEVIS — Contact Form 7
   CF7 enveloppe chaque champ dans <span class="wpcf7-form-control-wrap"> :
   il faut le rendre transparent pour retrouver la grille de la maquette.
   ============================================================ */

.devis-cf7 .wpcf7 { width: 100%; }
.devis-wrap { display: flex; flex-direction: column; gap: 0; width: 100%; }
.devis-step { width: 100%; }
.devis-step[hidden] { display: none !important; }

.wpcf7-form-control-wrap { display: block; width: 100%; }

/* Champs : même rendu que la maquette */
.devis-wrap input[type="text"],
.devis-wrap input[type="email"],
.devis-wrap input[type="tel"],
.devis-wrap input[type="number"],
.devis-wrap input[type="date"],
.devis-wrap input[type="time"],
.devis-wrap select,
.devis-wrap textarea {
  width: 100%;
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--border-soft);
  border-radius: 0;
  padding: 12px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.devis-wrap input:focus,
.devis-wrap select:focus,
.devis-wrap textarea:focus {
  outline: none;
  border-color: var(--blue-mid);
  background: var(--white);
}
.devis-wrap textarea { resize: vertical; min-height: 120px; }
.devis-wrap .req { color: var(--blue-mid); }

/* Cases à cocher et consentement */
.form-checks .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.form-checks .wpcf7-list-item { margin: 0; }
.form-checks label, .form-consent label {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text-soft); cursor: pointer;
}
.form-checks input[type="checkbox"], .form-consent input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--blue-mid); flex: none;
}
.form-consent { display: flex; flex-direction: column; gap: 12px; }
.form-consent p { font-size: 14px; color: var(--text-soft); margin: 0; line-height: 1.6; }

/* Boutons : le bouton natif de CF7 reprend le style .btn--next */
.devis-wrap .btn--next, .devis-wrap input[type="submit"] {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--blue-mid); color: var(--white);
  padding: 16px 36px; font-size: 19px;
  border: 0; border-radius: 0; cursor: pointer;
  box-shadow: 5px 5px 0 var(--pale);
  transition: background .15s ease;
}
.devis-wrap .btn--next:hover, .devis-wrap input[type="submit"]:hover { background: var(--blue-hover); }
.devis-wrap .btn--ghost {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .05em;
  background: transparent; color: var(--navy);
  border: 2px solid var(--border-soft); padding: 14px 28px; font-size: 17px;
  cursor: pointer;
}
.devis-wrap .btn--ghost:hover { border-color: var(--blue-mid); color: var(--blue-mid); }

/* Stepper cliquable */
.stepper__step { cursor: pointer; }

/* Messages et erreurs de CF7 */
.wpcf7-not-valid { border-color: #C0392B !important; }
.wpcf7-not-valid-tip { color: #C0392B; font-size: 13px; font-weight: 700; margin-top: 5px; }
.wpcf7-response-output {
  margin: 24px 0 0 !important; padding: 16px 20px !important;
  border: 2px solid var(--border-soft) !important; border-radius: 0;
  font-weight: 600; color: var(--navy); background: var(--bg);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #2E7D32 !important; color: #2E7D32; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #C0392B !important; color: #C0392B; }
.wpcf7-spinner { margin: 0 0 0 12px; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .form-card { padding: 28px 20px !important; box-shadow: 5px 5px 0 var(--navy) !important; }
  .form-nav { flex-direction: column-reverse; gap: 12px; }
  .form-nav .btn, .form-nav input[type="submit"] { width: 100%; }
  .stepper__label { display: none; }
}

/* ---------- Ajustes finaux flotte : cadrage identique à la maquette ---------- */
.e-con .vehicle-card__media { height: 200px; }
.e-con .vehicle-card__media img { height: 200px; object-position: 50% 25%; }

/* ---------- Vidéo du hero : ne doit pas déborder de sa colonne ---------- */
.e-con .hero__media .elementor-wrapper,
.e-con .hero__media .e-hosted-video,
.e-con .elementor-widget-video { max-width: 100%; overflow: hidden; }

/* ============================================================
   MOBILE — les sections Elementor gardaient la marge du bureau
   (48 px de chaque côté), ce qui écrasait le contenu sur 375 px.
   ============================================================ */

@media (max-width: 780px) {
  .e-con.section, .e-con.about, .e-con.cta,
  .e-con.stats, .e-con.history, .e-con.trailers, .e-con.legal,
  .elementor > .e-con:not(.hero):not(.marquee) {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .e-con.marquee { padding: 12px 14px !important; font-size: 12px; }
  .e-con .section__head { margin-bottom: 30px; }

  /* Titres : la maquette descend aussi en taille sur mobile */
  .e-con.hero .hero__title { font-size: 34px !important; }
  .e-con .section__head h2, .e-con.about h2, .e-con.cta h2 { font-size: 26px !important; }
  .e-con .script { font-size: 22px !important; }

  /* Le formulaire occupe toute la largeur utile */
  .devis-wrap .form-card { padding: 24px 16px !important; }
}

/* Le fil d'étapes est un <ol> : on retire seulement la puce « 1. » du <li>
   décoratif. Le reste (tailles, barre, espacements) vient de la maquette. */
.devis-wrap .stepper,
.devis-wrap .stepper li { list-style: none; }
.devis-wrap .stepper { padding-left: 0; }

/* ============================================================
   HERO — trois couches en biais (comme la maquette)
   Les couches sont absolues avec un clip-path en diagonale ; la
   vidéo remplit la troisième. Elementor les rendrait en flex,
   d'où ces règles.
   ============================================================ */

.e-con .hero__media { position: relative; display: block; padding: 0; min-height: 460px; }

.e-con .hero__layer {
  position: absolute; top: 0; bottom: 0; right: 0; left: 0;
  padding: 0; margin: 0; width: auto; max-width: none;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.e-con .hero__layer--1 { left: 0;    background: var(--pastel); }
.e-con .hero__layer--2 { left: 16px; background: var(--pastel-light); }
.e-con .hero__layer--media { left: 42px; overflow: hidden; }

/* La vidéo occupe toute la couche, sans lecteur ni marge d'Elementor. */
.e-con .hero__layer--media .elementor-widget-video,
.e-con .hero__layer--media .elementor-wrapper,
.e-con .hero__layer--media .e-hosted-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; padding: 0; margin: 0;
}
.e-con .hero__layer--media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.e-con .hero__layer--media .elementor-custom-embed-image-overlay {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
/* Pas de bouton « lecture » sur une vidéo d'ambiance */
.e-con .hero__layer--media .elementor-custom-embed-play { display: none; }

.e-con .hero__layer--media .shade {
  position: absolute; inset: 0; z-index: 2; padding: 0;
  background: linear-gradient(90deg, rgba(95,135,190,.35) 0%, rgba(95,135,190,0) 40%);
}

@media (max-width: 900px) {
  .e-con .hero__media { min-height: 280px; }
  .e-con .hero__layer { clip-path: none; }
  .e-con .hero__layer--2 { left: 10px; }
  .e-con .hero__layer--media { left: 20px; }
}

/* Les boutons du hero ne doivent pas s'étirer : sans ceci, le soulignement
   de « Nos services autocar » court sur toute la largeur restante. */
.elementor .hero__actions > .elementor-widget { flex: 0 0 auto !important; width: auto !important; max-width: none; }
.elementor .hero__actions .link-underline { display: inline-block; }

/* ============================================================
   REMISE À ZÉRO DES ESPACEMENTS D'ELEMENTOR
   Chaque conteneur Elementor applique par défaut un padding de
   10px et un gap de 20px via des variables CSS. Cumulés sur des
   sections imbriquées, ils gonflaient les pages (la section
   « stats » passait de 111 px à 513 px). On les remet à zéro :
   les marges viennent de la maquette, via les classes.
   ============================================================ */

.elementor .e-con,
.elementor .e-con-inner {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --gap: 0px;
}

/* Les widgets ne rajoutent ni marge ni largeur imposée. */
.elementor .e-con > .elementor-widget { margin-block: 0; }
.elementor .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Le contenu des sections reste centré sur la largeur de la maquette. */
.elementor .e-con.section > *,
.elementor .e-con.about > *,
.elementor .e-con.cta > *,
.elementor .e-con.stats > *,
.elementor .e-con.history > *,
.elementor .e-con.trailers > * { max-width: 100%; }

/* ============================================================
   IMAGES : LE WIDGET NE DOIT PAS S'INTERPOSER
   La maquette place ses images en position:absolute dans un
   conteneur à hauteur fixe (.team-card__media, .gallery__item,
   .vehicle-card__media…). Le widget d'Elementor s'intercale et
   sert d'ancrage : l'image retombe alors à 0 de haut.
   En le rendant « display:contents », l'<img> redevient enfant
   direct du conteneur et le CSS d'origine s'applique tel quel.
   ============================================================ */

.elementor .e-con .elementor-widget-image { display: contents; }

/* Le lien éventuel autour de l'image ne doit pas créer de boîte non plus. */
.elementor .e-con .elementor-widget-image > a,
.elementor .e-con .elementor-widget-image figure { display: contents; }

/* Repli : une image sans règle dédiée reste fluide.
   Pas de « height:auto » ici : cela écrasait les hauteurs fixes
   de la maquette (.history__media img passait de 440 à 1407 px). */
.elementor .e-con img { max-width: 100%; }


/* Elementor impose une largeur aux conteneurs enfants, ce qui casse les
   colonnes des grilles de la maquette : on la laisse au CSS d'origine. */
/* On neutralise la largeur imposée par Elementor, mais SANS toucher au
   max-width : la maquette s'en sert pour border les textes longs
   (.legal__inner à 880px passait à 1169px). */
:where(.elementor .e-con > .e-con) { width: auto; }
:where(.elementor [class*="grid"] > *, .elementor .services > *, .elementor .fleet > *,
.elementor .team > *, .elementor .gallery > *, .elementor .stats > *) { min-width: 0; }

/* ---------- Formulaire de devis : caler sur la maquette ---------- */
.devis-wrap .stepper { display: flex; align-items: center; margin-bottom: 36px; padding-left: 0; }
.devis-wrap .stepper__step { display: flex; flex-direction: row; align-items: center; gap: 12px; flex: 1; }
.devis-wrap .stepper__step--right { justify-content: flex-end; }
.devis-wrap .stepper__num { flex: 0 0 44px; width: 44px; height: 44px; }
.devis-wrap .stepper__label { flex: 0 1 auto; }
.devis-wrap .stepper__bar { flex: 0 0 80px; height: 4px; margin: 0 18px; }

/* Les libellés occupent toute la largeur du champ (comme dans la maquette). */
.devis-wrap .form-field { align-items: stretch; }
.devis-wrap .form-field label { display: block; width: 100%; }
.devis-wrap .wpcf7-form-control-wrap { display: block; width: 100%; }

/* ---------- Pages légales : bloc de texte centré ----------
   La maquette centre le bloc avec « display:flex; justify-content:center »
   en direction ligne. Elementor met les conteneurs en colonne : le
   justify-content centrait alors verticalement et le bloc restait collé
   à gauche. On rétablit la direction et on centre aussi par la marge. */
.elementor .legal { flex-direction: row; justify-content: center; align-items: flex-start; }
.elementor .legal__inner { margin-inline: auto; }

/* MARGES DES SECTIONS — genere. */

.elementor .e-con.tag, .elementor .tag { padding: 6px 16px; }
.elementor .e-con.tag--lg, .elementor .tag--lg { padding: 8px 16px; }
.elementor .e-con.btn--primary, .elementor .btn--primary { padding: 18px 34px; }
.elementor .e-con.btn--pale, .elementor .btn--pale { padding: 18px 36px; }
.elementor .e-con.btn--navy, .elementor .btn--navy { padding: 15px 28px; }
.elementor .e-con.topbar, .elementor .topbar { padding: 9px 48px; }
.elementor .e-con.nav, .elementor .nav { padding: 18px 48px; }
.elementor .e-con.nav__badge, .elementor .nav__badge { padding: 4px 10px; }
.elementor .e-con.nav__cta, .elementor .nav__cta { padding: 12px 24px; }
.elementor .e-con.hero__content, .elementor .hero__content { padding: 90px 24px 90px 48px; }
.elementor .e-con.marquee, .elementor .marquee { padding: 14px 48px; }
.elementor .e-con.section, .elementor .section { padding: 90px 48px; }
.elementor .e-con.service-card, .elementor .service-card { padding: 30px 26px; }
.elementor .e-con.vehicle-card__seats, .elementor .vehicle-card__seats { padding: 5px 12px; }
.elementor .e-con.vehicle-card__norm, .elementor .vehicle-card__norm { padding: 5px 10px; }
.elementor .e-con.vehicle-card__body, .elementor .vehicle-card__body { padding: 20px 22px 22px 22px; }
.elementor .e-con.stats, .elementor .stats { padding: 26px 48px; }
.elementor .e-con.history, .elementor .history { padding: 90px 48px; }
.elementor .e-con.history__caption, .elementor .history__caption { padding: 2px 16px; }
.elementor .e-con.team-card__body, .elementor .team-card__body { padding: 16px 18px 20px 18px; }
.elementor .e-con.about, .elementor .about { padding: 90px 48px; }
.elementor .e-con.about__caption, .elementor .about__caption { padding: 2px 16px; }
.elementor .e-con.trailers, .elementor .trailers { padding: 90px 48px; }
.elementor .e-con.cta, .elementor .cta { padding: 90px 48px; }
.elementor .e-con.quote, .elementor .quote { padding: 80px 48px; }
.elementor .e-con.form-card, .elementor .form-card { padding: 44px 48px; }
.elementor .e-con.form-card__heading, .elementor .form-card__heading { padding: 5px 14px; }
.elementor .e-con.form-checks, .elementor .form-checks { padding: 12px 0; }
.elementor .e-con.form-consent, .elementor .form-consent { padding: 20px 22px; }
.elementor .e-con.btn--next, .elementor .btn--next { padding: 16px 36px; }
.elementor .e-con.btn--back, .elementor .btn--back { padding: 14px 30px; }
.elementor .e-con.form-done, .elementor .form-done { padding: 60px 48px; }
.elementor .e-con.legal, .elementor .legal { padding: 70px 48px; }
.elementor .e-con.legal__inner, .elementor .legal__inner { padding: 52px 56px; }
.elementor .e-con.footer, .elementor .footer { padding: 60px 48px 28px 48px; }
.elementor .e-con.cookie-banner__inner, .elementor .cookie-banner__inner { padding: 20px 24px; }
.elementor .e-con.cookie-panel, .elementor .cookie-panel { padding: 12px 16px; }
.elementor .e-con.cookie-btn, .elementor .cookie-btn { padding: 12px 22px; }
.elementor .e-con.captcha-box, .elementor .captcha-box { padding: 16px 18px; }
.elementor .e-con.fmt, .elementor .fmt { padding: 70px 48px; }
.elementor .e-con.fmt__box, .elementor .fmt__box { padding: 38px 44px; }
@media (max-width: 800px){
  .elementor .e-con.topbar, .elementor .topbar { padding: 6px 14px; }
  .elementor .e-con.nav, .elementor .nav { padding: 12px 16px; }
  .elementor .e-con.hero__content, .elementor .hero__content { padding: 44px 20px; }
  .elementor .e-con.marquee, .elementor .marquee { padding: 12px 20px; }
  .elementor .e-con.stats, .elementor .stats { padding: 26px 20px; }
  .elementor .e-con.form-card, .elementor .form-card { padding: 28px 20px; }
  .elementor .e-con.legal, .elementor .legal { padding: 40px 16px; }
  .elementor .e-con.legal__inner, .elementor .legal__inner { padding: 28px 20px; }
  .elementor .e-con.footer, .elementor .footer { padding: 44px 20px 24px 20px; }
}
@media (max-width: 800px){
  .elementor .e-con.cookie-btn, .elementor .cookie-btn { padding: 12px 10px; }
}
@media (max-width: 800px){
  .elementor .e-con.fmt, .elementor .fmt { padding: 44px 20px; }
  .elementor .e-con.fmt__box, .elementor .fmt__box { padding: 26px 22px; }
}

/* MAQUETTE PRIORITAIRE DANS ELEMENTOR — genere, ne pas editer. */
.elementor .script { font-family: 'Caveat', cursive; color: var(--blue-mid); transform: rotate(-1deg); }
.elementor .tag { display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  text-transform: uppercase;
  transform: rotate(-2deg); }
.elementor .tag--blue { background: var(--blue-mid); color: var(--white); }
.elementor .tag--pale { background: var(--pale); color: var(--navy); transform: rotate(1.5deg); }
.elementor .tag--lg { font-size: 20px; padding: 8px 16px; }
.elementor .btn { display: inline-block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: none; }
.elementor .btn--primary { background: var(--blue-mid); color: var(--white);
  padding: 18px 34px; font-size: 20px;
  box-shadow: 5px 5px 0 var(--pale);
  transform: rotate(-1deg); }
.elementor .btn--primary:hover { background: var(--blue-hover); color: var(--white); }
.elementor .btn--pale { background: var(--pale); color: var(--navy);
  padding: 18px 36px; font-size: 20px;
  box-shadow: 5px 5px 0 var(--navy); }
.elementor .btn--pale:hover { background: var(--white); color: var(--navy); }
.elementor .btn--navy { background: var(--navy); color: var(--white);
  padding: 15px 28px; font-size: 17px;
  box-shadow: 5px 5px 0 var(--pale); }
.elementor .btn--navy:hover { background: var(--blue-mid); color: var(--white); }
.elementor .link-underline { color: var(--white); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 3px solid var(--pale); padding-bottom: 3px; }
.elementor .link-underline--navy { color: var(--navy); font-size: 14px; border-bottom-width: 3px; }
.elementor .hero { position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 60%, var(--sky) 100%);
  color: var(--white);
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.elementor .hero--home { grid-template-columns: 1.3fr 1fr; min-height: 680px; }
.elementor .hero__content { position: relative; z-index: 2;
  padding: 90px 24px 90px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.elementor .hero__tags { display: flex; align-items: center; gap: 12px; }
.elementor .hero__title { font-size: 62px; line-height: 0.98; letter-spacing: 0.01em; }
.elementor .hero--home .hero__title { font-size: 74px; }
.elementor .hero__title .accent { color: var(--pale); }
.elementor .hero__script { font-size: 34px; line-height: 1.15; margin: 0; color: var(--white); }
.elementor .hero__text { font-size: 17px; line-height: 1.65; margin: 0; font-weight: 500; color: #DCE6F5; text-wrap: pretty; }
.elementor .hero__actions { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.elementor .hero__media { position: relative; min-height: 420px; }
.elementor .hero__layer { position: absolute; top: 0; bottom: 0; right: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.elementor .hero__layer--1 { left: 0; background: var(--pastel); }
.elementor .hero__layer--2 { left: 16px; background: var(--pastel-light); }
.elementor .hero__layer--media { left: 42px; overflow: hidden; }
.elementor .hero__layer--media img, .elementor .hero__layer--media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.elementor .hero__layer--media .shade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(95, 135, 190, 0.35) 0%, rgba(95, 135, 190, 0) 40%); }
.elementor .hero__sticker { position: absolute; right: 36px; bottom: 40px; z-index: 4;
  background: var(--blue-mid); color: var(--white);
  border: 4px solid var(--white); border-radius: 999px;
  width: 132px; height: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(6deg);
  box-shadow: 0 8px 20px rgba(61, 92, 136, 0.45); }
.elementor .hero__sticker strong { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 34px; line-height: 1; }
.elementor .hero__sticker span { font-size: 12px; font-weight: 800; text-transform: uppercase; text-align: center; line-height: 1.2; }
.elementor .marquee { background: var(--pale); color: var(--navy);
  font-family: 'Anton', sans-serif; font-size: 18px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; justify-content: center; gap: 40px; padding: 14px 48px; }
.elementor .section { padding: 90px 48px; background: var(--bg); }
.elementor .section--navy { background: var(--navy); color: var(--white); }
.elementor .section__head { text-align: center; margin-bottom: 48px; }
.elementor .section__head .tag { margin-bottom: 16px; }
.elementor .section__head h2 { font-size: 52px; line-height: 1; color: var(--navy); }
.elementor .section--navy .section__head h2 { color: var(--white); }
.elementor .section__head h2 .accent { color: var(--blue-mid); }
.elementor .section--navy .section__head h2 .accent { color: var(--pale); }
.elementor .section__head .script { font-size: 30px; margin: 12px 0 0 0; display: block; }
.elementor .section--navy .section__head .script { color: var(--pale); }
.elementor .section__row { display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 44px; gap: 32px; }
.elementor .section__row .tag { margin-bottom: 16px; }
.elementor .section__row h2 { font-size: 52px; line-height: 1; }
.elementor .services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.elementor .service-card { background: var(--white); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 6px 6px 0 var(--navy); }
.elementor .service-card__num { font-family: 'Anton', sans-serif; font-size: 30px; color: var(--blue-mid); }
.elementor .service-card__title { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--navy); text-transform: uppercase; line-height: 1.1; }
.elementor .service-card__desc { font-size: 14.5px; color: var(--text-soft); line-height: 1.55; font-weight: 500; }
.elementor .fleet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.elementor .vehicle-card { background: var(--white); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: 7px 7px 0 rgba(95, 135, 190, 0.9); }
.elementor .section--navy .vehicle-card { box-shadow: 7px 7px 0 rgba(61, 92, 136, 0.5); }
.elementor .vehicle-card__media { height: 200px; position: relative; overflow: hidden;
  border-bottom: 5px solid var(--pale); }
.elementor .vehicle-card__media--blue { border-bottom-color: var(--blue-mid); }
.elementor .vehicle-card__media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%; }
.elementor .vehicle-card__seats { position: absolute; top: 12px; left: 12px;
  background: var(--blue-mid); color: var(--white);
  font-family: 'Anton', sans-serif; font-size: 15px;
  letter-spacing: 0.05em; padding: 5px 12px; }
.elementor .vehicle-card__norm { position: absolute; top: 12px; right: 12px;
  background: var(--navy); color: var(--pale);
  font-family: 'Anton', sans-serif; font-size: 13px;
  letter-spacing: 0.05em; padding: 5px 10px; }
.elementor .vehicle-card__body { padding: 20px 22px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.elementor .vehicle-card__driver { font-family: 'Caveat', cursive; font-size: 24px; color: var(--blue-mid); line-height: 1; }
.elementor .vehicle-card__model { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--navy); text-transform: uppercase; line-height: 1.1; }
.elementor .vehicle-card__desc { font-size: 14px; color: var(--text-soft); line-height: 1.55; font-weight: 500; flex: 1; }
.elementor .vehicle-card__link { color: var(--navy); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 3px solid var(--pale); padding-bottom: 2px;
  align-self: flex-start; margin-top: 6px; }
.elementor .stats { background: var(--pale); color: var(--navy);
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 26px 48px; text-align: center; }
.elementor .stats__item { display: flex; flex-direction: column; gap: 4px; }
.elementor .stats__value { font-family: 'Anton', sans-serif; font-size: 40px; line-height: 1; }
.elementor .stats__label { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.elementor .history { padding: 90px 48px; background: var(--bg);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.elementor .history__media { position: sticky; top: 130px; }
.elementor .history__media img { width: 100%; height: 440px; object-fit: cover;
  border: 6px solid var(--white);
  box-shadow: 10px 10px 0 var(--navy);
  transform: rotate(-1.5deg); }
.elementor .history__caption { position: absolute; bottom: -18px; left: 24px;
  font-family: 'Caveat', cursive; font-size: 30px; color: var(--blue-mid);
  background: var(--white); padding: 2px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 12px rgba(61, 92, 136, 0.2); }
.elementor .history__content { display: flex; flex-direction: column; gap: 22px; }
.elementor .history__content .tag { align-self: flex-start; transform: rotate(-1.5deg); }
.elementor .history__content h2 { font-size: 46px; line-height: 1.02; color: var(--navy); }
.elementor .history__content > p { font-size: 16.5px; line-height: 1.65; color: var(--text-soft); margin: 0; font-weight: 500; text-wrap: pretty; }
.elementor .timeline { display: flex; flex-direction: column; margin-top: 8px; }
.elementor .timeline__row { display: grid; grid-template-columns: 110px 26px 1fr; gap: 0 18px; align-items: start; }
.elementor .timeline__year { font-family: 'Anton', sans-serif; font-size: 26px; color: var(--blue-mid); text-align: right; line-height: 1.1; }
.elementor .timeline__spine { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.elementor .timeline__dot { width: 16px; height: 16px; background: var(--pale);
  border: 3px solid var(--navy); border-radius: 999px;
  flex-shrink: 0; margin-top: 5px; }
.elementor .timeline__line { width: 3px; flex: 1; background: var(--border-soft); margin-top: 4px; }
.elementor .timeline__body { padding-bottom: 28px; }
.elementor .timeline__title { font-family: 'Anton', sans-serif; font-size: 19px; color: var(--navy); text-transform: uppercase; margin-bottom: 4px; }
.elementor .timeline__desc { font-size: 15px; color: var(--text-soft); line-height: 1.55; font-weight: 500; }
.elementor .team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.elementor .team-card { background: var(--white); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: 7px 7px 0 rgba(61, 92, 136, 0.5); }
.elementor .team-card__media { height: 220px; position: relative; overflow: hidden; border-bottom: 5px solid var(--blue-mid); }
.elementor .team-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.elementor .team-card__body { padding: 16px 18px 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.elementor .team-card__name { font-family: 'Anton', sans-serif; font-size: 19px; color: var(--navy); text-transform: uppercase; line-height: 1.1; }
.elementor .team-card__role { font-size: 13.5px; color: var(--text-soft); line-height: 1.4; font-weight: 600; }
.elementor .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.elementor .gallery--2col { grid-template-columns: 1fr 1fr; gap: 20px; }
.elementor .gallery__item { height: 220px; overflow: hidden; position: relative;
  border: 5px solid var(--white);
  box-shadow: 6px 6px 0 var(--navy); }
.elementor .gallery--2col .gallery__item { height: 190px; }
.elementor .gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.elementor .tilt-1 { transform: rotate(-1deg); }
.elementor .tilt-2 { transform: rotate(0.8deg); }
.elementor .tilt-3 { transform: rotate(-0.6deg); }
.elementor .tilt-4 { transform: rotate(1deg); }
.elementor .tilt-5 { transform: rotate(0.7deg); }
.elementor .tilt-6 { transform: rotate(-0.9deg); }
.elementor .tilt-7 { transform: rotate(0.6deg); }
.elementor .tilt-8 { transform: rotate(-0.8deg); }
.elementor .about { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px;
  padding: 90px 48px; align-items: center; background: var(--bg); }
.elementor .about__content { display: flex; flex-direction: column; gap: 18px; }
.elementor .about__content .tag { align-self: flex-start; transform: rotate(-1.5deg); }
.elementor .about__content h2 { font-size: 50px; line-height: 1.02; color: var(--navy); }
.elementor .about__content p { font-size: 17px; line-height: 1.65; color: var(--text-soft); margin: 0; font-weight: 500; text-wrap: pretty; }
.elementor .about__content .btn { align-self: flex-start; }
.elementor .about__media { position: relative; }
.elementor .about__media img { width: 100%; height: 400px; object-fit: cover;
  border: 6px solid var(--white);
  box-shadow: 10px 10px 0 var(--navy);
  transform: rotate(1.5deg); }
.elementor .about__caption { position: absolute; bottom: -18px; left: 24px;
  font-family: 'Caveat', cursive; font-size: 30px; color: var(--blue-mid);
  background: var(--white); padding: 2px 16px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 12px rgba(61, 92, 136, 0.2); }
.elementor .trailers { padding: 90px 48px; background: var(--bg);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.elementor .trailers__content { display: flex; flex-direction: column; gap: 18px; }
.elementor .trailers__content .tag { align-self: flex-start; transform: rotate(-1.5deg); }
.elementor .trailers__content h2 { font-size: 46px; line-height: 1.02; color: var(--navy); }
.elementor .trailers__content h2 .accent { color: var(--blue-mid); }
.elementor .trailers__content p { font-size: 16.5px; line-height: 1.65; color: var(--text-soft); margin: 0; font-weight: 500; text-wrap: pretty; }
.elementor .trailers__content .btn { align-self: flex-start; }
.elementor .cta { padding: 90px 48px;
  background: linear-gradient(160deg, var(--blue-mid) 0%, var(--blue-hover) 100%);
  color: var(--white); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px; }
.elementor .cta__mascotte { height: 90px; width: auto; transform: rotate(-3deg); filter: drop-shadow(0 6px 12px rgba(61, 92, 136, 0.35)); }
.elementor .cta h2 { font-size: 56px; line-height: 1; max-width: 21ch; text-wrap: balance; }
.elementor .cta .script { font-size: 32px; color: var(--white); }
.elementor .cta__actions { display: flex; gap: 20px; align-items: center; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.elementor .cta__phone { font-size: 17px; font-weight: 700; }
.elementor .cta__phone strong { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.03em; }
.elementor .quote { padding: 80px 48px; background: var(--bg); display: flex; justify-content: center; }
.elementor .quote__inner { width: 860px; max-width: 100%; }
.elementor .stepper { display: flex; align-items: center; margin-bottom: 36px; }
.elementor .stepper__step { display: flex; align-items: center; gap: 12px; flex: 1; }
.elementor .stepper__step--right { justify-content: flex-end; }
.elementor .stepper__num { width: 44px; height: 44px; border-radius: 999px;
  background: var(--white); color: var(--navy);
  font-family: 'Anton', sans-serif; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--navy); flex-shrink: 0; }
.elementor .stepper__step.is-active .stepper__num { background: var(--pale); }
.elementor .stepper__label { font-family: 'Anton', sans-serif; font-size: 17px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.03em; }
.elementor .stepper__bar { height: 4px; flex: 0 0 80px; background: var(--border-soft); margin: 0 16px; }
.elementor .stepper__bar.is-active { background: var(--pale); }
.elementor .form-card { background: var(--white);
  box-shadow: 8px 8px 0 var(--navy);
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 26px; }
.elementor .form-card__heading { display: inline-block; align-self: flex-start;
  background: var(--navy); color: var(--pale);
  font-family: 'Anton', sans-serif; font-size: 16px;
  letter-spacing: 0.06em; padding: 5px 14px;
  transform: rotate(-1.5deg); }
.elementor .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.elementor .form-field { display: flex; flex-direction: column; gap: 7px; }
.elementor .form-field--full { grid-column: 1 / -1; }
.elementor .form-field label { font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--navy); }
.elementor .form-field .req { color: var(--blue-mid); }
.elementor .form-field input, .elementor .form-field select, .elementor .form-field textarea { font-family: 'Archivo', sans-serif;
  padding: 13px 14px;
  border: 2px solid var(--border-soft);
  font-size: 15px; font-weight: 500;
  background: var(--white); color: var(--ink);
  color-scheme: light; }
.elementor .form-field textarea { resize: vertical; }
.elementor .form-field input:focus, .elementor .form-field select:focus, .elementor .form-field textarea:focus { outline: 3px solid var(--pale); outline-offset: 0;
  border-color: var(--navy); }
.elementor .form-checks { display: flex; gap: 22px; align-items: center; padding: 12px 0; }
.elementor .form-checks label, .elementor .form-consent label { display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer; }
.elementor .form-checks input[type="checkbox"], .elementor .form-consent input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--blue-mid); }
.elementor .form-consent { display: flex; flex-direction: column; gap: 12px;
  background: var(--bg); padding: 20px 22px;
  border-left: 5px solid var(--pale); }
.elementor .form-consent label { align-items: flex-start; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-soft); }
.elementor .form-consent input[type="checkbox"] { flex-shrink: 0; margin-top: 1px; }
.elementor .form-nav { display: flex; justify-content: space-between; margin-top: 8px; }
.elementor .form-nav--end { justify-content: flex-end; }
.elementor .btn--next { background: var(--blue-mid); color: var(--white);
  padding: 16px 36px; font-size: 19px;
  box-shadow: 5px 5px 0 var(--pale); }
.elementor .btn--next:hover { background: var(--blue-hover); }
.elementor .btn--back { background: var(--white); color: var(--navy);
  border: 3px solid var(--navy);
  padding: 14px 30px; font-size: 17px; }
.elementor .btn--back:hover { background: var(--bg); }
.elementor .form-done { text-align: center; align-items: center; padding: 60px 48px; }
.elementor .form-done h2 { font-size: 42px; line-height: 1; color: var(--navy); }
.elementor .form-done h2 .accent { color: var(--blue-mid); }
.elementor .form-done .script { font-size: 30px; }
.elementor .form-done p { font-size: 15px; color: var(--text-soft); margin: 0; max-width: 50ch; line-height: 1.6; font-weight: 500; }
.elementor .form-done img { height: 90px; width: auto; transform: rotate(-3deg); }
.elementor .is-hidden { display: none !important; }
.elementor .hero--compact { grid-template-columns: 1fr; }
.elementor .hero--compact .hero__content { padding: 60px 48px; max-width: 900px; }
.elementor .legal { padding: 70px 48px; background: var(--bg); display: flex; justify-content: center; }
.elementor .legal__inner { width: 880px; max-width: 100%;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--navy);
  padding: 52px 56px; }
.elementor .legal__inner h2 { font-size: 24px; color: var(--navy);
  margin: 34px 0 10px 0; }
.elementor .legal__inner h2:first-child { margin-top: 0; }
.elementor .legal__inner p, .elementor .legal__inner li { font-size: 15px; line-height: 1.7;
  color: var(--text-soft); font-weight: 500;
  margin: 8px 0; }
.elementor .legal__inner ul { margin: 10px 0; padding-left: 22px; }
.elementor .legal__updated { margin-top: 36px !important;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px !important;
  color: var(--footer-muted) !important; }
.elementor .captcha-box { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: var(--bg); padding: 16px 18px;
  border-left: 5px solid var(--blue-mid); }
.elementor .captcha-box .form-field { flex: 0 0 220px; }
.elementor .captcha-box__question { font-family: 'Anton', sans-serif; font-size: 20px; color: var(--navy); letter-spacing: 0.04em; padding-bottom: 12px; }
.elementor .captcha-box__hint { font-size: 12.5px; color: var(--footer-muted); font-weight: 500; width: 100%; }
.elementor .fmt { padding: 70px 48px;
  background: var(--navy);
  display: flex;
  justify-content: center; }
.elementor .fmt__box { width: 100%;
  max-width: 1000px;
  background: var(--white);
  box-shadow: 10px 10px 0 var(--blue-mid);
  border: 3px solid var(--pale);
  padding: 38px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 44px; }
.elementor .fmt__content { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.elementor .fmt__content .tag { transform: rotate(-1.5deg); }
.elementor .fmt__content h2 { font-size: 34px; line-height: 1.06; color: var(--navy); }
.elementor .fmt__content h2 .accent { color: var(--blue-mid); }
.elementor .fmt__content p { font-size: 16px; line-height: 1.65; color: var(--text-soft);
  margin: 0; font-weight: 500; text-wrap: pretty; }
.elementor .fmt__qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.elementor .fmt__qr img { width: 148px; height: 148px; display: block;
  border: 3px solid var(--border-soft); border-radius: 12px;
  background: var(--white); padding: 8px; }
.elementor .fmt__qr-legende { font-family: 'Anton', sans-serif; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-mid); }

@media (max-width: 800px) {
  .elementor .hero, .elementor .hero--home { grid-template-columns: 1fr; min-height: 0; }
  .elementor .hero__content { padding: 44px 20px; }
  .elementor .hero__title, .elementor .hero--home .hero__title { font-size: 38px; }
  .elementor .hero__script { font-size: 24px; }
  .elementor .hero__media { min-height: 240px; }
  .elementor .hero__sticker { transform: scale(0.75) rotate(6deg); right: 12px; bottom: 12px; }
  .elementor .marquee { flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px; font-size: 14px; }
  .elementor .section, .elementor .about, .elementor .history, .elementor .trailers, .elementor .cta, .elementor .quote { padding: 52px 20px; }
  .elementor .section__head h2, .elementor .section__row h2, .elementor .about__content h2, .elementor .history__content h2, .elementor .trailers__content h2, .elementor .cta h2 { font-size: 28px; }
  .elementor .section__head .script { font-size: 24px; }
  .elementor .section__row { flex-direction: column; align-items: flex-start; }
  .elementor .services { grid-template-columns: 1fr 1fr; gap: 16px; }
  .elementor .fleet, .elementor .team, .elementor .gallery { grid-template-columns: 1fr; }
  .elementor .gallery { grid-template-columns: 1fr 1fr; }
  .elementor .about, .elementor .history, .elementor .trailers { grid-template-columns: 1fr; gap: 40px; }
  .elementor .history__media { position: static; }
  .elementor .history__media img { height: 260px; }
  .elementor .about__media img { height: 260px; }
  .elementor .stats { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px; }
  .elementor .form-grid { grid-template-columns: 1fr; }
  .elementor .form-card { padding: 28px 20px; }
  .elementor .stepper__bar { flex: 0 0 16px; margin: 0 8px; }
  .elementor .stepper__label { font-size: 13px; }
  .elementor .legal { padding: 40px 16px; }
  .elementor .legal__inner { padding: 28px 20px; }
}
@media (max-width: 800px) {
  .elementor .fmt { padding: 44px 20px; }
  .elementor .fmt__box { grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 22px;
    box-shadow: 6px 6px 0 var(--blue-mid);
    text-align: center; }
  .elementor .fmt__content { align-items: center; }
  .elementor .fmt__content h2 { font-size: 26px; }
  .elementor .fmt__content .btn { align-self: stretch; text-align: center; }
  .elementor .fmt__qr { order: -1; }
  .elementor .fmt__qr img { width: 132px; height: 132px; }
}

/* ============================================================
   CLASSES PORTÉES PAR UNE IMAGE DANS LA MAQUETTE
   Dans le HTML d'origine ces classes sont sur la balise <img> ;
   dans Elementor elles atterrissent sur le conteneur du widget.
   On rejoue donc la règle sur l'image elle-même.
   ============================================================ */

.elementor .cta__mascotte img, .elementor .cta__mascotte video, .elementor img.cta__mascotte { height: 90px; width: auto; transform: rotate(-3deg); filter: drop-shadow(0 6px 12px rgba(61, 92, 136, 0.35)); }
/* Styles inline de la maquette, transposes en classes. */
.elementor .fmt-i1 { object-position: center 25% !important; }
.elementor .fmt-i1 img { object-position: center 25% !important; }
.elementor .fmt-i2 { object-position: center 15% !important; }
.elementor .fmt-i2 img { object-position: center 15% !important; }
.elementor .fmt-i3 { font-size: 58px !important; }
.elementor .fmt-i3 .elementor-heading-title, .elementor .fmt-i3 p, .elementor .fmt-i3 a { font-size: 58px !important; }
.elementor .fmt-i4 { padding-top: 70px !important; padding-bottom: 70px !important; }
.elementor .fmt-i5 { min-height: 340px !important; }
.elementor .fmt-i6 { font-size: 48px !important; }
.elementor .fmt-i6 .elementor-heading-title, .elementor .fmt-i6 p, .elementor .fmt-i6 a { font-size: 48px !important; }