/* ═══════════════════════════════════════════════════════════
   IndexTranche.lu — Feuille de style principale
   Fichier unique partagé par toutes les pages
   ═══════════════════════════════════════════════════════════ */


/* ── 1. Variables ── */
:root{
  --navy:#0f2a56; --navy-deep:#0a1e40; --navy-mid:#1a3a72; --navy-soft:#e8eef8;
  --navy-pale:#f2f5fb; --navy-ghost:#f7f9fd;
  --gold:#b8892a; --gold-l:#d4a843; --gold-bg:#fdf6e8; --gold-b:#e8d08a;
  --text:#0f1c2e; --text-m:#3a4a60; --text-d:#7a8a9e;
  --border:#dde3ef; --border-m:#c8d0e2;
  --white:#fff; --green:#1a7a42; --r:14px; --r-lg:20px; --r-sm:8px;
  --sh:0 4px 20px rgba(15,42,86,.09); --sh-sm:0 1px 4px rgba(15,42,86,.06);
  --col:680px; --news-bg:#fffbf0; --news-border:#f0c040;
}


/* ── 2. Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Manrope',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;line-height:1.6}


/* ── 3. Scrollbar ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#f0f2f8}
::-webkit-scrollbar-thumb{background:#c0cce0;border-radius:3px}


/* ── 4. Nav (toutes les pages) ── */
nav{
  position:sticky;top:0;z-index:100;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.25rem,5vw,3rem);
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);box-shadow:var(--sh-sm);
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Playfair Display',serif;font-size:17px;font-weight:500;
  color:var(--navy);text-decoration:none;letter-spacing:.01em;
}
.nav-badge{
  width:28px;height:28px;border-radius:7px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-badge svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.nav-links{
  display:flex;align-items:center;gap:2px;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nl{
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:500;color:var(--text-m);
  background:none;border:none;cursor:pointer;padding:6px 12px;border-radius:20px;
  transition:all .18s;text-decoration:none;display:inline-flex;align-items:center;
}
.nl:hover{color:var(--navy);background:var(--navy-soft)}
.nav-sep{display:block;width:1px;height:16px;background:var(--border);margin:0 4px;flex-shrink:0}
.nav-blog{font-weight:600;color:var(--navy) !important;text-decoration:none}
.nav-blog:hover,.nav-blog-active{background:var(--navy-soft)}
.nav-back{
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:500;color:var(--text-m);
  text-decoration:none;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);
  transition:all .18s;display:flex;align-items:center;gap:6px;
}
.nav-back:hover{color:var(--navy);border-color:var(--navy);background:var(--navy-soft)}
/* Boutons de langue — pages blog (.lbtn) et page principale (.lb) */
.nav-langs{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:10px;border-left:1px solid var(--border)}
.nav-r{display:flex;align-items:center;gap:5px}
.lbtn,.lb{
  font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--text-d);background:none;border:1.5px solid transparent;cursor:pointer;
  padding:4px 9px;border-radius:16px;transition:all .18s;
}
.lbtn:hover,.lb:hover{color:var(--navy);border-color:var(--border-m)}
.lbtn.active,.lb.active{color:var(--navy);border-color:var(--navy);background:var(--navy-soft)}


/* ── 5. Footer (toutes les pages) ── */
footer{background:var(--navy);padding:2.5rem clamp(1.25rem,6vw,4rem)}
/* Conteneur intérieur footer — pages blog */
footer .fi{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;width:auto;padding:0}
/* Conteneur intérieur footer — page principale */
.fi3{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.25rem}
.fb{font-family:'Playfair Display',serif;font-size:17px;color:rgba(255,255,255,.8)}
.fd{font-size:12px;color:rgba(255,255,255,.4);line-height:1.8;text-align:right}
.fd a{color:rgba(255,255,255,.5);text-decoration:none}
.fd a:hover{color:var(--white)}
.fr{text-align:right}
.fsrc{font-size:12px;color:rgba(255,255,255,.45);line-height:1.8}


