/* Bluun : le blog, 23 oct. 2026. Se charge APRÈS accueil.css, dont il reprend les jetons,
   la navigation, les boutons et le pied. Ici, seulement ce qui est propre au blog. */

.blog main{padding-bottom:40px}
.blog .nav-liens a[aria-current="page"]{color:var(--encre)}

/* ---------- index ---------- */
.blog-tete{padding-top:40px;padding-bottom:28px}
.blog-tete h1{font-weight:700;font-size:clamp(40px,4.4vw + 18px,80px);line-height:1.02;letter-spacing:-.025em;max-width:14ch}
.blog-chapo{margin-top:16px;font-size:clamp(18px,.5vw + 16px,21px);color:var(--encre2);max-width:36em}

.blog-une{margin-bottom:44px}
.une{display:grid;gap:18px;text-decoration:none;color:var(--encre)}
.une img{width:100%;height:auto;border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--sub)}
.une-texte{display:flex;flex-direction:column;gap:8px}
.une-titre{font-weight:700;font-size:clamp(26px,1.8vw + 16px,40px);line-height:1.12;letter-spacing:-.015em}
.une-desc{color:var(--encre2);max-width:34em}
@media (min-width:900px){.une{grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}}

.cat{font-weight:700;font-size:14px;color:var(--encre2)}
.lien-lire{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--encre);margin-top:4px}
.lien-lire svg{width:18px;height:18px;color:var(--corail);transition:transform .2s}

.grille-art{display:grid;gap:30px}
@media (min-width:640px){.grille-art{grid-template-columns:1fr 1fr;gap:36px 28px}}
@media (min-width:1000px){.grille-art{grid-template-columns:repeat(3,1fr)}}
.carte-art{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--encre)}
.carte-art img{width:100%;height:auto;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--sub);margin-bottom:8px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.carte-art h2,.carte-art h3{font-weight:700;font-size:21px;line-height:1.28}
.carte-art:hover img,.une:hover img{transform:translateY(-3px)}
.carte-art:hover .lire svg,.une:hover .lien-lire svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.carte-art img,.lien-lire svg{transition:none}}

/* ---------- article ---------- */
.art-tete{padding-top:36px;max-width:860px}
.art-fil{font-weight:700;font-size:15px;color:var(--encre2)}
.art-fil a{color:var(--encre);text-decoration:none;border-bottom:2px solid var(--corail)}
.article h1{margin-top:14px;font-weight:700;font-size:clamp(34px,2.8vw + 18px,60px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.art-meta{margin-top:12px;font-weight:600;font-size:15px;color:var(--encre2)}
.art-chapo{margin-top:22px;font-weight:600;font-size:clamp(19px,.6vw + 16px,23px);line-height:1.5;max-width:36em}
.art-dessin{margin-top:30px;margin-bottom:8px;max-width:980px}
.art-dessin img{width:100%;height:auto;border-radius:30px;box-shadow:0 0 0 1px var(--sub)}

.art-corps{max-width:760px;padding-top:12px}
.art-corps h2{margin-top:48px;font-weight:700;font-size:clamp(25px,1vw + 19px,32px);line-height:1.18;letter-spacing:-.01em}
.art-corps p{margin-top:16px;color:var(--encre);font-size:18px;line-height:1.75}
.art-corps strong{font-weight:700}
.art-corps a{color:var(--encre);font-weight:700;text-decoration:underline;text-decoration-color:var(--corail);text-decoration-thickness:2px;text-underline-offset:3px}
.art-sources{margin-top:56px;padding-top:24px;border-top:3px solid var(--peche)}
.art-sources h2{margin-top:0;font-size:20px}
.art-sources ol{margin-top:12px;padding-left:20px;display:grid;gap:8px;font-size:15px;color:var(--encre2)}
.art-corps .disclaimer{margin-top:28px !important;font-size:14px !important;line-height:1.6 !important;color:var(--encre2) !important}

.blog aside.cta{margin-top:44px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:var(--carte);border-radius:28px;padding:26px 24px}
.blog aside.cta .tuile{width:64px;height:64px;filter:drop-shadow(0 10px 14px rgba(233,78,52,.3))}
.blog .cta-titre{font-weight:700;font-size:24px;line-height:1.2}
.blog aside.cta p:not(.cta-titre){margin-top:8px;font-size:16px;line-height:1.55;color:var(--encre2)}
.blog aside.cta .btn{margin-top:16px}
@media (max-width:480px){.blog aside.cta{grid-template-columns:1fr}.blog aside.cta .tuile{width:56px;height:56px}}
.blog main > .wrap > .blog aside.cta{max-width:860px;margin-top:64px}

.more-list{margin-top:72px}
.more-list h2{font-weight:700;font-size:clamp(28px,1.4vw + 20px,40px);margin-bottom:24px}

.blog .footer{margin-top:72px}
.art-corps a .fleche{display:inline;width:.8em;height:.8em;margin-left:2px;vertical-align:-1px;color:var(--corail)}
/* 16 articles sous l'article à la une : quatre colonnes sur grand écran, aucune carte seule sur sa ligne */
@media (min-width:1100px){.blog-tete + .blog-une + section .grille-art{grid-template-columns:repeat(4,1fr);gap:40px 26px}}
/* téléphone : cartes en ligne, dessin à gauche, pour que la liste ne fasse pas dix écrans */
@media (max-width:639px){
  .grille-art{gap:20px}
  .carte-art{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:4px;align-items:start}
  .carte-art img{grid-row:1 / span 3;margin:0;border-radius:16px}
  .carte-art h2,.carte-art h3{font-size:17px;line-height:1.3}
  .carte-art .lien-lire{display:none}
}
/* une seule colonne pour l'article : en-tête, dessin et texte partagent le même bord gauche */
.art-tete,.art-dessin,.art-corps{max-width:calc(780px + 2 * var(--gouttiere))}