: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;
  }

  /* ---------- Bannière promotionnelle (accueil, sous la nav) ---------- */
  .promo-banner{
    margin:20px 0;
    text-align:center;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(11,42,107,.14);
  }
  .promo-banner img{
    display:inline-block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:340px;
  }
  @media (max-width: 720px){
    .promo-banner{margin:14px 0;}
    .promo-banner img{max-height:190px;}
  }

  /* ---------- Banner personnalisé (remplace topbar + masthead) ---------- */
  .custom-masthead-banner{
    display:block;
    background:var(--white);
    border-bottom:3px solid var(--gold);
  }
  .custom-masthead-banner img{
    display:block;
    width:100%;
    aspect-ratio:2.3 / 1;
    height:auto;
    object-fit:cover;
  }

  /* ---------- Bannière publicitaire (fin de chaque bloc catégorie) ---------- */
  .ad-banner{
    margin:36px 0 8px;
    text-align:center;
  }
  .ad-label{
    display:block;
    font-family:'Fraunces', serif;
    font-size:11px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:12px;
  }
  .ad-banner-link{
    display:block;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(11,42,107,.09);
    background:var(--paper-2);
  }
  .ad-banner img{width:100%; height:auto; display:block;}
  @media (max-width: 720px){
    .ad-banner{margin:24px 0 4px;}
    .ad-label{font-size:9.5px; letter-spacing:.22em; margin-bottom:8px;}
  }

  /* ---------- Nav ---------- */
  .navbar{
    background:var(--white);
    border-bottom:1px solid var(--rule);
    z-index:50;
    box-shadow:0 2px 10px rgba(11,42,107,.08);
  }
  .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;
  }

  /* ---------- Compte lecteur (connexion / inscription) ---------- */
  .reader-auth{
    display:flex; align-items:center; gap:10px;
    font-family:'Inter', sans-serif; font-size:13px;
  }
  .reader-login-link{
    color:var(--blue-deep); font-weight:600;
  }
  .reader-login-link:hover{color:var(--blue-royal);}
  .reader-register-btn{
    background:var(--blue-deep); color:#fff;
    padding:7px 16px; border-radius:20px;
    font-weight:600; white-space:nowrap;
    transition:background .2s;
  }
  .reader-register-btn:hover{background:var(--blue-royal);}
  .reader-name{
    font-weight:600; color:var(--blue-deep);
  }
  .reader-logout-form{display:inline;}
  .reader-logout-btn{
    background:none; border:1px solid var(--rule); color:var(--ink-soft);
    padding:6px 12px; border-radius:20px; font-family:'Inter', sans-serif;
    font-size:12.5px; font-weight:600; cursor:pointer; transition:all .2s;
  }
  .reader-logout-btn:hover{border-color:var(--blue-deep); color:var(--blue-deep);}
  @media (max-width: 720px){
    .reader-auth{gap:6px;}
    .reader-login-link{display:none;}
    .reader-register-btn{padding:6px 12px; font-size:12px;}
    .reader-name{display:none;}
  }
  .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{
    background:var(--white);
    border:1px solid var(--rule);
    border-radius:8px;
    overflow:hidden;
    padding:0 0 16px;
    box-shadow:0 1px 3px rgba(11,42,107,.06);
    transition:box-shadow .22s ease, transform .22s ease;
  }
  .card:hover{
    box-shadow:0 10px 24px rgba(11,42,107,.10);
    transform:translateY(-3px);
  }
  .card a{display:block;}
  .card > a:first-child{overflow:hidden;}
  .card img{width:100%; height:150px; object-fit:cover; display:block; transition:transform .5s ease;}
  .card:hover img{transform:scale(1.045);}
  .card .cat, .card h3, .card .meta{padding-left:14px; padding-right:14px;}
  .video-badge{
    position:absolute; top:10px; right:10px;
    width:30px; height:30px; border-radius:50%;
    background:rgba(11,42,107,.82);
    display:flex; align-items:center; justify-content:center;
  }
  .video-badge svg{width:14px; height:14px; color:#fff;}
  .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; align-self:start; position:sticky; top:76px;}
  .social-follow{display:flex; flex-wrap:wrap; gap:10px;}
  .social-follow a{
    display:flex; align-items:center; gap:8px;
    font-family:'Inter', sans-serif; font-weight:600; font-size:12.5px;
    color:var(--ink); border:1px solid var(--rule); border-radius:20px;
    padding:8px 14px; transition:background .2s, color .2s, border-color .2s;
  }
  .social-follow a:hover{background:var(--blue-deep); color:#fff; border-color:var(--blue-deep);}
  .social-follow svg{width:16px; height:16px; flex:none;}
  .aside-box{
    margin-bottom:32px;
    background:var(--white);
    border:1px solid var(--rule);
    border-radius:4px;
    padding:22px;
  }
  .aside-box.newsletter-wrap, .aside-box:has(.newsletter-box){
    background:transparent; border:none; padding:0;
  }
  .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);
    background-image:
      radial-gradient(600px 300px at 8% 0%, rgba(201,162,39,.08), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 140px);
    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:56px 0 36px;
  }
  .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.7;
    color:#9FB0D6;
    margin-top:16px;
    max-width:34ch;
  }
  .footer-col h5{
    font-family:'Inter', sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#fff;
    margin:0 0 18px;
    padding-bottom:14px;
    position:relative;
  }
  .footer-col h5::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:26px; height:2px;
    background:var(--gold);
  }
  .footer-col ul{list-style:none; margin:0; padding:0;}
  .footer-col li{margin-bottom:13px;}
  .footer-col a{
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    color:#C9D3EA;
    display:inline-flex;
    align-items:center;
    gap:0;
    transition:color .2s, gap .2s, padding-left .2s;
  }
  .footer-col a::before{
    content:"";
    width:0;
    height:1px;
    background:var(--gold-light);
    transition:width .2s;
  }
  .footer-col a:hover{color:var(--gold-light); padding-left:2px;}
  .footer-col a:hover::before{width:10px; margin-right:6px;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:22px 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:16px;}
  .footer-bottom .socials a{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.06);
    color:#B9C6E6;
    transition:background .2s, color .2s, transform .2s;
  }
  .footer-bottom .socials a:hover{background:var(--gold); color:var(--blue-deep-2); transform:translateY(-2px);}

  /* ---------- 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 a.img-link{border-radius:10px; box-shadow:0 6px 18px rgba(11,42,107,.14);}
    .hero-main img{height:230px; border-radius:10px;}
    .hero-cat{
      position:absolute; left:14px; bottom:14px; margin-top:0;
      box-shadow:0 4px 10px rgba(0,0,0,.22);
      border-radius:3px;
    }
    .hero-main h1{margin-top:16px;}
    .side-item img{width:92px; height:68px; border-radius:6px;}
    .side-item{padding:14px 0;}
    .card{border-radius:10px;}
    .navbar .wrap{
      height:auto;
      flex-wrap:wrap;
      padding-top:10px; padding-bottom:6px;
      padding-left:20px; padding-right:20px;
    }
    .nav-links{
      order:3;
      width:100%;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:6px;
      padding-top:12px;
      margin-top:8px;
      border-top:1px solid var(--rule);
    }
    .nav-links a{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      text-align:center;
      padding:5px 4px;
      background:var(--paper-2);
      border-radius:16px;
      font-size:9px;
      letter-spacing:.01em;
    }
    .nav-links a::after{display:none;}
    .nav-links a.active{background:var(--blue-deep); color:#fff;}
    .burger{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 1fr; gap:30px 20px; padding:40px 0 24px;}
    .footer-brand{grid-column:1 / -1; padding-bottom:26px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,.1);}
    .footer-logo-img{height:52px;}
    .footer-col:last-of-type{grid-column:1 / -1;}
    .footer-col:last-of-type ul{display:flex; flex-wrap:wrap; gap:8px 20px;}
    .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;}
    .hero-side{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
    .side-item{
      flex-direction:column; gap:0;
      padding:0 0 12px; border-bottom:none;
      background:var(--white); border:1px solid var(--rule); border-radius:4px; overflow:hidden;
    }
    .side-item:first-child{padding-top:0;}
    .side-item img{width:100%; height:100px;}
    .side-item > div{padding:10px 12px 0;}
    .side-item h3{font-size:14px; line-height:1.25;}
  }

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