body{background:#f8f5ed;color:#101719}.journal-intro{position:relative;padding:145px 6vw 70px;overflow:hidden}.journal-intro h1{font-size:clamp(55px,7.3vw,112px);line-height:.96;letter-spacing:-.065em;max-width:1100px;margin:30px 0}.journal-intro em{font-style:normal;color:#125469}.journal-intro>p:last-of-type{max-width:620px;line-height:1.65;font-size:20px}.journal-intro svg{position:absolute;right:-70px;bottom:-95px;width:370px;height:370px;fill:none;stroke:#ff7526;stroke-width:45;opacity:.9;pointer-events:none;transform:rotate(var(--ink-rotation,0deg))}.journal-index{padding:0 6vw 85px}.article-filters{display:flex;gap:12px;flex-wrap:wrap;padding:20px 0 30px}.article-filters button{border:1px solid #12546966;border-radius:30px;background:none;padding:12px 22px;color:#125469;font:inherit;cursor:pointer}.article-filters button[aria-pressed=true]{background:#125469;color:white}.articles-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px 30px}.article-card:first-child{grid-column:1/-1}.article-card a{color:inherit;text-decoration:none;display:block}.article-card:first-child>a{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;background:#125469;color:#f8f5ed;border-radius:7px;overflow:hidden}.article-image{position:relative;aspect-ratio:1.8;overflow:hidden;border-radius:5px;background:#15313c}.article-card:first-child .article-image{aspect-ratio:auto;min-height:420px;border-radius:0}.article-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s}





.article-card .eyebrow{transition:color .3s}
.article-card a:hover .eyebrow,.article-card a:focus-visible .eyebrow{color:#ff7526}.article-card-copy{padding:25px 0}.article-card:first-child .article-card-copy{padding:45px;display:flex;flex-direction:column;justify-content:center}.article-card h2{font-size:clamp(27px,3vw,43px);letter-spacing:-.045em;line-height:1.08;margin:12px 0 20px}.article-card-copy>p:not(.eyebrow){line-height:1.6;font-size:17px}.article-card small{display:block;font-size:12px;margin-top:15px;opacity:.75}.articles-grid.filtered .article-card{grid-column:auto}.articles-grid.filtered .article-card>a{display:block;background:none;color:inherit}.articles-grid.filtered .article-card .article-image{aspect-ratio:1.8;min-height:0}.articles-grid.filtered .article-card-copy{padding:25px 0}.article-card[hidden]{display:none}.articles-status{font-size:12px}.reading-heading{padding:145px 6vw 55px;max-width:1250px;margin:auto}.reading-heading>a{color:#125469;text-decoration:none;border-bottom:1px solid #125469}.reading-heading .eyebrow{margin-top:35px}.reading-heading h1{font-size:clamp(44px,5.7vw,84px);line-height:1.03;letter-spacing:-.055em;margin:25px 0}.reading-heading>p:last-child{font-size:22px;line-height:1.6;max-width:800px}.reading-cover{margin:0 auto;max-width:1250px;height:400px;padding:0 30px}.reading-cover img{width:100%;height:100%;object-fit:cover;border-radius:5px}.reading-layout{display:grid;grid-template-columns:230px minmax(0,750px);justify-content:center;align-items:start;gap:70px;padding:85px 6vw 100px}.reading-toc{position:sticky;top:120px}.reading-toc>p{font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px;color:#526468}.reading-toc a{display:block;color:#125469;text-decoration:none;padding:15px 0;border-bottom:1px solid #12546922;font-size:14px;line-height:1.4}.reading-toc a[aria-current=true]{color:#bd4a10;border-bottom-color:#ff7526}.reading-body section{scroll-margin-top:120px;margin-bottom:65px}.reading-body h2{font-size:34px;letter-spacing:-.04em;line-height:1.2}.reading-body p{font-size:18px;line-height:1.85;text-align:justify;hyphens:auto}.reading-contact{display:inline-block;background:#125469;color:white;border-radius:30px;padding:16px 25px;text-decoration:none}.related-reading{padding:65px 6vw;background:#eaece5}.related-reading .article-card{grid-column:auto}.related-reading .article-card>a{display:block;background:none;color:inherit}.related-reading .article-image{aspect-ratio:1.8;min-height:0}.related-reading .article-card-copy{padding:25px 0}.reading-progress{position:fixed;top:0;left:0;height:3px;background:#ff7526;z-index:9999;width:var(--read-progress,0%);pointer-events:none}.article-card{animation:card-arrive .55s both}@keyframes card-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}a:focus-visible,button:focus-visible{outline:3px solid #ff7526;outline-offset:4px}@media(max-width:800px){.journal-intro{padding-top:115px}.journal-intro svg{opacity:.25;right:-180px}.article-card:first-child>a{display:block}.article-card:first-child .article-image{aspect-ratio:1.8;min-height:0}.article-card:first-child .article-card-copy{padding:25px}.reading-layout{grid-template-columns:1fr;gap:25px;padding-top:45px}.reading-toc{position:static}.reading-cover{height:260px}.reading-heading{padding-top:115px}.reading-body p{font-size:18px}.reading-toc a{padding:10px 0}}@media(max-width:550px){.articles-grid{grid-template-columns:1fr}.article-card h2{font-size:30px}.reading-heading h1{font-size:43px}.journal-intro h1{font-size:59px}.reading-body h2{font-size:29px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.journal-intro svg{overflow:visible}

/* LA VAGUE AU SURVOL — repris des cartes d'expertise de l'accueil, mêmes
   valeurs, même courbe. La tache naît sous le pointeur et s'étale ; le libellé
   arrive dessus. On ne masque plus la photo par un aplat posé dans un coin :
   la couleur vient de la main du visiteur et s'en va avec elle. */
.liquid-clip{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.liquid{position:absolute;left:var(--lx,50%);top:var(--ly,60%);
  width:var(--diameter,1200px);height:var(--diameter,1200px);
  margin-left:calc(var(--diameter,1200px)/-2);margin-top:calc(var(--diameter,1200px)/-2);
  border-radius:43% 57% 54% 46% / 55% 44% 56% 45%;
  transform:scale(0) rotate(-18deg);
  background:radial-gradient(ellipse at 32% 28%,#ff9836e8,#ff711fea 53%,#f95b19f5);
  box-shadow:inset 1px 2px 2px #ffe4a655,inset -1px -3px 5px #a7411240;
  transition:transform .78s cubic-bezier(.2,.65,.2,1),border-radius 1.1s;will-change:transform}
.article-image.vague-active .liquid{transform:scale(1) rotate(8deg);border-radius:52% 48% 46% 54% / 44% 56% 44% 56%}
@media(prefers-reduced-motion:reduce){.liquid{transition:none}}



.article-image.vague-active img{transform:scale(1.035)}

/* MÊME DENSITÉ QUE L'ACCUEIL — voir la note de realisations.css : la vedette
   pleine largeur et les deux colonnes de 619 px faisaient des cartes deux fois
   plus grandes que partout ailleurs sur le site. */
.articles-grid{grid-template-columns:repeat(3,1fr);gap:52px 22px}
.article-card:first-child{grid-column:auto}
.article-card:first-child>a{display:block;background:none;color:inherit;border-radius:0}
.article-card:first-child .article-image{aspect-ratio:1.8;min-height:0;border-radius:5px}
.article-card:first-child .article-card-copy{padding:25px 0}
.article-card h2{font-size:23px;letter-spacing:-.03em;line-height:1.15;margin:10px 0 12px}
.article-card-copy>p:not(.eyebrow){font-size:15px;line-height:1.55}

/* le libellé, visible sous le texte comme sur les réalisations */
.article-open{display:inline-block;align-self:flex-start;width:fit-content;margin-top:14px;font-size:14px;font-weight:700;
  letter-spacing:-.01em;text-decoration:underline;text-underline-offset:7px;
  text-decoration-thickness:1px;text-decoration-color:#ff7526;transition:color .25s}
.article-card a:hover .article-open,.article-card a:focus-visible .article-open{color:#ff7526}

.liquid{transition:transform 1.15s cubic-bezier(.2,.65,.2,1),border-radius 1.4s}

@media(max-width:1100px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.articles-grid{grid-template-columns:1fr}}







.article-image{border-radius:12px}
.article-card:first-child .article-image{border-radius:12px}





/* LE HAUT DE PAGE — centré. Le titre sur deux lignes, le chapeau dessous, plus
   large et centré lui aussi. C'était une grille en deux colonnes, titre à
   gauche et chapeau à droite : ça lisait comme une page d'article, pas comme
   l'entrée d'un fonds de travaux. */
.journal-intro{display:block;text-align:center;padding:104px 5.3% 52px;max-width:1520px;margin:auto}
.journal-intro h1{font-size:clamp(36px,4.6vw,70px);letter-spacing:-.05em;line-height:1.06}
.journal-intro .eyebrow{justify-content:center;display:block}
.journal-intro h1{margin:16px auto 0;max-width:none}
.journal-intro p:not(.eyebrow){margin:34px auto 0;max-width:720px;font-size:19px;line-height:1.62;text-align:center}
@media(max-width:700px){.journal-intro{padding:96px 6% 34px}}
.journal-intro>svg{display:none}

/* LES FILTRES — centrés et sobres. Ils étaient alignés à gauche, collés au
   bord, et se lisaient comme une barre d'outils. */
.article-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 44px;padding:0}
.article-filters button{font:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  padding:11px 20px;border-radius:30px;border:1px solid #12546930;background:none;color:inherit;
  transition:background .22s,border-color .22s,color .22s}
.article-filters button:hover{border-color:var(--orange,#ff7526)}
.article-filters button[aria-pressed="true"]{background:var(--ink,#101719);border-color:var(--ink,#101719);color:var(--ivory,#f8f5ed)}
.article-filters button:focus-visible{outline:2px solid var(--orange,#ff7526);outline-offset:3px}