/* ========== Design tokens ========== */
:root {
  --bg:#0a0a0a;         /* Noir profond pour le fond */
  --bg-soft:#1a1a1a;    /* Gris foncé pour sections alternées */
  --card:#111111;       /* Fond des cartes (formations, avis, etc.) */
  --muted:#bbbbbb;      /* Texte secondaire en gris clair */
  --text:#ffffff;       /* Texte principal en blanc */
  --accent:#e50914;     /* Rouge vif pour boutons et éléments clés */
  --accent-ink:#ffffff; /* Texte blanc sur les boutons rouges */
  --outline:#333333;    /* Bordures discrètes */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg) 50%, var(--bg-soft) 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.15;margin:0 0 .5rem
}
h1{font-size:clamp(2rem,3.5vw,3rem)}
h2{font-size:clamp(1.5rem,2.5vw,2rem)}
h3{font-size:1.15rem}
p{margin:.5rem 0 .9rem}
a{color:var(--text);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,var(--bg-soft) 0%, #0f1a33 100%)}
.section-lead{color:var(--muted);max-width:70ch}

/* Utilities */
.accent{color:var(--accent)}
.lead{color:var(--muted);font-size:1.05rem}
.tiny-note{color:var(--muted);font-size:.85rem;margin-top:10px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:6px;z-index:1000}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.8rem 1.1rem;font-weight:700;border:1px solid transparent;transition:.2s}
.btn.block{width:100%}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.secondary{border-color:var(--outline);background:transparent}
.btn.secondary:hover{border-color:var(--text)}
.btn.ghost{border-color:transparent;background:rgba(255,255,255,.06)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(5,10,20,.7);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);display:inline-block}
.menu{display:flex;gap:16px;align-items:center}
.menu a{opacity:.9}
.menu a:hover{opacity:1}
.menu-toggle{display:none;background:transparent;border:1px solid var(--outline);color:var(--text);padding:.45rem .65rem;border-radius:8px}
@media (max-width:860px){
  .menu-toggle{display:inline-flex}
  .menu{position:fixed;inset:64px 0 auto 0;background:rgba(7,12,24,.95);backdrop-filter:blur(6px);flex-direction:column;padding:16px;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-110%);transition:transform .2s ease}
  .menu.open{transform:translateY(0)}
  .menu a{display:block;width:100%;padding:10px 8px}
}

/* Hero */
.hero{padding:64px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.hero-copy .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:.6rem 0 1rem}
.hero-badges{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);padding:0;margin:0;list-style:none}
.hero-media{display:flex;justify-content:center}
.phone-mock{width:280px;height:540px;border-radius:32px;background:linear-gradient(180deg,#111827 0%, #0b1220 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.45);padding:10px;display:flex;flex-direction:column;gap:10px}
.phone-mock .status{height:10px;background:#000;border-radius:8px}
.phone-mock .screen{flex:1;display:flex;flex-direction:column;gap:10px}
.screen-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px}
.screen-card strong{display:block}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
}

/* KPIs */
.trust{padding:20px 0 8px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trust-item{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px;text-align:center}
.kpi{font-size:1.6rem;font-weight:800;color:var(--accent)}
.kpi-label{color:var(--muted)}
@media (max-width:768px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.card ul{padding-left:18px;color:var(--muted)}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.price-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;position:relative}
.price-card.highlight{outline:2px solid rgba(250,204,21,.5)}
.price-badge{position:absolute;top:10px;right:10px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.8rem;padding:4px 8px;border-radius:999px}
.price{font-size:1.5rem;font-weight:800}
.price span{font-size:.9rem;color:var(--muted);font-weight:600;margin-right:6px}
@media (max-width:1024px){
  .pricing{grid-template-columns:1fr}
}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.review{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px}
.review blockquote{margin:0 0 .5rem}
@media (max-width:1024px){
  .reviews{grid-template-columns:1fr}
}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr;gap:12px}
.faq-item{border:1px solid rgba(255,255,255,.08);background:var(--card);border-radius:12px;padding:8px 12px}
.faq-item button{width:100%;text-align:left;background:transparent;border:0;color:var(--text);font-weight:700;padding:10px 6px}
.faq-item div{color:var(--muted);padding:0 6px 8px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-list{padding-left:0;list-style:none;color:var(--muted)}
.map-embed{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);height:320px}
.map-embed iframe{width:100%;height:100%;border:0}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr}
}

