/* =========================================================================
   Garage Boussin — feuille de styles
   La mise en page responsive (container/row/col) est fournie par le bundle
   « bootstrap-grid » (cdnjs). Ce fichier gère uniquement l'habillage :
   couleurs, typographie et composants.
   ========================================================================= */

/* ----- Tokens ----------------------------------------------------------- */
:root{
  --bg:#16171A;
  --bg-page:#0d0e10;
  --bg-section-alt:#1A1B1E;
  --bg-strip:#1E2023;
  --bg-fioul:#141517;
  --bg-ami:#1B1D20;
  --bg-footer:#0f1012;

  --card-bg:#202226;
  --card-border:#2E3035;
  --border:#2A2C30;
  --border-strong:#3A3D42;

  --text:#F3F1ED;
  --text-2:#D2D4D8;
  --text-muted:#B7B9BE;
  --text-dim:#9C9EA3;
  --text-faint:#8A8D93;
  --nav-link:#C9CBD0;

  --accent:#E8462C;        /* orange de marque — fonds, bordures, puces */
  --accent-text:#F0623F;   /* orange lisible pour le TEXTE (contraste AA sur fonds sombres) */
  --accent-2:#ff5a3c;
  --accent-3:#ff6a4d;
  --ami:#8AA6B8;
  --ami-2:#a3bccd;

  --font-body:'Archivo',system-ui,sans-serif;
  --font-display:'Space Grotesk',sans-serif;
  --maxw:1240px;
}

/* ----- Base ------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;padding:0;}
img{max-width:100%;}
a{color:var(--accent-text);text-decoration:none;}
a:hover{color:var(--accent-3);}
section[id]{scroll-margin-top:80px;}

.site{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  width:100%;
}
/* Conteneur maison (max-width propre au design, distinct du .container Bootstrap) */
.wrap{max-width:var(--maxw);margin:0 auto;width:100%;}

/* ----- Éléments partagés ------------------------------------------------ */
.eyebrow{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:16px;
}
.section-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.2vw,42px);line-height:1.06;letter-spacing:-.02em;
  margin:0;text-wrap:pretty;
}
.section-head{margin-bottom:52px;max-width:640px;}

/* ----- Boutons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;font-weight:700;font-size:15px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn--primary{background:var(--accent);color:#fff;padding:16px 28px;}
.btn--primary:hover{background:var(--accent-2);color:#fff;}
.btn--outline{background:transparent;color:var(--text);padding:15px 26px;border:1px solid var(--border-strong);}
.btn--outline:hover{border-color:#7a7f86;color:#fff;}
.btn--ami{background:var(--ami);color:#16171A;padding:15px 26px;align-self:flex-start;}
.btn--ami:hover{background:var(--ami-2);color:#16171A;}
.btn--dark{background:#16171A;color:#fff;padding:17px 30px;font-size:16px;}
.btn--dark:hover{background:#000;color:#fff;}

/* ----- Header ----------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 40px;
  background:rgba(20,21,24,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header__logo{height:44px;width:auto;display:block;}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600;}
.nav__link{color:var(--nav-link);}
.nav__link:hover{color:var(--text);}
.nav__cta{
  color:#fff;background:var(--accent);padding:11px 20px;border-radius:999px;
  font-weight:700;transition:background-color .2s ease;
}
.nav__cta:hover{background:var(--accent-2);color:#fff;}
.nav__toggle{
  display:none;background:transparent;border:0;color:var(--text);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px;
}
.nav__toggle:hover{color:var(--accent-text);}

/* ----- Hero ------------------------------------------------------------- */
.hero{
  position:relative;min-height:704px;display:flex;align-items:flex-end;
  /* Remonte le hero sous le header sticky translucide (pas de vide, contrairement à top:-80px) */
  margin-top:-80px;
  padding:64px 40px 60px;background:var(--bg-page);overflow:hidden;
}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(13,14,16,.92) 6%,rgba(13,14,16,.55) 46%,rgba(13,14,16,.2) 80%),
    linear-gradient(0deg,rgba(13,14,16,.9),rgba(13,14,16,0) 58%);
}
.hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;}
.hero__logo-row{display:flex;align-items:center;gap:20px;margin-bottom:30px;}
.hero__logo{height:110px;width:auto;display:block;}
.hero__content{max-width:760px;}
.hero__eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--accent-text);
  text-transform:uppercase;margin-bottom:18px;
}
.hero__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(42px,5vw,70px);line-height:1.01;letter-spacing:-.025em;
  margin:0 0 22px;text-wrap:balance;
}
.hero__text{font-size:18px;color:var(--text-2);max-width:560px;margin:0 0 34px;line-height:1.55;}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* ----- Bandeau image ---------------------------------------------------- */
.banner{position:relative;height:200px;overflow:hidden;border-bottom:1px solid var(--border);}
.banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) grayscale(.15);}
.banner__inner{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:0 40px;}
.banner__text{
  font-family:var(--font-display);font-size:clamp(19px,2.4vw,30px);font-weight:500;
  letter-spacing:-.01em;color:#fff;text-align:center;max-width:840px;margin:0;
}

