/* ============================================================
   Delfosse Properties — Blog (cinematique, coherent avec a-propos)
   ============================================================ */

/* ===== HERO film ===== */
.blog-film-meta{
  position:absolute;top:clamp(96px,12vw,140px);left:var(--gutter);
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,237,224,.7);z-index:2;
}
.blog-film-meta .rec{
  width:6px;height:6px;border-radius:50%;background:#e34a4a;
  box-shadow:0 0 8px rgba(227,74,74,.6);
  animation:rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.blog-film-meta .sep{opacity:.4}

.blog-film-credit{
  position:absolute;bottom:clamp(32px,5vw,56px);right:var(--gutter);
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,237,224,.55);z-index:2;
}

.blog-film-content .display{max-width:18ch}
.blog-film-content .lede{max-width:60ch;margin-top:clamp(20px,2.5vw,32px)}
.blog-meta-row{
  display:flex;flex-wrap:wrap;gap:24px;margin-top:clamp(28px,3vw,40px);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,237,224,.65);
}
.blog-meta-row .sep{opacity:.4}

/* ===== TOC (sommaire) ===== */
.blog-toc-section{
  padding:clamp(60px,8vw,120px) var(--gutter);
  max-width:880px;margin:0 auto;
}
.blog-toc-section header.section-head{margin-bottom:clamp(40px,5vw,64px)}
.blog-toc-list{
  list-style:none;padding:0;margin:0;counter-reset:toc;
}
.blog-toc-list li{
  counter-increment:toc;
  border-bottom:1px solid rgba(245,237,224,.18);
  position:relative;
}
.blog-toc-list li a{
  display:flex;align-items:baseline;gap:16px;
  padding:18px 4px;text-decoration:none;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(18px,2vw,22px);
  color:var(--cream);
  transition:color .25s ease, padding-left .25s ease;
}
.blog-toc-list li a:hover{
  color:var(--accent-lt);
  padding-left:12px;
}
.blog-toc-list li a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--mono);font-size:11px;color:var(--accent-lt);
  letter-spacing:.15em;flex-shrink:0;
}
.blog-toc-list li a::after{
  content:"→";margin-left:auto;color:rgba(245,237,224,.4);
  font-family:var(--mono);transition:transform .25s ease, color .25s ease;
}
.blog-toc-list li a:hover::after{transform:translateX(6px);color:var(--accent-lt)}

/* ===== CORPS ARTICLE — sections quartier / jour ===== */
.blog-section{
  padding:clamp(60px,8vw,120px) var(--gutter);
  max-width:880px;margin:0 auto;
}
.blog-section header{margin-bottom:clamp(32px,4vw,56px)}
.blog-section .lede-intro{
  font-family:var(--serif);font-size:clamp(20px,2.1vw,26px);
  line-height:1.55;font-weight:300;color:var(--ink);
  margin:clamp(24px,3vw,40px) 0;max-width:62ch;
}
.blog-section.gp-on-video .lede-intro{color:rgba(245,237,224,.95)}

.blog-section h2{
  font-family:var(--serif);font-size:clamp(28px,3.5vw,44px);
  font-weight:400;line-height:1.15;margin:0 0 clamp(16px,2vw,24px);
  color:var(--ink);
}
.blog-section h2 em{font-style:italic;color:var(--accent-dk);font-weight:300}
.blog-section.gp-on-video h2{color:var(--cream);text-shadow:0 2px 16px rgba(0,0,0,.4)}
.blog-section.gp-on-video h2 em{color:var(--accent-lt)}

.blog-section h3{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-dk);
  margin:clamp(32px,4vw,48px) 0 12px;
}
.blog-section.gp-on-video h3{color:var(--accent-lt)}

