:root{
    --blue-deep:#0B2A6B;
    --blue-deep-2:#082058;
    --blue-royal:#1E5FBF;
    --gold:#C9A227;
    --gold-light:#E7C766;
    --paper:#FBFAF6;
    --paper-2:#F4F2EB;
    --ink:#151A22;
    --ink-soft:#4A5164;
    --rule:#DFDACB;
    --white:#FFFFFF;
    --maxw:1220px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Source Serif 4', Georgia, serif;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

  .eyebrow{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  /* ---------- Topbar ---------- */
  .topbar{
    background:var(--blue-deep-2);
    color:#C9D3EA;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
  }
  .topbar .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:8px; padding-bottom:8px;
    gap:12px;
    flex-wrap:wrap;
  }
  .topbar .date{opacity:.85;}
  .topbar .socials{display:flex; align-items:center; gap:14px;}
  .topbar .socials a{display:flex; align-items:center; opacity:.85; transition:opacity .2s;}
  .topbar .socials a:hover{opacity:1; color:var(--gold-light);}

  /* ---------- Masthead ---------- */
  .masthead{
    background:var(--white);
    position:relative;
    overflow:hidden;
    border-bottom:3px solid var(--gold);
  }
  .masthead::before{
    /* signature: rayon d'or — radiant halo lines, echo of the emblem's aureole */
    content:"";
    position:absolute;
    top:-140px; left:50%;
    width:900px; height:280px;
    transform:translateX(-50%);
    background:
      repeating-conic-gradient(
        from 0deg at 50% 100%,
        rgba(201,162,39,.30) 0deg 1.1deg,
        transparent 1.1deg 9deg
      );
    pointer-events:none;
  }
  .masthead .wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 24px 16px;
    flex-direction:column;
    text-align:center;
  }
  .brand-mark{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
  }
  .brand-mark svg{width:30px; height:30px;}
  .brand-logo-img{height:130px; width:auto; display:block;}
  .brand-name{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:44px;
    letter-spacing:.01em;
    color:var(--white);
    line-height:1;
  }
  .brand-name em{
    font-style:normal;
    color:var(--gold-light);
  }
  .brand-tagline{
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--blue-deep);
    margin-top:10px;
  }

  /* ---------- Nav ---------- */
  .navbar{
    background:var(--white);
    border-bottom:1px solid var(--rule);
    position:sticky; top:0; z-index:50;
  }
  .navbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:56px;
  }
  .nav-links{
    display:flex;
    gap:30px;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
  }
  .nav-links a{
    padding:8px 0;
    position:relative;
    color:var(--ink);
  }
  .nav-links a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:2px; background:var(--gold);
    transform:scaleX(0); transform-origin:left;
    transition:transform .22s ease;
  }
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-links a.active{color:var(--blue-royal);}
  .nav-links a.active::after{transform:scaleX(1);}

  .nav-search{
    display:flex; align-items:center; gap:16px;
  }
  .nav-search button,
  .nav-search a.search-btn{
    background:none; border:none; cursor:pointer;
    color:var(--ink); padding:6px;
    display:flex; align-items:center;
  }
  .subscribe-btn{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:.03em;
    background:var(--blue-deep);
    color:#fff;
    padding:9px 18px;
    border-radius:2px;
    transition:background .2s;
    white-space:nowrap;
  }
  .subscribe-btn:hover{background:var(--blue-royal);}

  .burger{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .burger svg{width:24px; height:24px;}

  /* ---------- Section heading (signature divider) ---------- */
  .section-head{
    display:flex; align-items:center; gap:14px;
    margin:0 0 26px;
  }
  .section-head .rayon{
    width:22px; height:22px; flex:none;
    color:var(--gold);
  }
  .section-head h2{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:26px;
    margin:0;
    color:var(--blue-deep);
    white-space:nowrap;
  }
  .section-head .line{
    height:1px; background:var(--rule); width:100%;
  }
  .section-head .see-all{
    font-family:'Inter', sans-serif;
    font-size:12px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    color:var(--blue-royal);
    white-space:nowrap;
  }

  /* ---------- Hero / À la une ---------- */
  .hero{padding:44px 0 10px;}
  .hero-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:36px;
  }
  .hero-main{position:relative;}
  .hero-main a.img-link{display:block; overflow:hidden; border-radius:2px;}
  .hero-main img{
    width:100%; height:440px; object-fit:cover;
    transition:transform .5s ease;
  }
  .hero-main a.img-link:hover img{transform:scale(1.035);}
  .hero-cat{
    display:inline-block;
    background:var(--gold);
    color:var(--blue-deep-2);
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:5px 11px;
    margin-top:20px;
  }
  .hero-main h1{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:38px;
    line-height:1.12;
    margin:14px 0 12px;
    color:var(--ink);
  }
  .hero-main h1 a:hover{color:var(--blue-royal);}
  .hero-main p.lead{
    font-size:16.5px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0 0 12px;
    max-width:60ch;
  }
  .byline{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    color:var(--ink-soft);
  }
  .byline b{color:var(--ink); font-weight:600;}

  .hero-side{
    display:flex; flex-direction:column;
    gap:0;
  }
  .side-item{
    display:flex; gap:14px;
    padding:16px 0;
    border-bottom:1px solid var(--rule);
  }
  .side-item:first-child{padding-top:0;}
  .side-item img{
    width:104px; height:78px; object-fit:cover; flex:none; border-radius:2px;
  }
  .side-item .cat{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--blue-royal);
    display:block;
    margin-bottom:4px;
  }
  .side-item h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:16.5px;
    line-height:1.28;
    margin:0;
    color:var(--ink);
  }
  .side-item h3 a:hover{color:var(--blue-royal);}

  /* ---------- Ticker / Verset du jour (signature detail) ---------- */
  .verset{
    background:var(--paper-2);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:16px 0;
    margin-top:34px;
  }
  .verset .wrap{
    display:flex; align-items:center; gap:16px;
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:15px;
    color:var(--blue-deep);
  }
  .verset .rayon-sm{width:18px; height:18px; flex:none; color:var(--gold);}
  .verset .ref{
    font-family:'Inter', sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:.05em;
    color:var(--ink-soft);
    white-space:nowrap;
    margin-left:auto;
  }

  /* ---------- Content layout: main + aside ---------- */
  .content{
    padding:46px 0;
    display:grid;
    grid-template-columns:1fr 320px;
    gap:48px;
  }
  .main-col{min-width:0;}
  .category-block{margin-bottom:48px;}
  .article-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
  }
  .card img{width:100%; height:150px; object-fit:cover; border-radius:2px; display:block;}
  .card .cat{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--blue-royal);
    display:block;
    margin:12px 0 6px;
  }
  .card h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:17px;
    line-height:1.3;
    margin:0 0 8px;
    color:var(--ink);
  }
  .card h3 a:hover{color:var(--blue-royal);}
  .card .meta{
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    color:var(--ink-soft);
  }

  /* Aside */
  aside{min-width:0;}
  .aside-box{
    margin-bottom:40px;
  }
  .aside-title{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:19px;
    color:var(--blue-deep);
    margin:0 0 18px;
    padding-bottom:12px;
    border-bottom:2px solid var(--gold);
  }
  .rank-item{
    display:flex; gap:14px; align-items:flex-start;
    padding:14px 0;
    border-bottom:1px solid var(--rule);
  }
  .rank-item:first-child{padding-top:0;}
  .rank-num{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:26px;
    color:var(--gold);
    line-height:1;
    flex:none;
    width:30px;
  }
  .rank-item h4{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:14.5px;
    line-height:1.32;
    margin:0 0 4px;
    color:var(--ink);
  }
  .rank-item h4 a:hover{color:var(--blue-royal);}
  .rank-item .cat{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:9.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--blue-royal);
  }

  .newsletter-box{
    background:var(--blue-deep);
    color:#fff;
    padding:28px 24px;
    border-radius:2px;
    position:relative;
    overflow:hidden;
  }
  .newsletter-box::before{
    content:"";
    position:absolute; top:-60px; right:-60px;
    width:160px; height:160px;
    border:1px solid rgba(231,199,102,.3);
    border-radius:50%;
  }
  .newsletter-box h4{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:20px;
    margin:0 0 8px;
  }
  .newsletter-box p{
    font-size:13.5px;
    line-height:1.55;
    color:#C9D3EA;
    margin:0 0 16px;
    font-family:'Inter', sans-serif;
  }
  .newsletter-form{display:flex; gap:8px;}
  .newsletter-form input{
    flex:1; min-width:0;
    padding:10px 12px;
    border:none; border-radius:2px;
    font-family:'Inter', sans-serif;
    font-size:13px;
  }
  .newsletter-form button{
    background:var(--gold);
    color:var(--blue-deep-2);
    border:none;
    font-weight:700;
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    letter-spacing:.03em;
    text-transform:uppercase;
    padding:0 16px;
    border-radius:2px;
    cursor:pointer;
    transition:background .2s;
  }
  .newsletter-form button:hover{background:var(--gold-light);}

  .quote-box{
    border-left:3px solid var(--gold);
    padding:4px 0 4px 18px;
  }
  .quote-box p{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:16px;
    line-height:1.5;
    color:var(--blue-deep);
    margin:0 0 10px;
  }
  .quote-box .who{
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--blue-deep-2);
    color:#B9C6E6;
    margin-top:20px;
    border-top:3px solid var(--gold);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:36px;
    padding:52px 0 32px;
  }
  .footer-brand .brand-name{font-size:26px;}
  .footer-logo-img{height:64px; width:auto; display:block;}
  .footer-brand p{
    font-family:'Inter', sans-serif;
    font-size:13px;
    line-height:1.6;
    color:#9FB0D6;
    margin-top:14px;
    max-width:34ch;
  }
  .footer-col h5{
    font-family:'Inter', sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin:0 0 16px;
  }
  .footer-col ul{list-style:none; margin:0; padding:0;}
  .footer-col li{margin-bottom:11px;}
  .footer-col a{
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    color:#C9D3EA;
    transition:color .2s;
  }
  .footer-col a:hover{color:var(--gold-light);}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:20px 0;
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Inter', sans-serif;
    font-size:12px;
    color:#8CA0CC;
    flex-wrap:wrap;
    gap:10px;
  }
  .footer-bottom .socials{display:flex; align-items:center; gap:14px;}
  .footer-bottom .socials a{display:flex; align-items:center;}
  .footer-bottom .socials a{color:#8CA0CC;}
  .footer-bottom .socials a:hover{color:var(--gold-light);}

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .content{grid-template-columns:1fr;}
    .hero-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 720px){
    .wrap{padding:0 28px;}
    .hero{padding:22px 0 10px;}
    .hero-main img{height:230px;}
    .side-item img{width:92px; height:68px;}
    .nav-links{
      position:fixed; top:56px; left:0; right:0; bottom:0;
      background:var(--white);
      flex-direction:column;
      gap:0;
      padding:8px 24px;
      transform:translateX(-100%);
      transition:transform .25s ease;
      z-index:49;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{padding:14px 0; border-bottom:1px solid var(--rule); width:100%;}
    .burger{display:block;}
    .subscribe-btn{display:none;}
    .brand-name{font-size:32px;}
    .hero-main h1{font-size:27px;}
    .article-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr; padding:40px 0 24px;}
    .verset .ref{display:none;}
    .section-head{gap:8px;}
    .section-head h2{font-size:20px; white-space:normal; flex:none;}
    .section-head .line{display:none;}
    .section-head .see-all{margin-left:auto; flex:none;}
  }
  @media (max-width: 480px){
    .article-grid{grid-template-columns:1fr 1fr; gap:16px;}
    .card img{height:100px;}
    .card h3{font-size:14px; line-height:1.25;}
    .card .cat{font-size:9px; margin:8px 0 4px;}
    .card .meta{font-size:10px;}
    .side-item img{width:84px; height:64px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }