/* ==========================================================================
   soko.css : couche commune de toutes les pages du site (hors accueil et démos),
   alignée sur l'accueil « Le Banc » (2026-10-06).
   Chargée EN DERNIER dans <head> par scripts/align_brand.py, qui remplace aussi
   la navigation et le pied de page de chaque page par ceux de l'accueil.
   Classes préfixées sk- : les anciennes feuilles (cities.css, svc.css, styles
   internes) utilisent .nav, .logo, footer… pour autre chose ; on évite toute
   collision et on neutralise les règles d'éléments (nav, header, footer, a).
   Typo : fonts.css et svc.css font pointer « Bricolage Grotesque » et
   « Instrument Sans » vers Mona Sans (voir le commentaire de fonts.css).
   ========================================================================== */
/* Polices auto-hébergées. Mona Sans : nom utilisé par la nav et le pied communs.
   JetBrains Mono : manquait sur les pages services (svc.css), repli sur la mono système. */
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(/fonts/mona-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Mona Sans';font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(/fonts/mona-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/jbmono-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/jbmono-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --sk-ivory:#F4F1EA;
  --sk-ivory-2:#ECE7DC;
  --sk-ink:#17150F;
  --sk-klein:#2438C9;
  --sk-klein-deep:#1A2A99;
  --sk-stone:#5E594F;      /* 6,17:1 sur ivoire (l'ancien #7C766A faisait 4,0:1, sous AA) */
  --sk-line:#DFD9CB;
  --sk-on-ink-2:#B5AE9F;   /* 8,27:1 sur encre */
  --sk-sans:'Mona Sans',system-ui,sans-serif;
  --sk-mono:'JetBrains Mono',ui-monospace,monospace;
  --sk-r:4px;
  /* corrige le gris des anciennes feuilles qui l'exposent en variable */
  --stone:#5E594F;
}
/* Barre de défilement de la page masquée (demande d'Antoine 06/10) : Safari l'affichait
   en colonne blanche avec une souris branchée. Le défilement molette, trackpad et
   clavier reste intact. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
/* Lenis lisse déjà le défilement : le scroll-behavior:smooth de svc.css / cities.css
   re-lissait chaque frame (scroll mou, saccadé). Sans Lenis (mouvement réduit), le smooth reste. */
