/* =========================================================
   XXI AVOCATS — SURCOUCHE CHARTE v1.1 « Indigo XXI »
   Déclinaison commune avec XXI Institut et XXI Formations — 20 octobre 2026.
   À charger EN DERNIER, après style.css, sur toutes les pages de avocats.xxi.legal.
   Classes relevées sur le site en ligne le 20/10/2026. Apparence uniquement.
   Pas de Marianne, pas de bleu institutionnel, pas de dégradé, pas d'ombre.
   ========================================================= */
@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');

:root{
  --pri:#1d2b7a; --pri-hover:#2a3c9e; --acc:#8c3b4b;
  --text:#3a3a3a; --mute:#666666; --band:#f5f2ec; --fond:#ffffff;
  --ax-pp:#1d2b7a;  --ax-pp-tint:#e4e6ef;
  --ax-sec:#2e5e4e; --ax-sec-tint:#e6ecea;
  --ax-ter:#9a4a2e; --ax-ter-tint:#f3e9e6;
  --sans:'Hanken Grotesk','Inter',system-ui,arial,sans-serif;
  --maxw:1120px;
  /* anciennes variables redirigées (à supprimer de style.css une fois migré) */
  --blue:#1d2b7a;   /* liens, titres cliquables, boutons */
  --navy:#161616;   /* logo, textes forts — les fonds sombres sont neutralisés plus bas */
  --red:#1d2b7a;    /* anciens liens rouges → indigo ; le bordeaux est posé explicitement */
  --ink:#161616;
  --muted:#666666;
  --line:#dddddd;
  --pale:#f5f2ec;
  --display:'Hanken Grotesk','Inter',system-ui,arial,sans-serif;
}

/* ---------- base ---------- */
body{font:400 17px/1.6 var(--sans);color:var(--text);background:var(--fond)}
a{color:var(--pri)} a:hover{color:var(--pri-hover)}
:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,.nav-resources summary:focus-visible{outline:2px solid var(--pri)!important;outline-offset:2px!important}
.wrap{max-width:var(--maxw);padding-left:26px;padding-right:26px}
*{box-shadow:none!important;transition:none!important}

