/* ============================================================
   Page Blog — intégration maquette
   Préfixe .blog- pour éviter tout conflit avec style.css
   ============================================================ */

.blog-page *,
.blog-page *::before,
.blog-page *::after{box-sizing:border-box}
.blog-page svg{display:block}
.blog-page a{text-decoration:none;color:inherit}
.blog-page button,.blog-page input{font:inherit}

.blog-page{
  --red:#DC2626;
  --red-soft:#F87171;
  --red-dark:#B91C1C;
  --black:#05070b;
  --black-soft:#090d14;
  --panel:#0f151f;
  --panel-light:#151c27;
  --white:#ffffff;
  --off:#f5f6f8;
  --muted:#9ca5b2;
  --dark-text:#11161e;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.15);
  --soft-line:#e2e6eb;
  --shadow:0 28px 80px rgba(0,0,0,.35);
}

.blog-page{
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 5%,rgba(255,59,63,.13),transparent 23%),
    radial-gradient(circle at 8% 35%,rgba(255,59,63,.055),transparent 25%),
    var(--black);
}
.blog-container{width:min(1180px,calc(100% - 40px));margin:auto}

.blog-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--red);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.blog-eyebrow:before{
  content:"";
  width:28px;
  height:2px;
  background:var(--red);
  box-shadow:0 0 13px var(--red);
}
.blog-section-title{
  max-width:900px;
  margin:14px 0 22px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(39px,5vw,70px);
  line-height:.98;
  letter-spacing:-.05em;
}
.blog-section-title span{color:var(--red)}
.blog-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .8s ease;
}
.blog-reveal.blog-visible{opacity:1;transform:none}

/* HERO */
.blog-hero{
  position:relative;
  min-height:930px;
  padding:90px 0 92px;
  display:flex;
  align-items:center;
  isolation:isolate;
  color:var(--white);
}
.blog-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-5;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,#000,transparent 95%);
}
.blog-hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  z-index:-2;
  height:250px;
  background:linear-gradient(to top,var(--black),transparent);
}
.blog-hero-layout{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:64px;
  align-items:center;
}
.blog-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  padding:8px 13px;
  border:1px solid rgba(255,59,63,.34);
  border-radius:999px;
  background:rgba(255,59,63,.075);
  color:#ff989b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.blog-hero-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 13px var(--red);
  animation:pulse 1.8s infinite;
}
.blog-hero h1{
  max-width:760px;
  margin:0 0 28px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:60px;
  line-height:.92;
  letter-spacing:-.058em;
}
.blog-hero h1 span{
  color:var(--red);
  text-shadow:0 0 42px rgba(255,59,63,.24);
}
.blog-hero-intro{
  max-width:700px;
  margin:0;
  color:#a5aeba;
  font-size:17px;
  line-height:1.8;
}
.blog-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:42px;
}
.blog-hero-stat{
  position:relative;
  min-height:106px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.062),rgba(255,255,255,.014));
  overflow:hidden;
}
.blog-hero-stat:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:62%;
  height:2px;
  background:linear-gradient(90deg,var(--red),transparent);
}
.blog-hero-stat strong{
  display:block;
  margin-bottom:7px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:29px;
}
.blog-hero-stat span{
  display:block;
  color:#8f98a6;
  font-size:9px;
  line-height:1.45;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* HERO VISUAL */
.blog-lab-visual{position:relative;min-height:650px}
.blog-lab-panel{
  position:absolute;
  inset:30px 5px 20px 48px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:30px;
  background:linear-gradient(155deg,rgba(255,255,255,.065),rgba(255,255,255,.012));
  box-shadow:0 48px 115px rgba(0,0,0,.56);
  overflow:hidden;
}
.blog-lab-panel:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:30px 30px;
}
.blog-lab-panel:after{
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,59,63,.09);
  filter:blur(55px);
}
.blog-orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:290px;
  height:290px;
  border:1px solid rgba(255,59,63,.42);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 65px rgba(255,59,63,.18),inset 0 0 46px rgba(255,59,63,.06);
  z-index:2;
}
.blog-orbit:before,.blog-orbit:after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.blog-orbit:before{
  inset:28px;
  border:1px dashed rgba(255,255,255,.16);
  animation:spin 18s linear infinite;
}
.blog-orbit:after{
  inset:78px;
  border:1px solid rgba(255,255,255,.1);
}
.blog-orbit-core{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
}
.blog-orbit-core strong{
  display:block;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:48px;
  letter-spacing:-.04em;
}
.blog-orbit-core span{
  display:block;
  margin-top:7px;
  color:#a4adba;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.blog-signal{
  position:absolute;
  z-index:4;
  width:205px;
  padding:17px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:17px;
  background:rgba(10,14,21,.86);
  backdrop-filter:blur(13px);
  box-shadow:0 20px 48px rgba(0,0,0,.42);
}
.blog-signal b{
  display:block;
  margin-bottom:6px;
  color:var(--red);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:28px;
}
.blog-signal span{
  color:#c5cad1;
  font-size:10px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.blog-signal.one{top:0;right:0}
.blog-signal.two{bottom:0;left:0}
.blog-signal.three{right:-10px;bottom:125px}

/* CATEGORY INDEX */
.blog-category-index{
  position:relative;
  padding:94px 0;
  background:var(--off);
  color:var(--dark-text);
}
.blog-category-index:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 15%,rgba(255,59,63,.075),transparent 23%),
    radial-gradient(circle at 85% 85%,rgba(35,55,90,.055),transparent 24%);
}
.blog-category-index .blog-container{position:relative}
.blog-index-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:42px;
}
.blog-index-link{
  position:relative;
  min-height:176px;
  padding:22px 20px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid transparent;
  border-radius:18px;
  background:#fff;
  box-shadow:0 20px 45px rgba(27,39,55,.065);
  transition:border-color .35s,transform .35s,box-shadow .35s;
  overflow:hidden;
}
.blog-index-link:before{
  content:"";
  position:absolute;
  top:-70px;
  right:-70px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(255,59,63,.08);
}
.blog-index-link:hover{
  transform:translateY(-7px);
  border-color:var(--red);
  box-shadow:0 30px 65px rgba(27,39,55,.11);
}
.blog-index-number{
  position:relative;
  color:#c8cdd3;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:28px;
  font-weight:400;
  line-height:1;
}
.blog-index-content{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
}
.blog-index-link strong{
  flex:1;
  min-width:0;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.22;
  color:var(--dark-text);
}
.blog-index-arrow{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,59,63,.1);
  color:var(--red);
  transition:background .3s,color .3s,transform .3s;
}
.blog-index-arrow svg{
  width:14px;
  height:14px;
  display:block;
}
.blog-index-link:hover .blog-index-arrow{
  transform:translate(2px,-2px);
  background:var(--red);
  color:#fff;
}

