/*! Multiauto theme — main.css (rev. 3, branchement final des images)
 *  Header rouge unique, footer noir, CTA bleu-gris en capsule centrée.
 */

/* ===== 1. Tokens ===== */
:root {
    --color-red:        #c81e28;
    --color-red-deep:   #a3171f;
    --color-red-darker: #831318;
    --color-yellow:     #f1de43;
    --color-yellow-2:   #f7c81f;
    --color-bluegrey:   #36454e;
    --color-grey-light: #f5f5f5;
    --color-grey-2:     #e6e6e6;
    --color-grey-text:  #5a6772;
    --color-text:       #2b3640;
    --color-black:      #181818;
    --color-white:      #ffffff;
    --color-green:      #1fae5a;

    --ff-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;

    --fs-h1: 52px;  --fs-h2: 35px;  --fs-h3: 28px;
    --fs-h4: 22px;  --fs-h5: 18px;  --fs-h6: 16px;
    --fs-body: 16px; --fs-small: 14px;

    --container: 1200px;
    --gutter: 24px;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow:    0 14px 36px rgba(0, 0, 0, 0.12);
    --shadow-cta: 0 18px 40px rgba(54, 69, 78, 0.3);

    --transition: 200ms ease;
}

/* ===== 2. Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-body); line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
}
body:not(.loaded){
	transition: none !important;
}
img, svg { max-width: 100%; height: auto; display: block; }
img.inline-center {margin-inline: auto}
a { color: var(--color-red); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-red-deep); }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
input, select, textarea {
    font: inherit; color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-grey-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px; width: 100%;
}
input[type="checkbox"]{
	width: 16px;
    height: 16px;
    flex-shrink: 0;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--color-red); outline-offset: 1px;
}
label:has(input[type="checkbox"]){
	display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--color-grey-text);margin-bottom:16px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em; line-height: 1.25;
    color: var(--color-text); font-weight: 600;
}
h1, .h1 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.28; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; }
h5, .h5 { font-size: var(--fs-h5); font-weight: 500; }
h6, .h6 { font-size: var(--fs-h6); font-weight: 500; }

.lead { font-size: 18px; color: var(--color-grey-text); }
.eyebrow {
    display: inline-block; font-weight: 600; font-size: 13px;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--color-red); margin-bottom: 12px;
}
.text-red { color: var(--color-red); }
.text-yellow { color: var(--color-yellow); }
.text-white { color: var(--color-white); }
.text-center{ text-align: center;}

.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link {
    position: absolute; top: -40px; left: 8px; padding: 8px 16px;
    background: var(--color-black); color: var(--color-white); z-index: 9999;
}
.skip-link:focus { top: 8px; }
.pb-0{padding-bottom: 0 !important;}
.pt-0{padding-top: 0 !important;}
/* ===== 3. Layout ===== */
.container, .container-fluid {
    width: 100%; margin: 0 auto;
    padding-left: var(--gutter); padding-right: var(--gutter);
}
.container {
	max-width: var(--container);
}

.section { padding: 80px 0; }
.section--center  { text-align: center; }
.section--lighter { background: var(--color-grey-light); }
.section--dark    { background: var(--color-black); color: var(--color-white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--yellow  { background: var(--color-yellow); }
.section--red     { background: var(--color-red); color: var(--color-white); }
.section--red h2, .section--red h3 { color: var(--color-white); }
.section__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section__head .h2 { margin-bottom: 16px; }
.section__head p { color: var(--color-grey-text); }

.section--red a:hover     { color: var(--color-white); }

.grid { display: grid; gap: 24px; }
.grid--cards     { grid-template-columns: repeat(3, 1fr); }
.grid--vehicles  { grid-template-columns: repeat(4, 1fr); }
.grid--utilities { grid-template-columns: repeat(3, 1fr); }
.grid--features  { grid-template-columns: repeat(4, 1fr); }
.grid--two       { grid-template-columns: repeat(2, 1fr) !important; }
.grid--agencies  { grid-template-columns: repeat(2, 1fr); }

.actions { display: flex; gap: 16px; flex-wrap: wrap; }
.actions--center { justify-content: center; margin-top: 50px;}

/* ===== 4. Boutons ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 15px; line-height: 1;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn--solid { background: var(--color-red); color: var(--color-white) !important; }
.btn--solid:hover { background: var(--color-red-deep); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--outline { background: transparent; color: var(--color-red); border-color: var(--color-red); }
.btn--outline:hover { background: var(--color-red); color: var(--color-white); }
.btn--white { background: var(--color-white); color: var(--color-red); }
.btn--white:hover { background: var(--color-yellow); color: var(--color-text); }
.btn--yellow { background: var(--color-yellow); color: var(--color-text); }
.btn--yellow:hover { background: #e6cf28; }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn--block { width: 100%; }

/* ===== 5. Header (top-bar rouge foncé + bandeau rouge) ===== */
.site-header { position: relative; top: 0; z-index: 50; }

.topbar {
    /* background: var(--color-red-deep); */
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    border-bottom: 1px solid;
    padding: 8px 0;
}
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px var(--gutter); gap: 16px;
}
.topbar__contact--left{
	color: var(--color-white);
}
.topbar__contact--right {
	color: var(--color-red);
    margin-left: auto;
}

[class^="topbar__contact"] > * {
    display: flex;
    gap: 8px;
    align-items: center;
}

[class^="topbar__contact"] a{
	color: inherit;
}

.topbar__lang {     
	display: flex;
    gap: 6px;
    align-items: center;
    padding: 0;
    margin: 0; }
.topbar__lang a {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 2px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
    transition: transform var(--transition);
}
.topbar__lang a:hover { transform: scale(1.08); }
.topbar__lang a[aria-current="true"] { box-shadow: 0 0 0 2px var(--color-yellow); }
.flag { width: 22px; height: 16px; object-fit: cover; display: block; }

.navbar { color: var(--color-white); }
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px var(--gutter); gap: 24px;
}

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__svg { width: 220px; height: 56px; flex-shrink: 0; }
.logo__svg svg { width: 100%; height: 100%; }
.logo--light .logo__svg { color: var(--color-white); }
.logo--dark .logo__svg { color: var(--color-text); }

.navbar__nav { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.navbar__nav .nav__list,
.navbar__nav ul.menu {
    display: flex; align-items: center; gap: 0; border-radius: .5rem;
}
.navbar__nav .nav__list > li,
.navbar__nav ul.menu > li {
    border-right: 1px solid rgba(255,255,255,0.3);
}
.navbar__nav .nav__list > li:last-child,
.navbar__nav ul > li:last-child { border-right: 0; }
.navbar__nav a {
    color: var(--color-white); font-weight: 600; font-size: 13px;
    letter-spacing: 0.6px; text-transform: uppercase;
    padding: 6px 16px; display: inline-block;
}
.navbar__nav a:hover,
.navbar__nav .current-menu-item > a { color: var(--color-yellow); }

.navbar__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; color: var(--color-white); }
.navbar__toggle span {
    width: 26px; height: 3px; background: var(--color-white); border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== 6. Hero (page d'accueil) ===== */
.hero {
    position: relative;
/*     background: var(--color-red); */
    color: var(--color-white);
    overflow: hidden;
}
.hero__inner {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: end;
    padding: 60px 0 0;
    position: relative; z-index: 2;
}
.hero__copy { padding-bottom: 50px; }
.hero__title {
    font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18;
    font-weight: 700; margin: 0; color: var(--color-white);
}

.hero__visual {
    position: relative; min-height: 380px;
    display: flex; align-items: flex-end; justify-content: flex-end;
}
.hero__character {
    position: relative;
    width: 78%; max-width: 460px;
    aspect-ratio: 1 / 1.3;
/*     background: var(--color-yellow); */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    margin-left: auto;
}
.hero__character img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain; object-position: bottom;
}
.hero__cars {
/*     position: absolute; left: 0; bottom: 12%;
    width: 70%; max-width: 360px; */
    display: flex; gap: 6px; align-items: flex-end;
    z-index: 2;
}
.hero__car-slot {
    flex: 1; aspect-ratio: 4 / 2.4;
    display: flex; align-items: flex-end; justify-content: center;
}
.hero__car-slot img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}

.hero__search {
    background: var(--color-grey-light);
    padding: 24px 0;
    margin-top: -1px;
}
.hero__search-title {
    font-weight: 700; font-size: 18px; color: var(--color-red);
    margin: 0 0 12px;
}
.search-bar {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.9fr auto;
    gap: 12px; align-items: end;
	color: var(--color-text);
}
.search-bar__field { display: flex; flex-direction: column; gap: 6px; }
.search-bar__field label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-bluegrey); font-weight: 700;
}
.search-bar__field input,
.search-bar__field select { background: var(--color-white); padding: 10px 12px; }
.search-bar__submit .btn { padding: 12px 22px; height: 44px; }

