/* Huile de Code : feuille de style commune des pages intérieures (blog, articles, pages légales, merci, 404).
   La page d'accueil garde ses styles dans sa propre balise <style>, avec les mêmes réglages ci-dessous.
   Charte : kraft, ambre, anthracite ; Bricolage Grotesque (titres), Source Sans 3 (texte), Satisfy (mots manuscrits). Mobile d'abord. */

/* Polices hébergées sur le site (aucun appel à Google) */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/source-sans-3.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Satisfy";src:url(/assets/fonts/satisfy.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Réglages de la charte : tout est ici (mêmes valeurs que la page d'accueil) */
  --kraft:#F3ECDF; --blanc:#FFFCF6; --ligne:#E2D7C4; --ligne-forte:#CDBFA8;
  --ambre:#E39B26; --ambre-hover:#D08A16; --ambre-doux:rgba(227,155,38,.55); --ambre-pale:#F6E6C8;
  --anthracite:#25282D; --anthracite-2:#33373D; --ardoise:#5E6168; --clair-sur-fonce:#C3C6CC;
  --bord-champ:#8C8273; --erreur:#A3261B; --succes:#2F6B3A; --fonce-sep:#3A3E45;
  --titre:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --signature:"Satisfy",cursive;
  --r-s:10px; --r-m:16px; --r-l:24px; --r-btn:var(--r-s);
  --ombre:0 1px 0 rgba(37,40,45,.04),0 24px 48px -24px rgba(37,40,45,.28);
  --esp:clamp(56px,7vw,96px);
  --sortie:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .37 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  --goutte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 58'%3E%3Cpath d='M22 0C22 0 44 26 44 36A22 22 0 0 1 0 36C0 26 22 0 22 0Z' fill='%23E39B26'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* Base */
*{box-sizing:border-box}
html{scroll-padding-top:84px;scrollbar-color:var(--bord-champ) var(--kraft);-webkit-tap-highlight-color:rgba(227,155,38,.25)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--kraft) var(--grain);color:var(--anthracite);font-family:var(--texte);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;caret-color:var(--anthracite)}
::selection{background:var(--ambre);color:var(--anthracite)}
img{max-width:100%}
a{color:inherit;text-underline-offset:.22em}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--anthracite);outline-offset:3px;border-radius:4px}
.sur-fonce :focus-visible{outline-color:var(--kraft)}
.in{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
h1,h2,h3{font-family:var(--titre);font-weight:700;letter-spacing:-.025em;text-wrap:balance;margin:0;line-height:1.08}
p{margin:0;text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--anthracite);color:var(--kraft);padding:8px 14px;z-index:30}
.lien{font-weight:700;text-decoration:underline;text-decoration-color:var(--ambre);text-decoration-thickness:2px;transition:text-decoration-color .2s}
.lien:hover{text-decoration-color:currentColor}
.main{font-family:var(--signature);font-weight:400;line-height:1}
/* Informations encore à compléter (mentions légales, dates) */
.ac{background:var(--ambre-pale);border-radius:4px;padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Logo */
.lk{display:inline-flex;align-items:center;text-decoration:none;color:var(--anthracite)}
.lk svg.logo{height:52px;width:auto;flex:none;overflow:visible}
.sur-fonce .lk{color:var(--kraft)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--texte);font-weight:700;font-size:17px;line-height:1.2;padding:15px 22px;min-height:48px;border-radius:var(--r-btn);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,transform .12s}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--ambre);color:var(--anthracite);box-shadow:0 1px 0 rgba(37,40,45,.15),0 10px 20px -12px rgba(176,108,10,.7)}
.btn-p:hover{background:var(--ambre-hover)}
.btn-s{border-color:var(--anthracite);color:var(--anthracite);background:transparent}
.btn-s:hover{background:var(--anthracite);color:var(--kraft)}