/* ----- Bandeau de confiance --------------------------------------------- */
.trust{background:var(--bg-strip);border-bottom:1px solid var(--border);}
.trust__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:14px 40px;padding:20px 40px;justify-content:center;
  font-size:13.5px;color:#C0C2C7;font-weight:600;
}
.trust__item{display:inline-flex;align-items:center;gap:9px;}
.trust__dot{width:7px;height:7px;border-radius:999px;background:var(--accent);}

/* ----- Le garage -------------------------------------------------------- */
.about{padding:100px 40px;}
.about__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.2vw,42px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 22px;text-wrap:pretty;
}
.about__para{font-size:16.5px;line-height:1.65;color:var(--text-muted);margin:0 0 18px;}
.about__para:last-child{margin:0;}
.about__img{width:100%;height:440px;object-fit:cover;border-radius:14px;border:1px solid var(--border);display:block;}

/* ----- Services --------------------------------------------------------- */
.services{
  padding:100px 40px;background:var(--bg-section-alt);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.service-card{
  height:100%;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;
  padding:26px 24px 30px;transition:border-color .2s ease,transform .2s ease;
}
.service-card:hover{border-color:var(--accent);transform:translateY(-4px);}
.service-card__num{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--accent-text);margin-bottom:20px;}
.service-card__title{font-family:var(--font-display);font-weight:700;font-size:18px;margin:0 0 8px;}
.service-card__text{font-size:14px;line-height:1.55;color:var(--text-dim);margin:0;}

/* ----- Véhicules -------------------------------------------------------- */
.vehicles{padding:100px 40px;}
.vehicles__head{margin-bottom:52px;max-width:680px;}
.vehicle-card{
  height:100%;display:flex;flex-direction:column;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;
}
.vehicle-card__img{width:100%;height:230px;object-fit:cover;display:block;}
.vehicle-card__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.vehicle-card__title{font-family:var(--font-display);font-weight:700;font-size:21px;margin:0 0 10px;}
.vehicle-card__text{font-size:15px;line-height:1.58;color:var(--text-muted);margin:0 0 22px;}
/* Bouton aligné en bas de carte (margin-top:auto), tap-target confortable */
.vehicle-card__cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--accent-text);
  font-weight:700;font-size:14.5px;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.vehicle-card__cta:hover{border-color:var(--accent);background:rgba(232,70,44,.08);color:var(--accent-3);}

