/**
 * Appareil de lecture d'un article.
 *
 * Règles reprises telles quelles de la maquette, seules les racines de
 * sélecteur étant renommées au nom du composant qui les porte : la
 * typographie et les espacements ne sont donc pas retranscrits à la main.
 * Architecture reprise du blog idun-group.com : en-tête à deux colonnes,
 * barre de partage, corps en 20/60/20 — sommaire collant, article, appels
 * collants — puis articles liés et retour à la liste.
 */

.dec-billets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 44px}
.dec-billets .billet{display:flex;flex-direction:column;text-decoration:none;color:inherit;
 padding-bottom:28px;border-bottom:1px solid var(--trait)}
.dec-billets .billet .vign{aspect-ratio:16/9;overflow:hidden;margin-bottom:18px;background:var(--olive-p);
 border-radius:var(--r-m)}
.dec-billets .billet .vign img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.dec-billets .billet .vign.motif{display:grid;place-items:center;position:relative;overflow:hidden}
.dec-billets .billet .vign.motif::before{content:'';position:absolute;inset:0;
 background:radial-gradient(120% 100% at 22% 6%,rgba(142,235,0,.26) 0%,transparent 60%)}
.dec-billets .billet .vign.motif .anneaux{position:static;color:rgba(78,129,0,.32);width:46%}
.dec-billets .billet:hover .vign img{transform:scale(1.05)}
.dec-billets .billet h3{font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.24;
 margin-bottom:10px;transition:color .2s}
.dec-billets .billet:hover h3{color:var(--olive)}
.dec-billets .billet p{font-size:14.5px;line-height:1.55;color:var(--encre2);flex:1}
.dec-billets .meta-billet{display:flex;align-items:center;gap:11px;font-family:var(--mono);
 font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
 margin-bottom:11px}
.dec-billets .meta-billet .th{color:var(--olive)}
.dec-billets .meta-billet b{width:3px;height:3px;border-radius:50%;background:var(--trait);flex:none}
.dec-prog{position:fixed;left:0;top:0;height:3px;z-index:60;width:0;
 background:linear-gradient(to right,var(--olive),var(--lime));
 transition:width .12s linear}
.dec-art-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
 gap:56px;align-items:start}
.dec-art-h .etiqs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.dec-art-h .etq{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;
 letter-spacing:.15em;text-transform:uppercase;font-weight:600;padding:6px 11px;
 border-radius:var(--r-xs);border:1px solid var(--trait);color:var(--encre2);
 background:var(--papier);text-decoration:none;transition:border-color .18s var(--ease)}
.dec-art-h .etq.cat{color:var(--olive-t);border-color:rgba(78,129,0,.34);background:var(--olive-p)}
.dec-art-h a.etq:hover{border-color:var(--olive)}
.dec-art-h h1{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.042em;
 line-height:1.04;margin-bottom:22px}
.dec-art-h .desc{font-size:18px;line-height:1.6;color:var(--encre2);max-width:60ch;
 margin-bottom:28px}
.dec-art-h .art-meta{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:22px;
 border-top:1px solid var(--trait);font-family:var(--mono);font-size:11px;
 letter-spacing:.08em;color:var(--gris)}
.dec-art-h .art-meta span{display:inline-flex;align-items:center;gap:8px}
.dec-art-h .art-meta b{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.dec-art-h .sign{display:flex;align-items:center;gap:14px;margin-top:24px}
.dec-art-h .sign .av{width:42px;height:42px;border-radius:50%;background:var(--olive-p);flex:none;
 display:grid;place-items:center;overflow:hidden;position:relative}
.dec-art-h .sign .av .anneaux{position:static;width:150%;color:rgba(78,129,0,.46)}
.dec-art-h .sign .n{font-size:15px;font-weight:700;letter-spacing:-.02em;display:block}
.dec-art-h .sign .r{font-size:13px;color:var(--gris);display:block;margin-top:2px}
.dec-art-h .art-vis{aspect-ratio:4/3;overflow:hidden;background:var(--calque);position:relative;
 border-radius:var(--r-2xl) var(--r-2xl) var(--r-m) var(--r-m)}
.dec-art-h .art-vis img{width:100%;height:100%;object-fit:cover}
.dec-art-h .art-vis.motif{display:grid;place-items:center}
.dec-art-h .art-vis.motif::before{content:'';position:absolute;inset:0;
 background:radial-gradient(circle at 68% 28%,rgba(142,235,0,.26),transparent 62%)}
.dec-art-h .art-vis.motif .anneaux{position:static;color:rgba(78,129,0,.3);width:72%}
.dec-barre-art{display:flex;align-items:center;justify-content:space-between;gap:20px;
 flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--trait);
 border-bottom:1px solid var(--trait)}
