/* =============================================================================
   Rubrique Ressources — liste et article
   =============================================================================
   Chargée par ressources.tpl et ressource.tpl, après custom.css et moderne.css.

   Le corps d'un article vient de l'éditeur de l'administration : on ne sait
   pas quelles balises il produira. Les règles de .ska-art-corps sont donc
   écrites pour du HTML quelconque — titres, paragraphes, listes, tableaux,
   images, citations — et non pour une structure connue à l'avance.
   ========================================================================== */

/* ---- Liste ------------------------------------------------------------- */
.ska-page .ska-res-head{padding:64px 24px 0;}
.ska-page .ska-res-liste{padding:0 24px 76px;}
.ska-res-head .ska-sec-head{margin-bottom:26px;}
.ska-res-cards{max-width:820px; margin:0 auto; padding:0; list-style:none;
  display:grid; gap:18px;}
.ska-res-card{margin:0;}
.ska-res-card > a{
  display:block; padding:26px 28px; text-decoration:none !important;
  background:#fff; border:1px solid var(--ska-line); border-radius:var(--r-m,16px);
  box-shadow:var(--el-1); color:var(--ska-ink) !important;
  transition:transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.ska-res-card > a:hover{transform:translateY(-2px); box-shadow:var(--el-2);
  border-color:#D7E0EC;}
.ska-res-card h2{margin:8px 0 10px; font-size:1.42rem; font-weight:800;
  letter-spacing:-.025em; line-height:1.18; color:var(--ska-ink);}
.ska-res-card p{margin:0 0 14px; color:var(--ska-muted); font-size:.98rem;
  line-height:1.55;}
.ska-res-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.8rem; font-weight:650; color:var(--ska-muted);
  text-transform:uppercase; letter-spacing:.06em;}
.ska-res-go{font-weight:700; font-size:.92rem; color:var(--ska-primary);}
.ska-res-vide{max-width:820px; margin:0 auto; color:var(--ska-muted);}

/* ---- Article ------------------------------------------------------------ */
.ska-art{max-width:720px; margin:0 auto; padding:56px 24px 80px;}
.ska-art-head{margin-bottom:30px;}
.ska-art-head h1{margin:12px 0 16px; font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:800; letter-spacing:-.033em; line-height:1.08; color:var(--ska-ink);}

/* La mesure : 68 caractères environ. Au-delà, l'œil perd sa ligne en
   revenant à la marge — c'est le défaut le plus courant des blogs maison. */
.ska-art-corps{font-size:1.06rem; line-height:1.72; color:var(--ska-ink);}
.ska-art-corps > *{max-width:68ch;}
.ska-art-corps p{margin:0 0 1.25em;}
.ska-art-corps h2{margin:2em 0 .6em; font-size:1.52rem; font-weight:800;
  letter-spacing:-.025em; line-height:1.2;}
.ska-art-corps h3{margin:1.7em 0 .5em; font-size:1.2rem; font-weight:750;
  letter-spacing:-.015em;}
.ska-art-corps ul,.ska-art-corps ol{margin:0 0 1.25em; padding-left:1.3em;}
.ska-art-corps li{margin:0 0 .55em;}
.ska-art-corps a{color:var(--ska-primary); text-decoration:underline;
  text-underline-offset:2px;}
.ska-art-corps strong,.ska-art-corps b{font-weight:750;}
.ska-art-corps code{font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.88em; background:var(--ska-bg); border:1px solid var(--ska-line);
  border-radius:5px; padding:.1em .38em;}
.ska-art-corps blockquote{margin:1.6em 0; padding:2px 0 2px 20px;
  border-left:3px solid var(--ska-green); color:var(--ska-muted);
  font-size:1.04rem;}
.ska-art-corps img{max-width:100%; height:auto; border-radius:var(--r-m,14px);
  display:block; margin:1.6em 0;}
.ska-art-corps hr{border:0; border-top:1px solid var(--ska-line); margin:2.2em 0;}

/* Un tableau écrit dans l'éditeur peut dépasser la mesure : il défile
   horizontalement plutôt que d'élargir la colonne de texte. */
.ska-art-corps table,.ska-art-table{max-width:none; width:100%;}
.ska-art-table{overflow-x:auto; margin:1.6em 0; -webkit-overflow-scrolling:touch;}
.ska-art-corps table{border-collapse:collapse; font-size:.95rem;}
.ska-art-corps th,.ska-art-corps td{padding:10px 14px; text-align:left;
  border-bottom:1px solid var(--ska-line);}
.ska-art-corps thead th{font-size:.78rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ska-muted); font-weight:750;
  border-bottom:2px solid var(--ska-line);}

/* ---- Appel à l'action et retour ---------------------------------------- */
.ska-art-cta{margin:44px 0 0; padding:26px 28px; border-radius:var(--r-m,16px);
  background:var(--ska-bg); border:1px solid var(--ska-line);}
.ska-art-cta h2{margin:0 0 8px; font-size:1.22rem; font-weight:800;
  letter-spacing:-.02em; color:var(--ska-ink);}
.ska-art-cta p{margin:0 0 18px; color:var(--ska-muted); font-size:.96rem;
  line-height:1.55;}
.ska-art-cta-btns{display:flex; gap:12px; flex-wrap:wrap;}
.ska-art-retour{margin:30px 0 0; font-size:.92rem; font-weight:650;}
.ska-art-retour a{color:var(--ska-muted); text-decoration:none;}
.ska-art-retour a:hover{color:var(--ska-primary);}

@media(max-width:600px){
  .ska-page .ska-res-head{padding:40px 18px 0;}
  .ska-page .ska-res-liste{padding:0 18px 52px;}
  .ska-res-card > a{padding:20px 19px;}
  .ska-res-card h2{font-size:1.24rem;}
  .ska-art{padding:34px 18px 56px;}
  .ska-art-corps{font-size:1.02rem;}
  .ska-art-cta{padding:20px 19px;}
}