/* Blog de pleasesendit.com : styles propres au blog, chargés après /static/commun.css (univers « Nuit »).
   Colonne de lecture d'environ 680 px, lisible dès 360 px de large. */

/* en-tête : lien « Blog » à côté de « Se connecter » */
.blog .lien-blog{font-size:14.5px;font-weight:600;color:var(--texte);text-decoration:none;padding:10px 8px;min-height:44px;display:inline-flex;align-items:center}
.blog .lien-blog:hover{color:var(--accent)}
@media (max-width:379px){.blog .marque{font-size:17px}.blog .barre-in{gap:6px}}

/* colonne */
.colonne{max-width:712px;margin:0 auto;padding:36px 16px 40px}
@media (min-width:760px){.colonne{padding:64px 16px 56px}}

/* tête d'article et d'index */
.article-tete{margin-bottom:32px}
.article-tete h1{font:700 32px/1.08 var(--titre);letter-spacing:-1px;overflow-wrap:break-word;hyphens:auto}
@media (min-width:760px){.article-tete h1{font-size:44px;letter-spacing:-1.6px}}
.fil{font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:14px}
.fil a{color:var(--accent);text-decoration:none}
.fil a:hover{text-decoration:underline}
.article-meta{display:block;font-size:14px;color:var(--discret);margin-top:16px}
.chapo-blog{font-size:18px;line-height:1.6;color:#C9D1CE;margin-top:18px}

/* texte courant */
.prose-blog{font-size:17.5px;line-height:1.72;color:#D5DCD9;overflow-wrap:break-word}
@media (min-width:760px){.prose-blog{font-size:18px}}
.prose-blog > * + *{margin-top:1.1em}
.prose-blog h2{font:700 25px/1.18 var(--titre);letter-spacing:-.5px;color:var(--texte);margin-top:2.1em;margin-bottom:-.2em}
@media (min-width:760px){.prose-blog h2{font-size:29px;letter-spacing:-.8px}}
.prose-blog h3{font:700 20px/1.25 var(--titre);color:var(--texte);margin-top:1.7em;margin-bottom:-.3em}
.prose-blog strong{color:var(--texte);font-weight:600}
.prose-blog em{font-style:italic}
.prose-blog a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose-blog a:hover{text-decoration-thickness:2px}
.prose-blog ul,.prose-blog ol{padding-left:1.3em}
.prose-blog li + li{margin-top:.45em}
.prose-blog li::marker{color:var(--accent)}
.prose-blog ol li::marker{font-weight:600}
.prose-blog blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;color:var(--texte);font-style:italic}
.prose-blog code{font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--carte-2);border-radius:6px;padding:2px 6px;overflow-wrap:anywhere}
/* modèles de message : bloc à copier, jamais de défilement horizontal */
.prose-blog pre.modele{background:var(--carte);border:1px solid var(--bord-fort);border-left:3px solid var(--accent);border-radius:12px;padding:16px 18px;margin-top:1.3em;margin-bottom:.3em}
.prose-blog pre.modele code{display:block;background:none;padding:0;font:15px/1.6 "Geist",system-ui,sans-serif;color:var(--texte);white-space:pre-wrap;overflow-wrap:anywhere}

/* appel à l'action en bas d'article */
.cta-blog{margin-top:56px;background:var(--accent-doux);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--rayon);padding:24px 22px}
.cta-blog .cta-titre{font:700 22px/1.15 var(--titre);letter-spacing:-.4px;color:var(--texte);margin-bottom:8px}
.cta-blog p{color:#C9D1CE;font-size:15.5px;line-height:1.55}
.cta-blog .btn{margin-top:16px}

/* à lire aussi */
.lire-aussi{margin-top:44px;border-top:1px solid var(--bord);padding-top:28px}
.lire-aussi ul{list-style:none;display:grid;gap:12px}
.lire-aussi a{font:700 18px/1.3 var(--titre);color:var(--texte);text-decoration:none}
.lire-aussi a:hover{color:var(--accent)}

/* index du blog */
.liste-articles{list-style:none;display:grid;gap:14px}
.carte-article{display:block;background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:20px;text-decoration:none;color:inherit;transition:border-color .15s}
.carte-article:hover{border-color:var(--accent)}
.carte-article .article-meta{margin-top:0;font-size:13px}
.carte-titre{display:block;font:700 22px/1.18 var(--titre);letter-spacing:-.5px;color:var(--texte);margin-top:8px;overflow-wrap:break-word}
.carte-desc{display:block;color:var(--discret);font-size:15px;line-height:1.55;margin-top:8px}

/* pied de page */
.pied-blog{max-width:1040px;margin:0 auto;padding:24px 16px 40px;text-align:center;font-size:13px;color:var(--discret);border-top:1px solid var(--bord)}
.pied-blog a{color:var(--discret)}
.pied-blog a:hover{color:var(--texte)}
.blog .marque{white-space:nowrap}