/* ═══════════════════════════════════════════════════════════
   BLOG FRELIA — feuille de style partagée
   Ne pas modifier : ce fichier habille toutes les pages du blog.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/p300.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/p400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/p500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/p600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/p700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/p800.woff2) format('woff2')}

:root{
  --paper:#FAF5EC; --paper-2:#F1E9DB; --card:#fff;
  --ink:#1B2E3F; --ink-soft:#5E6E7A;
  --navy:#14324C; --navy-deep:#0E2438;
  --coral:#EF6E4D; --coral-deep:#D9552F; --coral-ghost:rgba(239,110,77,.12);
  --sage:#6E8B7B;
  --line:rgba(27,46,63,.10);
  --shadow:0 26px 60px -30px rgba(20,40,60,.4);
  --shadow-soft:0 14px 40px -22px rgba(20,40,60,.26);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.18;letter-spacing:-.024em;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1140px,92vw);margin-inline:auto}
.narrow{width:min(720px,92vw);margin-inline:auto}

/* Mot souligné (comme sur le site) */
.u{position:relative;white-space:nowrap;z-index:0}
.u::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-.14em;height:.3em;z-index:-1;
  background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 7 C 22 2.5, 50 2, 99 5.5' fill='none' stroke='%23EF6E4D' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}

.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:16px}
.kicker::before{content:"";width:24px;height:2px;background:var(--coral)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:1rem;padding:15px 28px;border-radius:999px;transition:transform .18s,background .18s;cursor:pointer;border:0;font-family:inherit}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 14px 26px -14px rgba(239,110,77,.8)}
.btn-coral:hover{transform:translateY(-2px);background:var(--coral-deep)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.ic{width:19px;height:19px;flex:0 0 auto}

/* EN-TÊTE */
header{position:sticky;top:0;z-index:70;background:rgba(250,245,236,.9);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.solid{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.brand svg{height:26px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-call{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;font-size:.88rem}
.nav-call:hover{background:var(--coral-deep)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:25px;height:2px;background:var(--ink);border-radius:2px}

/* EN-TÊTE DE PAGE */
.page-head{padding:60px 0 40px;text-align:center}
.page-head h1{font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:800;margin-bottom:14px}
.page-head p{color:var(--ink-soft);font-size:1.06rem;max-width:52ch;margin-inline:auto}

/* LISTE D'ARTICLES */
.posts{padding:20px 0 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .24s,box-shadow .24s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.post .cover{aspect-ratio:16/9;background:linear-gradient(140deg,var(--navy),#1c4363);position:relative;background-size:cover;background-position:center}
.post .cover span{position:absolute;left:14px;top:14px;background:#fff;color:var(--coral-deep);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:99px;box-shadow:0 3px 10px -3px rgba(20,40,60,.45)}
.post .body{padding:24px;display:flex;flex-direction:column;flex:1}
.post .meta{font-size:.78rem;color:var(--ink-soft);margin-bottom:9px}
.post h2{font-size:1.22rem;margin-bottom:10px}
.post p{font-size:.94rem;color:var(--ink-soft);flex:1;margin-bottom:16px}
.post .more{font-size:.9rem;font-weight:600;color:var(--coral-deep);display:inline-flex;align-items:center;gap:6px}
.post:hover .more{gap:10px}

/* ARTICLE */
article{padding:20px 0 70px}
.art-head{text-align:center;padding:46px 0 34px}
.art-head .meta{font-size:.84rem;color:var(--ink-soft);margin-bottom:16px}
.art-head .meta b{color:var(--coral-deep);font-weight:600}
.art-head h1{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:800;margin-bottom:16px}
.art-head .lead{color:var(--ink-soft);font-size:1.1rem;max-width:56ch;margin-inline:auto}
.art-cover{aspect-ratio:16/8;border-radius:18px;margin:0 0 46px;background:linear-gradient(140deg,var(--navy),#1c4363);background-size:cover;background-position:center;box-shadow:var(--shadow)}

.art-body{font-size:1.05rem}
.art-body p{margin-bottom:22px}
.art-body h2{font-size:1.55rem;margin:44px 0 16px}
.art-body h3{font-size:1.22rem;margin:32px 0 12px}
.art-body ul,.art-body ol{margin:0 0 22px 4px;padding-left:22px}
.art-body li{margin-bottom:10px}
.art-body strong{font-weight:600}
.art-body a{color:var(--coral-deep);border-bottom:1px solid rgba(239,110,77,.4)}
.art-body a:hover{border-color:var(--coral)}
.art-body blockquote{border-left:3px solid var(--coral);background:var(--paper-2);padding:18px 24px;border-radius:0 12px 12px 0;margin:0 0 24px;font-size:1.02rem}
.art-body blockquote p:last-child{margin-bottom:0}
.art-body .encadre{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:0 0 26px}
.art-body .encadre h3{margin-top:0}
.art-body img{border-radius:14px;margin:0 0 26px}
.art-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* CTA DE FIN D'ARTICLE */
.art-cta{background:var(--navy);border-radius:22px;color:#fff;padding:44px 38px;text-align:center;margin-top:56px;position:relative;overflow:hidden}
.art-cta::before{content:"";position:absolute;top:-90px;left:-50px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(239,110,77,.25),transparent 68%)}
.art-cta h3{font-size:1.6rem;margin-bottom:12px;position:relative}
.art-cta p{color:rgba(255,255,255,.82);margin-bottom:24px;position:relative;font-weight:300}
.art-cta .btn{position:relative}

.back-link{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500;color:var(--ink-soft);margin-top:40px}
.back-link:hover{color:var(--ink)}

/* PIED DE PAGE */
footer{background:var(--paper-2);color:var(--ink-soft);padding:44px 0 36px;border-top:1px solid var(--line);text-align:center;font-size:.88rem}
footer a:hover{color:var(--coral-deep)}
.foot-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:14px 0}

@media(max-width:900px){
  .posts{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:62px;left:4vw;right:4vw;flex-direction:column;background:var(--card);border:1px solid var(--line);padding:22px;border-radius:16px;gap:16px;box-shadow:var(--shadow)}
  .burger{display:flex}.nav-call{display:none}
  .art-cta{padding:34px 24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── MAILLAGE : bloc "À lire aussi" ── */
.aussi{margin-top:52px;padding-top:30px;border-top:1px solid var(--line)}
.aussi h3{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:18px}
.aussi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aussi a{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:transform .2s,box-shadow .2s}
.aussi a:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.aussi .th{width:52px;height:52px;border-radius:9px;flex:0 0 auto;background:linear-gradient(140deg,var(--navy),#1c4363);background-size:cover;background-position:center}
.aussi .tx b{display:block;font-size:.92rem;font-weight:600;line-height:1.3;margin-bottom:3px}
.aussi .tx span{font-size:.76rem;color:var(--ink-soft)}
.aussi .pilier{border-color:rgba(239,110,77,.4);background:var(--coral-ghost)}
.aussi .pilier .tx span{color:var(--coral-deep);font-weight:600}
@media(max-width:700px){.aussi-grid{grid-template-columns:1fr}}