/* Brefgo — design d'origine (ex-ialanews) (Next.js + Tailwind) transposé en CSS natif. */
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;font-display:block;src:url(/static/material-symbols.woff2)format("woff2")}
:root{
  --surface:#fff9e8;--surface-container:#f4eedb;--surface-container-high:#eee8d5;--white:#fff;
  --ink:#1e1c11;--ink-variant:#4e462a;--outline:#807757;--outline-variant:#d2c6a1;
  --primary:#705d00;--primary-container:#ffe170;--on-primary-container:#544600;
  --secondary:#00658d;--secondary-container:#c6e7ff;--on-secondary-container:#004c6b;
  --tertiary:#b81d27;--tertiary-container:#ffdad7;--on-tertiary-container:#930015;
  --headline:'Plus Jakarta Sans',Arial,sans-serif;--body:'Be Vietnam Pro',Arial,sans-serif;
  --r-sm:.5rem;--r-md:1.5rem;--r-lg:2rem;--r-xl:3rem;
  --shadow:0 12px 0 0 var(--ink);--shadow-sm:0 6px 0 0 var(--ink);
  /* Alias conservés pour l'atelier. */
  --paper:var(--surface);--yellow:var(--primary-container);--blue:var(--secondary-container);--pink:var(--tertiary-container);--muted:var(--ink-variant);--line:var(--outline-variant)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:var(--headline);font-weight:800;margin:0;line-height:1.2}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