/* Hero des pages internes (titre seul, fond rouge ou jaune) */
.page-hero {
    color: var(--color-text);
    padding: 50px 0 60px;
}
.page-hero .container{
	display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
.page-hero__contact .container {
    grid-template-columns: 2fr 1fr;
}
.page-hero__eyebrow { color: var(--color-red); opacity: 0.85; font-size: 12px; margin-bottom: 8px; }
.page-hero__title { color: var(--color-text); margin: 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18; font-weight: 700; }
.page-hero__title strong{color: var(--color-red);}
.page-hero__sub { margin-top: 12px; font-size: 17px; }

.page-hero--yellow { background: var(--color-yellow); color: var(--color-text); }
.page-hero--yellow .page-hero__eyebrow { color: var(--color-text) !important; opacity: 1; }
.page-hero--yellow .page-hero__title { color: var(--color-text); }

/* Mascottes contextuelles (Contact) */
.page-hero__mascot,
.contact-mascot {
    display: flex; align-items: flex-end; justify-content: center;
    min-height: 240px;
}
.page-hero__mascot img,
.contact-mascot img {
    max-width: 100%; max-height: 360px; object-fit: contain;
}

.section-contact__assistance .container{
	display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
}


/* ===== 7. Vehicle card ===== */
.vehicle-card {
    background: var(--color-white);
    border: 1px solid var(--color-grey-2);
    border-radius: var(--radius);
    padding: 18px;
    display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}
.vehicle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.vehicle-card__header { margin-bottom: 8px; }
.vehicle-card__name { font-size: 18px; font-weight: 700; margin: 0; color: var(--color-text); }
.vehicle-card__category { font-size: 13px; color: var(--color-grey-text); margin: 0; }

.vehicle-card__media {
    margin: 8px 0 14px;
    aspect-ratio: 16/10;
    background: var(--color-grey-light);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.vehicle-card__media img,
.vehicle-card__media svg { width: 100%; height: 100%; object-fit: contain; }

.vehicle-card__specs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
    font-size: 12px; color: var(--color-text); margin-bottom: 14px; padding: 0;
}
.vehicle-card__specs li {
    display: flex; align-items: center; gap: 8px; line-height: 1.3;
}
.vehicle-card__spec-icon {
    width: 16px; height: 16px; flex-shrink: 0; object-fit: contain;
    /* Teinte les SVG mono en rouge marque */
    filter: brightness(0) saturate(100%) invert(20%) sepia(85%) saturate(2200%) hue-rotate(346deg) brightness(85%) contrast(95%);
}

.vehicle-card__footer {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px; border-top: 1px solid var(--color-grey-light); gap: 8px;
}
.vehicle-card__price {
    margin: 0; font-size: 11px; color: var(--color-grey-text);
    display: flex; flex-direction: column; line-height: 1.1;
}
.vehicle-card__price-from { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.vehicle-card__price strong { color: var(--color-red); font-size: 22px; font-weight: 700; }
.vehicle-card__price-unit { font-size: 11px; color: var(--color-grey-text); margin-top: 2px; }

/* ===== 8. Reservation CTA (capsule centrée) ===== */
.reservation-cta { padding: 24px 0; background: transparent; }
.reservation-cta__inner {
    background: var(--color-bluegrey);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    padding: 24px 36px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    max-width: 880px; margin: 0 auto;
    box-shadow: var(--shadow-cta);
    position: relative;
}
.reservation-cta__text { flex: 1; text-align: center; }
.reservation-cta__eyebrow {
    color: var(--color-yellow); font-weight: 700; letter-spacing: 1.5px;
    font-size: 26px; margin: 0 0 4px; text-transform: uppercase;
}
.reservation-cta__title {
    font-size: 22px; font-weight: 700; margin: 0; color: var(--color-white);
    display: inline-flex; gap: 0; align-items: center; flex-wrap: wrap; justify-content: center;
}
.reservation-cta__title-label { font-weight: 600; opacity: 0.9;
    color: var(--color-yellow);
    background: var(--color-red);
    padding: 2px 15px;
	padding-right: 20px;
    border-radius: 8px;}
.reservation-cta__phone {
    color: var(--color-grey-text);
    font-weight: 700;
    font-size: 22px;
    white-space: nowrap;
    display: flex;
    gap: 8px;
    background: var(--color-white);
    padding: 4px 15px;
	border-radius: 8px;
    margin-left: -5px;
    z-index: 1;
}
.reservation-cta__sub {
    margin: 6px 0 0;
    font-size: 14px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-yellow);
}

.reservation-cta__visual {
    width: 200px;
}

.reservation-cta__visual--background {	
    width: 240px;
    height: 240px;
    flex-shrink: 0;
    background: var(--color-yellow);
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    margin: -20px 0;
    top: -20px;
    right: 0;
}
.reservation-cta__visual img {
    position: absolute;
    right: 20px;
    bottom: -220px;
    width: 190px;
    clip-path: circle(50% at 50% 24%);
}

/* ===== 8b. Section "Expérience" (2 colonnes texte + bande rouge + mascotte overlay) ===== */
.experience {
    position: relative;
    padding: 60px 0 0;
}
.experience .container { position: relative; }

/* La mascotte chevauche les 2 sous-sections en absolu, centrée */
.experience__mascot {
    position: absolute;
    left: 50%;
    top: -185px;
    transform: translateX(-50%);
    width: 200px;
    z-index: 5;
    pointer-events: none;
}
.experience__mascot img {
    width: 100%; height: auto; display: block;
}

/* 1) Deux colonnes de texte avec un creux central pour la mascotte */
.experience__text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12rem;     /* écart laissé au milieu pour que la mascotte y descende */
    row-gap: 0;
    padding-bottom: 60px;
}

