/* bechler.me — « Carnet de regard »
   Reprise fidèle de la référence validée (02_Reference_visuelle/style.css),
   réécrite contre le balisage du moteur Jolifish 1.15.3.
   Papier, encre, bordeaux. Georgia pour la voix, Arial pour l'interface. */

:root {
	--paper: #f4f1ea;
	--ink: #252522;
	--muted: #6b6861;
	--accent: #793b38;
	--line: #cbc5bb;
	--line-strong: #beb7aa;
	--soft: #e9e5dc;
	--serif: Georgia, 'Times New Roman', serif;
	--sans: Arial, Helvetica, sans-serif;
	--container: 1500px;
	--gutter: 5%;
	--radius: 0;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 40px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
em { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; color: var(--accent); }
h1, h2, h3 { font-weight: 400; }
section[id] { scroll-margin-top: 35px; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip-link { position: absolute; top: -100px; left: 10px; padding: 15px; background: var(--paper); z-index: 10; }
.skip-link:focus, .skip-link:focus-visible { top: 10px; }

.icon { width: 17px; height: 17px; flex: none; transform: rotate(-45deg); transition: transform .3s ease; }

/* surtitres */
.kicker, .eyebrow { display: block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 32px; color: var(--ink); }

/* liens-flèches : tous les boutons du site ont l'allure du « text-link » de la référence */
.btn, .text-link {
	display: inline-flex; align-items: center; gap: 50px;
	padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--accent); border-radius: var(--radius);
	background: none; color: var(--accent); font: 12px var(--sans); cursor: pointer;
}
.btn:hover, .text-link:hover { color: var(--ink); }
.btn:hover .icon, .text-link:hover .icon, .card:hover .icon { transform: rotate(-45deg) translate(2px, 0); }
.btn-primary, .btn-secondary, .btn-light, .btn-small { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 20px 40px; }

/* ------------------------------------------------------------ en-tête */
.site-header { background: var(--paper); }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 0; padding-top: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.brand { display: inline-block; color: var(--ink); font: 27px var(--serif); letter-spacing: -1px; }
.brand-mot { display: block; font-size: inherit; font-weight: 400; letter-spacing: inherit; }
.site-header .brand-mot::after { content: "Designer Narratif"; display: block; margin-top: 8px; font: 11px/1.4 var(--sans); letter-spacing: 1px; color: var(--muted); }
.main-nav { display: flex; align-items: center; gap: 35px; font-size: 12px; font-weight: 400; margin-left: auto; margin-right: 0; }
.nav-link { padding: 0; font-weight: 400; color: var(--ink); }
.nav-group { position: relative; }
.nav-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group .chevron { width: 12px; height: 12px; }
.nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; margin-top: 12px; padding: 12px 18px; background: var(--paper); border: 1px solid var(--line); z-index: 5; }
.nav-dropdown a { display: block; padding: 8px 0; }
.nav-dropdown small { display: block; color: var(--muted); font-size: 10px; }
.mobile-only { display: none; }
.header-actions { display: flex; align-items: center; gap: 15px; }
.header-register { padding-bottom: 6px; font-size: 11px; gap: 15px; }
.nav-toggle { display: none; }

/* ------------------------------------------------------------ sections */
.section { padding: 35px 0 75px; }
.section.soft { background: var(--soft); }
.section-title h2 { font: 38px var(--serif); letter-spacing: -1px; margin: 0; }
.section-title h2 span { color: var(--accent); }
.section-title p { font-size: 12px; line-height: 1.8; color: var(--muted); }

