/* ============================================================
   ADRCP · Journal de la mobilisation — styles du module
   Se charge EN PLUS de styles.css (hérite tokens & thèmes).
   Rien ici ne modifie les pages existantes.
   ============================================================ */

/* ---------- en-tête de section commune aux 2 pages ---------- */
.jhero{padding-block:clamp(30px,5vw,60px) clamp(24px,4vw,44px)}
.jhero .eyebrow{margin-bottom:18px}
.jhero h1{font-size:clamp(30px,4.6vw,50px); line-height:1.06; color:var(--ink); max-width:16ch}
.jhero__lead{margin-top:20px; max-width:56ch; color:var(--ink-soft); font-size:18px; line-height:1.6}

/* ============================ CARROUSEL INFINI (marquee attrapable) ============================ */
.carousel{margin-top:6px}
.carousel__head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px}
.carousel__title{font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.6vw,26px); color:var(--ink); display:inline-flex; align-items:center; gap:.62em; letter-spacing:-.01em}
.carousel__title::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--terre); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10)}
.marquee__hint{display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:12.5px; color:var(--brun); flex:0 0 auto}
.marquee__hint svg{opacity:.7}

.marquee__viewport{overflow:hidden; cursor:grab; touch-action:pan-y; padding-block:4px 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.carousel.is-grab .marquee__viewport{cursor:grabbing}
.marquee__track{display:flex; gap:20px; width:max-content; will-change:transform}
.marquee__track .acard{user-select:none; -webkit-user-select:none}
.marquee__track .acard__img{pointer-events:none}
.carousel.is-grab .acard{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .marquee__viewport{overflow-x:auto; -webkit-overflow-scrolling:touch; mask-image:none; -webkit-mask-image:none}
}

/* ============================ ONGLETS DE CATÉGORIES ============================ */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:clamp(30px,4vw,48px) 0 26px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.tab{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:8px 18px; cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease)}
.tab:hover{color:var(--ink); border-color:var(--brun)}
.tab[aria-selected="true"]{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep)}

/* ============================ CARTE D'ARTICLE ============================ */
.acard{display:flex; text-decoration:none; color:inherit; background:var(--surface-2); border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
.acard:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-soft)}
.acard__media{display:block; overflow:hidden; background:var(--paper-soft); flex:0 0 auto}
.acard__img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.acard:hover .acard__img{transform:scale(1.04)}
.acard__body{display:flex; flex-direction:column; gap:9px; padding:20px 22px}
.acard__cat{font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--terre)}
.acard__title{font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.2; color:var(--ink); letter-spacing:-.01em}
.acard__excerpt{color:var(--ink-soft); font-size:15px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.acard__meta{margin-top:auto; padding-top:4px; display:flex; align-items:center; gap:.6em; font-family:var(--sans); font-size:12.5px; color:var(--brun)}
.acard__dot{opacity:.6}
.acard:hover .acard__title{color:var(--accent-deep)}

/* — variante RANGÉE : miniature strictement collée au texte (liste du hub) — */
.acard--row{flex-direction:row; align-items:stretch}
.acard--row .acard__media{width:38%; max-width:230px; min-height:100%}
.acard--row .acard__img{aspect-ratio:4/3}

/* — variante PARADE / À LIRE AUSSI : verticale, largeur fixe — */
.acard--parade{flex-direction:column; width:320px; flex:0 0 320px}
.acard--parade .acard__media{width:100%}
.acard--parade .acard__img{aspect-ratio:16/10}

/* — grille de la liste — */
.list{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding-bottom:clamp(60px,8vw,100px)}
.list__empty{grid-column:1/-1; color:var(--ink-soft); padding:40px 0}

/* ============================ PAGE ARTICLE ============================ */
.art__head{max-width:760px; padding-top:clamp(24px,4vw,48px)}
.art__back{display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-soft); text-decoration:none; margin-bottom:26px; transition:color .2s ease}
.art__back:hover{color:var(--accent-deep)}
.art__cat{margin-bottom:18px}
.art__title{font-size:clamp(30px,5vw,52px); line-height:1.08; letter-spacing:-.02em; color:var(--ink)}
.art__excerpt{margin-top:22px; font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.3vw,23px); line-height:1.5; color:var(--ink-soft)}
.art__meta{margin-top:28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line)}
.art__by{display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:14px; color:var(--ink)}
.art__by b{font-weight:600}
.art__avatar{width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent-deep); font-weight:600; font-size:14px; letter-spacing:.02em}
.art__role{display:block; font-size:12.5px; color:var(--brun); margin-top:1px}
.art__meta-sep{width:1px; height:28px; background:var(--line)}
.art__dates{display:flex; align-items:center; gap:.6em; font-family:var(--sans); font-size:13px; color:var(--brun)}