/* ── 6. Blocs de langue & Animation scroll-reveal ── */
.lang-block{display:none}
.lang-block.active{display:block}
.up{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.up.in{opacity:1;transform:none}


/* ═══════════════════════════════════════════════════════════
   PAGE PRINCIPALE (index.html)
   ═══════════════════════════════════════════════════════════ */

/* ── 7. Bannière actualité ── */
#news-banner{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--news-bg);border-bottom:2px solid var(--news-border);
  padding:.875rem clamp(1.25rem,5vw,3rem);
  position:relative;z-index:101;
}
.news-icon{
  width:36px;height:36px;border-radius:50%;
  background:var(--news-border);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:16px;
}
.news-content{flex:1;min-width:0}
.news-tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.news-title{font-size:14px;font-weight:600;color:var(--navy);line-height:1.35}
.news-sub{font-size:12px;color:var(--text-m);margin-top:2px;line-height:1.5}
.news-close{background:none;border:none;cursor:pointer;color:var(--text-d);font-size:18px;line-height:1;padding:4px;flex-shrink:0;transition:color .15s}
.news-close:hover{color:var(--text)}


/* ── 8. Hero — page principale ── */
.main-hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:90px clamp(1.25rem,6vw,5rem) 80px;
  background:var(--navy-ghost);position:relative;overflow:hidden;
}
.hero-pat{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(15,42,86,.05) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 85%,rgba(184,137,42,.04) 0%,transparent 60%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:68px 68px;opacity:.5;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 25%,transparent 100%);
}
.hero-c{position:relative;z-index:1;max-width:800px;width:100%}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:1.75rem;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  padding:6px 16px 6px 8px;border:1.5px solid var(--border-m);border-radius:24px;
  background:var(--white);box-shadow:var(--sh-sm);
}
.hero-tag-d{width:20px;height:20px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-tag-d span{width:6px;height:6px;border-radius:50%;background:var(--white);display:block}
h1.ht{
  font-family:'Playfair Display',serif;font-size:clamp(44px,8.5vw,92px);
  font-weight:400;line-height:1.04;letter-spacing:-.015em;color:var(--navy);margin-bottom:1.5rem;
}
h1.ht em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:clamp(15px,1.8vw,17px);color:var(--text-m);max-width:540px;margin:0 auto 3rem;font-weight:300;line-height:1.8}
.hero-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--border);border:1.5px solid var(--border-m);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:2.5rem;box-shadow:var(--sh);
}
.kpi{background:var(--white);padding:clamp(1.25rem,3vw,1.875rem) clamp(1rem,2.5vw,1.75rem);text-align:center}
.kpi+.kpi{border-left:1px solid var(--border)}
.kv{font-family:'Playfair Display',serif;font-size:clamp(24px,4vw,38px);font-weight:400;color:var(--navy);letter-spacing:-.02em;display:block;margin-bottom:4px}
.kv.gld{color:var(--gold)}
.kl{font-size:11px;font-weight:600;color:var(--text-d);text-transform:uppercase;letter-spacing:.1em}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-n{font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;padding:13px 28px;border-radius:var(--r-sm);background:var(--navy);color:var(--white);border:none;cursor:pointer;transition:all .22s;letter-spacing:.02em}
.btn-n:hover{background:var(--navy-mid);transform:translateY(-1px);box-shadow:var(--sh)}
.btn-o{font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;padding:13px 28px;border-radius:var(--r-sm);background:var(--white);color:var(--navy);border:1.5px solid var(--border-m);cursor:pointer;transition:all .22s}
.btn-o:hover{border-color:var(--navy);box-shadow:var(--sh-sm)}
.scroll-cue{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;animation:fl 2.5s ease-in-out infinite}
.scroll-cue span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-d)}
.sc-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--border-m),transparent)}
@keyframes fl{0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(5px)}}


/* ── 9. Sections partagées — page principale ── */
section{padding:clamp(4rem,8vw,7rem) clamp(1.25rem,6vw,4rem)}
.si{max-width:1100px;margin:0 auto}
.slabel{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:.75rem;display:flex;align-items:center;gap:8px}
.slabel::before{content:'';width:18px;height:2px;background:var(--gold);border-radius:1px}
h2.sh{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,44px);font-weight:400;color:var(--navy);line-height:1.15;margin-bottom:.75rem}
h2.sh em{font-style:italic;color:var(--gold)}
.sdesc{font-size:15px;color:var(--text-m);max-width:560px;line-height:1.75;font-weight:300}


