/* Natasha V2 (portfolio + blog), 26/10/2026. Identité de la V1 (Inter Tight, Ms Madi, jaune beurre, vert forêt), plus sobre :
   pas d'animation décorative, un seul accent (beurre), photos à angles doux (8 px), boutons pilule. Thème clair uniquement. */
@font-face{font-family:"Inter Tight";src:url(../maquettes/natasha/fonts/intertight.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../maquettes/natasha/fonts/intertight-i.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Ms Madi";src:url(../maquettes/natasha/fonts/msmadi.woff2) format("woff2");font-display:swap}
:root{color-scheme:only light;
  --paper:#FAFAF6;--mist:#EDF0E8;--butter:#FCF8C0;--butter-2:#F3E37A;--ink:#141A16;--ink-2:#47524A;--leaf:#16291C;--line:rgba(20,26,22,.12);
  --r:8px;--r-card:16px;--ease:cubic-bezier(.16,1,.3,1);--g:clamp(16px,4vw,48px);--nav:68px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
figure{margin:0}
a{color:inherit}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--g);padding-right:var(--g)}
.etroit{max-width:760px}
.ico{width:1.05em;height:1.05em;flex:none;fill:currentColor}
.main{font-family:"Ms Madi",cursive;font-weight:400;line-height:1.2;font-size-adjust:.42}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-focus:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
/* titres : minuscules serrées, comme ses publications */
.t{font-weight:700;letter-spacing:-.045em;line-height:1;margin:0;text-wrap:balance}
.t-xl{font-size:clamp(2.5rem,6.2vw,5rem)}
.t-l{font-size:clamp(1.9rem,4vw,3.1rem)}
.t-m{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.t-s{font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:-.025em;line-height:1.15}
.lede{font-size:clamp(1.05rem,1.35vw,1.2rem);color:var(--ink-2);max-width:60ch;line-height:1.6;margin-top:18px}
.mt{margin-top:40px}
/* boutons */
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.7em 1.3em;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:600;font-size:1rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:transform .3s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn--clair{background:transparent;color:var(--ink)}
.btn--clair:hover{background:var(--ink);color:var(--paper)}
.lien-fleche{display:inline-flex;align-items:center;gap:.45em;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.lien-fleche .ico{transition:transform .3s var(--ease)}
.lien-fleche:hover .ico{transform:translateX(3px)}
/* ───── navigation (le même menu sur ordinateur et dans le burger) */
.nav{position:sticky;top:0;z-index:40;background:rgba(250,250,246,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:24px;height:var(--nav)}
.nav__marque{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin-right:auto;min-width:0}
.wm{height:22px;width:auto}
.nav__base{font-size:1.05rem;color:var(--ink-2);white-space:nowrap}
.nav__liens{display:flex;gap:4px}
.nav__liens a{padding:.45em .85em;border-radius:999px;text-decoration:none;font-weight:500;font-size:.98rem}
.nav__liens a:hover{background:rgba(20,26,22,.06)}
.nav__liens a[aria-current="page"]{background:var(--butter)}
.burger{display:none;width:46px;height:46px;border:0;border-radius:50%;background:transparent;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}
.panneau{position:fixed;inset:var(--nav) 0 0 0;background:var(--paper);padding:24px var(--g) 40px;display:flex;flex-direction:column;gap:24px;overflow-y:auto}
.panneau[hidden]{display:none}
.panneau nav{display:flex;flex-direction:column}
.panneau nav a{padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:1.6rem;font-weight:700;letter-spacing:-.04em}
.panneau nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--butter-2);text-decoration-thickness:6px;text-underline-offset:4px}
.panneau .btn{align-self:flex-start}
body.menu-ouvert{overflow:hidden}
/* menu ouvert : sans flou, sinon le flou de la barre capture le panneau fixe (il ne faisait que la hauteur de la barre) */
body.menu-ouvert .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
@media (max-width:860px){.nav__liens{display:none}.burger{display:block}}
@media (max-width:420px){.nav__base{display:none}}
/* ───── sections */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec--serre{padding-top:clamp(24px,4vw,48px)}
.sec--brume{background:var(--mist)}
.sec--beurre{background:var(--butter)}
.tete{display:grid;gap:12px;margin-bottom:36px;max-width:760px}
.tete__txt{color:var(--ink-2);font-size:.98rem;margin-top:8px}
.tete--ligne{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;max-width:none}
.suite{margin-top:32px}
.suite--g{margin-top:24px}
.page-tete{padding:clamp(28px,5vw,64px) 0 clamp(8px,2vw,16px)}
/* ───── accueil : héros */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px)}
.hero__grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero__salut{font-size:clamp(1.5rem,2.3vw,2rem);color:var(--ink-2);margin-bottom:10px}
.hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card)}
@media (max-width:860px){.hero__grille{grid-template-columns:minmax(0,1fr)}.hero__photo img{aspect-ratio:4/3}}
/* ───── vidéos (travaux) */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.videos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.video__cadre{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--leaf);aspect-ratio:9/16}
.video__cadre video{width:100%;height:100%;object-fit:cover}
.son{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,26,22,.62);color:#fff;display:grid;place-items:center}
.son .ico{width:20px;height:20px;grid-area:1/1}
.son .ico:last-child{display:none}.son[aria-pressed="true"] .ico:first-child{display:none}.son[aria-pressed="true"] .ico:last-child{display:block}
.video figcaption{padding-top:14px}
.video__vues{font-weight:700;font-size:1.25rem;letter-spacing:-.03em}
.video h3{margin:4px 0 6px;font-size:1.05rem;letter-spacing:-.02em;line-height:1.25}
.video figcaption p{font-size:.95rem;color:var(--ink-2);line-height:1.5}
.video__det{margin-top:6px;font-size:.88rem!important}
.video__lien{display:inline-flex;align-items:center;gap:.35em;margin-top:8px;font-size:.9rem;font-weight:600}
@media (max-width:1000px){.videos--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .videos,.videos--4{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(72vw,300px);overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(var(--g) * -1);padding:0 var(--g) 8px;scroll-padding-inline:var(--g);scrollbar-width:none}
  .videos::-webkit-scrollbar{display:none}
  .video{scroll-snap-align:start}
}
/* ───── à propos */
.apropos{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.apropos__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card)}
.apropos--page{align-items:start}
@media (max-width:860px){.apropos{grid-template-columns:minmax(0,1fr)}.apropos__photo{max-width:520px}}
.prose{margin-top:20px}
.prose>*+*{margin-top:1.05em}
.prose p{max-width:66ch}
.faits{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.faits li{padding-left:22px;position:relative}
.faits li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--butter-2);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* ───── cartes d'articles */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px)}
.carte{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:0 1px 0 var(--line);transition:transform .35s var(--ease)}
.carte:hover{transform:translateY(-3px)}
.carte__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.carte__t{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.carte__cat{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.carte h2,.carte h3{margin:0;font-size:1.25rem;letter-spacing:-.03em;line-height:1.2}
.carte h2 a,.carte h3 a{text-decoration:none}
.carte h2 a:hover,.carte h3 a:hover{text-decoration:underline}
.carte__t>p:not(.carte__cat):not(.carte__meta){color:var(--ink-2);font-size:.95rem;line-height:1.5}
.carte__meta{margin-top:auto;padding-top:6px;font-size:.85rem;color:var(--ink-2)}
@media (max-width:980px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cartes{grid-template-columns:minmax(0,1fr)}}
/* ───── travailler ensemble, chiffres, puces */
.collab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.collab{grid-template-columns:minmax(0,1fr)}}
.chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.chiffres div{background:var(--paper);border-radius:var(--r-card);padding:18px 20px;display:flex;flex-direction:column-reverse;gap:6px}
.chiffres dd{margin:0;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:700;letter-spacing:-.05em;line-height:1}
.chiffres dt{font-size:.9rem;color:var(--ink-2);line-height:1.35}
.sec--brume .chiffres div,.sec:not(.sec--beurre):not(.sec--brume) .chiffres div{background:var(--mist)}
.chiffres__date{margin-top:10px;font-size:.85rem;color:var(--ink-2)}
.puces{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.puces li{padding:.4em .9em;border-radius:999px;background:rgba(20,26,22,.06);font-size:.92rem;font-weight:500}
.sec--beurre .puces li{background:var(--paper)}
.puces--grandes li{font-size:1rem;padding:.55em 1.05em}
.collabs{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
/* ───── portfolio */
.photos{columns:3 260px;column-gap:14px}
.photos figure{break-inside:avoid;margin-bottom:14px}
.photos img{width:100%;border-radius:var(--r)}
.resultats{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:start}
.resultats .tableau{margin-top:20px}
@media (max-width:900px){.resultats{grid-template-columns:minmax(0,1fr)}}
.appel{text-align:center;display:flex;flex-direction:column;align-items:center}
.appel .lede{margin-left:auto;margin-right:auto}
.appel .btn{margin-top:28px}
/* ───── tableaux (budgets, résultats) */
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.tableau table{border-collapse:collapse;width:100%;font-size:.95rem}
.tableau th,.tableau td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tableau thead th{font-size:.82rem;color:var(--ink-2);font-weight:600;background:var(--mist)}
.tableau tbody tr:last-child th,.tableau tbody tr:last-child td{border-bottom:0}
.tableau tbody th{font-weight:600}
/* ───── blog : liste et onglets */
.onglets{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.onglets a{padding:.5em 1em;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:500;font-size:.95rem}
.onglets a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.vide{color:var(--ink-2)}
/* ───── article */
.ariane ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:.85rem;color:var(--ink-2)}
.ariane li+li::before{content:"/";margin-right:8px;color:rgba(20,26,22,.3)}
.ariane a{text-decoration:none}.ariane a:hover{text-decoration:underline}
.article__tete{padding-top:clamp(24px,4vw,56px)}
.article__cat a{font-size:.85rem;font-weight:600;text-decoration:none;background:var(--butter);padding:.3em .8em;border-radius:999px;display:inline-block;margin-bottom:14px}
.article__meta{margin-top:18px;font-size:.92rem;color:var(--ink-2)}
.article__couv{margin-top:clamp(24px,4vw,40px);max-width:1080px}
.article__couv img{display:block;width:auto;max-width:100%;height:auto;max-height:640px;margin-inline:auto;object-fit:cover;border-radius:var(--r-card)}   /* jamais agrandie (petites photos) */
.sommaire{margin:36px 0 0;padding:18px 22px;background:var(--mist);border-radius:var(--r-card)}
.sommaire p{font-weight:700;font-size:.95rem}
.sommaire ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:.95rem}
.prose--article{margin-top:36px;font-size:1.06rem;line-height:1.75}
.prose--article h2{font-size:clamp(1.45rem,2.4vw,1.9rem);letter-spacing:-.035em;line-height:1.15;margin-top:2em}
.prose--article h3{font-size:1.2rem;letter-spacing:-.02em;margin-top:1.6em}
.prose--article ul,.prose--article ol{padding-left:1.3em}
.prose--article li+li{margin-top:.35em}
.prose--article a{text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose--article blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:4px solid var(--butter-2);font-size:1.15rem;font-weight:500;letter-spacing:-.015em}
.prose--article hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose--article figure img{width:100%;border-radius:var(--r)}
.prose--article figcaption{margin-top:8px;font-size:.88rem;color:var(--ink-2)}
.galerie{display:grid;gap:10px}
.galerie--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerie--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.galerie img{aspect-ratio:1/1;object-fit:cover}
@media (max-width:560px){.galerie--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.auteur{display:flex;gap:16px;align-items:center;margin:56px 0 0;padding:20px 22px;border-radius:var(--r-card);background:#fff;box-shadow:0 1px 0 var(--line)}
.auteur img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.auteur__nom{font-weight:700}
.auteur p{font-size:.95rem;color:var(--ink-2)}
.auteur__liens{margin-top:4px}
/* ───── contact */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:18px;max-width:620px}
.champ{display:grid;gap:6px}
.champ label{font-weight:600;font-size:.95rem}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid rgba(20,26,22,.28);border-radius:var(--r);padding:12px 14px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--butter-2)}
.champ--piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}
.form__err{background:#FDECEA;color:#8A1F11;border-radius:var(--r);padding:12px 14px;font-weight:500}
.form__note{font-size:.88rem;color:var(--ink-2)}
.merci{background:var(--butter);border-radius:var(--r-card);padding:24px 26px;font-size:1.1rem;font-weight:500}
.contact__ig{background:var(--mist);border-radius:var(--r-card);padding:22px 24px;display:grid;gap:14px;justify-items:start}
/* ───── pied de page */
.pied{background:var(--leaf);color:var(--butter);padding:clamp(48px,7vw,80px) 0 28px;margin-top:0}
.pied a{color:var(--butter);text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied__grille{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.pied .wm{height:30px}
.pied__texte{margin-top:14px;max-width:38ch;color:rgba(252,248,192,.82)}
.pied nav{display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.pied__t{font-weight:700;margin-bottom:4px}
.pied__bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid rgba(252,248,192,.2);font-size:.88rem;color:rgba(252,248,192,.75)}
@media (max-width:760px){.pied__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pied__grille>div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}