.experience__col p { color: var(--color-text); margin-bottom: 1em; }
.experience__col .h3 { margin-bottom: 16px; font-weight: 700; }

/* 2) Bande rouge + bloc bénéfices à droite */
.experience__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    column-gap: 12rem;
    align-items: stretch;
    background: var(--color-red);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 60px;
    position: relative;
}
.experience__split-red {
    background: var(--color-red);
    padding: 48px 40px 48px 36px;
    color: var(--color-white);
}
.experience__split-red .h3 { font-weight: 700; line-height: 1.25; margin-bottom: 12px; }

.benefits__intro {
    color: var(--color-white); font-weight: 600; margin-bottom: 14px;
}
.benefits {
    display: grid; gap: 12px;
    padding: 0; margin: 0;
}
.benefits li {
    display: flex; align-items: center; gap: 12px;
    color: var(--color-white); font-weight: 500; font-size: 15px;
}
.benefits li::before {
    content: "";
    width: 22px; height: 22px; flex-shrink: 0;
    background: var(--color-yellow);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c81e28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,12 10,16 18,8'/></svg>");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== 8c. Section "Utilitaires promo" ===== */
.utilities-promo__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
}
.utilities-promo__media {
    position: relative;
    aspect-ratio: 4 / 3;
}
.utilities-promo__van {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,0.18));
}
.utilities-promo__van--1 {
    width: 80%; left: 0; bottom: 0; z-index: 2;
}
.utilities-promo__van--2 {
    width: 55%; right: 0; top: 8%; z-index: 1;
    opacity: 0.95;
}
.utilities-promo__copy .badge {
    padding: 6px 14px;
    font-size: 12px;
    background: var(--color-yellow);
    border-radius: 4px;
    box-shadow: 0px 10px 30px -10px var(--color-grey-text);
    margin-bottom: 10px;
    display: inline-block;
}
.utilities-promo__copy .h2 { margin-bottom: 12px; }

/* SVG features (icônes en cercle jaune) */
.feature__icon svg { width: 40px; height: 40px; }

/* ===== 9. Atouts / features ===== */
.feature { text-align: center; padding: 16px; }
.feature__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--color-yellow); color: var(--color-text);
    font-size: 36px; margin-bottom: 18px;
}
.feature__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--color-text); }
.feature__text  { font-size: 14px; color: var(--color-grey-text); margin: 0; }

.text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.text-image--reverse .text-image__media { order: 2; }
.text-image__media {
    aspect-ratio: 4/3; background: var(--color-grey-light);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-grey-text); font-weight: 500; overflow: hidden;
}
.text-image__media img { width: 100%; height: 100%; object-fit: cover; }
.text-image .h2 { margin-bottom: 16px; }

.bullet-list { display: grid; gap: 12px; margin-top: 16px; padding: 0; }
.bullet-list li { position: relative; padding-left: 32px; color: var(--color-text); }
.bullet-list li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--color-red);
    box-shadow: 0 0 0 4px rgba(200,30,40,0.15);
}

