/* Le journal — feuille de style, dans le système graphique du site */

:root{
  --paper:#FBF8F2; --linen:#F2EDE4; --sand:#E7DECF; --petrol:#1B3C45; --muted:#6E7E82;
  --accent:#2C8FB0; --accent-soft:#4AA6C6; --sanguine:#1F7A96; --sanguine-deep:#155C72;
  --lavis:#DCE9EE; --body:#223C44; --line:rgba(27,60,69,.14); --trace:rgba(27,60,69,.34);
  --serif:"Fraunces",Georgia,serif; --sans:"Mulish",system-ui,sans-serif; --mono:"Spline Sans Mono",ui-monospace,monospace;
  --pad:clamp(1.4rem,5vw,7rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--linen);color:var(--petrol);font-family:var(--sans);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}

/* ---- en-tête, identique au reste du site ---- */
.site-header{position:sticky;top:0;z-index:70;background:rgba(251,248,242,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad)}
.marque{font-family:var(--serif);font-size:1.25rem;color:var(--petrol);text-decoration:none;font-style:normal}
.marque em,.marque b{font-style:normal;font-weight:500}
.site-header nav.top{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.5rem);font-size:.9rem}
.site-header nav.top a{color:var(--muted);text-decoration:none;white-space:nowrap;transition:.25s}
.site-header nav.top a:hover{color:var(--sanguine)}
.site-header nav.top a[aria-current]{color:var(--sanguine);border-bottom:1px solid var(--sanguine);padding-bottom:.15rem}
.site-header .pill{color:var(--paper);background:var(--petrol);border-radius:4px;padding:.55rem 1.1rem;font-weight:600;border-bottom:0!important}
.site-header .pill:hover{background:var(--sanguine);color:var(--paper)}

/* ---- menu mobile : même panneau que les autres pages ---- */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:999px;width:44px;height:44px;cursor:pointer;color:var(--petrol);align-items:center;justify-content:center;flex-shrink:0;transition:background .25s}
.burger:hover{background:rgba(27,60,69,.05)}
.burger svg{width:20px;height:20px;display:block}
.voile{position:fixed;inset:0;background:rgba(16,34,40,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;z-index:90}
.voile.open{opacity:1;visibility:visible}
.panneau{position:fixed;top:0;right:0;bottom:0;width:min(310px,84vw);background:var(--paper);z-index:95;display:flex;flex-direction:column;padding:1.1rem 1.4rem 2rem;transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.2,1);overflow-y:auto;box-shadow:-18px 0 44px -24px rgba(16,34,40,.55)}
.panneau.open{transform:none}
.panneau-haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.panneau-haut span{font-family:var(--serif);font-size:1.15rem}
.panneau-haut span b{font-weight:500}
.fermer{background:none;border:0;padding:.4rem;margin:-.4rem;cursor:pointer;color:var(--muted);line-height:0}
.fermer:hover{color:var(--petrol)}
.fermer svg{width:22px;height:22px}
.panneau a{font-size:1.02rem;font-weight:500;color:var(--petrol);text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--line);transition:.2s}
.panneau a:hover{color:var(--accent);padding-left:.3rem}
.panneau a[aria-current]{color:var(--accent)}
.panneau .essai{margin-top:1.4rem;border:0;background:var(--petrol);color:var(--paper);text-align:center;border-radius:4px;padding:.95rem 1rem;font-weight:600}
.panneau .essai:hover{background:var(--accent);color:var(--paper);padding-left:1rem}
.panneau .tel{margin-top:auto;padding-top:1.6rem;border:0;font-size:.92rem;color:var(--muted)}
.panneau .tel b{display:block;font-weight:600;font-size:1.05rem;color:var(--accent);margin-top:.2rem}
body.menu-ouvert{overflow:hidden}
@media(max-width:820px){
  .burger{display:inline-flex}
  .site-header nav.top{display:none}
}

/* ---- gabarit du journal ---- */
main{max-width:1240px;margin:0 auto;padding:clamp(2.4rem,7vh,4.5rem) var(--pad) clamp(3rem,8vh,5rem)}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--sanguine)}
.journal-titre{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.1;letter-spacing:-.015em;margin:.4rem 0 .8rem;max-width:20ch}
.journal-intro{font-size:1.05rem;color:var(--body);max-width:56ch;margin-bottom:clamp(1.8rem,4vh,2.6rem)}

/* filtres par tag */
.tags-bar{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(1.6rem,4vh,2.4rem)}
.tags-bar a{font-size:.85rem;font-weight:500;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;transition:.25s}
.tags-bar a:hover{color:var(--sanguine);border-color:var(--sanguine)}
.tags-bar a.actif{background:var(--petrol);border-color:var(--petrol);color:var(--paper)}