/* ── 10. Statut en temps réel ── */
.status{
  background:var(--white);border:1.5px solid var(--border-m);border-radius:var(--r);
  padding:.875rem 1.5rem;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:2rem;box-shadow:var(--sh-sm);
}
.live{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--navy)}
.dp{width:8px;height:8px;border-radius:50%;background:#22c55e;position:relative;flex-shrink:0}
.dp::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(34,197,94,.25);animation:pu 2s ease-out infinite}
@keyframes pu{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.ss{width:1px;height:14px;background:var(--border);flex-shrink:0}
.si2{font-size:13px;color:var(--text-m)}
.si2 strong{color:var(--navy);font-weight:600}


/* ── 11. Graphique ── */
.chart-sec{background:var(--navy-pale)}
.chart-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--sh)}
.chart-tb{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}
.chart-info{font-size:12px;color:var(--text-d)}
.cff{display:flex;gap:6px}
.cf{font-family:'Manrope',sans-serif;font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--text-m);cursor:pointer;transition:all .18s}
.cf:hover{border-color:var(--navy);color:var(--navy)}
.cf.active{background:var(--navy);border-color:var(--navy);color:var(--white)}
.chart-wrap{position:relative;width:100%;height:clamp(240px,32vw,360px)}


/* ── 12. Comment ça marche ── */
.how-sec{background:var(--white)}
.how-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:2.5rem}
.how-c{border:1.5px solid var(--border);border-radius:var(--r);padding:1.75rem 1.5rem;background:var(--white);transition:all .25s;position:relative;overflow:hidden}
.how-c::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--navy-mid));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.how-c:hover{box-shadow:var(--sh);border-color:var(--border-m);transform:translateY(-2px)}
.how-c:hover::after{transform:scaleX(1)}
.hn{font-family:'Playfair Display',serif;font-size:42px;font-weight:400;color:var(--navy-soft);line-height:1;margin-bottom:1rem}
.ht2{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:.5rem}
.hb{font-size:13px;color:var(--text-m);line-height:1.75;font-weight:300}


/* ── 13. Calculateur ── */
.calc-sec{background:var(--navy-pale)}
.calc-lay{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:start;margin-top:2.5rem}
.cform{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--sh)}
.fg{margin-bottom:1.375rem}
label.fl{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.fi,.fs{width:100%;padding:11px 15px;font-family:'Manrope',sans-serif;font-size:15px;font-weight:400;color:var(--text);background:var(--navy-ghost);border:1.5px solid var(--border);border-radius:var(--r-sm);outline:none;transition:border-color .18s}
.fi:focus,.fs:focus{border-color:var(--navy);background:var(--white)}
footer .fi{width:auto;padding:0;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;background:none;border:none;border-radius:0;outline:none;transition:none;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;max-width:1100px;margin:0 auto}
.fs{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f2a56' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px}
.fs option{background:var(--white)}
.sb{margin-bottom:1.375rem}
.sh2{display:flex;justify-content:space-between;margin-bottom:7px}
.sh2 span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.sh2 strong{font-size:13px;font-weight:600;color:var(--navy)}
input[type=range]{width:100%;height:4px;border-radius:2px;outline:none;-webkit-appearance:none;cursor:pointer;background:linear-gradient(90deg,var(--navy) calc(var(--pct,0%)),var(--border) 0)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--navy);border:2.5px solid var(--white);box-shadow:0 0 0 3px rgba(15,42,86,.15)}
.calc-btn{width:100%;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;padding:13px;border-radius:var(--r-sm);background:var(--navy);color:var(--white);border:none;cursor:pointer;transition:all .22s;letter-spacing:.02em;margin-top:.5rem}
.calc-btn:hover{background:var(--navy-mid);transform:translateY(-1px);box-shadow:var(--sh)}
.rpanel{background:var(--white);border:1.5px solid var(--border-m);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:var(--sh)}
.rph{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-d);margin-bottom:1.5rem;display:flex;align-items:center;gap:8px}
.rph::before{content:'';width:14px;height:2px;background:var(--gold);border-radius:1px}
.rg{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-bottom:.875rem}
.ri{background:var(--navy-ghost);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem 1.25rem 1rem}
.ri.acc{background:var(--navy);border-color:var(--navy)}
.ri.gbg{background:var(--gold-bg);border-color:var(--gold-b)}
.ri.full{grid-column:1/-1}
.rl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d);margin-bottom:5px}
.ri.acc .rl{color:rgba(255,255,255,.55)}
.ri.gbg .rl{color:var(--gold)}
.rv{font-family:'Playfair Display',serif;font-size:26px;font-weight:400;color:var(--navy);line-height:1.1}
.ri.acc .rv{color:var(--white)}
.rv.grn{color:var(--green)}
.rnote{font-size:11px;color:var(--text-d);line-height:1.7;border-top:1px solid var(--border);padding-top:.875rem;margin-top:.875rem}


