/* ============================================
   CARBUMOTO / KAPITA FUEL — Design central
   Un seul fichier pour tout le site.
   Change une couleur ici → tout le site suit.
   ============================================ */

:root {
    /* 🎨 Couleurs signature */
    --vert:        #1b8a3f;
    --vert-fonce:  #143a1f;
    --jaune:       #f5b301;
    --orange:      #e8641b;   /* 🔥 le orange pétrole Kapita Fuel */
    --brun:        #7b4b2a;   /* épargne logement */
    --rouge:       #b3261e;
    --fond:        #f4f9f4;
    --carte-ombre: 0 3px 10px rgba(0,0,0,0.07);
}

/* ---------- Base ---------- */
* { margin:0; padding:0; box-sizing:border-box;
    font-family:'Segoe UI', Arial, sans-serif; }
body { background:var(--fond); color:#222; }

/* ---------- Header / navigation ---------- */
header.site {
    background:var(--vert-fonce); color:#fff; padding:15px 20px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:10px;
}
header.site a { color:var(--jaune); text-decoration:none; margin-left:12px; }
header.site a:hover { color:#fff; }

/* ---------- Conteneur principal ---------- */
main.site { max-width:1100px; margin:25px auto; padding:0 20px; }

/* ---------- Cartes ---------- */
.carte {
    background:#fff; border-radius:12px; padding:20px;
    box-shadow:var(--carte-ombre); margin-bottom:20px;
}
.carte h2 { color:var(--vert-fonce); margin-bottom:10px; font-size:1.25rem; }

/* ---------- Boutons ---------- */
.btn {
    display:inline-block; padding:12px 28px; border:none; border-radius:25px;
    font-weight:bold; cursor:pointer; text-decoration:none; font-size:0.95rem;
    transition:transform 0.1s, opacity 0.2s;
}
.btn:hover { opacity:0.9; transform:translateY(-1px); }
.btn-vert   { background:var(--vert);   color:#fff; }
.btn-jaune  { background:var(--jaune);  color:var(--vert-fonce); }
.btn-orange { background:var(--orange); color:#fff; }
.btn-rouge  { background:var(--rouge);  color:#fff; }
.btn-brun   { background:var(--brun);   color:#fff; }

/* ---------- Tableaux ---------- */
table.liste {
    width:100%; border-collapse:collapse; background:#fff;
    border-radius:10px; overflow:hidden; box-shadow:var(--carte-ombre);
}
table.liste th { background:var(--vert-fonce); color:#fff; padding:10px 12px; text-align:left; }
table.liste td { padding:10px 12px; font-size:0.9rem; }
table.liste tr:nth-child(even) { background:#f7faf7; }

/* ---------- Badges de statut ---------- */
.badge { display:inline-block; padding:4px 12px; border-radius:20px;
         font-size:0.82rem; font-weight:600; }
.badge-attente { background:#fff8e1; color:#8a6d00; border:1px solid var(--jaune); }
.badge-valide  { background:#e8f5e9; color:var(--vert); border:1px solid var(--vert); }
.badge-refuse  { background:#fdecea; color:var(--rouge); border:1px solid var(--rouge); }

/* ---------- Messages ---------- */
.msg-ok    { background:#e8f5e9; border-left:4px solid var(--vert);  padding:14px; border-radius:8px; margin:12px 0; }
.msg-alerte{ background:#fff8e1; border-left:4px solid var(--jaune); padding:14px; border-radius:8px; margin:12px 0; }
.msg-erreur{ background:#fdecea; border-left:4px solid var(--rouge); padding:14px; border-radius:8px; margin:12px 0; }

/* ============================================
   🖼️ BANNIÈRES (hero)
   Aujourd'hui : dégradés + motif.
   Demain : ajoute background-image et c'est tout.
   ============================================ */
.hero {
    border-radius:14px; padding:50px 30px; margin-bottom:25px;
    color:#fff; text-align:center; position:relative; overflow:hidden;
    background-size:cover; background-position:center;
}
.hero h1 {
    color:#fff;                     /* ✅ LA CORRECTION : titre blanc, toujours */
    font-size:1.9rem; margin-bottom:10px;
    text-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.hero p  { color:#fff; font-size:1.05rem; text-shadow:0 1px 4px rgba(0,0,0,0.35); }
.hero .btn { margin-top:18px; }

/* Motif discret par-dessus le dégradé */
.hero::before {
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.08) 2px, transparent 2px);
    background-size:22px 22px; pointer-events:none;
}
.hero > * { position:relative; z-index:1; }

/* Variantes de dégradés (en attendant les photos) */
.hero-caisses  { background-image: linear-gradient(135deg, #1b8a3f 0%, #0d5c28 50%, #143a1f 100%); }
.hero-faq      { background-image: linear-gradient(135deg, #2b6cb0 0%, #1a4a80 60%, #143a1f 100%); }
.hero-contact  { background-image: linear-gradient(135deg, #f5b301 0%, #c98a00 55%, #143a1f 100%); }
.hero-stations { background-image: linear-gradient(135deg, #b3261e 0%, #7a1a14 55%, #143a1f 100%); }
.hero-accueil  { background-image:linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert) 60%, var(--orange) 130%); }
.hero-carburant{ background-image:linear-gradient(135deg, #3a2200 0%, var(--orange) 80%); }
.hero-epargne  { background-image:linear-gradient(135deg, #3d2313 0%, var(--brun) 75%); }
.hero-marche   { background-image:linear-gradient(135deg, var(--vert-fonce) 0%, var(--jaune) 140%); }

/* 📱 ---------- Mobile ---------- */
@media (max-width:700px) {
    .hero { padding:35px 18px; }
    .hero h1 { font-size:1.4rem; }
    table.liste th, table.liste td { padding:6px; font-size:0.78rem; }
    header.site { justify-content:center; text-align:center; }
}