/* CONSTRUIT par tools/i18n.js depuis assets/css/style.css (@famille journal).
   Ne pas éditer : la source est style.css, entre ses marqueurs. */

.journal{ padding-top:clamp(90px, 14vh, 150px); padding-bottom:100px }
.journal__tete{ text-align:center; max-width:720px; margin-bottom:clamp(48px,8vw,86px) }
.journal__tete h1{ font-size:var(--step-4); letter-spacing:-.02em }
.journal__lede{ margin:18px auto 0; max-width:56ch; font-family:var(--serif);
font-style:italic; font-size:var(--step-1); color:var(--ink-3) }
.pastille{
position:absolute; top:16px; left:16px; z-index:2;
background:rgba(246,242,234,.92); backdrop-filter:blur(6px);
color:var(--ink); border-radius:999px; padding:6px 14px;
font:700 .68rem/1 var(--sans); letter-spacing:.11em; text-transform:uppercase;
}
.une{
position:relative; display:grid; gap:clamp(20px,4vw,44px);
background:var(--paper-2); border:1px solid var(--line); border-radius:36px;
padding:clamp(16px,2.4vw,26px);
margin-bottom:clamp(56px,9vw,96px);
transition:box-shadow .35s ease, border-color .35s ease;
}
@media (min-width: 900px){ .une{ grid-template-columns:1fr 1fr; align-items:center } }
.une:hover{ box-shadow:0 40px 80px -50px rgba(20,17,13,.5); border-color:var(--ink-3) }
.une__lien{ position:absolute; inset:0; z-index:3; border-radius:36px }
.une__lien:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
.une__img{ position:relative; margin:0; border-radius:26px; overflow:hidden;
aspect-ratio:4/3; background:var(--line) }
@media (min-width: 900px){ .une__img{ aspect-ratio:1 } }
.une__img img{ width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.3,1) }
.une:hover .une__img img{ transform:scale(1.045) }
.une__texte{ display:grid; gap:14px; align-content:center; padding:clamp(6px,2vw,26px) }
.une__texte time{ font:700 .74rem/1 var(--sans); letter-spacing:.13em;
text-transform:uppercase; color:var(--green-ink) }
.une__texte h2{ font-size:var(--step-3); line-height:1.08; letter-spacing:-.015em;
text-wrap:balance; transition:color .25s ease }
.une:hover .une__texte h2{ color:var(--green-ink) }
.une__texte p{ margin:0; color:var(--ink-2); font-size:var(--step-1); line-height:1.55 }
.une__texte footer{ display:flex; align-items:center; justify-content:space-between;
gap:16px; margin-top:8px }
.une__auteur{ display:grid; gap:2px }
.une__auteur strong{ font-weight:650 }
.une__auteur em{ font-style:normal; font-size:.8rem; color:var(--ink-3);
letter-spacing:.06em; text-transform:uppercase }
.fleche{ flex:none; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line);
display:grid; place-items:center; font-size:1.2rem;
transition:background .25s ease, color .25s ease, border-color .25s ease }
.une:hover .fleche{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.journal__grille{ display:grid; gap:clamp(34px,5vw,56px) }
@media (min-width: 680px){ .journal__grille{ grid-template-columns:1fr 1fr } }
@media (min-width: 1000px){ .journal__grille{ grid-template-columns:repeat(3,1fr) } }
.carte{ position:relative; display:flex; flex-direction:column }
.carte__lien{ position:absolute; inset:0; z-index:3; border-radius:24px }
.carte__lien:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
.carte__img{ position:relative; margin:0 0 20px; border-radius:24px; overflow:hidden;
aspect-ratio:4/3; background:var(--line) }
.carte__img img{ width:100%; height:100%; object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.3,1) }
.carte:hover .carte__img img{ transform:scale(1.045) }
.carte time{ font:700 .7rem/1 var(--sans); letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-3) }
.carte h3{ margin:12px 0 10px; font-size:var(--step-2); line-height:1.15;
letter-spacing:-.01em; text-wrap:balance; transition:color .25s ease }
.carte:hover h3{ color:var(--green-ink) }
.carte p{ margin:0 0 22px; color:var(--ink-2); line-height:1.6; flex:1 }
.carte footer{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding-top:16px; border-top:1px solid var(--line);
font-size:.86rem; color:var(--ink-3) }
.carte__auteur{ font-weight:600; color:var(--ink) }
.lecture{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60; pointer-events:none }
.lecture i{ display:block; height:100%; width:0; background:var(--green);
transform-origin:0 50% }
.article{ padding-top:clamp(90px, 14vh, 150px); padding-bottom:90px }
.article__tete{ text-align:center; margin-bottom:clamp(34px,5vw,54px) }
.article__retour{ display:inline-block; margin-bottom:26px; font-size:.9rem;
color:var(--ink-3); text-decoration:none }
.article__retour:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.article__meta{ display:flex; align-items:center; justify-content:center; gap:12px;
flex-wrap:wrap; margin:0 0 20px;
font:700 .74rem/1 var(--sans); letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-3) }
.article__cat{ color:var(--green-ink) }
.article__meta .pt{ width:4px; height:4px; border-radius:50%; background:var(--line) }
.article__tete h1{ font-size:var(--step-4); line-height:1.06; letter-spacing:-.02em;
text-wrap:balance; max-width:18ch; margin-inline:auto }
.article__chapeau{ margin:20px auto 0; max-width:58ch; font-family:var(--serif);
font-size:var(--step-1); font-style:italic; color:var(--ink-3) }
.article__hero{ margin:0 auto clamp(40px,6vw,72px) }
.article__hero img{ width:100%; height:auto; aspect-ratio:21/9; object-fit:cover;
border-radius:28px; background:var(--line);
box-shadow:0 40px 80px -56px rgba(20,17,13,.6) }
.article__corps{ display:grid; gap:clamp(28px,5vw,64px) }
@media (min-width: 1000px){
.article__corps{ grid-template-columns:56px minmax(0,1fr); align-items:start }
}
.partage{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding-bottom:18px; border-bottom:1px solid var(--line) }
.partage__lab{ font:700 .7rem/1 var(--sans); letter-spacing:.13em;
text-transform:uppercase; color:var(--ink-3) }
.partage__trait{ display:none }
.partage__lien{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
display:grid; place-items:center; color:var(--ink-3);
transition:background .2s ease, color .2s ease, border-color .2s ease }
.partage__lien:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
@media (min-width: 1000px){
.partage{ position:sticky; top:110px; flex-direction:column; gap:14px;
padding:0; border:0 }
.partage__lab{ writing-mode:vertical-rl; transform:rotate(180deg) }
.partage__trait{ display:block; width:1px; height:40px; background:var(--line) }
}
.prose{ max-width:68ch }
.prose > * + *{ margin-top:1.35em }
.prose p{ font-size:var(--step-0); line-height:1.75; color:var(--ink-2) }
.prose h2{ margin-top:2em; font-size:var(--step-2); letter-spacing:-.01em; color:var(--ink) }
.prose h3{ margin-top:1.7em; font-size:var(--step-1); color:var(--ink) }
.prose a{ color:var(--green-ink); text-underline-offset:3px }
.prose ul,.prose ol{ padding-left:1.3em; color:var(--ink-2); line-height:1.7 }
.prose li + li{ margin-top:.5em }
.prose strong{ color:var(--ink) }
.prose .illus{ margin:2em 0 }
.prose .illus img{ width:100%; height:auto; border-radius:20px; background:var(--line) }
.prose .chapeau{ font-family:var(--serif); font-size:var(--step-1); line-height:1.6;
color:var(--ink) }
.prose .chapeau::first-letter{
float:left; font-family:var(--serif); font-size:3.9em; line-height:.82;
padding:.06em .1em 0 0; color:var(--green-ink);
}
.prose .citation{ margin:2.4em 0; padding:0; border:0; text-align:center }
.prose .citation p{ font-family:var(--serif); font-style:italic;
font-size:var(--step-2); line-height:1.28; color:var(--ink) }
.prose .citation footer{ margin-top:16px; font:600 .78rem/1.4 var(--sans);
letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3) }
.signature{ margin-top:3em; padding-top:22px; border-top:1px solid var(--line) }
.signature__qui{ display:grid; gap:3px }
.signature__qui strong{ font-weight:650 }
.signature__qui span{ font-size:.84rem; color:var(--ink-3);
letter-spacing:.06em; text-transform:uppercase }
.page-journal .site-head,
.page-article .site-head{
background:rgba(246,242,234,.88); backdrop-filter:blur(14px) saturate(1.3);
color:var(--ink); border-bottom-color:var(--line);
}
.page-journal .site-head .btn:hover,
.page-article .site-head .btn:hover{ color:var(--paper) }
.prose ul{ list-style:disc }
.prose ol{ list-style:decimal }
.prose ul,.prose ol{ padding-left:1.35em }
.prose li::marker{ color:var(--ink-3) }
.prose ol li::marker{ font-weight:650; color:var(--green-ink) }
.article__corps{ max-width:920px }
.prose .essentiel,
.prose .chiffres,
.prose .apar,
.prose .appel,
.prose .tableau{ margin-block:2.6em }
@media (min-width:1000px){
.prose .essentiel,
.prose .chiffres,
.prose .appel,
.prose .tableau{ width:calc(100% + 84px); margin-left:-42px }
}
.prose .essentiel{
padding:clamp(22px,3.2vw,32px) clamp(20px,3vw,34px);
border:1px solid var(--line); border-radius:var(--r);
background:linear-gradient(180deg, rgba(220,252,231,.5), rgba(246,242,234,0) 70%);
}
.prose .essentiel .essentiel__lab{ font:600 .75rem/1 var(--sans); letter-spacing:.13em;
text-transform:uppercase; color:var(--green-ink); margin-bottom:1.1em }
.prose .essentiel .ticks{ margin:0; padding:0; list-style:none }
.prose .essentiel .ticks li{ margin-top:0; color:var(--ink-2) }
.prose .essentiel .ticks li + li{ margin-top:.7em }
.prose .essentiel .ticks li::marker{ content:"" }
.prose .chiffres{ display:grid; gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
@media (min-width:640px){ .prose .chiffres{ grid-template-columns:repeat(3,1fr) } }
.chiffre{ background:var(--paper); padding:clamp(20px,2.8vw,28px);
display:flex; flex-direction:column; gap:.2em }
.chiffre__val{ font-family:var(--serif); font-size:clamp(2.1rem,5.5vw,2.9rem);
line-height:1; letter-spacing:-.03em; color:var(--green-ink);
font-variant-numeric:tabular-nums }
.chiffre__lab{ font-weight:600; letter-spacing:-.01em; color:var(--ink) }
.chiffre__sub{ font-size:var(--step--1); color:var(--ink-3); line-height:1.45 }
.prose .apar{ padding-left:clamp(18px,2.6vw,26px); border-left:3px solid var(--brass) }
.prose .apar > * + *{ margin-top:.8em }
.prose .apar p{ font-size:var(--step--1); line-height:1.65; color:var(--ink-2) }
.prose .apar .apar__lab{ font:700 .72rem/1 var(--sans); letter-spacing:.13em;
text-transform:uppercase; color:var(--brass) }
.prose .tableau{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r) }
.prose .tableau table{ width:100%; border-collapse:collapse; font-size:var(--step--1) }
.prose .tableau th,
.prose .tableau td{ padding:.95em 1.1em; text-align:left; vertical-align:top;
border-bottom:1px solid var(--line) }
.prose .tableau thead th{ background:var(--paper-2); font-weight:650; color:var(--ink);
letter-spacing:-.01em; white-space:nowrap }
.prose .tableau tbody th{ font-weight:600; color:var(--ink) }
.prose .tableau td{ color:var(--ink-2) }
.prose .tableau tbody tr:last-child th,
.prose .tableau tbody tr:last-child td{ border-bottom:0 }
.prose .tableau tbody td:last-child{ color:var(--ink); background:rgba(220,252,231,.35) }
.prose .tableau thead th:last-child{ color:var(--green-ink) }
@media (max-width:639px){
.prose .tableau{ overflow:visible; border:0; border-radius:0 }
.prose .tableau table{ display:block; font-size:var(--step-0) }
.prose .tableau thead{ display:none }
.prose .tableau tbody{ display:block }
.prose .tableau tbody tr{ display:block; padding:18px 20px; margin-top:12px;
border:1px solid var(--line); border-radius:var(--r) }
.prose .tableau tbody tr:first-child{ margin-top:0 }
.prose .tableau tbody th,
.prose .tableau tbody td{ display:block; padding:0; border-bottom:0 }
.prose .tableau tbody th{ font-size:var(--step-0); margin-bottom:.8em }
.prose .tableau tbody td{ margin-top:.7em; font-size:var(--step--1) }
.prose .tableau tbody td::before{ content:attr(data-col); display:block;
font:700 .68rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-3); margin-bottom:.45em }
.prose .tableau tbody td:last-child{ background:rgba(220,252,231,.5);
padding:.85em 1em; border-radius:10px }
.prose .tableau tbody td:last-child::before{ color:var(--green-ink) }
}
.prose .appel{
background:var(--night); color:var(--paper); border-radius:var(--r);
padding:clamp(28px,4vw,42px) clamp(24px,3.4vw,40px);
display:grid; gap:1.4em; justify-items:start;
}
@media (min-width:720px){
.prose .appel{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2em }
}
.prose .appel > * + *{ margin-top:0 }
.appel__texte > * + *{ margin-top:.5em }
.prose .appel h3{ margin-top:0; font-size:var(--step-2); color:var(--paper) }
.prose .appel p{ color:rgba(246,242,234,.72); font-size:var(--step--1) }
.prose .appel a{ color:var(--green) }
.prose .appel .btn{ background:var(--green); border-color:var(--green);
color:#06280f; white-space:nowrap }
.prose .appel .btn:hover{ background:#16a34a; border-color:#16a34a; color:#06280f }