/* ------------------------------------------------------------ accueil : ouverture */
.home-intro .intro-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0 6%; align-items: center; padding-top: 65px; padding-bottom: 60px; }
.intro-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.home-intro h1 { font-size: clamp(54px, 6.5vw, 98px); line-height: 1.08; font-weight: 400; letter-spacing: -4px; margin: 0 0 30px; }
.home-intro h1 em { white-space: nowrap; font-size: .94em; }
.home-intro .lead { font: 23px/1.4 var(--serif); margin: 0 0 23px; }
.intro-foot { order: 1; font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 395px; margin: 0 0 28px; }
.home-intro .actions { order: 2; }
.media { margin: 0; }
.media img { display: block; width: 100%; }
.media--hero img { height: 550px; object-fit: cover; }
.accueil-hero .media--hero::after { content: "Image d’ambiance générée · en attendant mes archives argentiques"; display: block; padding-top: 12px; font-size: 9px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------ listes de billets (sélection d'accueil) */
.billets { padding: 35px 0 75px; }
.row-title { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; border-top: 1px solid var(--ink); padding: 37px 0 25px; }
.row-title > .text-link { font-size: 11px; color: var(--muted); border: 0; padding: 0; gap: 8px; }
.row-title > .text-link .icon { display: none; }
.billets .grid-2 { display: block; }
.billets .card {
	display: grid; grid-template-columns: 120px 96px minmax(0, 1fr) 30px;
	grid-template-areas: "tag media title arrow" "tag media text arrow";
	grid-template-rows: auto 1fr; column-gap: 26px;
	padding: 30px 0; border-top: 1px solid var(--line); align-items: start; color: var(--ink);
}
.billets .card .tag { grid-area: tag; font-size: 10px; color: var(--muted); margin-top: 8px; }
.billets .card__media { grid-area: media; width: 96px; height: 96px; overflow: hidden; }
.billets .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .3s ease; }
.billets .card:hover .card__media img, .billets .card:focus-visible .card__media img { filter: grayscale(0%); }
.billets .card h3 { grid-area: title; font: 29px/1.25 var(--serif); letter-spacing: -.5px; margin: 0 0 10px; }
.billets .card:hover h3 { color: var(--accent); }
.billets .card p { grid-area: text; font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 620px; }
.billets .card .text-link { grid-area: arrow; font-size: 0; gap: 0; border: 0; padding: 0; margin-top: 7px; }
.billets .card .text-link .icon { width: 25px; height: 25px; color: var(--ink); }

/* la liste du blog, posée par le thème sur la page des articles */

/* ------------------------------------------------------------ en-têtes de pages internes */
.page-hero .container { padding-top: 75px; padding-bottom: 55px; }
.page-hero h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1.1; font-weight: 400; letter-spacing: -2.5px; margin: 0 0 27px; }
.page-hero h1 > span { color: var(--accent); font-family: var(--serif); }
.page-hero .lead { font: 22px/1.6 var(--serif); max-width: 750px; color: var(--muted); margin: 0; }
.page-hero .actions { margin-top: 30px; }
.page-hero .container > div > p:not(.lead):not(.post-meta) { display: flex; justify-content: space-between; gap: 20px; margin: 55px 0 -55px; padding: 20px 0; border-top: 1px solid var(--ink); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.page-hero .container > div > p:not(.lead):not(.post-meta) span:last-child { color: var(--muted); }
.breadcrumbs { margin-bottom: 50px; font-size: 11px; color: var(--muted); }
.breadcrumbs > span { display: none; }

/* en-tête de lecture : billets, archives, pages légales */
.page-hero.lecture .container { padding-top: 45px; padding-bottom: 35px; }
.page-hero.lecture .container > div { max-width: 980px; margin: 0 auto; }
.page-hero.lecture .breadcrumbs { max-width: 980px; margin: 0 auto 50px; }
.page-hero.lecture .kicker { letter-spacing: 1px; line-height: 1.8; margin-bottom: 25px; text-transform: none; }
.page-hero.archives .kicker { text-transform: uppercase; }
.page-hero.lecture h1 { font: clamp(34px, 4.1vw, 61px)/1.15 var(--serif); letter-spacing: -1.5px; margin: 0 0 25px; overflow-wrap: anywhere; }
.page-hero.lecture .lead { font: 12px var(--sans); color: var(--muted); }

/* ------------------------------------------------------------ corps de texte */
.section.lecture { padding: 0 0 65px; }
.article-body { max-width: 710px; margin: 0 auto; font: 20px/1.8 var(--serif); overflow-wrap: anywhere; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.4em; }
.article-body h2 { font: 32px/1.3 var(--serif); letter-spacing: -.5px; margin: 1.8em 0 .8em; }
.article-body h3 { font: 26px/1.4 var(--serif); margin: 1.6em 0 .7em; }
.article-body h4 { font: 22px/1.4 var(--serif); margin: 1.5em 0 .7em; }
.article-body ul, .article-body ol { padding-left: 1.3em; margin: 1.3em 0; }
.article-body li { margin: .6em 0; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.article-body blockquote { border-left: 2px solid var(--accent); padding: 5px 0 5px 27px; margin: 35px 0; color: var(--accent); font-style: italic; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 28px auto; }
.article-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 25px 0; }
.article-body table { display: block; overflow: auto; max-width: 100%; border-collapse: collapse; font: 13px/1.6 var(--sans); margin: 30px 0; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 12px; min-width: 140px; }
.article-body th { background: #eae5db; }
.article-body pre { font: 13px/1.7 monospace; overflow: auto; background: var(--soft); padding: 20px; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.article-body figure { margin: 28px 0; }
.article-body figcaption { font: 12px/1.6 var(--sans); color: var(--muted); }
.article-body video { width: 100%; }
.article-title { max-width: 710px; margin: 0 auto 30px; font: 32px/1.3 var(--serif); }

/* galerie (GeekTrip) */
.gallery { display: grid; gap: 20px; max-width: 710px; margin: 0 auto; }
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__item { margin: 0; }
.gallery__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery__item figcaption { font: 11px/1.5 var(--sans); color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------ cartes (base) */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: block; color: var(--ink); min-width: 0; }
.card h3 { font: 27px/1.2 var(--serif); letter-spacing: -.5px; margin: 0 0 12px; }
.card p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0; }
.card .tag, .card .number { display: block; }
.card__media img { display: block; width: 100%; }
.icon-badge { color: var(--accent); margin-bottom: 15px; }
.note { margin-top: 30px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.feature-links { display: flex; flex-direction: column; gap: 13px; margin-top: 13px; }

/* ------------------------------------------------------------ parcours : ouverture */
.parcours-hero .intro-grid { grid-template-columns: 1.3fr .7fr; grid-template-rows: auto; row-gap: 0; column-gap: 10%; align-items: center; padding-top: 70px; padding-bottom: 0; }
.parcours-hero .intro-copy { display: contents; }
.parcours-hero .intro-copy > * { grid-column: 1; }
.parcours-hero .eyebrow { grid-row: 1; align-self: end; margin: 0; }
.parcours-hero h1 { grid-row: 2; font-size: clamp(74px, 8.5vw, 125px); line-height: .98; letter-spacing: -5px; margin: 30px 0; }
.parcours-hero .lead { grid-row: 3; font: 27px/1.4 var(--serif); margin: 25px 0 0; }
.parcours-hero .lead span { display: block; margin-top: 25px; font: 13px/1.8 var(--sans); color: var(--muted); max-width: 420px; }
.parcours-hero .intro-foot { grid-row: 4; order: 0; font-size: 10px; margin: 30px 0 55px; }
.parcours-hero .media--hero { grid-column: 2; grid-row: 1 / span 4; margin-top: 10px; }
.parcours-hero .media--hero img { height: 390px; object-position: 50% 45%; filter: grayscale(1); }
.parcours-hero .media--hero::after { content: "Michael Bechler / un regard en mouvement"; display: block; padding-top: 12px; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.parcours-hero .actions { grid-column: 1 / -1; grid-row: 5; justify-content: space-between; gap: 25px; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.parcours-hero .actions .btn { border: 0; padding: 0; gap: 35px; color: var(--ink); font-size: 11px; }
.parcours-hero .actions .btn:hover { color: var(--accent); }
.parcours-hero .actions .icon { color: var(--accent); width: 14px; height: 14px; transform: rotate(90deg); }

/* avant les dates */
.prelude { padding: 75px 0 80px; }
.prelude .split { display: block; }
.prelude .section-title { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr; gap: 40px; }
.prelude .kicker { padding-top: 8px; margin: 0; }
.prelude h2 { font: 43px/1.13 var(--serif); letter-spacing: -1.5px; }
.prelude .section-title p { font-size: 13px; line-height: 1.9; margin: 0; }

/* la frise */
.frise { padding: 0 0 20px; }
.frise .container { display: grid; grid-template-columns: 1fr 1.8fr; gap: 0 9%; }
.frise .container::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--ink); margin-bottom: 55px; }
.frise .section-title { align-self: start; position: sticky; top: 35px; }
.frise .section-title h2, .convictions .section-title h2, .ecrits .section-title h2 { font: 50px/1.12 var(--sans); letter-spacing: -2px; }
.frise .section-title .kicker, .convictions .section-title .kicker, .ecrits .section-title .kicker { margin-bottom: 25px; }
.frise .grid-2 { display: block; }
.frise .card { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 27px; padding-bottom: 55px; }
.frise .card > * { grid-column: 2; }
.frise .card::before { content: ""; position: absolute; left: 60px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.frise .card::after { content: ""; position: absolute; left: 57px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.frise .card:last-child::before { bottom: 55px; }
.frise .number { grid-column: 1; grid-row: 1 / span 5; font: 23px var(--serif); color: var(--accent); }
.frise .tag { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; margin: 5px 0 17px; }
.frise .card h3 { font: 31px/1.18 var(--serif); letter-spacing: -.7px; margin: 0 0 20px; }
.frise .card p { font-size: 13px; line-height: 1.9; }
.frise .card p em { display: block; margin: 25px 0; font: 18px/1.5 var(--serif); font-style: normal; letter-spacing: 0; color: var(--ink); }
.frise .card p strong { display: block; padding-top: 20px; border-top: 1px solid var(--line); font: 23px var(--serif); font-weight: 400; color: var(--ink); }
.frise .card p strong::before { content: "Une trace de cette étape"; display: block; margin-bottom: 10px; font: 8px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.frise .card p span { display: block; margin-top: 10px; font-size: 10px; line-height: 1.7; }
.frise .card .text-link, .frise .feature-links { position: relative; display: flex; justify-content: space-between; margin-top: 13px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); font-size: 11px; gap: 20px; }
.frise .card .text-link .icon { width: 24px; height: 24px; margin-top: -30px; }
.frise .feature-links { flex-direction: column; gap: 15px; }
.frise .feature-links a:first-child { color: var(--accent); }
.frise .feature-links a + a { font-size: 10px; color: var(--muted); }
.frise .card:hover h3 { color: var(--accent); }

/* les convictions */
.convictions { padding: 65px 0; margin-top: 15px; }
.convictions .container { display: grid; grid-template-columns: 1fr 1.8fr; gap: 35px 9%; }
.convictions .section-title p, .ecrits .section-title p { font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 280px; margin-top: 25px; }
.convictions .grid-3 { display: block; }
.convictions .card { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; column-gap: 20px; padding: 25px 0; border-top: 1px solid var(--line-strong); }
.convictions .card:first-child { padding-top: 0; border-top: 0; }
.convictions .number { grid-column: 1; grid-row: 1 / span 2; font-size: 10px; color: var(--accent); padding-top: 5px; }
.convictions .card h3, .convictions .card p { grid-column: 2; }
.convictions .card .text-link { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; padding: 0; border: 0; font-size: 0; gap: 0; }
.convictions .card .text-link .icon { width: 20px; height: 20px; }
.convictions .card:hover h3 { color: var(--accent); }
.convictions .note { grid-column: 2; margin: 0; padding-top: 28px; border-top: 1px solid var(--line-strong); font: 22px/1.5 var(--serif); color: var(--ink); padding-right: max(0px, calc(100% - 550px)); }
.convictions .note strong { display: block; margin-bottom: 17px; font: 8px var(--sans); letter-spacing: 2px; text-transform: uppercase; font-weight: 400; }
.convictions .note a { display: table; margin-top: 25px; padding-bottom: 10px; border-bottom: 1px solid var(--accent); font: 12px var(--sans); color: var(--accent); }

/* écrire et transmettre */
.ecrits { padding: 75px 0 60px; }
.ecrits .section-title { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0 50px; margin-bottom: 45px; }
.ecrits .section-title .kicker { grid-column: 1 / -1; }
.ecrits .section-title p { align-self: end; margin: 0; }
.ecrits .grid-2 { gap: 50px; }
.ecrits .card { display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.ecrits .card > * { grid-column: 2; }
.ecrits .card__media { grid-column: 1; grid-row: 1 / -1; }
.ecrits .card .tag { grid-row: 2; }
.ecrits .card h3 { grid-row: 3; }
.ecrits .card p { grid-row: 4; }
.ecrits .card .text-link { grid-row: 5; }
.ecrits .card:nth-child(3) { grid-column: 1 / -1; max-width: 850px; }
.ecrits .tag { font-size: 8px; letter-spacing: 1px; line-height: 1.8; text-transform: uppercase; margin: 0 0 15px; }
.ecrits .card h3 { font-size: 25px; margin: 0 0 15px; }
.ecrits .card p { margin-bottom: 12px; line-height: 1.7; }
.ecrits .card .text-link { justify-self: start; border: 0; padding: 0; gap: 6px; font-size: 10px; line-height: 1.7; }
.ecrits .card .text-link .icon { display: none; }
.ecrits .card:hover h3 { color: var(--accent); }
.ecrits .note { font-size: 9px; margin-top: 24px; }

/* sources dépliables */
.sources { padding: 0; }
.sources .faq { border-top: 1px solid var(--line); padding: 25px 0; }
.faq details > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 20px; list-style: none; font-size: 11px; color: var(--muted); }
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary::after { content: "+"; transition: transform .3s ease; }
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq details > p { max-width: 820px; margin: 25px 0 0 auto; font-size: 11px; line-height: 1.9; color: var(--muted); }
.faq details > p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* le fil continue */
.wide-cta h2 { font-size: 38px; line-height: 1.2; letter-spacing: -1px; margin: 0 0 30px; }
.cloture { padding: 45px 0 65px; }
.cloture .wide-cta { padding-top: 45px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ contact */
.entete-contact + .formulaire, .formulaire { padding: 0 0 20px; }
.formulaire .section-title { max-width: 900px; padding-top: 28px; border-top: 1px solid var(--line); }
.formulaire .section-title h2, .contact-liens .card h3 { font: 28px var(--serif); letter-spacing: 0; margin: 0 0 12px; }
.formulaire .section-title p { margin: 0 0 25px; }
.nf-form-cont { max-width: 900px; }
.nf-form-cont label { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.nf-form-cont input:not([type=submit]):not([type=button]), .nf-form-cont textarea, .nf-form-cont select {
	width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
	background: transparent; color: var(--ink); font: 18px var(--serif);
}
.nf-form-cont input:focus, .nf-form-cont textarea:focus, .nf-form-cont select:focus { outline: none; border-bottom-color: var(--accent); }
.nf-form-cont p, .nf-form-cont .nf-field-container { margin: 0 0 25px; }
.nf-form-cont button, .nf-form-cont input[type=submit], .nf-form-cont input[type=button] { font-size: 12px; }
.nf-loading-spinner { min-height: 20px; }
.jolifish-form-consent { font-size: 11px; line-height: 1.7; color: var(--muted); max-width: 900px; }
.contact-liens { padding: 0 0 85px; }
.contact-liens .grid-2 { display: block; max-width: 900px; }
.contact-liens .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 30px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-liens .card .text-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0; gap: 0; border: 0; padding: 0; }
.contact-liens .card .text-link .icon { width: 27px; height: 27px; color: var(--ink); }

/* ------------------------------------------------------------ pied de page */
.site-footer .container { padding-top: 50px; padding-bottom: 60px; }
.site-footer { border-top: 0; }
.site-footer > .container { border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr minmax(0, 400px); grid-template-rows: 1fr auto; gap: 0 50px; align-items: end; }
.footer-brand { grid-row: 1 / span 2; }
.footer-col { grid-column: 2; }
.footer-brand .brand { display: none; }
.footer-brand p { color: var(--ink); margin: 0 0 30px; font-size: 46px; line-height: 1.16; letter-spacing: -1.5px; }
.footer-brand p::before { content: "Poursuivre la conversation"; display: block; margin-bottom: 32px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
.footer-brand > a:not(.brand) { display: inline-flex; padding-bottom: 10px; border-bottom: 1px solid var(--accent); font-size: 12px; color: var(--accent); }
.footer-col a { font-size: 11px; }
.footer-col { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 7px 20px; max-width: 400px; font-size: 11px; color: var(--muted); }
.footer-col h3 { flex-basis: 100%; margin: 0 0 8px; font: 23px var(--serif); color: var(--ink); }
.footer-col + .footer-col { margin-top: 8px; }
.footer-col + .footer-col h3 { display: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.footer-bottom > span:first-child { font: 15px var(--serif); color: var(--ink); }
.footer-bottom div { display: flex; flex-wrap: wrap; gap: 7px 20px; font-size: 9px; }

/* ------------------------------------------------------------ blog : liste, filtres, billets
   Balisage écrit par le thème (jolifish-kit 1.26) sur /blog/, les catégories et les billets.
   Sélecteurs volontairement plus précis : les feuilles du thème se chargent après celle-ci. */

/* barre des catégories */
.section .filters { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 20px 0; border-top: 1px solid var(--line); background: none; }
.section .filters .filter { padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font: 10px/1.6 var(--sans); letter-spacing: 1px; text-transform: uppercase; box-shadow: none; }
.section .filters .filter:hover { color: var(--accent); background: none; }
.section .filters .filter[aria-current="page"] { background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }

/* les billets, en liste comme la référence */
.section .grid-3:has(> .post-card) { display: block; }
.section .grid-3 > .card.post-card {
	display: grid; grid-template-columns: 120px 96px minmax(0, 1fr) 30px;
	grid-template-areas: "meta thumb title arrow" "tag thumb text arrow";
	grid-template-rows: auto 1fr; column-gap: 26px; align-items: start;
	margin: 0; padding: 30px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
	background: none; box-shadow: none; color: var(--ink); transform: none;
}
.section .grid-3 > .card.post-card .post-thumb { grid-area: thumb; width: 96px; height: 96px; margin: 0; overflow: hidden; border-radius: 0; aspect-ratio: auto; }
.section .grid-3 > .card.post-card .post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .3s ease; border-radius: 0; }
.section .grid-3 > .card.post-card:hover .post-thumb img, .section .grid-3 > .card.post-card:focus-visible .post-thumb img { filter: grayscale(0%); }
.section .grid-3 > .card.post-card .post-meta { grid-area: meta; margin: 8px 0 0; font-size: 10px; color: var(--muted); }
.section .grid-3 > .card.post-card .tag { grid-area: tag; align-self: start; margin: 8px 0 0; padding: 0; background: none; border: 0; color: var(--accent); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
.section .grid-3 > .card.post-card h3 { grid-area: title; margin: 0 0 10px; font: 29px/1.25 var(--serif); letter-spacing: -.5px; color: var(--ink); }
.section .grid-3 > .card.post-card:hover h3 { color: var(--accent); }
.section .grid-3 > .card.post-card > p:not(.post-meta) { grid-area: text; max-width: 620px; margin: 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
.section .grid-3 > .card.post-card .text-link { grid-area: arrow; justify-self: end; margin: 7px 0 0; padding: 0; gap: 0; border: 0; font-size: 0; }
.section .grid-3 > .card.post-card .text-link .icon { width: 25px; height: 25px; color: var(--ink); }

/* pagination WordPress */
.section .page-numbers { display: inline-block; margin-right: 18px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--ink); }
.section .page-numbers[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.section div:has(> .page-numbers) { display: flex; flex-wrap: wrap; align-items: baseline; padding: 35px 0 30px; border-top: 1px solid var(--line); }

/* un billet : l'en-tête du thème prend l'allure de la colonne de lecture */
.single .page-hero .container { padding-top: 45px; padding-bottom: 35px; }
.single .page-hero .container > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.single .page-hero .breadcrumbs { margin-bottom: 50px; }
.single .page-hero .breadcrumbs > a:first-child { display: none; }
.single .page-hero .breadcrumbs > a:nth-of-type(2)::before { content: "← Toutes les "; text-transform: none; }
.single .page-hero .breadcrumbs > a:nth-of-type(2) { text-transform: lowercase; }
.single .page-hero .kicker { display: inline-block; margin-bottom: 25px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.single .page-hero h1 { margin: 0 0 25px; font: clamp(34px, 4.1vw, 61px)/1.15 var(--serif); letter-spacing: -1.5px; overflow-wrap: anywhere; }
.single .page-hero .post-meta { margin: 0; font-size: 12px; color: var(--muted); }
.single .page-hero .post-meta span { margin: 0 10px; }
.single .post-cover { max-width: 980px; margin: 5px auto 50px; padding: 0; }
.single .post-cover img { display: block; width: 100%; height: auto; max-height: 520px; margin: 0 auto; object-fit: contain; border-radius: 0; }
.single .section .article-body .section { padding: 0; background: none; }
.single .section .article-body .container { padding: 0; max-width: none; }
.single .post-share { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; max-width: 710px; margin: 50px auto 0; padding-top: 23px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.single .post-share .btn { gap: 0; padding: 0; border: 0; font-size: 11px; background: none; }
.single .section.soft .row-title { border-top: 0; }

/* ------------------------------------------------------------ mouvement */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.post-card .post-thumb img, .billets .card__media img, .icon, .faq details > summary::after { transition: none; }
}

/* ------------------------------------------------------------ paliers */
@media (max-width: 1160px) {
	.frise .container, .convictions .container { gap: 0 6%; }
	.ecrits .grid-2 { gap: 35px; }
	.ecrits .card { grid-template-columns: 130px minmax(0, 1fr); column-gap: 20px; }
	.frise .section-title h2, .convictions .section-title h2, .ecrits .section-title h2 { font-size: 42px; }
	.prelude .section-title { grid-template-columns: 1fr 1.5fr; gap: 30px; }
	.prelude .kicker { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 940px) {
	.section .grid-3 > .card.post-card { grid-template-columns: 95px 84px minmax(0, 1fr) 25px; column-gap: 20px; }
	.section .grid-3 > .card.post-card .post-thumb { width: 84px; height: 84px; }
	.home-intro .intro-grid { column-gap: 4%; }
	.home-intro h1 { letter-spacing: -3px; }
	.media--hero img { height: 485px; }
	.home-intro .lead { font-size: 20px; }
	.billets .card { grid-template-columns: 95px 84px minmax(0, 1fr) 25px; column-gap: 20px; }
	.billets .card__media { width: 84px; height: 84px; }
}
@media (max-width: 720px) {
	.section .grid-3 > .card.post-card { grid-template-columns: 68px minmax(0, 1fr) 20px; grid-template-areas: "meta meta meta" "thumb title arrow" "thumb text arrow" "tag tag tag"; gap: 8px 15px; padding: 25px 0; }
	.section .grid-3 > .card.post-card .post-thumb { width: 68px; height: 68px; }
	.section .grid-3 > .card.post-card .post-meta, .section .grid-3 > .card.post-card .tag { margin: 0; }
	.section .grid-3 > .card.post-card h3 { font-size: 22px; }
	.section .grid-3 > .card.post-card > p:not(.post-meta) { font-size: 11px; }
	.section .grid-3 > .card.post-card .text-link .icon { width: 22px; height: 22px; }
	.section .filters { gap: 8px 18px; }
	.single .page-hero .container { padding-top: 30px; padding-bottom: 30px; }
	.single .page-hero .breadcrumbs { margin-bottom: 35px; }
	.single .page-hero h1 { font-size: 35px; letter-spacing: -.7px; }
	.single .post-cover { margin-bottom: 30px; }
	.single .post-cover img { max-height: 400px; }
	:root { --gutter: 6%; }
	.header-inner { flex-wrap: wrap; gap: 18px; padding-top: 24px; padding-bottom: 24px; }
	.brand { font-size: 23px; }
	.main-nav { width: 100%; margin: 0; gap: 26px; font-size: 11px; overflow-x: auto; }
	.header-actions { display: none; }

	.home-intro .intro-grid { display: flex; flex-direction: column; align-items: stretch; padding-top: 40px; padding-bottom: 40px; }
	.home-intro h1 { font-size: clamp(44px, 9vw, 62px); letter-spacing: -2px; margin-bottom: 25px; }
	.home-intro .eyebrow { margin-bottom: 25px; }
	.home-intro .lead { font-size: 21px; }
	.intro-foot { font-size: 12px; max-width: 100%; }
	.home-intro .media--hero { margin-top: 35px; }
	.media--hero img { height: 360px; object-position: center 45%; }
	.accueil-hero .media--hero::after { font-size: 8px; }

	.billets { padding: 10px 0 40px; }
	.row-title { display: block; padding-top: 30px; }
	.row-title .section-title h2 { font-size: 32px; margin-bottom: 18px; }
	.billets .card { grid-template-columns: 68px minmax(0, 1fr) 20px; grid-template-areas: "tag tag tag" "media title arrow" "media text arrow"; gap: 10px 15px; padding: 25px 0; }
	.billets .card .tag { margin: 0; }
	.billets .card__media { width: 68px; height: 68px; }
	.billets .card h3 { font-size: 22px; }
	.billets .card p { font-size: 11px; }
	.billets .card .text-link .icon { width: 22px; height: 22px; }

	.page-hero .container { padding-top: 45px; padding-bottom: 35px; }
	.page-hero h1 { font-size: 42px; letter-spacing: -1.5px; }
	.page-hero .lead { font-size: 19px; }
	.page-hero .container > div > p:not(.lead):not(.post-meta) { font-size: 8px; letter-spacing: .5px; margin: 35px 0 -35px; }
	.page-hero.lecture .container { padding-top: 30px; padding-bottom: 30px; }
	.page-hero.lecture .breadcrumbs { margin-bottom: 35px; }
	.page-hero.lecture h1 { font-size: 35px; letter-spacing: -.7px; }
	.page-hero.lecture .kicker { font-size: 8px; }
	.section.lecture { padding-bottom: 40px; }
	.article-body { font-size: 18px; }
	.article-body h2 { font-size: 27px; }
	.article-body h3 { font-size: 23px; }
	.article-body blockquote { padding-left: 18px; }
	.gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

	.parcours-hero .intro-grid { display: flex; flex-direction: column; align-items: stretch; padding-top: 42px; }
	.parcours-hero .eyebrow { align-self: auto; font-size: 8px; line-height: 1.8; letter-spacing: 1.2px; }
	.parcours-hero h1 { font-size: 85px; letter-spacing: -4px; }
	.parcours-hero .lead { font-size: 24px; }
	.parcours-hero .lead span { font-size: 12px; }
	.parcours-hero .intro-foot { margin-bottom: 30px; }
	.parcours-hero .media--hero { order: 1; max-width: 300px; margin: 0 0 35px; }
	.parcours-hero .media--hero img { height: 300px; }
	.parcours-hero .actions { order: 2; justify-content: flex-start; gap: 14px 25px; font-size: 10px; }
	.parcours-hero .actions .btn { gap: 10px; }

	.prelude { padding: 45px 0; }
	.prelude .section-title { display: block; }
	.prelude .kicker { margin-bottom: 25px; }
	.prelude h2 { font-size: 39px; margin-bottom: 25px; }
	.prelude .section-title p { font-size: 12px; }

	.frise .container { display: block; }
	.frise .container::before { display: block; margin-bottom: 40px; }
	.frise .section-title { position: static; margin-bottom: 40px; }
	.frise .section-title h2, .convictions .section-title h2, .ecrits .section-title h2 { font-size: 38px; }
	.frise .card { grid-template-columns: 63px minmax(0, 1fr); column-gap: 16px; padding-bottom: 40px; }
	.frise .card::before { left: 51px; }
	.frise .card::after { left: 48px; top: 9px; }
	.frise .card:last-child::before { bottom: 40px; }
	.frise .number { font-size: 20px; }
	.frise .card h3 { font-size: 27px; }
	.frise .card p { font-size: 12px; }
	.frise .card p em { font-size: 17px; }
	.frise .card p strong { font-size: 21px; }
	.frise .card p span { font-size: 9px; }

	.convictions { padding: 45px 0; }
	.convictions .container { display: block; }
	.convictions .section-title { margin-bottom: 35px; }
	.convictions .card { column-gap: 12px; }
	.convictions .card h3 { font-size: 25px; }
	.convictions .note { margin-top: 20px; font-size: 20px; }

	.ecrits { padding: 45px 0; }
	.ecrits .section-title { display: block; margin-bottom: 30px; }
	.ecrits .grid-2 { display: block; }
	.ecrits .card { grid-template-columns: 125px minmax(0, 1fr); column-gap: 20px; margin-top: 28px; }
	.ecrits .card h3 { font-size: 23px; }
	.ecrits .card p { font-size: 11px; }

	.cloture { padding: 35px 0 45px; }
	.wide-cta h2 { font-size: 29px; }

	.contact-liens { padding-bottom: 40px; }
	.contact-liens .card h3, .formulaire .section-title h2 { font-size: 25px; }

	.site-footer .container { padding-top: 40px; padding-bottom: 40px; }
	.footer-grid { display: block; }
	.footer-brand p { font-size: 38px; }
	.footer-col { margin-top: 40px; }
}
@media (max-width: 480px) {
	.parcours-hero h1 { font-size: 64px; letter-spacing: -3px; }
	.frise .card .text-link .icon { margin-top: 0; }
}