/* ===== 10. Services / agences / contact ===== */
.service-card {
    background: var(--color-white);
/*     border-radius: var(--radius);  */
	overflow: hidden;
/*     border: 1px solid var(--color-grey-2); */
    display: grid; grid-template-columns: 1fr 1fr;
    transition: transform var(--transition), box-shadow var(--transition);
}
/* .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } */
.service-card__media {
    background: var(--color-grey-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-grey-text); font-size: 13px; font-weight: 500;
}
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0rem;
    justify-content: space-evenly;
}
.service-card__body .h3 { font-size: 20px; margin: 0; color: var(--color-red); }
.service-card a {
    width: fit-content;
}

.agency-card {
    background: var(--color-white);
    border: 1px solid var(--color-grey-2);
    border-radius: var(--radius);
    padding: 24px;
    display: flex; flex-direction: column; gap: 8px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.agency-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.agency-card__title { color: var(--color-red); font-size: 18px; font-weight: 700; margin: 0; }
.agency-card__address { white-space: pre-line; color: var(--color-text); margin: 0; font-style: normal; }
.agency-card__phone a { color: var(--color-text); font-weight: 600; }
.agency-card__hours { white-space: pre-line; color: var(--color-grey-text); font-size: 14px; margin: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.contact-card {
    background: var(--color-white); border-radius: var(--radius);
    border: 1px solid var(--color-grey-2);
    padding: 24px; display: flex; gap: 16px; align-items: flex-start;
}
.contact-card__icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-red); color: var(--color-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.contact-card__title { font-size: 14px; color: var(--color-grey-text); margin: 0 0 4px; }
.contact-card__value { font-weight: 700; font-size: 18px; }
.contact-card__value a { color: var(--color-red); }

.contact-form {
    background: var(--color-white); border: 1px solid var(--color-grey-2);
    border-radius: var(--radius); padding: 32px;
}
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.contact-form textarea { min-height: 140px; resize: vertical; }

/* ===== 11. Blog ===== */
.post-card {
    background: var(--color-white);
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--color-grey-2);
    display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__media {
    position: relative; display: block; aspect-ratio: 16/10;
    background: var(--color-grey-light);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__cat {
    position: absolute; top: 14px; left: 14px;
    background: var(--color-red); color: var(--color-white);
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    padding: 6px 12px; border-radius: 4px; text-transform: uppercase;
}
.post-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.post-card__title { font-size: 16px; line-height: 1.35; margin: 0 0 8px; }
.post-card__title a { color: var(--color-text); }
.post-card__title a:hover { color: var(--color-red); }
.post-card__excerpt { font-size: 13px; color: var(--color-grey-text); flex: 1; }
.post-card__link { font-weight: 600; color: var(--color-red); margin-top: 8px; font-size: 14px; }

.pagination, .nav-links {
    margin: 48px auto 0; display: flex; justify-content: center;
    gap: 6px; flex-wrap: wrap;
}
.pagination a, .pagination span,
.nav-links a, .nav-links span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    background: var(--color-white); border: 1px solid var(--color-grey-2);
    border-radius: var(--radius-sm); color: var(--color-text); font-weight: 600;
}
.pagination .current,
.nav-links .current { background: var(--color-red); color: var(--color-white); border-color: var(--color-red); }

.single-post-hero {
    background: var(--color-red); color: var(--color-white);
    padding: 60px 0; text-align: center;
}
.single-post-hero h1 { color: var(--color-white); font-size: 36px; max-width: 880px; margin: 0 auto; }
.single-post-hero .meta { color: rgba(255,255,255,0.85); font-size: 14px; }
.single-post-body { max-width: 760px; margin: 0 auto; padding: 60px 0; }
.single-post-body p, .single-post-body ul, .single-post-body ol { font-size: 17px; color: var(--color-text); }

/* ===== 12. Footer NOIR ===== */
.site-footer {
    background: var(--color-black);
    color: rgba(255,255,255,0.85);
    padding: 60px 0 0;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--color-yellow); }

.footer__grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px; padding-bottom: 40px;
}
.footer__col { font-size: 14px; }
.footer__col--brand .logo { display: inline-flex; margin-bottom: 16px; }
.footer__tagline { color: rgba(255,255,255,0.95); margin-bottom: 12px; line-height: 1.5; }
.footer__about { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.5; }

.footer__title {
    color: var(--color-white); font-size: 16px; font-weight: 700;
    margin: 0 0 18px;
}

