:root{--vignette:104px;--liseret:inset 0 0 0 1px rgba(34,28,16,0.10);--ombre:0 1px 2px rgba(34,28,16,0.07),0 6px 16px rgba(34,28,16,0.10);--ombre-haute:0 2px 5px rgba(34,28,16,0.09),0 14px 30px rgba(34,28,16,0.15);--paper:#f3eee2;--paper-2:#fdfbf4;--ink:#221c10;--ink-soft:#4c4536;--ink-faint:#8b7f66;--rule:#e0d7c2;--gold:#a06c2e;--gold-hover:#8a5a20}
.header-name{font-style:italic}
body{background:#f3eee2}
.main{padding-top:80px;background:#f3eee2}
.jx{max-width:1200px;width:100%;min-width:0;margin:0 auto;padding:2.6rem 1.6rem 3rem;font-family:'Inter',sans-serif}
.jx-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.jx-eyebrow{display:flex;align-items:center;justify-content:center;gap:0.8rem;font-family:'Inter',sans-serif;font-size:0.64rem;font-weight:600;letter-spacing:0.14em;color:var(--gold);margin-bottom:0.7rem}
.jx-eyebrow::before,.jx-eyebrow::after{content:"";height:1px;width:2.2rem;background:var(--gold);opacity:0.6}
.jx-masthead{text-align:center;border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:1.1rem 0 0.9rem}
.jx-title{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(2.7rem,8.5vw,6.4rem);line-height:0.92;letter-spacing:-0.01em;margin:0;color:var(--ink)}
.jx-sub{font-family:'Inter',sans-serif;font-size:0.74rem;letter-spacing:0.08em;color:var(--ink-soft);margin:0.6rem 0 0}
.jx-dateline{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:500;letter-spacing:0.04em;color:var(--ink-soft);padding:0.55rem 0.1rem;border-bottom:1px solid var(--rule)}
.jx-dateline b{color:var(--ink);font-weight:700}
.jx-grid{display:grid;grid-template-columns:2fr 1fr;gap:0 1.8rem;margin-top:1.4rem;min-width:0;align-items:start}
.jx-lead{min-width:0;overflow-wrap:break-word;padding:0 1.8rem 0 0;border-right:1px solid var(--rule)}
.jx-lead-kicker{font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;color:var(--gold);display:block;margin-bottom:0.6rem}
.jx-lead-head{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.05;letter-spacing:-0.01em;margin:0 0 0.8rem}
.jx-lead-head a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--ink),var(--ink));background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size 0.4s cubic-bezier(0.16,1,0.3,1)}
.jx-lead-head a:hover{background-size:100% 2px}
.jx-lead-fig{position:relative;margin:0 0 0.9rem;aspect-ratio:16/9;max-height:300px;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-md,16px);box-shadow:var(--liseret),var(--ombre)}
.jx-lead-fig img{width:100%;height:100%;object-fit:cover;display:block}
.jx-lead-fig.is-empty{display:none}
.jx-lead-fig figcaption{position:absolute;bottom:0;left:0;right:0;font-family:'Inter',sans-serif;font-size:0.62rem;letter-spacing:0.03em;color:#e8e2d5;background:rgba(10,10,12,0.82);padding:0.3rem 0.5rem}
.jx-lead-stand{font-size:1.02rem;line-height:1.6;color:var(--ink-soft);margin:0 0 0.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-lead-more{display:inline-block;font-family:'Inter',sans-serif;font-size:0.74rem;font-weight:700;letter-spacing:0.03em;color:var(--gold);text-decoration:none}
.jx-side{min-width:0;overflow-wrap:break-word}
/* La breve : vignette de 56px a gauche, texte a droite. Elle reste une liste, elle ne concurrence pas la Une. */
.jx-breve{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 0.75rem;align-items:start;text-decoration:none;color:inherit;padding:0.6rem 0;border-bottom:1px dotted var(--rule)}
.jx-breve:last-child{border-bottom:none}
.jx-breve.sans-image{grid-template-columns:minmax(0,1fr)}
.jx-breve.sans-image .jx-breve-fig{display:none}
.jx-breve-fig{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-sm,8px);box-shadow:var(--liseret),var(--ombre)}
.jx-breve-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jx-breve-corps{min-width:0}
.jx-breve .jx-note-head{font-size:0.96rem}
.jx-breve:hover .jx-note-head{color:var(--gold)}
.jx-side-head{font-family:'Inter',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.07em;color:var(--ink);margin:0 0 0.4rem;display:flex;align-items:center;gap:0.6rem}
.jx-side-head::after{content:"";flex:1;height:2px;background:var(--ink)}
/* Trois mouvements : les expertises, les passions, le personnel. C'est la que se fait la coupure. */
.jx-mouv{margin-top:2.6rem;padding-top:1.1rem;border-top:4px solid var(--ink)}
.jx-mouv-head{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-0.01em;color:var(--ink);margin:0 0 1.2rem}
/* Les passions et le personnel changent de registre : la main prend le relais de la presse. */
.jx-mouv-head--main{font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:0.01em;line-height:1;margin-bottom:1rem}
/* A l'interieur d'un mouvement, la rubrique se signale par sa couleur, pas par un filet de plus. */
/* La rubrique quitte l'axe du mouvement : son nom passe dans une gouttiere a gauche. */
.jx-page{margin:1.5rem 0 0 2.4rem;padding-top:0.7rem;border-top:3px solid var(--sec,var(--ink));display:grid;grid-template-columns:175px 1fr;gap:0 1.8rem;align-items:start}
.jx-mouv .jx-page:first-of-type{margin-top:0}
.jx-page--edu{--sec:#6aa8c4}
.jx-page--com{--sec:#c8c8cc}
.jx-page--mus{--sec:#c48898}
.jx-page--g125{--sec:#d07a6e}
.jx-page--uni{--sec:#d4a574}
.jx-page--forum{--sec:#a892c4}
/* Le rail de rubrique : le nom, et l'entree vers la section. */
.jx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.jx-pic{width:1.3em;height:1.3em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jx-page-head{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.24rem);color:var(--ink);margin:0;letter-spacing:-0.01em;line-height:1.2}
.jx-page-head a{color:inherit;text-decoration:none}
.jx-page-head a::after{content:"\00a0\2192";color:var(--gold);font-size:0.78em;vertical-align:0.08em}
.jx-page-head a:hover{color:var(--gold)}
.jx-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.9rem 1.8rem}
/* Trois registres : la presse pour les expertises, la galerie pour les passions, la note pour le leger. */
.jx-grille--presse{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.9rem 2.2rem}
.jx-art{display:block;min-width:0;text-decoration:none;color:inherit;align-self:start}
.jx-art--une{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:0 1.6rem;align-items:center;padding-bottom:0.9rem;border-bottom:1px solid var(--rule);margin-bottom:0.3rem}
.jx-art-une-fig{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-md,16px);box-shadow:var(--liseret),var(--ombre);transition:box-shadow 0.35s ease,transform 0.35s ease}
.jx-art--une:hover .jx-art-une-fig{box-shadow:var(--liseret),var(--ombre-haute);transform:translateY(-2px)}
.jx-art-une-fig img{width:100%;height:100%;object-fit:cover;display:block}
.jx-art--une.sans-image{grid-template-columns:minmax(0,1fr)}
.jx-art--une.sans-image .jx-art-une-fig{display:none}
.jx-art--une .jx-art-head{font-size:1.3rem;line-height:1.22}
.jx-art--une .jx-art-sum{font-size:0.85rem;-webkit-line-clamp:3}
/* Chaque carte epouse son contenu : sans filet au bas de la cellule, une carte courte ne creuse pas de trou. */
.jx-art > .jx-art-head{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-art-sum{font-family:'Inter',sans-serif;font-size:0.8rem;line-height:1.45;color:var(--ink-soft);margin:0.2rem 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-art:hover .jx-art-head{color:var(--gold)}
.jx-grille--galerie{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem;margin-left:-1.1rem}
.jx-gal{display:block;min-width:0;text-decoration:none;color:inherit;align-self:start;padding-left:1.1rem;border-left:1px solid var(--rule)}
.jx-grille--galerie > .jx-gal:nth-child(6n+1){border-left:none}
.jx-gal-fig{position:relative;display:block;width:100%;max-width:var(--vignette);aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-sm,8px);box-shadow:var(--liseret),var(--ombre);margin:0.3rem 0 0.55rem;transition:box-shadow 0.35s ease,transform 0.35s ease}
.jx-gal-fig::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(158deg,rgba(255,255,255,0.30) 0%,rgba(255,255,255,0.08) 26%,rgba(255,255,255,0) 50%)}
.jx-gal:hover .jx-gal-fig{box-shadow:var(--liseret),var(--ombre-haute);transform:translateY(-2px)}
.jx-gal-fig img{width:100%;height:100%;object-fit:cover;display:block}
.jx-gal-head{font-family:'Playfair Display',serif;font-weight:600;font-size:0.92rem;line-height:1.3;margin:0;color:var(--ink);transition:color 0.3s ease;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-gal:hover .jx-gal-head{color:var(--gold)}
.jx-gal-meta{display:block;font-family:'Inter',sans-serif;font-size:0.66rem;color:var(--ink-faint);margin-top:0.18rem}
.jx-grille--leger{grid-template-columns:repeat(3,minmax(0,1fr));gap:0.85rem 2rem}
/* A propos est illustre : la note garde son image. Sans image, le pictogramme occupe le cadre. */
.jx-grille--illustre{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem;margin-left:-1.1rem}
.jx-ill{display:block;min-width:0;align-self:start;text-decoration:none;color:inherit;padding-left:1.1rem;border-left:1px solid var(--rule)}
.jx-grille--illustre > .jx-ill:nth-child(6n+1){border-left:none}

.jx-ill-fig{position:relative;display:block;width:var(--vignette);margin:0.3rem 0 0.5rem;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);border-radius:var(--radius-sm,8px);box-shadow:var(--liseret),var(--ombre);color:var(--ink-faint);transition:box-shadow 0.35s ease,transform 0.35s ease}
.jx-ill:hover .jx-ill-fig{box-shadow:var(--liseret),var(--ombre-haute);transform:translateY(-2px)}
.jx-ill-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jx-ill-pic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jx-ill-corps{min-width:0}
.jx-ill .jx-note-head{font-size:0.92rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-ill:hover .jx-note-head{color:var(--gold)}
.jx-note{display:flex;gap:0 0.75rem;align-items:flex-start;min-width:0;text-decoration:none;color:inherit;align-self:start}
.jx-note-corps{flex:1 1 auto;min-width:0}
.jx-medaillon{flex:0 0 auto;width:40px;height:40px;margin-top:0.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(34,28,16,0.05);background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:inset 0 0 0 1px rgba(34,28,16,0.10);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent);transition:background 0.3s ease}
.jx-medaillon .jx-pic{width:21px;height:21px}
.jx-note:hover .jx-medaillon{background:color-mix(in srgb,currentColor 20%,transparent)}
.jx-note-head{font-family:'Playfair Display',serif;font-weight:600;font-size:0.96rem;line-height:1.3;margin:0;color:var(--ink);transition:color 0.3s ease}
.jx-note:hover .jx-note-head{color:var(--gold)}
.jx-note-cred{display:block;font-family:'Inter',sans-serif;font-size:0.68rem;color:var(--ink-faint);margin-top:0.15rem}
/* La question du forum ne s'illustre pas : le medaillon du theme tient lieu de vignette. */
/* Repondre appelle, le nombre de reponses informe : deux marques distinctes, la date passe en dernier. */
.jx-page--forum .jx-art-kicker{font-weight:700;font-size:0.72rem}
.jx-page--forum .jx-note-head{font-size:1.04rem}
.jx-note-rep{display:inline-flex;align-items:center;gap:0.32rem;font-family:'Inter',sans-serif;font-size:0.71rem;font-weight:600;margin-top:0.32rem}
.jx-note-rep .jx-pic{width:1.2em;height:1.2em}
.jx-note-rep--ouvert{color:var(--gold-hover)}
.jx-page--forum .jx-quand{margin-top:0.4rem}
.jx-empty{font-family:'Inter',sans-serif;font-size:0.8rem;color:var(--ink-faint);padding:0.6rem 0;margin:0;grid-column:1/-1}
.jx-art-kicker{font-family:'Inter',sans-serif;font-size:0.69rem;font-weight:600;letter-spacing:0.04em;color:var(--gold);display:block;margin-bottom:0.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jx-art-kicker--picto{display:flex;align-items:center;gap:0.36rem;overflow:visible}
.jx-art-kicker--picto > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Les cinq univers du site gardent leur couleur, assombrie pour rester lisible sur le papier. */
.jx-pic--education,.jx-ton--education{color:#2a7192}
.jx-pic--communication,.jx-ton--communication{color:#63636e}
.jx-pic--musique,.jx-ton--musique{color:#a3455f}
.jx-pic--g125,.jx-ton--g125{color:#b04a37}
.jx-pic--apropos,.jx-ton--apropos{color:#8a5d24}
/* Dans les expertises, le pictogramme dit le type d'article et prend la couleur de la rubrique. */
.jx-page--edu .jx-art-kicker--picto .jx-pic{color:#2a7192}
.jx-page--com .jx-art-kicker--picto .jx-pic{color:#63636e}
.jx-art-head{font-family:'Playfair Display',serif;font-weight:600;font-size:1.04rem;line-height:1.28;margin:0;color:var(--ink);transition:color 0.3s ease}
.jx-art-date{display:block;font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:500;color:var(--gold);margin-top:0.2rem}
.jx-quand{display:block;font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:500;color:var(--gold);margin-top:0.25rem}
.jx-foot{margin-top:2rem;padding-top:1rem;border-top:3px double var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.7rem;font-family:'Inter',sans-serif;font-size:0.68rem;letter-spacing:0.03em;color:var(--ink-soft)}
.jx-foot a{color:var(--ink);text-decoration:none}
.jx-foot a:hover{color:var(--gold)}
.jx-foot nav{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;text-transform:none;letter-spacing:0.02em}
.jx-foot-brand{display:flex;align-items:center;gap:0.5rem}
.jx-foot-logo{font-family:'Playfair Display',serif;font-weight:700;color:var(--gold)}
.footer{display:none}
.reveal{opacity:1;transform:none;transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
/* Entre 900 et 1150px, six colonnes sont plus etroites que la vignette : elle suit la colonne, et A propos suit avec elle. */
@media (min-width:1024px) and (max-width:1150px){:root{--vignette:92px}}
@media (max-width:1023px){
.jx-grille--galerie,.jx-grille--illustre{grid-template-columns:repeat(3,minmax(0,1fr))}
.jx-grille--galerie > .jx-gal:nth-child(6n+1),.jx-grille--illustre > .jx-ill:nth-child(6n+1){border-left:1px solid var(--rule)}
.jx-grille--galerie > .jx-gal:nth-child(3n+1),.jx-grille--illustre > .jx-ill:nth-child(3n+1){border-left:none}
}
/* Sous 900px la gouttiere n'a plus la place : le nom de rubrique repasse au-dessus. */
@media (max-width:900px){
.jx-page{grid-template-columns:minmax(0,1fr);gap:0;margin-left:1.2rem}
.jx-page-head{margin-bottom:0.7rem}
}
@media (max-width:820px){
.jx-grid{grid-template-columns:minmax(0,1fr)}
.jx-lead{padding:0 0 1.2rem;border-right:none;border-bottom:1px solid var(--rule);margin-bottom:1.2rem}
.jx-title{font-size:clamp(2.4rem,11vw,3.6rem)}
}
@media (max-width:600px){
:root{--vignette:118px}
.jx-art-head{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-grille--presse{grid-template-columns:minmax(0,1fr)}
.jx-grille--galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
.jx-grille--leger{grid-template-columns:minmax(0,1fr)}
/* Sous 600px la note passe en pile, image en tete comme la galerie : deux colonnes redeviennent lisibles. */
.jx-grille--illustre{grid-template-columns:repeat(2,minmax(0,1fr))}
.jx-grille--illustre > .jx-ill:nth-child(3n+1){border-left:1px solid var(--rule)}
.jx-grille--illustre > .jx-ill:nth-child(2n+1){border-left:none}
.jx-grille--galerie > .jx-gal:nth-child(3n+1){border-left:1px solid var(--rule)}
.jx-grille--galerie > .jx-gal:nth-child(2n+1){border-left:none}
.jx-art--une{grid-template-columns:minmax(0,1fr);gap:0.6rem 0}
}