/* En-tête */
.top{position:sticky;top:0;z-index:20;background:var(--kraft) var(--grain);border-bottom:1px solid var(--ligne)}
.top .in{display:flex;align-items:center;gap:16px;padding-block:10px}
.menu-btn{margin-left:auto;font:inherit;font-weight:700;font-size:16px;background:transparent;border:2px solid var(--anthracite);border-radius:var(--r-btn);padding:8px 14px;min-height:44px;color:var(--anthracite);cursor:pointer}
.nav{display:none}
.nav.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--kraft);border-bottom:1px solid var(--ligne);flex-direction:column;gap:2px;padding:8px 16px 20px}
.nav a{text-decoration:none;font-weight:600;padding:12px 4px}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ambre);text-decoration-thickness:2px}
.nav .btn{margin-top:8px}
@media (min-width:880px){
  .menu-btn{display:none}
  .nav,.nav.open{display:flex;position:static;flex-direction:row;align-items:center;gap:30px;margin-left:auto;padding:0;border:0;background:transparent}
  .nav a{padding:0}
  .nav .btn{margin:0 0 0 6px;padding:11px 18px;min-height:0;font-size:16px}
}
/* Barre de lecture des articles : l'huile se remplit au fil du texte */
.lecture{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.lecture span{display:block;height:100%;background:var(--ambre);transform-origin:left center;transform:scaleX(0)}

/* Fil d'Ariane */
.fil{font-size:15px;color:var(--ardoise);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.fil a{text-decoration:underline;text-decoration-color:var(--ligne-forte);text-decoration-thickness:1.5px}
.fil a:hover{text-decoration-color:var(--ambre)}

/* Étiquette de thème : sentence case, une goutte devant */
.etiq{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ardoise)}
.etiq::before{content:"";width:10px;height:13px;background:var(--goutte) center/contain no-repeat;flex:none}

/* Tête de page (blog, pages légales) */
.page-tete{padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,44px)}
.page-tete h1{font-size:clamp(36px,5.2vw,58px);letter-spacing:-.035em;margin-top:18px;max-width:18ch}
.page-tete .intro{font-size:clamp(18px,1.6vw,20px);color:var(--ardoise);max-width:56ch;margin-top:18px}

/* ---------- Blog ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filtre{font:inherit;font-weight:700;font-size:16px;background:var(--blanc);border:1.5px solid var(--ligne);color:var(--anthracite);border-radius:999px;padding:9px 18px;min-height:44px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.filtre:hover{border-color:var(--bord-champ)}
.filtre[aria-pressed="true"]{background:var(--anthracite);border-color:var(--anthracite);color:var(--kraft)}
html:not(.js) .filtres{display:none}
.compte{font-size:15px;color:var(--ardoise);margin-top:14px;min-height:1.6em}
.liste{padding-bottom:var(--esp)}
.posts{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:760px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.posts .post.une{grid-column:1/-1}}
.post{position:relative;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .35s,border-color .35s}
.post[hidden]{display:none}
.post:hover{box-shadow:var(--ombre);border-color:var(--ligne-forte)}
.post .img{border-radius:var(--r-m);overflow:hidden;aspect-ratio:1000/325;background:var(--kraft)}
.post img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sortie)}
.post:hover img{transform:scale(1.04)}
.post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14px;font-weight:600;color:var(--ardoise);padding-inline:12px;margin-top:6px}
.post h2,.post h3{font-size:clamp(20px,1.8vw,23px);line-height:1.15;padding-inline:12px}
.post h2 a,.post h3 a{text-decoration:none}
.post h2 a::after,.post h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-l)}
.post:hover h2 a,.post:hover h3 a{text-decoration:underline;text-decoration-color:var(--ambre);text-decoration-thickness:3px}
.post p{color:var(--ardoise);font-size:17px;padding-inline:12px}
.post .date{font-size:14px;color:var(--ardoise);padding-inline:12px;margin-top:auto}
@media (min-width:1000px){
  .post.une{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px 36px;align-items:center;padding:12px 40px 12px 12px}
  .post.une .img{grid-row:1/span 4}
  .post.une .meta,.post.une h2,.post.une p,.post.une .date{padding-inline:0}
  .post.une h2{font-size:clamp(24px,2.4vw,30px)}
  .post.une .date{margin-top:0}
}

/* Bandeau d'appel à l'action (bas du blog) */
.appel{background:var(--anthracite);color:var(--kraft)}
.appel .in{padding-block:clamp(44px,6vw,72px);display:grid;gap:22px;align-items:center}
@media (min-width:880px){.appel .in{grid-template-columns:1fr auto;gap:48px}}
.appel h2{font-size:clamp(28px,3.4vw,40px)}
.appel p{color:var(--clair-sur-fonce);margin-top:10px;max-width:52ch}
.appel .qui{display:flex;align-items:center;gap:14px}
.appel .qui img{width:56px;height:56px;border-radius:50%;flex:none}

