/* ===========================================================
   CONCORDANCE — feuille de style partagée
   Système : serif de lecture + mono d'appareil de citation.
   Palette reprise du logo (or #A3854F sur papier), fond clair fixe.
   =========================================================== */

:root{
  --paper:#FBFAF9; --paper-alt:#F1EEE8; --paper-raised:#FFFFFF;
  --ink:#1A1A1F; --ink-soft:#57565C; --ink-faint:#8B887F;
  --gold:#A3854F; --gold-deep:#7C6339; --gold-line:#C9B389;
  --rule:#DEDAD0; --rule-strong:#C9C3B5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-weight:400;text-wrap:balance;margin:0}
.mono{font-family:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,"Courier New",monospace}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.col{max-width:76ch}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* justified running prose, ragged for display/UI text */
.col p, .duo p, .rail-layout p, .case p, ul.tick li, .split p{
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto
}

/* ---------- multilingual toggle (fr / en / es / pt) ---------- */
html[data-lang="fr"] [lang="en"],html[data-lang="fr"] [lang="es"],html[data-lang="fr"] [lang="pt"]{display:none}
html[data-lang="en"] [lang="fr"],html[data-lang="en"] [lang="es"],html[data-lang="en"] [lang="pt"]{display:none}
html[data-lang="es"] [lang="fr"],html[data-lang="es"] [lang="en"],html[data-lang="es"] [lang="pt"]{display:none}
html[data-lang="pt"] [lang="fr"],html[data-lang="pt"] [lang="en"],html[data-lang="pt"] [lang="es"]{display:none}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 32px;max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:20px;height:25px;flex:none;color:var(--gold)}
.brand .word{font-size:15px;letter-spacing:.22em;color:var(--ink)}
nav.main{display:flex;align-items:center;gap:22px}
nav.main a{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  padding:3px 0;border-bottom:1px solid transparent;white-space:nowrap}
nav.main a:hover,nav.main a.active{color:var(--ink);border-bottom-color:var(--gold)}
nav.main .has-sub{position:relative}
nav.main .has-sub > a::after{content:"▾";font-size:8px;margin-left:5px;vertical-align:1px}
nav.main .submenu{display:none;position:absolute;top:100%;left:0;padding-top:14px;min-width:190px}
nav.main .submenu-panel{background:var(--paper-raised);border:1px solid var(--rule);
  padding:6px 0;box-shadow:0 16px 30px -18px rgba(20,15,5,.28)}
nav.main .has-sub:hover .submenu{display:block}
nav.main .submenu a{display:block;padding:10px 18px;border-bottom:none;white-space:nowrap}
nav.main .submenu a:hover{background:var(--paper-alt)}
.langsw{display:flex;align-items:center;font-size:11px;margin-left:4px}
.langsw select{background:var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B887F' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size:9px;border:1px solid var(--rule);border-radius:2px;cursor:pointer;
  color:var(--ink-soft);padding:4px 22px 4px 9px;font:inherit;letter-spacing:.05em;
  text-transform:uppercase;appearance:none;-webkit-appearance:none}
.langsw select:hover,.langsw select:focus{color:var(--ink);border-color:var(--gold-deep)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);border-radius:2px;
  padding:8px 10px;cursor:pointer;color:var(--gold-deep)}
.menu-btn span{display:block;width:18px;height:1px;background:currentColor;margin:4px 0}

/* ---------- hero (home) ---------- */
.hero{padding:80px 0 76px}
.hero .mark{display:flex;justify-content:center;margin-bottom:34px}
.hero .mark svg{width:64px;height:80px;color:var(--gold)}
.kicker{text-align:center;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 30px}
.motto{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin:0 0 8px}
.motto h1{font-size:44px;letter-spacing:.01em}
.motto .div{width:1px;height:40px;background:var(--rule-strong)}
.motto .en{font-size:22px;font-style:italic;color:var(--ink-soft)}
.hero .lede{max-width:62ch;margin:34px auto 0;text-align:center;font-size:18.5px;color:var(--ink-soft)}
.hero .cta{display:flex;justify-content:center;gap:34px;margin-top:38px;flex-wrap:wrap}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:52px 0 44px;border-bottom:1px solid var(--rule)}
.page-hero .inner{display:grid;grid-template-columns:1fr 150px;gap:40px;align-items:center}
.page-hero .kicker{text-align:left;margin-bottom:16px}
.page-hero h1{font-size:36px}
.page-hero .lede{margin:18px 0 0;max-width:64ch;text-align:left;font-size:18px;
  color:var(--ink-soft);font-style:italic}
