:root{
  --navy:#0E2230;
  --gold:#C9A646;
  --beige:#E9E1D3;
  --ink:#121417;
  --muted:#5E6872;
  --card:#FFFFFF;
  --line:rgba(14,34,48,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --radius:18px;
  --max:1120px;
  --pad:18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
small{color:var(--muted)}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:14px; min-width:280px;}
.brand img{
  width:58px; height:58px; object-fit:contain;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  background:#fff;
}
.brand-title{display:flex; flex-direction:column; gap:2px;}
.brand-title .firm{font-weight:800; letter-spacing:.8px; color:var(--navy);}
.brand-title .tag{font-size:12px; color:var(--muted);}
.brand-title .hook{font-size:12px; color:var(--navy); opacity:.86;}
nav{display:flex; gap:16px; align-items:center; font-size:13.5px; color:var(--navy);}
nav a{padding:8px 10px;border-radius:12px}
nav a.active, nav a:hover{background:rgba(233,225,211,.55)}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:650;
  font-size:13.5px;
  cursor:pointer;
}
.btn.primary{background:var(--gold); border-color:transparent; color:#fff;}
.btn.ghost{background:transparent;}
.hero{padding:28px 0 8px;}
.carousel{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.slide{
  display:none;
  min-height:360px;
  padding:34px;
  color:#fff;
  position:relative;
}
.slide.active{display:block}
.slide::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, rgba(14,34,48,.92), rgba(14,34,48,.70));
  z-index:0;
}
.slide.bg1{background: radial-gradient(900px 500px at 15% 10%, rgba(201,166,70,.22), transparent 60%),
                 radial-gradient(900px 600px at 80% 30%, rgba(233,225,211,.22), transparent 65%),
                 linear-gradient(120deg, rgba(14,34,48,1), rgba(14,34,48,.82));}
.slide.bg2{background: radial-gradient(900px 500px at 20% 40%, rgba(233,225,211,.20), transparent 60%),
                 radial-gradient(900px 600px at 85% 20%, rgba(201,166,70,.18), transparent 60%),
                 linear-gradient(120deg, rgba(14,34,48,1), rgba(14,34,48,.80));}
.slide.bg3{background: radial-gradient(900px 500px at 25% 15%, rgba(201,166,70,.20), transparent 60%),
                 radial-gradient(900px 600px at 75% 55%, rgba(233,225,211,.18), transparent 65%),
                 linear-gradient(120deg, rgba(14,34,48,1), rgba(14,34,48,.82));}
.slide-content{position:relative; z-index:1; max-width:760px}
.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.h1{
  margin:10px 0 8px;
  font-size:38px;
  line-height:1.12;
  letter-spacing:-.3px;
}
.h2{margin:0; font-size:18px; color:rgba(255,255,255,.92);}
.lead{margin:16px 0 18px; color:rgba(255,255,255,.88); max-width:70ch;}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.carousel-dots{
  position:absolute; right:16px; bottom:16px; z-index:2;
  display:flex; gap:8px;
}
.dot{
  width:10px; height:10px; border-radius:99px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
  cursor:pointer;
}
.dot.active{background:rgba(255,255,255,.86)}
.section{padding:52px 0; border-top:1px solid var(--line);}


/* --- Compétences: intro text directly on hero (no light card) --- */
.page-hero .hero-copy{margin-top:14px; max-width:75ch}
.page-hero .hero-copy p{margin:10px 0; color:rgba(255,255,255,.88)}
.page-hero .hero-copy .hero-lead{font-weight:600; color:rgba(255,255,255,.92)}
.page-hero .hero-copy .hero-label{margin-top:14px; font-weight:600; color:rgba(255,255,255,.92)}
.page-hero .hero-copy strong{color:#fff}
.page-hero .hero-list{margin:10px 0 0 22px}
.page-hero .hero-list li{margin:8px 0; color:rgba(255,255,255,.88)}
.section-title{margin:0 0 10px; font-size:26px; letter-spacing:-.2px; color:var(--navy);}
.section-sub{margin:0; color:var(--muted);}
.grid{display:grid; gap:16px;}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 920px){
  nav{display:none}
  .grid.two, .grid.three{grid-template-columns:1fr}
  .slide{min-height:420px}
  .h1{font-size:34px}
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.card.soft{background:rgba(233,225,211,.50); border-color:rgba(14,34,48,.10);}
.card h3{margin:0 0 8px; color:var(--navy)}
.card p{margin:0; color:var(--muted)}
.list{margin:12px 0 0; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}
.quote{
  padding:16px 18px;
  border-left:4px solid var(--gold);
  background:rgba(233,225,211,.45);
  border-radius:14px;
  color:var(--navy);
}
.quote strong{font-weight:800}
.footer{padding:28px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px;}
.footer-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;}
.footer .mini{display:flex; align-items:center; gap:10px;}
.footer .mini img{width:34px;height:34px;border-radius:10px;object-fit:contain;background:#fff}
.badge{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
  color:var(--navy);
}
.form input,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  font:inherit;
}
.form textarea{min-height:140px; resize:vertical}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 720px){ .form .row{grid-template-columns:1fr} }
.page-hero{
  padding:36px 0 20px;
  background:linear-gradient(120deg, rgba(14,34,48,1), rgba(14,34,48,.86));
  color:#fff;
}
.page-hero .title{margin:0; font-size:34px}
.page-hero .sub{margin:10px 0 0; color:rgba(255,255,255,.86); max-width:75ch}
.page-hero .hookline{margin-top:14px; max-width:75ch; color:rgba(255,255,255,.92); font-weight:600}

/* --- FIX: Compétences intro text block readability (align with other pages) --- */
/* We avoid changing global theme; we only make the intro card on the dark hero readable. */
.page-hero .card.soft{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.28);
}
.page-hero .card.soft p{
  color: rgba(14,34,48,.84);
}
.page-hero .card.soft strong,
.page-hero .card.soft h1,
.page-hero .card.soft h2,
.page-hero .card.soft h3{
  color: rgba(14,34,48,1);
}