/* ============================================================
   Able : système de design
   Couleurs relevées au pixel sur le whiteboard Canva
   et le deck commercial du 31/07/2026
   ============================================================ */
:root{
  --bg:#FBF9F6;         /* beige registre (aligné sur l'ancien site) */
  --bg-deep:#F3EFE8;    /* beige appuyé */
  --card:#FFFFFF;
  --white:#FFFFFF;
  --ink:#0B0B0B;
  --ink-2:#1E1B17;      /* panneaux sombres */
  --ink-soft:#5B5548;
  --ink-faint:#8C8672;
  --gold:#AA8C5A;       /* accent chiffres + sources */
  --gold-soft:#D9C9A8;
  --beige-dark:#6B5A3C; /* beige foncé : navigation prev/next des piliers */
  --line:#DFD6C2;
  --line-strong:#CFC3A7;
  --ok:#3E7C50;

  --serif:'Lora', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --shell:1240px;
  --gut:44px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0; letter-spacing:-0.015em;}
p{margin:0;}
img{max-width:100%; display:block;}
a{color:inherit;}
.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--gut);}
.mono{font-family:var(--mono);}

.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.eyebrow-light{color:var(--gold-soft);}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- ruban prototype ---------- */
.ribbon{
  position:fixed; bottom:18px; left:18px;
  background:rgba(11,11,11,.9); color:var(--gold-soft); font-family:var(--mono);
  font-size:9.5px; letter-spacing:.11em; padding:7px 14px; border-radius:999px;
  z-index:400; box-shadow:0 4px 16px rgba(0,0,0,.3); pointer-events:none;
  border:1px solid rgba(217,201,168,.3);
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-size:14px; font-weight:500; padding:12px 22px; border-radius:999px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background .18s, opacity .18s;
  white-space:nowrap;
}
.btn .arw{transition:transform .18s cubic-bezier(.2,.7,.3,1);}
.btn:hover .arw{transform:translateX(4px);}
.btn-light{background:var(--bg); color:var(--ink);}
.btn-light:hover{background:#fff; transform:translateY(-1px);}
.btn-dark{background:var(--ink); color:var(--bg);}
.btn-dark:hover{transform:translateY(-1px); opacity:.9;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--ink);}
.btn-outline-light{background:transparent; color:var(--bg); border-color:rgba(242,237,227,.35);}
.btn-outline-light:hover{border-color:var(--bg);}
.btn-sm{padding:9px 18px; font-size:13px;}

