/* Conseils : liste et articles */
/* Rubriques : onglets sur ordinateur (.tabs--rubriques dans site.css) ; sur téléphone, un menu « Thème : Tous »
   comme le bouton « Trier » de la page Acheter, qui ouvre la liste de choix du téléphone */
.conseils__rub{display:none;position:relative;align-items:center;width:100%}
.conseils__rub-lbl{position:absolute;left:18px;font:400 14px/1 var(--sans);color:rgba(27,43,63,.72);pointer-events:none}
.conseils__rub-sel{width:100%;height:50px;padding:0 44px 0 82px;border-radius:999px;border:1px solid var(--sable);background:#fff;color:var(--encre);font:500 15px/1 var(--sans);appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s}
.conseils__rub-sel:hover,.conseils__rub-sel:focus-visible{border-color:var(--bleu)}
.conseils__rub-chev{position:absolute;right:18px;color:var(--encre);pointer-events:none}
@media (max-width:760px){.conseils .tabs--rubriques{display:none}.conseils__rub{display:flex}}
.conseils__grid .acard[hidden]{display:none}
.crumb--dark{color:var(--encre)}
.crumb--dark a{color:var(--bleu);opacity:1}
.crumb--dark a:hover{color:var(--encre)}
.art__head{padding-top:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:22px}
.art__h1{max-width:920px;font:400 clamp(36px,4.8vw,68px)/1.02 var(--serif);letter-spacing:-.015em;color:var(--encre);text-wrap:balance}
.art__meta{flex-wrap:wrap;row-gap:8px}
.art__fig{margin:12px 0 0;border-radius:clamp(20px,2.6vw,32px);overflow:hidden;aspect-ratio:21/9;background:var(--lin)}
.art__fig img{width:100%;height:100%;object-fit:cover}
.art__body{display:flex;flex-wrap:wrap;gap:40px clamp(40px,6vw,96px);align-items:flex-start;padding-top:clamp(32px,4vw,56px)}
.art__body .prose{flex:1 1 560px}
.art__body .prose > p:first-child:not([class]){font:400 clamp(19px,1.7vw,22px)/1.6 var(--serif);color:var(--encre)}
.art__aside{flex:0 1 340px;position:sticky;top:110px}
.art__card{gap:16px}
.art__card .btn--outline{justify-content:center}
@media (max-width:899px){.art__aside{position:static;flex-basis:100%}}

/* Mises en forme de l'éditeur d'articles (espace admin : menu « Style », photo, bouton, trait).
   Mêmes règles dans src/static/admin/admin.css pour que l'éditeur montre l'article tel qu'il sera. */
.prose .art-grand{font:400 clamp(19px,1.7vw,22px)/1.6 var(--serif);color:var(--encre)}
.prose .art-petit{font-size:14.5px;line-height:1.65;color:var(--encre-78)}
.prose .art-encadre{padding:22px 26px;border-radius:20px;background:var(--creme);color:var(--encre)}
.prose .art-encadre::before{content:"Bon à savoir";display:block;margin-bottom:10px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta)}
.prose .art-encadre + .art-encadre{margin-top:0;padding-top:.6em;border-top-left-radius:0;border-top-right-radius:0}
.prose .art-encadre + .art-encadre::before{content:none}
.prose .art-encadre:has(+ .art-encadre){padding-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.prose blockquote{margin:1.8em 0 0;padding:2px 0 2px 24px;border-left:3px solid var(--terracotta);font:italic 400 clamp(20px,1.9vw,24px)/1.45 var(--serif);color:var(--encre)}
.prose hr{width:72px;height:2px;margin:2.4em auto;border:0;border-radius:2px;background:var(--sable)}
.prose .art-bouton{margin-top:1.6em}
.prose .art-bouton a{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:6px 6px 6px 24px;border-radius:999px;background:var(--terracotta);color:#fff;font:500 15px/1.25 var(--sans);text-decoration:none;transition:box-shadow .2s}
.prose .art-bouton a::after{content:"";flex:none;width:42px;height:42px;border-radius:50%;background:var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center/15px 15px no-repeat}
.prose .art-bouton a:hover{box-shadow:inset 0 0 0 100px rgba(27,43,63,.1)}
.prose .art-photo{margin:1.8em 0 0}
.prose .art-photo img{display:block;width:100%;height:auto;border-radius:clamp(16px,2vw,24px);background:var(--lin)}
.prose .art-photo figcaption{margin-top:10px;font:400 13.5px/1.5 var(--sans);color:var(--encre-74);text-align:center}
.prose > blockquote:first-child,.prose > .art-photo:first-child,.prose > hr:first-child{margin-top:0}