/*
Theme Name: Cercle RH — Le Magazine
Theme URI: https://cercle-rh.fr
Description: Thème WordPress autonome de Cercle RH (Direction D — Plus Jakarta + accent rouge + hero éditorial). Construit from scratch, sans dépendance à GeneratePress. Magazine éditorial des métiers RH.
Author: Cercle RH
Author URI: https://cercle-rh.fr
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cercle-rh-mag
Tags: magazine, editorial, custom-menu, featured-images, threaded-comments
*/

/* ========================================================================
   1. TOKENS
   ======================================================================== */
:root{
  --bg:#FFFFFF;
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --ink2:#3A3A3A;
  --ink3:#525252;
  --muted:#737373;
  --rule:#E5E5E5;
  --rule-strong:#171717;
  --accent:#DC2626;
  --accent-dk:#991B1B;
  --accent-lt:#FEE2E2;
  --sable:#F5F5F4;

  --c-s1:#171717; /* fiches métier - neutre noir */
  --c-s2:#404040; /* parcours - gris foncé */
  --c-s3:#0F766E; /* salaires - sarcelle */
  --c-s4:#1F2937; /* interviews - ardoise */
  --c-s5:#15803D; /* stratégie - vert */
  --c-s6:#A16207; /* marque employeur - ocre */
  --c-s7:#BE123C; /* qvct - rouge-rosé */
  --c-s8:#1D4ED8; /* futur du travail - bleu */
  --c-s9:#7E22CE; /* talents - violet */
  --c-s10:#0F766E; /* droit social - sarcelle (différent silo) */
  --c-s11:#4F46E5; /* IA & digital RH - indigo électrique */
  --c-s12:#4D7C0F; /* Agenda RH - vert olive */

  --radius:8px;
  --radius-pill:999px;
  --shadow-soft:0 1px 3px rgba(10,10,10,.06);
  --shadow-lift:0 22px 50px -20px rgba(10,10,10,.15);
  --container:1320px;
  --container-pad:clamp(22px,4vw,32px);
}

/* ========================================================================
   2. RESET / BASE
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .15s ease}
a:hover{color:var(--accent)}
button{cursor:pointer;font:inherit}
hr{border:none;border-top:1px solid var(--rule);margin:48px 0}
h1,h2,h3,h4,h5,h6{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  color:var(--ink);
  margin:0 0 .6em;
  line-height:1.15;
  letter-spacing:-.025em;
}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}

.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ========================================================================
   3. LAYOUT CONTAINER
   ======================================================================== */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--container-pad)}
main.site-main{padding-block:48px 80px}

/* ========================================================================
   4. BANDEAU INFO (top bar)
   ======================================================================== */
.top-bar{background:var(--ink);color:var(--bg);font-size:13px;letter-spacing:.02em;font-weight:500}
.top-bar .top-bar-in{
  max-width:var(--container);margin:0 auto;padding:8px var(--container-pad);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.top-bar a{color:rgba(255,255,255,.85);margin-left:18px}
.top-bar a:hover{color:var(--accent-lt)}
@media (max-width:600px){.top-bar .date{display:none}}

/* ========================================================================
   5. HEADER style Les Échos : logo centré ligne 1 + nav horizontale ligne 2
   ======================================================================== */
.site-header{
  border-bottom:1px solid var(--ink);
  background:var(--bg);
  position:relative;z-index:60;
}

/* --- Ligne 1 : 3 colonnes (left | center logo | right CTA) --- */
.header-top{
  max-width:var(--container);margin:0 auto;
  padding:24px var(--container-pad) 18px;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:24px;
}
.header-side{display:flex;align-items:center;gap:18px}
.header-left{justify-content:flex-start}
.header-right{justify-content:flex-end}

.header-link{
  font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:.005em;
}
.header-link:hover{color:var(--accent)}

.menu-toggle{
  display:none;
  background:none;border:1px solid var(--ink);
  padding:6px 12px;font-size:13px;font-weight:600;
  color:var(--ink);border-radius:6px;line-height:1;
}

.site-branding{text-align:center}
.site-branding .site-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:42px;letter-spacing:-.045em;
  margin:0;line-height:1;color:var(--ink);
}
.site-branding .site-title a{color:inherit}
.site-branding .site-title .dot{color:var(--accent)}
.site-branding .site-description{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:6px 0 0;
  font-style:normal;
}

