/* =========================================================================
   upteam — Le carnet (articles). Feuille de style partagée par la page liste
   et les articles. Reprend la charte claire d'upteam (rouge accent, blocs
   navy). Pensée pour de la lecture longue : largeur de prose confortable,
   typographie soignée, pas d'effet inutile.
   ========================================================================= */
:root{
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#EEF2F8;
  --line:#E7EBF1; --line-strong:#D8DEE8;
  --red:#F5333A; --red-600:#E11D24; --red-700:#C2151B; --red-tint:#FDE7E8; --red-tint-2:#FEF3F4;
  --navy:#06283B; --navy-2:#0B3650;
  --blue:#2563EB; --blue-700:#1A45B8; --blue-tint:#E7EEFD; --blue-tint-2:#F2F6FE;
  --amber:#D9881A; --amber-tint:#FBEFD8; --violet:#6D5CE0; --violet-tint:#ECE9FB; --sky:#1690CF; --sky-tint:#E2F1FB;
  --ink:#15222E; --ink-soft:rgba(21,34,46,.72); --ink-faint:rgba(21,34,46,.5);
  --on-navy:rgba(255,255,255,.84); --on-navy-faint:rgba(255,255,255,.58);
  --r-md:14px; --r-lg:20px; --r-pill:100px;
  --shadow-sm:0 12px 28px -18px rgba(21,34,46,.22); --shadow-md:0 22px 46px -26px rgba(21,34,46,.26);
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif; --font-body:'DM Sans',system-ui,sans-serif; --font-ui:'Montserrat',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;}
body{font-family:var(--font-body); color:var(--ink); line-height:1.65; background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(820px 460px at 86% -6%, rgba(245,51,58,.045), transparent 60%), radial-gradient(rgba(21,34,46,.04) 1px, transparent 1px); background-size:auto, 24px 24px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.18; margin:0; color:var(--ink);}
a{color:var(--red-600); text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ── Boutons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:.95rem; padding:11px 18px; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer; transition:.15s var(--ease); white-space:nowrap;}
.btn svg{width:17px; height:17px;}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 12px 24px -12px rgba(245,51,58,.5);}
.btn-primary:hover{background:var(--red-600);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--red); color:var(--red-700);}
.btn-lg{padding:14px 24px; font-size:1.02rem;}

/* ── Header ── */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.sh-inner{max-width:1100px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:18px;}
.brand{display:flex; align-items:center; gap:7px; text-decoration:none;}
.brand .mark{width:17px; height:17px; filter:drop-shadow(0 3px 7px rgba(245,51,58,.28));}
.brand .word{font-family:var(--font-display); font-weight:600; font-size:1.55rem; color:var(--ink); letter-spacing:-.045em; line-height:1;}
.sh-nav{display:flex; align-items:center; gap:4px; margin-left:auto;}
.sh-nav a{font-weight:600; font-size:.92rem; color:var(--ink-soft); padding:8px 13px; border-radius:var(--r-pill); transition:.15s;}
.sh-nav a:hover{color:var(--red-700); background:var(--red-tint-2);}
.sh-nav a.on{color:var(--red-700);}
.sh-cta{margin-left:4px;}
@media(max-width:720px){ .sh-nav{display:none;} }

/* ── Page liste (le carnet) ── */
.blog-hero{padding:58px 0 36px; text-align:center;}
.blog-hero .kicker{font-family:var(--font-ui); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red-700);}
.blog-hero h1{font-size:clamp(2rem,4vw,2.9rem); margin:12px auto 0; max-width:18ch;}
.blog-hero p{font-size:1.15rem; color:var(--ink-soft); margin:16px auto 0; max-width:54ch;}
.art-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding-bottom:80px;}
.art-grid .lead-card{grid-column:1 / -1;}
.art-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s, border-color .2s;}
.art-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-strong);}
.art-card .cover{height:162px; position:relative; display:flex; align-items:flex-end; padding:16px 18px; background-size:cover; background-position:center; overflow:hidden;}
.art-card.lead-card .cover{height:244px;}
.art-card .cover::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,18,28,.6), rgba(8,18,28,.03) 60%);}
.art-card .cover .cat{position:relative; z-index:1; font-family:var(--font-ui); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.4); padding:4px 11px; border-radius:var(--r-pill); backdrop-filter:blur(3px);}
.art-card .body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;}
.art-card h2{font-size:1.22rem; line-height:1.25; color:var(--ink);}
.art-card.lead-card h2{font-size:1.6rem;}
.art-card .excerpt{margin-top:9px; color:var(--ink-soft); font-size:.97rem; flex:1;}
.art-card .meta{margin-top:16px; display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ink-faint); font-weight:600;}
.art-card .meta .dot{width:3px; height:3px; border-radius:50%; background:var(--line-strong);}
.art-card a.cardlink{position:absolute; inset:0;}
.art-card{position:relative;}

