/* Couleur Plongée — DA « profondeurs » */
:root{
  --abyss:#03111A; --abyss2:#061C26; --panel:#0A2430; --panel2:#0D2E3C;
  --ink:#EAF3F4; --muted:#9FBAC4; --faint:#6C8B98;
  --gold:#E3B458; --gold-dim:#B98F44; --lagoon:#43BFCB; --coral:#F07A5B;
  --line:#16394A; --line-soft:#102E3C;
  --wrap:1140px; --narrow:760px;
  --f-title:Marcellus,"Palatino Linotype",Georgia,serif;
  --f-body:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-quote:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--abyss); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--lagoon)}
h1,h2,h3{font-family:var(--f-title); font-weight:400; text-wrap:balance; margin:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1B1206;padding:10px 16px;z-index:200}
.skip:focus{left:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:24px; padding-right:24px}
.wrap.narrow{max-width:var(--narrow)}
.btn{
  display:inline-block; background:var(--coral); color:#2A0E06; text-decoration:none;
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 26px; border-radius:4px; border:0; cursor:pointer; font-family:var(--f-body);
  transition:filter .25s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(227,180,88,.5)}
.chip{
  display:inline-block; text-decoration:none; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(227,180,88,.35); border-radius:3px; padding:3px 10px;
}
.more{color:var(--gold); text-decoration:none; font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase}
.more:hover{text-decoration:underline}
.kicker{font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin:0 0 16px}
.lead{color:var(--muted); font-size:18.5px; max-width:66ch}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:100; background:rgba(3,17,26,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap); margin:0 auto; padding:0 24px; height:70px;
  display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none}
.brand-mark{width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none}
.brand-text{font-family:var(--f-title); font-size:20px; letter-spacing:.03em; white-space:nowrap}
.brand-text em{font-style:normal; color:var(--gold)}
.nav{flex:1; display:flex; justify-content:center}
.nav ul{display:flex; flex-wrap:nowrap; gap:2px; list-style:none; margin:0; padding:0}
.nav a{display:block; padding:8px 13px; text-decoration:none; color:var(--muted);
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-radius:4px; white-space:nowrap}
.nav a:hover{color:var(--gold)}
.nav a.is-current{color:var(--gold); box-shadow:inset 0 -1px 0 var(--gold)}
.burger{display:none; flex:none; width:42px; height:38px; background:transparent;
  border:1px solid var(--line); border-radius:4px; cursor:pointer; padding:9px 9px}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; margin:3px 0}
@media (max-width:1040px){
  .burger{display:block; margin-left:auto}
  .nav{position:absolute; left:0; right:0; top:70px; background:var(--abyss2);
    border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s ease}
  .nav.open{max-height:70vh; overflow:auto}
  .nav ul{flex-direction:column; gap:0; padding:8px 24px 18px}
  .nav a{padding:13px 0; font-size:14px; border-bottom:1px solid var(--line-soft)}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:82vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--abyss)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%}
.hero-veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(3,17,26,.35) 0%,rgba(3,17,26,.12) 32%,rgba(3,17,26,.82) 76%,var(--abyss) 100%)}
.hero-in{position:relative; width:100%; max-width:var(--wrap); margin:0 auto;
  padding:130px 24px 74px}
.hero h1{font-family:var(--f-quote); font-style:italic; font-weight:600;
  font-size:clamp(38px,6.4vw,72px); line-height:1.08; margin:0 0 20px; color:#F6FBFB;
  text-shadow:0 2px 30px rgba(3,17,26,.7)}
.hero .lead{color:#CFE2E7; text-shadow:0 1px 16px rgba(3,17,26,.8)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* ---------- hero de page ---------- */
.phero{position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden}
.phero.small{min-height:34vh}
.phero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phero-veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(3,17,26,.45) 0%,rgba(3,17,26,.3) 40%,rgba(3,17,26,.88) 100%)}
.phero-in{position:relative; width:100%; max-width:var(--wrap); margin:0 auto; padding:80px 24px 42px}
.phero h1{font-size:clamp(30px,4.6vw,50px); margin:0 0 14px; color:#F6FBFB}
.bc{font-size:12px; color:var(--faint); letter-spacing:.05em; margin-bottom:14px}
.bc a{color:var(--muted); text-decoration:none}
.bc a:hover{color:var(--gold)}
.bc span{color:var(--faint); margin:0 4px}

/* ---------- sections ---------- */
.sec{padding-block:72px}
.sec.alt{background:var(--abyss2)}
.sec.tall{padding-block:90px}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-bottom:34px; flex-wrap:wrap}
.sec-h h2{font-size:clamp(24px,3.2vw,33px)}
.sec-h h2::after{content:""; display:block; width:56px; height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(227,180,88,0)); margin-top:14px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px}
.grid>*{min-width:0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column; min-width:0;
  transition:border-color .4s ease, transform .4s ease}
