/* =========================================================
   ACCUEIL DU GARAGE
   Le fond du héros, les prestations et le contact sont partagés avec
   KP Motors Automobiles : voir base.css et css/composants/.
   ========================================================= */

/* ---------- Héros : le logo avec le moteur en fond ---------- */
.hero{min-height:calc(100svh - 40px)}
/* Les bords de la photo se fondent dans le noir (deux dégradés croisés) */
.hero-visuel{width:auto;max-width:min(100%,1000px);max-height:min(64svh,760px);margin-bottom:clamp(24px,4vw,44px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
          mask-composite:intersect;
  animation:fonce 1.15s cubic-bezier(.16,1,.3,1) both}
/* Le slogan, modifiable dans l'admin, posé en bas de l'image d'accueil */
.slogan{position:absolute;left:0;right:0;bottom:clamp(26px,5svh,52px);z-index:1;margin:0 auto;text-align:center;
  font:600 clamp(1.15rem,2.5vw,1.9rem)/1.2 var(--titre);letter-spacing:-.02em;color:var(--blanc);animation:apparait .8s 1s both}

@keyframes fonce{
  from{opacity:0;transform:translateX(-14%) skewX(-14deg);filter:blur(16px)}
  55%{opacity:1}
  to{opacity:1;transform:none;filter:none}
}

/* ---------- L'atelier : grille en mosaïque des véhicules pris en charge ---------- */
.mosaique{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(210px,auto);gap:14px;list-style:none;margin:0;padding:0}
.tuile{--c:28px;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(22px,2.6vw,34px);background:var(--nuit);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);transition:background .2s,color .2s}
.tuile .ic{width:clamp(70px,8vw,112px);height:auto;aspect-ratio:1;stroke-width:1;color:var(--bleu);transition:color .2s}
.tuile span{font:700 clamp(1.3rem,2.3vw,2.1rem)/1.05 var(--titre);letter-spacing:-.02em}
.tuile:hover{background:var(--bleu);color:var(--noir)}
.tuile:hover .ic{color:var(--noir)}
.t-voiture{grid-column:span 3;grid-row:span 2}
.t-voiture .ic{width:clamp(110px,15vw,220px)}
.t-voiture span{font-size:clamp(1.8rem,3.6vw,3.2rem)}
.t-moto,.t-utilitaire{grid-column:span 3}
.t-engin{grid-column:span 4}
.t-bateau{grid-column:span 2}

/* ---------- Promos : les affiches du garagiste ---------- */
.grille-promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px;list-style:none;margin:0;padding:0}
.promo{--c:28px;background:var(--nuit);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.promo a{display:block;text-decoration:none}
.promo img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:opacity .2s}
.promo a:hover img{opacity:.85}
.promo-legende{padding:16px 20px 20px}
.promo-legende strong{display:block;font:700 1.02rem/1.25 var(--titre);letter-spacing:-.01em}
.promo-legende span{display:block;margin-top:4px;color:var(--gris);font-size:.92rem}

/* ---------- KP Motors Automobiles : titre, numéro et dernières annonces ---------- */
.section-automobiles{padding-top:0}
.automobiles-entete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(36px,5vw,56px)}
.automobiles-entete .chapo{margin:0}
.tel-automobiles{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--bleu);transition:color .15s}
.tel-automobiles:hover{color:var(--glace)}
.tel-automobiles small{display:block;margin-bottom:6px;font:600 .8rem/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.tel-automobiles strong{display:block;font:800 clamp(1.4rem,3.4vw,2.5rem)/1 var(--titre);letter-spacing:-.03em;white-space:nowrap}
.tel-automobiles .ic{width:clamp(28px,3vw,40px);height:auto;aspect-ratio:1;stroke-width:1.6}
.automobiles-suite{margin:28px 0 0}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(190px,auto)}
  .t-voiture{grid-column:span 2;grid-row:auto}
  .t-moto,.t-utilitaire,.t-engin{grid-column:span 1}
  .t-bateau{grid-column:span 1}
}
@media (max-width:760px){
  .hero{min-height:calc(88svh - 50px)}
}
@media (max-width:560px){
  .mosaique{grid-template-columns:1fr;grid-auto-rows:auto}
  .t-voiture,.t-moto,.t-utilitaire,.t-engin,.t-bateau{grid-column:auto}
  .tuile{flex-direction:row;align-items:center;justify-content:flex-start;gap:22px;min-height:0}
  .tuile .ic,.t-voiture .ic{width:64px}
  .tuile span,.t-voiture span{font-size:1.35rem}
}