/* Styles communs à toutes les pages : couleurs du logo, barre de transparence, en-tête, pied de page, pages de texte. */
:root{
  --ink:#0d1726; --text:#2b3443; --muted:#5d6675; --blue:#2f55e4; --blue-dark:#2144c4;
  --logo-navy:#14334d; --logo-blue:#3ab9f8; --logo-sky:#a3dcfb; /* couleurs du logo (ardoise, bleu électrique, teinte claire) */
  --line:#e3e6eb; --grey:#f5f6f8; --foot:#eef5fd; --foot-2:#e2eefb;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--text);font-family:Montserrat,system-ui,sans-serif;font-size:16px;line-height:1.6}
a{color:inherit}
img{display:block;max-width:100%}
.shell{width:min(1160px,calc(100% - 48px));margin:0 auto}
h1,h2,h3{color:var(--ink);margin:0;letter-spacing:-.01em}
html{scroll-padding-top:90px}

/* Barre de transparence */
.topbar{background:var(--grey);font-size:13px;color:var(--text)}
.topbar .shell{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:32px}
.topbar a{color:var(--ink)}
.topbar .yt{display:flex;align-items:center;gap:8px}
.yt-badge{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--ink)}
.yt-badge i{display:grid;place-items:center;width:20px;height:14px;border-radius:4px;background:#e62117}
.yt-badge i::after{content:"";border-left:6px solid #fff;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;margin-left:1px}

/* En-tête persistant au défilement, avec une ombre légère une fois la page défilée */
.header{position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line);background:#fff;transition:box-shadow .2s}
.header.scrolled{box-shadow:0 6px 18px -10px rgba(13,23,38,.25)}
.header .shell{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{width:36px;height:42px;object-fit:contain}
/* Logo : géométrique grasse type Circular (DM Sans), extension plus petite et fine (style security.org) */
.logo b{font-family:"DM Sans",Montserrat,sans-serif;font-size:1.75rem;font-weight:700;letter-spacing:-.025em;line-height:1;color:#333}
.logo b span{font-size:.58em;font-weight:400;letter-spacing:0;color:#333;margin-left:1px}
.nav{display:flex;align-items:center;gap:40px;font-size:15px;color:var(--text)}
.nav-links{display:flex;gap:40px}
.nav a{text-decoration:none}
.nav a:hover{color:var(--blue)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;border:0;background:none;cursor:pointer}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.header.open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.header.open .burger span:nth-child(2){opacity:0}
.header.open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.search{display:grid;place-items:center;width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--ink)}

/* Pied de page */
.footer{margin-top:80px;background:var(--foot)}
.footer .shell{padding:44px 0 40px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:34px}
.foot-cols h3{font-size:1.45rem;font-weight:700;margin-bottom:14px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{color:var(--blue)}
.foot-bottom{background:var(--foot-2);padding:22px 0;text-align:center;font-size:12px}
.socials{display:flex;justify-content:center;gap:12px;margin-bottom:12px}
.socials span{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}

/* Pages de texte (guide, À propos, Transparence) */
.article{max-width:780px;padding:64px 0 24px}
.article h1{margin:10px 0 18px;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.article h2{margin:40px 0 12px;font-size:clamp(1.35rem,2.2vw,1.6rem);font-weight:700;line-height:1.3}
.article p,.article li{color:var(--text);line-height:1.75}
.article p{margin:0 0 16px}
.article a{color:var(--blue)}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--logo-navy)}
.eyebrow::before{content:"";width:28px;height:4px;border-radius:2px;background:var(--logo-blue)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 24px;color:var(--muted);font-size:.88rem}
.status-note{margin:0 0 32px;padding:15px 18px;border-left:4px solid var(--logo-blue);background:var(--foot);color:var(--logo-navy);font-size:.92rem}
.article .status-note{color:var(--logo-navy)}
.article-callout{margin:28px 0;padding:22px 24px;border-left:4px solid var(--logo-blue);background:#fff;box-shadow:0 4px 24px -10px rgba(13,23,38,.22)}
.article-callout h2{margin-top:0;font-size:1.2rem}
.article-callout p:last-child{margin-bottom:0}
.article-list,.article ul,.article ol{padding-left:22px}
.article-list li,.article li{margin:10px 0}
.source-list{font-size:.9rem}
.source-list li{margin:9px 0}

@media (max-width:1020px){
  .nav,.nav-links{gap:22px}
}
@media (max-width:860px){
  .topbar .shell{justify-content:center;text-align:center;padding:7px 0;font-size:12px;line-height:1.5}
  .topbar .yt{display:none}
  .header .shell{min-height:64px}
  .nav{gap:4px}
  .burger{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px 16px 14px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -20px rgba(13,23,38,.35)}
  .header.open .nav-links{display:flex}
  .nav-links a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;color:var(--ink)}
  .nav-links a:last-child{border-bottom:0}
  .foot-cols{grid-template-columns:1fr;gap:22px;margin-top:24px}
  .foot-cols h3{font-size:1.15rem;margin-bottom:8px}
  .footer{margin-top:40px}
  .footer .shell{padding:34px 0 28px}
  .article{padding:36px 0 8px}
}
@media (max-width:520px){
  .shell{width:calc(100% - 32px)}
  .logo b{font-size:1.4rem}
}