/* toutes les anciennes polices → Hanken Grotesk */
h1,h2,h3,h4,.monogram,.brandname,.brandname small,.heroart span,.heroart strong,.tile h3,.servicecard h3,.detail h3,
.foot h2,.case strong,.publicationempty strong,.policy-list a,.policy-group-title,.profilemark,.contactbutton,button.menu,
.site-home .xxi-news h3,.site-home .home-portraits strong,.hero h1,.pagehero h1,.articlehero h1,.section h2,.page h2{
  font-family:var(--sans)!important;font-style:normal
}
h1,h2,h3,h4{font-weight:700;color:var(--ink)}
.hero h1,.pagehero h1,.articlehero h1{font-weight:700;font-size:clamp(36px,5.4vw,60px);line-height:1.05;letter-spacing:-.015em}
.section h2,.page h2{font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.lead,.pagehero p,.section .wrap>p{color:var(--text)}
.lead{font-size:18px;max-width:64ch}
em,blockquote,q{font-style:italic}

/* ---------- sur-titres : bordeaux, SANS capitales (déclinaison Institut) ---------- */
.eyebrow,.kicker,.heroart span,.pagehero .kicker{
  font:700 13px/1.3 var(--sans)!important;letter-spacing:.02em!important;text-transform:none!important;
  color:var(--acc)!important;font-variant-numeric:tabular-nums
}
.articlemeta,.xxi-news small,.training-meta,.training-audience,.controlmatrix caption,.example-note{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- bandeau des trois structures (ancienne .top bleu nuit) ---------- */
.top{background:#fff;color:var(--text);border-bottom:1px solid var(--line);font-size:13px;letter-spacing:0}
.top .wrap{max-width:1200px;justify-content:flex-end;gap:18px;padding-top:6px;padding-bottom:6px}
.top a{color:var(--text);text-decoration:none}
.top a:hover,.top a[aria-current="page"]{color:var(--pri);text-decoration:underline;text-underline-offset:3px}
.top a[aria-current="page"]{font-weight:600}

/* ---------- logo XXI | AVOCATS ---------- */
header,.brandrow{background:#fff}
.brandrow{max-width:1200px;padding-top:16px;padding-bottom:16px}
.brand{color:var(--ink);gap:14px}
.monogram{font:800 40px/1 var(--sans)!important;letter-spacing:-.06em;color:var(--ink);border-right:3px solid var(--acc);padding-right:14px}
.brandname{font:700 17px/1.1 var(--sans)!important;letter-spacing:.12em;color:var(--ink)}   /* « AVOCATS » reste en capitales : c'est le logo */
.brandname small{font:400 12.5px/1.3 var(--sans)!important;color:var(--mute);margin-top:4px}
.headaside{display:none}   /* mention à droite du logo supprimée, comme sur XXI Institut */

/* ---------- menu blanc ---------- */
.nav{background:#fff;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav .wrap{max-width:1200px;justify-content:flex-start;gap:0 15px}
.nav a,.nav-resources summary{color:var(--ink);font:600 14px/1.4 var(--sans)!important;padding:14px 0;border-left:0!important;border-right:0!important;border-bottom:2px solid transparent;background:transparent}
.nav a:last-child{border-right:0}
.nav a:hover,.nav a[aria-current=page],.nav-resources summary:hover,.nav-resources[open] summary{background:transparent;color:var(--ink);border-bottom-color:var(--pri)}
.nav-resources-list{background:#fff;border:1px solid var(--line);border-top:1px solid var(--line)}
.nav-resources-list a{color:var(--ink);padding:12px 16px;border-bottom:1px solid var(--line)}
.nav-resources-list a:hover,.nav-resources a[aria-current=page]{background:var(--band)}
/* « Contact » (dernier lien du menu) en bouton primaire compact */
.nav .wrap>a[href*="contact"]{margin-left:auto;align-self:center;background:var(--pri);color:#fff;padding:10px 16px;border:1px solid var(--pri)}
.nav .wrap>a[href*="contact"]:hover{background:var(--pri-hover);color:#fff}
button.menu{background:transparent;border:1px solid var(--pri);color:var(--pri);border-radius:0}
@media(max-width:620px){.nav-resources-list{background:#fff}.nav a,.nav-resources summary{padding:12px 0;border-bottom:1px solid var(--line)}.nav .wrap>a[href*="contact"]{margin:12px 0}}

/* ---------- accroches sur beige ---------- */
.hero,.pagehero,.articlehero{background:var(--band)!important;color:var(--ink)}
.hero .wrap{min-height:0;padding-top:64px;padding-bottom:64px}
.hero p,.hero .hero-description,.articlehero p:not(.kicker),.pagehero p{color:var(--text)}
.hero .hero-purpose{font:700 21px/1.4 var(--sans);color:var(--ink)}
.heroart{background:transparent;border-top:3px solid var(--acc);border-bottom:0;padding:24px 0 0}
.heroart strong{font:700 26px/1.25 var(--sans)!important;color:var(--ink)}
.herocta,.contactmail,.contactbutton{display:inline-block;background:var(--pri);color:#fff;border:1px solid var(--pri);font:700 15px/1.2 var(--sans);padding:14px 24px;border-radius:0;text-decoration:none}
.herocta:hover,.contactmail:hover,.contactbutton:hover{background:var(--pri-hover);border-color:var(--pri-hover);color:#fff}
.breadcrumb,.pagehero .breadcrumb{color:var(--pri)}

/* ---------- alternance blanc / beige ---------- */
.section{background:#fff;padding:64px 0}
.section.alt,.policy-feedback{background:var(--band)}

/* ---------- cartes ---------- */
.tile,.servicecard,.detailgrid>a.detail,.regional-grid .tile{background:#fff;border:1px solid var(--line);border-radius:0}
.tile:hover,.servicecard:hover,.detailgrid>a.detail:hover,.policy-list a:hover{background:var(--band)}
.tile h3,.servicecard h3,.detail h3,.policy-list a,.regional-grid h3 a{color:var(--pri);font-weight:700}
.tile p,.servicecard>p,.detail p,.policy-feedback .detail p,.policy-domain-feedback{color:var(--text)}
.tile .num,.servicecard .num{color:var(--pri);font-weight:700;font-variant-numeric:tabular-nums}
.tile .more,.servicecard .more,.detailgrid>a.detail .more,.editoriallinks,.editoriallinks a,.home-aside a,.home-cardlinks a,.actionlink,.back,.trainingside a,.portrait-link,.home-portraits .portrait-link,.policy-list span{color:var(--pri)}
.detail{border-top:1px solid var(--line)}
.policy-feedback .detail{border-top-color:var(--line)}
.grid,.servicegrid{background:transparent;border:0}

/* trois domaines d'expertise : barre de 5 px aux couleurs des axes */
.home-three .tile{border-top:5px solid var(--ax-pp)}
.home-three .tile:nth-child(2){border-top-color:var(--ax-sec)}
.home-three .tile:nth-child(3){border-top-color:var(--ax-ter)}
.home-three .tile h3{color:var(--ink)}
.home-three .tile:nth-child(1) .num,.home-three .tile:nth-child(1) .more{color:var(--ax-pp)}
.home-three .tile:nth-child(2) .num,.home-three .tile:nth-child(2) .more{color:var(--ax-sec)}
.home-three .tile:nth-child(3) .num,.home-three .tile:nth-child(3) .more{color:var(--ax-ter)}

/* pastilles de taxonomie (seuls éléments arrondis) — classes à poser si le rattachement est certain */
.tag{display:inline-block;font:600 12px var(--sans);padding:3px 10px;border-radius:14px;background:#eee;color:#2a2a2a}
.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)}

/* ---------- « 01 / Actualités et décryptages » ---------- */
.site-home .xxi-news article{background:#fff;border:0;border-top:1px solid var(--line);color:var(--text)}
.site-home .xxi-news article:first-child{background:#fff;border:1px solid var(--line);border-top:3px solid var(--acc);color:var(--text)}
.site-home .xxi-news h3,.site-home .xxi-news h3 a{font-weight:700!important;font-size:20px;line-height:1.3;color:var(--pri)}
.site-home .xxi-news article:first-child h3,.site-home .xxi-news article:first-child h3 a{font-size:26px;color:var(--pri)}
.site-home .xxi-news p{color:var(--text)}

/* ---------- « 06 / Le cabinet » ---------- */
.home-aside{background:#fff;border:1px solid var(--line);border-top:3px solid var(--acc)}
.home-portraits img,.profile-photo{border-bottom:0}
.site-home .home-portraits strong,.home-portraits strong{font:700 22px/1.3 var(--sans)!important;color:var(--ink)}
.home-portraits span{color:var(--mute)}
.home-portraits .portrait-summary{color:var(--text)}
.profilemark{background:var(--pri);border-bottom:0;color:#fff}
.profiletitle{color:var(--ink)}

/* ---------- bandeau d'appel (07 / Entrer en relation) ---------- */
.callout,.band,.trainingbar{background:var(--pri);color:#fff}
.callout h2{color:#fff}
.callout p:not(.eyebrow),.band,.trainingbar{color:rgba(255,255,255,.86)}
.callout .eyebrow{color:rgba(255,255,255,.86)!important}
.callout .action{background:#fff;color:var(--pri);border:1px solid #fff;font:700 15px/1.2 var(--sans);padding:14px 24px}
.callout .action:hover{background:var(--band);color:var(--pri)}

/* ---------- encadrés, notes, tableaux ---------- */
.case,.note,.trainingnote,.publicationempty,.policy-domain-feedback{border-left:3px solid var(--pri);background:var(--band);color:var(--text)}
.trainingside{border-top:3px solid var(--acc)}
.disclaimer{background:var(--band);color:var(--text)}
.controlmatrix thead th{background:var(--pri);color:#fff}
.controlmatrix tbody th{color:var(--ink)}
.controlmatrix tbody tr:nth-child(even){background:var(--band)}
.sources a{color:var(--pri);text-decoration:underline}
.prose{max-width:68ch;line-height:1.65}
.prose .intro{color:var(--ink)}
.anchorlinks a{border:1px solid var(--line);color:var(--pri);border-radius:0}
.anchorlinks a:hover{border-color:var(--pri);color:var(--pri);background:var(--band)}
.territory-entry a{border:1px solid var(--pri);color:var(--pri)}
.policy-complements,.wix-enrichment{border-top-color:var(--line)}

/* ---------- formulaire de contact : couleurs et police uniquement ---------- */
.contactfield label{color:var(--ink);font-weight:600}
.contactfield input,.contactfield select,.contactfield textarea,#demande-sortie{border:1px solid var(--mute);border-radius:0;font-family:var(--sans);color:var(--ink)}

/* ---------- pied de page blanc ---------- */
.foot{background:#fff;color:var(--text);border-top:2px solid var(--pri);font-size:13.5px}
.foot h2{color:var(--ink);font-size:20px!important}
.foot strong{color:var(--ink)}
.foot a{color:var(--text)} .foot a:hover{color:var(--pri)}
.fine{border-top:1px solid var(--line);color:var(--mute);font-size:12.5px}

/* RÈGLES : pas de dégradé, pas d'ombre, coins droits (sauf pastilles .tag),
   aucune couleur hors palette, contrastes AA, bordeaux réservé au filet du logo,
   aux sur-titres et aux filets d'encadrés de mise en avant. */

/* Publications, veille et pages générées par le serveur. */
.site-editorial{background:#fff;color:var(--text)}
.site-editorial header{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.site-editorial header a{color:var(--pri)}
.site-editorial header small{color:var(--mute)}
.site-editorial main{max-width:1200px}
.site-editorial h1{font:700 clamp(36px,5.4vw,60px)/1.05 var(--sans);color:var(--ink)}
.site-editorial h2{font:700 clamp(28px,3.4vw,40px)/1.12 var(--sans);color:var(--ink)}
.site-editorial .index-heading,.site-editorial .article{background:var(--band)}
.site-editorial .article{max-width:900px;border:0}
.site-editorial .article .body{max-width:68ch;font:400 17px/1.65 var(--sans)}
.site-editorial .article .summary{border-left:3px solid var(--pri);color:var(--text)}
.site-editorial .featured{background:#fff;color:var(--text);border:1px solid var(--line);border-top:3px solid var(--acc)}
.site-editorial .featured h2 a,.site-editorial .card h2 a{color:var(--pri)}
.site-editorial .featured .eyebrow{color:var(--acc)}
.site-editorial .featured .meta,.site-editorial .meta,.site-editorial .article-meta{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.site-editorial .card,.site-editorial .panel,.site-editorial .filters{background:#fff;border-color:var(--line);border-radius:0}
.site-editorial .card{border-top:1px solid var(--line)}
.site-editorial .tag{border-radius:14px}
.site-editorial .source-public,.site-editorial .contents{background:var(--band)}
.site-editorial .source-number{color:var(--pri)}
.site-editorial .footer{background:#fff;border-top:2px solid var(--pri)}
.site-editorial button,.site-editorial .button,.site-editorial input,.site-editorial select,.site-editorial textarea{border-radius:0;font-family:var(--sans)}
.site-editorial button.primary{background:var(--pri);border-color:var(--pri)}
.site-editorial .article .body h2{font-size:28px}
@media(max-width:620px){.top .wrap{flex-wrap:wrap;justify-content:flex-start;gap:6px 14px}.site-editorial header{padding:18px 20px}}