/* ===================================================================
   Adjuvis-Conseil - Le Tableau des Elements Humains
   Charte : anthracite + bleu royal + blanc, familles en couleurs sobres
   =================================================================== */

:root{
  --ink:        #17181c;
  --anthracite: #3a3a3a;
  --blue:       #2c5db0;
  --blue-700:   #234c92;
  --blue-050:   #eef3fb;
  --paper:      #ffffff;
  --mist:       #f6f8fb;
  --mist-2:     #eef1f6;
  --line:       #e5e9f0;
  --muted:      #6b7280;
  --muted-2:    #9aa1ad;

  /* Familles de traits */
  --HUM:   #b76e79;
  --LEAD:  #2c5db0;
  --CREA:  #2e8b8b;
  --RIG:   #5b6b9e;
  --FORCE: #c07a3e;
  --COMM:  #8a6bb0;
  --SAGE:  #4f7d6a;
  --ENER:  #c69a2b;

  --maxw: 1200px;
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ padding:96px 0; }
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:16px; display:flex; align-items:center;
}
h2.title{
  font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:800; line-height:1.12;
  letter-spacing:-.02em; color:var(--ink); max-width:22ch;
}
.lead{ font-size:1.1rem; color:var(--muted); max-width:60ch; margin-top:18px; }