/* ── Article ── */
.article-head{padding:46px 0 8px;}
.article-head .back{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--ink-faint); margin-bottom:22px;}
.article-head .back:hover{color:var(--red-700);}
.article-head .cat{font-family:var(--font-ui); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red-700); background:var(--red-tint); border:1px solid rgba(245,51,58,.2); padding:5px 12px; border-radius:var(--r-pill);}
.article-head h1{font-size:clamp(1.9rem,4vw,2.7rem); margin:16px 0 0; max-width:20ch;}
.article-head .meta{margin-top:16px; display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-faint); font-weight:600;}
.article-head .meta .dot{width:3px; height:3px; border-radius:50%; background:var(--line-strong);}
.article-cover{max-width:880px; margin:30px auto 0; height:330px; border-radius:var(--r-lg); box-shadow:var(--shadow-md); background-size:cover; background-position:center; position:relative; overflow:hidden;}
.article-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(165deg, rgba(6,40,59,.04), rgba(6,40,59,.20));}
@media(max-width:680px){ .article-cover{height:190px;} }

.article{max-width:720px; margin:0 auto; padding:40px 24px 20px; font-size:1.09rem;}
.article > p{color:var(--ink-soft); margin:0 0 1.25em; line-height:1.78;}
.article > p:first-of-type{font-size:1.2rem; color:var(--ink); line-height:1.7;}
.article h2{font-size:1.5rem; margin:1.9em 0 .55em;}
.article h3{font-size:1.18rem; margin:1.5em 0 .4em; color:var(--ink);}
.article strong{color:var(--ink); font-weight:700;}
.article a{color:var(--red-600); border-bottom:1px solid rgba(245,51,58,.3);}
.article a:hover{border-bottom-color:var(--red);}
.article ul{margin:0 0 1.25em; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6em;}
.article ul li{position:relative; padding-left:26px; color:var(--ink-soft); line-height:1.7;}
.article ul li::before{content:''; position:absolute; left:4px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--red); opacity:.8;}
.article blockquote{margin:1.6em 0; padding:6px 0 6px 22px; border-left:3px solid var(--red); font-family:var(--font-display); font-weight:700; font-size:1.28rem; line-height:1.4; color:var(--ink); letter-spacing:-.01em;}
.article hr{border:none; border-top:1px solid var(--line); margin:2.4em 0;}
.article .note{background:var(--blue-tint-2); border:1px solid rgba(37,99,235,.18); border-radius:var(--r-md); padding:16px 18px; font-size:.98rem; color:var(--ink-soft); margin:1.6em 0;}
.article .note b{color:var(--blue-700);}

/* Encart CTA fin d'article — sobre, pas agressif */
.art-cta{max-width:720px; margin:36px auto 0; padding:0 24px;}
.art-cta .box{background:linear-gradient(150deg,var(--navy-2),var(--navy)); color:#fff; border-radius:var(--r-lg); padding:30px 32px; box-shadow:var(--shadow-md); position:relative; overflow:hidden;}
.art-cta .box::before{content:''; position:absolute; inset:0; background:radial-gradient(420px 200px at 88% -30%, rgba(245,51,58,.28), transparent 60%);}
.art-cta .box > *{position:relative;}
.art-cta h3{color:#fff; font-size:1.3rem;}
.art-cta p{color:var(--on-navy); margin:9px 0 18px; font-size:1rem;}
.art-cta .btn-light{background:#fff; color:var(--navy);}

/* Articles liés */
.art-more{max-width:880px; margin:56px auto 0; padding:0 24px;}
.art-more h4{font-family:var(--font-ui); font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;}
.art-more .row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.art-more .mini{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; transition:border-color .2s, transform .2s var(--ease);}
.art-more .mini:hover{border-color:var(--red); transform:translateY(-3px);}
.art-more .mini .c{font-family:var(--font-ui); font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red-700);}
.art-more .mini b{display:block; margin-top:6px; font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.02rem; line-height:1.3;}

/* ── Footer ── */
.site-footer{background:var(--navy); color:var(--on-navy); padding:48px 0 28px; margin-top:70px;}
.sf-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px;}
.site-footer .brand .word{color:#fff;}
.sf-grid p{color:var(--on-navy-faint); font-size:.92rem; margin-top:13px; max-width:34ch;}
.sf-grid h4{font-family:var(--font-ui); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-faint); margin-bottom:13px;}
.sf-grid a{display:block; color:var(--on-navy); font-size:.93rem; padding:5px 0;}
.sf-grid a:hover{color:#fff;}
.sf-bottom{max-width:1100px; margin:30px auto 0; padding:18px 24px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.84rem; color:var(--on-navy-faint);}
.sf-bottom nav{display:flex; gap:16px; flex-wrap:wrap;}
.sf-bottom a{color:var(--on-navy-faint);} .sf-bottom a:hover{color:#fff;}

@media(max-width:760px){
  .art-grid{grid-template-columns:1fr;}
  .art-more .row{grid-template-columns:1fr;}
  .sf-grid{grid-template-columns:1fr 1fr;}
}