.blog-section p{
  margin:0 0 18px;line-height:1.78;font-size:16px;
  color:var(--ink-2);max-width:62ch;
}
.blog-section p strong{color:var(--ink);font-weight:500}
.blog-section p em{font-style:italic;color:var(--accent-dk)}
.blog-section.gp-on-video p{color:rgba(245,237,224,.92)}
.blog-section.gp-on-video p strong{color:var(--accent-lt);font-weight:500}
.blog-section.gp-on-video p em{color:var(--accent-lt);font-style:italic}

.blog-section a{
  color:var(--accent-dk);text-decoration:underline;
  text-decoration-color:rgba(212,175,108,.4);text-underline-offset:3px;
  transition:color .2s;
}
.blog-section a:hover{color:var(--ink)}
.blog-section.gp-on-video a{color:var(--accent-lt);text-decoration-color:rgba(212,175,108,.5)}
.blog-section.gp-on-video a:hover{color:var(--cream)}

.blog-section ul{padding-left:0;margin:0 0 24px;list-style:none;max-width:62ch}
.blog-section ul li{
  position:relative;padding-left:24px;margin:10px 0;
  line-height:1.75;color:var(--ink-2);
}
.blog-section ul li::before{
  content:"";position:absolute;left:0;top:13px;
  width:10px;height:1px;background:var(--accent-dk);
}
.blog-section.gp-on-video ul li{color:rgba(245,237,224,.92)}
.blog-section.gp-on-video ul li::before{background:var(--accent-lt)}
.blog-section ul li strong{color:var(--ink);font-weight:500}
.blog-section.gp-on-video ul li strong{color:var(--accent-lt)}
.blog-section ul li em{color:var(--accent-dk);font-style:italic}
.blog-section.gp-on-video ul li em{color:var(--accent-lt)}

/* ===== STEP (jour-par-jour) ===== */
.blog-step{
  margin:clamp(32px,4vw,48px) 0;padding:clamp(20px,2.5vw,28px) 0 clamp(20px,2.5vw,28px) clamp(24px,3vw,36px);
  border-left:2px solid var(--accent-dk);
  position:relative;
}
.blog-section.gp-on-video .blog-step{border-left-color:var(--accent-lt)}
.blog-step-time{
  font-family:var(--mono);font-size:10px;color:var(--accent-dk);
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px;display:block;
}
.blog-section.gp-on-video .blog-step-time{color:var(--accent-lt)}
.blog-step h3{
  font-family:var(--serif);font-size:clamp(20px,2vw,26px);font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ink);
  margin:0 0 12px;line-height:1.3;
}
.blog-section.gp-on-video .blog-step h3{color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.blog-step-tip{
  margin-top:16px;padding:14px 18px;
  background:rgba(212,175,108,.12);border-left:3px solid var(--accent-dk);
  font-size:14px;color:var(--ink-2);border-radius:0 4px 4px 0;
}
.blog-step-tip strong{color:var(--accent-dk);font-weight:500}
.blog-section.gp-on-video .blog-step-tip{
  background:rgba(212,175,108,.18);
  color:rgba(245,237,224,.95);
}
.blog-section.gp-on-video .blog-step-tip strong{color:var(--accent-lt)}

/* ===== DAY-CARD : header du jour ===== */
.blog-day-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-bottom:clamp(20px,2.5vw,32px);
}
.blog-day-num{
  font-family:var(--serif);font-size:clamp(36px,4vw,52px);
  font-weight:300;font-style:italic;color:var(--accent-dk);line-height:1;
}
.blog-section.gp-on-video .blog-day-num{color:var(--accent-lt)}
.blog-day-tag{
  display:inline-block;padding:6px 14px;
  border:1px solid rgba(212,175,108,.4);border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-dk);
}
.blog-section.gp-on-video .blog-day-tag{
  color:var(--accent-lt);border-color:rgba(212,175,108,.5);
  background:rgba(10,22,40,.25);
}

