/* ————————————————————————————————————————————————
   Gabarit d'article — Le Journal de la Cosmétique
   Design system « Labo ». S'ajoute à pages.css.
   ———————————————————————————————————————————————— */

:root{ --wl: min(1180px, calc(100vw - 44px)); }

.article{ padding:26px 0 0; }
.article > .wrap-a > * { max-width:none; }

/* ————— byline ————— */
.byline{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 0; border-block:1px solid var(--hair-f); margin-bottom:34px;
}
.byline .ini{
  width:48px; height:48px; flex:none; display:grid; place-items:center;
  background:var(--noir); color:var(--acide); font-family:var(--mono); font-size:14px; letter-spacing:.04em;
}
.byline .nom{ font-weight:800; font-stretch:106%; text-transform:uppercase; font-size:15px; letter-spacing:.01em; }
.byline .role{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cobalt); margin-top:3px; }
.byline .liens{ margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); }
.byline .liens a{ border-bottom:1px solid var(--acide-d); padding-bottom:2px; }
.byline .liens a:hover{ background:var(--acide); }
@media (max-width:640px){ .byline .liens{ margin-left:0; width:100%; } }

/* ————— image à la une & figures ————— */
.figure-une{ margin:0 0 38px; }
.figure-une .cadre{ border:1px solid var(--hair-f); padding:8px; }
.figure-une img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
figure.fig{ margin:38px 0; }
figure.fig .cadre{ border:1px solid var(--hair-f); padding:8px; }
figure.fig img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
figcaption{
  margin-top:10px; font-family:var(--mono); font-size:9.5px; line-height:1.6;
  letter-spacing:.04em; color:var(--gris); display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
}
figcaption .credit{ white-space:nowrap; }
figcaption a{ border-bottom:1px solid var(--hair-f); }
figcaption a:hover{ color:var(--noir); border-color:var(--noir); }

/* ————— titre & chapô ————— */
.article h1{
  font-weight:900; font-stretch:114%; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,54px); line-height:1; letter-spacing:-.022em; max-width:26ch;
}
.article h1 .ac{ background:var(--acide); padding:0 .06em; }