/* Mur de logos animé (carte occasion) */
.logo-wall{position:relative;height:230px;overflow:hidden;background:#131417;display:block;}
.logo-wall__rotor{
  position:absolute;top:50%;left:50%;width:220%;height:230%;
  transform:translate(-50%,-50%) rotate(-20deg);
  display:flex;flex-direction:column;justify-content:center;gap:34px;
}
.logo-wall__fade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#131417 0%,rgba(19,20,23,0) 12%,rgba(19,20,23,0) 88%,#131417 100%);
}
.logos_topbar{display:flex;align-items:center;gap:30px;width:max-content;animation:gb-marq 50s linear infinite;}
.logos_botbar{display:flex;align-items:center;gap:30px;width:max-content;animation:gb-marq2 60s linear infinite;}
.logos_topbar img,
.logos_botbar img{height:80px;width:auto;flex:0 0 auto;filter:brightness(0) invert(1);opacity:.92;}
@keyframes gb-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gb-marq2{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ----- Citroën AMI ------------------------------------------------------ */
.ami{border-top:1px solid var(--border);}
.ami__img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px;}
.ami__content{
  height:100%;background:var(--bg-ami);padding:80px 60px;
  display:flex;flex-direction:column;justify-content:center;
}
.ami__eyebrow{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ami);margin-bottom:16px;
}
.ami__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3vw,40px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 20px;text-wrap:pretty;
}
.ami__text{font-size:16.5px;line-height:1.65;color:var(--text-muted);margin:0 0 26px;max-width:480px;}
.ami__list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
.ami__item{display:inline-flex;align-items:center;gap:11px;font-size:15px;color:var(--text-2);}
.ami__dot{width:7px;height:7px;border-radius:999px;background:var(--ami);}

/* ----- Fioul & GNR ------------------------------------------------------ */
.fioul{padding:70px 40px;background:var(--bg-fioul);border-top:1px solid var(--border);}
.fioul__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
}
.fioul__text-col{max-width:640px;}
.fioul__eyebrow{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:14px;
}
.fioul__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.02em;margin:0 0 12px;
}
.fioul__para{font-size:16px;line-height:1.6;color:var(--text-muted);margin:0;}

/* ----- Bandeau CTA ------------------------------------------------------ */
.cta{background:var(--accent);padding:76px 40px;}
.cta__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;
}
.cta__text-col{max-width:640px;}
.cta__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.2vw,42px);line-height:1.05;letter-spacing:-.02em;margin:0 0 12px;color:#fff;
}
.cta__para{font-size:17px;line-height:1.55;color:#ffe4dc;margin:0;}

/* ----- Contact ---------------------------------------------------------- */
.contact{padding:100px 40px;}
.contact__block{margin-bottom:28px;}
.contact__label{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:8px;
}
.contact__label--hours{margin-bottom:12px;}
.contact__value{font-size:19px;font-weight:600;color:var(--text);transition:color .2s ease;}
a.contact__value:hover{color:var(--accent-text);}
.contact__cols{display:flex;flex-wrap:wrap;gap:32px;margin-bottom:32px;}

.hours{margin-bottom:32px;}
.hours__row{
  display:flex;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--border);
}
.hours__day{font-weight:600;color:var(--text);}
.hours__time{color:var(--text-muted);}
.hours__time--closed{color:var(--text-faint);}

.map-links{display:flex;flex-wrap:wrap;gap:10px;}
.map-links__link{
  display:inline-flex;align-items:center;padding:11px 18px;
  border:1px solid var(--border-strong);border-radius:999px;
  color:var(--text);font-weight:600;font-size:13.5px;
  transition:border-color .2s ease,color .2s ease;
}
.map-links__link:hover{border-color:var(--accent);color:#fff;}
.map-links__icon{height:18px;}

.contact__map{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);min-height:400px;}
.contact__map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.contact__map-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,14,16,.82),rgba(13,14,16,0) 55%);}
.contact__map-pin{position:absolute;left:26px;bottom:24px;display:flex;align-items:center;gap:12px;}
.contact__map-dot{width:16px;height:16px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 5px rgba(232,70,44,.3);}
.contact__map-label{font-weight:600;font-size:16px;color:#fff;}

/* ----- Footer ----------------------------------------------------------- */
.site-footer{background:var(--bg-footer);border-top:1px solid var(--border);padding:40px;}
.site-footer__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.site-footer__logo{height:50px;width:auto;opacity:.9;display:block;}
.site-footer__copy{font-size:13px;color:#8A8D93;}

/* =========================================================================
   Responsive — les colonnes sont gérées par Bootstrap (col-*), on ajuste
   ici les espacements, le header et quelques hauteurs.
   ========================================================================= */
@media (min-width:992px){
  .ami__row{min-height:540px;}
}

@media (max-width:900px){
  .ami__content{padding:56px 32px;}
}

@media (max-width:860px){
  .site-header{padding:12px 20px;}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center;}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px 20px 16px;
    background:rgba(20,21,24,.98);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    display:none;
  }
  .site-header.is-open .nav{display:flex;}
  .nav__link{padding:14px 2px;border-bottom:1px solid var(--border);}
  .nav__cta{margin-top:14px;justify-content:center;}
}