.footer__contact { display: grid; gap: 14px; padding: 0; margin: 0 0 16px; }
.footer__contact li {
    display: flex; gap: 12px; align-items: flex-start;
    padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__contact li:last-child { border-bottom: 0; }
.footer__icon-circle {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-red);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--color-white); font-size: 13px;
}
.footer__contact address { font-style: normal; }

.footer__links { display: grid; gap: 12px; padding: 0; margin: 0; }
.footer__links li { display: flex; gap: 8px; align-items: center; }
.footer__links li::before {
    content: "›"; color: var(--color-red); font-weight: 700; font-size: 14px;
}

.footer__social { display: flex; gap: 8px; margin-top: 18px; padding: 0; }
.footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: var(--color-white); font-weight: 700;
}
.footer__social a:hover { background: var(--color-red); color: var(--color-white); }
.footer__social svg, .footer__icon-circle svg {
    width: 14px;
    height: 14px;
}
.footer__newsletter-intro { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 12px; line-height: 1.5; }

.newsletter {
    display: flex; gap: 0; align-items: stretch;
    background: var(--color-white); border-radius: var(--radius-sm); overflow: hidden;
}
.newsletter input {
    border: 0; border-radius: 0; flex: 1; min-width: 0; padding: 12px;
}
.newsletter input:focus { outline: none; }
.newsletter .btn { border-radius: 0; padding: 12px 20px; font-size: 13px; text-transform: none; }

.footer__consent {
    display: flex; gap: 8px; font-size: 11px;
    color: rgba(255,255,255,0.65); margin-top: 12px; line-height: 1.5;
}
.footer__consent input {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px;
}

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 18px 0;
}
.footer__bottom-inner {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 12px; color: rgba(255,255,255,0.6);
}
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; padding: 0; }

/* ===== 13. FAQ accordéon ===== */
.faq-item {
    background: var(--color-white); border: 1px solid var(--color-grey-2);
    border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden;
}
.faq-item__title {
    width: 100%; text-align: left; padding: 18px 20px; font-weight: 600;
    background: var(--color-white);
    display: flex; justify-content: space-between; align-items: center;
    color: var(--color-text);
}
.faq-item__title::after { content: "+"; font-size: 22px; color: var(--color-red); transition: transform var(--transition); }
.faq-item__title[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-item__panel { padding: 0 20px 18px; display: none; color: var(--color-grey-text); }
.faq-item__title[aria-expanded="true"] + .faq-item__panel { display: block; }

/* ===== 14. Placeholders d'image ===== */
.image-slot {
    background: var(--color-grey-light);
    border: 1px dashed rgba(54,69,78,0.25);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-grey-text); font-size: 13px; font-weight: 500;
    text-align: center; padding: 12px;
    aspect-ratio: 4/3; position: relative;
}
.image-slot--vehicle { aspect-ratio: 16/10; }
.image-slot--blog    { aspect-ratio: 16/10; }
.image-slot--square  { aspect-ratio: 1/1; }
.image-slot--wide    { aspect-ratio: 16/7; }
.image-slot__label {
    background: var(--color-white);
    padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px;
    box-shadow: var(--shadow-sm);
}

body:not(.page--accueil) .site-header {
    background: var(--color-red);
}

.background-hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-red);
    z-index: 0;
    height: 100%;
}

.background-hero::before {
    content: "";
    position: absolute;
    right: 0;
    left: 45%;
    top: 0;
    bottom: 0;
    background: var(--color-yellow);
    clip-path: polygon(30% 0%, 100% 0, 100% 100%, 0% 100%);
}

.section-contact-form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.agencies-map-tabs-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
}

.agencies-map-tabs-link a {
	display: block;
	padding: 15px 5px;
	transition: 0.5s;
	border: 2px solid var(--color-red);
}

.agencies-map-tabs-link.active a,
.agencies-map-tabs-link:hover a {
	background: var(--color-red);
	color: white;
	font-weight: bold;
}

.agencies-map-tabs-link + .agencies-map-tabs-link a {
	border-left-width: 1px;
}

.agencies-map-tabs-link:not(:last-child) a {
	border-right-width: 1px;
}

.agencies-map-tabs {
	display: block;
	width: 100%;
}

.agencies-map-tab {
	display: none;
}

.agencies-map-tab.active {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 600px;
}

.agencies-map-tabs-container__bis .agencies-map-tab.active{
	grid-template-columns: 1fr 1fr;
	text-align: left;
	min-height: unset;
	padding: 15px 0;
}

.agencies-map-tab__description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	padding: 15px;
	background: #f4f4f4;
}

