/* =========================================================
   XXI INSTITUT — SURCOUCHE CHARTE v1.1 « Indigo XXI »
   17 octobre 2026. Déclinaison pour xxi-institut.didier-supplisson.chatgpt.site
   de la charte XXI Avocats (Charte_Graphique_XXI_DSFR.md v1.1, xxi-tokens-v1-1.css).
   À charger EN DERNIER, après styles.css, mirror.css, programme.css,
   editorial-formats.css. Aucune règle de contenu : apparence uniquement.
   Sans signes distinctifs institutionnels, dégradés ni ombres.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');



/* ---------- base ---------- */
body{font:400 17px/1.6 var(--sans);color:var(--text);background:var(--fond);-webkit-font-smoothing:antialiased}
a{color:var(--pri)} a:hover{color:var(--pri-hover)}
:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.wrap{max-width:var(--maxw);padding-left:26px;padding-right:26px}

/* Typographie commune à toutes les composantes */
h1,h2,h3,h4,
.hero h1,.section h2,.subhero h1,.hero-number,.intro-grid p:last-child,.hero-aside-content p:last-child,
.dossier h3,.ideas-intro h3,.ideas-grid h4,.formats h3,.format-num,.method-grid h3,
.blog-empty-symbol,.blog-empty h3,.letters-callout h3,.research-questions li,.research-questions li::before,
.research-feature h3,.article-prose h2,.article-prose .article-lead,
.letter-launch h3,.letter-operating h3,.letter-sources h3,
.newsletter-intro p,.newsletter-item h2,.newsletter-research h2,
.research-question,.reading-prose h3,.publication-card h3,.programme-result h3,.footer h2{
  font-family:var(--sans)!important;font-style:normal
}
h1,h2,h3,h4{font-weight:700;color:var(--ink)}
h1,.subhero h1,.hero h1{font-size:clamp(36px,5.4vw,60px);line-height:1.05;letter-spacing:-.015em}
h2,.section h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.01em}
/* les citations restent en italique (règle éditoriale de l'Institut) */
em,i,blockquote,q{font-style:italic}