/* ── 14. Historique ── */
.hist-sec{background:var(--white)}
.hw{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);margin-top:2rem}
.hs{overflow-x:auto;max-height:520px;overflow-y:auto}
table{width:100%;border-collapse:collapse}
thead{position:sticky;top:0;z-index:2}
th{background:var(--navy);padding:11px 18px;text-align:left;font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.08);white-space:nowrap}
th:last-child{border-right:none}
td{padding:12px 18px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-m);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--navy-ghost);color:var(--text)}
.ibadge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--navy-soft);color:var(--navy);border:1px solid var(--border-m)}
.rr td{font-weight:500;color:var(--text)}
.rr td:first-child{border-left:3px solid var(--navy)}
.src-strip{background:var(--navy-ghost);border-top:1px solid var(--border);padding:.875rem 1.5rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sbadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:var(--white);border:1px solid var(--border-m);font-size:11px;font-weight:600;color:var(--navy)}
.sbadge-d{width:5px;height:5px;border-radius:50%;background:var(--navy);flex-shrink:0}
.src-t{font-size:11px;color:var(--text-d)}


/* ── 15. FAQ ── */
.faq-sec{background:var(--navy-pale)}
.faq-g{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2rem}
.faq-i{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.5rem;cursor:pointer;transition:all .2s;position:relative}
.faq-i:hover{border-color:var(--border-m);box-shadow:var(--sh-sm)}
.faq-q{font-size:14px;font-weight:600;color:var(--navy);padding-right:2rem;line-height:1.4;margin-bottom:0}
.faq-a{font-size:13px;color:var(--text-m);line-height:1.7;font-weight:300;margin-top:.75rem;display:none}
.faq-i.open .faq-a{display:block}
.faq-tog{position:absolute;top:1.25rem;right:1.25rem;width:22px;height:22px;border-radius:50%;background:var(--navy-soft);display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:14px;color:var(--navy);font-weight:600}
.faq-i.open .faq-tog{background:var(--navy);color:var(--white);transform:rotate(45deg)}


/* ── 16. Responsive — page principale ── */
@media(max-width:760px){
  .nav-links{display:none}
  .hero-kpis{grid-template-columns:1fr 1fr}
  .hero-kpis .kpi:nth-child(3){grid-column:1/-1;border-left:none;border-top:1px solid var(--border)}
  .calc-lay{grid-template-columns:1fr}
  .rg{grid-template-columns:1fr}
  .ri.full{grid-column:auto}
  .ss{display:none}
  .faq-g{grid-template-columns:1fr}
  .fi3{flex-direction:column;text-align:center}
  .fr{text-align:center}
  #news-banner{flex-wrap:wrap}
}
@media(max-width:480px){
  .hero-kpis{grid-template-columns:1fr}
  .hero-kpis .kpi+.kpi{border-left:none;border-top:1px solid var(--border)}
  .status{flex-direction:column;align-items:flex-start;gap:8px}
}


