/* ===== Base ===== */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.14);
  --ring:rgba(14,132,199,.25);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#b9dcff;

  /* Thèmes */
  --gold:#d9c845; --gold-dark:#b1a326;
  --blue:#2563eb; --blue-dark:#1e3a8a;
  --badge-g-bg:#fff8d6; --badge-g:#7a6a14;
  --badge-b-bg:#eef2ff; --badge-b:#1d4ed8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#0b1220,#1a1f2b);
}

/* ===== Layout ===== */
.wrap{max-width:1060px;margin:0 auto;padding:20px}

/* ===== Titre page neutre et centré ===== */
.portfolio-title{
  margin:.7rem auto 1.1rem;
  text-align:center;
  font-weight:800;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  line-height:1.15;
  color:#e5e7eb;           /* neutre ardoise */
  background:none;
  border:0;
  text-shadow:none;
}

/* ===== Grille projets: 2 colonnes desktop, 1 mobile ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(300px,1fr));
  gap:20px;
  margin:16px 0 28px;
}
@media (max-width:780px){ .grid{grid-template-columns:1fr; gap:14px }}

/* ===== Cartes ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  display:flex;flex-direction:column;min-height:100%;
}
.card__media{
  aspect-ratio:16/9;
  background:#0b1220;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02);transition:transform .25s ease}
.card:hover .card__media img{ transform:scale(1.02) }

.card__body{ padding:12px 14px 16px }
.card__title{ margin:.2rem 0 .35rem; font-weight:800; font-size:1.1rem }
.card__meta{ color:var(--muted); font-size:.92rem; margin-bottom:.35rem }
.badges{ display:flex; flex-wrap:wrap; gap:6px; margin:.25rem 0 .6rem }
.badge{ padding:.18rem .46rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); font-size:.78rem; color:#dbeafe }

/* ===== Thèmes par projet ===== */
.card--enn .card__title{ color:var(--gold-dark) }
.card--enn .badge{ background:var(--badge-g-bg); color:var(--badge-g); border:1px solid #f3e7a1 }
.card--enn .btn{
  background:linear-gradient(135deg,var(--gold),#f1de5a);
  color:#111;
  box-shadow:0 6px 14px rgba(217,200,69,.25), 0 0 0 4px var(--ring);
}

.card--dcp .card__title{ color:var(--blue-dark) }
.card--dcp .badge{ background:var(--badge-b-bg); color:var(--badge-b); border:1px solid #dbe5ff }
.card--dcp .btn{
  background:linear-gradient(135deg,var(--blue),#3b82f6);
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.25), 0 0 0 4px var(--ring);
}
/* ===== Thèmes par projet ===== */
.card--enn .card__title{ color:var(--gold-dark) }
.card--enn .badge{ background:var(--badge-g-bg); color:var(--badge-g); border:1px solid #f3e7a1 }
.card--enn .btn{
  background:linear-gradient(135deg,var(--gold),#f1de5a);
  color:#111;
  box-shadow:0 6px 14px rgba(217,200,69,.25), 0 0 0 4px var(--ring);
}

.card--dcp .card__title{ color:var(--blue-dark) }
.card--dcp .badge{ background:var(--badge-b-bg); color:var(--badge-b); border:1px solid #dbe5ff }
.card--dcp .btn{
  background:linear-gradient(135deg,var(--blue),#3b82f6);
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.25), 0 0 0 4px var(--ring);
}

/* Thème Intervention – orange/rouge */
.card--intervention .card__title{
  color:#FF5733; /* proche de ce que tu utilises déjà */
}

.card--intervention .badge{
  background:rgba(248,113,113,.10);  /* léger fond rouge/orange */
  color:#fee2e2;
  border:1px solid rgba(248,113,113,.7);
}

/* Bouton Intervention orange/rouge très visible */
.card--intervention .btn{
  background:linear-gradient(135deg,#FF5733,#f97316);
  color:#fff;
  box-shadow:0 6px 14px rgba(248,113,113,.25), 0 0 0 4px var(--ring);
}

.card--intervention .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(248,113,113,.35), 0 0 0 4px var(--ring);
}

/* ===== Boutons ===== */
a.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  border:0; border-radius:10px; padding:.6rem .9rem;
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease;
}
a.btn:hover{ transform:translateY(-1px) }

/* ===== Apparence du cadre ===== */
.section {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin: 20px auto;
  max-width: 720px; /* centre et limite la largeur */
  text-align: center;
}

/* ===== Sections neutres ===== */
.section {
  text-align: center;
}

.section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section li {
  margin: .35rem 0;
}

.section p {
  margin: 0;
  line-height: 1.6;
}

.section h2{
  margin:.2rem 0 .6rem; font-size:1.25rem;
  color:#cbd5e1;            /* neutre différent des titres de cartes */
}
.section a{ color:#cbd5e1; text-decoration:underline }

/* ===== Utilitaires ===== */
.mt16{margin-top:16px}

/* ===== Vidéo bilan ===== */
.video-bilan{
  max-width:960px;
  margin:18px auto 26px;
  padding:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 32px rgba(0,0,0,.35);
  text-align:center;
}
.video-bilan h2{
  margin:.2rem 0 .6rem;
  font-size:1.25rem;
  color:#cbd5e1;
  font-weight:800;
}
.video-bilan video{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  outline:none;
  box-shadow:0 0 16px rgba(0,0,0,.3);
}
.video-bilan .actions{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.video-bilan .actions .btn{
  background:linear-gradient(135deg,var(--blue),#3b82f6);
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,235,.25), 0 0 0 4px var(--ring);
}
@media (max-width:520px){
  .video-bilan{ padding:12px }
  .video-bilan h2{ font-size:1.1rem }
}

.site-brand { text-align:center; }
.site-brand .brand img{
  filter: drop-shadow(0 0 10px rgba(14,132,199,.25)); /* halo discret bleu */
}
/* si tu veux une version compacte en mobile */
@media (max-width:520px){
  .site-brand .brand img{ max-width:200px; }
}