:root{--hb-dark:#2A2A41;--hb-deep:#1F1F30;--hb-gold:#CDAF76;--hb-gold-light:#E0C896;--hb-cream:#FAF7F1;--hb-text:rgba(250,247,241,0.90);--hb-muted:rgba(250,247,241,0.60);--hb-line:rgba(205,175,118,0.22);--hb-rose:#C98B7A;--hb-sage:#9FAE94}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:clip}
  body{background:var(--hb-dark);color:var(--hb-text);font-family:'Inter',sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.025'/></svg>")}
  .hl{background:linear-gradient(101deg,transparent 1%,rgba(205,175,118,0.30) 2%,rgba(205,175,118,0.30) 97%,transparent 99%);border-radius:3px;padding:1px 3px}
  .hl-rose{background:linear-gradient(99deg,transparent 1%,rgba(201,139,122,0.32) 2%,rgba(201,139,122,0.32) 97%,transparent 99%);border-radius:3px;padding:1px 3px}
  .doodle{position:absolute;pointer-events:none;z-index:3;overflow:visible}
  .doodle path,.doodle ellipse,.doodle line{fill:none;stroke:var(--hb-gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .botanical{display:block;margin:0 auto}
  .botanical path{fill:none;stroke:var(--hb-gold);stroke-width:1.4;stroke-linecap:round}
  .botanical .leaf{fill:rgba(205,175,118,0.14)}
  figure.editorial.ph{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--hb-deep);border:1.5px dashed var(--hb-line);border-radius:18px;text-align:center;padding:30px;gap:10px}
  figure.editorial.ph .ph-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hb-gold);font-weight:600}
  figure.editorial.ph .ph-tx{font-family:'Lora',serif;font-style:italic;font-size:19px;color:var(--hb-muted);max-width:38ch;line-height:1.4}
  ::selection{background:var(--hb-gold);color:var(--hb-deep)}
  .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--hb-gold);z-index:50;transition:width .1s linear}
  .wrap{max-width:1280px;margin:0 auto;padding:0 24px}

  header.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center;padding:80px 0 56px}
  .kicker{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--hb-gold);font-weight:600;margin-bottom:24px}
  h1.title{font-family:'Lora',serif;font-style:italic;font-weight:500;font-size:clamp(36px,4.4vw,58px);line-height:1.1;color:var(--hb-cream);margin-bottom:26px}
  .chapo{font-size:20px;color:var(--hb-muted);line-height:1.6;margin-bottom:30px}
  .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--hb-muted)}
  .meta b{color:var(--hb-text);font-weight:500}
  .meta .dot{color:var(--hb-line)}
  .hero-img{aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--hb-line)}
  .hero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(0.92)}

  .layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:60px;padding:44px 0 0;align-items:start;border-top:1px solid var(--hb-line)}
  aside.toc{position:sticky;top:36px}
  .toc-title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hb-muted);margin-bottom:18px}
  .toc a{display:block;font-size:14px;color:var(--hb-muted);text-decoration:none;padding:8px 0 8px 16px;border-left:2px solid var(--hb-line);transition:.2s}
  .toc a:hover{color:var(--hb-text)}
  .toc a.active{color:var(--hb-gold);border-left-color:var(--hb-gold)}

  .content{max-width:780px;min-width:0;overflow-wrap:break-word}
  .content p{font-size:18px;margin-bottom:26px;color:var(--hb-text);max-width:70ch}
  .lede::first-letter{font-family:'Lora',serif;font-style:italic;font-weight:600;font-size:74px;line-height:.72;float:left;color:var(--hb-gold);padding:10px 14px 0 0}
  .content h2{font-family:'Lora',serif;font-style:italic;font-weight:500;font-size:32px;color:var(--hb-cream);margin:8px 0 20px;line-height:1.18;max-width:20ch}
  .content h3{font-size:19px;font-weight:600;color:var(--hb-gold-light);margin:34px 0 12px}
  .content strong{color:var(--hb-cream);font-weight:600}

  .sep{display:flex;align-items:center;justify-content:center;gap:12px;margin:56px 0}
  .sep span{width:5px;height:5px;border-radius:50%;background:var(--hb-gold);opacity:.7}
  .sep span:nth-child(2){width:7px;height:7px;transform:rotate(45deg);border-radius:1px;opacity:1}

  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:42px 0;padding:30px 0;border-top:1px solid var(--hb-line);border-bottom:1px solid var(--hb-line)}
  .stat .num{font-family:'Lora',serif;font-style:italic;font-weight:600;font-size:42px;color:var(--hb-gold);line-height:1}
  .stat .lab{font-size:13px;color:var(--hb-muted);margin-top:8px;line-height:1.4}

  .enbref{background:linear-gradient(135deg,rgba(205,175,118,0.09),rgba(205,175,118,0.02));border:1px solid var(--hb-line);border-radius:16px;padding:26px 30px;margin:34px 0}
  .enbref .lbl,.fiche .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hb-gold);font-weight:600;margin-bottom:14px}
  .enbref ul{list-style:none}
  .enbref li{position:relative;padding-left:22px;margin-bottom:10px;font-size:16px}
  .enbref li:before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--hb-gold)}

  .fiche{background:var(--hb-deep);border:1px solid var(--hb-line);border-left:3px solid var(--hb-gold);border-radius:0 16px 16px 0;padding:26px 30px;margin:40px 0}
  .fiche h4{font-family:'Lora',serif;font-style:italic;font-size:21px;color:var(--hb-cream);margin-bottom:16px}
  .fiche dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:15px}
  .fiche dt{color:var(--hb-muted)}
  .fiche dd{color:var(--hb-text);text-align:right;font-weight:500}

  figure.schema{margin:48px 0;position:relative}
  figure.schema .board{background:linear-gradient(135deg,rgba(205,175,118,0.07),rgba(31,31,48,0.45));border:1px solid var(--hb-line);border-radius:18px;padding:32px 24px 18px}
  figure.schema svg{width:100%;height:auto;display:block}
  figure figcaption{font-size:13px;color:var(--hb-muted);text-align:center;margin-top:14px;font-style:italic}
  .sch-label{font-family:'Lora',serif;font-style:italic;font-size:17px;fill:var(--hb-cream)}
  .sch-val{font-family:'Inter',sans-serif;font-size:12px;fill:var(--hb-gold);font-weight:600}

  figure.editorial{margin:52px 0;border-radius:20px;overflow:hidden;border:1px solid var(--hb-line)}
  figure.editorial img{width:100%;display:block;filter:saturate(0.92)}
  figure.editorial figcaption{padding:14px 20px;background:var(--hb-deep);margin:0}

  blockquote.big{margin:60px 0;text-align:center;padding:0 20px}
  blockquote.big .mark{font-family:'Lora',serif;font-size:60px;color:var(--hb-gold);line-height:.5;display:block;margin-bottom:8px}
  blockquote.big p{font-family:'Lora',serif;font-style:italic;font-weight:500;font-size:30px;line-height:1.4;color:var(--hb-cream);max-width:24ch;margin:0 auto}

  .note-manuscrite{font-family:'Caveat',cursive;font-weight:600;font-size:27px;color:var(--hb-gold-light);line-height:1.05;transform:rotate(-4deg);position:absolute}
  .note-marge{font-family:'Caveat',cursive;font-weight:500;font-size:25px;color:var(--hb-gold-light);transform:rotate(-2deg);display:block;margin:34px 0 34px 8px;max-width:100%;overflow-wrap:break-word}
  h1.title .hand{font-family:'Caveat',cursive;font-style:normal;font-weight:600;color:var(--hb-gold);font-size:.82em;display:inline-block;transform:rotate(-3deg)}
  h1.title .ul-hand,.content .ul-hand{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='12'><path d='M3,7 Q18,1 35,7 T67,6' fill='none' stroke='%23CDAF76' stroke-width='2.4' stroke-linecap='round'/></svg>") left bottom no-repeat;background-size:100% .42em;padding-bottom:.14em}
  .scribble{position:absolute;font-family:'Caveat',cursive;font-weight:500;color:var(--hb-gold-light);pointer-events:none;z-index:3}
  .hand-svg{position:absolute;pointer-events:none;z-index:2;overflow:visible}
  .hand-svg path,.hand-svg ellipse{fill:none;stroke:var(--hb-gold);stroke-width:2.2;stroke-linecap:round}
  .content{position:relative}

  table.cmp{width:100%;border-collapse:collapse;margin:32px 0;font-size:15px}
  table.cmp th,table.cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hb-line)}
  table.cmp thead th{font-family:'Lora',serif;font-style:italic;color:var(--hb-cream);font-size:17px;border-bottom:1px solid var(--hb-gold)}
  table.cmp td:first-child{color:var(--hb-muted)}

  .author{display:flex;gap:24px;align-items:center;background:var(--hb-deep);border:1px solid var(--hb-line);border-radius:20px;padding:28px 32px;margin:64px 0 0}
  .author img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--hb-gold)}
  .author h4{font-family:'Lora',serif;font-style:italic;font-size:22px;color:var(--hb-cream);margin-bottom:4px}
  .author .role{font-size:13px;color:var(--hb-gold);margin-bottom:12px}
  .author p{font-size:15px;color:var(--hb-muted);line-height:1.6}

  .cta{text-align:center;background:linear-gradient(135deg,rgba(205,175,118,0.11),rgba(205,175,118,0.03));border:1px solid var(--hb-line);border-radius:22px;padding:50px 32px;margin:40px 0}
  .cta h3{font-family:'Lora',serif;font-style:italic;font-size:30px;color:var(--hb-cream);margin-bottom:14px}
  .cta p{color:var(--hb-muted);max-width:44ch;margin:0 auto 26px}
  .btn{display:inline-block;background:var(--hb-gold);color:var(--hb-deep);font-weight:600;font-size:16px;padding:15px 40px;border-radius:40px;text-decoration:none;transition:.25s cubic-bezier(0.34,1.56,0.64,1)}
  .btn:hover{background:var(--hb-gold-light);transform:translateY(-2px)}

  .related{padding:64px 0 96px;border-top:1px solid var(--hb-line);margin-top:64px}
  .related .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hb-muted);margin-bottom:24px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{display:block;background:var(--hb-deep);border:1px solid var(--hb-line);border-radius:16px;padding:26px;transition:.25s;cursor:pointer;text-decoration:none;color:inherit}
  .card:hover{transform:translateY(-4px);border-color:var(--hb-gold)}
  .card .ct{font-size:12px;color:var(--hb-gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
  .card h5{font-family:'Lora',serif;font-style:italic;font-size:18px;color:var(--hb-cream);line-height:1.3}

  @media(max-width:880px){
    header.hero{grid-template-columns:1fr;gap:32px;padding:48px 0 36px}
    .hero-img{aspect-ratio:16/10;max-height:340px}
    .layout{grid-template-columns:minmax(0,1fr);gap:0}
    table.cmp{display:block;overflow-x:auto;white-space:nowrap}
    aside.toc{display:none}
    .stats{grid-template-columns:1fr 1fr;gap:24px}
    .cards{grid-template-columns:1fr}
    .author{flex-direction:column;text-align:center}
    .doodle,.hand-svg,.note-manuscrite{display:none}
    .note-marge{font-size:21px;transform:none;margin:24px 0;max-width:100%;overflow-wrap:break-word}
    .content{max-width:100%}
    .content p,.content h2{max-width:100%}
    .content p{font-size:17px}
    .stat .num{font-size:34px}
    blockquote.big p{font-size:24px}
  }

/* Variante hero pleine largeur + banniere image (articles a ouverture generee) */
header.hero-full{padding:72px 0 28px;text-align:center;max-width:820px;margin:0 auto}
header.hero-full .chapo{margin-left:auto;margin-right:auto;max-width:60ch}
header.hero-full .meta{justify-content:center}
figure.banner{margin:8px 0 0;border-radius:20px;overflow:hidden;border:1px solid var(--hb-line)}
figure.banner img{width:100%;display:block}
figure.banner figcaption{padding:14px 20px;background:var(--hb-deep);margin:0;font-size:13px;color:var(--hb-muted);font-style:italic;text-align:center}
@media(max-width:880px){header.hero-full{padding:44px 0 20px}}