/* Accueil — ajustements propres à la page */
.countdown { align-items: stretch; }
.countdown__note {
  align-self: center; margin-left: 4px;
  font-size: 0.75rem; line-height: 1.25; font-weight: 600; color: rgb(255 255 255 / 0.78);
}
.countdown__note sup { font-size: 0.6em; }

[data-garage]:not([hidden]) { padding-top: 6px; }
[data-garage] .garage-chip { padding: 12px 14px; }
[data-garage] .garage-chip b { font-size: 0.95rem; }
[data-garage] .garage-chip .icon:last-child { margin-left: auto; }

.mini-rail .mini { color: #fff; }

/* Pneu vedette : prix calculé (accueil.js) */
.feature__price { font-size: 0.85rem; color: rgb(255 255 255 / 0.7); }
.feature__price b { color: #fff; font-size: 1.1rem; }

/* Raccourcis (téléphone) : rail qui défile, avec un fondu sur le bord qui cache encore des pastilles ;
   espacement réduit pour qu’une pastille reste à moitié visible au bord. */
.quick { gap: 8px; --fade: 44px; }
.quick a { padding-right: 14px; }
.quick.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent); }
.quick.has-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); }
.quick.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
/* iPhone SE : pastilles plus compactes, la 3e reste à moitié visible sous le fondu */
@media (max-width: 359.98px) {
  .quick a { gap: 6px; padding: 0 12px 0 8px; }
  .quick a .q-ico { width: 28px; height: 28px; }
}
/* Tablette et bureau : les 6 raccourcis sont tous visibles (plus de défilement caché) */
@media (min-width: 600px) {
  .quick { display: flex; flex-wrap: wrap; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; }
  .quick a { flex: 1 1 auto; justify-content: flex-start; }
}
/* Tablette : 2 rangées de 3 (sinon, à 768 px, « Argent CT » restait seul sur une rangée pleine largeur) */
@media (min-width: 600px) and (max-width: 899.98px) {
  .quick { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Petits écrans en hauteur (iPhone SE) : héros plus compact, le bouton « Trouver mes pneus » reste au-dessus de la barre d’onglets */
@media (max-width: 599.98px) and (max-height: 620px) {
  .hero__content { padding-top: 18px; padding-bottom: 16px; }
  .hero__title { margin-top: 8px; }
  .hero__sub { margin-top: 8px; font-size: var(--fs-md); }
  .countdown { margin-top: 10px; }
  .countdown__cell { padding-block: 6px 5px; }
  .hero__ctas { margin-top: 12px; gap: 8px; }
}

@media (min-width: 900px) {
  .hero { min-height: 620px; background: radial-gradient(90% 120% at 0% 100%, #18233f 0%, var(--night) 60%); }
  /* Héros en deux colonnes : texte à gauche, photo portrait à droite dans une colonne de 620 px au plus.
     Image et vidéo ne sont jamais agrandies (sources de 720 à 1440 px, sizes="620px") et la voiture reste entière. */
  .hero__media { left: auto; right: 0; width: min(48%, 620px); }
  .hero__media img, .hero__media video { object-position: 50% 68%; }
  .hero__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--night) 0%, rgb(10 15 29 / 0) 36%);
  }
  .hero::after { background: linear-gradient(0deg, rgb(10 15 29 / 0.5), rgb(10 15 29 / 0) 40%); }
  .hero__content { align-self: center; padding-block: 64px; }
  .hero__content > * { max-width: 560px; }
  .hero__title { font-size: clamp(3.4rem, 2rem + 3vw, 5rem); }
  .hero__content > .hero__title { max-width: 640px; } /* « L’hiver arrive. » sur une ligne jusqu’à 1440 px */
  .holiday { min-height: 520px; }
  .holiday__media img, .holiday__media video { object-position: 50% 64%; }
  .holiday__body { max-width: 640px; padding: 40px; }
  .service-card { min-height: 100%; }
}