/* FIT — Styles externalisés depuis marche-cheat-code-perte-de-gras.html */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { --black:#0d0d0d; --white:#f8f6f1; --cream:#ede9e0; --gold:#c8a96e; --gold-dark:#a88a50; --grey:#6b6b6b; --light-grey:#e2dfd8; --section-bg:#f2efe8; }
    html { scroll-behavior: smooth; }
    body { font-family:'Outfit',sans-serif; background:var(--white); color:var(--black); overflow-x:hidden; }
    nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.2rem 4rem; background:rgba(13,13,13,.97); backdrop-filter:blur(12px); border-bottom:1px solid rgba(200,169,110,.15); }
    .nav-logo { display:flex; align-items:center; text-decoration:none; }
    .nav-logo img { height:65px; width:auto; display:block; filter:brightness(1.1); transition:transform .3s ease; }
    .nav-logo:hover img { transform:scale(1.05); }
    .nav-links { display:flex; gap:1.25rem; list-style:none; align-items:center; }
    .nav-links a { font-size:.72rem; font-weight:500; color:rgba(248,246,241,.65); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; background:transparent!important; box-shadow:none!important; }
    .nav-links a:hover, .nav-links a.active { color:var(--gold); }
    .nav-cta { display:inline-flex!important; align-items:center; justify-content:center; background:var(--gold)!important; color:var(--black)!important; padding:.62rem 1.2rem!important; border-radius:2px!important; font-weight:700!important; }
    .nav-cta:hover { background:var(--gold-dark)!important; color:var(--white)!important; }
    .article-hero { background:var(--black); padding:10rem 6rem 5rem; position:relative; overflow:hidden; }
    .article-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(13,13,13,.97) 50%,rgba(200,169,110,.07) 100%); }
    .hero-content { position:relative; z-index:2; max-width:900px; }
    .breadcrumb { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.5rem; }
    .breadcrumb a { color:rgba(248,246,241,.45); text-decoration:none; }
    .breadcrumb a:hover { color:var(--gold); }
    .article-tag { font-size:.65rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
    h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,5vw,5.4rem); font-weight:300; line-height:1.04; color:var(--white); max-width:850px; }
    h1 em { color:var(--gold); font-style:italic; }
    .hero-sub { color:rgba(248,246,241,.55); font-size:1.04rem; line-height:1.8; max-width:680px; margin-top:1.4rem; }
    .article-meta-line { color:rgba(248,246,241,.35); font-size:.78rem; margin-top:1.6rem; }
    .article-wrap { display:grid; grid-template-columns:minmax(0,760px) 320px; gap:4rem; padding:5.5rem 6rem 6rem; align-items:start; }
    article { background:var(--white); }
    article p { font-size:1rem; line-height:1.9; color:#303030; margin-bottom:1.4rem; }
    article h2 { font-family:'Cormorant Garamond',serif; font-size:2.15rem; font-weight:400; line-height:1.15; margin:3rem 0 1.1rem; color:var(--black); }
    article h2 em { color:var(--gold); font-style:italic; }
    article h3 { font-size:1.05rem; font-weight:700; letter-spacing:.02em; margin:2rem 0 .7rem; color:var(--black); }
    .intro { font-size:1.12rem; color:#1d1d1d; }
    .callout { border-left:3px solid var(--gold); background:var(--section-bg); padding:1.4rem 1.5rem; margin:2rem 0; }
    .callout p { margin:0; font-weight:500; color:var(--black); }
    .field-list { display:grid; gap:1rem; margin:1.5rem 0 2rem; }
    .field-item { border:1px solid var(--light-grey); padding:1.1rem 1.2rem; background:#fffdf8; }
    .field-item strong { display:block; color:var(--black); margin-bottom:.35rem; }
    .field-item span { color:var(--grey); line-height:1.65; font-size:.93rem; }
    .article-cta { background:var(--black); padding:2rem; margin-top:3rem; }
    .article-cta h2 { color:var(--white); margin:0 0 .8rem; font-size:2rem; }
    .article-cta p { color:rgba(248,246,241,.55); margin-bottom:1.4rem; }
    .cta-row { display:flex; gap:1rem; flex-wrap:wrap; }
    .btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; background:var(--gold); color:var(--black); padding:.9rem 1.15rem; border-radius:2px; font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:all .2s; }
    .btn:hover { background:var(--gold-dark); color:var(--white); }
    .btn.secondary { background:transparent; color:var(--gold); border:1px solid rgba(200,169,110,.35); }
    .btn.secondary:hover { background:rgba(200,169,110,.08); color:var(--gold); }
    aside { position:sticky; top:110px; }
    .side-card { background:var(--section-bg); border:1px solid var(--light-grey); padding:1.7rem; margin-bottom:1.2rem; }
    .side-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:400; margin-bottom:.8rem; }
    .side-card p { color:var(--grey); font-size:.9rem; line-height:1.7; margin-bottom:1.2rem; }
    .side-link { display:inline-flex; color:var(--black); font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; }
    .side-link:hover { color:var(--gold); }
    footer { background:#080808; padding:2.8rem 6rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.05); }
    .footer-logo { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:600; color:rgba(248,246,241,.4); text-decoration:none; }
    .footer-copy { font-size:.7rem; color:rgba(248,246,241,.2); }
    .footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
    .footer-links a { font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(248,246,241,.3); text-decoration:none; transition:color .2s; }
    .footer-links a:hover { color:var(--gold); }


    /* HERO ARTICLE — texte à gauche, image à droite, vignette affichée entière */
    .hero-content {
      max-width: 1380px;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(560px, 1.18fr);
      gap: 4.5rem;
      align-items: center;
    }
    .hero-content > *:not(.hero-visual) { grid-column: 1; }
    .hero-visual {
      grid-column: 2;
      grid-row: 1 / span 6;
      width: 100%;
      max-width: 760px;
      justify-self: end;
      margin: 0;
      aspect-ratio: 16 / 9;
      border: 1px solid rgba(200,169,110,.28);
      border-radius: 2px;
      overflow: hidden;
      box-shadow: 0 28px 80px rgba(0,0,0,.42);
      background: #080808;
    }
    .hero-visual img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center center;
    }
    @media (max-width:1280px) {
      .hero-content {
        grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
        gap: 3rem;
      }
      .hero-visual { max-width: 680px; }
    }
    @media (max-width:1024px) {
      .hero-content { display: block; max-width: 900px; }
      .hero-visual { max-width: 100%; margin-top: 2rem; aspect-ratio: 16 / 9; justify-self: initial; }
    }

    @media (max-width:1024px) { nav { padding:1.1rem 2rem; } .nav-links { display:none; } .article-hero { padding:8rem 2.5rem 4rem; } .article-wrap { grid-template-columns:1fr; padding:4rem 2.5rem 5rem; gap:3rem; } aside { position:static; } footer { flex-direction:column; gap:1.2rem; text-align:center; padding:2.5rem; } }