@media (max-width:680px){
  .hero{min-height:600px;padding:48px 20px;}
  .hero__logo{height:84px;}
  .about,.services,.vehicles,.contact{padding:64px 20px;}
  .fioul,.cta{padding:56px 20px;}
  .banner__inner{padding:0 20px;}
  .trust__inner{padding:20px;}
  .ami__content{padding:48px 24px;}
  .about__img{height:300px;}
  .section-head,.vehicles__head{margin-bottom:36px;}
}

/* ----- Barre d'action fixe (mobile) ------------------------------------- */
.mobile-bar{display:none;}
@media (max-width:860px){
  .site{padding-bottom:74px;}
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(16,17,18,.94);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
  }
  .mobile-bar__btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 12px;border-radius:12px;font-weight:700;font-size:15px;
  }
  .mobile-bar__btn--call{background:transparent;color:var(--text);border:1px solid var(--border-strong);}
  .mobile-bar__btn--rdv{background:var(--accent);color:#fff;}
}

/* ----- Bandeau de consentement cookies ---------------------------------- */
.cookie-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:rgba(20,21,24,.98);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
}
.cookie-consent[hidden]{display:none;}
.cookie-consent__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
}
.cookie-consent__text{margin:0;font-size:14px;line-height:1.55;color:var(--text-muted);max-width:720px;}
.cookie-consent__actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-consent__btn{
  border-radius:999px;padding:11px 22px;font-weight:700;font-size:14px;cursor:pointer;
  border:1px solid transparent;transition:background-color .2s ease,border-color .2s ease;
}
.cookie-consent__btn--refuse{background:transparent;color:var(--text);border-color:var(--border-strong);}
.cookie-consent__btn--refuse:hover{border-color:#7a7f86;}
.cookie-consent__btn--accept{background:var(--accent);color:#fff;}
.cookie-consent__btn--accept:hover{background:var(--accent-2);}

/* ----- Carte contact cliquable (itinéraire) ----------------------------- */
a.contact__map{display:block;text-decoration:none;}
a.contact__map:hover .contact__map-img{transform:scale(1.04);}

/* ----- Accessibilité : focus clavier visible ---------------------------- */
a:focus-visible,
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* Liens en pleine ligne de texte : soulignés (distinction non basée sur la seule couleur) */
.site-footer__copy a,
.cookie-consent__text a,
.doc a{text-decoration:underline;text-underline-offset:2px;}

/* Bouton présenté comme un lien (ex. « Gérer les cookies ») */
.linklike{
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;
  color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;
}
.linklike:hover{color:var(--accent-3);}

/* ----- Respect de « réduire les animations » ---------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .logos_topbar,.logos_botbar{animation:none;}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ----- Lien d'évitement (accessibilité clavier) ------------------------- */
.skip-link{
  position:absolute;left:12px;top:-80px;z-index:100;
  background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;
  font-weight:700;transition:top .15s ease;
}
.skip-link:focus{top:12px;}
#contenu{scroll-margin-top:80px;}

/* ----- Pages de contenu (mentions, accessibilité) ----------------------- */
.doc{max-width:820px;margin:0 auto;padding:120px 40px 100px;}
.doc h1{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin:0 0 10px;}
.doc h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin:40px 0 12px;}
.doc p,.doc li{font-size:16px;line-height:1.65;color:var(--text-muted);}
.doc li{margin-bottom:8px;}
.doc strong{color:var(--text);}
.doc__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:44px;font-weight:700;}
@media (max-width:680px){ .doc{padding:90px 20px 70px;} }