/* ---------- Header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .25s ease, box-shadow .25s ease;
}
.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:86px; transition:height .25s ease; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.01em; }
/* logo.png est un logo blanc monochrome : on le teinte en anthracite pour le header clair */
.brand img{ height:58px; width:auto; display:block; filter:brightness(0.16); transition:height .25s ease; }
.brand .sep{ width:1px; height:20px; background:var(--line); }
.brand small{ font-weight:600; color:var(--muted); font-size:.78rem; letter-spacing:.02em; }
/* Etat compacte au scroll (JS ajoute .shrink) */
.top.shrink .wrap{ height:62px; }
.top.shrink .brand img{ height:34px; }
.top.shrink{ box-shadow:0 6px 20px -14px rgba(23,24,28,.5); }
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{ font-size:.9rem; font-weight:500; color:var(--anthracite); transition:color .2s; }
.nav a:hover{ color:var(--blue); }
.nav a.active{ color:var(--blue); font-weight:600; }
.nav .cta{
  background:var(--ink); color:#fff; padding:9px 18px; border-radius:999px;
  font-weight:600; transition:transform .2s var(--ease), background .2s;
}
.nav .cta:hover{ background:var(--blue); transform:translateY(-1px); color:#fff; }
.nav .cta.active{ background:var(--blue); color:#fff; }
.burger{ display:none; background:none; border:none; color:var(--ink); cursor:pointer; }

/* ---------- Hero ---------- */
.hero{ padding:84px 0 72px; position:relative; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{
  font-size:clamp(2.3rem,5.2vw,4rem); font-weight:900; line-height:1.04;
  letter-spacing:-.03em;
}
.hero h1 .accent{ color:var(--blue); }
.hero p.sub{ font-size:1.18rem; color:var(--muted); margin-top:24px; max-width:52ch; }
.hero .actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
  font-weight:600; font-size:.96rem; transition:transform .2s var(--ease), box-shadow .2s, background .2s;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -12px var(--blue); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--blue); }
.btn-ghost{ border:1.5px solid var(--line); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; }

/* Hero big element tile */
.hero-tile-wrap{ display:flex; justify-content:center; perspective:1000px; }
.hero-tile{
  width:min(320px,80%); aspect-ratio:1/1.06; border-radius:22px;
  background:linear-gradient(160deg,#fff, #f3f6fb);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(23,24,28,.35), 0 2px 0 #fff inset;
  padding:26px; display:flex; flex-direction:column; position:relative;
  transform:rotateY(-9deg) rotateX(4deg); transition:transform .5s var(--ease);
}
.hero-tile:hover{ transform:rotateY(0deg) rotateX(0deg); }
.hero-tile .num{ font-weight:700; color:var(--blue); font-size:1rem; }
.hero-tile .cat{ position:absolute; top:26px; right:26px; font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--HUM); }
.hero-tile .sym{ font-size:clamp(4rem,9vw,6.4rem); font-weight:800; line-height:1;
  letter-spacing:-.04em; margin:auto 0 6px; color:var(--ink); }
.hero-tile .nm{ font-size:1.25rem; font-weight:600; color:var(--anthracite); }
.hero-tile .foot{ margin-top:10px; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }

.hero-badges{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-badges div{ font-size:.86rem; color:var(--muted); }
.hero-badges b{ display:block; font-size:1.7rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:3px; }

/* ---------- Concept ---------- */
.concept{ background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pullquote{
  font-size:clamp(1.4rem,3vw,2.15rem); font-weight:600; line-height:1.35; letter-spacing:-.01em;
  color:var(--ink); max-width:24ch; margin:0 auto; text-align:center; position:relative;
}
.pullquote .q{ color:var(--blue); font-weight:800; }
.pullquote cite{ display:block; margin-top:22px; font-size:.9rem; font-style:normal; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.concept-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:66px; }
.cpt{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.cpt:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -30px rgba(23,24,28,.4); border-color:#d7deea; }
.cpt .ic{ width:42px; height:42px; color:var(--blue); margin-bottom:16px; }
.cpt .ic svg{ width:100%; height:100%; }
.cpt h3{ font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.cpt p{ font-size:.92rem; color:var(--muted); }

/* ---------- Featured animated cards ---------- */
.featured{ background:var(--ink); color:#fff; }
.featured .eyebrow{ color:#8fb0e6; }
.featured .eyebrow::before{ background:#8fb0e6; }
.featured h2.title{ color:#fff; }
.featured .lead{ color:#aab2c0; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.feat{
  position:relative; background:#1f2128; border:1px solid #2c2f38; border-radius:18px;
  padding:34px 30px; overflow:hidden; transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.feat::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:radial-gradient(120% 90% at 80% 0%, color-mix(in srgb,var(--fc) 16%, transparent), transparent 60%);
  opacity:0; transition:opacity .35s;
}
.feat:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--fc) 55%, #2c2f38); }
.feat:hover::after{ opacity:1; }
.feat .fam-tag{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fc); }
.feat .icon-stage{ height:96px; width:96px; margin:14px 0 22px; color:var(--fc); position:relative; }
.feat .icon-stage svg{ width:100%; height:100%; overflow:visible; }
.feat h3{ font-size:1.35rem; font-weight:700; letter-spacing:-.01em; }
.feat p{ font-size:.92rem; color:#aab2c0; margin-top:8px; }
.feat .hint{ margin-top:16px; font-size:.76rem; color:#6b7280; display:flex; align-items:center; gap:6px; }
.feat .hint svg{ width:14px; height:14px; }

/* --- bespoke SVG hover animations --- */
/* Epee qui sort du fourreau (Courageux) */
.feat:hover .blade{ transform:translate(20px,-20px); }
.blade{ transition:transform .5s var(--ease); }
/* Main qui se tend / salue (Aidant) */
.feat:hover .hand{ transform:rotate(0deg); }
.hand{ transform-box:fill-box; transform-origin:80% 90%; transform:rotate(-16deg); transition:transform .5s var(--ease); }
.feat:hover .wave{ animation:wave .8s var(--ease); }
@keyframes wave{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(10deg)} 60%{transform:rotate(-8deg)} }
/* Ampoule / etincelle (Creatif) */
.feat:hover .spark{ opacity:1; transform:scale(1); }
.spark{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; transition:all .4s var(--ease); }
.feat:hover .spark2{ transition-delay:.08s; }
.feat:hover .spark3{ transition-delay:.16s; }
.feat:hover .bulb-glow{ opacity:.9; }
.bulb-glow{ opacity:0; transition:opacity .4s; }
/* Coeur qui bat (Humain) */
.feat:hover .heart{ animation:beat 1s var(--ease) infinite; }
.heart{ transform-box:fill-box; transform-origin:center; }
@keyframes beat{ 0%,100%{transform:scale(1)} 25%{transform:scale(1.14)} 40%{transform:scale(1)} 55%{transform:scale(1.09)} }
/* Drapeau qui se plante (Leader) */
.feat:hover .flag{ transform:scaleX(1); }
.flag{ transform-box:fill-box; transform-origin:left center; transform:scaleX(.1); transition:transform .45s var(--ease); }
.feat:hover .flagpole{ stroke-dashoffset:0; }
.flagpole{ stroke-dasharray:60; stroke-dashoffset:60; transition:stroke-dashoffset .5s var(--ease); }
/* Loupe qui balaie (Curieux) */
.feat:hover .lens{ animation:scan 1.4s var(--ease) infinite; }
.lens{ transform-box:fill-box; transform-origin:center; }
@keyframes scan{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(16px,8px)} }
/* Fleche / eclair (Dynamique) */
.feat:hover .bolt{ animation:flash .7s var(--ease) infinite; }
@keyframes flash{ 0%,100%{opacity:1} 50%{opacity:.35} }
/* Cible / strateg (Stratege) */
.feat:hover .arrowdart{ transform:translate(0,0); opacity:1; }
.arrowdart{ transform:translate(-22px,22px); opacity:0; transition:all .5s var(--ease); }
.feat:hover .ring-p{ stroke-dashoffset:0; }
.ring-p{ stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset .6s var(--ease); }

/* Ecrans tactiles : on rejoue les animations a l'entree dans le viewport */
.feat.play .blade{ transform:translate(20px,-20px); }
.feat.play .hand{ transform:rotate(0deg); }
.feat.play .wave{ animation:wave .9s var(--ease); }
.feat.play .spark{ opacity:1; transform:scale(1); }
.feat.play .bulb-glow{ opacity:.9; }
.feat.play .flag{ transform:scaleX(1); }
.feat.play .flagpole{ stroke-dashoffset:0; }
.feat.play .lens{ animation:scan 1.6s var(--ease) infinite; }
.feat.play .arrowdart{ transform:translate(0,0); opacity:1; }
.feat.play .ring-p{ stroke-dashoffset:0; }

/* ---------- Periodic table ---------- */
.table-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.controls{ display:flex; flex-direction:column; gap:16px; margin:38px 0 26px; }
.search{ position:relative; max-width:340px; }
.search input{
  width:100%; padding:12px 16px 12px 44px; border:1.5px solid var(--line); border-radius:999px;
  font-size:.95rem; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-050); }
.search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted-2); }
.legend{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; font-size:.82rem; font-weight:600; color:var(--anthracite);
  transition:all .2s var(--ease);
}
.chip .dot{ width:10px; height:10px; border-radius:50%; background:var(--c); }
.chip[aria-pressed="true"]{ color:#fff; border-color:transparent; background:var(--c); }
.chip:hover{ transform:translateY(-1px); }
.chip.all[aria-pressed="true"]{ background:var(--ink); }

.ptable{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; margin-top:8px;
}
/* Mode curated : les traits non-vedettes sont caches par defaut */
.ptable[data-state="curated"] .el--extra{ display:none; }
.ptable[data-state="full"] .el--extra{ display:flex; animation:elIn .45s var(--ease) both; }
@keyframes elIn{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.el{
  position:relative; aspect-ratio:1/1.08; border-radius:11px; padding:9px 9px 8px;
  background:color-mix(in srgb, var(--c) 7%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 22%, var(--line));
  display:flex; flex-direction:column; cursor:pointer; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s, background .22s, opacity .3s, border-color .22s;
}
.el .n{ font-size:.62rem; font-weight:700; color:color-mix(in srgb,var(--c) 70%, var(--ink)); }
.el .s{ font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:800; letter-spacing:-.03em; margin:auto 0 1px; color:var(--ink); }
.el .nom{ font-size:.6rem; font-weight:500; color:var(--muted); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.el:hover{ transform:translateY(-4px) scale(1.03); z-index:2;
  background:var(--c); border-color:var(--c);
  box-shadow:0 18px 30px -16px color-mix(in srgb,var(--c) 80%, transparent); }
.el:hover .n{ color:rgba(255,255,255,.85); }
.el:hover .s{ color:#fff; }
.el:hover .nom{ color:rgba(255,255,255,.92); }
.el.dim{ opacity:.14; filter:grayscale(.6); pointer-events:none; }
.el.hide{ display:none; }
.table-empty{ text-align:center; color:var(--muted); padding:40px 0; display:none; }

/* ---------- Composes + Composeur ---------- */
.compose{ background:var(--paper); }
.compound-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.compound{
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  border-left:3px solid var(--fc); transition:transform .3s var(--ease), box-shadow .3s;
}
.compound:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(23,24,28,.4); }
.formula{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.formula .plus{ color:var(--muted-2); font-weight:700; }
.mini-el{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:52px; padding:7px 8px; border-radius:9px; line-height:1.1;
  background:color-mix(in srgb, var(--c) 10%, #fff); border:1px solid color-mix(in srgb, var(--c) 26%, var(--line));
}
.mini-el b{ font-size:1.05rem; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.mini-el i{ font-style:normal; font-size:.58rem; font-weight:500; color:var(--muted); max-width:64px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result{ display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
.result .eq{ font-size:1.4rem; font-weight:800; color:var(--fc); line-height:1; }
.result h3{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.result p{ font-size:.88rem; color:var(--muted); margin-top:4px; }

.builder{ margin-top:34px; }
.builder-inner{
  background:linear-gradient(160deg,#1f2128,#171820); color:#fff; border-radius:22px; padding:38px;
  border:1px solid #2c2f38;
}
.builder-head h3{ font-size:1.5rem; font-weight:800; letter-spacing:-.01em; }
.builder-head p{ color:#aab2c0; font-size:.94rem; margin-top:8px; max-width:64ch; }
.quickpick{ display:flex; flex-wrap:wrap; gap:9px; margin:24px 0; }
.qp{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border-radius:999px;
  background:#23252e; border:1px solid #33363f; color:#d7dbe2; font-size:.86rem; font-weight:500;
  transition:all .2s var(--ease);
}
.qp b{ display:grid; place-items:center; width:24px; height:24px; border-radius:6px; font-size:.74rem; font-weight:800;
  background:color-mix(in srgb,var(--c) 30%, #23252e); color:#fff; }
.qp:hover{ border-color:var(--c); transform:translateY(-1px); }
.qp.on{ background:var(--c); border-color:var(--c); color:#fff; }
.qp.on b{ background:rgba(255,255,255,.2); }

.beaker{ background:#15161c; border:1px dashed #363944; border-radius:16px; padding:22px; min-height:92px;
  display:flex; align-items:center; transition:transform .1s; }
.beaker.shake{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.beaker-empty{ color:#5f6672; font-size:.92rem; width:100%; text-align:center; }
.beaker-items{ display:flex; flex-wrap:wrap; gap:10px; width:100%; }
.beaker-el{
  display:inline-flex; align-items:center; gap:9px; padding:9px 10px 9px 9px; border-radius:11px;
  background:color-mix(in srgb,var(--c) 20%, #1f2128); border:1px solid var(--c); color:#fff; font-size:.9rem; font-weight:500;
}
.beaker-el b{ display:grid; place-items:center; width:26px; height:26px; border-radius:7px; font-size:.78rem; font-weight:800;
  background:var(--c); color:#fff; }
.beaker-el i{ font-style:normal; cursor:pointer; color:rgba(255,255,255,.6); font-size:1.15rem; line-height:1; padding:0 2px; }
.beaker-el i:hover{ color:#fff; }
.verdict[hidden]{ display:none; }
.verdict{ display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; margin-top:22px;
  padding-top:22px; border-top:1px solid #2c2f38; }
.verdict-arch small{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#6b7280; }
.verdict-arch b{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
.verdict p{ font-size:.94rem; color:#c2c8d2; }
.clearbtn{ background:none; border:1px solid #363944; color:#aab2c0; padding:10px 18px; border-radius:999px;
  font-weight:600; font-size:.86rem; white-space:nowrap; transition:all .2s; }
.clearbtn:hover{ border-color:#5f6672; color:#fff; }

/* ---------- Approche (4 acteurs) ---------- */
.approche{ background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.actors{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
.actor{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;
  border-top:3px solid var(--ac); transition:transform .3s var(--ease), box-shadow .3s;
}
.actor:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(23,24,28,.4); }
.actor .ic{ width:40px; height:40px; color:var(--ac); margin-bottom:16px; }
.actor h3{ font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.actor p{ font-size:.9rem; color:var(--muted); }
.combinatoire{ text-align:center; margin-top:44px; font-size:1rem; color:var(--muted); }
.combinatoire b{ color:var(--ink); font-weight:600; }

/* ---------- Fondateur (bio + portrait) ---------- */
.founder .wrap{ max-width:720px; margin:0 auto; }
.founder-head{ display:flex; align-items:center; gap:20px; margin-bottom:26px; }
.portrait-frame{
  position:relative; flex:0 0 auto; width:92px; height:92px; border-radius:50%; overflow:hidden;
  background:#fff; border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:0 10px 24px -14px rgba(23,24,28,.4);
}
.portrait-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.portrait-mono{ font-size:1.4rem; font-weight:800; letter-spacing:.01em; color:var(--blue); }
.portrait-frame:has(img) .portrait-mono{ display:none; }
.founder-head .role{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.founder-head h3{ font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.01em; margin-top:4px; }
.founder-bio p{ font-size:1rem; color:var(--muted); margin-bottom:16px; max-width:56ch; }
.founder-bio p:last-of-type{ margin-bottom:0; }
.founder-career{
  margin-top:22px !important; padding-top:20px; border-top:1px solid var(--line);
  font-size:.86rem; font-weight:600; color:var(--anthracite); line-height:1.9;
}
.founder-career .dot{
  display:inline-block; width:4px; height:4px; margin:0 10px; border-radius:50%;
  background:var(--blue); vertical-align:middle;
}
.founder-contact{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.founder-contact .btn{ padding:12px 22px; }

/* ---------- Contact ---------- */
.contact{ background:var(--ink); color:#fff; text-align:center; }
.contact .eyebrow{ color:#8fb0e6; justify-content:center; }
.contact .eyebrow::before{ display:none; }
.contact h2{ font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800; letter-spacing:-.02em; max-width:20ch; margin:0 auto; }
.contact p{ color:#aab2c0; margin:20px auto 0; max-width:52ch; font-size:1.06rem; }
.contact-methods{ display:flex; justify-content:center; gap:16px; margin-top:44px; flex-wrap:wrap; }
.cmethod{
  display:inline-flex; align-items:center; gap:12px; padding:16px 24px; border-radius:14px;
  background:#1f2128; border:1px solid #2c2f38; transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.cmethod:hover{ transform:translateY(-3px); border-color:var(--blue); background:#242732; }
.cmethod svg{ width:22px; height:22px; color:#8fb0e6; }
.cmethod .l{ text-align:left; }
.cmethod .l small{ display:block; font-size:.72rem; color:#6b7280; letter-spacing:.08em; text-transform:uppercase; }
.cmethod .l b{ font-size:1rem; font-weight:600; }

/* ---------- Footer ---------- */
footer{ background:#0f1013; color:#8b93a1; padding:44px 0; font-size:.86rem; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
footer .brand-f{ display:flex; align-items:center; gap:10px; color:#e5e9f0; font-weight:700; }
footer a:hover{ color:#fff; }

/* ---------- Modal ---------- */
.modal-back{
  position:fixed; inset:0; z-index:100; background:rgba(15,16,19,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.modal-back.open{ opacity:1; visibility:visible; }
.modal{
  background:#fff; border-radius:20px; max-width:440px; width:100%; padding:0; overflow:hidden;
  transform:translateY(14px) scale(.98); transition:transform .3s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
}
.modal-back.open .modal{ transform:none; }
.modal-hd{ padding:32px 32px 24px; color:#fff; position:relative; background:var(--mc); }
.modal-hd .mnum{ font-size:.9rem; font-weight:700; opacity:.85; }
.modal-hd .msym{ font-size:4.2rem; font-weight:800; line-height:1; letter-spacing:-.04em; margin:6px 0 2px; }
.modal-hd .mfam{ position:absolute; top:32px; right:32px; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:5px 12px; border-radius:999px; }
.modal-bd{ padding:26px 32px 34px; }
.modal-bd .mnom{ font-size:1.5rem; font-weight:800; letter-spacing:-.01em; text-transform:capitalize; }
.modal-bd .mrole{ font-size:.82rem; font-weight:600; color:var(--mc); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.modal-bd p{ font-size:.95rem; color:var(--muted); margin-top:16px; }
.modal-close{ position:absolute; top:22px; right:22px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); border:none; color:#fff; font-size:1.1rem; display:grid; place-items:center; }
.modal-close:hover{ background:rgba(255,255,255,.3); }
.mfam-line{ position:static; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===================================================================
   DESIGN SYSTEM EXTENSION - refonte www4 (retours L'Affichiste)
   =================================================================== */

/* ---- Actions centrees (home CTA) ---- */
.actions--center{ justify-content:center; }
.contact--home{ border-top:1px solid #2c2f38; }
.contact .actions{ margin-top:42px; }

/* ---- Tableau : bandeau "afficher les 154" ---- */
.ptable-more{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; flex-wrap:wrap; }
.ptable-count{ font-size:.86rem; color:var(--muted); }
.reveal-all{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; }
.reveal-all svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.reveal-all[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* ---- Composeur : carte resultat facon "formule = archetype" ---- */
.verdict[hidden]{ display:none; }
.verdict{ display:block; margin-top:26px; padding-top:26px; border-top:1px solid #2c2f38; }
.verdict-card{
  display:grid; grid-template-columns:1fr auto 1.1fr; gap:22px; align-items:center;
  background:#15161c; border:1px solid #2c2f38; border-radius:16px; padding:26px;
}
.verdict-formula{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.verdict-formula .plus{ color:#5f6672; font-weight:700; }
.verdict-formula .mini-el{ background:color-mix(in srgb,var(--c) 22%, #1f2128); border-color:var(--c); }
.verdict-formula .mini-el b{ color:#fff; }
.verdict-formula .mini-el i{ color:rgba(255,255,255,.75); }
.verdict-eq span{ font-size:1.8rem; font-weight:800; color:var(--blue); line-height:1; }
.verdict-out small{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#6b7280; }
.verdict-name{ display:block; font-size:1.9rem; font-weight:800; letter-spacing:-.02em; color:#fff; margin:4px 0 8px; }
.verdict-desc{ font-size:.96rem; color:#c2c8d2; line-height:1.5; }
.verdict-fams{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.verdict-fam{ font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px; color:#fff;
  background:color-mix(in srgb,var(--c) 34%, #1f2128); border:1px solid var(--c); }
.verdict .clearbtn{ margin-top:18px; }

/* ---- Concept : CTA de fin vers le tableau ---- */
.concept-cta{ text-align:center; margin-top:60px; }
.concept-cta p{ font-size:1.05rem; color:#aab2c0; margin-bottom:20px; }

/* ---- Home V2 : hero fond moleculaire ---- */
.hero{ position:relative; overflow:hidden; }
.hx-hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  -webkit-mask-image:linear-gradient(105deg,#000 0%,#000 42%,transparent 78%);
          mask-image:linear-gradient(105deg,#000 0%,#000 42%,transparent 78%);
}
.hx-hero-bg .hx-mol{ width:100%; height:100%; }
.hero .wrap{ position:relative; z-index:1; }
.hx-pulse{ transform-box:fill-box; transform-origin:center; animation:hx-pulse 4.5s var(--ease) infinite; }
@keyframes hx-pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.5); opacity:.55 } }
.hero-badges b[data-count]{ font-variant-numeric:tabular-nums; }

/* ---- Home V2 : bande 3 piliers ---- */
.hx-pillars{ background:var(--paper); }
.hx-pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.hx-pillar{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px 26px; color:var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.hx-pillar:hover{ transform:translateY(-5px); box-shadow:0 28px 54px -32px rgba(23,24,28,.42);
  border-color:color-mix(in srgb, var(--px) 45%, var(--line)); }
.hx-pillar-shape{
  position:absolute; top:-34px; right:-34px; width:170px; height:170px; color:var(--px);
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Cpolygon points='60,8 108,34 108,86 60,112 12,86 12,34' stroke='%232c5db0' stroke-width='2' opacity='0.16'/%3E%3Cpolygon points='60,30 86,45 86,75 60,90 34,75 34,45' stroke='%232c5db0' stroke-width='2' opacity='0.10'/%3E%3C/svg%3E");
  opacity:.55; transition:transform .5s var(--ease), opacity .3s; pointer-events:none;
}
.hx-pillar:hover .hx-pillar-shape{ transform:rotate(30deg) scale(1.06); opacity:.85; }
.hx-pillar-ic{ position:relative; z-index:1; width:46px; height:46px; color:var(--px); margin-bottom:18px; transition:transform .4s var(--ease); }
.hx-pillar-ic svg{ width:100%; height:100%; }
.hx-pillar:hover .hx-pillar-ic{ transform:translateY(-2px) scale(1.05); }
.hx-pillar h3{ position:relative; z-index:1; font-size:1.16rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.hx-pillar p{ position:relative; z-index:1; font-size:.93rem; color:var(--muted); margin-top:10px; flex:1; }
.hx-pillar-more{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-size:.85rem; font-weight:700; color:var(--px); }
.hx-pillar-more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.hx-pillar:hover .hx-pillar-more svg{ transform:translateX(4px); }

/* ---- Home V2 : teaser tableau ---- */
.hx-teaser{ background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hx-teaser-card{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:44px; color:var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.hx-teaser-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(23,24,28,.4); border-color:#d7deea; }
.hx-teaser-txt .lead{ margin-top:16px; }
.hx-teaser-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-size:.9rem; font-weight:700; color:var(--blue); }
.hx-teaser-cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.hx-teaser-card:hover .hx-teaser-cta svg{ transform:translateX(4px); }
.hx-teaser-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hx-cell{
  aspect-ratio:1/1.08; border-radius:11px; padding:9px; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--c) 8%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 24%, var(--line));
  transition:transform .25s var(--ease), background .25s;
}
.hx-teaser-card:hover .hx-cell{ transform:translateY(-2px); }
.hx-cell-n{ font-size:.6rem; font-weight:700; color:color-mix(in srgb, var(--c) 70%, var(--ink)); }
.hx-cell-s{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin:auto 0 0; color:var(--ink); }

/* ---- Home : bulle fondateur ---- */
.hx-founder{ background:var(--paper); }
.hx-founder-card{
  display:flex; align-items:center; gap:26px; max-width:760px; margin:0 auto;
  background:var(--mist); border:1px solid var(--line); border-radius:999px;
  padding:16px 30px 16px 16px; color:var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.hx-founder-card:hover{ transform:translateY(-3px); box-shadow:0 24px 46px -30px rgba(23,24,28,.4); border-color:#d7deea; }
.hx-founder-avatar{
  position:relative; flex:0 0 auto; width:76px; height:76px; border-radius:50%; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; box-shadow:0 8px 20px -12px rgba(23,24,28,.4);
}
.hx-founder-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.hx-founder-mono{ font-size:1.25rem; font-weight:800; color:var(--blue); letter-spacing:.01em; }
.hx-founder-avatar:has(img) .hx-founder-mono{ display:none; }
.hx-founder-txt{ display:flex; flex-direction:column; gap:2px; }
.hx-founder-role{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.hx-founder-name{ font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.hx-founder-line{ font-size:.9rem; color:var(--muted); margin-top:2px; }
.hx-founder-more{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:.82rem; font-weight:700; color:var(--blue); }
.hx-founder-more svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.hx-founder-card:hover .hx-founder-more svg{ transform:translateX(4px); }
@media (max-width:560px){
  .hx-founder-card{ flex-direction:column; text-align:center; border-radius:20px; padding:26px 22px; gap:16px; }
  .hx-founder-txt{ align-items:center; }
  .hx-founder-more{ justify-content:center; }
}

/* ===================================================================
   Responsive (desktop-first, cascade 1024 / 768 / 560 / 400)
   =================================================================== */

/* Effets de survol reserves aux vrais dispositifs de pointage */
@media (hover:none){
  .cpt:hover, .feat:hover, .actor:hover, .compound:hover, .cmethod:hover, .el:hover,
  .btn:hover, .nav .cta:hover, .chip:hover, .qp:hover, .hero-tile:hover,
  .hx-pillar:hover, .hx-teaser-card:hover{ transform:none; box-shadow:none; }
  .hero-tile{ transform:none; }
  .el:active{ transform:scale(.96); }
  .btn:active, .chip:active, .qp:active, .cmethod:active{ transform:scale(.97); }
  .feat .hint{ display:none; }
}

@media (max-width:1024px){
  section{ padding:84px 0; }
  .hero .wrap{ grid-template-columns:1fr; gap:44px; }
  .hero-tile-wrap{ order:-1; }
  .concept-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .actors{ grid-template-columns:repeat(2,1fr); }
  .compound-grid{ grid-template-columns:repeat(2,1fr); }
  .hx-pillar-grid{ grid-template-columns:1fr; }
  .hx-teaser-card{ grid-template-columns:1fr; gap:32px; padding:34px; }
  .hx-teaser-grid{ order:-1; }
  .hx-hero-bg{ opacity:.28; }
  .founder .wrap{ grid-template-columns:1fr; gap:40px; }
  .founder-portrait{ position:static; max-width:320px; }
  .table-head{ flex-direction:column; align-items:flex-start; gap:14px; }
}

@media (max-width:768px){
  .wrap{ padding:0 22px; }
  section{ padding:64px 0; }
  .top .wrap{ height:64px; }
  .brand img{ height:40px; }
  .top.shrink .brand img{ height:34px; }
  .nav{ display:none; }
  .nav.show{
    display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:6px 0;
    box-shadow:0 24px 40px -28px rgba(23,24,28,.5);
  }
  .nav.show a{ padding:15px 22px; width:100%; border-bottom:1px solid var(--mist); font-size:1rem; }
  .nav.show .cta{ margin:12px 22px; justify-content:center; padding:14px 18px; }
  .burger{ display:grid; place-items:center; width:44px; height:44px; margin-right:-8px; border-radius:10px; }

  .hero{ padding:48px 0 44px; }
  .hero h1{ font-size:clamp(2rem,7.5vw,2.6rem); }
  .hero p.sub{ font-size:1.05rem; margin-top:18px; }
  .hero .actions{ gap:10px; margin-top:26px; }
  .hero .actions .btn{ width:100%; justify-content:center; }
  .hero-badges{ gap:18px; margin-top:30px; }
  .hero-badges b{ font-size:1.45rem; }
  .hero-tile{ width:min(300px,86%); }

  .feat-grid{ grid-template-columns:1fr; gap:16px; }
  .feat{ padding:26px 24px; }
  .concept-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }

  .controls{ margin:28px 0 20px; }
  .search{ max-width:none; }
  .legend{ gap:8px; }
  .chip{ padding:10px 14px; font-size:.82rem; }
  .ptable{ grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; }
  .el{ padding:8px; }
  .el .nom{ font-size:.58rem; }

  .builder-inner{ padding:28px 22px; }
  .quickpick{ gap:8px; }
  .qp{ padding:10px 14px 10px 10px; font-size:.88rem; }
  .beaker-el{ padding:10px 12px; }
  .beaker-el i{ padding:4px 8px; font-size:1.2rem; }

  .actors{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .actor{ padding:26px 22px; }
  .contact-methods{ flex-direction:column; align-items:stretch; gap:12px; }
  .cmethod{ width:100%; justify-content:flex-start; }

  footer{ padding:34px 0; }
  footer .wrap{ flex-direction:column; align-items:flex-start; gap:8px; }

  .verdict-card{ grid-template-columns:1fr; gap:16px; text-align:left; }
  .verdict-eq{ display:none; }
  .verdict-name{ font-size:1.6rem; }

  .modal-back{ padding:0; align-items:flex-end; }
  .modal{ max-width:none; width:100%; border-radius:20px 20px 0 0; max-height:92vh; display:flex; flex-direction:column; }
  .modal-hd{ padding:26px 26px 20px; }
  .modal-hd .msym{ font-size:3.4rem; }
  .modal-bd{ padding:22px 26px 30px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal-close{ width:44px; height:44px; top:16px; right:16px; }
  .modal-bd .addbtn{ width:100%; justify-content:center; }
}

@media (max-width:560px){
  section{ padding:56px 0; }
  h2.title{ font-size:clamp(1.6rem,6.2vw,2rem); }
  .concept-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; }
  .actors{ grid-template-columns:1fr; gap:14px; }
  .compound-grid{ grid-template-columns:1fr; }
  .combinatoire{ margin-top:32px; }
  .hx-teaser-grid{ grid-template-columns:repeat(4,1fr); gap:7px; }
  .hx-teaser-card{ padding:26px 20px; }
  .ptable{ grid-template-columns:repeat(4,1fr); gap:7px; }
  .el{ border-radius:10px; }
  .el .s{ font-size:1.4rem; }
  .el .nom{ font-size:.56rem; }
  .builder-inner{ padding:24px 18px; }
}

@media (max-width:400px){
  .wrap{ padding:0 16px; }
  .hero h1{ font-size:clamp(1.75rem,8.5vw,2.2rem); }
  .hero-badges{ gap:14px; }
  .hero-badges b{ font-size:1.3rem; }
  .ptable{ grid-template-columns:repeat(3,1fr); gap:6px; }
  .el .nom{ font-size:.58rem; }
  .chip{ padding:9px 12px; font-size:.8rem; }
  .modal-hd .msym{ font-size:3rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .ptable[data-state="full"] .el--extra{ animation:none; }
}

/* ===================================================================
   EXTENSION CMS - classes qui remplacent les anciens styles en ligne
   =================================================================== */
.eyebrow--center{ justify-content:center; }
.lead--flush{ margin-top:0; }
.modal .addbtn{ margin-top:22px; }
.hx-pulse.hx-d1{ animation-delay:.6s; }
.hx-pulse.hx-d2{ animation-delay:1.2s; }
.hero-tile .cat{ color:var(--c, var(--HUM)); }
#mDesc{ color:var(--ink); font-weight:500; }
#mDesc[hidden]{ display:none; }

/* ---------- Pages créées depuis l'admin (blocs) ---------- */
.pg-section{ padding:72px 0; }
.pg-section + .pg-section{ padding-top:0; }
.pg-narrow{ max-width:820px; }
.pg-hero{ padding:84px 0 56px; }
.pg-hero h1{ font-size:clamp(2.2rem,4.8vw,3.6rem); font-weight:900; line-height:1.06; letter-spacing:-.03em; max-width:22ch; }
.pg-hero h1 .accent{ color:var(--blue); }
.pg-hero .sub{ font-size:1.15rem; color:var(--muted); margin-top:22px; max-width:60ch; }
.pg-hero .actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.pg-rich{ margin-top:18px; font-size:1.05rem; color:var(--anthracite); }
.pg-rich > * + *{ margin-top:14px; }
.pg-rich h2{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-top:30px; }
.pg-rich h3{ font-size:1.2rem; font-weight:700; color:var(--ink); margin-top:24px; }
.pg-rich a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.pg-rich ul, .pg-rich ol{ padding-left:22px; }
.pg-rich li + li{ margin-top:6px; }
.pg-rich blockquote{ border-left:3px solid var(--blue); padding:4px 0 4px 18px; color:var(--ink); font-style:italic; }
.pg-rich img{ max-width:100%; height:auto; border-radius:var(--radius); }
.pg-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.pg-split--right .pg-split-img{ order:2; }
.pg-split-img img, .pg-figure img{ width:100%; height:auto; display:block; border-radius:var(--radius); border:1px solid var(--line); }
.pg-figure figcaption{ margin-top:12px; font-size:.88rem; color:var(--muted); text-align:center; }
.pg-cards{ margin-top:36px; }
.pg-card .ic{ color:var(--c, var(--blue)); }
.pg-quote{ padding:72px 0; }
.pg-stats{ margin-top:0; justify-content:center; }
@media (max-width:768px){
  .pg-section{ padding:56px 0; }
  .pg-split{ grid-template-columns:1fr; gap:28px; }
  .pg-split--right .pg-split-img{ order:0; }
}
/* Menu mobile : le bouton de contact garde ses marges au lieu de déborder */
@media (max-width:768px){
  .nav.show .cta{ width:auto; align-self:stretch; }
}