.page-hero .glyph{color:var(--gold);opacity:.85}
.page-hero .glyph svg{width:100%;height:auto}

/* ---------- links / cta ---------- */
.cta a{font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:1px solid var(--gold-line)}
.cta a:hover{border-color:var(--gold)}
.cta a.primary{color:var(--gold-deep);border-color:var(--gold-deep)}
.more{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--gold-deep);
  border-bottom:1px solid var(--gold-line)}
.more:hover{border-color:var(--gold-deep)}

/* ---------- section scaffolding ---------- */
section{padding:64px 0;border-top:1px solid var(--rule)}
section:first-child{border-top:none}
section.alt{background:var(--paper-alt)}
.mark-row{display:flex;align-items:baseline;gap:14px;margin-bottom:34px}
.mark-row .tag{font-size:11px;letter-spacing:.12em;color:var(--gold-deep);white-space:nowrap}
.mark-row .rule{flex:1;height:1px;background:var(--rule)}
h2{font-size:27px;margin-bottom:.5em}
h3{font-size:20px}
.epi{font-style:italic;color:var(--ink-soft);font-size:17.5px;margin:-6px 0 22px}
.lead{font-size:18.5px;color:var(--ink-soft)}

/* ---------- pair (two even columns, no illustration) ---------- */
.pair{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start}
@media(max-width:860px){.pair{grid-template-columns:1fr}}

/* ---------- text + illustration split ---------- */
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center}
.split .illus{color:var(--gold);opacity:.9}
.split .illus svg{width:100%;height:auto}
.split .illus figcaption{margin-top:14px;text-align:center;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}

/* ---------- two-column duo (split by hairline) ---------- */
.duo{display:grid;grid-template-columns:1fr 1px 1fr;gap:48px;align-items:start}
.duo .rule-v{background:var(--rule-strong);align-self:stretch}
.duo .glyph{color:var(--gold);opacity:.85;width:56px;margin-bottom:18px}
.duo h3{margin-bottom:.3em;color:var(--ink)}
.duo .tag{display:block;font-size:11px;letter-spacing:.12em;color:var(--gold-deep);margin-bottom:12px}
.duo p{color:var(--ink-soft)}
@media(min-width:861px){.duo.duo-contact{grid-template-columns:1.2fr 1px 1fr}}

/* ---------- ledger (2-3 hairline-divided columns) ---------- */
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 0;row-gap:30px}
.ledger.two{grid-template-columns:repeat(2,1fr)}
.ledger > div{padding:0 34px;border-left:1px solid var(--rule)}
.ledger > div:nth-child(3n+1){padding-left:0;border-left:none}
.ledger.two > div:nth-child(3n+1){padding-left:34px;border-left:1px solid var(--rule)}
.ledger.two > div:nth-child(2n+1){padding-left:0;border-left:none}
.ledger .tag{display:block;font-size:11px;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:10px}
.ledger p{color:var(--ink-soft);font-size:15.5px;margin:0;text-align:justify;hyphens:auto}

/* ---------- marginalia rail ---------- */
.rail-layout{display:grid;grid-template-columns:170px 1fr;gap:44px}
.rail-layout .rail{font-size:11.5px;color:var(--ink-faint);line-height:2;padding-top:6px}
.rail-layout .rail .item{margin-bottom:18px}
.rail-layout .rail .num{display:block;color:var(--gold-deep);font-size:12.5px}
.rail-layout p{color:var(--ink-soft)}

/* ---------- lists ---------- */
ul.tick{list-style:none;padding:0;margin:0}
ul.tick li{position:relative;padding-left:24px;margin:0 0 13px;color:var(--ink-soft)}
ul.tick li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:1px;background:var(--gold)}
ul.tick li strong{color:var(--ink);font-weight:400;font-style:italic}
ul.tick.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 48px}
@media(max-width:700px){ul.tick.grid2{grid-template-columns:1fr}}

ul.refuse{list-style:none;padding:0;margin:0}
ul.refuse li{padding:14px 0 14px 20px;border-top:1px solid var(--rule);color:var(--ink-soft);
  border-left:2px solid var(--gold-line);text-align:justify;hyphens:auto}
ul.refuse li:first-child{border-top:none}
ul.refuse li .no{display:inline-block;font-size:10.5px;letter-spacing:.1em;color:var(--gold-deep);
  margin-right:8px}

/* ---------- definition grid ---------- */
.defs{display:grid;grid-template-columns:180px 1fr;gap:8px 26px;align-items:baseline}
.defs dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  padding-top:2px}
.defs dd{margin:0 0 16px;color:var(--ink-soft)}