/* EDITORIAL */
.blog-editorial{
  position:relative;
  padding:125px 0;
  background:var(--black);
  color:var(--white);
}
.blog-editorial:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.09;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
}
.blog-editorial .blog-container{position:relative}
.blog-editorial .blog-section-title{color:var(--white)}
.blog-editorial-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:52px;
}
.blog-editorial-count{
  width:112px;
  height:112px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,59,63,.34);
  border-radius:50%;
  background:rgba(255,59,63,.065);
  color:var(--red);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:37px;
  box-shadow:0 0 45px rgba(255,59,63,.1);
}
.blog-category-stack{display:grid;gap:23px}
.blog-category-block{
  position:relative;
  display:grid;
  grid-template-columns:360px 1fr;
  border:1px solid var(--line);
  border-radius:25px;
  background:linear-gradient(150deg,rgba(255,255,255,.052),rgba(255,255,255,.012));
  overflow:hidden;
  box-shadow:var(--shadow);
}
.blog-category-side{
  position:relative;
  min-height:100%;
  padding:32px 28px;
  border-right:1px solid var(--line);
  background:
    radial-gradient(circle at 0 0,rgba(255,59,63,.15),transparent 55%),
    rgba(255,255,255,.015);
  overflow:visible;
}
.blog-category-side:after{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-110px;
  bottom:-110px;
  border:1px solid rgba(255,59,63,.18);
  border-radius:50%;
}
.blog-category-id{
  color:rgba(255,255,255,.22);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:38px;
}
.blog-category-side h2{
  position:relative;
  z-index:2;
  max-width:100%;
  margin:76px 0 0;
  color:var(--white);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:36px !important;
  line-height:1.08;
  letter-spacing:-.035em;
}
.blog-category-side h2.blog-category-title-inline{
  white-space:nowrap;
  font-size:31px !important;
}
.blog-category-side h2 span{color:var(--red)}
.blog-article-list{padding:17px}
.blog-article-card{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr 36px;
  align-items:center;
  gap:16px;
  min-height:93px;
  padding:16px 17px;
  border:1px solid transparent;
  border-radius:15px;
  transition:.3s;
}
.blog-article-card + .blog-article-card{border-top-color:var(--line)}
.blog-article-card:hover{
  background:rgba(255,255,255,.042);
  border-color:rgba(255,59,63,.18);
  transform:translateX(5px);
}
.blog-article-number{
  color:var(--red);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:23px;
  text-align:center;
}
.blog-article-card h3{
  margin:0;
  color:#f0f2f5;
  font-size:15px;
  line-height:1.55;
  font-weight:700;
}
.blog-article-arrow{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:#858e9c;
  transition:.3s;
}
.blog-article-card:hover .blog-article-arrow{color:#fff;border-color:var(--red);background:var(--red)}

/* RESOURCES */
.blog-resources{
  position:relative;
  padding:125px 0;
  background:var(--off);
  color:var(--dark-text);
}
.blog-resources:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 90% 15%,rgba(255,59,63,.08),transparent 26%),
    linear-gradient(125deg,transparent 0 64%,rgba(255,59,63,.03) 64% 64.2%,transparent 64.2%);
}
.blog-resources .blog-container{position:relative}
.blog-resources-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:50px;
}
.blog-resource-card{
  position:relative;
  min-height:285px;
  padding:28px;
  border:1px solid #e1e5ea;
  border-radius:21px;
  background:#fff;
  box-shadow:0 22px 55px rgba(27,39,55,.08);
  overflow:hidden;
  transition:.35s;
}
.blog-resource-card:hover{transform:translateY(-8px);box-shadow:0 34px 75px rgba(27,39,55,.13)}
.blog-resource-card:before{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  top:-110px;
  right:-90px;
  border-radius:50%;
  background:rgba(255,59,63,.08);
}
.blog-resource-top{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.blog-resource-number{
  color:#c8ced5;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:31px;
}
.blog-resource-icon-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
}
.blog-resource-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,59,63,.22);
  border-radius:18px;
  background:rgba(255,59,63,.08);
  color:var(--red);
}
.blog-resource-icon svg{
  width:28px;
  height:28px;
  display:block;
}
.blog-resource-card h3{
  position:relative;
  margin:62px 0 0;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.025em;
}