.art__hero{margin-top:clamp(30px,4vw,48px)}
.art__hero img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:calc(var(--r) + 4px); border:1px solid var(--line); background:var(--paper-soft)}

/* — corps : rail de partage + prose lisible — */
.art__layout{display:grid; grid-template-columns:56px minmax(0,760px); gap:32px; justify-content:center; margin-top:clamp(40px,5vw,60px)}
.art__share-rail{display:flex; flex-direction:column; gap:10px; position:sticky; top:calc(var(--switch-h) + 96px); height:max-content}

/* — typographie de lecture — */
.prose{font-family:var(--serif); font-size:19px; line-height:1.75; color:var(--ink)}
.prose > * + *{margin-top:1.35em}
.prose p{color:var(--ink)}
.prose .lede{font-size:22px; line-height:1.6; color:var(--ink)}
.prose h2{font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,30px); line-height:1.2; color:var(--ink); margin-top:1.8em; letter-spacing:-.012em}
.prose blockquote{margin:1.8em 0; padding:6px 0 6px 26px; border-left:3px solid var(--terre); font-style:italic; font-size:22px; line-height:1.5; color:var(--ink-soft)}
.prose ul{padding-left:1.2em; color:var(--ink)}
.prose li{margin-top:.5em}
.prose li::marker{color:var(--terre)}
.prose a{color:var(--accent-deep); text-underline-offset:3px}

/* — boutons de partage — */
.shbtn{width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .15s ease}
.shbtn:hover{color:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-2px)}
.shbtn--copy.is-ok{color:#fff; background:var(--accent-deep); border-color:var(--accent-deep)}

/* — module CTA de conversion (bas d'article) — */
.art__cta-wrap{margin-top:clamp(50px,7vw,80px)}
.art__cta{max-width:760px; margin-inline:auto; background:var(--deep); color:#F4EFE6; border-radius:calc(var(--r) + 8px); padding:clamp(30px,5vw,52px); position:relative; overflow:hidden}
.art__cta-kicker{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--deep-eye)}
.art__cta-title{font-family:var(--serif); font-weight:500; font-size:clamp(23px,3.4vw,32px); line-height:1.18; color:#FBFBF7; margin-top:14px; max-width:22ch}
.art__cta-text{margin-top:16px; max-width:52ch; color:rgba(244,239,230,.82); font-size:16.5px; line-height:1.6}
.art__cta .btn--sign{width:auto; margin-top:26px; display:inline-flex}
.art__share{display:flex; gap:10px; margin-top:26px; padding-top:24px; border-top:1px solid var(--deep-line)}
.art__cta .shbtn{background:rgba(255,255,255,.06); border-color:var(--deep-line); color:#EFE9DE}
.art__cta .shbtn:hover{background:rgba(255,255,255,.12); border-color:var(--deep-eye); color:#fff}

/* — à lire aussi — */
.art__related{margin-top:clamp(56px,8vw,96px); padding-bottom:clamp(60px,8vw,100px)}
.art__related-title{font-family:var(--serif); font-weight:500; font-size:clamp(22px,3vw,28px); color:var(--ink); margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.related__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.related__grid .acard--parade{width:auto; flex:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:920px){
  .list{grid-template-columns:1fr}
  .related__grid{grid-template-columns:1fr}
  .art__layout{grid-template-columns:minmax(0,1fr); gap:24px}
  .art__share-rail{flex-direction:row; position:static; order:2; margin-top:8px}
}
@media (max-width:680px){
  .acard--row{flex-direction:column}
  .acard--row .acard__media{width:100%; max-width:none}
  .acard--row .acard__img{aspect-ratio:16/9}
  .acard--parade{width:82vw; flex-basis:82vw}
  .prose{font-size:18px}
  .prose .lede{font-size:20px}
}