/* grille de cartes */
.grille-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.carte{background:var(--paper);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.carte:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(27,60,69,.5)}
.carte--une{grid-column:1/-1;flex-direction:row;align-items:stretch}
.carte--une .carte-visuel{flex:0 0 46%}
.carte--une .carte-visuel img{height:100%;object-fit:cover}
.carte-visuel{display:block}
.carte-visuel img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover}
.carte-corps{padding:1.2rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem}
.carte--une .carte-corps{padding:clamp(1.4rem,3vw,2.4rem);justify-content:center}
.carte-meta{font-size:.82rem;color:var(--muted);display:flex;gap:.5rem;flex-wrap:wrap}
.carte-titre{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.25;letter-spacing:-.01em}
.carte--une .carte-titre{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.carte-titre a{text-decoration:none;transition:color .25s}
.carte-titre a:hover{color:var(--sanguine)}
.carte-resume{font-size:.97rem;color:var(--body);max-width:52ch}
.carte-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.carte-tags a{font-size:.78rem;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;transition:.25s}
.carte-tags a:hover{color:var(--sanguine);border-color:var(--sanguine)}

/* pagination */
.pagination{display:flex;justify-content:center;gap:1rem;margin-top:clamp(2rem,5vh,3rem);font-weight:600;font-size:.92rem}
.pagination a{color:var(--sanguine);text-decoration:none}
.pagination a:hover{text-decoration:underline}
.pagination .off{color:var(--muted);opacity:.5}

/* ---- page article ---- */
.article-tete{max-width:760px;margin:0 auto}
.article-tete h1{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.6vw,3rem);line-height:1.15;letter-spacing:-.015em;margin:.4rem 0 .9rem}
.article-meta{font-size:.88rem;color:var(--muted);display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.6rem}
.article-visuel{max-width:900px;margin:0 auto clamp(1.8rem,4vh,2.6rem)}
.article-visuel img{display:block;width:100%;border-radius:8px}
.article-corps{max-width:66ch;margin:0 auto;font-size:1.05rem;color:var(--body)}
.article-corps p{margin:0 0 1.15rem}
.article-corps h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.8rem);line-height:1.24;letter-spacing:-.01em;color:var(--petrol);margin:2.2rem 0 .9rem}
.article-corps h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--petrol);margin:1.8rem 0 .7rem}
.article-corps a{color:var(--sanguine);font-weight:600;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .3s;padding-bottom:.1em}
.article-corps a:hover{background-size:100% 1px}
.article-corps blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.2rem;line-height:1.45;color:var(--petrol);border-left:2px solid var(--sanguine);padding-left:1.2rem;margin:1.8rem 0}
.article-corps blockquote p{margin:0}
.article-corps ul,.article-corps ol{padding-left:1.3rem;margin:0 0 1.15rem}
.article-corps li{margin-bottom:.45rem}
.article-corps li::marker{color:var(--sanguine)}
.article-corps hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
.article-corps em{font-style:italic}
.article-corps img{border-radius:6px;margin:1.4rem 0}
.article-corps code{font-family:var(--mono);font-size:.9em;background:var(--paper);padding:.1em .35em;border-radius:3px}

/* pied d'article : tags, voisins, appel */
.article-pied{max-width:66ch;margin:clamp(2rem,5vh,3rem) auto 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.article-pied .carte-tags{margin-bottom:1.6rem}
.voisins{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.95rem}
.voisins a{color:var(--sanguine);font-weight:600;text-decoration:none;max-width:30ch}
.voisins a:hover{text-decoration:underline}
.voisins .sens{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-bottom:.2rem}
.appel{max-width:66ch;margin:clamp(2.2rem,5vh,3.2rem) auto 0;background:var(--lavis);border-radius:8px;padding:clamp(1.4rem,3vw,2rem);text-align:center}
.appel p{font-family:var(--serif);font-weight:300;font-size:1.2rem;color:var(--petrol);margin-bottom:1rem}
.appel a{display:inline-block;background:var(--sanguine);color:var(--paper);font-weight:600;font-size:.92rem;text-decoration:none;border-radius:4px;padding:.9rem 1.5rem;transition:.25s}
.appel a:hover{background:var(--sanguine-deep);transform:translateY(-2px)}

/* ---- pied de page, identique au site ---- */
.site-footer{background:var(--petrol);color:rgba(251,248,242,.72);padding:2.6rem var(--pad);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,7vh,4.5rem)}
.site-footer .marque{color:var(--paper)}
.site-footer nav{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem}
.site-footer a{text-decoration:none;color:rgba(251,248,242,.85)}
.site-footer a:hover{color:var(--accent-soft)}
.site-footer .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.site-footer .mono span{display:block}
@media(max-width:820px){
  .carte--une{flex-direction:column}
  .site-footer{flex-direction:column;align-items:flex-start}
  .site-footer .mono{text-align:left}
}