html.lenis{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
/* Titres en Mona Sans élargie, comme l'accueil (axe wdth déclaré dans fonts.css) */
h1,h2,h3{font-stretch:108%}

/* ============ NAVIGATION (copie de l'accueil) ============ */
.sk-nav,.sk-nav *{box-sizing:border-box}
header.sk-nav{
  position:sticky;top:0;left:0;right:0;z-index:60;margin:0;padding:0;width:100%;
  background:color-mix(in srgb,#F4F1EA 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:0;border-bottom:1px solid #DFD9CB;box-shadow:none;color:#17150F;
  font-family:var(--sk-sans);font-size:16px;line-height:1.5;
}
.sk-nav nav{all:unset;display:block}
.sk-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.sk-nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.sk-logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.sk-logo img{display:block;height:48px;width:auto}
.sk-links{display:flex;gap:30px;align-items:center;list-style:none;margin:0;padding:0}
.sk-links li{margin:0;padding:0;list-style:none}
.sk-links a:not(.sk-btn){text-decoration:none;font-family:var(--sk-sans);font-size:14px;font-weight:500;color:#17150F;letter-spacing:0;text-transform:none;background:none;padding:0;border:0}
.sk-links a:not(.sk-btn):hover{color:#2438C9;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* le menu Services ne doit hériter d'aucun style de <summary> de la page (FAQ des articles…) */
.sk-nav .nsv>summary{font-family:var(--sk-sans);font-size:14px;font-weight:500;color:#17150F;background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:6px 0;letter-spacing:0;text-transform:none;line-height:1.5;width:auto}
.sk-nav .nsv>summary:hover{color:#2438C9;background:none}
.sk-nav details.nsv,.sk-nav details.nsv[open]{background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;width:auto;max-width:none}
.sk-nav .nsv-menu{text-align:left;font-family:var(--sk-sans)}
.sk-nav .nsv-menu a{text-transform:none;letter-spacing:0}
.sk-links .sk-btn{background:#2438C9;color:#F4F1EA;text-decoration:none}
.sk-links .sk-btn:hover{background:#1A2A99;color:#F4F1EA;text-decoration:none}
.sk-btn{
  display:inline-flex;align-items:center;gap:14px;background:#2438C9;color:#F4F1EA !important;
  padding:16px 20px 16px 22px;border:0;border-radius:var(--sk-r);
  font-family:var(--sk-sans);font-weight:600;font-size:15.5px;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color .2s,transform .12s;
}
.sk-btn::after{
  content:"";width:15px;height:10px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.sk-btn:hover{background:#1A2A99}
.sk-btn:hover::after{transform:translateX(4px)}
.sk-btn:active{transform:translateY(1px)}
.sk-btn-sm{padding:10px 13px 10px 16px;font-size:13.5px;gap:10px}
.sk-btn-sm::after{width:12px}
.sk-nav :focus-visible,.sk-foot :focus-visible{outline:2px solid #2438C9;outline-offset:3px;border-radius:2px}
.sk-foot :focus-visible{outline-color:#F4F1EA}
@media(max-width:768px){
  .sk-links .sk-hide-m{display:none}
  .sk-links{gap:16px}
  .sk-nav .sk-btn-sm{min-height:44px}
  .sk-nav .nsv>summary{padding:12px 0}
}
@media(max-width:380px){.sk-links li:has(> .sk-btn){display:none}}

/* ============ PIED DE PAGE (copie de l'accueil) ============ */
footer.sk-foot{
  display:block;position:relative;margin:0;border:0;border-radius:0;box-shadow:none;text-align:left;
  background:#17150F;color:#F4F1EA;padding:clamp(56px,8vh,96px) 0 40px;
  font-family:var(--sk-sans);font-size:15px;line-height:1.6;
}
.sk-foot *{box-sizing:border-box}
.sk-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:44px}
.sk-foot p{margin:0;color:inherit;font-size:14px}
.sk-foot .sk-foot-tag{color:#B5AE9F;font-size:14px;margin-top:18px;max-width:26em}
.sk-foot-log{margin-top:20px;font-size:14px;color:#B5AE9F}
.sk-foot-log b{color:#F4F1EA;font-weight:600}
.sk-foot h4,.sk-foot h5{font-family:var(--sk-sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#B5AE9F;margin:0 0 16px;font-stretch:100%}
.sk-foot h5{margin-bottom:12px}
.sk-foot ul{list-style:none;margin:0;padding:0}
.sk-foot li{margin:0 0 10px;padding:0;list-style:none}
.sk-foot a{color:#F4F1EA;text-decoration:none;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;background:none;border:0;padding:0;margin:0;display:inline}
.sk-foot a:hover{text-decoration:underline;text-underline-offset:4px;color:#F4F1EA}
.sk-foot .sk-logo img{height:76px}
.sk-foot-social{display:flex;gap:16px;margin-top:20px}
.sk-foot-social a{color:#B5AE9F}
.sk-foot-social a:hover{color:#F4F1EA}
.sk-foot-social svg{display:block}
.sk-foot-seo{border-top:1px solid #3A362C;padding-top:24px;margin-bottom:24px}
.sk-foot-seo-row{display:flex;flex-wrap:wrap;gap:8px 20px}
.sk-foot-seo-row a{color:#B5AE9F;font-size:14px}
.sk-foot-seo-row a:hover{color:#F4F1EA}
.sk-colophon{border-top:1px solid #3A362C;padding-top:22px;margin-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#B5AE9F}
.sk-colophon a{font-size:13px;color:#B5AE9F}
@media(max-width:768px){
  .sk-foot-grid{grid-template-columns:1fr}
  .sk-foot li{margin-bottom:0}
  .sk-foot li a,.sk-foot-seo-row a,.sk-colophon a{display:inline-block;padding:11px 0}
  .sk-foot-seo-row{gap:0 20px}
  .sk-foot-social{gap:2px;margin-left:-13px}
  .sk-foot-social a{padding:13px;display:inline-flex}
}

/* ============ LOT 2 : motifs génériques neutralisés sur tout le site (2026-10-06) ============
   !important assumé : couche de marque chargée en dernier, ces classes sont
   communes à ~100 pages aux spécificités variées (.hero .chip, .mg-dark .section-label…). */
/* Sur-titres : plus d'étiquette encadrée en capitales, une petite ligne + carré, comme « Porte A » sur l'accueil */
.section-label,.hero-eyebrow,.eyebrow,.t-section-label,.t-eyebrow,.kicker,.mg-kicker,.sac-kicker,.t-acq-kicker{
  border:0 !important;background:none !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;
  font-family:var(--sk-sans) !important;font-size:14px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;
  color:inherit !important;opacity:.8;display:inline-flex !important;align-items:center;gap:10px;line-height:1.4 !important;
}
.section-label::before,.hero-eyebrow::before,.eyebrow::before,.t-section-label::before,.t-eyebrow::before,.kicker::before,.mg-kicker::before,.sac-kicker::before,.t-acq-kicker::before{
  content:"" !important;display:block !important;position:static !important;width:9px !important;height:9px !important;background:#2438C9 !important;
  border:0 !important;border-radius:0 !important;margin:0 !important;flex:none;opacity:1;
}
.section-label::after,.hero-eyebrow::after,.eyebrow::after,.t-section-label::after,.t-eyebrow::after,.kicker::after,.mg-kicker::after,.sac-kicker::after,.t-acq-kicker::after{content:none !important;display:none !important}
/* Pastilles à coche sous les titres : texte simple séparé par des points */
.hero-chips,.t-hero-trust{gap:4px 0 !important}
.chip,.check-pill{border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.chip svg,.check-pill svg,.check-pill .check{display:none !important}
.hero-chips .chip+.chip::before,.check-pill+.check-pill::before{content:"·";margin:0 10px;opacity:.6}
/* Icônes en tête de carte : retirées, la carte commence par son titre (pas de pictos sur l'accueil) */
.card-icon{display:none !important}

/* ============ MENU SERVICES (repris de l'accueil, pour les pages qui ne l'avaient pas) ============ */
/* ---------- MENU SERVICES (nav) : autonome, préfixe .nsv ---------- */
.nsv{position:relative}
/* pages SEO (cities.css) : la barre est un flex space-between, sans ça le
   menu resterait collé au logo, loin des autres liens. */
.site-header .nav>.nsv{margin-left:auto}
.nsv>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:'Instrument Sans',system-ui,sans-serif;font-size:14px;font-weight:500;color:#17150F;
  padding:6px 0;-webkit-tap-highlight-color:transparent;
}
.nsv>summary::-webkit-details-marker{display:none}
.nsv>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.nsv[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.nsv>summary:hover{color:#2438C9}
.nsv-menu{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  width:min(350px,calc(100vw - 28px));background:#F4F1EA;border:1px solid #DFD9CB;border-radius:20px;
  padding:10px;box-shadow:0 40px 70px -34px rgba(23,21,15,.42);z-index:60;
}
.nsv[open] .nsv-menu{animation:nsvIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes nsvIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%)}}
.nsv-menu a{
  display:block;text-decoration:none;color:#17150F;padding:11px 14px;border-radius:14px;
  font-size:14.5px;font-weight:600;line-height:1.35;transition:background .2s,color .2s;
}
.nsv-menu a small{display:block;font-weight:400;font-size:12.5px;color:#7C766A;margin-top:2px;transition:color .2s}
.nsv-menu a:hover,.nsv-menu a:focus-visible{background:#2438C9;color:#F4F1EA}
.nsv-menu a:hover small,.nsv-menu a:focus-visible small{color:rgba(244,241,234,.82)}
.nsv-menu a::after{content:none}
.nsv-h{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#7C766A;padding:10px 14px 4px}
.nsv-h+.nsv-h,.nsv-menu a+.nsv-h{margin-top:6px;border-top:1px solid #DFD9CB;padding-top:12px}
.nsv-all{
  margin-top:6px;border-top:1px solid #DFD9CB;padding-top:8px;
}
.nsv-all a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#2438C9;font-weight:500}
/* Le menu prend de la place dans la barre : sur mobile, le CTA voisin des
   pages historiques (.nav-cta / .btn-cta-nav) doit rester sur une ligne. */
@media(max-width:600px){
  .nsv>summary{font-size:13.5px}
  .nav-in{gap:12px}
  .nav-cta,.btn-cta-nav,.nav .btn-sm{white-space:nowrap;padding-left:14px!important;padding-right:14px!important;font-size:12.5px!important}
}
@media(max-width:560px){
  .nsv-menu{position:fixed;top:76px;left:14px;right:14px;transform:none;width:auto}
  .nsv[open] .nsv-menu{animation:nsvInM .28s cubic-bezier(.2,.8,.2,1) both}
  @keyframes nsvInM{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.nsv[open] .nsv-menu{animation:none}}