/* =====================================================================
   Tatou Site Studio — pages « idées » (articles)
   S'ajoute à studio.css.
   ===================================================================== */
.article{max-width:720px;margin:0 auto;padding-block:30px 40px}
.fil{font-size:.85rem;color:var(--encre-douce);margin:0 0 26px;display:flex;flex-wrap:wrap;gap:6px}
.fil a{color:var(--encre-douce)}
.fil span[aria-hidden]{opacity:.6}
.article .tag-art{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sapin);background:var(--sapin-pale);padding:5px 12px;border-radius:999px;margin-bottom:18px}
.article h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin-bottom:20px}
.chapeau{font-size:1.2rem;line-height:1.55;color:var(--encre-douce);margin-bottom:22px}
.signature{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--encre-douce);padding-bottom:26px;
  border-bottom:1px solid var(--ligne);margin-bottom:34px}
.signature .avatar{width:40px;height:40px;border-radius:50%;background:var(--sapin-pale);display:grid;place-items:center;
  font-family:var(--f-main);font-size:1.4rem;color:var(--sapin);flex:none}
.signature strong{color:var(--encre)}

.corps{font-size:1.06rem;line-height:1.72}
.corps p,.corps li{max-width:none}
.corps h2{font-size:clamp(1.5rem,3vw,1.9rem);margin:48px 0 16px;line-height:1.12}
.corps h3{font-size:1.2rem;margin:30px 0 10px}
.corps ul,.corps ol{padding-left:1.3em;margin:0 0 1.2em}
.corps li{margin-bottom:.45em}
.corps li::marker{color:var(--corail)}
.corps a{color:var(--sapin);text-underline-offset:3px}

.note-sev{background:var(--blanc);border-left:3px solid var(--corail-clair);border-radius:0 12px 12px 0;
  padding:18px 22px;margin:30px 0}
.note-sev p{margin:0}
.note-sev .main{display:block;font-family:var(--f-main);font-size:1.35rem;color:var(--corail-fonce);margin-bottom:4px}

.astuce{background:var(--sapin-pale);border-radius:14px;padding:18px 22px;margin:24px 0}
.astuce p{margin:0}
.astuce strong:first-child{color:var(--sapin)}

.fiche{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px;padding:0;list-style:none}
.corps .fiche li{margin:0;font-size:.82rem;font-weight:700;background:var(--blanc);border:1px solid var(--ligne);
  padding:4px 11px;border-radius:999px;color:var(--encre-douce)}

.tableau-wrap{overflow-x:auto;margin:26px 0;border-radius:14px;border:1px solid var(--ligne)}
.tableau{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem;background:var(--blanc)}
.tableau th,.tableau td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
.tableau th{font-family:var(--f-texte);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sapin);background:var(--sapin-pale)}
.tableau tr:last-child td{border-bottom:0}

/* encart produit (rempli par article.js depuis products.js) */
.encart{margin:40px 0;background:var(--blanc);border:1px solid rgba(218,209,191,.8);border-radius:var(--rayon);
  box-shadow:var(--ombre);overflow:hidden;display:grid;grid-template-columns:200px 1fr}
.encart-img{display:block;background:var(--sapin-pale)}
.encart-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.encart-corps{padding:22px 24px}
.encart .sur{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--corail-fonce);margin:0 0 6px}
.encart h2,.encart .titre{font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.2;margin:0 0 8px}
.encart p{font-size:.96rem;color:var(--encre-douce);margin:0 0 12px}
.encart .faits{margin-bottom:16px}
.encart .btn{padding:11px 20px;font-size:.92rem}
@media (max-width:560px){.encart{grid-template-columns:1fr}.encart-img img{aspect-ratio:16/10}}

/* autres articles */
.autres{border-top:1px solid var(--ligne);padding-top:44px;margin-top:20px}
.autres h2{font-size:1.5rem;margin-bottom:22px}
.autres .idees{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.autres .idees{grid-template-columns:1fr}}
.retour{margin:34px 0 0;text-align:center}
.corps .fiche,.corps .faits{padding-left:0}
.corps .faits li{margin-bottom:0}

/* ---------- Pinterest ---------- */
.pin-bloc{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;margin:0 0 40px;
  background:var(--blanc);border:1px solid rgba(218,209,191,.8);border-radius:var(--rayon);padding:18px;box-shadow:var(--ombre)}
.pin-bloc img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px}
.pin-bloc figcaption p{color:var(--encre-douce);margin:6px 0 16px}
.pin-bloc .main{font-family:var(--f-main);font-size:1.5rem;color:var(--corail-fonce);line-height:1}
.pin-btn{padding:12px 22px;font-size:.93rem}
.pin-fin{text-align:center;margin:10px 0 0}
.lien-pin{font-weight:700;color:var(--sapin);text-underline-offset:3px}
@media (max-width:560px){.pin-bloc{grid-template-columns:110px 1fr;gap:16px;padding:14px}.pin-bloc figcaption p{font-size:.92rem;margin-bottom:12px}.pin-btn{width:100%}}

/* ---------- illustrations de section ---------- */
.illus-sec{float:right;width:150px;height:150px;margin:0 0 14px 26px;background:var(--blanc);border-radius:50%;padding:14px;
  border:1px solid rgba(218,209,191,.7)}
.corps h2{clear:both}
@media (max-width:560px){.illus-sec{width:96px;height:96px;padding:9px;margin-left:16px}}