.agencies-map-tab__title {
	color: var(--color-red);
	font-weight: bold;
	text-transform: uppercase;
}

.agencies-map-tabs-container__bis .agencies-map-tab__title {
    color: var(--color-text);
    font-size: 24px;
}

.agencies-map-tab__phone {
	font-weight: bold;
}

.agencies-map-tabs-container__bis .agencies-map-tab__image,
.agencies-map-tabs-container__bis .agencies-map-tab__image img {
    height: 100%;
}
.agencies-map-tabs-container__bis .agencies-map-tab__image img {
    object-fit: cover;
}

.agencies-map-tab__main > div:not(.agencies-map-tab__content) {
    display: flex;
    align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	font-weight: bold;
}

.agencies-map-tab.active svg{
	color: var(--color-red);
}

.vehicle {
    position: relative;
}

.vehicle__thumbnail {
    position: absolute;
    top: 0;
    padding: 0 15px;
    height: 200px;
    width: 100%;
}

.vehicle__thumbnail img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.vehicle__content {
    padding: 15px 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 15px;
    padding-top: 100px;
    padding-bottom: 30px;
    margin-top: 100px;
    margin-bottom: 20px;
    min-height: 280px;
	position: relative;
	z-index: 1;	
    overflow: hidden;
	corner-shape: squircle;
/* 	background: var(--color-grey-light); */
}

.vehicle__content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-red);
    transform: skewY(4deg) translateY(14px);
    z-index: -1;
    top: 95%;
}

.vehicle__content hr {
    width: 80%;
}

.vehicle__content .vehicle__title {
    padding: 0 15px;
    margin-bottom: 1rem;
}

.vehicle__content .vehicle__title h2 {
    font-size: 18px;
    line-height: 1;
    font-weight: bold;
    text-align: left;
    margin: 0;
}

.vehicle__content .vehicle__title small {
    display: block;
}

.vehicle__content .vehicle__title span {
    background: var(--color-red);
    border-radius: 10px;
    corner-shape: squircle;
    padding: 2px 5px;
    color: white;
    font-size: 12px;
}

.vehicle__intro .vehicle__description {
	--vehicle-description-size: 12px;
	--vehicle-description-line-height: 1.2;
    font-size: var(--vehicle-description-size);
    line-height: var(--vehicle-description-line-height);
    text-align: justify;
    min-height: calc(var(--vehicle-description-size) * 4 * var(--vehicle-description-line-height));
}

.vehicle__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0 10px;
}

.vehicle__feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    margin-bottom: 10px;
}

.vehicle__feature-icon img {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
}

.vehicle__reserve-btn {
	position: relative;
    display: grid;
    grid-template-columns: 1fr 20px;
    align-items: center;
    gap: 15px;
    padding: 5px 30px;
    color: white !important;
    border: 2px solid var(--color-red);
    border-radius: 10rem;
    overflow: hidden;
    font-weight: bold;
    background-color: var(--color-red);
    transition: 0.5s;
    width: fit-content;
    margin: 10px auto 0;
	cursor: pointer;
}

.ma-vehicle-grid .splide__pagination{display: none !important;}

.ma-vehicle-grid .splide__arrow {
    top: 105%;
    width: 10%;
    height: 35px;
	opacity: 1;
	corner-shape: squircle;
    border-radius: 2rem;
	background-color: var(--color-red);
}

.ma-vehicle-grid .splide__arrow svg {
    fill: #fff;
}

.ma-vehicle-grid .splide__arrow:hover svg {
    fill: #000;
}

.ma-vehicle-grid .splide__arrow.splide__arrow--prev {
	left: 0;
}

.ma-vehicle-grid .splide__arrow.splide__arrow--next {
	right: 0;
}

section.ma-vehicle-grid.list ul#vehicleGridList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

@media screen and (max-width: 815px) {
	.agencies-map-tabs-links {
		grid-template-columns: repeat(2, 1fr);
	}

    .agencies-map-tabs-link:nth-child(odd) a {
        border-right-width: 1px;
        border-left-width: 2px;
    }

    .agencies-map-tabs-link:nth-child(even) a {
        border-right-width: 2px;
        border-left-width: 1px;
    }

    .agencies-map-tabs-link:nth-child(1) a, .agencies-map-tabs-link:nth-child(2) a {
        border-bottom-width: 1px;
    }

    .agencies-map-tabs-link:nth-child(3) a, .agencies-map-tabs-link:nth-child(4) a {
        border-top-width: 1px;
    }

    .agencies-map-tab.active {
        grid-template-columns: 1fr !important;
    }
}