/* ---------- sur-titres : bordeaux, SANS capitales (règle Institut du 16/10/2026) ---------- */
.eyebrow,.overline,.intro-grid .label,.newsletter-item-head span,.related-links h3,.ideas-grid span,
.dossier-type,.policy-grid span,.letter-grid span,.policy-detail-card span{
  font:700 13px/1.2 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--acc);
  font-variant-numeric:tabular-nums
}
.meta,.publication-meta,.article-meta,.section-desc,.blog-status{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- bandeau des trois structures (ancienne .topline sombre) ---------- */
.topline{background:#fff;color:var(--text);border-bottom:1px solid var(--line);font-size:13px}
.topline a{color:var(--text);text-decoration:none}
.topline a:hover,.topline a[aria-current="page"]{color:var(--pri);text-decoration:underline;text-underline-offset:3px}

/* ---------- logo : XXI | INSTITUT ---------- */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;white-space:nowrap}
.brand-xxi{font:800 40px/1 var(--sans)!important;letter-spacing:-.06em;color:var(--ink);border:0!important;
  padding-right:14px;border-right:3px solid var(--acc)!important}
.brand-mark{display:none}               /* le point doré est remplacé par le filet bordeaux */
.brand-name{font:700 17px/1.1 var(--sans)!important;letter-spacing:.12em;color:var(--ink)}
.brand-name::after{font:400 12.5px/1.3 var(--sans)!important;letter-spacing:0;color:var(--mute)}
.footer-brand .brand-xxi{font-size:30px!important}
.footer-brand .brand-name::after{display:none}

/* ---------- en-tête blanc ---------- */
.header{background:#fff;border-bottom:1px solid var(--line)}
.header-note{color:var(--mute);border-color:var(--line)}
.nav{border-color:var(--line);background:#fff}
.nav a,.mirror-menu summary{color:var(--ink);font:600 14px var(--sans);text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current],.mirror-menu summary:hover{color:var(--ink);border-bottom-color:var(--pri)}
.mirror-menu>div{background:#fff;border:1px solid var(--line);}
.menu-button{border:1px solid var(--pri);background:transparent;border-radius:0}
.menu-button span{background:var(--pri)}
#programme-search{border:1px solid var(--line);border-radius:0;font:inherit}
#programme-search:focus{border-color:var(--pri)}

/* ---------- accroche (hero / subhero) sur beige ---------- */
.hero,.subhero,.blog-hero{background:var(--band);color:var(--ink)}
.hero h1,.subhero h1{color:var(--ink)}
.hero h1 em{color:var(--ink)}
.hero-intro,.subhero p,.subhero p:last-child{color:var(--text);font-size:18px;max-width:64ch}
.subhero .eyebrow,.overline.light,.rule,.section-dark .eyebrow{color:var(--acc)}
.hero-aside{background:#fff;border-top:3px solid var(--acc)}
.hero-aside-content{border-color:var(--line)}
.hero-number{color:var(--line)}
.hero-link{border:1px solid var(--pri);color:var(--pri);border-radius:0}
.hero-link span{color:var(--pri)}

/* ---------- alternance des fonds blanc / beige ---------- */
.section{background:#fff}
.section-soft,.intro-strip,.institute,.blog-preview,#live-publications{background:var(--band)}
.section-dark{background:var(--band);color:var(--text)}          /* plus de fond sombre */
.section-dark h2,.section-dark h3{color:var(--ink)}
.debate-layout>div:last-child{border-color:var(--line);color:var(--text)}
#live-publications,#editionsPane{border-top:0}

/* ---------- boutons ---------- */
.topic-index a,.outlined-link,.format-navigation a{
  display:inline-block;font:700 15px var(--sans);padding:14px 24px;border:1px solid var(--pri);
  background:transparent;color:var(--pri);text-decoration:none;border-radius:0;}
.topic-index a:first-child,.format-navigation a:first-child{background:var(--pri);color:#fff}
.topic-index a:hover,.outlined-link:hover,.format-navigation a:hover{background:var(--band);color:var(--pri);border-color:var(--pri)}
.topic-index a:first-child:hover,.format-navigation a:first-child:hover{background:var(--pri-hover);border-color:var(--pri-hover);color:#fff}

/* ---------- cartes ---------- */
.publication-card,.dossier,.policy-grid>a,.formats>div,.ideas-grid article,.method-grid article,
.letters-callout,.policy-detail-card,.research-feature,.letter-launch,.newsletter-intro,.newsletter-research,
.blog-empty,.notice,.programme-status,.editorial-status{
  background:#fff;border:1px solid var(--line);border-radius:0;;color:var(--text)
}
.publication-card h3{font-size:22px;line-height:1.25;color:var(--ink)}
.publication-card h3 a,.dossier h3 a,.policy-card strong,.policy-detail-card strong,.article-aside a{color:var(--pri);text-decoration:none}
.publication-card p,.dossier p,.policy-grid p,.formats p,.ideas-grid p,.method-grid p,.letter-grid p,.blog-empty p{color:var(--text)}
.policy-card:hover,.policy-detail-card:hover{background:var(--band)}
.dossier.first{background:#fff;color:var(--text);border-top:5px solid var(--pri)}
.dossier.first p,.first .dossier-type{color:var(--text)}
.dossier-count,.format-num,.notice-symbol,.blog-empty-symbol{color:var(--pri)}
.research-feature,.letter-launch{border-top:3px solid var(--acc)}
.blog-aside,.blog-distinction,.research-aside,.newsletter-aside,.article-aside,.letter-operating,.policy-grid{border-color:var(--line)}

/* cartes des trois domaines de recherche (classes à poser sur les 3 cartes existantes) */
.axis-card{border-top:5px solid var(--c,var(--pri))!important}
.axis-card--pp{--c:var(--ax-pp)} .axis-card--sec{--c:var(--ax-sec)} .axis-card--ter{--c:var(--ax-ter)}
.axis-card a{color:var(--c)}

/* pastilles de taxonomie (seuls éléments arrondis) */
.tag{display:inline-block;font:600 12px var(--sans);padding:4px 10px;border-radius:14px;background:var(--band);color:var(--text)}
.tag--pp{background:var(--ax-pp-tint);color:var(--ax-pp)}
.tag--sec{background:var(--ax-sec-tint);color:var(--ax-sec)}
.tag--ter{background:var(--ax-ter-tint);color:var(--ax-ter)}

/* ---------- pages de publication ---------- */
.reading-prose,.article-prose{max-width:68ch;line-height:1.65;color:var(--text)}
.article-prose h2,.article-prose .article-lead{color:var(--ink)}
.reading-prose th{background:var(--band)}
.source-list a,.letter-sources a,.newsletter-source a{color:var(--pri);text-decoration:underline}

/* ---------- images et couvertures : pas d'ombre ---------- */
.home-feature-grid img,.issue-cover img{;border:1px solid var(--line)}

/* ---------- pied de page blanc ---------- */
.footer{background:#fff;color:var(--text);border-top:2px solid var(--pri);font-size:13.5px}
.footer a{color:var(--text)} .footer a:hover{color:var(--pri)}
.footer h2{font:700 14px var(--sans)!important;color:var(--ink);text-transform:none;letter-spacing:0}
.footer-grid p{color:var(--text)}
.programme-footer{border-bottom:1px solid var(--line)}
.footer-bottom,.institution-links{border-top:1px solid var(--line);color:var(--mute);font-size:12.5px}

/* ---------- divers ---------- */
.launch-status{background:var(--band);color:var(--text);border-top:3px solid var(--acc);border-left:1px solid var(--line)}
.launch-status a{color:var(--pri)}
.publication-tools input,.publication-tools select{border:1px solid var(--line);border-radius:0;background:#fff}
.edition-sites fieldset{border:1px solid var(--line)}

/* RÈGLES : pas de dégradé, pas d'ombre, coins droits (sauf pastilles .tag),
   aucune couleur hors palette, contrastes AA. */

/* Adaptation des composants apparus après la rédaction de la surcouche. */
html,body{font-family:var(--sans)}
body{min-width:0}
*,*::before,*::after{;;;}
h1,h2,h3,h4,p,li,small,button,input,select,textarea{font-family:var(--sans)}
h1,h2,h3,h4{font-weight:700;color:var(--ink)}
:where(.home-main,.section,.article-prose,.reading-prose) p{color:var(--text)}
:where(.home-main,.section) a{color:var(--pri)}
:where(.home-main,.section) a:hover{color:var(--pri-hover)}
:where(.eyebrow,.overline,.home-kicker,.home-story-meta,.home-blog-meta,.newsletter-item-head span){color:var(--acc);font:700 13px/1.35 var(--sans);letter-spacing:.02em;text-transform:none}
:where(.meta,.article-meta,.publication-meta,.home-dossier-count span,.publication-date,.home-blog-meta){font-variant-numeric:tabular-nums}
:where(.publication-date,.article-meta,.publication-meta,.home-dossier-count span){color:var(--mute);font-size:13px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--pri)!important;outline-offset:2px!important}
.topline,.header,.nav{background:var(--fond);color:var(--text)}
.topline{border-bottom:1px solid var(--line)}
.header{border-bottom:1px solid var(--line)}
.header-main{min-height:92px}
.nav-inner{gap:clamp(9px,1.25vw,18px);flex-wrap:nowrap}
.nav a,.mirror-menu summary{font:600 14px/1.3 var(--sans);color:var(--ink);border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current],.mirror-menu summary:hover{color:var(--pri);border-bottom-color:var(--pri)}
.mirror-menu>div{background:#FFFFFF;border:1px solid var(--line);}
.mirror-menu summary::after{color:var(--pri)}
.brand{align-items:center;gap:14px}
.brand-xxi{font:800 40px/1 var(--sans)!important;letter-spacing:-.06em;color:var(--ink)!important;border-right:3px solid var(--acc)!important;padding-right:14px}
.brand-mark{display:none!important}
.brand-name{font:700 17px/1.1 var(--sans)!important;letter-spacing:.12em;color:var(--ink)!important}
.brand-name::after{color:var(--mute);font:400 12.5px/1.3 var(--sans)!important;letter-spacing:0}
.footer-brand .brand-xxi{font-size:30px!important}
.footer-brand .brand-name::after{display:none}
.footer{background:var(--fond);color:var(--text);border-top:2px solid var(--pri);padding:35px 0 18px}
.footer-grid{gap:40px}
.footer-grid p,.footer-grid a,.footer a{color:var(--text)!important}
.footer h2{font:700 14px/1.3 var(--sans)!important;color:var(--ink);text-transform:none;letter-spacing:0}
.footer-bottom{border-top:1px solid var(--line);color:var(--mute);font-size:12.5px;margin-top:28px}
.footer-bottom a{color:var(--text)}
.hero,.subhero,.blog-hero{background:var(--band);color:var(--text)}
.hero h1,.subhero h1,.blog-hero h1{font:700 clamp(36px,5.4vw,60px)/1.05 var(--sans);color:var(--ink)}
.hero-intro,.subhero p,.blog-hero p{color:var(--text);max-width:64ch}
.hero-aside{background:#FFFFFF;border-top:3px solid var(--acc);color:var(--text)}
.hero-aside-content,.hero-aside-content p:last-child{color:var(--text)}
.hero-aside-content>a{color:var(--pri)}
.section-dark{background:var(--band);color:var(--text)}
.section-dark h2,.section-dark h3,.section-dark p{color:var(--ink)}
.section-soft,.intro-strip,.institute,.blog-preview{background:var(--band)}
.dossier,.publication-card,.research-feature,.newsletter-intro,.newsletter-research,.home-collection{background:#FFFFFF;color:var(--text);border:1px solid var(--line)}
.dossier.first{background:#FFFFFF;color:var(--text);border-top:5px solid var(--pri)}
.publication-card{border-top:1px solid var(--line)}
.publication-card h3,.publication-card h3 a,.dossier h3 a{font:700 22px/1.25 var(--sans);color:var(--pri)}
.publication-card .eyebrow.tag{font:700 13px/1.3 var(--sans);text-transform:none;letter-spacing:.02em;margin:0 0 12px}
.tag{display:inline-block;align-self:flex-start;border-radius:14px;background:var(--band);color:var(--text);padding:4px 10px}
.tag--pp{background:var(--ax-pp-tint);color:var(--ax-pp)}
.tag--sec{background:var(--ax-sec-tint);color:var(--ax-sec)}
.tag--ter{background:var(--ax-ter-tint);color:var(--ax-ter)}
.tag--neutral{background:var(--band);color:var(--text)}
.topic-index a,.outlined-link,.format-navigation a{border-radius:0;}
.topic-index a:first-child,.format-navigation a:first-child,.home-button-primary{background:var(--pri);color:#FFFFFF;border:1px solid var(--pri)}
.topic-index a:first-child:hover,.format-navigation a:first-child:hover,.home-button-primary:hover{background:var(--pri-hover);color:#FFFFFF}
.home-button{font:700 15px/1.3 var(--sans);padding:14px 24px;border-radius:0}
.home-main{color:var(--text)}
.home-lead,.home-mission,.home-selection,.home-explore,.home-about{background:var(--band);color:var(--text);border-color:var(--line)}
.home-blog,.home-dossiers,.home-collections{background:var(--fond);color:var(--text);border-color:var(--line)}
.home-lead h1{font:700 clamp(36px,5.4vw,60px)/1.05 var(--sans);color:var(--ink)}
.home-main h2,.home-main h3{font-family:var(--sans);font-weight:700;line-height:1.16;color:var(--ink)}
.home-section-head h2,.home-explore h2,.home-about h2,.home-mission h2,.home-blog-intro h2{font:700 clamp(28px,3.4vw,40px)/1.12 var(--sans);color:var(--ink)}
.home-lead-summary,.home-mission-grid>div:last-child>p,.home-explore-grid>div>p:last-child{color:var(--text);max-width:64ch}
.home-lead-cover{transform:none!important;}
.home-lead-cover:hover{transform:none!important}
.home-lead-cover img,.home-collection-image img,.publication-cover{;border:1px solid var(--line)}
.home-blog-article,.home-dossier,.home-story,.home-collection{border:1px solid var(--line);background:#FFFFFF;;transform:none}
.home-blog-article{border-top:3px solid var(--acc);border-left:1px solid var(--line)}
.home-blog-article h3,.home-blog-article h3 a,.home-story h3 a,.home-dossier h3 a{color:var(--pri);font:700 clamp(20px,1.8vw,26px)/1.25 var(--sans)}
.home-dossier{border-top:1px solid var(--line)}
.home-dossier:hover{transform:none}
.home-story-note,.home-story-lettre{border-top:1px solid var(--line)}
.home-story-meta,.home-blog-meta,.home-dossier-count{color:var(--mute)}
.home-dossier-count span{color:var(--mute)}
.home-explore-grid{grid-template-columns:1fr;gap:30px}
.home-explore nav{border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.home-explore nav a.axis-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:170px;padding:19px;border:1px solid var(--line);border-top:5px solid var(--c);background:#FFFFFF;color:var(--c);font:700 20px/1.25 var(--sans)}
.home-explore nav a.axis-card:hover{padding-left:19px;border-color:var(--c)}
.home-explore nav a.axis-card span:first-child{font:700 13px var(--sans);color:var(--c)}
.home-explore nav a.axis-card small{font:400 13px/1.45 var(--sans);color:var(--text)}
.home-collection-lettre{border-top:5px solid var(--ax-pp)}
.home-collection-ajpp{border-top:5px solid var(--pri)}
.home-collection h3{font:700 24px/1.2 var(--sans);color:var(--ink)}
.reading-prose,.article-prose,.monthly-reader,.working-document{max-width:68ch;font:400 17px/1.65 var(--sans);color:var(--text)}
.reading-prose a,.article-prose a,.monthly-reader a,.working-document a,.source-list a{text-decoration:underline;color:var(--pri)}
.article-aside,.research-aside,.newsletter-aside{border-color:var(--line)}
.launch-status,.working-notice,.editorial-status,.research-feature,.letter-launch{background:#FFFFFF;color:var(--text);border:1px solid var(--line);border-top:3px solid var(--acc)}
.launch-status a{color:var(--pri)}
/* Older standalone territorial editions have their own inline layout. */
.standalone-letter header{background:#FFFFFF;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.standalone-letter header a{color:var(--pri)}
.standalone-letter .brand-xxi,.standalone-letter .brand-name{color:var(--ink)}
.standalone-letter main{background:#FFFFFF;color:var(--text)}
.standalone-letter h1,.standalone-letter h2,.standalone-letter h3{font-family:var(--sans);font-weight:700;color:var(--ink)}
.standalone-letter .eyebrow{color:var(--acc)}
.standalone-letter .working-document a{color:var(--pri);text-decoration:underline}
@media(max-width:1366px){.nav-inner{gap:10px}.nav a,.mirror-menu summary{font-size:13px}}
@media(max-width:900px){.nav-inner{flex-wrap:wrap}.home-explore nav{grid-template-columns:1fr}.home-explore nav a.axis-card{min-height:125px}}
@media(max-width:700px){.wrap{padding-left:0;padding-right:0}.nav-inner{flex-direction:column;align-items:stretch;gap:0}.header-main{min-height:76px}.brand-xxi{font-size:34px!important}.brand-name{font-size:14px!important}.home-lead-grid{grid-template-columns:1fr}.home-explore nav{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}
/* The existing format label remains burgundy; its marker carries the domain color. */
.publication-card .eyebrow.tag{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--acc);padding:0;border-radius:0}
.publication-card .eyebrow.tag::before{content:"";display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:14px;background:var(--tag,var(--line))}
.publication-card .tag--pp{--tag:var(--ax-pp)}
.publication-card .tag--sec{--tag:var(--ax-sec)}
.publication-card .tag--ter{--tag:var(--ax-ter)}
.publication-card .tag--neutral{--tag:var(--mute)}
@media(max-width:1200px){.nav-inner{flex-wrap:wrap}}
*:not(.tag){border-radius:0!important}
/* Category landing cards reuse the existing publication-card component. */
.domain-landing--pp{--domain:var(--ax-pp)}
.domain-landing--sec{--domain:var(--ax-sec)}
.domain-landing--ter{--domain:var(--ax-ter)}
.domain-landing .publication-card{border-top:5px solid var(--domain)}
.domain-landing .publication-card .outlined-link{color:var(--domain);border-color:var(--domain);background:transparent}
.domain-landing .publication-card .outlined-link:hover{background:var(--band)}