.btn-fill{
  display:inline-flex;align-items:center;background:var(--ink);color:var(--bg);
  font-size:13px;font-weight:700;padding:10px 18px;border-radius:var(--radius-pill);
  transition:background .15s ease;
}
.btn-fill:hover{background:var(--accent);color:var(--bg)}

/* --- Ligne 2 : nav horizontale fine, centrée --- */
.main-nav{
  border-top:1px solid var(--rule);
  background:var(--bg);
  position:sticky;top:0;z-index:50;
}
.main-nav ul{
  list-style:none;margin:0;padding:8px var(--container-pad);
  max-width:var(--container);margin:0 auto;
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  gap:0;overflow-x:auto;
  scrollbar-width:none;
}
.main-nav ul::-webkit-scrollbar{display:none}
.main-nav li{margin:0;flex:0 0 auto}
.main-nav a{
  display:block;font-size:14px;font-weight:600;color:var(--ink);
  padding:10px 16px;letter-spacing:.005em;
  white-space:nowrap;border-radius:6px;
  transition:color .15s ease;
}
.main-nav a:hover,
.main-nav .current-menu-item a,
.main-nav .current-cat a{color:var(--accent)}
.main-nav .menu-item-cta a{
  background:var(--accent);color:var(--bg);border-radius:var(--radius-pill);
  padding:8px 18px;margin-left:10px;
}
.main-nav .menu-item-cta a:hover{background:var(--accent-dk);color:var(--bg)}

/* --- Responsive --- */
@media (max-width:1100px){
  .main-nav a{font-size:13px;padding:10px 12px}
}
@media (max-width:900px){
  .header-top{grid-template-columns:auto 1fr auto;padding:18px var(--container-pad) 14px}
  .header-left .header-link{display:none}
  .header-right .header-link{display:none}
  .site-branding .site-title{font-size:32px}
  .site-branding .site-description{font-size:10px;letter-spacing:.14em}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .main-nav{display:none}
  .main-nav.is-open{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--ink);
    padding:8px var(--container-pad);max-height:60vh;overflow-y:auto;
  }
  .main-nav.is-open ul{flex-direction:column;gap:0;padding:8px 0;overflow:visible}
  .main-nav.is-open li{width:100%}
  .main-nav.is-open a{padding:14px 0;border-bottom:1px solid var(--rule);border-radius:0;font-size:15px}
}

/* ========================================================================
   6. HERO ÉDITORIAL (front-page)
   ======================================================================== */
.hero-featured{
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;
  padding-block:48px 64px;border-bottom:2px solid var(--ink);
  align-items:stretch;min-height:520px;
}
.hero-featured .hero-content{display:flex;flex-direction:column;justify-content:space-between;padding-block:8px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:24px;
}
.hero-kicker::before{content:"";width:24px;height:2px;background:var(--accent)}
.hero-featured h2{
  font-size:clamp(36px,4.4vw,60px);line-height:1.04;letter-spacing:-.035em;
  font-weight:800;margin:0 0 22px;
}
.hero-featured h2 a{color:var(--ink)}
.hero-featured h2 a:hover{color:var(--accent)}
.hero-chap{font-size:19px;line-height:1.55;color:var(--ink2);margin:0 0 32px;font-weight:400}
.hero-byline{
  display:flex;gap:14px;align-items:center;font-size:14px;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:20px;
}
.hero-byline .av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-dk));flex-shrink:0;
}
.hero-byline b{color:var(--ink);font-weight:700;display:block}
.hero-byline .meta{font-size:13px}