:focus-visible{outline:3px solid var(--secondary);outline-offset:4px}
.icon{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none}
.icon.filled{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.skip{position:absolute;top:-100px;left:20px;background:var(--primary-container);padding:15px;z-index:100;border:2px solid var(--ink);border-radius:var(--r-sm)}
.skip:focus{top:10px}
.sr-only,.honey{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* En-tête */
.header{position:sticky;top:0;z-index:50;width:100%;border-bottom:4px solid rgba(210,198,161,.4);box-shadow:0 8px 0 0 rgba(30,28,17,.15);transition:transform .3s}
/* Le flou vit sur un pseudo-élément : sur l'en-tête, il piégerait le menu mobile en position fixe. */
.header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,249,232,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.header.hidden{transform:translateY(-100%)}
.header-inner{max-width:72rem;margin:0 auto;padding:0 24px;height:80px;display:flex;align-items:center;justify-content:space-between}
.header-left{display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--headline);font-weight:800;font-size:24px;letter-spacing:-.05em;color:var(--ink)}
/* Logo : au survol, les deux points tournent de plus en plus vite et se rejoignent ; ils se séparent en douceur au départ du pointeur. */
.logo{width:32px;height:32px;fill:currentColor;overflow:visible}
.logo-orbit{transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.logo .dot{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.brand:hover .logo-orbit,.brand:focus-visible .logo-orbit{transform:rotate(1440deg);transition:transform 1.6s cubic-bezier(.55,0,1,.45)}
.brand:hover .dot,.brand:focus-visible .dot{transition:transform 1.6s cubic-bezier(.7,0,1,.6)}
.brand:hover .dot-a,.brand:focus-visible .dot-a{transform:translateX(32px)}
.brand:hover .dot-b,.brand:focus-visible .dot-b{transform:translateX(-32px)}
.nav{display:flex;gap:24px;align-items:center}
.nav a{font-family:var(--headline);font-weight:700;letter-spacing:-.025em;color:var(--ink-variant);transition:all .2s}
.nav a:hover{color:var(--primary);transform:scale(1.05)}
.nav a[aria-current=page]{color:var(--primary);border-bottom:4px solid var(--primary);padding-bottom:4px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;border:0;border-radius:var(--r-md);font-weight:900;padding:10px 20px;box-shadow:0 4px 0 0 #544600;transition:transform .2s}
.btn-primary:hover{transform:scale(1.05)}
.btn-primary:active{transform:scale(.95)}
.menu{display:none}
.menu summary{list-style:none;padding:8px;display:flex;cursor:pointer;position:relative;z-index:61}
.menu summary::-webkit-details-marker{display:none}
.menu summary .close,.menu[open] summary .open{display:none}
.menu[open] summary .close{display:inline-block}
.menu-panel{position:fixed;inset:0;z-index:60;background:var(--surface);display:flex;flex-direction:column}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 24px;border-bottom:4px solid rgba(210,198,161,.4)}
.menu-links{flex:1;display:flex;flex-direction:column;gap:8px;padding:32px 24px 0}
.menu-links a{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-lg);font-weight:900;font-size:18px;transition:background .2s}
.menu-links a:hover{background:var(--surface-container)}
.menu-links a[aria-current=page]{background:var(--primary-container);color:var(--on-primary-container);box-shadow:0 4px 0 0 rgba(112,93,0,.3)}
.menu-links .icon{font-size:28px}
.menu-bottom{padding:0 24px 32px}
.menu-bottom .btn-primary{width:100%;padding:16px 20px;font-size:18px}
.menu[open] summary{position:fixed;top:16px;right:16px}

/* Mise en page */
.main{max-width:72rem;margin:0 auto;padding:48px 24px 0;display:flex;flex-direction:column;gap:80px}
.main.narrow{max-width:48rem;gap:0;padding-bottom:80px}
.center{text-align:center}

/* Accueil : hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
.badge{display:inline-block;padding:8px 24px;border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);background:var(--secondary-container);color:var(--on-secondary-container);transform:rotate(-2deg);transition:transform .2s}
a.badge:hover{transform:scale(1.1) rotate(0)}
a.badge:active{transform:scale(.95)}
.badge.pink{background:var(--tertiary-container);color:var(--on-tertiary-container);transform:rotate(1deg)}
.badge.yellow{background:var(--primary-container);color:var(--on-primary-container)}
.hero h1{font-size:96px;font-weight:800;letter-spacing:-.05em;line-height:1;max-width:56rem;text-transform:uppercase}
.hero h1 em{color:var(--primary);text-decoration:underline;text-decoration-color:var(--primary-container);text-decoration-thickness:8px}
.lede{font-size:24px;color:var(--ink-variant);max-width:42rem;font-weight:500;line-height:1.625}

/* Barre d'inscription */
.subscribe-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.subscribe-bar{display:flex;align-items:stretch;background:#fff;border-radius:var(--r-xl);border:3px solid var(--ink);box-shadow:var(--shadow-sm);transition:all .2s}
.subscribe-bar:hover{box-shadow:0 4px 0 0 var(--ink);transform:translateY(2px)}
.subscribe-bar input{background:transparent;border:0;border-radius:var(--r-xl) 0 0 var(--r-xl);padding:14px 24px;font-size:16px;font-weight:500;width:288px;min-width:0}
.subscribe-bar input:focus{outline:none}
.subscribe-bar input::placeholder{color:rgba(78,70,42,.5)}
.subscribe-bar button{background:var(--ink);color:var(--surface);padding:14px 28px;border:0;border-left:3px solid var(--ink);border-radius:0 var(--r-lg) var(--r-lg) 0;font-weight:900;font-size:18px;white-space:nowrap;transition:all .2s}
.subscribe-bar button:hover{background:var(--primary)}
.subscribe-bar button:active{transform:scale(.95)}
.subscribe-message{font-size:14px;font-weight:700;color:var(--tertiary);min-height:1em}
.subscribe-message:empty{display:none}
.subscribe-success{display:flex;align-items:center;gap:12px;background:var(--primary);color:#fff;padding:16px 32px;border-radius:var(--r-xl);border:3px solid var(--ink);box-shadow:var(--shadow-sm);font-weight:900;font-size:18px;animation:fadeInUp .5s ease-out}
.subscribe-note{font-size:12px;color:var(--ink-variant);opacity:.8}
.subscribe-note a{text-decoration:underline}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}

/* Titres de section et jours */
.section{display:flex;flex-direction:column;gap:32px}
.day-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.day-heading h2{font-size:30px;font-weight:800;letter-spacing:-.025em}
.day-heading h2::first-letter,.date-chip::first-letter,.card-side time::first-letter{text-transform:uppercase}
.day-heading h2 a:hover{color:var(--primary)}
.page-hero h1.day-title::first-letter{text-transform:uppercase}
.day-heading .count{font-size:14px;font-weight:700;color:var(--ink-variant);background:rgba(244,238,219,.8);padding:4px 12px;border-radius:999px}
.day-heading .rule{flex:1;height:4px;border-radius:4px;background:rgba(210,198,161,.4);min-width:40px}
.day-heading .more-link{display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:14px;color:var(--primary)}
.day-heading .more-link:hover .icon{transform:translateX(4px)}
.day-heading .icon{transition:transform .2s;font-size:18px}

/* Grille bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.bento-main{grid-column:span 7}
.bento-side{grid-column:span 5;display:flex;flex-direction:column;gap:32px}
.card-large{display:flex;flex-direction:column;height:100%;background:#fff;border:4px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.card-large:hover{transform:translateY(-4px)}
.card-large .media{aspect-ratio:16/9;overflow:hidden;background:var(--primary-container);display:flex;align-items:center;justify-content:center}
.card-large .media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.card-large .media .icon{font-size:96px;color:var(--primary)}
.card-large .body{display:flex;flex-direction:column;gap:16px;flex:1;padding:32px}
.date-chip{align-self:flex-start;display:inline-block;font-size:14px;font-weight:700;color:var(--ink-variant);background:rgba(244,238,219,.8);padding:4px 12px;border-radius:999px}
.card-large h2,.card-large h3{font-size:30px;font-weight:800}
.card-large p{font-size:18px;color:var(--ink-variant)}
.read-more{text-align:right;padding-top:8px}
.read-more span{display:inline-block;background:var(--primary-container);border:2px solid var(--primary);color:var(--primary);font-weight:900;padding:12px 32px;border-radius:999px;box-shadow:0 6px 0 0 var(--primary)}
.life{flex:1;position:relative;overflow:hidden;min-height:48px}
.life canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card-side{flex:1;transition:transform .2s}
.card-side:hover{transform:rotate(0)!important}
.card-side.tilt-right,.card-link.tilt-right{transform:rotate(1deg)}
.card-side.tilt-left,.card-link.tilt-left{transform:rotate(-1deg)}
.card-side>a{display:block;height:100%;border:4px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.card-side .media{height:160px;overflow:hidden;position:relative}
.card-side .media img{width:100%;height:100%;object-fit:cover}
.card-side .icon-wrap{padding:32px 32px 0}
.card-side .icon-wrap .icon{font-size:36px}
.card-side .content{padding:8px 32px 32px}
.card-side time{display:inline-block;font-size:12px;font-weight:700;color:var(--ink-variant);margin-bottom:8px}
.card-side h3{font-size:24px;font-weight:800;margin-bottom:8px}
.card-side p{font-weight:500}
.card-side.placeholder{opacity:.4;border:4px solid var(--ink);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow)}
.tone-pink{background:var(--tertiary-container)}
.tone-pink p{color:var(--on-tertiary-container)}
.tone-pink .icon{color:var(--tertiary)}
.tone-blue{background:var(--secondary-container)}
.tone-blue p{color:var(--on-secondary-container)}
.tone-blue .icon{color:var(--secondary)}
.tone-yellow{background:var(--primary-container)}
.tone-yellow .icon{color:var(--primary)}
.card-link.tone-pink .read{color:var(--tertiary)}
.card-link.tone-blue .read{color:var(--secondary)}
.card-link.tone-yellow .read{color:var(--primary)}

/* Cartes du fil */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.home-more{display:flex;flex-direction:column;gap:32px}
.home-more .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-feed-footer{display:flex;align-items:center;justify-content:flex-end}
.home-feed-link{display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:10px 20px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);font-weight:800;box-shadow:0 3px 0 var(--ink);transition:background .2s}
.home-feed-link:hover{background:var(--primary-container)}
.home-feed-link .icon{color:var(--primary);transition:transform .2s}
.home-feed-link:hover .icon{transform:translateX(4px)}
.card-link{transition:transform .2s}
.card-link:hover{transform:translateY(-8px) rotate(0)!important}
.card-link>a{display:block;height:100%;border:4px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.card-link .media{aspect-ratio:16/9;overflow:hidden}
.card-link .media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card-link:hover .media img{transform:scale(1.05)}
.card-link .icon-block{display:flex;align-items:center;justify-content:center;padding:32px 0}
.card-link .icon-block .icon{font-size:60px}
.card-link .content{padding:24px}
.card-link time{font-size:14px;font-weight:700;color:var(--ink-variant)}
.card-link h2,.card-link h3{font-size:24px;font-weight:800;margin:4px 0 12px;transition:color .2s}
.card-link:hover h2,.card-link:hover h3{color:var(--primary)}
.card-link p{color:var(--ink-variant);font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-link .read{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:14px}
.card-link .read .icon{font-size:18px;transition:transform .2s}
.card-link:hover .read .icon{transform:translateX(4px)}

/* États vides */
.empty-card{background:#fff;border:4px solid var(--ink);border-radius:var(--r-lg);padding:48px;text-align:center;box-shadow:var(--shadow)}
.empty-card .icon{font-size:60px;color:var(--ink-variant);display:block;margin:0 auto 16px}
.empty-card p{font-size:20px;font-weight:700;color:var(--ink-variant)}
.empty{text-align:center;padding:80px 0}
.empty .icon{font-size:96px;color:var(--outline-variant);display:block;margin:0 auto 24px}
.empty p{font-size:24px;font-weight:700;color:var(--ink-variant)}

/* Pourquoi Brefgo */
.why{display:flex;flex-direction:column;gap:48px}
.why h2{font-size:36px;text-align:center}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:42rem;margin:0 auto;width:100%}
.why-item{text-align:center;display:flex;flex-direction:column;gap:16px}
.why-icon{width:80px;height:80px;background:var(--surface-container-high);border-radius:var(--r-lg);border:2px solid var(--ink);margin:0 auto;display:flex;align-items:center;justify-content:center}
.why-icon .icon{font-size:36px}
.why-icon.tilt-a{transform:rotate(-6deg)}
.why-icon.tilt-b{transform:rotate(12deg)}
.c-primary{color:var(--primary)}
.c-secondary{color:var(--secondary)}
.c-tertiary{color:var(--tertiary)}
.why-item h3{font-size:24px}
.why-item p{color:var(--ink-variant);padding:0 16px}

/* Page du fil */
.page-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.page-hero h1{font-size:72px;font-weight:800;letter-spacing:-.05em;line-height:1}
.page-hero p{font-size:20px;color:var(--ink-variant);max-width:36rem;font-weight:500}
.pagination{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.fil{display:flex;flex-direction:column;gap:64px;padding-bottom:80px}

/* Article */
.article-page{max-width:64rem;margin:0 auto;padding:32px 0 0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-right:12px;color:var(--primary);font-weight:700;margin:-10px 0 14px max(24px,calc((100% - 52rem)/2 + 24px));transition:transform .2s}
.back:hover{transform:scale(1.05)}
/* L'article se lit directement sur le fond crème, sans carte, sur tous les écrans. */
.article{max-width:52rem;margin:0 auto}
.article-header{display:flex;flex-direction:column;gap:12px;padding:0 24px}
.article-header h1{font-size:48px;font-weight:800;line-height:1.25}
.article-header .excerpt{font-size:20px;color:var(--ink-variant);font-style:italic;border-left:4px solid var(--primary);padding-left:16px}
.article-date{align-self:flex-end;text-align:right;color:var(--ink-variant);font-weight:500}
.article-cover{margin:24px 24px 0}
.article-cover img{width:100%;border-radius:var(--r-lg);object-fit:cover}
.article-cover figcaption{font-size:12px;color:var(--ink-variant);text-align:right;padding-top:6px}
.markdown{font-size:18px;line-height:1.625;padding:32px 24px 32px;color:var(--ink)}
.markdown h1{font-size:36px;margin:32px 0 16px}
.markdown h2{font-size:30px;margin:28px 0 12px}
.markdown h3{font-size:24px;font-weight:700;margin:24px 0 8px}
.markdown h4{font-size:20px;font-weight:700;margin:20px 0 8px}
.markdown p{margin-bottom:16px}
.markdown strong{font-weight:900}
.markdown em{color:var(--ink-variant)}
.markdown ul,.markdown ol{padding-left:24px;margin:0 0 16px}
.markdown li{margin-bottom:4px}
.markdown blockquote{border-left:4px solid var(--primary);padding-left:16px;font-style:italic;color:var(--ink-variant);margin:16px 0}
.markdown code{background:var(--surface-container);padding:2px 6px;border-radius:4px;font-size:14px}
.markdown pre code{display:block;padding:16px;border-radius:var(--r-sm);overflow-x:auto}
.markdown hr{border:0;border-top:2px solid var(--outline-variant);margin:32px 0}
.markdown a,.sources a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.markdown img{border-radius:var(--r-md);margin:16px 0}
.sources{margin-top:24px;padding-top:16px;border-top:2px solid var(--outline-variant);display:flex;flex-direction:column;gap:8px}
.sources h3,.sources h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0;color:var(--ink-variant)}
.sources a{font-size:14px;display:inline-flex;align-items:center;min-height:32px}
.article-video{margin:24px 24px 0;display:flex;justify-content:center}
.article-video video{width:100%;max-width:420px;aspect-ratio:9/16;height:auto;background:var(--ink);border-radius:var(--r-lg);display:block;cursor:pointer}
.article-summary{margin:32px 24px 0;padding:16px 24px;background:var(--surface-container);border-radius:var(--r-md);display:flex;flex-direction:column;gap:6px}
.article-summary strong{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:900}
.article-summary a{font-weight:700;color:var(--primary)}
.briefs{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:0 24px 48px}
.briefs-title{padding:0 24px 24px;display:flex;align-items:center;gap:12px}
.briefs-title h2{font-size:30px}
.brief{border:4px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 0 0 var(--ink)}
.brief .media{height:180px;overflow:hidden;border-bottom:4px solid var(--ink)}
.brief .media img{width:100%;height:100%;object-fit:cover}
.brief .metric{display:flex;align-items:center;justify-content:center;height:140px;border-bottom:4px solid var(--ink);font-family:var(--headline);font-size:48px;font-weight:800;padding:0 16px;text-align:center}
.brief .content{padding:24px}
.brief .topic{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.brief h3{font-size:24px;margin:8px 0 12px}
.brief .text p{margin-bottom:12px;font-weight:500}
.brief small{display:block;font-size:12px;opacity:.7}
.layout-panorama .briefs,.layout-focus .briefs{grid-template-columns:1fr}
.layout-panorama .brief{display:grid;grid-template-columns:35% 1fr}
.layout-panorama .brief .media,.layout-panorama .brief .metric{height:100%;min-height:200px;border-bottom:0;border-right:4px solid var(--ink)}
.layout-focus .brief .media{height:320px}
.article-actions{padding:0 24px 24px;display:flex;justify-content:flex-end;gap:12px}
.share{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--surface-container);border:2px solid var(--outline-variant);color:var(--ink);box-shadow:0 4px 0 0 rgba(30,28,17,.2);transition:all .2s}
.share:hover{transform:scale(1.05);background:var(--secondary-container);color:var(--secondary);border-color:var(--secondary)}
.share svg{width:20px;height:20px}
.after-article{padding:64px 24px 0;display:flex;flex-direction:column;gap:64px}
.subscribe-card{background:var(--primary-container);border:4px solid var(--ink);border-radius:var(--r-lg);padding:48px 32px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.subscribe-card h2{font-size:36px;letter-spacing:-.025em}
.subscribe-card p{font-size:18px;color:var(--on-primary-container);font-weight:500}
.preview-banner{margin:0 24px 24px;background:var(--primary-container);padding:16px;border:2px solid var(--ink);border-radius:var(--r-sm);font-size:14px;font-weight:700}
.preview-banner a{text-decoration:underline}

/* 404 et messages */
.status-page{max-width:48rem;margin:0 auto;padding:48px 24px 160px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:32px}
.status-page>.icon{font-size:128px;color:var(--outline-variant)}
.status-page h1{font-size:72px;font-weight:800}
.status-page.message h1{font-size:48px}
.status-page p{font-size:20px;color:var(--ink-variant);font-weight:500;max-width:28rem}
.btn-block{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;background:var(--primary);color:#fff;font-weight:900;border-radius:var(--r-lg);border:4px solid var(--ink);box-shadow:var(--shadow-sm);transition:all .2s}
.btn-block:hover{transform:translateY(-4px);box-shadow:0 8px 0 0 var(--ink)}
.btn-block:active{transform:none;box-shadow:none}
.btn-block.light{background:#fff;color:var(--ink)}

/* Pages d'information */
.info h1{font-size:36px;margin-bottom:40px}
.info .prose{display:flex;flex-direction:column;gap:24px;color:var(--ink-variant);line-height:1.625}
.info .prose h2{font-size:24px;color:var(--ink);padding-top:16px}
.info .prose a{color:var(--primary);font-weight:700}
.info .prose a:hover{text-decoration:underline}
.info .prose strong{color:var(--ink)}
.info .lead-text{font-size:18px}
.founder-quote{margin:8px 0;background:#fff;border:4px solid var(--ink);border-radius:var(--r-lg);padding:32px;box-shadow:0 8px 0 0 var(--ink);transform:rotate(-.6deg)}
.founder-quote p{font-family:var(--headline);font-weight:800;font-size:24px;line-height:1.35;color:var(--ink)}
.founder-quote footer{margin-top:16px;font-size:14px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:12px}
.founder-quote footer::before{content:"";width:40px;height:4px;border-radius:4px;background:var(--primary-container)}
.contact-card{background:#fff;border:4px solid var(--ink);border-radius:var(--r-lg);padding:32px;box-shadow:0 8px 0 0 var(--ink);display:flex;flex-direction:column;gap:24px}
.contact-row{display:flex;align-items:center;gap:16px}
.contact-row .square{width:48px;height:48px;border-radius:var(--r-sm);background:var(--primary-container);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.contact-row .square svg{width:24px;height:24px}
.contact-row p{font-family:var(--headline);font-weight:800;color:var(--ink)}

/* Pied de page */
.footer{background:var(--ink);margin-top:32px;border-radius:16px 16px 0 0;border-top:4px solid var(--ink)}
.footer-inner{max-width:72rem;margin:0 auto;padding:40px 24px}
.footer-cols{display:flex;align-items:flex-start;gap:64px}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-brand span{font-family:var(--headline);font-size:24px;font-weight:800;letter-spacing:-.05em;color:var(--surface)}
.footer-brand p,.footer-copy{color:rgba(255,249,232,.5);font-size:14px;font-weight:500}
.footer nav{display:flex;flex-direction:column;gap:12px}
.footer nav h2{font-size:12px;font-weight:900;color:rgba(255,249,232,.3);text-transform:uppercase;letter-spacing:.1em;font-family:var(--body)}
.footer nav div{display:flex;flex-wrap:wrap;gap:24px}
.footer nav a{font-size:14px;font-weight:700;color:rgba(255,249,232,.6);transition:color .2s}
.footer nav a:hover{color:var(--primary-container)}
.footer-copy{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,249,232,.1);text-align:center;font-size:12px;color:rgba(255,249,232,.4)}

/* Atelier (privé) */
.section.admin,.admin{max-width:1160px;margin:0 auto;padding:40px 24px 60px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.section-heading h2{margin:9px 0 0}
.admin h1{font-size:48px;letter-spacing:-.04em}
.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}
.yellow-dot{color:#b49908}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:14px 23px;border:2px solid var(--ink);border-radius:12px;background:#fff;font-family:var(--headline);font-weight:800;font-size:14px;box-shadow:0 4px 0 var(--ink);text-align:center}
.button:hover{transform:translateY(-1px)}
.button.dark{color:var(--surface);background:var(--ink);box-shadow:0 4px 0 #afa88f}
.button.yellow{background:var(--primary-container)}
.message-page{max-width:660px;min-height:60vh;margin:60px auto;padding:30px 24px;text-align:center}
.message-page p{font-size:18px;margin:16px 0}
.adminnav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:18px;margin-bottom:35px;font-size:12px}
.adminnav a,.adminnav button{min-height:44px;display:flex;align-items:center}
.adminnav form{margin-left:auto}
.adminnav button{background:none;border:0;text-decoration:underline}
.edition-list article{display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line);padding:25px 0}
.edition-list h2{font-size:21px;line-height:1.4;margin:12px 0 5px}
.edition-list time,.edition-list p{font-size:12px;color:var(--muted)}
.edition-list .button{flex-shrink:0}
.status{display:inline-block;font-size:10px;text-transform:uppercase;font-weight:800;background:var(--yellow);border-radius:20px;padding:4px 12px;margin-right:12px}
.status.published{background:var(--blue)}
.generator-box{padding:25px;border:2px solid var(--ink);border-radius:18px;background:var(--blue);margin:30px 0}
.generator-box summary{cursor:pointer;font-weight:800}
.generator-box form{max-width:700px}
.login-box{background:var(--yellow);padding:40px;border:3px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink)}
.admin label,.login-box label{display:block;font-size:12px;font-weight:700;margin:18px 0 8px}
.admin input:not([type=hidden]),.admin textarea,.admin select,.login-box input{border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:12px;max-width:100%;width:100%;min-height:46px}
.admin textarea{resize:vertical}
.login-box button{margin-top:24px;width:100%}
.editor-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px}
.editor-help{background:var(--yellow);padding:25px;border:2px solid var(--ink);border-radius:20px}
.editor-help h2{margin:20px 0}
.editor-help p{font-size:13px;margin:12px 0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.story-panel{margin:30px 0;border:2px solid var(--ink);border-radius:20px;background:#fff;padding:28px}
.story-panel h2{font-size:24px}
.story-panel .word-count{font-size:12px;color:var(--muted)}
.story-panel .story-image{max-height:150px;margin:15px 0;border-radius:10px}
.savebar{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:25px 0;border-top:2px solid var(--ink);margin-top:25px}
.savebar p{font-size:13px;margin:0}
.publish-actions{display:flex;gap:20px;flex-wrap:wrap}
.muted{font-size:12px;color:var(--muted);margin-top:20px}
.error{color:var(--on-tertiary-container)}
button.remove{background:#fff;border:1px solid #930015;color:#930015;border-radius:10px;padding:8px 16px;margin-top:20px}
.admin .empty{padding:50px;border:2px dashed var(--line);border-radius:20px}

@media(max-width:1023px){
  .cards,.home-more .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .header-inner{height:72px}
  .nav,.header-cta{display:none}
  .menu{display:block}
  .main{padding-top:32px;gap:64px}
  .hero h1{font-size:48px}
  .lede{font-size:20px}
  .subscribe-bar input{width:224px;padding:14px 16px}
  .subscribe-bar button{padding:14px 20px}
  .bento{grid-template-columns:1fr}
  .bento-main,.bento-side{grid-column:auto}
  .card-large .body{padding:20px}
  .card-large h2,.card-large h3{font-size:26px}
  .card-large p{font-size:16px}
  .card-side .content{padding:8px 24px 24px}
  .card-side .icon-wrap{padding:24px 24px 0}
  .cards,.home-more .cards{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:48px}
  .day-heading h2{font-size:24px}
  .day-heading .rule{display:none}
  .article-page{padding-top:24px}
  .back{margin:-10px 16px 6px}
  .article-header{padding:16px}
  .article-header h1{font-size:30px}
  .article-header .excerpt{font-size:18px}
  .article-cover{margin:16px 16px 0}
  .markdown{font-size:16px;padding:8px 16px 16px}
  .article-summary{margin:24px 16px 0}
  .article-video{margin:16px 16px 0}
  .briefs-title{padding:0 16px 16px}
  .briefs{grid-template-columns:1fr;padding:0 16px 32px;gap:24px}
  .layout-panorama .brief{display:block}
  .layout-panorama .brief .media,.layout-panorama .brief .metric{min-height:0;height:180px;border-right:0;border-bottom:4px solid var(--ink)}
  .article-actions{padding:16px}
  .after-article{padding:48px 16px 0}
  .subscribe-card{padding:32px 16px}
  .subscribe-card h2{font-size:28px}
  .status-page>.icon{font-size:96px}
  .status-page h1{font-size:48px}
  .founder-quote{padding:24px 20px}
  .founder-quote p{font-size:20px}
  .footer-cols{flex-direction:column;align-items:center;gap:40px;text-align:center}
  .footer-brand{align-items:center}
  .footer nav{align-items:center}
  .footer nav div{justify-content:center;gap:16px}
  .admin h1{font-size:36px}
  .section-heading{align-items:start;flex-direction:column;gap:12px}
  .editor-grid,.form-row{grid-template-columns:1fr}
  .editor-help{order:-1}
  .edition-list article{align-items:start;flex-direction:column;gap:12px}
  .adminnav{gap:12px}
  .adminnav form{margin-left:0}
  .story-panel{padding:20px}
  .savebar{align-items:stretch;flex-direction:column}
  .publish-actions .button{width:100%}
  .login-box{padding:25px}
}
@media(max-width:380px){
  .subscribe-bar input{width:180px}
  .hero h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .logo-orbit,.logo .dot{transform:none!important}
}