/* ------------------------------------------------------------------
   Palette
   ------------------------------------------------------------------ */
   :root {
    /* Rouge logo */
    --clr-primary: #d62828;
    --clr-primary-dark: #b31f1f;
  
    /* Bleu nuit (fond navbar / footer) */
    --clr-nav: #081533;
  
    /* Couleurs de texte / fond génériques */
    --clr-bg: #e7ebf2;
    --clr-text: #222;
    --clr-white: #fff;
  }
  
  /* ------------------------------------------------------------------
     Reset & base
     ------------------------------------------------------------------ */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html { scroll-behavior: smooth; }
  
  body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
  }
  
  h1,h2,h3,h4 { font-weight: 700; margin-bottom: .5em; }
  
  a { color: inherit; text-decoration: none; }
  
  img { max-width: 100%; height: auto; display: block; }
  
  /* ------------------------------------------------------------------
     Layout helpers
     ------------------------------------------------------------------ */
  .container { width: min(90%,1200px); margin-inline: auto; }
  
  .btn{
    display:inline-block;background:var(--clr-primary);color:var(--clr-white);
    padding:.75em 1.5em;border-radius:.25rem;transition:background .3s ease;
  }
  .btn:hover,.btn:focus{background:var(--clr-primary-dark)}
  
  /* ------------------------------------------------------------------
     Navigation
     ------------------------------------------------------------------ */
  .navbar{background:var(--clr-nav);color:var(--clr-white);}
  .navbar .container{
    display:flex;justify-content:space-between;align-items:center;padding-block:.7rem;
  }
  
  .navbar-brand{display:flex;align-items:center;gap:.5rem;}
  .navbar-brand img.logo{height:42px;width:auto;}
  
  .nav-links{display:flex;gap:1.25rem;list-style:none;}
  .nav-links a{color:var(--clr-white);font-weight:500;position:relative;}
  .nav-links a::after{
    content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;
    background:var(--clr-white);transition:width .3s ease;
  }
  .nav-links a:hover::after,.nav-links a:focus::after{width:100%;}
  
  /* Burger menu (mobile) */
  .burger{display:none;flex-direction:column;gap:4px;cursor:pointer;}
  .burger span{width:24px;height:2px;background:var(--clr-white);}
  
  /* ------------------------------------------------------------------
     Hero
     ------------------------------------------------------------------ */
  .hero{
    background:url('../img/contact-1.webp') center/cover no-repeat;
    min-height:55vh;display:grid;place-items:center;text-align:center;
    color:var(--clr-white);padding:2rem 1rem;
  }
  .hero h1{font-size:clamp(1.8rem,4vw+1rem,3.2rem);max-width:22ch;margin-inline:auto;}
  .hero .btn{margin-top:1.5rem;}
  
  /* ------------------------------------------------------------------
     Services
     ------------------------------------------------------------------ */
  .services{padding:4rem 0 2rem;}
  .services-grid{
    display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
  .service-card{
    background:var(--clr-white);border-radius:.5rem;padding:1.75rem;
    box-shadow:0 4px 12px rgba(0,0,0,.06);text-align:center;
  }
  .service-card h3{margin-bottom:.75rem;}
  
  /* ------------------------------------------------------------------
     Testimonials
     ------------------------------------------------------------------ */
  .testimonials{background:var(--clr-primary);color:var(--clr-white);padding:3rem 0;}
  .testimonials h2{text-align:center;margin-bottom:2rem;color:var(--clr-white);}
  .testimonial-grid{
    display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
  .testimonial{
    background:rgba(255,255,255,.07);padding:1.5rem;border-radius:.5rem;font-style:italic;
  }
  
  /* ------------------------------------------------------------------
     Footer
     ------------------------------------------------------------------ */
  footer{background:var(--clr-nav);color:var(--clr-white);padding:2rem 0;font-size:.9rem;}
  footer .footer-grid{
    display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
  footer h4{color:var(--clr-white);margin-bottom:1rem;}
  footer ul{list-style:none;line-height:1.9;}
  .footer-bottom{text-align:center;margin-top:2rem;}
  
  /* ------------------------------------------------------------------
     Form (contact) 
     ------------------------------------------------------------------ */
  form{display:grid;gap:1rem;max-width:600px;margin-inline:auto;}
  input,textarea{
    padding:.8rem 1rem;border:1px solid #ccc;border-radius:.25rem;font:inherit;
  }
  textarea{resize:vertical;min-height:140px;}
  
  /* ------------------------------------------------------------------
     Responsive
     ------------------------------------------------------------------ */
  @media(max-width:768px){
    .nav-links{
      position:absolute;inset:72px 1rem auto 1rem;background:var(--clr-nav);
      flex-direction:column;gap:.75rem;padding:1rem 1.25rem;border-radius:.5rem;
      transform:scaleY(0);transform-origin:top;transition:transform .28s ease;z-index:99;
    }
    .nav-links.open{transform:scaleY(1);}
    .burger{display:flex;}
  }

  /* ======= Ajustements 24-06-2025 ======= */

/* Logo nettement plus visible */
.navbar-brand img.logo{
    height:100px;          /* ↑ était 42px */
    width:auto;
  }
  
  /* Hero – fond sombre par défaut pour assurer le contraste
     (l'image, si elle existe, reste appliquée) */
     .hero{
        background:url('../images/garage-hero.webp') center/cover no-repeat;
        height:55vh;                 /* hauteur fixe – stop net à 55 % viewport   */
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        color:var(--clr-white);
        padding:2rem 1rem;
        overflow:hidden;             /* au cas où un futur pseudo-élément est remis */
      }
  .hero>*{position:relative;}   /* remet le texte au premier plan */
  
  /* Espace supplémentaire avant le footer */
  .testimonials{padding-bottom:4rem;}
  
  /* Footer – grille en 2 colonnes + style agences */
  footer .footer-grid{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  }
  
  .footer-agency{
    margin-bottom:1rem;
  }
  .footer-agency:not(:last-child){
    border-bottom:1px solid rgba(255,255,255,.15);
    padding-bottom:.75rem;
    margin-bottom:1.25rem;
  }

  /* ======= Patch 24-06-2025 #2 ======= */

/* Plus d’air avant le footer */
footer{
    margin-top:4rem;            /* crée l’espace “au-dessus” */
  }
  
  /* Colonne dépannage + N° très visible */
  .footer-emergency{
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .footer-emergency .tel{
    font-size:1.5rem;           /* plus grand */
    font-weight:700;
    letter-spacing:.5px;
  }

/* ===== HERO pleine image ===== */
.hero-banner{
    min-height:75vh;                                  /* hauteur > 50% viewport */
    background:url('../images/garage-hero.webp') right center / cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    color:var(--clr-white);
    padding:2rem 1rem;
  }
  
  /* Voile sombre pour le contraste */
  .hero-banner::before{
    content:"";
    position:absolute; inset:0;
    background:rgba(8,21,51,.55);                     /* 55 % d’opacité */
    backdrop-filter:brightness(.9);
  }
  
  /* Garantit que le texte passe au-dessus du voile */
  .hero-banner .hero-inner{ position:relative; z-index:1; }
  
  header.hero-banner h1{
    font-size:clamp(2.8rem,6vw + 1rem,4.2rem) !important;
    line-height:1.15 !important;
  }

  /* ===== SOS Dépannage (footer) ===== */
.footer-emergency{
    text-align:center;
    background:rgba(214, 40, 40, .12);          /* léger halo rouge */
    border:2px solid var(--clr-primary);
    border-radius:.5rem;
    padding:1.25rem 1rem;
    line-height:1.4;
    max-width:260px;                            /* garde une taille raisonnable */
    margin-inline:auto;
  }
  
  .footer-emergency .emerg-title{
    font-size:1.2rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:.25rem;
  }
  
  .footer-emergency .emerg-hours{
    font-weight:600;
    margin-bottom:.5rem;
  }
  
  .footer-emergency .emerg-tel{
    font-size:2rem;                             /* numéro très visible */
    font-weight:800;
    color:var(--clr-primary);
  }

  /* ===== AVIS CLIENTS – nouveau look ===== */
.testimonials{
    background:var(--clr-bg);          /* abandon du rouge plein – on aère */
    padding:5rem 0 6rem;               /* + marge haute/basse */
  }
  
  .testimonials h2{
    color:var(--clr-text);
    margin-bottom:3rem;
  }
  
  .testimonial-grid{
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  }
  
  .testimonial{
    position:relative;
    background:var(--clr-white);
    color:var(--clr-text);
    padding:2.25rem 2rem 1.75rem;
    border-radius:.75rem;
    box-shadow:0 12px 25px rgba(0,0,0,.08);
    font-style:italic;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  
  .testimonial:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 30px rgba(0,0,0,.12);
  }
  
  /* Gros guillemet décoratif */
  .testimonial::before{
    content:"\201C";                    /* “ */
    position:absolute;
    top:-20px; left:24px;
    font-size:5rem;
    line-height:1;
    color:var(--clr-primary);
    opacity:.15;
    pointer-events:none;
  }

  /* ===== SECTION SPACING GENERAL ===== */
section{
    padding:4.5rem 0;
  }
  
  /* ===== HEADINGS accentués ===== */
  h2{
    position:relative;
    margin-bottom:2.75rem;
  }
  h2::after{
    content:"";
    position:absolute;
    left:50%;               /* centré */
    transform:translateX(-50%);
    bottom:-12px;
    width:80px;
    height:3px;
    background:var(--clr-primary);
    border-radius:2px;
  }
  
  /* ===== 1. Bande Services (cartes) ===== */
  .services{
    background:var(--clr-white);
  }
  
  /* ===== 2. CTA véhicules ===== */
  .cta-vehicles{
    background:var(--clr-primary);
    color:var(--clr-white);
    text-align:center;
  }
  .btn--invert{
    background:var(--clr-white);
    color:var(--clr-primary);
  }
  .btn--invert:hover,
  .btn--invert:focus{
    background:var(--clr-white);
    opacity:.85;
  }
  
  /* ===== 3. Bande Avis Clients ===== */
  .testimonials{
    background:#f4f5f9;        /* gris très clair différent du fond global */
  }
  
  .service-icon{
    width:90px;           /* ↑ taille (ajustez 80-110px selon vos goûts) */
    height:auto;
    display:block;
    margin:0 auto 1rem;   /* centre horizontalement + espace dessous */
  }