/* ===== CTA Card cinematique ===== */
.blog-cta{
  margin:clamp(48px,6vw,80px) 0;padding:clamp(32px,4vw,56px) clamp(24px,3vw,40px);
  background:linear-gradient(135deg,#0A1628 0%,#1a2c47 100%);
  color:var(--cream);border-radius:6px;
  border:1px solid rgba(212,175,108,.25);
  box-shadow:0 30px 60px -20px rgba(10,22,40,.5);
  position:relative;overflow:hidden;
}
.blog-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent-dk),var(--accent-lt),var(--accent-dk));
}
.blog-cta .eyebrow{color:var(--accent-lt)}
.blog-cta h3{
  font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);font-weight:400;
  color:var(--cream);margin:8px 0 16px;line-height:1.25;letter-spacing:0;text-transform:none;
}
.blog-cta h3 em{font-style:italic;color:var(--accent-lt);font-weight:300}
.blog-cta p{color:rgba(245,237,224,.85);margin:0 0 20px;max-width:60ch}
.blog-cta p strong{color:var(--accent-lt)}
.blog-cta .btn-gold{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;background:var(--accent-dk);color:#0A1628;
  text-decoration:none;font-family:var(--mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  border-radius:999px;transition:all .25s ease;
}
.blog-cta .btn-gold:hover{
  background:var(--accent-lt);transform:translateY(-2px);
  box-shadow:0 12px 28px -8px rgba(212,175,108,.5);
}

/* ===== QUARTIER CARD (recap) ===== */
.blog-quartier{
  margin:clamp(20px,2.5vw,32px) 0;
  padding:clamp(24px,3vw,32px) clamp(20px,2.5vw,28px);
  background:#F5EDE0;border:1px solid rgba(212,175,108,.3);
  border-left:3px solid var(--accent-dk);border-radius:4px;
  box-shadow:0 12px 28px -12px rgba(10,22,40,.3);
}
.blog-quartier h3{
  font-family:var(--serif);font-size:clamp(18px,1.8vw,22px);font-weight:400;
  text-transform:none;letter-spacing:0;color:#0A1628;margin:0 0 8px;
}
.blog-quartier p{margin:0;color:#3a4456;max-width:none}
.blog-quartier p strong{color:var(--accent-dk)}

/* ===== FAQ accordéon ===== */
.blog-faq-list{display:flex;flex-direction:column;gap:0}
.blog-faq-list details{
  padding:24px 0;border-bottom:1px solid rgba(245,237,224,.18);
}
.blog-faq-list summary{
  cursor:pointer;font-family:var(--serif);font-size:clamp(18px,1.9vw,24px);
  font-weight:400;color:var(--cream);
  display:flex;align-items:baseline;gap:16px;list-style:none;
  transition:color .25s ease;
}
.blog-faq-list summary::-webkit-details-marker{display:none}
.blog-faq-list summary::before{
  content:"+";font-family:var(--mono);font-size:18px;color:var(--accent-lt);
  flex-shrink:0;transition:transform .3s ease;
}
.blog-faq-list details[open] summary::before{content:"−"}
.blog-faq-list summary:hover{color:var(--accent-lt)}
.blog-faq-list details[open] summary{color:var(--accent-lt)}
.blog-faq-list details p{
  margin:16px 0 0 34px;color:rgba(245,237,224,.85);max-width:60ch;line-height:1.75;
}

/* ===== Back link discret ===== */
.blog-back{
  display:inline-flex;align-items:center;gap:10px;
  margin:clamp(48px,6vw,80px) 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,237,224,.6);text-decoration:none;transition:color .25s ease;
}
.blog-back:hover{color:var(--accent-lt)}

/* ============================================================
   PHOTOS EDITORIALES dans le corps des articles
   Style Conde Nast Traveler / Vogue : cinematic, premium
   ============================================================ */
.blog-photo{
  position:relative;
  margin:clamp(40px,5vw,72px) calc(50% - 50vw);     /* full bleed */
  max-width:100vw;
  overflow:hidden;
}
.blog-photo picture, .blog-photo img{
  display:block;width:100%;height:auto;
  max-height:80vh;object-fit:cover;
}
.blog-photo figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-lt);
  margin-top:14px;padding:0 clamp(20px,4vw,40px);
  display:flex;align-items:center;gap:12px;
  max-width:760px;margin-left:auto;margin-right:auto;
}
.blog-photo figcaption::before{
  content:"";display:inline-block;width:24px;height:1px;background:var(--accent-lt);
}