/* ═══════════════════════════════════════════════════════════
   BLOG LISTING (blog/index.html)
   ═══════════════════════════════════════════════════════════ */

/* ── 17. Hero — blog listing ── */
.blog-hero{
  background:var(--navy-ghost);
  padding:clamp(4rem,8vw,6rem) clamp(1.25rem,6vw,4rem) clamp(3rem,5vw,4rem);
  position:relative;overflow:hidden;
}
.blog-hero .hero-grid{
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:68px 68px;opacity:.5;mask-image:none;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,black 30%,transparent 100%);
}
.blog-hero .hero-inner{max-width:860px;margin:0 auto;position:relative;z-index:1}
.blog-hero .hero-tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:1.5rem;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  padding:6px 16px 6px 8px;border:1.5px solid var(--border-m);border-radius:24px;
  background:var(--white);box-shadow:var(--sh-sm);
}
.blog-hero .hero-tag-d{width:20px;height:20px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center}
.blog-hero .hero-tag-d span{width:6px;height:6px;border-radius:50%;background:var(--white);display:block}
.blog-hero h1{font-family:'Playfair Display',serif;font-size:clamp(32px,5vw,56px);font-weight:400;color:var(--navy);line-height:1.1;margin-bottom:1rem}
.blog-hero h1 em{font-style:italic;color:var(--gold)}
.blog-hero .hero-sub{font-size:16px;color:var(--text-m);max-width:520px;line-height:1.75;font-weight:300}


/* ── 18. Cartes d'articles — blog listing ── */
.main{max-width:1100px;margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,3rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.75rem}
.card{
  background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:all .25s;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
}
.card:hover{box-shadow:var(--sh);border-color:var(--border-m);transform:translateY(-3px)}
.card-thumb{height:180px;display:flex;align-items:flex-end;justify-content:flex-start;padding:1.25rem;position:relative;overflow:hidden}
.card-thumb-bg{position:absolute;inset:0}
.card-num{
  font-family:'Playfair Display',serif;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);
  font-size:96px;font-weight:400;line-height:1;color:rgba(255,255,255,.1);pointer-events:none;letter-spacing:-.02em;
}
.card-cat{
  position:relative;z-index:1;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;color:var(--white);
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);
}
.card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:.75rem}
.card-meta{font-size:11px;color:var(--text-d);font-weight:500;display:flex;align-items:center;gap:8px}
.card-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--border-m)}
.card-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:400;color:var(--navy);line-height:1.25}
.card-title em{font-style:italic;color:var(--gold)}
.card-excerpt{font-size:13px;color:var(--text-m);line-height:1.7;font-weight:300;flex:1}
.card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:.25rem;font-size:13px;font-weight:600;color:var(--navy)}
.card-arrow{width:18px;height:18px;border-radius:50%;background:var(--navy-soft);display:flex;align-items:center;justify-content:center;transition:all .2s}
.card:hover .card-arrow{background:var(--navy);color:var(--white)}
.card-arrow svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}


/* ═══════════════════════════════════════════════════════════
   ARTICLES DE BLOG (blog/*.html sauf index)
   ═══════════════════════════════════════════════════════════ */

/* ── 19. Hero — articles ── */
/* La couleur de fond et les couleurs d'accentuation sont définies
   via des propriétés CSS inline sur l'élément <header class="hero article-hero"> */