/* ---------- Article ---------- */
.art-tete{max-width:640px;margin:0 auto;padding-block:clamp(32px,5vw,60px) clamp(24px,3vw,36px);display:grid;gap:16px;justify-items:start}
.art-tete h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.035em;line-height:1.04}
.chapo{font-size:clamp(19px,1.7vw,21px);line-height:1.55;color:var(--anthracite);max-width:60ch}
.auteur{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ardoise);font-variant-numeric:tabular-nums;margin-top:6px}
.auteur img{width:44px;height:44px;border-radius:50%;flex:none}
.auteur b{color:var(--anthracite)}
.auteur .infos{display:flex;flex-wrap:wrap;gap:0 14px}
.couverture{margin:0 auto;max-width:1104px;border-radius:var(--r-l);overflow:hidden;background:var(--blanc);border:1px solid var(--ligne);box-shadow:var(--ombre)}
.couverture svg,.couverture img{display:block;width:100%;height:auto}
/* En bref */
.bref{max-width:1104px;margin:20px auto clamp(40px,6vw,64px);background:var(--anthracite);color:var(--kraft);border-radius:var(--r-l);padding:clamp(22px,3vw,32px)}
.bref h2{font-size:22px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.bref ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:17px;line-height:1.5;color:var(--clair-sur-fonce)}
@media (min-width:900px){.bref ul{grid-template-columns:repeat(3,1fr);gap:28px}}
.bref li{display:flex;gap:12px;align-items:flex-start}
.bref .goutte{width:14px;height:18px;flex:none;margin-top:3px;background:var(--goutte) center/contain no-repeat}
/* Corps : sommaire à gauche sur grand écran, texte au centre */
.corps{display:grid;gap:40px;justify-content:center;grid-template-columns:minmax(0,640px)}
@media (min-width:1180px){.js .corps{grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr);gap:0}.js .corps .prose{grid-column:2}.js .corps .sommaire{grid-column:1;grid-row:1;justify-self:start;width:100%;max-width:220px;padding-right:24px}}
.sommaire{display:none}
@media (min-width:1180px){
  .js .sommaire{display:block;position:sticky;top:110px;align-self:start;font-size:15px}
  .sommaire p{font-family:var(--titre);font-weight:700;font-size:16px;margin-bottom:10px}
  .sommaire ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--ligne);display:grid}
  .sommaire a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ardoise);text-decoration:none;line-height:1.3;transition:color .2s,border-color .2s}
  .sommaire a:hover{color:var(--anthracite)}
  .sommaire a[aria-current="true"]{color:var(--anthracite);border-left-color:var(--ambre);font-weight:700}
}
.prose{min-width:0;font-size:19px;line-height:1.7}
.prose h2{font-size:clamp(25px,2.6vw,31px);margin:52px 0 14px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 18px}
.prose strong{font-weight:700}
.prose a{text-decoration-color:var(--ambre);text-decoration-thickness:2px}
.prose ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:16px;background:var(--goutte) center/contain no-repeat}
.prose ol{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px;counter-reset:etape}
.prose ol li{position:relative;padding-left:46px;counter-increment:etape}
.prose ol li::before{content:counter(etape);position:absolute;left:0;top:.05em;width:32px;height:32px;border-radius:50%;background:var(--ambre);color:var(--anthracite);font-family:var(--titre);font-weight:700;font-size:16px;display:grid;place-items:center;line-height:1}
/* Exemple : encadré avec la main de Maxime */
.exemple{position:relative;background:var(--ambre-pale);border-radius:var(--r-m);padding:34px 24px 20px;margin:30px 0}
.exemple b{position:absolute;top:-16px;left:18px;font-family:var(--signature);font-weight:400;font-size:28px;line-height:1;transform:rotate(-4deg);background:var(--kraft);padding:2px 10px;border-radius:6px}
.exemple p{margin:0}
/* Sources et date de vérification */
.sources{margin-top:48px;padding:22px 24px;border-radius:var(--r-m);background:var(--blanc);border:1px solid var(--ligne);font-size:16px;line-height:1.55}
.sources h2{font-size:19px;margin:0 0 12px}
.sources ul{gap:8px;margin-bottom:12px}
.sources ul li{padding-left:22px}
.sources ul li::before{width:10px;height:13px;top:.4em}
.sources .maj{font-size:14px;color:var(--ardoise);margin:0}
/* Appel à l'action en fin d'article, avec Maxime */
.cta-art{background:var(--anthracite);color:var(--kraft);border-radius:var(--r-l);padding:clamp(24px,4vw,36px);display:grid;gap:16px;margin:40px 0 0;position:relative}
.cta-art .qui{display:flex;align-items:center;gap:14px}
.cta-art .qui img{width:52px;height:52px;border-radius:50%;flex:none}
.cta-art h2{font-size:clamp(24px,2.6vw,30px);margin:0}
.cta-art p{color:var(--clair-sur-fonce);margin:0;font-size:18px}
.cta-art .btn{justify-self:start}
/* À lire aussi */
.lies{padding-block:var(--esp);margin-top:var(--esp);background:var(--blanc);border-top:1px solid var(--ligne)}
.lies h2{font-size:clamp(26px,3vw,34px);margin-bottom:24px}
.lies .posts .post{background:var(--kraft)}