.phead-nav{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:26px;
  transition:opacity .35s ease;
}
.phead-nav.pn-hide{opacity:0; pointer-events:none;}
.phead-nav .btn{
  max-width:48%; white-space:normal; text-align:center;
  background:var(--beige-dark); border-color:var(--beige-dark); color:var(--bg);
}
.phead-nav .btn:hover{background:#7D6A48; border-color:#7D6A48;}
.phead-nav .btn .pn-label{display:inline;}

/* Grand écran : boutons ronds fixés aux extrémités, ne bougent pas au scroll */
@media (min-width:1360px){
  .phead-nav{
    position:fixed; top:50%; left:0; right:0; transform:translateY(-50%);
    margin:0; padding:0 30px; z-index:60; pointer-events:none; flex-wrap:nowrap;
  }
  .phead-nav .btn{
    position:relative; pointer-events:auto; max-width:52px; width:52px; height:52px; padding:0; flex-shrink:0;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -12px rgba(11,11,11,.35);
  }
  .phead-nav .btn .pn-label{
    display:block; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
    width:130px; font-size:11.5px; font-weight:500; line-height:1.3; text-align:center;
    color:var(--ink-soft); padding:0; pointer-events:auto;
  }
  /* Les boutons sont collés aux bords de l'écran : on ancre le libellé côté
     intérieur pour qu'il ne soit jamais rogné par le bord de la fenêtre. */
  .phead-nav .pn-prev .pn-label{left:0; transform:none; text-align:left;}
  .phead-nav .pn-next .pn-label{left:auto; right:0; transform:none; text-align:right;}
  .phead-nav .btn:hover .pn-label{color:var(--ink);}
  .phead-nav .btn .arw{font-size:17px;}
}

.arrow-link{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-strong);
  padding-bottom:3px; transition:border-color .18s;
}
.arrow-link:hover{border-color:var(--ink);}
.arrow-link .arw{transition:transform .18s;}
.arrow-link:hover .arw{transform:translateX(4px);}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:200; background:var(--ink);
  border-bottom:1px solid rgba(242,237,227,.09);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{
  font-family:var(--serif); font-weight:600; font-size:25px; color:var(--bg);
  text-decoration:none; letter-spacing:-0.02em; line-height:1;
}
.nav-links{display:flex; gap:6px;}
.nav-links > a, .nav-drop > button{
  font-family:var(--sans); font-size:14px; color:#BDB6A6; text-decoration:none;
  background:none; border:none; cursor:pointer; padding:9px 14px; border-radius:6px;
  display:inline-flex; align-items:center; gap:6px; transition:color .16s, background .16s;
}
.nav-links > a:hover, .nav-drop > button:hover, .nav-links > a.on{color:var(--bg); background:rgba(242,237,227,.07);}
.nav-drop{position:relative;}
.nav-drop > button .chev{font-size:9px; opacity:.7; transition:transform .2s;}
.nav-drop.open > button .chev{transform:rotate(180deg);}
.nav-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:290px;
  background:var(--ink-2); border:1px solid rgba(242,237,227,.13); border-radius:10px;
  padding:9px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.7);
}
.nav-drop.open .nav-menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav-menu a{
  display:block; padding:10px 13px; border-radius:7px; text-decoration:none;
  color:#BDB6A6; font-size:13.5px; transition:background .15s, color .15s;
}
.nav-menu a:hover{background:rgba(242,237,227,.08); color:var(--bg);}
.nav-menu a span{display:block; font-size:11.5px; color:#78725F; margin-top:2px;}
.nav-menu .grp{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#6B6555; padding:11px 13px 5px;
}
.nav-right{display:flex; align-items:center; gap:20px;}
.lang{font-family:var(--mono); font-size:11.5px; color:#78725F; letter-spacing:.06em;}
.lang b{color:var(--bg); font-weight:500;}
.lang a{color:#78725F; text-decoration:none; transition:color .15s;}
.lang a:hover, .lang a:focus-visible{color:var(--bg);}
.burger{display:none; background:none; border:none; color:var(--bg); font-size:22px; cursor:pointer; padding:6px;}

/* ---------- HERO ---------- */
.hero{background:var(--ink); color:var(--bg); position:relative; overflow:hidden; isolation:isolate;}
.hero-in{display:grid; grid-template-columns:.88fr 1.12fr; gap:40px; align-items:end; padding-top:88px; position:relative; z-index:2;}
.hero-copy{padding-bottom:96px;}
.hero h1{font-size:clamp(34px,4.2vw,54px); line-height:1.06; color:var(--bg); max-width:11em;}
.hero h1 em{font-style:normal; color:var(--gold-soft);}
.hero .lede{font-size:17px; color:#B0A897; max-width:31em; margin:28px 0 34px;}
.hero-cta{display:flex; gap:13px; align-items:center; flex-wrap:wrap;}
.hero-note{
  margin-top:38px; padding-top:22px; border-top:1px solid rgba(242,237,227,.14);
  font-size:12.5px; color:#78725F; max-width:30em;
}
.hero-note b{color:var(--gold-soft); font-weight:500;}

.shot-stage{position:relative; padding-bottom:0; align-self:end;}
.shot{
  border-radius:10px 10px 0 0; overflow:hidden; background:var(--card);
  box-shadow:0 50px 110px -35px rgba(0,0,0,.85);
  transform-origin:bottom center; will-change:transform;
  border:1px solid rgba(242,237,227,.1); border-bottom:none;
}
.shot-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 15px; background:var(--white); border-bottom:1px solid var(--line);
}
.dots{display:flex; gap:6px;}
.dots i{width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block;}
.shot-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}

/* ---------- bandeau clients ---------- */
.strip{background:var(--ink-2); color:#8C8672; padding:19px 0; border-top:1px solid rgba(242,237,227,.08);}
.strip-in{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-size:12.5px;}
.strip b{color:var(--gold-soft); font-weight:500;}

/* ---------- sections ---------- */
.sec{padding:110px 0;}
.sec-cream{background:var(--bg);}
.sec-deep{background:var(--bg-deep);}
.sec-dark{background:var(--ink); color:var(--bg);}
.sec-dark h2, .sec-dark h3{color:var(--bg);}
.sec-head{max-width:44ch; margin-bottom:56px;}
.sec-head.wide{max-width:78ch;}
.sec-head h2{font-size:clamp(26px,3vw,38px); line-height:1.15; margin:16px 0 0;}
.sec-head p{color:var(--ink-soft); font-size:16px; margin-top:18px;}
.sec-dark .sec-head p{color:#A69E8C;}

/* ---------- CONSTAT : 3 disques ---------- */
.discs{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.disc-item{text-align:center;}
.disc{
  width:200px; height:200px; border-radius:50%; margin:0 auto 26px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600; line-height:1.05; text-align:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.disc-item:hover .disc{transform:scale(1.045);}
.disc-1{background:var(--ink); color:var(--bg); font-size:38px;}
.disc-2{background:#DCD5C6; color:var(--ink); font-size:44px;}
.disc-3{background:var(--card); color:var(--gold); font-size:40px; border:1px solid var(--line-strong);}
.disc-item p{font-size:14px; color:var(--ink-soft); max-width:27ch; margin:0 auto;}
.disc-item .src{font-family:var(--mono); font-size:10px; color:var(--gold); margin-top:12px; letter-spacing:.03em;}
.verdict{
  margin-top:64px; padding:0; background:none; border:none;
  border-radius:0; text-align:center;
}
.verdict p{font-family:var(--serif); font-style:normal; font-size:30px; line-height:1.32; max-width:34ch; margin:0 auto;}

/* ---------- QUATRE BRIQUES ---------- */
.bricks{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.brick{
  background:var(--card); padding:34px 28px 30px; position:relative;
  transition:background .25s;
}
.brick:hover{background:var(--white);}
.brick .num{
  font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.1em; display:block; margin-bottom:20px;
}
.brick h3{font-size:20px; margin-bottom:12px;}
.brick p{font-size:14px; color:var(--ink-soft);}
.brick .go{
  margin-top:22px; font-size:12.5px; color:var(--ink-faint); display:flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s;
}
.brick:hover .go{opacity:1; transform:translateY(0);}
.bricks-note{margin-top:26px; font-size:13.5px; color:var(--ink-faint); max-width:70ch;}

/* ---------- CLUSTER ---------- */
.cluster-wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.cluster svg{width:100%; max-width:520px; margin:0 auto; display:block;}
.cluster svg circle{transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .3s; transform-origin:center; transform-box:fill-box;}
.cluster svg g.node{cursor:default;}
.cluster svg g.node:hover circle{transform:scale(1.07);}

/* ---------- PREUVE / TRACTION ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(242,237,227,.14); border:1px solid rgba(242,237,227,.14); border-radius:10px; overflow:hidden;}
.kpi{background:var(--ink); padding:36px 26px;}
.kpi .n{font-family:var(--serif); font-size:44px; color:var(--bg); line-height:1; font-weight:600;}
.kpi .l{font-size:13px; color:#A69E8C; margin-top:12px;}
.proof-note{margin-top:30px; font-size:14px; color:#A69E8C; max-width:75ch;}

/* ---------- TÉMOIGNAGES ---------- */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.quote{background:var(--bg); padding:38px 34px; transition:background .25s;}
.quote:hover{background:var(--card);}
.quote .mk{font-family:var(--serif); font-size:34px; color:var(--gold-soft); line-height:1; display:block; margin-bottom:10px;}
.quote p{font-family:var(--serif); font-size:18px; line-height:1.45; margin-bottom:20px;}
.quote .who{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}

/* ---------- SOLUTIONS : ONGLETS ---------- */
.tabbar{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; margin-top:44px;}
.tabbar button{
  font-family:var(--sans); font-size:14.5px; font-weight:500; padding:17px 12px;
  border:none; background:var(--card); color:var(--ink-soft); cursor:pointer;
  border-right:1px solid var(--line-strong); transition:background .22s, color .22s;
}
.tabbar button:last-child{border-right:none;}
.tabbar button.on{background:var(--ink); color:var(--bg);}
.panel{display:none; padding-top:52px;}
.panel.on{display:block; animation:fade .35s ease;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

.pgrid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.pgrid.c2{grid-template-columns:1fr 1fr;}
.pgrid.c3{grid-template-columns:repeat(3,1fr);}
.pgrid.c4{grid-template-columns:repeat(4,1fr);}
.pgrid.c4 .pcard{padding:26px 22px 22px;}
.pgrid.c4 .pcard h3{font-size:18px;}
.pgrid.c4 .pcard .teaser{font-size:13.5px;}
.pcard{background:var(--bg); padding:34px 30px 30px; display:flex; flex-direction:column;}
.pcard .idx{font-family:var(--serif); font-style:normal; font-size:13px; color:var(--ink-faint); margin-bottom:10px;}
.pcard .idx span{
  font-family:var(--mono); font-style:normal; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; margin-left:8px; color:var(--gold);
}
.pcard h3{font-size:22px; margin-bottom:7px;}
.pcard .role{font-size:12.5px; color:var(--ink-faint); margin-bottom:20px; min-height:2.6em;}
.pcard .pq{
  font-family:var(--serif); font-style:normal; font-size:17px; line-height:1.4;
  padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:20px; min-height:3.4em;
}
.pcard ul{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1;}
.pcard li{font-size:13.5px; color:var(--ink-soft); padding-left:17px; position:relative;}
.pcard li::before{content:"·"; position:absolute; left:0; color:var(--gold); font-weight:400; opacity:.65;}
.pstat{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; font-size:12.5px; color:var(--ink-soft); margin-bottom:20px;
}
.pstat b{font-family:var(--serif); color:var(--gold); font-size:15px;}

/* ---------- Écosystème : deux encadrés de catégories (page solutions) ---------- */
/* ---------- PLATEFORME (features alternées) ---------- */
.feat{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding:74px 0;}
.feat + .feat{border-top:1px solid var(--line);}
.feat.solo{grid-template-columns:1fr; padding:52px 0;}
.feat.rev .feat-txt{order:2;}
.feat.rev .feat-vis{order:1;}
.feat-txt{text-align:left;}
.feat-head{display:flex; align-items:flex-start; gap:20px;}
.feat-txt .tagn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:8px;
}
.feat-icon{
  width:56px; height:56px; border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:0;
}
.feat-icon svg{width:24px; height:24px; color:var(--gold);}
.feat-txt h2{font-size:clamp(23px,2.4vw,31px); line-height:1.18; margin-bottom:0;}
.feat-txt > p{color:var(--ink-soft); font-size:15.5px; margin-bottom:24px;}
.feat-pts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.feat-pts li{font-size:14px; color:var(--ink-soft); padding-left:22px; position:relative;}
.feat-pts li::before{
  content:""; position:absolute; left:0; top:7.5px; width:5px; height:5px;
  border-radius:50%; background:var(--ink); opacity:.4;
}
.feat-vis .frame{
  border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:var(--white);
  box-shadow:0 26px 54px -26px rgba(11,11,11,.34); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.feat-vis .frame:hover{transform:translateY(-5px);}

/* liste de points présentée en carte (pages persona) */
.feat-vis > .feat-pts{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:30px 32px; gap:0;
}
.feat-vis > .feat-pts li{padding:16px 0 16px 22px; border-top:1px solid var(--line);}
.feat-vis > .feat-pts li:first-child{border-top:none; padding-top:0;}
.feat-vis > .feat-pts li:last-child{padding-bottom:0;}
.feat-vis > .feat-pts li::before{top:23.5px; width:5px; height:5px; background:var(--gold); opacity:.55;}
.feat-vis > .feat-pts li:first-child::before{top:7.5px;}
.legal-note{margin-top:24px; font-size:11.5px; color:var(--ink-faint); font-style:normal; max-width:60ch;}

.stat-plus{font-size:1.35em; vertical-align:-.05em;}

/* ---------- SIMULATEUR ---------- */
.sim{
  background:var(--card); border:1px solid var(--line-strong); border-radius:10px;
  padding:30px; box-shadow:0 26px 54px -26px rgba(11,11,11,.3);
}
.sim h3{font-size:19px; margin-bottom:6px;}
.sim .sub{font-size:12.5px; color:var(--ink-faint); margin-bottom:24px;}
.fld{margin-bottom:15px;}
.fld label{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-bottom:7px;}
.fld input{
  width:100%; font-family:var(--mono); font-size:15px; padding:11px 13px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--white); color:var(--ink);
}
.sim-res{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0 8px; border-top:1px dashed var(--line-strong); margin-top:8px;
}
.sim-res .v{font-family:var(--serif); font-size:23px; color:var(--gold); font-weight:600;}
.sim-btn{
  width:100%; margin-top:16px; background:var(--ink); color:var(--bg); border:none;
  padding:14px; border-radius:8px; font-family:var(--sans); font-size:14.5px; font-weight:500; cursor:pointer;
  transition:opacity .16s;
}
.sim-btn:hover{opacity:.88;}
.bars{margin-top:24px; display:none; flex-direction:row-reverse; align-items:center; justify-content:center; gap:32px;}
/* ---------- diagramme circulaire de répartition (waterfall) ---------- */
.wf-donut{position:relative; width:180px; height:180px; flex-shrink:0;}
.wf-donut svg{width:100%; height:100%; transform:rotate(-90deg); overflow:visible;}
.wf-track{fill:none; stroke:var(--bg-deep); stroke-width:16;}
.wf-ring{
  fill:none; stroke-width:16; stroke-dasharray:0 340; stroke-dashoffset:0;
  transition:stroke-dasharray .9s cubic-bezier(.2,.7,.3,1), stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1);
}
.wf-ring.wf-1{stroke:var(--ink-soft);}
.wf-ring.wf-2{stroke:var(--gold);}
.wf-ring.wf-3{stroke:var(--gold-soft);}
.wf-donut-center{
  position:absolute; inset:14%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.wf-donut-total{
  font-family:var(--serif); font-weight:600; font-size:15.5px; line-height:1.15;
  color:var(--ink); word-break:break-word;
}
.wf-donut-label{
  font-family:var(--mono); font-size:9px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); margin-top:4px;
}
.wf-legend{display:flex; flex-direction:column; align-items:flex-start; gap:13px;}
.wf-item{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;}
.wf-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.wf-dot.wf-1{background:var(--ink-soft);}
.wf-dot.wf-2{background:var(--gold);}
.wf-dot.wf-3{background:var(--gold-soft);}
.wf-label{color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;}
.wf-value{color:var(--ink); font-weight:500;}
@media (max-width:480px){
  .bars{flex-direction:column; gap:22px;}
  .wf-legend{align-items:center;}
}
.disc-txt{font-size:11px; color:var(--ink-faint); margin-top:16px; line-height:1.45;}

/* ---------- DEMANDE DE DÉMO : calendrier cal.com intégré ---------- */
.cal-embed{max-width:1060px; margin:0 auto; padding:10px; min-height:620px; overflow:hidden;}
.cal-embed iframe{display:block;}
.cal-loading{padding:60px 20px; text-align:center; font-size:13px; color:var(--ink-faint);}
.cal-fallback{text-align:center; font-size:13px; color:var(--ink-faint); margin-top:18px;}
.cal-fallback a{color:var(--ink); border-bottom:1px solid var(--gold-soft);}

/* ---------- FORMULAIRE « NOUS ÉCRIRE » ---------- */
.fld textarea{
  width:100%; font-family:var(--sans); font-size:14px; padding:11px 13px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--white); color:var(--ink); resize:vertical;
}
.contact-form .fld input{font-family:var(--sans); font-size:14.5px;}
.contact-form .fld input, .contact-form .fld textarea, .cf-done{scroll-margin-top:130px;}
.fld .fld-err{color:#B3261E; font-weight:500;}
.fld.err input, .fld.err textarea{border-color:#B3261E; background:#FDF4F2; box-shadow:0 0 0 1px #B3261E inset;}
.fld.err label{color:#B3261E;}
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.contact-form .sim-btn:disabled{opacity:.6; cursor:wait;}
.cf-status{margin-top:14px; font-size:13px; color:#B3261E;}
.cf-done{text-align:center; padding:40px 10px; outline:none;}
.cf-done-mark{width:52px; height:52px; margin:0 auto 20px; border-radius:50%; background:var(--ok); color:var(--white); font-size:24px; line-height:52px;}
.cf-done h3{font-size:22px; margin-bottom:12px;}
.cf-done p{color:var(--ink-soft); font-size:15px; max-width:40ch; margin:0 auto;}

/* ---------- ÉQUIPE ---------- */
.founder{display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; margin-bottom:80px;}
.founder .ph{border-radius:10px; overflow:hidden; background:var(--bg-deep);}
.founder h2{font-size:30px; margin-bottom:4px;}
.founder .rl{font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--gold); margin-bottom:22px;}
.founder p{color:var(--ink-soft); font-size:16px; max-width:70ch; margin-bottom:16px;}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
/* Case de remplissage : la case vide en fin de grille (5 membres) prend le fond des cartes */
.team::after{content:""; background:var(--bg);}
.tm{background:var(--bg); padding:28px; transition:background .22s;}
.tm:hover{background:var(--card);}
.tm .ph{width:78px; height:78px; border-radius:8px; overflow:hidden; margin-bottom:18px; background:var(--bg-deep);}
.tm h3{font-size:17px; margin-bottom:2px;}
.tm .rl{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.tm p{font-size:13px; color:var(--ink-soft);}
.tm .edu{margin-top:10px; font-size:12px; color:var(--ink-faint);}

/* ---------- VALEURS ---------- */
.values5{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px;}
.value5-card{
  padding:30px 22px; border-radius:13px; min-height:220px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background:var(--card); color:var(--ink); border:1px solid var(--line-strong);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1);
}
.value5-card:hover{transform:translateY(-7px); box-shadow:0 26px 44px -26px rgba(11,11,11,.28);}
.value5-card h3{font-family:var(--serif); font-weight:600; font-size:18px; margin-bottom:13px;}
.value5-card p{font-size:13px; line-height:1.55; color:var(--ink-soft);}
@media (max-width:980px){.values5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.values5{grid-template-columns:1fr;}}

/* ---------- SÉCURITÉ ---------- */
.secgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.secgrid.c4{grid-template-columns:repeat(4,1fr);}
.secitem{background:var(--bg); padding:30px; transition:background .22s;}
.secitem:hover{background:var(--card);}
.secitem .ic{
  width:34px; height:34px; border-radius:8px; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono);
  font-size:12px; margin-bottom:18px;
}
.secitem h3{font-size:16.5px; margin-bottom:9px;}
.secitem p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  padding:24px 0; cursor:pointer; font-family:var(--serif); font-size:18px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:20px; color:var(--gold); transition:transform .22s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding:0 0 26px; color:var(--ink-soft); font-size:15px; max-width:78ch;}

/* ---------- CTA final ---------- */
.endcta{background:var(--ink); color:var(--bg); padding:96px 0; text-align:center;}
.endcta h2{font-size:clamp(26px,3.2vw,40px); color:var(--bg); max-width:17em; margin:0 auto 18px; line-height:1.15;}
.endcta .fr{font-family:var(--serif); font-style:normal; color:var(--gold-soft); font-size:16px; margin-bottom:34px;}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink); color:var(--bg); padding:0 0 40px;}
.foot-manifesto{position:relative; padding:90px 0 70px;}
.fm{font-family:var(--serif); font-size:clamp(20px,2.5vw,31px); line-height:1.3; color:var(--bg); max-width:14em;}
.fm-2{
  background:var(--ink-2); border-radius:8px; padding:26px 30px;
  max-width:20em; margin:26px 0 26px auto; text-align:right;
}
.fm-3{margin-left:auto; max-width:16em; text-align:right;}
.foot-nav{
  border-top:1px solid rgba(242,237,227,.15); padding:52px 0 40px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:26px;
}
.foot-nav h4{font-family:var(--sans); font-size:12px; color:#78725F; margin-bottom:17px; font-weight:500; letter-spacing:.04em;}
.foot-nav a{display:block; font-size:13.5px; color:#BDB6A6; text-decoration:none; margin-bottom:11px; transition:color .15s;}
.foot-nav a:hover{color:var(--bg);}
.foot-logo{font-family:var(--serif); font-size:42px; color:var(--bg); line-height:1;}
.foot-addr{font-size:12.5px; color:#78725F; margin-top:18px; line-height:1.6;}
.foot-social{display:flex; gap:14px; margin-top:18px;}
.foot-social a{color:#78725F; display:flex; transition:color .15s;}
.foot-social a:hover{color:var(--bg);}

/* ---------- Écosystème : graphique orbite (accueil) ---------- */
.eco-orbit{
  position:relative;
  max-width:420px;
  margin:64px auto 0;
}
.eco-ring{ display:none; }
.eco-lines{ display:none; }
.eco-lines line{ stroke:var(--line-strong); stroke-width:1.3; }
.eco-hub{
  position:relative;
  margin:0 auto 28px;
  width:148px; height:148px; border-radius:50%;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:0 18px; text-align:center;
}
.eco-hub img{ height:25px; width:auto; }
.eco-hub span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--bg); opacity:.78; line-height:1.35;
}
.eco-node{ position:relative; margin:0 0 14px; }
.eco-node:last-child{ margin-bottom:0; }
.eco-node-inner{ position:relative; }
.eco-pill{
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:14px 24px;
  border:1px solid var(--gold-soft);
  border-radius:999px;
  background:var(--white);
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none;
  box-shadow:0 10px 26px -16px rgba(11,11,11,.35);
  transition:border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.eco-pill .arw{ opacity:.55; transition:transform .15s, opacity .15s; }
.eco-pill:hover{ border-color:var(--gold); background:var(--bg); box-shadow:0 16px 32px -16px rgba(11,11,11,.45); transform:translateY(-2px); }
.eco-pill:hover .arw{ opacity:1; transform:translateX(3px); }
.eco-flyout{
  margin-top:10px;
  display:flex; flex-direction:column; gap:8px;
  padding:0;
}
.eco-flyout a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 20px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--bg-deep);
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink);
  text-decoration:none;
  transition:border-color .15s, background .15s;
  white-space:nowrap;
}
.eco-flyout a:hover{ border-color:var(--gold); background:var(--white); }
.eco-flyout .arw{ opacity:.5; }

@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .eco-orbit{
    --eco-r:225px;
    max-width:none;
    width:calc(var(--eco-r) * 2 + 260px);
    height:calc(var(--eco-r) * 2 + 60px);
    margin:124px auto 0;
  }
  .eco-ring{
    display:block; position:absolute;
    top:50%; left:50%;
    width:calc(var(--eco-r) * 2); height:calc(var(--eco-r) * 2);
    transform:translate(-50%,-50%);
    border:1.5px dashed var(--line-strong);
    border-radius:50%;
    opacity:0;
  }
  .eco-lines{
    display:block; position:absolute; inset:0;
    width:100%; height:100%; z-index:1;
  }
  .eco-line{ opacity:0; }
  .eco-hub{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    margin:0; z-index:2; opacity:0;
  }
  .eco-node{
    position:absolute; top:50%; left:50%;
    width:190px; margin:0; z-index:3;
  }
  .eco-node::before{
    content:"";
    position:absolute; inset:-26px;
    z-index:0;
  }
  .eco-node[data-pos="top"]{ transform:translate(-50%, calc(-50% - var(--eco-r))); }
  .eco-node[data-pos="left"]{ transform:translate(calc(-50% - var(--eco-r) * 0.866), calc(-50% + var(--eco-r) * 0.5)); }
  .eco-node[data-pos="right"]{ transform:translate(calc(-50% + var(--eco-r) * 0.866), calc(-50% + var(--eco-r) * 0.5)); }
  .eco-node-inner{ opacity:0; }
  .eco-orbit.in .eco-hub,
  .eco-orbit.in .eco-node-inner,
  .eco-orbit.in .eco-line,
  .eco-orbit.in .eco-ring{ opacity:1; }
  .eco-orbit.scrubbed .eco-hub,
  .eco-orbit.scrubbed .eco-node-inner,
  .eco-orbit.scrubbed .eco-line,
  .eco-orbit.scrubbed .eco-ring{ transition:none; }
  .eco-flyout{
    position:absolute;
    width:200px;
    background:transparent;
    border:none;
    box-shadow:none;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    margin:0; padding:0; z-index:5;
    display:flex; flex-direction:column; gap:10px;
  }
  .eco-flyout a{ box-shadow:0 10px 26px rgba(11,11,11,.09); }
  .eco-flyout-row{ flex-direction:row; width:auto; }
  .eco-node[data-pos="top"] .eco-flyout{ bottom:100%; left:50%; transform:translate(-50%,-10px); }
  .eco-node[data-pos="top"]:hover .eco-flyout,
  .eco-node[data-pos="top"]:focus-within .eco-flyout{ transform:translate(-50%,-18px); }
  .eco-node[data-pos="left"] .eco-flyout{ right:100%; top:50%; transform:translate(-10px,-50%); }
  .eco-node[data-pos="left"]:hover .eco-flyout,
  .eco-node[data-pos="left"]:focus-within .eco-flyout{ transform:translate(-18px,-50%); }
  .eco-node[data-pos="right"] .eco-flyout{ left:100%; top:50%; transform:translate(10px,-50%); }
  .eco-node[data-pos="right"]:hover .eco-flyout,
  .eco-node[data-pos="right"]:focus-within .eco-flyout{ transform:translate(18px,-50%); }
  .eco-node:hover .eco-flyout,
  .eco-node:focus-within .eco-flyout{
    opacity:1; visibility:visible; pointer-events:auto;
  }
}

.foot-bot{
  border-top:1px solid rgba(242,237,227,.15); padding-top:26px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:#6B6555;
}
.foot-bot a{color:#6B6555; text-decoration:none; transition:color .15s;}
.foot-bot a:hover{color:var(--bg);}
.foot-legal{display:flex; gap:22px; flex-wrap:wrap;}

/* ---------- pages internes ---------- */
.phead{padding:78px 0 0;}
.phead h1{font-size:clamp(30px,4vw,46px); line-height:1.1; margin:18px 0 0; max-width:16em;}
.phead .lede{font-size:17.5px; color:var(--ink-soft); max-width:76ch; margin-top:20px;}
.crumb{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);}
.crumb a{text-decoration:none; color:var(--gold);}

.legal-stub{padding:44px 0; border-bottom:1px solid var(--line);}
.legal-stub h2{font-size:23px; margin-bottom:9px;}
.legal-stub p{color:var(--ink-faint); font-size:14px;}
.badge-todo{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-soft);
  padding:4px 10px; border-radius:999px; margin-bottom:12px;
}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;} .rv-d3{transition-delay:.24s;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--gut:26px;}
  .hero-in{grid-template-columns:1fr; padding-top:64px; gap:48px;}
  .hero .lede{margin-bottom:28px;}
  .bricks{grid-template-columns:1fr 1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .pgrid.c3{grid-template-columns:1fr 1fr;}
  .pgrid.c4{grid-template-columns:1fr 1fr;}
  .secgrid, .secgrid.c4{grid-template-columns:1fr 1fr;}
  .team{grid-template-columns:1fr 1fr;}
  .foot-nav{grid-template-columns:1fr 1fr 1fr;}
  .cluster-wrap{grid-template-columns:1fr; gap:44px;}
}
@media (max-width:820px){
  .nav-in{gap:12px;}
  .nav-right{gap:12px;}
  .nav-right .btn-light{font-size:13px; padding:10px 16px;}
  .nav-links{
    display:none; position:absolute; top:76px; left:0; right:0; background:var(--ink-2);
    flex-direction:column; padding:16px; gap:2px; border-bottom:1px solid rgba(242,237,227,.14);
  }
  .nav-links.open{display:flex;}
  .nav-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:transparent; border:none; padding:0 0 0 12px; display:none;}
  .nav-drop.open .nav-menu{display:block;}
  .burger{display:block;}
  .discs{grid-template-columns:1fr; gap:44px;}
  .bricks, .kpis, .quotes, .pgrid.c2, .pgrid.c3, .pgrid.c4, .secgrid, .secgrid.c4, .team{grid-template-columns:1fr;}
  .team::after{display:none;}
  .feat, .feat.rev{grid-template-columns:1fr; gap:36px;}
  .feat.rev .feat-txt, .feat.rev .feat-vis{order:initial;}
  .founder{grid-template-columns:1fr; gap:30px;}
  .founder .ph{max-width:260px;}
  .foot-nav{grid-template-columns:1fr 1fr;}
  .fm-2, .fm-3{margin-left:0; text-align:left; max-width:none;}
  .sec{padding:74px 0;}
}
@media (max-width:480px){
  .nav-right .btn-light{display:none;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
  .ribbon{font-size:8.5px; padding:6px 11px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
  .rv{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   V6 : refonte de la barre de navigation, du hero et des
   nouvelles pages (Ressources / Entreprise)
   ============================================================ */

/* ---------- logo image ---------- */
.logo{display:flex; align-items:center;}
.logo img{height:20px; width:auto;}
.foot-logo img{height:34px; width:auto;}

/* ---------- MEGA MENU (structure Carta) ---------- */
.nav-links{gap:2px;}
.nav-drop{position:static;}
.nav-drop > button{font-size:14.5px;}
.nav-drop.open > button{color:var(--bg); background:rgba(242,237,227,.07);}
.nav-drop > button .chev{font-size:10px;}

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--bg); border-bottom:1px solid var(--line-strong);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow:0 34px 70px -34px rgba(11,11,11,.5);
}
.nav-drop.open .mega{opacity:1; visibility:visible; transform:translateY(0);}
.mega-in{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 296px;
  gap:44px; padding-top:40px; padding-bottom:44px; align-items:start;
}
.mega-in.solo{grid-template-columns:minmax(0,1fr) 296px;}
.mega-in.nofeature{grid-template-columns:repeat(3,minmax(0,1fr));}
.mega-in.solo.nofeature{grid-template-columns:minmax(0,1fr);}
.mega-kicker-big{
  grid-column:1 / -1; font-family:var(--serif); font-style:normal; font-weight:600;
  font-size:19px; color:var(--ink); margin-bottom:10px; padding-bottom:15px;
  border-bottom:1px solid var(--line);
}
.mega-col .grp, .mega-items .grp{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); padding-bottom:13px; border-bottom:.5px solid var(--gold-soft); margin-bottom:0;
  grid-column:1 / -1;
}
.mega-col a, .mega-items a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  position:relative; text-decoration:none; color:var(--ink); padding:14px 2px 14px 0;
  border-bottom:.5px solid #EAE3D4; /* filet fin et clair entre les intitulés */
}
/* trait or qui se déploie sous l'intitulé survolé */
.mega-col a::before, .mega-items a::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.mega-col a::after, .mega-items a::after{
  content:"→"; font-family:var(--sans); font-size:13px; color:var(--gold);
  opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease;
}
.mega-col a:hover::before, .mega-items a:hover::before,
.mega-col a:focus-visible::before, .mega-items a:focus-visible::before{transform:scaleX(1);}
.mega-col a:hover::after, .mega-items a:hover::after,
.mega-col a:focus-visible::after, .mega-items a:focus-visible::after{opacity:1; transform:none;}
.mega-col a b, .mega-items a b{font-family:var(--sans); font-size:15px; font-weight:500; display:block; transition:color .15s;}
.mega-col a span, .mega-items a span{
  display:block; font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.42; max-width:34ch;
}
.mega-col a:hover b, .mega-items a:hover b{color:var(--gold);}
.mega-kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding-bottom:15px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
.mega-items{display:grid; grid-template-columns:1fr 1fr; gap:0 56px;}
.mega-items.stack{grid-template-columns:1fr; gap:2px 0;}
.mega-items.cols-3{grid-template-columns:repeat(3,1fr);}

/* ---------- Contact : portrait au dessus de l'email ---------- */
.contact-person{display:flex; align-items:center; gap:22px; margin-bottom:26px;}
.contact-person img{width:172px; height:172px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.contact-person b{display:block; font-size:18px; font-weight:600; color:var(--ink);}
.contact-person span{display:block; font-size:13.5px; color:var(--ink-faint); margin-top:4px;}
@media (max-width:520px){
  .contact-person{flex-direction:column; align-items:flex-start; gap:16px;}
  .contact-person img{width:132px; height:132px;}
}
.mega-in.solo:not(.nofeature){align-items:center;}
.mega-feature{
  display:block; text-decoration:none; color:var(--ink); background:var(--bg-deep);
  border:1px solid var(--line); border-radius:10px; padding:20px; transition:background .2s;
}
.mega-feature:hover{background:var(--card);}
.mega-thumb{
  height:92px; border-radius:7px; margin-bottom:16px;
  background:
    radial-gradient(120% 120% at 78% 18%, rgba(170,140,90,.55) 0%, rgba(170,140,90,0) 55%),
    linear-gradient(145deg, #0B0B0B 0%, #23211C 100%);
}
.mega-feature h4{font-size:17px; margin:8px 0 7px;}
.mega-feature p{font-size:12.5px; color:var(--ink-soft); line-height:1.45;}
.mega-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:12.5px; color:var(--gold);
}
.mega-feature:hover .arw{transform:translateX(4px);}
.mega-go .arw{display:inline-block; transition:transform .18s;}

/* ---------- HERO CENTRÉ ---------- */
.hero-center{position:relative; z-index:2; text-align:center; padding:86px 0 0;}
.hero-center h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(32px,4.6vw,58px); line-height:1.06; color:var(--bg);
  max-width:24ch; margin:0 auto; text-wrap:balance;
}
.hero-center h1 em{font-style:normal; color:var(--gold-soft);}
.hero-center .lede{
  font-size:17.5px; color:#B0A897; max-width:62ch; margin:26px auto 34px; text-wrap:balance;
}
.hero-cta.center{justify-content:center;}
.shot-stage-wide{position:relative; margin-top:70px; padding:0 0 0;}
.shot-wide{
  max-width:1120px; margin:0 auto; border-radius:12px 12px 0 0; overflow:hidden;
  background:var(--card); border:1px solid rgba(242,237,227,.12); border-bottom:none;
  box-shadow:0 60px 130px -40px rgba(0,0,0,.9);
  transform-origin:bottom center; will-change:transform;
}
.shot-wide img{width:100%; display:block;}

/* ---------- LA SOLUTION (accueil) ---------- */
.solgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.solcol{background:var(--card); padding:32px 28px 26px;}
.solcol h3{font-size:19px; margin-bottom:6px;}
.solcol .sub{font-size:12.5px; color:var(--ink-faint); margin-bottom:16px; min-height:3em;}
.solcol a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; border-top:1px solid var(--line); text-decoration:none;
  font-size:14.5px; color:var(--ink); transition:color .16s;
}
.solcol a:hover{color:var(--gold);}
.solcol a .arw{color:var(--ink-faint); transition:transform .18s;}
.solcol a:hover .arw{transform:translateX(4px);}