.article-hero{padding:clamp(4rem,8vw,6rem) clamp(1.25rem,6vw,4rem);position:relative;overflow:hidden}
.hero-noise{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px}
.article-hero .hero-inner{max-width:var(--col);margin:0 auto;position:relative;z-index:1}
.hero-crumb{display:flex;align-items:center;gap:8px;margin-bottom:1.5rem;font-size:12px;color:rgba(255,255,255,.65)}
.hero-crumb a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .18s}
.hero-crumb a:hover{color:#fff}
.hero-crumb-sep{opacity:.35}
.hero-crumb>span:not(.hero-crumb-sep){color:#fff;font-weight:500}
.hero-cat{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:1.25rem;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 12px;border-width:1px;border-style:solid;border-radius:20px;
  color:var(--accent,var(--gold-l));
  border-color:var(--accent-border,rgba(201,168,76,.4));
  background:var(--accent-bg,rgba(201,168,76,.1));
}
.hero-cat-dot{width:5px;height:5px;border-radius:50%;background:var(--accent,var(--gold-l))}
.article-hero h1{font-family:'Playfair Display',serif;font-size:clamp(28px,4.5vw,48px);font-weight:400;color:#fff;line-height:1.12;margin-bottom:1.25rem}
.article-hero h1 em{font-style:italic;color:var(--accent,var(--gold-l))}
.hero-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.55);flex-wrap:wrap}
.hero-meta-sep{opacity:.4}
.hero-lead{
  margin-top:1.5rem;font-size:17px;color:rgba(255,255,255,.75);line-height:1.75;font-weight:300;
  border-left-width:3px;border-left-style:solid;padding-left:1.25rem;
  border-left-color:var(--accent,var(--gold-l));
}


/* ── 20. Corps de l'article ── */
.article{max-width:var(--col);margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,2rem)}
.article h2{font-family:'Playfair Display',serif;font-size:clamp(22px,3vw,30px);font-weight:400;color:var(--navy);margin:2.5rem 0 1rem;line-height:1.2}
.article h2 em{font-style:italic;color:var(--gold)}
.article h3{font-size:16px;font-weight:600;color:var(--navy);margin:2rem 0 .75rem}
.article p{font-size:16px;color:var(--text-m);line-height:1.85;margin-bottom:1.25rem;font-weight:300}
.article p strong{color:var(--text);font-weight:600}
.article ul,.article ol{margin:0 0 1.25rem 1.5rem}
.article li{font-size:15px;color:var(--text-m);line-height:1.8;margin-bottom:.4rem;font-weight:300}


/* ── 21. Pullquote ── */
.pullquote{background:var(--navy-ghost);border-left:4px solid var(--gold);border-radius:0 var(--r) var(--r) 0;padding:1.5rem 1.75rem;margin:2rem 0}
.pullquote p{font-family:'Playfair Display',serif;font-size:20px;font-style:italic;color:var(--navy);line-height:1.6;margin:0;font-weight:400}
.pullquote cite{display:block;margin-top:.75rem;font-size:12px;font-weight:600;color:var(--text-d);letter-spacing:.06em;text-transform:uppercase;font-style:normal}


/* ── 22. Callout ── */
.callout{background:var(--gold-bg);border:1.5px solid var(--gold-b);border-radius:var(--r);padding:1.25rem 1.5rem;margin:2rem 0}
.callout-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.callout p{font-size:14px;color:var(--text-m);margin:0;line-height:1.7;font-weight:300}
.callout.alert{background:#fff5f5;border-color:#f5c0c0}
.callout.alert .callout-title{color:#b02020}


/* ── 23. Statistiques ── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:2rem 0}
.stat-box{background:var(--navy-ghost);border:1.5px solid var(--border);border-radius:var(--r);padding:1.25rem;text-align:center}
.stat-val{font-family:'Playfair Display',serif;font-size:30px;font-weight:400;color:var(--navy);display:block;margin-bottom:.25rem}
.stat-val.gld{color:var(--gold)}
.stat-val.red{color:#b02020}
.stat-label{font-size:11px;font-weight:600;color:var(--text-d);text-transform:uppercase;letter-spacing:.08em}


/* ── 24. Navigation entre articles ── */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.anav{text-decoration:none;padding:1.25rem;border:1.5px solid var(--border);border-radius:var(--r);transition:all .2s;display:flex;flex-direction:column;gap:.4rem}
.anav:hover{border-color:var(--border-m);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.anav-dir{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d)}
.anav-title{font-size:14px;font-weight:500;color:var(--navy);line-height:1.3}
.anav.next{text-align:right}


/* ── 25. Frise chronologique (histoire-1921) ── */
.timeline{margin:2.5rem 0;position:relative;padding-left:1.75rem}
.timeline::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--navy),var(--border))}
.tl-item{position:relative;margin-bottom:2rem;padding-left:.75rem}
.tl-dot{position:absolute;left:-1.75rem;top:6px;width:10px;height:10px;border-radius:50%;background:var(--navy);border:2px solid var(--white);box-shadow:0 0 0 2px var(--navy)}
.tl-year{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.25rem}
.tl-title{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:.4rem}
.tl-text{font-size:14px;color:var(--text-m);line-height:1.7;font-weight:300}