.hero-visual{
  background:linear-gradient(135deg,#1A0A0A 0%,#5C0F0F 50%,#DC2626 100%);
  position:relative;overflow:hidden;border-radius:var(--radius);
  min-height:460px;
}
.hero-visual.has-image{background:var(--ink)}
.hero-visual.has-image img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.88;
}
.hero-visual.has-image::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(10,10,10,.6) 100%);z-index:1;
}
.hero-stat{position:absolute;bottom:32px;left:36px;right:36px;color:var(--bg);z-index:2}
.hero-stat .v{font-size:clamp(60px,7vw,96px);font-weight:800;line-height:1;letter-spacing:-.04em}
.hero-stat .l{font-size:14px;margin-top:10px;line-height:1.5;color:#FCA5A5;font-weight:500;max-width:340px}
.hero-visual.has-image .hero-stat .l{color:rgba(255,255,255,.85)}

/* ========================================================================
   7. SECTION RUBRIQUES (silos)
   ======================================================================== */
.section-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.section-h h3{
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:0;
}
.section-h .ar{font-size:13px;font-weight:600;color:var(--muted)}
.section-h .ar:hover{color:var(--accent)}

.rubriques{padding-block:56px;border-bottom:1px solid var(--rule)}
.rub-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.rub{
  background:var(--sable);border-radius:var(--radius);padding:22px 18px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  border:1px solid transparent;display:block;
}
.rub:hover{background:var(--bg);border-color:currentColor;transform:translateY(-2px)}
.rub.s-1{color:var(--c-s1)}.rub.s-2{color:var(--c-s2)}.rub.s-3{color:var(--c-s3)}.rub.s-4{color:var(--c-s4)}
.rub.s-5{color:var(--c-s5)}.rub.s-6{color:var(--c-s6)}.rub.s-7{color:var(--c-s7)}
.rub.s-8{color:var(--c-s8)}.rub.s-9{color:var(--c-s9)}.rub.s-10{color:var(--c-s10)}
.rub.s-11{color:var(--c-s11)}.rub.s-12{color:var(--c-s12)}
.rub .num{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.75;margin-bottom:10px}
.rub .titre{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:8px;letter-spacing:-.01em}
.rub .cnt{font-size:12px;font-weight:500;opacity:.85}

/* ========================================================================
   8. DOSSIER DU MOIS (full-bleed noir)
   ======================================================================== */
.dossier-mois{
  background:var(--ink);color:var(--bg);padding-block:64px;
  margin-block:64px 0;position:relative;overflow:hidden;
  margin-inline:calc(-1 * var(--container-pad));
}
.dossier-mois::before{
  content:"DOSSIER";position:absolute;top:-10px;right:-30px;
  font-size:200px;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:rgba(220,38,38,.08);pointer-events:none;user-select:none;
}
.dossier-in{
  max-width:var(--container);margin:0 auto;padding:0 var(--container-pad);
  display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center;
  position:relative;z-index:1;
}
.dossier-mois .kicker{color:#FCA5A5;margin-bottom:18px}
.dossier-mois .kicker::before{background:var(--accent)}
.dossier-mois h3{
  font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-.035em;
  font-weight:800;margin:0 0 20px;color:var(--bg);
}
.dossier-mois h3 a{color:inherit}
.dossier-mois p{font-size:17px;line-height:1.6;color:#D4D4D4;margin:0 0 28px;max-width:560px}
.dossier-mois .btn-rouge{
  display:inline-flex;align-items:center;gap:10px;background:var(--accent);
  color:var(--bg);font-size:14px;font-weight:700;padding:14px 22px;border-radius:var(--radius-pill);
}
.dossier-mois .btn-rouge:hover{background:var(--bg);color:var(--accent)}
.dossier-chapitres{border-left:1px solid #404040;padding-left:28px;display:flex;flex-direction:column}
.dossier-chap{
  padding:14px 0;border-bottom:1px solid #262626;
  display:flex;align-items:center;gap:14px;
  font-size:14px;color:#D4D4D4;transition:color .15s ease;
}
.dossier-chap:last-child{border:none}
.dossier-chap:hover{color:var(--bg)}
.dossier-chap .n{color:var(--accent);font-weight:800;font-size:13px;min-width:24px}
.dossier-chap .tt{font-weight:500}

/* ========================================================================
   9. CARDS ARTICLE (grille)
   ======================================================================== */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.section-actus{padding-top:72px}
.card{display:flex;flex-direction:column;transition:transform .2s ease;background:var(--bg)}
.card:hover{transform:translateY(-2px)}
.card .card-visu{
  aspect-ratio:5/3;background:var(--sable);border-radius:var(--radius);
  overflow:hidden;margin-bottom:18px;position:relative;display:block;
}
.card .card-visu img{width:100%;height:100%;object-fit:cover;display:block}
.card .card-visu.placeholder.v1{background:linear-gradient(135deg,#0A0A0A,#1F2937,#374151)}
.card .card-visu.placeholder.v2{background:linear-gradient(135deg,#3B1A0F,#5C2415,#A16207)}
.card .card-visu.placeholder.v3{background:linear-gradient(135deg,#1A1A2E,#312E81,#7E22CE)}
.card .card-visu.placeholder.v4{background:linear-gradient(135deg,#0F2F2A,#15803D,#22C55E)}
.card .card-visu.placeholder.v5{background:linear-gradient(135deg,#3B0F1F,#7F1D1D,#DC2626)}
.card .card-visu.placeholder.v6{background:linear-gradient(135deg,#0C1F2C,#1E3A8A,#3B82F6)}
.card .cat-pill{
  position:absolute;top:14px;left:14px;background:var(--bg);
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--radius-pill);
}
.card .cat-pill.s-1{color:var(--c-s1)}.card .cat-pill.s-2{color:var(--c-s2)}.card .cat-pill.s-3{color:var(--c-s3)}
.card .cat-pill.s-4{color:var(--c-s4)}.card .cat-pill.s-5{color:var(--c-s5)}.card .cat-pill.s-6{color:var(--c-s6)}
.card .cat-pill.s-7{color:var(--c-s7)}.card .cat-pill.s-8{color:var(--c-s8)}.card .cat-pill.s-9{color:var(--c-s9)}
.card .cat-pill.s-10{color:var(--c-s10)}.card .cat-pill.s-11{color:var(--c-s11)}.card .cat-pill.s-12{color:var(--c-s12)}
.card h4{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:0 0 10px}
.card h4 a{color:var(--ink)}
.card h4 a:hover{color:var(--accent)}
.card .card-excerpt{font-size:14px;color:var(--ink2);line-height:1.5;margin:0 0 14px;font-weight:400}
.card .card-meta{
  margin-top:auto;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.04em;
  display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--rule);
}
.card .card-meta .by{color:var(--ink);font-weight:700}

/* ========================================================================
   10. ARCHIVE / CATEGORY
   ======================================================================== */
.archive-header{padding-block:24px 36px;border-bottom:2px solid var(--ink);margin-bottom:36px}
.archive-header .kicker{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.archive-header .archive-title{font-size:clamp(36px,4vw,54px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px}
.archive-header .archive-desc{font-size:17px;line-height:1.6;color:var(--ink2);max-width:680px;margin:0}

.pagination{margin-top:48px;display:flex;justify-content:center;gap:6px}
.pagination .page-numbers{
  display:inline-block;font-size:14px;font-weight:600;
  padding:9px 14px;border-radius:6px;color:var(--ink);
}
.pagination .page-numbers:hover{color:var(--accent)}
.pagination .page-numbers.current{background:var(--ink);color:var(--bg)}

/* ========================================================================
   11. SINGLE POST
   ======================================================================== */
.single-article{padding-block:24px 64px}
.single-header{max-width:780px;margin:0 auto 32px}
.single-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.single-kicker::before{content:"";width:24px;height:2px;background:var(--accent)}
.single-title{
  font-size:clamp(34px,4vw,52px);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;margin:0 0 22px;
}
.single-meta{
  font-size:14px;color:var(--muted);display:flex;gap:14px;align-items:center;
  border-top:1px solid var(--rule);padding-top:18px;
}
.single-meta .by{color:var(--ink);font-weight:700}
.single-featured{
  max-width:1080px;margin:0 auto 48px;border-radius:var(--radius);overflow:hidden;
}
.single-featured img{width:100%;height:auto;display:block}
.single-content{
  max-width:780px;margin:0 auto;font-size:18px;line-height:1.75;color:var(--ink2);
}
.single-content > p:first-of-type:first-letter{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:5.2em;float:left;line-height:.85;margin:.05em .12em 0 0;color:var(--accent);
}
.single-content p{margin:0 0 22px}
.single-content h2{font-size:32px;margin:48px 0 18px;color:var(--ink)}
.single-content h3{font-size:24px;margin:36px 0 14px;color:var(--ink)}
.single-content a{color:var(--accent-dk);border-bottom:1px solid var(--accent-lt)}
.single-content a:hover{color:var(--accent);border-color:var(--accent)}
.single-content img{border-radius:var(--radius);margin:24px 0}

/* Composants éditoriaux */
.single-content blockquote{
  border-left:3px solid var(--accent);padding:8px 0 8px 28px;margin:36px 0;
  font-size:24px;line-height:1.4;color:var(--ink);font-weight:600;font-style:normal;
  background:transparent;
}
.single-content blockquote cite,.single-content blockquote footer{
  display:block;margin-top:14px;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-dk);font-weight:700;font-style:normal;
}
.single-content aside.sources{
  background:var(--sable);border-radius:var(--radius);padding:24px 28px;margin:32px 0;
}
.single-content aside.sources h4{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.single-content aside.sources ul{list-style:none;padding:0;margin:0;font-size:15px;line-height:1.7;color:var(--ink2)}
.single-content aside.sources li{padding:6px 0;border-bottom:1px dotted var(--rule)}
.single-content aside.sources li:last-child{border:none}
.single-content aside.sources b{color:var(--accent-dk);font-weight:800;font-size:17px}
.single-content aside.retenir{
  background:var(--ink);color:var(--bg);border-radius:var(--radius);
  padding:28px 32px;margin:48px 0 32px;
}
.single-content aside.retenir h4{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lt);margin:0 0 14px}
.single-content aside.retenir ul{list-style:none;padding:0;margin:0;font-size:16px;line-height:1.8;color:rgba(255,255,255,.92)}
.single-content aside.retenir li{padding-left:24px;position:relative}
.single-content aside.retenir li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
.single-content table{width:100%;border-collapse:collapse;margin:32px 0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.single-content thead tr{background:var(--ink);color:var(--bg)}
.single-content thead th{padding:.85em 1em;text-align:left;font-weight:700}
.single-content tbody td{padding:.7em 1em;border-bottom:1px solid var(--rule)}
.single-content tbody tr:last-child td{border:none}
.single-content details{border-bottom:1px solid var(--rule);padding:16px 0}
.single-content details summary{
  font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;
  list-style:none;padding-right:24px;position:relative;
}
.single-content details summary::-webkit-details-marker{display:none}
.single-content details summary::after{content:"+";position:absolute;right:0;top:-2px;color:var(--accent);font-size:22px;transition:transform .2s ease}
.single-content details[open] summary::after{transform:rotate(45deg)}
.single-content details p{font-size:16px;color:var(--ink2);line-height:1.7;margin:14px 0 0;padding-right:32px}

/* ========================================================================
   12. PAGE STATIQUE
   ======================================================================== */
.page-article{padding-block:24px 64px}
.page-article .page-header{max-width:780px;margin:0 auto 36px}
.page-article .page-title{font-size:clamp(34px,4vw,52px);font-weight:800;letter-spacing:-.03em;margin:0}
.page-article .page-content{max-width:780px;margin:0 auto;font-size:18px;line-height:1.75;color:var(--ink2)}

/* ========================================================================
   13. SEARCH / 404
   ======================================================================== */
.empty-state{padding:80px var(--container-pad);text-align:center;max-width:560px;margin:0 auto}
.empty-state h2{font-size:42px;font-weight:800;letter-spacing:-.03em;margin:0 0 18px}
.empty-state p{font-size:17px;color:var(--ink2);margin:0 0 28px}
.empty-state .search-form{max-width:420px;margin:0 auto}
.search-form{display:flex;gap:0;border:1px solid var(--ink);border-radius:var(--radius-pill);overflow:hidden}
.search-form input[type=search]{
  flex:1;border:none;padding:14px 22px;font-family:inherit;font-size:15px;
  background:var(--bg);color:var(--ink);
}
.search-form input[type=search]:focus{outline:none}
.search-form button{
  background:var(--ink);color:var(--bg);border:none;
  padding:14px 24px;font-size:14px;font-weight:700;cursor:pointer;
}
.search-form button:hover{background:var(--accent)}

/* ========================================================================
   14. COMMENTS (minimal — désactivé éditorialement mais on style si on en met)
   ======================================================================== */
.comments-area{max-width:780px;margin:64px auto 0;border-top:1px solid var(--rule);padding-top:32px}
.comments-title{font-size:24px;font-weight:800;margin:0 0 24px}
.comment-list{list-style:none;padding:0;margin:0}
.comment{padding:18px 0;border-bottom:1px solid var(--rule)}
.comment .fn{font-weight:700;color:var(--ink)}

/* ========================================================================
   15. FOOTER
   ======================================================================== */
.site-footer{background:var(--ink);color:var(--bg);padding:64px 0 28px;margin-top:80px}
.footer-in{
  max-width:var(--container);margin:0 auto;padding:0 var(--container-pad);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
}
.footer-brand .footer-title{
  font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--bg);margin:0 0 10px;
}
.footer-brand .footer-title .dot{color:var(--accent)}
.footer-brand p{font-size:14px;line-height:1.6;color:#A3A3A3;margin:0;max-width:340px}
.footer-col h5{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#A3A3A3;margin:0 0 16px}
.footer-col ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:2.1;color:#E5E5E5}
.footer-col a:hover{color:var(--accent)}
.footer-base{
  max-width:var(--container);margin:48px auto 0;padding:24px var(--container-pad) 0;
  border-top:1px solid #262626;display:flex;justify-content:space-between;
  font-size:12px;color:#737373;font-weight:500;gap:16px;flex-wrap:wrap;
}
.footer-base a{color:#A3A3A3}
.footer-base a:hover{color:var(--accent)}

/* ========================================================================
   16. RESPONSIVE
   ======================================================================== */
@media (max-width:980px){
  .hero-featured,.dossier-in,.footer-in{grid-template-columns:1fr;gap:32px}
  .rub-grid{grid-template-columns:repeat(3,1fr)}
  .articles-grid{grid-template-columns:1fr 1fr}
  .hero-visual{aspect-ratio:16/10;min-height:0}
}
@media (max-width:600px){
  .rub-grid{grid-template-columns:1fr 1fr}
  .articles-grid{grid-template-columns:1fr}
  .header-cta .search-toggle{display:none}
  .dossier-mois{padding-block:48px}
  .section-actus{padding-top:48px}
}

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

/* ========================================================================
   AGENDA RH — Silo S12 (archive + single event)
   ======================================================================== */

/* archive header sur agenda : kicker en couleur S12 */
.agenda-archive .archive-header .kicker{color:var(--c-s12)}
.agenda-archive .archive-header .kicker::before{background:var(--c-s12)}

/* switch à venir / archives */
.agenda-switch{
  display:inline-flex;border:1px solid var(--ink);border-radius:var(--radius-pill);
  overflow:hidden;margin-bottom:36px
}
.agenda-switch a{
  background:#fff;color:var(--ink);padding:9px 18px;font-size:13px;font-weight:700;
  letter-spacing:.04em;text-decoration:none;transition:background .15s,color .15s;
}
.agenda-switch a:hover{background:var(--sable)}
.agenda-switch a.is-active{background:var(--ink);color:#fff}
.agenda-switch a.is-active:hover{background:var(--ink)}

/* timeline */
.timeline-month{margin-bottom:48px}
.timeline-month-head{
  display:flex;align-items:baseline;gap:18px;
  padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--rule);
}
.timeline-month-head .month-label{
  font-size:clamp(22px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--ink);
  margin:0;text-transform:capitalize
}
.timeline-month-head .month-count{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}

.event-list{display:flex;flex-direction:column;gap:18px}

/* event card */
.event-card{
  display:grid;grid-template-columns:140px 1fr auto;gap:28px;align-items:center;
  padding:22px 24px;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  text-decoration:none;color:inherit;
}
.event-card:hover{border-color:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.event-card:hover h3{color:var(--accent)}

.event-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 8px;background:#ECFCCB;border-radius:var(--radius);min-width:120px;
}
.event-date .day{font-size:42px;font-weight:800;letter-spacing:-.03em;color:#365314;line-height:1}
.event-date .month{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#365314;margin-top:6px
}
.event-date .dow{font-size:11px;font-weight:600;color:#365314;opacity:.7;margin-top:2px;letter-spacing:.06em}

.event-body{min-width:0}
.event-body h3{font-size:22px;font-weight:700;margin:0 0 10px;letter-spacing:-.02em;line-height:1.2;transition:color .15s}
.event-meta{display:flex;flex-wrap:wrap;gap:14px 18px;font-size:14px;color:var(--ink3)}
.event-meta .meta-item{display:inline-flex;align-items:center;gap:6px}
.event-meta .meta-item svg{flex-shrink:0;color:var(--muted)}
.event-meta .city{font-weight:600;color:var(--ink2)}

.event-cta{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);
  border:1px solid var(--ink);padding:10px 16px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:background .15s, color .15s;
}
.event-card:hover .event-cta{background:var(--ink);color:#fff}

/* événements passés (mode archives) */
.event-card.is-past{opacity:.65}
.event-card.is-past .event-date{background:var(--sable)}
.event-card.is-past .event-date .day,
.event-card.is-past .event-date .month,
.event-card.is-past .event-date .dow{color:var(--ink3)}

/* single event */
.single-event .single-kicker{color:var(--c-s12)}
.single-event .single-kicker::before{background:var(--c-s12)}
.event-infobar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
  margin:32px 0 36px;padding:24px 28px;background:#ECFCCB;border-radius:var(--radius);
}
.event-infobar .info{display:flex;flex-direction:column;gap:6px;padding:0 24px}
.event-infobar .info + .info{border-left:1px solid rgba(54,83,20,.18)}
.event-infobar .info-label{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#365314;opacity:.8
}
.event-infobar .info-value{font-size:16px;font-weight:700;color:#365314;line-height:1.3}
.event-infobar .info-value a{color:#365314;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.event-infobar .info-value a:hover{color:var(--accent)}

@media (max-width:760px){
  .event-card{grid-template-columns:88px 1fr;gap:16px;padding:16px}
  .event-date{min-width:80px;padding:10px 6px}
  .event-date .day{font-size:30px}
  .event-cta{grid-column:1 / -1;justify-content:center;margin-top:6px}
  .timeline-month-head{flex-direction:column;align-items:flex-start;gap:4px}
  .event-infobar{grid-template-columns:1fr;gap:18px;padding:20px}
  .event-infobar .info{padding:0}
  .event-infobar .info + .info{border-left:none;border-top:1px solid rgba(54,83,20,.18);padding-top:18px}
}