/* Articles : prolonge pv.css, chargé seulement par les pages d'article et les actualités.
   Aucune couleur en dur, tout vient des jetons de pv.css. Angles vifs, comme le reste. */

/* ---------- corps de l'article ---------- */
/* les titres d'article respirent, et restent plus petits que ceux d'une page de service */
.art h2{font-size:clamp(23px,2.7vw,34px);margin:clamp(42px,5.6vh,74px) 0 16px}
.art .wrap > h2:first-child{margin-top:0}
.art .txt{max-width:66ch}
.art .txt + .txt{margin-top:15px}
.art .txt strong{color:var(--fg);font-weight:600}
.art ul{list-style:none;margin:17px 0 0;padding:0;max-width:66ch}
.art ul li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.66;color:var(--fg-2)}
.art ul li + li{margin-top:11px}
.art ul li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--vert)}
.art ul li strong{color:var(--fg);font-weight:600}
.art sup{font-size:.64em;vertical-align:super;line-height:0}

.art a.inl{color:inherit;text-decoration:none;border-bottom:1px solid var(--vert);
  padding-bottom:1px;transition:color .25s,border-color .25s}
.art a.inl:hover{color:var(--vert)}

/* ---------- photo ---------- */
figure.ph{margin:0}
figure.ph img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg-2)}
figure.ph.portrait img{aspect-ratio:4/3}
/* La legende et le credit photo sont deux choses : le credit prend sa propre ligne,
   sinon il se lit comme la suite de la phrase. */
figure.ph figcaption{font-size:12px;line-height:1.5;color:var(--fg-2);margin-top:10px;
  display:grid;gap:5px;max-width:66ch}
figure.ph figcaption span + span{opacity:.72}
figure.ph figcaption a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
figure.ph figcaption a:hover{color:var(--vert);border-color:var(--vert)}
.ph-pleine{padding-left:calc(var(--rail) + 18px);padding-right:20px;margin-block:clamp(44px,7vh,86px)}
.ph-pleine figure.ph img{aspect-ratio:16/9}
@media (max-width:760px){
  .ph-pleine figure.ph img,figure.ph img{aspect-ratio:4/3}
}

/* ---------- à retenir ---------- */
.retenir{margin-top:clamp(42px,6vh,74px);border:1px solid var(--rule);padding:clamp(24px,3vw,38px);max-width:72ch}
.retenir h3{margin:0 0 4px;font-size:clamp(19px,2vw,24px)}
.retenir ul{margin-top:16px}
.retenir ul li::before{background:var(--cuivre)}

/* ---------- sources et avertissement ---------- */
.art-src{border-top:1px solid var(--rule-2);margin-top:clamp(40px,6vh,72px);padding-top:26px;max-width:72ch}
.art-src h3{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin:0 0 14px}
.art-src ol{list-style:none;margin:0;padding:0;counter-reset:s}
.art-src li{counter-increment:s;position:relative;padding-left:30px;font-size:13px;line-height:1.55;color:var(--fg-2)}
.art-src li + li{margin-top:9px}
.art-src li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:11px;font-weight:700;color:var(--vert);letter-spacing:.04em}
.art-src a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.art-src a:hover{color:var(--vert);border-color:var(--vert)}
.art-avert{font-size:12.5px;line-height:1.55;color:var(--fg-2);max-width:72ch;margin-top:26px;
  padding-left:15px;border-left:1px solid var(--rule)}
.art-sign{font-size:13.5px;color:var(--fg-2);margin-top:26px}
.art-sign b{color:var(--fg);font-weight:600}

/* ---------- cartes d'actualités ---------- */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-2);border-block:1px solid var(--rule-2)}
.cartes a{background:var(--bg);padding:clamp(24px,2.6vw,34px);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:13px;transition:background .3s}
.cartes a:hover{background:var(--bg-2)}
.cartes h3{font-size:clamp(19px,1.7vw,23px);margin:0}
.cartes p{font-size:14.5px;line-height:1.55;color:var(--fg-2);margin:0;flex:1}
.cartes .d{font-size:11.5px;letter-spacing:.06em;color:var(--fg-2);text-transform:uppercase}
.cartes .go{font-size:12.5px;color:var(--vert);display:flex;align-items:center;gap:8px}
.cartes .go::after{content:"";width:17px;height:1px;background:var(--vert);transition:width .3s}
.cartes a:hover .go::after{width:30px}
.cartes:has(> a:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.cartes:has(> a:only-child){grid-template-columns:1fr}
@media (max-width:980px){.cartes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cartes{grid-template-columns:1fr}}

/* Pas de photo d'ouverture : on resserre l'ecart entre le chapeau et le texte. */
.art .phero + .sec{padding-top:clamp(18px,2.6vh,34px)}