:root {
  --ink: #102527;
  --cream: #f7f9f6;
  --paper: #fffefa;
  --lime: #ffd72e;
  --aqua: #06bbb9;
}

.header { height: 96px; }
.brand { font: inherit; letter-spacing: 0; }
.brand img { display: block; width: 205px; height: 86px; object-fit: contain; }
.brand small, .brand-mark { display: none; }
.nav a:hover, .text-link:hover { color: var(--aqua); }
.eyebrow span { background: var(--aqua); }
.button-primary, .search { background: var(--aqua); color: #062526; }
.hero-visual { background-image: linear-gradient(115deg, rgba(6, 187, 185, .23), rgba(15, 34, 33, .04)), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1300&q=85'); }
.hero-logo-area { background: linear-gradient(135deg, #e9fbfb 0%, #fff7cc 100%); display: grid; place-items: center; overflow: hidden; }
.hero-logo { width: min(92%, 610px); height: auto; mix-blend-mode: multiply; filter: drop-shadow(0 15px 17px rgba(16,37,39,.15)); z-index: 1; }
.hero-logo-area .visual-label { color: #102527; }
.hero-logo-area .hero-card { left: 8%; }
.reviewer { background: var(--aqua); }
.stars { color: #f4b800; }
.cta { background: var(--aqua); }
footer .brand img { width: 205px; height: 86px; }
.booking { margin: 24px auto 0; }
.booking { border: 1px solid #ffd72e; }
.booking form { grid-template-columns: 1fr .8fr 1fr .8fr auto; }
.car-body strong { font-size: 13px; white-space: nowrap; }
.p208-blue { background-image: url('peugeot-208-gt-bleue.png'); }
.p208-black { background-image: url('peugeot-208-gt-noire.png'); }
.c3-red { background-image: url('citroen-c3-rouge.png'); }
.c1-white { background-image: url('citroen-c1-blanche.png'); }
.mito-red { background-image: url('alfa-mito-rouge.png'); }
.duster-grey { background-image: url('dacia-duster-gris.png'); }
.p208-white { background-image: url('peugeot-208-blanche.png'); }
.p208-grey { background-image: url('peugeot-208-grise.png'); }
.generic { background: linear-gradient(135deg, #eafafa, #fff3bb); }
.generic:before { content: '🚗'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; }
.generic[style]:before { display: none; }
.footer-expanded{grid-template-columns:1.7fr .85fr 1.15fr .8fr 1.35fr .9fr}.footer-expanded .copyright{grid-column:auto}@media(max-width:800px){.footer-expanded{grid-template-columns:1fr 1fr}.footer-expanded .brand,.footer-expanded .copyright{grid-column:span 2}.footer-expanded .copyright{margin-top:18px}}
.header-social{display:flex;align-items:center;gap:8px}.header-social a{width:33px;height:33px;border:1px solid #d8e2dd;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .15s ease,box-shadow .15s ease}.header-social a:hover{transform:translateY(-2px);box-shadow:0 5px 10px #10252722}.header-social img{display:block;width:19px;height:19px;object-fit:contain}.social-tiktok{background:#111!important;border-color:#111!important}.social-tiktok img{filter:none}@media(max-width:1050px){.header-social{display:none}}
.google-live-reviews{padding:94px 10.5vw;background:#fff}.google-live-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.google-live-heading h2{margin:0;font:700 50px/.99 Outfit;letter-spacing:-2.4px}.google-live-heading h2 em{font-weight:500}.google-review-status{margin:30px 0 19px;color:#50615b;font-size:13px}.google-review-status strong{color:#102527;font:700 25px Outfit}.google-review-status span{color:#f3b300;font-size:19px;margin:0 5px}.google-review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.google-review-card{min-height:170px;padding:21px;border:1px solid #e3e9e5;background:#f9fbf9}.google-review-card>div{display:flex;align-items:center;gap:10px}.google-review-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#06bbb9;color:#062526;font:700 11px Outfit}.google-review-card p{margin:0}.google-review-card strong{display:block;font:600 13px Outfit}.google-review-card small{display:block;margin-top:2px;color:#77847e;font-size:10px}.google-review-card b{margin-left:auto;color:#f3b300;font-size:12px;letter-spacing:1px}.google-review-text{margin-top:18px!important;color:#51615b;font-size:12px;line-height:1.55}.google-review-empty{grid-column:span 3;margin:0;padding:22px;border:1px dashed #d4dfd9;color:#77847e;font-size:12px}.google-all-reviews{display:inline-block;margin-top:24px;border-bottom:1px solid #102527;padding-bottom:5px;font-size:12px;font-weight:700}.google-all-reviews span{margin-left:6px;font-size:16px}@media(max-width:800px){.google-live-reviews{padding:66px 6vw}.google-live-heading{display:block}.google-live-heading h2{font-size:41px}.google-review-cards{grid-template-columns:1fr}.google-review-empty{grid-column:auto}}
.car-image::after { content: 'mytitine.com'; position: absolute; left: 63%; bottom: 19%; z-index: 1; transform: translateX(-50%) rotate(-3deg); background: #fff; color: #102527; border: 1px solid #1a2524; border-radius: 2px; box-shadow: 0 1px 2px #0005; padding: 2px 5px; font: 700 6px/1 Arial, sans-serif; letter-spacing: .1px; }
.c1-white::after,.p208-white::after { color: #102527; border-color: #5c6360; }

@media (max-width: 800px) {
  .header { height: 78px; }
  .brand img { width: 148px; height: 68px; }
  .booking { margin: 14px auto 0; }
  .booking form { grid-template-columns: 1fr 1fr; }
  .booking .field:first-child, .booking .search { grid-column: auto; }
}

@media (max-width: 440px) {
  .booking form { grid-template-columns: 1fr; }
  .booking .field:first-child, .booking .search { grid-column: span 1; }
}

/* Présentation plus compacte et plus rassurante. */
.header {
  box-shadow: 0 1px 0 rgba(16, 37, 39, .05);
}
.nav { gap: 24px; font-weight: 600; }
.nav a { position: relative; }
.nav a:first-child::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  height: 2px;
  background: var(--aqua);
}
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #062526;
  background: var(--lime);
}
.booking {
  width: min(1120px, 91vw);
  margin: 16px auto 0;
  padding: 16px 20px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(16, 37, 39, .10);
}
.booking form { gap: 12px; }
.booking-note { margin-top: 8px; }
.booking-status { margin-top: 5px; }
.hero {
  min-height: 475px;
  margin-top: 16px;
  border-top: 1px solid #e7ece8;
  border-bottom: 1px solid #e0e7e2;
}
.hero-copy { padding: 60px 7vw 52px 10.5vw; }
.hero h1 { max-width: 560px; }
.intro { max-width: 470px; margin: 20px 0 24px; }
.hero-actions { gap: 18px; }
.hero-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 38px;
}
.hero-reassurance span {
  padding: 8px 10px;
  border: 1px solid #d9e4de;
  border-radius: 999px;
  color: #294542;
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 700;
}
.hero-logo-area { min-height: 475px; }
.hero-logo { width: min(83%, 555px); }
.hero-logo-area .hero-card {
  bottom: 34px;
  left: 7%;
  width: 178px;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(16, 37, 39, .14);
}
.section { padding: 78px 10.5vw 72px; }
.section-heading { margin-bottom: 31px; }
.section-heading .eyebrow { margin-bottom: 13px; }
.fleet .cars { gap: 16px; }
.car-card {
  overflow: hidden;
  border-color: #dde6e0;
  box-shadow: 0 7px 18px rgba(16, 37, 39, .04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 29px rgba(16, 37, 39, .12);
}
.car-image { height: 192px; background-color: #f7faf8; }
.car-body { padding: 14px 4px 10px; }
.reserve-car { min-height: 44px; color: #062526; background: var(--aqua); }
.reserve-car:hover { background: var(--lime); }
.benefits { min-height: 445px; }
.benefit-copy { padding: 60px 12%; }
.benefit-list { margin-top: 25px; }
.google-live-reviews { padding: 76px 10.5vw; }
.google-review-status { margin: 22px 0 15px; }
.google-review-card { min-height: 151px; }
.cta { padding: 58px 10.5vw; }
footer { padding-top: 46px; }

@media (min-width: 1280px) {
  .fleet .cars { grid-template-columns: repeat(4, 1fr); }
  .car-image { height: 174px; }
  .car-body h3 { font-size: 16px; }
  .car-meta { gap: 6px; }
}

.mobile-nav-extra { display: none; }

@media (max-width: 800px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 72px;
    padding: 0 5vw;
    background: rgba(255, 254, 250, .97);
    backdrop-filter: blur(10px);
  }
  .brand img { width: 132px; height: 64px; }
  .nav { display: none; }
  .menu {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: none;
    place-items: center;
    border: 1px solid #cfdad5;
    border-radius: 9px;
    color: #102527;
    background: #fff;
    font: 700 22px/1 Arial, sans-serif;
    cursor: pointer;
  }
  .nav.mobile-open {
    position: absolute;
    top: calc(100% + 8px);
    right: 4vw;
    left: 4vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 7px 15px;
    border: 1px solid #d9e3de;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 37, 39, .16);
    z-index: 31;
  }
  .nav.mobile-open a {
    padding: 11px 2px;
    border-bottom: 1px solid #edf1ee;
    color: #102527;
    font-size: 13px;
    font-weight: 700;
  }
  .nav.mobile-open a:last-child { border-bottom: 0; }
  .nav.mobile-open .mobile-nav-extra { display: block; color: #087f7d; }
  .header-cta {
    display: inline-flex;
    min-height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
  .header-cta span { padding-left: 5px; font-size: 16px; }
  .booking {
    width: 92vw;
    margin: 10px auto 0;
    padding: 15px 13px 11px;
    border-radius: 13px;
  }
  .booking form {
    grid-template-columns: minmax(0, 1.35fr) minmax(95px, .65fr);
    gap: 10px;
  }
  .booking form > *, .booking .field, .booking input { min-width: 0; }
  .booking .field:first-child, .booking .search { grid-column: auto; }
  .field label { margin-bottom: 5px; font-size: 10px; }
  .field input { height: 40px; padding: 9px 7px; font-size: 11px; }
  .search {
    min-height: 40px;
    padding: 0 10px;
    grid-column: span 2 !important;
    justify-content: center;
  }
  .booking-note { font-size: 9px; }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 11px;
  }
  .hero-copy { padding: 44px 7vw 33px; }
  .hero h1 { font-size: clamp(42px, 13vw, 57px); letter-spacing: -2.2px; }
  .intro { margin: 18px 0 20px; font-size: 14px; }
  .hero-reassurance { gap: 6px; margin-top: 25px; }
  .hero-reassurance span { padding: 7px 8px; font-size: 9px; }
  .hero-logo-area { min-height: 250px; height: 250px; padding-bottom: 56px; }
  .hero-logo { width: min(82%, 380px); }
  .hero-logo-area .visual-label { top: 12%; right: 7%; font-size: 9px; letter-spacing: 2px; }
  .hero-logo-area .hero-card {
    right: 16px;
    bottom: 12px;
    left: 16px;
    width: auto;
    padding: 9px 12px;
    text-align: center;
  }
  .hero-card strong { display: inline-block; margin: 1px 5px; font-size: 24px; }
  .hero-card p { display: inline-block; }
  .section { padding: 57px 6vw 54px; }
  .section-heading { margin-bottom: 23px; }
  .section h2, .benefit-copy h2, .cta h2 { font-size: 39px; letter-spacing: -1.9px; }
  .section-heading .text-link { margin-top: 16px; }
  .fleet .cars { gap: 13px; }
  .car-card { padding: 9px; }
  .car-image { height: 188px; }
  .car-body h3 { font-size: 17px; }
  .car-meta { padding: 10px 4px; }
  .benefit-photo { height: 205px; }
  .benefit-copy { padding: 43px 8%; }
  .benefit-copy h2 { font-size: 39px; }
  .benefit-list { margin-top: 22px; }
  .benefit-list > div { padding: 12px 0; }
  .google-live-reviews { padding: 57px 6vw; }
  .google-live-heading h2 { font-size: 39px; letter-spacing: -1.9px; }
  .google-review-card { min-height: 0; padding: 17px; }
  .cta { padding: 48px 8vw; }
  .cta .button { width: 100%; justify-content: space-between; }
  .footer-expanded { gap: 22px; }
}

@media (max-width: 370px) {
  .booking form { grid-template-columns: 1fr; }
  .booking .search { grid-column: auto !important; }
  .hero-reassurance span { font-size: 8px; }
}

/* Format compact sur téléphone : deux colonnes, avec un espace net
   entre les champs et le contour jaune, y compris dans Safari sur iPhone. */
@media (max-width: 600px) {
  #reserver {
    overflow: hidden;
    width: min(330px, 84vw);
    padding: 7px 12px 6px;
  }
  #reserver form {
    width: calc(100% - 16px);
    max-width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 7px;
  }
  #reserver .field,
  #reserver .field:first-child {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
  }
  #reserver .search {
    grid-column: 1 / -1 !important;
    width: 100%;
  }
  #reserver .field input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 32px !important;
    min-height: 0;
    padding-right: 5px;
    padding-left: 5px;
  }
  #reserver .field label { margin-bottom: 2px; font-size: 8px; }
  #reserver .search { height: 34px; min-height: 34px; }
  #reserver .booking-note { display: none; }
  #reserver .booking-status:empty { display: none; }
}

/* Les tarifs dégressifs sont visibles dès la recherche, sans encombrer le formulaire. */
#reserver { width:min(1100px,88vw); }
#reserver .booking-content { display:grid; grid-template-columns:minmax(0,1fr) 245px; gap:20px; align-items:stretch; }
#reserver .booking-content form { grid-template-columns:1.25fr .75fr 1.25fr .75fr; align-content:start; gap:12px; }
#reserver .booking-content .search { grid-column:1 / -1; justify-content:center; }
.home-duration-pricing { padding:15px 16px; border:1px solid #d3e6e0; border-left:4px solid #0bb8bc; background:#f4fbf8; }
.home-duration-pricing > p { margin:0; color:#102527; font:700 15px/1.1 Outfit,sans-serif; }
.home-duration-pricing > strong { display:block; margin:4px 0 9px; color:#177452; font-size:10px; }
.home-duration-tier-list { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid #dceae5; }
.home-duration-tier-list li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid #dceae5; color:#53655f; font-size:10px; }
.home-duration-tier-list b { color:#177452; font:700 11px Outfit,sans-serif; }
@media (max-width:900px) { #reserver .booking-content { grid-template-columns:1fr; } #reserver .booking-content form { grid-template-columns:1.25fr .75fr 1.25fr .75fr; } .home-duration-pricing { max-width:760px; } .home-duration-tier-list { grid-template-columns:repeat(3,1fr); gap:6px; border:0; } .home-duration-tier-list li { display:grid; gap:2px; padding:7px 4px; border:1px solid #dceae5; text-align:center; } }
@media (max-width:600px) { #reserver { width:min(318px,82vw); } #reserver .booking-content { display:grid; gap:9px; } #reserver .booking-content form { width:calc(100% - 16px); margin:0 auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 7px; } #reserver .booking-content .search { grid-column:1 / -1 !important; } .home-duration-pricing { width:calc(100% - 16px); margin:0 auto; padding:10px 11px; } .home-duration-pricing > p { font-size:13px; } .home-duration-pricing > strong { margin:3px 0 7px; font-size:9px; } .home-duration-tier-list { gap:4px; } .home-duration-tier-list li { min-width:0; padding:5px 2px; font-size:8px; } .home-duration-tier-list b { font-size:10px; } }

/* Finition téléphone : une interface compacte, avec de vraies marges et des
   zones tactiles confortables. Ces règles ne concernent pas l'affichage PC. */
@media (max-width: 600px) {
  .header { height: 66px; padding: 0 14px; }
  .brand img { width: 124px; height: 58px; }
  .header-cta { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .header-cta span { font-size: 14px; }
  .menu { width: 34px; height: 34px; font-size: 21px; }
  .nav.mobile-open { right: 14px; left: 14px; }

  /* Recherche de dates sur l'accueil. */
  #reserver { width: min(334px, calc(100% - 28px)); margin-top: 9px; padding: 10px 11px 9px; border-radius: 12px; }
  #reserver .booking-content { gap: 8px; }
  #reserver .booking-content form { width: 100%; margin: 0; gap: 5px 7px; }
  #reserver .field label { margin-bottom: 3px; font-size: 9px; }
  #reserver .field input { height: 36px !important; padding: 7px 5px; font-size: 11px; }
  #reserver .search { height: 37px; min-height: 37px; font-size: 11px; }
  .home-duration-pricing { width: 100%; margin: 0; padding: 8px 9px; }
  .home-duration-pricing > p { font-size: 12px; }
  .home-duration-pricing > strong { margin: 2px 0 6px; font-size: 8px; }
  .home-duration-tier-list { gap: 3px; }
  .home-duration-tier-list li { padding: 4px 1px; font-size: 8px; }
  .home-duration-tier-list b { font-size: 9px; }

  .hero-copy { padding: 37px 7vw 29px; }
  .hero-logo-area { min-height: 220px; height: 220px; }
  .section { padding: 48px 6vw; }
  .car-image { height: 174px; }
  .google-live-reviews { padding: 48px 6vw; }
  .benefit-copy { padding: 38px 8%; }
  .cta { padding: 40px 8vw; }
  .footer-expanded { gap: 18px; }
}

@media (max-width: 370px) {
  #reserver .booking-content form { grid-template-columns: 1fr; }
  #reserver .booking-content .search { grid-column: auto !important; }
}

/* Les paliers restent immédiatement lisibles sur téléphone. */
@media (max-width: 600px) {
  #reserver .home-duration-pricing {
    padding: 10px;
    border: 1px solid #cbe5de;
    border-left: 4px solid #0bb8bc;
    border-radius: 8px;
    background: #f3faf7;
  }
  #reserver .home-duration-pricing > p { font-size: 13px; }
  #reserver .home-duration-pricing > strong { margin: 3px 0 8px; font-size: 9px; }
  #reserver .home-duration-tier-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  #reserver .home-duration-tier-list li {
    display: grid;
    gap: 2px;
    min-height: 44px;
    place-content: center;
    padding: 5px 3px;
    border: 1px solid #d7e9e3;
    border-radius: 6px;
    background: #fff;
    color: #52635d;
    font-size: 9px;
    text-align: center;
  }
  #reserver .home-duration-tier-list b { color: #177452; font-size: 13px; }
}