/* Trilogie Beauté — feuille de style partagée du blog (articles + index). Design aligné sur index.html. */
:root{
  --bg:#ffffff;--cream:#faf8f6;--cream2:#f5f1ec;--rose:#fbefed;
  --ink:#1f1b19;--ink-soft:#4a433e;--muted:#9a9089;
  --red:#d90700;--red-dk:#b00500;--line:#ece7e1;
  --maxw:1340px;--gut:clamp(16px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Hind',system-ui,sans-serif;
  font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Raleway',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:'Raleway',sans-serif;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  font-size:.72rem;color:var(--red-dk);margin:0 0 18px}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--red);
  vertical-align:middle;margin-right:12px;transform:translateY(-3px)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Raleway',sans-serif;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;padding:15px 30px;border-radius:999px;
  border:1px solid transparent;transition:.25s;cursor:pointer}
.btn-fill{background:var(--red);color:#fff}
.btn-fill:hover{background:var(--red-dk)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:116px;gap:24px}
.logo img{height:94px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:26px;margin-right:calc(var(--gut) * -0.5)}
.menu{display:flex;gap:20px;align-items:center}
.menu a{font-family:'Raleway',sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft)}
.menu a:hover{color:var(--red-dk)}
.langs{display:flex;gap:1px;align-items:center;font-family:'Raleway',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.langs button{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);padding:2px 3px}
.langs button.on{color:var(--ink)}
.langs a{color:var(--muted)}.langs a.on{color:var(--ink)}
.langs span{color:var(--line);font-size:.6rem}

/* layout article : barre rubriques + contenu */
.article{padding-block:clamp(40px,6vw,72px)}
.art-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(36px,5vw,76px);
  max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.art-side{position:sticky;top:140px;align-self:start}
.back{display:inline-block;font-family:'Raleway',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.06em;color:var(--muted);margin-bottom:28px}
.back:hover{color:var(--red-dk)}
.rub-title{font-family:'Raleway',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-dk);margin:0 0 14px}
.rubriques{display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line);padding-left:16px}
.rubriques a{font-family:'Raleway',sans-serif;font-size:.92rem;color:var(--ink-soft);padding:6px 0;transition:.2s}
.rubriques a:hover{color:var(--red-dk)}
.rubriques a.on{color:var(--red);font-weight:600}
.art-main{max-width:780px;min-width:0}
.art-main h1{font-weight:300;font-size:clamp(1.9rem,3.4vw,2.45rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 16px}
.art-meta{font-family:'Raleway',sans-serif;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:26px;margin:0 0 36px}
.art-body>p{margin:0 0 22px;color:var(--ink-soft)}
.art-body h2{font-weight:600;font-size:1.3rem;letter-spacing:-.01em;margin:40px 0 12px;color:var(--ink)}
.art-body strong{color:var(--ink);font-weight:500}
.art-body ul{margin:0 0 22px;padding-left:20px;color:var(--ink-soft)}
.art-body li{margin-bottom:8px}
.art-lead{font-size:1.12rem !important;color:var(--ink) !important}
.trilogie-box{background:var(--cream);border-left:3px solid var(--red);border-radius:0 8px 8px 0;padding:26px 30px;margin:40px 0}
.trilogie-box h2{margin-top:0}
.note{font-size:.9rem;color:var(--muted);font-style:italic}
.cta{margin-top:10px}

/* sources repliables */
.sources{margin-top:48px;padding-top:26px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.sources summary{font-family:'Raleway',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-dk);font-weight:600;cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:"+";font-size:1.05rem;line-height:1;color:var(--muted)}
.sources[open] summary::after{content:"\2013"}
.sources ul{margin:16px 0 0;padding-left:18px}
.src-date{margin:10px 0 0;font-style:italic;font-size:.8rem}
.sources a{color:var(--ink-soft);word-break:break-word}
.sources a:hover{color:var(--red-dk)}
.sources li{margin-bottom:8px}

/* index blog */
.blog-hero{background:linear-gradient(180deg,var(--cream),#fff);padding-block:clamp(48px,7vw,88px)}
.blog-hero h1{font-weight:300;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;margin:0 0 16px;letter-spacing:-.02em}
.blog-hero h1 b{font-weight:800}
.blog-hero p{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:60ch;margin:0}
.blog-section{padding-block:clamp(40px,6vw,72px)}
.blog-section:nth-child(even){background:var(--cream)}
.blog-section h2{font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 6px}
.blog-section h2 b{font-weight:800}
.blog-section .sub{color:var(--muted);margin:0 0 34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(31,27,25,.08);border-color:#e2d6ce}
.card .ph{aspect-ratio:3/2;background:
   repeating-linear-gradient(135deg,transparent 0 22px,rgba(217,7,0,.035) 22px 44px),var(--cream);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Raleway',sans-serif;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.card-illus{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-bottom:1px solid var(--line);background:var(--cream)}
.card .card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card .tag{font-family:'Raleway',sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-dk);font-weight:600;margin:0 0 10px}
.card h3{font-weight:600;font-size:1.12rem;line-height:1.25;margin:0 0 10px;color:var(--ink)}
.card p{font-size:.95rem;color:var(--ink-soft);margin:0 0 16px;flex:1}
.card .read{font-family:'Raleway',sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--red)}

/* footer */
footer{background:var(--ink);color:#cfc7c1;padding-block:40px;font-size:.82rem;margin-top:60px}
footer .ia-note{font-size:.78rem;color:var(--muted);max-width:640px;margin-top:10px;line-height:1.6}

/* lauranne */
.lauranne{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;display:flex;
  flex-direction:column;align-items:center;gap:14px;background:rgba(217,7,0,.8);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);color:#fff;border:0;border-radius:26px 0 0 26px;padding:28px 18px;
  cursor:pointer;box-shadow:-8px 0 30px rgba(31,27,25,.20);transition:.25s;font-family:'Raleway',sans-serif;font-weight:600}
.lauranne:hover{background:rgba(217,7,0,.93);padding-right:24px}
.lauranne .heart{width:30px;height:30px;fill:#fff;transform-origin:center;animation:heartbeat 2.4s ease-in-out infinite}
.lauranne .lname{writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.24em;font-size:.95rem}
@keyframes heartbeat{0%,45%,100%{transform:scale(1)}10%{transform:scale(1.24)}20%{transform:scale(.97)}30%{transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.lauranne .heart{animation:none}}

@media(max-width:900px){
  .menu,.langs{display:none}
  .art-layout{grid-template-columns:1fr}
  .art-side{position:static;margin-bottom:26px}
  .rubriques{flex-direction:row;flex-wrap:wrap;border-left:0;padding-left:0;gap:6px 18px}
  .cards{grid-template-columns:1fr}
}