/* Footer */
.footer{padding:32px 0;border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.brand.foot{font-weight:800}
.foot-links{display:flex;gap:12px;flex-wrap:wrap}
.foot-note{color:var(--muted)}
@media (max-width:700px){
  .foot-grid{grid-template-columns:1fr}
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==== Brand (logo + texte) ==== */
.brand { display:inline-flex; align-items:center; gap:.6rem; font-weight:800; }
.brand-text { font-size:1.05rem; letter-spacing:.1px; }

/* Taille du logo (header + footer) */
.brand-logo { height:48px; width:auto; display:block; }

/* Header un peu plus haut pour accueillir le logo */
.nav { height:72px; }

/* Footer: alignement propre */
.brand.foot .brand-logo { height:44px; }
.brand.foot .brand-text { font-size:1rem; }

/* Version mobile: on réduit légèrement pour que ça tienne bien */
@media (max-width: 860px){
  .brand-logo { height:40px; }
  .nav { height:64px; }
}

.hero-media img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;   /* arrondi des coins */
  box-shadow: 0 12px 40px rgba(0,0,0,.45); /* ombre pour relief */
}

.gallery{position:relative;display:flex;align-items:center;gap:8px}
.g-viewport{overflow:hidden;border-radius:16px;flex:1;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.g-track{display:flex;transition:transform .3s ease}
.g-track img{width:100%;max-width:100%;height:auto;flex:0 0 100%;object-fit:cover;background:#000}
.g-prev,.g-next{
  background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:12px;
  width:40px;height:40px;font-size:24px;cursor:pointer
}
.g-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.g-dots button{width:8px;height:8px;border-radius:999px;border:0;background:#444;cursor:pointer}
.g-dots button.active{background:var(--accent)}
@media (max-width:768px){ .g-prev,.g-next{display:none} }

.price-card .cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}
.price-card .btn{
  flex:1 1 160px; /* 2 boutons côte à côte, passent l’un sous l’autre sur mobile */
}
#points-personnalise h2,
#points-personnalise .section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; /* pour limiter la largeur du texte */
}

#points-personnalise .cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
#points-personnalise .card {
  flex: 1 1 300px;
  max-width: 350px; /* largeur max des cartes */
  text-align: center; /* centrer le texte dans chaque carte */
}

/* === Centrage section Suivi post-permis === */
#post-permis h2,
#post-permis .section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
#post-permis .cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
#post-permis .card {
  flex: 1 1 280px;
  max-width: 320px;
  text-align: center;
}

/* === Centrage section Récupération de points & Permis personnalisé === */
#points-personnalise h2,
#points-personnalise .section-lead {
  text-align: center;
  margin-left: auto;
  margin-r
}
/* Cadre fixe pour la galerie : 16:9 (moderne) */
.gallery{ --ratio: 16/9; }             /* ratio par défaut */
.g-viewport{
  aspect-ratio: var(--ratio);
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.g-track{ display:flex; height:100%; transition:transform .3s ease; }
.g-track img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* remplit le cadre en recadrant un peu si besoin */
  object-position: center;
  background:#000;        /* évite les bordures claires si l’image est plus petite */
}


.g-track img {
  object-fit: cover !important;
  object-position: 30% 55% !important; 
}

/* Ajustement spécifique pour la Clio grise (voiture1) */
.g-track img.voiture1 {
  object-position: 30% 65% !important; /* descend légèrement */
}