/* Variante : photo contenue (pas full bleed) */
.blog-photo--contained{
  margin:clamp(40px,5vw,72px) auto;
  max-width:880px;border-radius:6px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.blog-photo--contained picture, .blog-photo--contained img{
  border-radius:6px;
}

/* Variante : photo paysage cinematic 21/9 */
.blog-photo--cinema picture, .blog-photo--cinema img{
  aspect-ratio:21/9;max-height:none;
}

/* Variante : photo portrait 4/5 */
.blog-photo--portrait picture, .blog-photo--portrait img{
  aspect-ratio:4/5;max-height:none;
}

/* Variante : duo c\xF4te-\xE0-c\xF4te */
.blog-photo-duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.5vw,24px);
  margin:clamp(40px,5vw,72px) 0;
}
.blog-photo-duo > .blog-photo{
  margin:0;max-width:none;
}
.blog-photo-duo > .blog-photo picture, .blog-photo-duo > .blog-photo img{
  aspect-ratio:4/5;max-height:none;border-radius:4px;
}
@media (max-width:680px){
  .blog-photo-duo{grid-template-columns:1fr}
}

/* Lazy fade-in lors du load de l'image (CSS only) */
.blog-photo img{transition:filter .6s ease; filter:saturate(0.94)}
.blog-photo:hover img{filter:saturate(1.05)}

/* ============================================================
   Signature logo Delfosse complete en bas-droite de chaque illustration
   (DP monogramme + texte DELFOSSE PROPERTIES), blanc sur transparent
   ============================================================ */
.blog-card-art{
  background:
    /* Logo signature complet, bottom-right, ~78px */
    url('../img/delfosse-signature-white.svg?v=sig1') no-repeat right 18px bottom 16px / auto 78px,
    linear-gradient(135deg, #14233D 0%, #0A1628 100%) !important;
}
@media (max-width:680px){
  .blog-card-art{
    background:
      url('../img/delfosse-signature-white.svg?v=sig1') no-repeat right 14px bottom 12px / auto 62px,
      linear-gradient(135deg, #14233D 0%, #0A1628 100%) !important;
  }
}

/* ===== FALLBACK GLOBAL : assure visibilite minimale sur fond video ===== */
/* Couvre les cas non explicitement style ci-dessus (em, span, etc.) */
.gp-on-video p,
.gp-on-video li,
.gp-on-video summary,
.gp-on-video details p{color:rgba(245,237,224,.92)}
.gp-on-video h2, .gp-on-video h3, .gp-on-video h4{color:var(--cream)}
.gp-on-video em{color:var(--accent-lt);font-style:italic}
.gp-on-video strong{color:var(--accent-lt)}
.gp-on-video a{color:var(--accent-lt)}
/* Sauf dans les blog-quartier (cards crème opaques sur fond video) */
.blog-quartier h3,
.blog-quartier p,
.blog-quartier strong{color:#0A1628 !important}
.blog-quartier p strong{color:var(--accent-dk) !important}
/* Sauf dans les blog-cta (carte avec fond degrade propre) */
.blog-cta h3{color:var(--cream)}
.blog-cta p{color:rgba(245,237,224,.85)}
.blog-cta p strong{color:var(--accent-lt)}

/* ===== Mobile ===== */
@media (max-width:760px){
  .blog-section,.blog-toc-section{padding-left:5vw;padding-right:5vw}
  .blog-step{padding-left:18px}
  .blog-day-num{font-size:36px}
}