/* Rubrique « Conseils » : liste, article, et cartes d'articles (aussi sur l'accueil).
   Copié tel quel dans site/conseils.css. Tailles et espacements : uniquement les variables de charte.css. */

/* En-tête (dans la carte .haut-page commune) */
.cs-hero .wrap{padding-top:var(--f-s);padding-bottom:var(--f-s)}
.cs-hero .ariane{margin-bottom:var(--e24)}
.cs-hero h1{font-size:var(--t-titre);line-height:1.04;letter-spacing:-.032em;max-width:22ch}
.cs-hero .lead{max-width:60ch}
.cs-infos{margin-top:var(--e24);display:flex;flex-wrap:wrap;gap:var(--e8) var(--e12);font-size:var(--t-ui);color:var(--doux)}
.cs-infos span[aria-hidden]{opacity:.5}
.cs-infos a{color:var(--encre);font-weight:500;text-underline-offset:4px;text-decoration-color:var(--rouge);text-decoration-thickness:2px}
.cs-infos a:hover{color:var(--rouge)}

sup{font-size:.7em;line-height:0}

/* Filtres par pilier */
.cs-rubrique{padding-top:var(--f-xs)}
.cs-filtres{display:flex;flex-wrap:wrap;gap:var(--e8)}
.cs-filtres button{display:inline-flex;align-items:center;gap:var(--e8);height:40px;padding:0 var(--e16);border:1px solid var(--trait);background:#fff;color:var(--encre);font:500 var(--t-ui)/1 "Onest",system-ui,sans-serif;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.cs-filtres button span{font-size:var(--t-legende);color:var(--doux);font-variant-numeric:tabular-nums;transition:color .2s}
.cs-filtres button:hover{border-color:var(--encre)}
.cs-filtres button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
.cs-filtres button[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.cs-vide{margin-top:var(--e32);color:var(--texte)}

/* Cartes d'articles */
.cs-liste{list-style:none;margin:var(--e32) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--trait);border-top:1px solid var(--trait)}
.cs-liste li{border-right:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.cs-liste li[hidden]{display:none}
.cs-liste a{position:relative;height:100%;display:flex;flex-direction:column;padding:var(--e32);text-decoration:none;color:var(--encre);transition:background-color .25s}
.cs-liste a::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:4px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.15,1)}
.cs-liste h2,.cs-liste h3{margin:0;font-family:"Onest",system-ui,sans-serif;font-size:var(--t-h3);font-weight:500;line-height:1.3;letter-spacing:-.015em;word-spacing:normal;text-wrap:balance;transition:color .25s}
.cs-liste p{margin:var(--e12) 0 0;hyphens:manual;-webkit-hyphens:manual;font-size:var(--t-petit);line-height:1.6;color:var(--texte)}
.cs-meta{margin-top:auto;padding-top:var(--e24);display:flex;flex-wrap:wrap;gap:var(--e4) var(--e8);font-size:var(--t-legende);color:var(--doux)}
.cs-meta > span:first-child{color:var(--encre);font-weight:500}
.cs-meta span[aria-hidden]{opacity:.5}
.cs-liste a:hover,.cs-liste a:focus-visible{background:var(--froid)}
.cs-liste a:hover::before,.cs-liste a:focus-visible::before{transform:none}
.cs-liste a:hover h2,.cs-liste a:hover h3{color:var(--rouge)}
.cs-liste-3{margin-top:var(--f-xs)}

/* Article : texte d'environ 68 caractères par ligne, service lié à droite */
.cs-article{display:grid;grid-template-columns:minmax(0,49ch) minmax(260px,340px);justify-content:space-between;align-items:start;gap:var(--f-s);padding-top:var(--f-xs)}
.cs-texte{font-size:var(--t-texte);line-height:1.7;color:var(--texte)}
.cs-texte > * + *{margin-top:var(--e24)}
.cs-texte h2{font-size:var(--t-h3-l);line-height:1.15;color:var(--encre);margin-top:var(--e48)}
.cs-texte h3{font-size:var(--t-h3);line-height:1.3;color:var(--encre);margin-top:var(--e32)}
.cs-texte > h2 + *,.cs-texte > h3 + *{margin-top:var(--e16)}
.cs-texte strong{font-weight:600;color:var(--encre)}
.cs-texte a{color:var(--encre);font-weight:500;text-underline-offset:4px;text-decoration-color:var(--rouge);text-decoration-thickness:2px}
.cs-texte a:hover{color:var(--rouge)}
.cs-texte ul li{position:relative;padding-left:var(--e24)}
.cs-texte ul li::before{content:"";position:absolute;left:0;top:calc(.85em - 4px);width:8px;height:8px;background:var(--rouge)}
.cs-texte ol{counter-reset:etape}
.cs-texte ol li{position:relative;padding-left:var(--e40);counter-increment:etape}
.cs-texte ol li::before{content:counter(etape);position:absolute;left:0;top:calc(.85em - 13px);display:grid;place-items:center;width:26px;height:26px;background:var(--encre);color:#fff;font-size:var(--t-legende);font-weight:500;line-height:1}
.cs-texte li + li{margin-top:var(--e12)}

/* Encadré « À retenir » */
.cs-texte > .retenir,.cs-texte > .retenir + *{margin-top:var(--e48)}
.retenir{position:relative;padding:var(--e24) var(--e32) var(--e32);background:var(--froid);border:1px solid var(--trait)}
.retenir::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:4px;background:var(--rouge)}
.retenir-titre{font-family:"Clash Display","Onest",sans-serif;font-weight:600;font-size:var(--t-h3);letter-spacing:-.01em;word-spacing:.1em;color:var(--encre)}
.retenir ul,.retenir ol,.retenir p + p{margin-top:var(--e16)}
.retenir li{color:var(--encre)}

/* Encart du service lié */
.cs-service{position:sticky;top:calc(var(--barre,74px) + var(--e32));padding:var(--e32);border:1px solid var(--trait);background:#fff}
.cs-service::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:4px;background:var(--rouge)}
.cs-service-titre{font-size:var(--t-legende);color:var(--doux)}
.cs-service h2{margin-top:var(--e12);font-size:var(--t-h3-l);line-height:1.1}
.cs-service p:not(.cs-service-titre){margin-top:var(--e12);font-size:var(--t-petit);color:var(--texte)}
.cs-service .actions{margin-top:var(--e24);flex-direction:column;align-items:stretch}

@media (max-width:900px){
  .cs-liste{grid-template-columns:1fr 1fr}
  .cs-article{grid-template-columns:minmax(0,1fr)}
  .cs-texte{max-width:49ch}
  .cs-service{position:relative;top:auto}
}
@media (max-width:600px){
  .cs-liste{grid-template-columns:1fr}
  .cs-liste a{padding:var(--e24)}
  .retenir{padding:var(--e24)}
  .cs-service{padding:var(--e24)}
}
@media (prefers-reduced-motion:reduce){.cs-liste a,.cs-liste a::before,.cs-filtres button{transition:none}}