.card:hover{border-color:rgba(227,180,88,.45); transform:translateY(-3px)}
.card-img{display:block; overflow:hidden; aspect-ratio:16/10}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease}
.card:hover .card-img img{transform:scale(1.04)}
.card-b{padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.card-b h3{font-size:19.5px; line-height:1.3}
.card-b h3 a{color:var(--ink); text-decoration:none}
.card-b h3 a:hover{color:var(--gold)}
.meta{color:var(--faint); font-size:12.5px; margin:0; letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.card,.card-img img{transition:none}}

.silos{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px}
.silos>*{min-width:0}
.silo{display:block; text-decoration:none; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  transition:border-color .4s ease}
.silo:hover{border-color:rgba(227,180,88,.45)}
.silo img{width:100%; aspect-ratio:16/10; object-fit:cover}
.silo-b{padding:20px 22px 24px}
.silo-b h3{font-size:21px; margin-bottom:8px; color:var(--ink)}
.silo-b p{color:var(--muted); font-size:15px; margin:0 0 14px}

.band{position:relative; min-height:340px; display:flex; align-items:center; overflow:hidden}
.band>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.band-veil{position:absolute; inset:0; background:rgba(3,17,26,.7)}
.band-in{position:relative; max-width:var(--wrap); margin:0 auto; padding:56px 24px; width:100%; text-align:center}
.band-in h2{font-size:clamp(25px,3.4vw,36px); margin-bottom:12px; color:#F6FBFB}
.band-in p{color:#C6DBE0; max-width:58ch; margin:0 auto 24px}

/* ---------- article ---------- */
.post-h{padding-block:44px 26px}
.post-h h1{font-size:clamp(29px,4.4vw,46px); margin:14px 0 12px}
.post-img{margin:0 auto 10px; max-width:1200px; padding:0 24px}
.post-img img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px;
  border:1px solid var(--line)}
.prose{padding-block:34px; font-size:17.5px; min-width:0}
.prose h2{font-size:clamp(23px,3vw,30px); margin:44px 0 14px; color:#F2F9F9}
.prose h2::after{content:""; display:block; width:48px; height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(227,180,88,0)); margin-top:12px}
.prose h3{font-size:20.5px; margin:30px 0 10px; color:var(--lagoon)}
.prose p{margin:0 0 18px; color:#D9E7EA}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px; color:#D9E7EA}
.prose li{margin:8px 0}
.prose strong{color:#F2F9F9}
.prose a{color:var(--lagoon); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose blockquote{margin:26px 0; padding:4px 0 4px 22px; border-left:2px solid var(--gold);
  font-family:var(--f-quote); font-style:italic; font-size:21px; color:#DCEAEE}
.tw{overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:8px}
.prose table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
.prose th{background:rgba(227,180,88,.06); color:var(--gold); text-align:left;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:11px 14px;
  border-bottom:1px solid var(--gold-dim); font-weight:600}
.prose td{padding:10px 14px; border-bottom:1px solid var(--line-soft); color:#D9E7EA;
  vertical-align:top}
.prose tr:last-child td{border-bottom:none}
.rel{border-top:1px solid var(--line); padding-block:28px 60px}
.rel h2{font-size:19px; margin-bottom:14px; color:var(--gold)}
.rel ul{list-style:none; margin:0; padding:0}
.rel li{margin:9px 0}
.rel a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.rel a:hover{color:var(--gold); border-color:var(--gold)}

/* ---------- formulaire ---------- */
.form{margin-top:28px; max-width:620px}
.f-row{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.f-row label{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600}
.f-row input,.f-row textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:5px;
  color:var(--ink); padding:12px 14px; font:inherit; font-size:16px; width:100%}
.f-row input:focus,.f-row textarea:focus{border-color:var(--gold); outline:none}
.fine{font-size:13px; color:var(--faint); margin-top:16px}
.l404{list-style:none; padding:0; margin:26px 0; display:flex; flex-wrap:wrap;
  gap:10px; justify-content:center}
.l404 a{color:var(--muted); text-decoration:none; border:1px solid var(--line);
  border-radius:4px; padding:8px 14px; font-size:13.5px}
.l404 a:hover{color:var(--gold); border-color:var(--gold)}

/* ---------- footer ---------- */
.ftr{background:#020C12; border-top:1px solid var(--line); padding-block:52px 0}
.ftr-in{max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px}
.ftr-in>*{min-width:0}
.ftr-logo{font-size:22px; margin-bottom:12px}
.ftr-brand p{color:var(--faint); font-size:14.5px; max-width:44ch; margin:0}
.ftr-col h3{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-family:var(--f-body); font-weight:600; margin-bottom:12px}
.ftr-col ul{list-style:none; margin:0; padding:0}
.ftr-col li{margin:8px 0}
.ftr-col a{color:var(--muted); text-decoration:none; font-size:14.5px}
.ftr-col a:hover{color:var(--gold)}
.ftr-bot{max-width:var(--wrap); margin:44px auto 0; padding:20px 24px 34px;
  border-top:1px solid var(--line-soft)}
.ftr-bot p{color:var(--faint); font-size:13px; margin:0; text-align:center}
.ftr-bot a{color:var(--muted)}
@media (max-width:820px){
  .ftr-in{grid-template-columns:1fr; gap:30px}
  .hero-in{padding-top:96px}
  .sec{padding-block:56px}
}