/* ── 26. Débat (controverses) ── */
.debate{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.debate-col{border-radius:var(--r);padding:1.5rem;border:1.5px solid}
.debate-col.pro{background:#f0faf4;border-color:#b0e0c0}
.debate-col.con{background:#fff5f5;border-color:#f5c0c0}
.debate-head{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.debate-col.pro .debate-head{color:#1a7a42}
.debate-col.con .debate-head{color:#b02020}
.debate-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.debate-col.pro .debate-icon{background:#c8f0d4;color:#1a7a42}
.debate-col.con .debate-icon{background:#f8d0d0;color:#b02020}
.debate-col ul{margin:0;padding-left:1rem}
.debate-col li{font-size:13px;line-height:1.7;margin-bottom:.5rem;font-weight:300}
.debate-col.pro li{color:#1a4a28}
.debate-col.con li{color:#4a1010}


/* ── 27. Acteurs clés (controverses) ── */
.actor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}
.actor{background:var(--navy-ghost);border:1.5px solid var(--border);border-radius:var(--r);padding:1.25rem}
.actor-name{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:.3rem}
.actor-role{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-d);margin-bottom:.75rem}
.actor-pos{font-size:13px;color:var(--text-m);line-height:1.6;font-weight:300}


/* ── 28. Liste des tranches (crise-2022) ── */
.tranche-list{margin:2rem 0;display:flex;flex-direction:column;gap:.75rem}
.tranche{display:flex;align-items:center;gap:1rem;background:var(--navy-ghost);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem}
.tranche-date{font-size:13px;font-weight:600;color:var(--navy);min-width:110px}
.tranche-from{font-family:'Playfair Display',serif;font-size:15px;color:var(--text-d);white-space:nowrap}
.tranche-arrow{color:var(--gold);font-weight:700;flex-shrink:0}
.tranche-to{font-family:'Playfair Display',serif;font-size:15px;font-weight:400;color:var(--navy);white-space:nowrap}
.tranche-pct{margin-left:auto;font-size:13px;font-weight:700;color:#1a7a42;background:#f0faf4;border:1px solid #b0e0c0;border-radius:20px;padding:2px 10px;white-space:nowrap}


/* ── 29. Scénarios (futur) ── */
.scenario-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}
.scenario{border-radius:var(--r);padding:1.5rem;border:1.5px solid var(--border);position:relative;overflow:hidden}
.scenario::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.scenario.a::before{background:linear-gradient(90deg,#1a3a72,#3a6fbf)}
.scenario.b::before{background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.scenario.c::before{background:linear-gradient(90deg,#b02020,#e05040)}
.scenario-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-d);margin-bottom:.5rem}
.scenario-title{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:.75rem}
.scenario-body{font-size:13px;color:var(--text-m);line-height:1.7;font-weight:300}


/* ── 30. Défis (futur) ── */
.challenge-list{margin:2rem 0;display:flex;flex-direction:column;gap:.875rem}
.challenge{display:flex;gap:1rem;padding:1.25rem;background:var(--navy-ghost);border:1.5px solid var(--border);border-radius:var(--r);align-items:flex-start}
.challenge-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--navy-soft);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.challenge-title{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:.3rem}
.challenge-text{font-size:13px;color:var(--text-m);line-height:1.65;font-weight:300}


/* ── 31. Responsive — articles blog ── */
@media(max-width:640px){
  .debate{grid-template-columns:1fr}
  .article-nav{grid-template-columns:1fr}
  .anav.next{text-align:left}
}
@media(max-width:600px){
  .article-nav{grid-template-columns:1fr}
  .anav.next{text-align:left}
  .tranche{flex-wrap:wrap}
  .tranche-pct{margin-left:0}
}