.dec-barre-art .grp-b{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dec-barre-art .grp-b .lb{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
 text-transform:uppercase;color:var(--gris);margin-right:3px;
 display:inline-flex;align-items:center;gap:7px}
.dec-barre-art .grp-b .lb i{width:7px;height:7px;border-radius:50%;background:var(--lime);
 display:inline-block;flex:none}
.dec-avis{margin-top:56px;border:1px solid var(--trait);border-radius:var(--r-l);
 padding:26px 28px}
.dec-avis p{font-size:16px;font-weight:600;color:var(--encre);margin-bottom:18px}
.dec-avis .bts{display:flex;gap:11px;flex-wrap:wrap}
.dec-avis button{font:inherit;font-size:14.5px;font-weight:600;padding:11px 20px;
 border-radius:var(--r-pill);border:1px solid var(--trait);background:var(--papier);
 color:var(--encre2);cursor:pointer;
 transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.dec-avis button:hover{border-color:var(--olive);color:var(--olive-t);background:var(--olive-p)}
.dec-avis .merci{display:none;align-items:center;gap:11px;font-size:15px;color:var(--olive-t)}
.dec-avis.repondu .bts,
.dec-avis.repondu p{display:none}
.dec-avis.repondu .merci{display:flex}
.dec-auteur{margin-top:40px;border:1px solid var(--trait);border-radius:var(--r-l);
 padding:28px 30px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:24px;
 align-items:start}
.dec-auteur .av{width:76px;height:76px;border-radius:50%;background:var(--olive-p);
 display:grid;place-items:center;overflow:hidden;position:relative}
.dec-auteur .av .anneaux{position:static;width:140%;color:rgba(78,129,0,.44)}
.dec-auteur .k{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
 text-transform:uppercase;color:var(--gris);display:block;margin-bottom:7px}
.dec-auteur h3{font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.dec-auteur .r{font-size:14px;color:var(--encre2);font-weight:600;margin-bottom:12px}
.dec-auteur .bio{font-size:15px;line-height:1.6;color:var(--encre2);max-width:64ch}
.dec-auteur .liens{display:flex;gap:18px;margin-top:15px;flex-wrap:wrap}
.dec-auteur .liens a{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--olive-t);text-decoration:none}
.dec-auteur .liens a:hover{color:var(--encre)}
.dec-bloc-cta{border:1px solid var(--trait);border-radius:var(--r-l);padding:19px}
.dec-bloc-cta .ico{width:34px;height:34px;border-radius:var(--r-s);background:var(--olive-p);
 display:grid;place-items:center;margin-bottom:12px}
.dec-bloc-cta .ico svg{width:16px;height:16px;fill:var(--olive-t)}
.dec-bloc-cta h3{font-size:15.5px;font-weight:800;letter-spacing:-.025em;line-height:1.26;
 margin-bottom:7px}
.dec-bloc-cta p{font-size:13px;line-height:1.45;color:var(--encre2);margin-bottom:12px}
.dec-bloc-cta .b{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
 font-weight:700;color:var(--olive-t);text-decoration:none}
.dec-bloc-cta .b:hover{color:var(--encre)}
.dec-bloc-cta.plein{background:var(--olive-f);border-color:var(--olive-f);color:var(--papier);
 position:relative;overflow:hidden}
.dec-bloc-cta.plein::before{content:'';position:absolute;inset:0;
 background:radial-gradient(120% 90% at 84% 108%,rgba(142,235,0,.44),transparent 62%)}
.dec-bloc-cta.plein > *{position:relative;z-index:2}
.dec-bloc-cta.plein .ico{background:rgba(255,255,255,.16)}
.dec-bloc-cta.plein .ico svg{fill:var(--lime)}
.dec-bloc-cta.plein h3{color:var(--papier)}
.dec-bloc-cta.plein p{color:rgba(255,255,255,.9)}
.dec-bloc-cta.plein .b{color:var(--lime)}
.dec-bloc-cta.plein .b:hover{color:var(--papier)}
.dec-suite{margin-top:16px;border:1px solid var(--trait);border-radius:var(--r-l);
 padding:24px 28px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;
 gap:22px;align-items:center}
.dec-suite .ico{width:44px;height:44px;border-radius:var(--r-s);background:var(--olive-p);
 display:grid;place-items:center}
.dec-suite .ico svg{width:19px;height:19px;fill:var(--olive-t)}
.dec-suite h3{font-size:17px;font-weight:800;letter-spacing:-.025em;margin-bottom:5px}
.dec-suite p{font-size:14.5px;line-height:1.5;color:var(--encre2);max-width:62ch}
.dec-suite .b{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;
 color:var(--olive-t);text-decoration:none;white-space:nowrap}
.dec-suite .b:hover{color:var(--encre)}
.dec-art-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
 margin-top:10px;border-top:1px solid var(--trait)}
.dec-art-nav a{padding:28px 30px 30px 0;border-right:1px solid var(--trait);
 text-decoration:none;color:inherit;transition:background .2s var(--ease)}
.dec-art-nav a:last-child{border-right:0;padding:28px 0 30px 30px;text-align:right}
.dec-art-nav a:hover{background:var(--olive-p)}
.dec-art-nav .k{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
 text-transform:uppercase;color:var(--olive-t);display:block;margin-bottom:11px}
.dec-art-nav .t{font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.3;
 display:block}
.dec-art-nav .vide{padding:28px 0}
.dec-retour{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
 font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
 text-decoration:none;margin-bottom:26px}
.dec-retour:hover{color:var(--olive-t)}
.dec-retour-bas{text-align:center;padding-top:10px}
.dec-retour-bas .retour{margin:0}

/* Colonne d'appels : elle suit la lecture. Elementor ne restitue pas la classe
   d'un conteneur, mais il restitue son identifiant — c'est par lui que passe
   le collage. */
#appels-article{position:sticky;top:112px;align-self:start}
@media(max-width:1180px){#appels-article{position:static}}