/* ---------- pull quote / callout ---------- */
.pull{background:var(--paper-alt)}
.pull blockquote{margin:0;padding-left:26px;border-left:2px solid var(--gold);
  font-size:23px;line-height:1.5;max-width:58ch}
.pull footer{margin-top:22px;padding-left:28px;font-size:12px;letter-spacing:.05em;color:var(--ink-faint)}

.callout{background:var(--paper-alt);padding:6px 0}
.callout .box{border-left:2px solid var(--gold);padding-left:26px}

/* ---------- case study box ---------- */
.case{background:var(--paper-raised);border:1px solid var(--rule);padding:28px 32px;margin-top:10px}
.case .tag{display:block;font-size:11px;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:10px}
.case p{color:var(--ink-soft);margin:0 0 10px}
.case p:last-child{margin-bottom:0}
.case .term{color:var(--ink);font-style:italic}

/* ---------- pills (languages) ---------- */
.pill{display:inline-block;font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--rule);border-radius:2px;padding:5px 11px;margin:0 8px 8px 0}
.pill.core{color:var(--gold-deep);border-color:var(--gold-line)}

/* ---------- contact form ---------- */
.formwrap{border:1px solid var(--rule);padding:34px;background:var(--paper-raised)}
label.fld{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 6px}
.field{margin-bottom:20px}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  padding:11px 12px;border:1px solid var(--rule);border-radius:2px;background:var(--paper)}
textarea{min-height:130px;resize:vertical;font-family:inherit}
.note{font-size:13px;color:var(--ink-faint)}
.submit-note{display:none;background:var(--paper-alt);border:1px solid var(--rule);
  padding:16px 18px;color:var(--ink-soft);margin-top:14px;font-size:14px}

/* ---------- footer ---------- */
footer.site{background:var(--paper-alt);border-top:1px solid var(--rule);padding:56px 0 30px}
.fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.fcols h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 14px}
.fcols .devise{font-style:italic;color:var(--ink);font-size:16px;margin-top:10px}
.fnav{list-style:none;padding:0;margin:0;font-size:13.5px;line-height:2.1;color:var(--ink-soft)}
.fnav a:hover{color:var(--gold-deep)}
.fnav details{margin:0}
.fnav summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.fnav summary::-webkit-details-marker{display:none}
.fnav summary:hover{color:var(--gold-deep)}
.fnav summary::after{content:"▾";font-size:9px;color:var(--ink-faint);transition:transform .15s}
.fnav details[open] summary::after{transform:rotate(180deg)}
.fnav details ul{list-style:none;margin:0 0 4px;padding:0 0 0 14px;line-height:2}
.fnav details ul a{color:var(--ink-faint);font-size:13px}
.legal{border-top:1px solid var(--rule);margin-top:38px;padding-top:18px;font-size:11.5px;
  color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.todo{color:var(--ink-faint);font-style:italic}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .split{grid-template-columns:1fr}
  .split .illus{max-width:220px;margin:0 auto}
  .page-hero .inner{grid-template-columns:1fr}
  .page-hero .glyph{display:none}
}
@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:30px}
  .duo .rule-v{display:none}
  .ledger,.ledger.two{grid-template-columns:1fr;gap:26px}
  .ledger > div{border-left:none;padding-left:0;padding-top:0}
  .rail-layout{grid-template-columns:1fr;gap:14px}
  .rail-layout .rail{display:flex;flex-wrap:wrap;gap:16px;line-height:1.4}
  .rail-layout .rail .item{margin-bottom:0}
  .fcols{grid-template-columns:1fr;gap:28px}
  .defs{grid-template-columns:1fr;gap:2px}
  .defs dd{margin-bottom:18px}
  nav.main{position:fixed;inset:60px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:0;padding:6px 26px 20px;border-bottom:1px solid var(--rule);
    display:none;box-shadow:0 20px 30px -22px rgba(0,0,0,.25)}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;width:100%;border-bottom:1px solid var(--rule)}
  nav.main .has-sub{width:100%}
  nav.main .submenu{display:block;position:static;padding-top:0;min-width:0}
  nav.main .submenu-panel{border:none;padding:0;box-shadow:none}
  nav.main .submenu a{padding:10px 0 10px 18px;border-bottom:1px solid var(--rule);color:var(--ink-faint)}
  .menu-btn{display:block}
  .bar{padding:12px 20px}
  .motto h1{font-size:32px}
  .motto .en{font-size:18px}
  .page-hero h1{font-size:29px}
}