/* ---------- Pages légales ---------- */
.legal{padding-bottom:var(--esp)}
.legal .col{max-width:760px}
.legal h2{font-size:clamp(23px,2.4vw,28px);margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 14px;max-width:68ch}
.legal ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.legal ul li{position:relative;padding-left:26px}
.legal ul li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:14px;background:var(--goutte) center/contain no-repeat}
.legal a{text-decoration-color:var(--ambre);text-decoration-thickness:2px}
.fiche{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);padding:8px 22px}
.fiche dl{margin:0;display:grid}
.fiche dt{font-size:14px;font-weight:700;color:var(--ardoise);padding-top:14px}
.fiche dd{margin:2px 0 0;padding-bottom:14px;border-bottom:1px solid var(--ligne);overflow-wrap:anywhere}
.fiche dd:last-child{border-bottom:0}
@media (min-width:640px){
  .fiche dl{grid-template-columns:220px 1fr}
  .fiche dt{padding:14px 16px 14px 0;border-bottom:1px solid var(--ligne)}
  .fiche dd{padding:14px 0;margin:0}
  .fiche dt:nth-last-of-type(1){border-bottom:0}
}
.maj{font-size:15px;color:var(--ardoise);margin-top:28px}

.cgv{padding-bottom:var(--esp)}
.cgv .bref{margin-top:0}

/* ---------- Merci ---------- */
.merci{padding-block:clamp(48px,8vw,112px)}
.merci .carte{max-width:720px;margin:0 auto;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-l);box-shadow:var(--ombre);padding:clamp(26px,4vw,48px);display:grid;gap:18px}
.merci h1{font-size:clamp(32px,4.4vw,48px)}
.merci .chapo{color:var(--ardoise)}
.fil-message{display:grid;gap:10px;margin:8px 0 4px}
.bulle{max-width:88%;padding:12px 16px;border-radius:var(--r-m);font-size:16px;line-height:1.45}
.bulle small{display:block;font-size:13px;font-weight:600;margin-top:4px;opacity:.75}
.bulle.client{justify-self:start;background:var(--kraft);border-bottom-left-radius:6px}
.bulle.moi{justify-self:end;background:var(--anthracite);color:var(--kraft);border-bottom-right-radius:6px;display:flex;gap:12px;align-items:flex-end}
.bulle.moi img{width:36px;height:36px;border-radius:50%;flex:none}
.suite{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:6px}

/* ---------- 404 ---------- */
.e404{padding-block:clamp(40px,7vw,96px)}
.e404 .grille{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.e404 .grille{grid-template-columns:1.1fr .9fr;gap:56px}}
.e404 .code{font-family:var(--signature);font-size:clamp(28px,3vw,36px);transform:rotate(-4deg)}
.e404 h1{font-size:clamp(36px,5.2vw,58px);letter-spacing:-.035em}
.e404 .chapo{color:var(--ardoise);max-width:48ch;margin-top:16px}
.e404 .visuel{text-align:center}
.e404 .grand{font-family:var(--titre);font-weight:700;font-size:clamp(120px,17vw,220px);line-height:.9;letter-spacing:-.05em;display:inline-flex;align-items:center;gap:.02em}
.e404 .grand svg{width:.78em;height:.78em;margin-top:.04em}
.e404 .code{display:block;margin:10px auto 0}
.pistes{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:12px}
@media (min-width:640px){.pistes{grid-template-columns:repeat(3,1fr)}}
.pistes a{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;height:100%;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-m);padding:16px 18px;text-decoration:none;transition:border-color .2s,box-shadow .3s}
.pistes a:hover{border-color:var(--ambre);box-shadow:var(--ombre)}
.pistes .ic{width:44px;height:44px;border-radius:50%;background:var(--ambre-pale);display:grid;place-items:center;grid-row:span 2}
.pistes .ic svg{width:22px;height:22px;fill:none;stroke:var(--anthracite);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pistes b{font-family:var(--titre);font-size:19px}
.pistes small{font-size:15px;color:var(--ardoise)}

/* ---------- Pied de page ---------- */
.foot{background:var(--anthracite);color:var(--clair-sur-fonce);border-top:1px solid var(--fonce-sep);font-size:16px}
.foot .in{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;padding-block:36px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 24px}
.foot a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{text-decoration:underline;color:var(--kraft)}
.foot .lk svg.logo{height:48px}
.pied-fin{display:flex;align-items:center;gap:16px}
.pied-in{width:44px;height:44px;justify-content:center;border-radius:50%;background:var(--anthracite-2);transition:background-color .2s}
.pied-in:hover{background:var(--ambre)}
.pied-in svg{width:20px;height:20px;fill:var(--kraft)}
.pied-in:hover svg{fill:var(--anthracite)}

@media (prefers-reduced-motion:reduce){.post img,.btn,.lecture span{transition:none}.post:hover img{transform:none}.btn:active{transform:none}}