/* NEWSLETTER */
.blog-newsletter{
  padding:112px 0;
  background:
    radial-gradient(circle at 50% 100%,rgba(255,59,63,.18),transparent 48%),
    var(--black);
}
.blog-newsletter-box{
  position:relative;
  max-width:1050px;
  margin:auto;
  padding:76px 44px;
  border:1px solid var(--line);
  border-radius:29px;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  text-align:center;
  overflow:hidden;
}
.blog-newsletter-box:before{
  content:"";
  position:absolute;
  top:-145px;
  left:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(255,59,63,.12);
  filter:blur(45px);
}
.blog-newsletter-box:after{
  content:"";
  position:absolute;
  right:-145px;
  bottom:-165px;
  width:380px;
  height:380px;
  border:1px solid rgba(255,59,63,.12);
  border-radius:50%;
}
.blog-newsletter-content{position:relative;z-index:2}
.blog-newsletter h2{
  max-width:790px;
  margin:15px auto 30px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(38px,5vw,66px);
  line-height:.98;
  letter-spacing:-.05em;
  color:#fff;
}
.blog-newsletter h2 span{color:var(--red)}
.blog-newsletter-form{
  max-width:680px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:8px;
  border:1px solid var(--line-strong);
  border-radius:15px;
  background:rgba(0,0,0,.23);
  backdrop-filter:blur(12px);
}
.blog-newsletter-form input{
  min-width:0;
  height:53px;
  padding:0 17px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
}
.blog-newsletter-form input::placeholder{color:#747e8c}
.blog-newsletter-form button{
  position:relative;
  min-height:53px;
  padding:0 23px;
  border:1px solid var(--red);
  border-radius:9px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 16px 42px rgba(255,59,63,.24);
  transition:.3s;
}
.blog-newsletter-form button:before{
  content:"";
  position:absolute;
  inset:-120% auto -120% -38%;
  width:28%;
  background:rgba(255,255,255,.24);
  transform:rotate(24deg);
  transition:.55s;
}
.blog-newsletter-form button:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(255,59,63,.34)}
.blog-newsletter-form button:hover:before{left:130%}

@keyframes pulse{50%{opacity:.4;transform:scale(.76)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media(max-width:1080px){
  .blog-hero-layout{grid-template-columns:1fr}
  .blog-lab-visual{min-height:590px}
  .blog-index-grid{grid-template-columns:repeat(3,1fr)}
  .blog-category-block{grid-template-columns:250px 1fr}
}
@media(max-width:820px){
  .blog-container{width:min(100% - 28px,1180px)}
  
  .blog-hero{min-height:auto;padding:125px 0 70px}
  .blog-hero h1{font-size:34px!important;line-height:1.12!important}
  .blog-hero-stats{grid-template-columns:1fr}
  .blog-lab-visual{min-height:480px;margin:-20px -45px;transform:scale(.84)}
  .blog-category-index,.blog-editorial,.blog-resources,.blog-newsletter{padding:84px 0}
  .blog-index-grid{grid-template-columns:repeat(2,1fr)}
  .blog-editorial-head{align-items:flex-start;flex-direction:column}
  .blog-category-block{grid-template-columns:1fr}
  .blog-category-side{min-height:230px;border-right:0;border-bottom:1px solid var(--line)}
  .blog-category-side h2{margin-top:55px}
  .blog-resources-grid{grid-template-columns:1fr}
  .blog-newsletter-box{padding:58px 20px}
  .blog-newsletter-form{grid-template-columns:1fr;padding:10px}
  .blog-newsletter-form button{width:100%}
}
@media(max-width:520px){
  .blog-index-grid{grid-template-columns:1fr}
  .blog-index-link{min-height:135px}
  .blog-lab-visual{min-height:430px;margin:-70px -110px;transform:scale(.66)}
  .blog-article-card{grid-template-columns:42px 1fr;gap:11px;padding:15px 9px}
  .blog-article-arrow{display:none}
  .blog-article-card h3{font-size:14px}
  .blog-resource-card{min-height:260px;padding:23px}
  .blog-resource-card h3{margin-top:52px;font-size:22px}
}
@media(pointer:coarse){}
@media(prefers-reduced-motion:reduce){
  .blog-page *,.blog-page *:before,.blog-page *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}