/* ===== 15. Responsive ===== */
@media (max-width: 1100px) {
    :root { --fs-h1: 42px; --fs-h2: 30px; --fs-h3: 24px; }
    .grid--vehicles { grid-template-columns: repeat(3, 1fr); }
    .footer__grid   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    :root { --fs-h1: 34px; --fs-h2: 26px; }
	
	.background-hero::before {
		left: 0;
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 100%);
	}
	.topbar{font-size: 11px;}
	.topbar__contact--right {
    	color: var(--color-yellow);
    	margin-left: 0;
	}
    .navbar__toggle { display: flex; }
    .navbar__nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--color-red); padding: 8px var(--gutter);
        box-shadow: var(--shadow-sm);
		transition: transform 0.5s ease-in-out;
		transform: translatex(100%);
		justify-content: normal;
	}
    .navbar__nav.is-open { transform: translatex(0); }
    .navbar__nav .nav__list,
    .navbar__nav ul { flex-direction: column; align-items: stretch; gap: 0;width: 100%; }
    .navbar__nav .nav__list > li,
    .navbar__nav ul > li { border-right: 0; }
    .navbar__nav a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }

    .hero__inner { grid-template-columns: 1fr; padding-bottom: 0;padding-top: 30px;gap:0; }
    .hero__visual { min-height: 240px;align-items: center;justify-content: center; }

	.hero__copy {padding-bottom: 0px;}
	.hero__character {
		width: 100%;
		max-width: 200px;
	}

    .search-bar { grid-template-columns: 1fr; }
    .search-bar__submit { grid-column: 1 / -1; }
    .search-bar__submit .btn { width: 100%; }

    .grid--cards, .grid--vehicles, .grid--utilities,
    .grid--features, .grid--two, .grid--agencies { grid-template-columns: 1fr !important; }

    .text-image { grid-template-columns: 1fr; }
    .text-image--reverse .text-image__media { order: 0; }

    /* Section expérience : on ramène à une colonne et la mascotte passe sous le texte */
    .experience__text {
        grid-template-columns: 1fr;
        column-gap: 0;
        gap: 32px;
    }
    .experience__split { grid-template-columns: 1fr; }
    .experience__split-list { padding: 32px 24px; }
    .experience__split-red { padding: 32px 24px; }
    .experience__mascot {
        position: relative; left: auto; top: auto; transform: none;
        width: 200px; max-width: 60%;
        margin: 24px auto;
    }

    .utilities-promo__inner { grid-template-columns: 1fr; }
    .utilities-promo__media { aspect-ratio: 16/10; }

	
	.reservation-cta__visual--background {
		width: 200px;
		height: 200px;
		left: 0;
		margin-inline: auto;
	}
    .reservation-cta__inner {
        flex-direction: column; border-radius: var(--radius-lg); padding: 24px; text-align: center;padding-top: 175px;margin-top: 35px;
    }
	.reservation-cta__visual img{
	    left: 50%;
		right: 0;
		top: -85px;
		bottom: unset;
		transform: translateX(-50%);
	}
    .reservation-cta__title { font-size: 18px; flex-direction: column; gap: 4px; }
    .reservation-cta__phone { font-size: 22px; }

    .service-card { grid-template-columns: 1fr; }
    .service-card__media { aspect-ratio: 16/10; }

    .footer__grid { grid-template-columns: 1fr; gap: 30px; }
    .footer__bottom-inner { flex-direction: column; align-items: flex-start; }

    .topbar__inner { flex-wrap: wrap; gap: 8px; }
    .topbar__contact .topbar__email { display: none; }

    .contact-grid, .contact-form__row { grid-template-columns: 1fr; }

    .section { padding: 50px 0; }
    .page-hero { padding: 40px 0; }
}

@media (max-width: 480px) {
    .hero__title { font-size: 20px;margin-bottom: 15px; }
    .btn { padding: 12px 18px; font-size: 13px; }
    .logo__svg { width: 180px; height: 46px; }
	.reservation-cta__visual img {top: -130px;}
	.reservation-cta__inner {margin-top: 70px;}
}

@media (min-width: 860px){
	.experience__col:last-child {
		text-align: right;
	}
	.page--accueil .navbar__nav ul {
		background: rgba(10, 10, 10, 0.5);
	}
	
	.service-card:nth-child(odd) .service-card__media {
		order: 2;
	}
}