/* ————— TL;DR (bloc GEO) ————— */
.tldr{
  margin:30px 0 0; border:1px solid var(--noir); background:rgba(200,241,53,.18); padding:24px 26px 26px;
}
.tldr .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt); }
.tldr p{ margin-top:12px; font-size:16.5px; line-height:1.6; color:#26261F; }
.tldr ul{ margin-top:14px; display:grid; gap:8px; }
.tldr li{ display:grid; grid-template-columns:16px 1fr; gap:11px; font-size:15px; line-height:1.55; }
.tldr li .p{ width:9px; height:9px; margin-top:6px; background:var(--noir); }

/* ————— sommaire ————— */
.som{ margin:34px 0 0; border-top:1px solid var(--hair-f); padding-top:16px; }
.som h2{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); font-weight:400; margin-bottom:12px; }
.som ol{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.som a{ font-family:var(--mono); font-size:11px; border-bottom:1px solid var(--acide-d); padding-bottom:2px; }
.som a:hover{ background:var(--acide); border-color:var(--noir); }

/* ————— quiz ————— */
.quiz{ margin:38px 0; border:1px solid var(--hair-f); background:#fff; }
.quiz .tete{ background:var(--noir); color:var(--blanc); padding:20px 24px; }
.quiz .tete h2{ font-weight:900; font-stretch:110%; text-transform:uppercase; font-size:19px; }
.quiz .tete p{ margin-top:7px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--acide); }
.quiz .corps{ padding:8px 24px 24px; }
.qz-item{ padding:20px 0; border-bottom:1px solid var(--hair); }
.qz-item:last-of-type{ border-bottom:0; }
.qz-item .num{ font-family:var(--mono); font-size:10px; color:var(--gris); }
.qz-item .q{ margin-top:8px; font-weight:800; font-size:16px; line-height:1.35; }
.qz-opts{ margin-top:14px; display:grid; gap:8px; }
.qz-opts label{
  display:flex; align-items:flex-start; gap:11px; border:1px solid var(--hair-f); padding:11px 14px;
  font-size:14.5px; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.qz-opts label:hover{ background:rgba(200,241,53,.22); }
.qz-opts input{ margin-top:3px; accent-color:var(--cobalt); flex:none; }
.qz-opts label.juste{ background:rgba(200,241,53,.5); border-color:var(--noir); }
.qz-opts label.faux{ background:rgba(224,49,49,.09); border-color:rgba(224,49,49,.5); }
.qz-item .exp{
  margin-top:12px; font-size:14px; color:#3A3A33; border-left:3px solid var(--acide); padding-left:14px;
  display:none;
}
.qz-item.repondu .exp{ display:block; }
.quiz .pied{ border-top:1px solid var(--hair-f); padding:18px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.quiz .score{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.quiz .score b{ font-family:var(--sans); font-weight:900; font-stretch:112%; font-size:22px; letter-spacing:-.01em; }
.quiz .rejouer{
  margin-left:auto; border:1px solid var(--noir); background:transparent; color:var(--noir); cursor:pointer;
  font:inherit; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px;
}
.quiz .rejouer:hover{ background:var(--noir); color:var(--acide); }
@media (max-width:640px){ .quiz .rejouer{ margin-left:0; } }

/* ————— corps rédactionnel ————— */
.corps-art{ padding:10px 0 0; }
.corps-art h2{
  margin:56px 0 0; font-weight:900; font-stretch:112%; text-transform:uppercase;
  font-size:clamp(22px,2.8vw,32px); line-height:1.06; letter-spacing:-.012em;
  padding-top:18px; border-top:2px solid var(--hair-f);
}
.corps-art h3{ margin:32px 0 0; font-weight:800; font-stretch:106%; font-size:17.5px; line-height:1.25; }
.corps-art p{ margin-top:16px; font-size:16.5px; line-height:1.68; color:#26261F; max-width:68ch; }
.corps-art p.chapo{ font-size:18px; color:#3A3A33; }
.corps-art strong{ font-weight:800; }
.corps-art em{ font-style:italic; }
.corps-art a.lien{ border-bottom:1.5px solid var(--acide-d); }
.corps-art a.lien:hover{ background:var(--acide); }
.corps-art .liste{ margin-top:18px; max-width:68ch; }
.corps-art .liste li{ display:grid; grid-template-columns:16px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--hair); font-size:15.5px; line-height:1.55; }
.corps-art .liste li:last-child{ border-bottom:0; }
.corps-art .liste .p{ width:9px; height:9px; margin-top:7px; background:var(--acide); border:1px solid var(--noir); }
.corps-art .liste .inci{ font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; }

/* Les titres internes aux composants ne doivent pas hériter du style
   des titres de section (marge haute + filet). */
.corps-art .quiz .tete h2,
.corps-art .suite h2,
.corps-art .tldr h2{
  margin:0; padding-top:0; border-top:0;
}
.corps-art .quiz .tete h2{
  font-size:19px; font-stretch:110%; letter-spacing:.01em; line-height:1.15;
}

/* ————— encadré méthode ————— */
.methode{ margin:30px 0; border:1px solid var(--noir); background:rgba(43,59,232,.05); padding:26px 28px 28px; }
.methode .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt); }
.methode h3{ margin:10px 0 0; font-weight:900; font-stretch:110%; text-transform:uppercase; font-size:18px; }
.methode dl{ margin-top:16px; }
.methode .row{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:11px 0; border-top:1px solid var(--hair); }
.methode .row:first-child{ border-top:0; }
.methode dt{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); }
.methode dd{ font-size:14.5px; line-height:1.55; }
@media (max-width:600px){ .methode .row{ grid-template-columns:1fr; gap:4px; } }

/* ————— tableau comparatif ————— */
.tab-wrap{ margin:26px 0; border:1px solid var(--hair-f); overflow-x:auto; }
.tab-wrap table{ border-collapse:collapse; width:100%; min-width:760px; }
.tab-wrap caption{
  text-align:left; padding:14px 16px 6px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gris);
}
.tab-wrap th, .tab-wrap td{ text-align:left; padding:12px 16px; border-top:1px solid var(--hair); font-size:14px; vertical-align:top; }
.tab-wrap thead th{
  background:var(--noir); color:var(--blanc); border-top:0;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:400;
}
.tab-wrap tbody th{ font-family:var(--mono); font-size:12.5px; font-weight:400; letter-spacing:.02em; }
.tab-wrap tbody tr:hover{ background:rgba(200,241,53,.16); }
.tab-wrap .ok{ color:#2F6B4F; font-weight:700; white-space:nowrap; }
.tab-wrap .non{ color:#B3261E; font-weight:700; white-space:nowrap; }
.tab-wrap .verdict{ font-weight:700; }

/* ————— catégories (infographie) ————— */
.cats{ margin:26px 0; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--hair-f); }
.cats .c{ padding:20px 18px 22px; border-right:1px solid var(--hair-f); border-bottom:1px solid var(--hair-f); }
.cats .c:nth-child(4n){ border-right:0; }
.cats .c:nth-last-child(-n+1){ border-bottom:0; }
.cats .c .n{ font-family:var(--mono); font-size:10px; color:var(--cobalt); }
.cats .c h3{ margin:9px 0 0; font-weight:900; font-stretch:108%; text-transform:uppercase; font-size:15px; line-height:1.1; }
.cats .c p{ margin-top:8px; font-size:13px; color:#3A3A33; line-height:1.5; }
.cats .c .ex{ margin-top:10px; font-family:var(--mono); font-size:10.5px; color:var(--gris); line-height:1.6; }
@media (max-width:980px){ .cats{ grid-template-columns:repeat(2,1fr); } .cats .c:nth-child(2n){ border-right:0; } }
@media (max-width:560px){ .cats{ grid-template-columns:1fr; } .cats .c{ border-right:0; } }

/* ————— frise chronologique ————— */
.frise{ margin:26px 0; border:1px solid var(--hair-f); padding:26px 24px 28px; }
.frise ol{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.frise ol::before{ content:""; position:absolute; left:0; right:0; top:19px; height:2px; background:var(--hair); }
.frise li{ position:relative; padding:0 14px 0 0; }
.frise .pt{ width:14px; height:14px; background:var(--acide); border:2px solid var(--noir); position:relative; z-index:1; margin-top:12px; }
.frise .an{ margin-top:14px; font-family:var(--sans); font-weight:900; font-stretch:112%; font-size:20px; letter-spacing:-.01em; }
.frise .ev{ margin-top:6px; font-size:13px; color:#3A3A33; line-height:1.5; padding-right:10px; }
@media (max-width:760px){
  .frise ol{ grid-template-columns:1fr; gap:20px; }
  .frise ol::before{ left:6px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .frise li{ padding-left:30px; }
  .frise .pt{ position:absolute; left:0; top:4px; margin:0; }
  .frise .an{ margin-top:0; }
}

/* ————— verdict ————— */
.verdict-box{ margin:30px 0; border:1px solid var(--noir); }
.verdict-box .part{ padding:24px 26px; border-top:1px solid var(--hair); }
.verdict-box .part:first-child{ border-top:0; }
.verdict-box .part.sombre{ background:var(--noir); color:var(--blanc); border-top-color:var(--noir); }
.verdict-box h3{ font-weight:900; font-stretch:110%; text-transform:uppercase; font-size:16px; display:flex; align-items:center; gap:10px; }
.verdict-box h3 .s{ font-family:var(--mono); font-size:14px; }
.verdict-box h3 .s.plus{ color:#2F6B4F; }
.verdict-box h3 .s.moins{ color:#B3261E; }
.verdict-box .part.sombre h3 .s{ color:var(--acide); }
.verdict-box ul{ margin-top:14px; }
.verdict-box li{ display:grid; grid-template-columns:16px 1fr; gap:11px; padding:7px 0; font-size:15px; line-height:1.55; }
.verdict-box li .p{ width:8px; height:8px; margin-top:7px; background:currentColor; opacity:.6; }
.verdict-box .part.sombre p{ margin-top:12px; font-size:15px; color:rgba(251,251,244,.85); }

/* ————— FAQ ————— */
.faq{ margin:26px 0 0; }
.faq details{ border-bottom:1px solid var(--hair); }
.faq details:first-of-type{ border-top:2px solid var(--hair-f); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:19px 2px; font-weight:800; font-size:16.5px; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--cobalt); }
.faq summary .ind{ font-family:var(--mono); font-size:15px; color:var(--acide-d); flex:none; }
.faq details[open] summary .ind{ color:var(--cobalt); }
.faq details p{ padding:0 2px 20px; font-size:15.5px; line-height:1.65; color:#3A3A33; max-width:68ch; }

/* ————— sources ————— */
.sources{ margin:26px 0 0; }
.sources li{ padding:11px 0; border-bottom:1px solid var(--hair); font-size:14.5px; line-height:1.55; }
.sources li:last-child{ border-bottom:0; }
.sources a{ border-bottom:1px solid var(--acide-d); }
.sources a:hover{ background:var(--acide); }
.sources .t{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); display:block; margin-bottom:3px; }

/* ————— maillage interne ————— */
.suite{ margin:52px 0 0; border-top:2px solid var(--hair-f); padding-top:22px; }
.suite h2{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris); font-weight:400; margin-bottom:14px; }
.suite .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.suite a{ border:1px solid var(--hair-f); padding:18px 18px 20px; transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.suite a:hover{ background:var(--acide); transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--noir); }
.suite .r{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cobalt); }
.suite .t{ display:block; margin-top:9px; font-weight:800; font-size:15px; line-height:1.3; }
@media (max-width:820px){ .suite .grid{ grid-template-columns:1fr; } }

/* ————— note de transparence ————— */
.transparence{ margin:34px 0 0; border:1px solid var(--hair-f); background:rgba(12,12,10,.03); padding:20px 22px 22px; }
.transparence .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); }
.transparence p{ margin-top:9px; font-size:14px; line-height:1.6; color:#3A3A33; max-width:70ch; }
.transparence a{ border-bottom:1px solid var(--acide-d); }