/* ---------- LOGOS CLIENTS ---------- */
.logos{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:rgba(242,237,227,.14); border:1px solid rgba(242,237,227,.14);
  border-radius:10px; overflow:hidden;
}
.logo-slot{
  background:var(--ink); height:92px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#4E4A40;
}
.logos.light{background:var(--line); border-color:var(--line);}
.logos.light .logo-slot{background:var(--card); color:var(--ink-faint);}
.logos-note{margin-top:18px; font-family:var(--mono); font-size:10.5px; color:#6B6555; letter-spacing:.04em;}

/* ---------- TÉMOIGNAGES SUR FOND NOIR ---------- */
.sec-dark .quotes{background:rgba(242,237,227,.14); border-color:rgba(242,237,227,.14);}
.sec-dark .quote{background:var(--ink);}
.sec-dark .quote:hover{background:var(--ink-2);}
.sec-dark .quote p{color:var(--bg);}
.sec-dark .quote .who{color:#78725F;}
.sec-dark .verdict{background:var(--ink-2); border-color:rgba(242,237,227,.14); color:var(--bg);}

/* ---------- CARTES (blog, clients, carrières) ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.cards.c2{grid-template-columns:1fr 1fr;}
.card{background:var(--card); padding:30px; display:flex; flex-direction:column; transition:background .22s;}
.card:hover{background:var(--white);}
.card .meta{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.card h3{font-size:18px; margin-bottom:9px;}
.card p{font-size:13.5px; color:var(--ink-soft); flex:1;}
.card .arrow-link{margin-top:20px; align-self:flex-start;}

/* ---------- OFFRES (carrières) ---------- */
.jobs{border-top:1px solid var(--line);}
.job{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.job h3{font-size:19px; margin-bottom:5px;}
.job .tags{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.05em;}

/* ---------- ÉTAT VIDE ---------- */
.empty{
  border:1px dashed var(--line-strong); border-radius:10px; padding:52px 34px;
  text-align:center; background:var(--card);
}
.empty h3{font-size:20px; margin-bottom:10px;}
.empty p{font-size:14.5px; color:var(--ink-soft); max-width:56ch; margin:0 auto;}

/* ---------- TIMELINE (qui sommes-nous) ---------- */
.tl{border-top:1px solid var(--line); margin-top:10px;}
.tl-row{display:grid; grid-template-columns:150px 1fr; gap:34px; padding:26px 0; border-bottom:1px solid var(--line);}
.tl-row .yr{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.08em;}
.tl-row h3{font-size:18px; margin-bottom:7px;}
.tl-row p{font-size:14px; color:var(--ink-soft); max-width:70ch;}

/* ---------- responsive V6 ---------- */
@media (max-width:1080px){
  .mega-in{grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px;}
  .mega-in.solo{grid-template-columns:minmax(0,1fr);}
  .mega-feature{display:none;}
  .solgrid, .cards, .cards.c2{grid-template-columns:1fr 1fr;}
  .logos{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .mega{
    position:static; opacity:1; visibility:visible; transform:none; display:none;
    background:transparent; border:none; box-shadow:none;
  }
  .nav-drop.open .mega{display:block;}
  .mega .shell{padding:0;}
  .mega-in, .mega-in.solo{grid-template-columns:1fr; gap:14px; padding:6px 0 16px;}
  .mega-items, .mega-items.cols-3{grid-template-columns:1fr; gap:0;}
  .mega-col .grp, .mega-items .grp, .mega-kicker{color:#78725F; border-color:rgba(242,237,227,.14);}
  .mega-col a, .mega-items a{color:#BDB6A6; padding:11px 0; border-bottom-color:rgba(242,237,227,.06);}
  .mega-col a::after, .mega-items a::after{display:none;}
  .mega-col a span, .mega-items a span{color:#6B6555;}
  .hero-center{padding-top:56px;}
  .shot-stage-wide{margin-top:44px;}
  .solgrid, .cards, .cards.c2, .logos{grid-template-columns:1fr;}
  .logos{grid-template-columns:1fr 1fr;}
  .job{flex-direction:column; align-items:flex-start; gap:14px;}
  .tl-row{grid-template-columns:1fr; gap:8px;}
}

/* ============================================================
   V7 : motif circulaire, piliers plateforme, page clients,
   cartes solutions raccourcies
   ============================================================ */

/* ---------- footer sans manifeste ---------- */
.foot{padding-top:8px;}
.foot-nav{border-top:none; padding-top:74px;}

/* ---------- TEXTURE DE FOND + CERCLES ENTIERS ---------- */
.sec, .phead, .hero, .endcta, .pill{position:relative;}
.sec > .shell, .phead > .shell, .endcta > .shell, .pill > .shell{position:relative; z-index:2;}

/* fonds unis, sans texture, sur les sections beige */
.sec-cream, .phead, .pill.cream{
  background-color:var(--bg);
}
.sec-dark, .endcta, .foot{
  background-color:var(--ink);
  background-image:radial-gradient(rgba(242,237,227,.055) 1px, transparent 1px);
  background-size:22px 22px;
}
.strip{background-image:radial-gradient(rgba(242,237,227,.05) 1px, transparent 1px); background-size:22px 22px;}

/* deux cercles complets seulement, jamais coupés par un bord de section */
.hero{overflow:hidden;}
.hero .orb{
  position:absolute; z-index:1; pointer-events:none; border-radius:50%;
  left:50%; top:34px; width:min(560px, 74vw); aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(242,237,227,.12);
}
.endcta .orb{
  position:absolute; z-index:1; pointer-events:none; border-radius:50%;
  left:50%; top:50%; width:min(430px, 78vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(242,237,227,.13);
}

/* ---------- SIGLES DES QUATRE PILIERS ---------- */
.brick .sig{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); color:var(--ink); margin-bottom:22px;
  transition:background .25s, color .25s, border-color .25s;
}
.brick:hover .sig{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.brick .sig svg{width:21px; height:21px; display:block;}

/* ---------- CARTES SOLUTIONS RACCOURCIES ---------- */
.pcard .teaser{
  font-family:var(--serif); font-style:normal; font-size:17.5px; line-height:1.42;
  color:var(--ink); margin:6px 0 26px; flex:1;
}
.pcard.short{padding:34px 30px 30px;}

/* ---------- CARTES EN BLOCS HORIZONTAUX (Solutions / Ressources / Entreprise / Écosystème) ---------- */
.pgrid.blocks{
  gap:22px; background:none; border:none; border-radius:0;
}
/* .pcard ne fait que se déplacer au survol : la bordure, le rayon et le
   cadrage vivent sur .pcard-frame (jamais transformé) pour éviter l'artefact
   de rendu où le bord haut disparaît/déborde pendant la translation d'un
   élément overflow:hidden + border-radius. */
.pgrid.blocks .pcard{padding:0; transition:transform .25s;}
.pgrid.blocks .pcard:hover{transform:translateY(-3px);}
.pgrid.blocks .pcard-frame{
  height:100%; display:flex; flex-direction:column;
  border:1px solid var(--line-strong); border-radius:14px; overflow:hidden;
  background:var(--card); transition:border-color .25s;
  /* la vignette reste sur sa propre couche GPU en permanence : sans ça, Chrome
     re-crée cette couche au moment du survol et le bord haut arrondi peut
     clignoter/disparaître le temps d'une image pendant la translation. */
  transform:translateZ(0);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.pgrid.blocks .pcard:hover .pcard-frame{border-color:var(--gold-soft);}
.pgrid.blocks .pcard-img.photo{margin:0; border-radius:0; aspect-ratio:16/10;}
.pgrid.blocks .pcard-img.photo img{object-fit:contain;}
.pgrid.blocks .pcard-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.pcard-img{
  margin:16px 0 20px;
  aspect-ratio:16/10;
  border-radius:8px;
  background:var(--bg-deep);
  border:1px dashed var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.pcard-img svg{ width:30px; height:30px; }
.pcard-img.photo{ border:none; background:none; padding:0; overflow:hidden; }
.pcard-img.photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:8px; }


/* ---------- PLATEFORME : PILIERS PLEINE LARGEUR ---------- */
.pill{padding:96px 0;}
.pill.cream{background:var(--bg);}
.pill.deep{background:var(--bg-deep);}
.pill-top{max-width:62ch; margin:0 auto 48px; text-align:center;}
.pill-top .tagn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:16px;
}
.pill-top h2{font-size:clamp(25px,2.9vw,36px); line-height:1.15; margin-bottom:16px;}
.pill-top p{color:var(--ink-soft); font-size:16px;}
.pill-shot{
  max-width:1020px; margin:0 auto; border:1px solid var(--line-strong); border-radius:12px;
  overflow:hidden; background:var(--white); box-shadow:0 40px 90px -40px rgba(11,11,11,.45);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.pill-shot:hover{transform:translateY(-6px);}
.pill-bottom{
  max-width:1020px; margin:50px auto 0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.pill-pt{background:var(--card); padding:26px 24px;}
.pill-pt .dot{
  width:9px; height:9px; border-radius:50%; background:var(--gold); display:block; margin-bottom:14px;
}
.pill-pt p{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.pill-note{max-width:1020px; margin:20px auto 0; font-size:11.5px; color:var(--ink-faint); font-style:normal;}
.pill-sim{max-width:520px; margin:50px auto 0;}

/* ---------- CLIENTS : CHIFFRES EN MÉDAILLONS ---------- */
.medals{display:flex; flex-wrap:wrap; justify-content:center; gap:44px;}
.medal{text-align:center; width:210px;}
.medal .ring{
  width:190px; height:190px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  font-family:var(--serif); font-weight:600; line-height:1; position:relative;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.medal:hover .ring{transform:scale(1.05);}
.medal .ring .v{font-size:40px;}
.medal .ring .u{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-top:9px; font-weight:400;}
.medal.m1 .ring{background:var(--ink); color:var(--bg);}
.medal.m2 .ring{background:var(--card); color:var(--ink); border:1px solid var(--line-strong);}
.medal.m3 .ring{background:#DCD5C6; color:var(--ink);}
.medal.m4 .ring{background:var(--card); color:var(--gold); border:1px solid var(--gold-soft);}
.medal p{font-size:13.5px; color:var(--ink-soft);}

/* ---------- CLIENTS : BANDEAU DE LOGOS DÉFILANT ---------- */
.marquee{position:relative; padding:8px 0 0;}
.marquee-track{display:flex; width:max-content; gap:6px; animation:slide 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.mlogo{
  width:210px; height:104px; flex:none; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
  transition:background .22s, color .22s;
}
.mlogo:hover{background:var(--white); color:var(--ink);}

/* ---------- responsive V7 ---------- */
@media (max-width:1080px){
  .pill-bottom{grid-template-columns:1fr 1fr;}
  .medals{gap:30px;}
}
@media (max-width:820px){
  .pill{padding:66px 0;}
  .pill-bottom{grid-template-columns:1fr; margin-top:34px;}
  .pill-top{margin-bottom:34px;}
  .medal{width:46%;}
  .medal .ring{width:150px; height:150px;}
  .medal .ring .v{font-size:31px;}
  .mlogo{width:160px; height:84px;}
}
.pcard .arrow-link{align-self:flex-start;}

/* ============================================================
   V7 : version mobile
   ============================================================ */
@media (max-width:820px){
  /* captures produit : zoom-cadrage pour rester lisibles sur petit écran */
  .shot-wide img, .pill-shot img.zoom-m{width:195%; max-width:none;}
  .shot-stage-wide{margin-top:38px;}
  .shot-wide{border-radius:10px 10px 0 0;}
  .pill-shot{border-radius:10px;}

  /* médaillons : deux par ligne */
  .medals{gap:26px 16px;}
  .medal{width:calc(50% - 12px);}
  .medal .ring{width:136px; height:136px;}
  .medal .ring .v{font-size:26px;}
  .medal .ring .u{font-size:9.5px; margin-top:6px;}
  .medal p{font-size:12.5px;}

  /* respiration générale */
  .hero-center h1{font-size:clamp(29px,8.4vw,38px);}
  .hero-center .lede{font-size:15.5px; margin:20px auto 26px;}
  .phead{padding-top:52px;}
  .phead h1{font-size:clamp(27px,7.6vw,34px);}
  .phead .lede{font-size:16px;}
  .sec-head{margin-bottom:34px;}
  .pill-top h2{font-size:25px;}
  .pill-top p{font-size:15px;}
  .brick{padding:28px 24px;}
  .foot-nav{padding-top:52px; gap:18px;}
  .foot-logo img{height:28px;}
  .marquee-track{animation-duration:26s;}
}
@media (max-width:480px){
  .medal{width:100%;}
  .medal .ring{width:150px; height:150px;}
  .medal .ring .v{font-size:30px;}
  .quotes, .cards{border-radius:8px;}
  .tabbar{grid-template-columns:1fr; }
  .tabbar button{border-right:none; border-bottom:1px solid var(--line-strong);}
  .tabbar button:last-child{border-bottom:none;}
}

/* ============================================================
   V8 : correctifs
   ============================================================ */
/* titres lisibles sur les cartes claires des sections sombres */
.sec-dark .secitem h3{color:var(--ink);}
.sec-dark .secitem{background:var(--card);}
.sec-dark .secitem:hover{background:var(--white);}

/* logos clients sans fond */
.mlogo{
  width:200px; height:86px; flex:none; border:none; background:none; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-.01em;
  text-transform:none; color:var(--ink); opacity:.42; transition:opacity .22s;
}
.mlogo:hover{background:none; color:var(--ink); opacity:1;}
.mlogo img{max-height:42px; max-width:150px; width:auto; object-fit:contain;}
.marquee{padding:14px 0;}

/* simulateur au centre d'un pilier */
.pill-sim{max-width:560px; margin:0 auto;}
.pill-sim .sim{box-shadow:0 40px 90px -40px rgba(11,11,11,.45);}

@media (max-width:820px){
  .mlogo{width:150px; height:70px; font-size:17px;}
  .sec-cream, .phead, .pill.cream, .sec-deep, .pill.deep,
  .sec-dark, .endcta, .foot, .hero, .strip{background-size:18px 18px;}
}

/* ============================================================
   V9 : logos clients, citations, transitions douces, cercles
   ============================================================ */

/* ---------- TRANSITIONS DOUCES ENTRE BLOCS DE COULEUR ---------- */
/* séparation nette entre un bloc encre et un bloc clair : pas de dégradé,
   seul le beige clair et le beige profond se fondent l'un dans l'autre */
.sec-dark, .endcta{overflow:hidden;}
.strip{position:relative;}
.strip .shell{position:relative; z-index:2;}

/* fond beige foncé uni par défaut ; un dégradé de transition n'est réintroduit
   que sur la frontière avec une section beige clair adjacente (jamais en fin
   de page contre du noir, et jamais doublé quand deux sections beige foncé
   se suivent) */
.sec-deep, .pill.deep{
  background:var(--bg-deep);
  position:relative;
  z-index:0;
}
.sec-cream + .sec-deep::before, .pill.cream + .pill.deep::before, .phead + .sec-deep::before{
  content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:90px;
  background:linear-gradient(180deg, var(--bg), transparent);
}
.sec-deep:has(+ .sec-cream)::after, .pill.deep:has(+ .pill.cream)::after{
  content:""; position:absolute; z-index:-1; bottom:0; left:0; right:0; height:90px;
  background:linear-gradient(0deg, var(--bg), transparent);
}

/* ---------- CERCLES DISCRETS ---------- */
.orb-soft{
  position:absolute; border-radius:50%; z-index:1; pointer-events:none;
  border:1px solid rgba(11,11,11,.075);
}
.orb-soft.fill{border:1px solid rgba(11,11,11,.075); background:none;}
.sec-dark .orb-soft, .endcta .orb-soft{border-color:rgba(242,237,227,.10);}

/* ---------- LOGOS CLIENTS ---------- */
.marquee{padding:26px 0 0; overflow:visible;}
.marquee-inner{
  overflow-x:clip; overflow-y:visible; padding-bottom:126px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.mlogo{
  position:relative; width:auto; height:112px; padding:0 56px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:0; outline:none;
}
.mlogo:hover, .mlogo:focus{z-index:20;}
.mlogo img{
  /* contrainte largeur + hauteur (et non la seule hauteur) : les logos très
     larges (wordmarks) et les logos compacts gardent une emprise visuelle
     comparable au lieu que les larges dominent et les compacts s'effacent */
  width:auto; height:auto; max-width:170px; max-height:60px; object-fit:contain;
  opacity:.72; transition:opacity .22s ease, transform .22s ease;
}
.mlogo:hover img, .mlogo:focus img{opacity:1; transform:translateY(-2px);}
/* sur fond sombre, les logos (souvent sombres eux-mêmes) sont repassés en blanc pour rester lisibles */
.hero .mlogo img, .sec-dark .mlogo img{filter:brightness(0) invert(1); opacity:.8;}
.hero .mlogo:hover img, .hero .mlogo:focus img, .sec-dark .mlogo:hover img, .sec-dark .mlogo:focus img{opacity:1;}
.mtip{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translate(-50%,6px);
  width:230px; padding:13px 15px; border-radius:9px;
  background:var(--white); border:1px solid var(--line-strong);
  box-shadow:0 20px 40px -22px rgba(11,11,11,.5);
  font-size:12px; line-height:1.45; color:var(--ink-soft); text-align:left;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:5;
}
.mtip b{display:block; font-family:var(--sans); font-weight:500; font-size:13px; color:var(--ink); margin-bottom:4px;}
.mtip::before{
  content:""; position:absolute; top:-5px; left:50%; margin-left:-5px;
  width:9px; height:9px; background:var(--white);
  border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong);
  transform:rotate(45deg);
}
.mlogo:hover .mtip, .mlogo:focus .mtip{opacity:1; visibility:visible; transform:translate(-50%,0);}

/* ---------- CITATIONS EN GRAND SUR FOND NOIR ---------- */
.quotes-big{display:grid; grid-template-columns:1fr 1fr; gap:58px 70px;}
.quotes-big blockquote{margin:0;}
.quotes-big p{
  font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.2vw,28px);
  line-height:1.32; color:var(--bg); margin-bottom:16px; text-wrap:balance;
}
.quotes-big p::before{content:"« ";}
.quotes-big p::after{content:" »";}
.quotes-big cite{
  font-family:var(--serif); font-style:normal; font-size:14.5px; color:#8A8474; font-weight:400;
}

/* ---------- VIGNETTES DES MENUS ---------- */
.mega-thumb{height:96px; overflow:hidden; background:var(--ink);}
.mega-thumb.portrait{height:158px;}
.mega-thumb.portrait img{object-position:50% 22%;}
.mega-thumb img{width:100%; height:100%; object-fit:cover; object-position:left top;}

/* ---------- ANIMATION DU PÉRIMÈTRE ---------- */
.cluster svg{overflow:visible;}
.cluster .node{opacity:0; transform:translate(var(--dx,0), var(--dy,0));
  transform-box:fill-box; transform-origin:center;}
.cluster.in .node{opacity:1; transform:translate(0,0);}
.cluster.scrubbed .node{transition:none;}
.cluster .halo{opacity:0;}
.cluster.in .halo{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .cluster .node, .cluster .halo{opacity:1; transform:none; transition:none;}
}

@media (max-width:820px){
  .quotes-big{grid-template-columns:1fr; gap:36px;}
  .mlogo{width:auto; height:84px; padding:0 32px;}
  .mlogo img{max-width:124px; max-height:44px; opacity:.78;}
  .mtip{width:190px;}
  .marquee{padding-bottom:70px;}
}

/* ============================================================
   V11 : capture interactive, citation de bas de page, blog
   ============================================================ */

/* ---------- POINTS INTERACTIFS SUR LA CAPTURE ---------- */
.shot-img{position:relative; line-height:0;}
.hs{
  position:absolute; transform:translate(-50%,-50%); z-index:4;
  background:none; border:0; padding:0; cursor:pointer; line-height:1;
  width:var(--fw,120px); height:var(--fh,34px);
}
.hs .dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:50%;
  background:var(--white); color:var(--ink); border:1.5px solid var(--gold);
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  box-shadow:0 3px 12px -3px rgba(11,11,11,.35);
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.hs .dot::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1.5px solid var(--gold-soft); opacity:.6;
  animation:hsPulse 3.2s ease-out infinite;
}
.hs:hover .dot, .hs:focus-visible .dot, .hs.open .dot{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
  transform:translate(-50%,-50%) scale(1.1);
  box-shadow:0 6px 18px -4px rgba(11,11,11,.45);
}
.hs.open .dot::after{animation-play-state:paused; opacity:0;}
@keyframes hsPulse{
  0%{transform:scale(.75); opacity:.45;}
  75%{transform:scale(1.7); opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .hs .dot::after{animation:none; opacity:.25;}
}
.hs-label{
  position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%) translateY(5px);
  white-space:nowrap; background:var(--ink); color:var(--bg);
  font-family:var(--sans); font-weight:500; font-size:12px; padding:8px 13px; border-radius:7px;
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s;
}
.hs-label::after{
  content:""; position:absolute; top:100%; left:50%; margin-left:-4px;
  border:4px solid transparent; border-top-color:var(--ink);
}
.hs:hover .hs-label, .hs:focus-visible .hs-label{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.hs.open .hs-label{opacity:0; visibility:hidden;}
.hs-card{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
  width:272px; padding:20px 21px; text-align:left; cursor:default;
  background:var(--white); border:1px solid var(--line-strong); border-top:2.5px solid var(--gold);
  border-radius:13px; box-shadow:0 30px 60px -24px rgba(11,11,11,.5);
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
}
.hs.open .hs-card{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.hs-card h4{font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:8px; line-height:1.3;}
.hs-card p{font-size:12.5px; line-height:1.55; color:var(--ink-soft);}
.hs.to-left .hs-card{left:auto; right:-6px; transform:translateY(6px);}
.hs.to-left.open .hs-card{transform:translateY(0);}
.hs.up .hs-card{top:auto; bottom:calc(100% + 18px); transform:translateX(-50%) translateY(-6px);}
.hs.up.open .hs-card{transform:translateX(-50%) translateY(0);}
.hs.to-left.up .hs-card{transform:translateY(-6px);}
.hs.to-left.up.open .hs-card{transform:translateY(0);}
/* quand une info-bulle est ouverte, les autres points s'effacent pour ne pas gêner la lecture */
.shot-img.has-open .hs:not(.open){opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s, visibility .16s;}
.hs-hint{
  text-align:center; margin-top:22px; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft);
}

/* ---------- BANDEAU DE CONFIANCE ---------- */
.trust-title{
  text-align:center; font-family:var(--serif); font-weight:600;
  font-size:clamp(22px,2.4vw,30px); color:var(--ink); margin-bottom:30px;
}
.sec-dark .trust-title, .hero .trust-title{color:var(--bg);}
/* fond noir uni du hero, pas de bandeau ; espace resserré entre le titre et
   les logos, la carte d'un logo peut recouvrir le screen sous elle au survol.
   Le fondu gauche/droite ne peut plus passer par un mask-image (un mask
   recadre son élément à sa propre boîte, ce qui aurait coupé la carte quand
   elle déborde vers le bas) : deux dégradés en ::before/::after le reproduisent
   sans rogner le contenu qui déborde. */
.hero .marquee{padding:12px 0 0; z-index:2;}
.hero .marquee::before, .hero .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:9%; z-index:1; pointer-events:none;
}
.hero .marquee::before{left:0; background:linear-gradient(90deg, var(--ink), transparent);}
.hero .marquee::after{right:0; background:linear-gradient(270deg, var(--ink), transparent);}
.hero .marquee-inner{
  overflow:visible; padding-top:0; padding-bottom:0;
  -webkit-mask-image:none; mask-image:none;
}
.hero .shot-stage-wide{margin-top:38px;}

/* ---------- CITATION DE BAS DE PAGE ---------- */
.pagequote{background:var(--ink); padding:88px 0 78px; position:relative;}
.pagequote blockquote{max-width:940px; margin:0 auto; text-align:center;}
.pagequote p{
  font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.5vw,32px);
  line-height:1.32; color:var(--bg); text-wrap:balance; margin-bottom:18px;
}
.pagequote p::before{content:"« ";}
.pagequote p::after{content:" »";}
.pagequote cite{font-family:var(--serif); font-style:normal; font-size:15px; color:#8A8474;}
.pagequote blockquote + blockquote{margin-top:60px; padding-top:52px; border-top:1px solid rgba(242,237,227,.12);}
.pagequote + .endcta{padding-top:20px;}
.pagequote + .endcta .orb{display:none;}
.pagequote .orb-soft{width:300px; height:300px; left:50%; top:50%; transform:translate(-50%,-50%);
  border-color:rgba(242,237,227,.10);}

/* ---------- BLOG ---------- */
.post-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card); text-decoration:none; color:var(--ink); transition:background .25s;
}
.post-hero:hover{background:var(--white);}
.post-hero .cover{min-height:340px;}
.post-hero .body{padding:44px 42px;}
.post-meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.post-meta span{color:var(--ink-faint);}
.post-hero h2{font-size:clamp(24px,2.6vw,32px); line-height:1.18; margin-bottom:14px;}
.post-hero p{font-size:15px; color:var(--ink-soft); margin-bottom:22px;}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px;}
.post{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card);
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; transition:background .25s, transform .25s;
}
.post:hover{background:var(--white); transform:translateY(-3px);}
.post .cover{height:160px;}
.post .body{padding:26px 24px 28px; display:flex; flex-direction:column; flex:1;}
.post h3{font-size:17.5px; line-height:1.3; margin-bottom:10px;}
.post p{font-size:13.5px; color:var(--ink-soft); flex:1;}
.post .arrow-link{margin-top:18px; align-self:flex-start;}

/* ---------- BLOG : archives (accès aux autres articles) ---------- */
.arch-tools{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin:26px 0 30px;
}
.arch-search{
  display:flex; align-items:center; gap:10px; flex:1; min-width:220px; max-width:360px;
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:10px 16px;
  color:var(--ink-faint);
}
.arch-search svg{flex-shrink:0;}
.arch-search input{
  border:none; outline:none; background:none; font-family:var(--sans); font-size:13.5px;
  color:var(--ink); width:100%;
}
.arch-search input::placeholder{color:var(--ink-faint);}
.arch-filters{display:flex; flex-wrap:wrap; gap:8px;}
.arch-filters button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line-strong); background:none;
  color:var(--ink-soft); cursor:pointer; transition:all .18s;
}
.arch-filters button:hover{border-color:var(--gold);}
.arch-filters button.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}

.arch-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;}
.arch-card{
  display:flex; flex-direction:column; gap:12px; padding:24px 24px 26px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  transition:border-color .18s, background .18s; text-decoration:none;
}
a.arch-card:hover{border-color:var(--gold-soft); background:var(--white);}
.arch-card .arch-meta{
  width:auto; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
.arch-card .arch-meta .cat{color:var(--gold);}
.arch-card .arch-meta .dt{color:var(--ink-faint); letter-spacing:.04em; text-transform:none; font-size:11.5px;}
.arch-card .arch-meta .dt::before{content:"·"; margin-right:8px; color:var(--line-strong); font-family:var(--sans);}
.arch-card h4{font-size:15.5px; font-weight:500; line-height:1.35; margin:0; color:var(--ink);}
.arch-card.is-example h4{color:var(--ink-faint);}
.arch-card.is-example .arch-meta .cat{color:var(--ink-faint);}
.arch-card .arch-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:2px;}
.arch-card .arch-tags span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--bg-deep); border-radius:5px; padding:4px 8px;
}
.arch-card .arrow-link{font-size:12.5px; margin-top:2px;}
.arch-card .tag-soon{margin-top:2px;}
.arch-empty{display:none; text-align:center; padding:60px 0; color:var(--ink-faint); font-size:14px;}
.arch-empty.on{display:block;}
@media (max-width:900px){.arch-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:620px){
  .arch-grid{grid-template-columns:1fr;}
  .arch-tools{flex-direction:column; align-items:stretch;}
  .arch-search{max-width:none;}
}

.archive-list{margin-top:26px; border-top:1px solid var(--line);}
.arch-row{
  display:flex; align-items:center; gap:24px; padding:20px 4px;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
  transition:background .15s;
}
a.arch-row:hover{background:var(--card);}
.arch-meta{width:190px; flex-shrink:0; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
.arch-meta .cat{color:var(--gold);}
.arch-meta .dt{color:var(--ink-faint); display:block; margin-top:4px; letter-spacing:.04em; text-transform:none; font-size:11.5px;}
.arch-row h4{flex:1; font-size:15px; font-weight:500; line-height:1.35; margin:0;}
.arch-row .arw{color:var(--gold); flex-shrink:0;}
.arch-row.is-example{cursor:default;}
.arch-row.is-example h4{color:var(--ink-faint);}
.arch-row.is-example .arch-meta .cat{color:var(--ink-faint);}
.tag-soon{
  flex-shrink:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.archive-list .arch-page{display:none;}
.archive-list .arch-page.on{display:block;}
.archive-pager{display:flex; justify-content:center; gap:8px; margin-top:34px;}
.archive-pager button{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); background:var(--card);
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); cursor:pointer; transition:background .15s, color .15s;
}
.archive-pager button.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.archive-pager button:hover:not(.on){border-color:var(--gold);}
@media (max-width:640px){
  .arch-row{flex-wrap:wrap; gap:8px 16px;}
  .arch-meta{width:auto;}
  .arch-row h4{width:100%; order:3;}
}

/* couvertures d'articles : illustrations libres de droit (unDraw), recolorées à la charte */
.cover{position:relative; overflow:hidden; background:var(--bg-deep); display:flex; align-items:center; justify-content:center;}
.cover img{width:auto; height:auto; max-width:70%; max-height:120px; display:block;}
.post-hero .cover img{max-width:75%; max-height:270px;}
.article-cover img{max-width:70%; max-height:230px;}

/* page article */
.article{max-width:760px; margin:0 auto;}
.article .kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.article h1{font-size:clamp(30px,3.6vw,46px); line-height:1.1; margin-bottom:22px;}
.article .standfirst{font-size:18px; line-height:1.55; color:var(--ink-soft); margin-bottom:26px;}
.article .byline{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-faint);
}
.article-cover{height:300px; border-radius:12px; margin:34px 0 40px;}
.article h2{font-size:24px; margin:44px 0 14px;}
.article p{font-size:16.5px; line-height:1.68; color:#3A362E; margin-bottom:18px;}
.article ul{margin:0 0 22px 0; padding:0; list-style:none;}
.article ul li{position:relative; padding-left:20px; margin-bottom:10px; font-size:16px; color:#3A362E; line-height:1.6;}
.article ul li::before{content:""; position:absolute; left:0; top:10px; width:7px; height:7px; border-radius:50%; background:var(--gold);}
.article table{width:100%; border-collapse:collapse; margin:0 0 26px;}
.article th, .article td{text-align:left; padding:11px 14px; font-size:14.5px; color:#3A362E; border-bottom:1px solid var(--line); vertical-align:top;}
.article th{font-family:var(--sans); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); border-bottom:1px solid var(--line-strong);}
.article .toc{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px 26px; margin:30px 0 40px;}
.article .toc p{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
.article .toc ol{margin:0; padding-left:20px; color:#3A362E; font-size:14.5px; line-height:1.9;}
.article .toc a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line-strong);}
.article .toc a:hover{color:var(--gold);}
.article .updated{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:8px;}
.pull{
  margin:36px 0; padding:28px 30px; background:var(--ink); border-radius:12px;
  font-family:var(--serif); font-size:21px; line-height:1.36; color:var(--bg);
}
.sources{margin-top:44px; padding:24px 26px; background:var(--card); border:1px solid var(--line); border-radius:11px;}
.sources h4{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
.sources p{font-size:13px; color:var(--ink-soft); margin-bottom:7px;}
.article-nav{max-width:760px; margin:56px auto 0; display:flex; justify-content:space-between; gap:20px;}

@media (max-width:1080px){
  .posts{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .hs{display:none;}
  .hs-hint{display:none;}
  .post-hero{grid-template-columns:1fr;}
  .post-hero .cover{min-height:190px;}
  .post-hero .body{padding:30px 26px;}
  .posts{grid-template-columns:1fr;}
  .pagequote{padding:62px 0 56px;}
  .article-cover{height:190px;}
  .article-cover img{max-height:140px;}
  .article p{font-size:16px;}
}

/* ---------- Version anglaise ---------- */
:lang(en) .pagequote p::before, :lang(en) .quotes-big p::before{content:"\201C";}
:lang(en) .pagequote p::after, :lang(en) .quotes-big p::after{content:"\201D";}

/* ============================================================
   Mobile : navigation, mises en page et lisibilité
   ============================================================ */
.mega-all, .nav-links > a.nav-cta{display:none;}
@media (max-width:820px){
  /* Menu : panneau plein écran qui défile sous la barre */
  body.nav-open{overflow:hidden;}
  .nav-links{
    max-height:calc(100vh - 76px); max-height:calc(100dvh - 76px);
    min-height:calc(100vh - 76px); min-height:calc(100dvh - 76px);
    overflow-y:auto; overscroll-behavior:contain; padding:10px 20px 32px; gap:0;
  }
  .nav-drop{border-bottom:1px solid rgba(242,237,227,.1);}
  .nav-drop > button{
    width:100%; justify-content:space-between; padding:17px 2px; font-size:17px;
    color:var(--bg); border-radius:0;
  }
  .nav-drop > button:hover, .nav-drop.open > button{background:transparent;}
  .nav-drop > button .chev{font-size:12px;}
  .mega-in, .mega-in.solo, .mega-in.nofeature, .mega-in.solo.nofeature{grid-template-columns:1fr; padding:0 0 14px; gap:6px;}
  .mega-all{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:13px 16px; margin:2px 0 6px; border-radius:8px; text-decoration:none;
    background:rgba(242,237,227,.08); color:var(--bg); font-size:15px; font-weight:500;
  }
  .mega-all .arw{color:var(--gold-soft);}
  .mega-col a, .mega-items a{padding:13px 0;}
  .mega-col a b, .mega-items a b{font-size:15.5px;}
  .nav-links > a.nav-cta{
    display:flex; justify-content:center; margin-top:24px; padding:15px 24px; border-radius:999px;
    background:var(--bg); color:var(--ink); font-size:15px; font-weight:500;
  }
  body.nav-open .ribbon{display:none;}
  .burger{font-size:24px; width:44px; height:44px; line-height:1; margin-right:-8px;}

  /* Barre du haut : plus de place pour le logo et le menu */
  .nav-right .able-review-toggle{padding:7px 12px; font-size:12px;}

  /* Formulaires : 16 px minimum, sinon iOS zoome au focus */
  input, select, textarea{font-size:16px !important;}

  /* Contact : une seule colonne */
  .contact-grid{grid-template-columns:1fr !important; gap:44px !important;}
  .contact-grid .sim{padding:28px 22px !important;}

  /* Tableaux des pages légales : défilement horizontal dans leur cadre */
  .article .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 26px;}
  .article .table-wrap table{min-width:520px; margin:0;}

  /* Schéma « Le périmètre » : les bulles arrivent de l'extérieur, on les garde dans l'écran */
  .cluster{overflow:hidden;}

  /* Pages Solutions : boutons précédent / suivant sur une ligne */
  .phead-nav{flex-wrap:nowrap; gap:10px; margin-bottom:22px;}
  .phead-nav .btn{flex:1 1 0; max-width:none; min-height:44px; padding:9px 14px; font-size:12.5px; line-height:1.25;}
  .phead-nav .pn-prev{justify-content:flex-start; text-align:left;}
  .phead-nav .pn-next{justify-content:flex-end; text-align:right;}
  .phead-nav .btn:only-child.pn-next{margin-left:auto; flex:0 1 50%;}

  /* Valeurs : pas de hauteur imposée */
  .value5-card{min-height:0; padding:26px 22px;}

  /* Petits libellés un peu plus lisibles */
  .card .meta, .blog .post-meta, .arch-card .arch-meta{font-size:10.5px;}
  .foot-nav a{padding:3px 0;}
}
@media (max-width:480px){
  .nav-in{gap:8px;}
  .nav-right{gap:10px;}
}
@media (max-width:820px){
  /* Libellés des bulles du périmètre : lisibles sur téléphone */
  .cluster svg text{font-size:20px;}
  .cluster svg text[font-family="IBM Plex Mono"]{font-size:24px;}
}
@media (max-width:820px){
  /* Pastille « prototype interne » : discrète et jamais sous le doigt */
  .ribbon{pointer-events:none; opacity:.6;}
}

/* ============================================================
   Mobile : version miniature des encadrés, cartes et figures
   (moins de défilement ; l'ordinateur n'est pas concerné)
   ============================================================ */
@media (max-width:820px){
  /* Captures produit : l'écran entier, sans recadrage */
  .shot-wide img, .pill-shot img.zoom-m{width:100%; max-width:100%;}
  .shot-stage-wide{margin-top:30px;}
  .pill-shot{border-radius:8px; box-shadow:0 22px 44px -26px rgba(11,11,11,.45);}

  /* Rythme vertical plus serré */
  .sec{padding:48px 0;}
  .pill{padding:44px 0;}
  .phead{padding-top:38px;}
  .phead .lede{font-size:15px; margin-top:14px;}
  .sec-head{margin-bottom:22px;}
  .sec-head h2{font-size:24px; margin-top:10px;}
  .sec-head p{font-size:14.5px; margin-top:10px;}
  .pill-top{margin-bottom:22px;}
  .pill-top h2{font-size:22px; margin-bottom:10px;}
  .pill-top p{font-size:14.5px;}
  .endcta{padding:52px 0;}
  .endcta h2{font-size:24px;}
  .pagequote{padding:46px 0 40px;}
  .pagequote p{font-size:19px; margin-bottom:12px;}
  .pagequote cite{font-size:13px;}
  .pagequote blockquote + blockquote{margin-top:34px; padding-top:30px;}

  /* Accueil : les quatre briques de la solution sur un seul écran */
  .bricks{grid-template-columns:1fr 1fr;}
  .brick{padding:16px 14px 18px;}
  .brick .sig{width:32px; height:32px; margin-bottom:10px;}
  .brick .sig svg{width:15px; height:15px;}
  .brick h3{font-size:15px; line-height:1.2; margin-bottom:6px;}
  .brick p{font-size:12px; line-height:1.42;}
  .brick .go{display:none;}

  /* Grilles d'arguments numérotés : deux colonnes */
  .secgrid, .secgrid.c4{grid-template-columns:1fr 1fr;}
  .secgrid > .secitem:last-child:nth-child(odd){grid-column:1 / -1;}
  .secitem{padding:15px 14px 16px;}
  .secitem .ic{width:26px; height:26px; border-radius:6px; font-size:10.5px; margin-bottom:10px;}
  .secitem h3{font-size:14px; line-height:1.25; margin-bottom:5px;}
  .secitem p{font-size:12px; line-height:1.42;}

  /* Cartes de pages (Solutions, Équipe, Ressources, Plateforme) : deux colonnes */
  .pgrid.c2, .pgrid.c3, .pgrid.c4{grid-template-columns:1fr 1fr;}
  .pgrid > .pcard:last-child:nth-child(odd){grid-column:1 / -1;}
  .pcard, .pcard.short, .pgrid.c4 .pcard{padding:15px 14px 16px;}
  .pcard .idx{margin-bottom:4px; font-size:11px;}
  .pcard h3, .pgrid.c4 .pcard h3{font-size:15.5px; line-height:1.22; margin-bottom:8px;}
  .pcard .teaser, .pgrid.c4 .pcard .teaser{font-size:13px; margin:2px 0 12px;}
  .pcard .role{min-height:0; margin-bottom:10px; font-size:11.5px;}
  .pcard ul{gap:6px; margin-bottom:12px;}
  .pcard li{font-size:12px;}
  .pcard .arrow-link{font-size:12.5px;}
  .pgrid.blocks{gap:10px;}
  .pgrid.blocks .pcard{padding:0;}
  .pgrid.blocks .pcard-body{padding:10px 12px 12px;}
  .pgrid.blocks .pcard h3{font-size:14px; margin-bottom:6px;}

  /* Points clés sous les captures : deux colonnes */
  .pill-bottom{grid-template-columns:1fr 1fr; margin-top:18px;}
  .pill-bottom > .pill-pt:last-child:nth-child(odd){grid-column:1 / -1;}
  .pill-pt{padding:13px 13px 14px;}
  .pill-pt .dot{width:6px; height:6px; margin-bottom:8px;}
  .pill-pt p{font-size:12px; line-height:1.42;}
  .pill-sim{margin-top:22px;}

  /* Sections détaillées (sociétés sous LBO) */
  .feat{padding:28px 0; gap:14px;}
  .feat-txt h2{font-size:20px;}
  .feat-vis > .feat-pts{padding:14px 16px;}
  .feat-vis > .feat-pts li{padding:9px 0 9px 16px; font-size:12.5px; line-height:1.42;}
  .feat-vis > .feat-pts li::before{top:16.5px;}
  .feat-vis > .feat-pts li:first-child::before{top:7px;}

  /* Valeurs : deux par ligne */
  .values5{grid-template-columns:1fr 1fr; gap:10px;}
  .values5 > .value5-card:last-child:nth-child(odd){grid-column:1 / -1;}
  .value5-card{padding:16px 12px; border-radius:10px;}
  .value5-card h3{font-size:15px; margin-bottom:6px;}
  .value5-card p{font-size:12px; line-height:1.45;}

  /* Chiffres clés en médaillons : deux par ligne, plus petits */
  .medals{gap:18px 12px;}
  .medal{width:calc(50% - 8px);}
  .medal .ring{width:108px; height:108px; margin-bottom:10px;}
  .medal .ring .v{font-size:23px;}
  .medal p{font-size:12px;}

  /* Disques de la page « D'où est venue l'idée » : disque à gauche, texte à droite */
  .discs{gap:18px;}
  .discs .disc-item{display:grid; grid-template-columns:92px 1fr; column-gap:16px; align-items:center; text-align:left;}
  .discs .disc{grid-row:1 / span 2; width:92px; height:92px; margin:0; font-size:21px;}
  .discs .disc-item p{margin:0; max-width:none; font-size:13px; align-self:end;}
  .discs .disc-item .src{margin-top:4px; align-self:start; font-size:10px;}

  /* Équipe : photo à côté du nom */
  .founder{gap:18px;}
  .founder .ph{max-width:170px;}
  .tm{padding:15px 14px; display:grid; grid-template-columns:54px 1fr; column-gap:14px; align-items:start;}
  .tm .ph{grid-row:1 / span 5; width:54px; height:54px; margin:0;}
  .tm h3{font-size:15px;}
  .tm .rl{margin-bottom:6px;}
  .tm p{font-size:12.5px;}
  .tm .edu{margin-top:6px;}

  /* Frise */
  .tl-row{padding:14px 0; gap:4px;}
  .tl-row h3{font-size:16px; margin-bottom:4px;}
  .tl-row p{font-size:13px;}

  /* Accueil, utilisateurs : sous-profils en pastilles sur deux colonnes */
  .eco-pill{padding:11px 18px; font-size:14px;}
  .eco-flyout{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px;}
  .eco-flyout a{padding:9px 12px; font-size:12px; white-space:normal; line-height:1.25;}
  .eco-node{margin-bottom:12px;}

  /* Blog */
  .post-hero .cover{min-height:140px;}
  .post-hero .cover img{max-height:120px;}
  .post-hero .body{padding:18px 18px 20px;}
  .post-hero h2{font-size:20px; margin-bottom:8px;}
  .post-hero p{font-size:13.5px; margin-bottom:14px;}
  .posts{gap:12px;}
  .post .cover{height:104px;}
  .post .body{padding:14px 16px 16px;}
  .post h3{font-size:15px; margin-bottom:6px;}
  .post p{font-size:12.5px;}
  .post .arrow-link{margin-top:10px;}
  .arch-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .arch-card .arch-meta{flex-wrap:wrap; row-gap:2px;}
  .arch-card{padding:14px 13px; gap:8px; border-radius:10px;}
  .arch-card h4{font-size:13.5px;}
  .arch-card .arch-tags span{font-size:9.5px;}

  /* Citations, FAQ, formulaires */
  .quotes-big{gap:26px;}
  .quotes-big p{font-size:18px; margin-bottom:10px;}
  .quotes-big cite{font-size:13px;}
  .faq summary{padding:15px 0; font-size:15.5px;}
  .faq details p{font-size:14px; padding-bottom:16px;}
  .sim{padding:20px 16px;}
  .card{padding:18px 16px;}
  .card h3{font-size:16px;}
  .card p{font-size:13px;}

  /* Pied de page plus compact */
  .foot-nav{padding-top:40px; gap:14px 18px;}
}
@media (max-width:360px){
  .brick p, .secitem p, .pill-pt p, .value5-card p{font-size:11.5px;}
  .eco-flyout{grid-template-columns:1fr;}
  .arch-grid{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .verdict p{font-size:21px;}
  /* Onglets de la page Utilisateurs : une seule ligne */
  .tabbar{grid-template-columns:repeat(3,1fr); margin-top:26px;}
  .tabbar button{padding:12px 6px; font-size:12.5px; line-height:1.25; border-right:1px solid var(--line-strong); border-bottom:none;}
  .tabbar button:last-child{border-right:none;}
}
@media (max-width:820px){
  .arch-card .arch-meta{display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
  .arch-card .arch-meta .dt::before{display:none;}
  /* Bandeau de logos : moins de vide sous les logos */
  .marquee{padding-bottom:6px;}
  .marquee-inner{padding-bottom:64px;}
}

/* ---------- champs à renseigner (mentions légales) ----------
   Bloque la publication tant qu'il en reste : voir tools/check_publication.js */
mark.a-renseigner{background:#F6E7B8; color:var(--ink); padding:1px 5px; border-radius:3px;}