/* écorce — Direct Business-Value Architecture:
   Bricolage Grotesque 800 (letter-spacing: -0.02em) + Fraunces Italic,
   warm cream paper (#f4efe6), dark bark (#18120e), vibrant terracotta (#c83e2b),
   concentric tree rings, 1px horizontal rules. Zero perched eyebrows, zero boxed cards, zero display:none, zero mobile empty screens. */
@font-face{font-family:Bricolage;src:url(/demo/5/assets/fonts/bricolage.woff2?v=18) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Fraunces;src:url(/demo/5/assets/fonts/fraunces-italic.woff2?v=18) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Fraunces;src:url(/demo/5/assets/fonts/fraunces.woff2?v=18) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#f4efe6;
  --paper2:#eae2d5;
  --bark:#18120e;
  --bark2:#261c15;
  --mute:#63584f;
  --faint:#9c8f82;
  --red:#c83e2b;
  --sun:#f2b626;
  --line:rgba(24,18,14,.15);
  --sans:"Bricolage",system-ui,"Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --pad:clamp(20px,4.4vw,68px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  background:var(--paper);
  color:var(--bark);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit}
p,figure,h1,h2,h3,dl,dt,dd{margin:0}
img{display:block;max-width:100%;height:auto}
em,.it{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-variation-settings:"SOFT" 100,"WONK" 1;
  letter-spacing:-.015em;
}
.micro{
  font:600 11px/1.2 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mute{color:var(--mute)}

/* Paper grain overlay */
.grain{position:relative;isolation:isolate}
.grain:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:.18;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Signature Écorce ring inside logotype (éc[o]rce) */
.sr-o{
  font-size:0;
  line-height:0;
  color:transparent;
}
.rg{
  display:inline-block;
  width:.56em;
  height:.56em;
  border-radius:50%;
  border:.12em solid var(--red);
  position:relative;
  margin:0 .025em;
  transform:translateY(.02em);
  vertical-align:baseline;
}
.rg:after{
  content:"";
  position:absolute;
  inset:.08em;
  border-radius:50%;
  background:var(--bark);
}

/* Concentric tree-ring watermark */
.rings{
  position:absolute;
  width:clamp(420px,64vw,920px);
  height:clamp(420px,64vw,920px);
  pointer-events:none;
  z-index:0;
  opacity:.055;
}

/* Minimal topbar: éc[o]rce on the left, FR / EN on the right. */
.bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px var(--pad);
  position:relative;
  z-index:5;
}
.mark{
  font:800 26px/1 var(--sans);
  font-stretch:92%;
  letter-spacing:-.015em;
  text-decoration:none;
  display:inline-block;
}
.lang{
  font:700 11px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--mute);
  transition:color .2s;
}
.lang:hover{color:var(--bark)}

/* 01 — HERO: What is it? (Ce que c'est) — Strictly scoped to section.open */
section.open{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
section.open .rings{
  right:-18vw;
  bottom:-24vw;
}
section.open .body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5vh var(--pad) 5vh;
  position:relative;
  z-index:4;
}
section.open h1{
  font:800 clamp(50px,12.2vw,154px)/.9 var(--sans);
  font-stretch:94%;
  letter-spacing:-.02em;
  margin:0 0 .28em -.02em;
  max-width:12.5em;
}
section.open h1 em{
  color:var(--red);
  display:block;
  font-weight:400;
  letter-spacing:-.015em;
}
section.open .say,section.open .lead{
  font:300 clamp(20px,2.2vw,31px)/1.32 var(--serif);
  max-width:27em;
  margin:0;
  letter-spacing:-.005em;
  color:var(--bark2);
}
section.open .foot-link{
  padding:0 var(--pad) 4.5vh;
  position:relative;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  gap:16px 36px;
  align-items:baseline;
}
.jump{
  font:400 italic clamp(19px,1.65vw,24px)/1.2 var(--serif);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  color:var(--red);
  transition:color .2s;
}
.jump.sec-link{
  color:var(--bark2);
}
.jump:hover{color:var(--bark)}

@media(max-width:640px){
  section.open{
    min-height:100vh;
    min-height:100svh;
  }
  section.open .body{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:3vh var(--pad) 3vh;
  }
  section.open h1{
    font-size:clamp(46px,12.8vw,68px);
    line-height:.88;
    margin:0 0 .34em -.02em;
  }
  section.open .say,section.open .lead{
    font-size:20px;
    line-height:1.34;
  }
  section.open .foot-link{
    padding:0 var(--pad) 4.5vh;
  }
}

/* Horizontal 1px rule sections (.carry + .row, zero boxes, zero perched eyebrows) */
.carry{
  padding:clamp(48px,9vh,112px) 0 clamp(40px,7vh,88px);
  background:var(--paper);
}
.carry.benefits{
  padding-top:clamp(48px,9vh,112px);
  padding-bottom:clamp(40px,7vh,88px);
}
.carry.funnel{
  padding-top:clamp(44px,8vh,96px);
  padding-bottom:clamp(40px,7vh,88px);
  border-top:1px solid var(--line);
}
.carry.world{
  padding-top:clamp(44px,8vh,96px);
  padding-bottom:clamp(44px,8vh,96px);
}
.carry .head{
  padding:0 var(--pad);
  margin-bottom:clamp(28px,5vh,64px);
}
.carry h2{
  font:800 clamp(42px,8.2vw,132px)/.92 var(--sans);
  font-stretch:94%;
  letter-spacing:-.02em;
  margin:0 0 0 -.02em;
}
.carry h2 em{
  color:var(--red);
  font-weight:400;
  display:block;
  letter-spacing:-.015em;
}
.carry .sub-lead{
  font:300 italic clamp(20px,2.1vw,30px)/1.32 var(--serif);
  color:var(--bark2);
  max-width:29em;
  margin-top:26px;
}
.carry ul{
  list-style:none;
  margin:0;
  padding:0;
}
.row{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px 16px;
  padding:30px var(--pad) 34px;
  border-top:1px solid var(--line);
  text-decoration:none;
  transition:background .2s;
}
a.row:hover{
  background:var(--paper2);
}
.carry li:last-child .row{
  border-bottom:1px solid var(--line);
}
.row .n{
  font:600 11px/1 var(--sans);
  letter-spacing:.14em;
  padding-top:14px;
  color:var(--faint);
}
.row .bn{
  font:400 clamp(28px,4.4vw,68px)/.98 var(--serif);
  letter-spacing:-.015em;
  margin:0;
  grid-column:2;
}
.row .mine{
  grid-column:2;
  font:300 clamp(19px,1.9vw,26.5px)/1.34 var(--serif);
  margin:6px 0 0;
  max-width:27em;
  color:var(--bark2);
}
.row .proof{
  display:inline-block;
  margin-left:6px;
  font-style:italic;
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

/* SECTION 3 (Dark Bark #18120e) — How it works (Comment ça marche) */
.did{
  background:var(--bark);
  color:var(--paper);
  padding:clamp(52px,9vh,112px) var(--pad) clamp(48px,8vh,96px);
  position:relative;
  overflow:hidden;
}
.did .rings{
  left:-22vw;
  top:-18vw;
  opacity:.05;
}
.did h2{
  font:800 clamp(42px,7.6vw,122px)/.92 var(--sans);
  font-stretch:94%;
  letter-spacing:-.02em;
  margin:0 0 clamp(28px,5vh,64px) -.02em;
  max-width:13.5em;
  position:relative;
  z-index:4;
}
.did h2 em{
  color:var(--sun);
  font-weight:400;
  display:block;
  letter-spacing:-.015em;
}
.facts{
  position:relative;
  z-index:4;
}
.fact{
  display:grid;
  grid-template-columns:1fr;
  gap:10px 32px;
  padding:34px 0;
  border-top:1px solid rgba(244,239,230,.15);
}
.fact:last-of-type{
  border-bottom:1px solid rgba(244,239,230,.15);
}
.fact .step-num{
  font:300 italic clamp(44px,6.5vw,92px)/.88 var(--serif);
  color:var(--sun);
  letter-spacing:-.02em;
}
.fact h3{
  font:800 clamp(26px,3.2vw,44px)/1.04 var(--sans);
  font-stretch:94%;
  letter-spacing:-.015em;
  color:var(--paper);
}
.fact p{
  margin:0;
  font:300 clamp(19px,1.95vw,26.5px)/1.34 var(--serif);
  max-width:26em;
  color:#ece6da;
}

@media(min-width:900px){
  .row{
    grid-template-columns:70px 1.05fr 1.05fr;
    align-items:baseline;
    padding:38px var(--pad) 42px;
  }
  .row .bn{grid-column:2}
  .row .mine{grid-column:3;margin:0}

  .fact{
    grid-template-columns:minmax(110px,.28fr) .88fr 1.15fr;
    align-items:baseline;
    gap:32px;
    padding:40px 0;
  }
}

/* Funnel pricing rows: monumental price on the left, title in middle, turnkey scope on right */
.funnel .row{
  grid-template-columns:1fr;
  gap:12px 24px;
}
.funnel .row .price{
  font:400 italic clamp(34px,4.2vw,64px)/.96 var(--serif);
  color:var(--red);
  letter-spacing:-.015em;
}
.funnel .row .bn{
  grid-column:1;
  font:800 clamp(25px,3.1vw,44px)/1.04 var(--sans);
  font-stretch:94%;
  letter-spacing:-.015em;
  color:var(--bark);
}
.funnel .row .mine{
  grid-column:1;
  margin:0;
  max-width:27em;
}
.funnel .foot-cta{
  padding:clamp(24px,4vh,44px) var(--pad) 0;
  display:flex;
  flex-wrap:wrap;
  gap:16px 36px;
  align-items:baseline;
}

@media(min-width:900px){
  .funnel .row{
    grid-template-columns:minmax(190px,.58fr) .92fr 1.15fr;
    align-items:baseline;
    padding:40px var(--pad) 44px;
  }
  .funnel .row .price{grid-column:1}
  .funnel .row .bn{grid-column:2}
  .funnel .row .mine{grid-column:3}
}

/* Partner showcase band inside #monde ("Ils bâtissent et opèrent avec nous sur le terrain") */
.partners-band{
  padding:clamp(32px,5vh,52px) var(--pad) 0;
}
.partners-band .partners-title{
  font:400 italic clamp(21px,2.1vw,29px)/1.3 var(--serif);
  color:var(--bark2);
  margin:0 0 20px;
}
.partners-names{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  align-items:baseline;
  padding:18px 0 22px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.partners-names span{
  font:800 clamp(17px,1.7vw,22px)/1.2 var(--sans);
  letter-spacing:-.01em;
  color:var(--bark);
}
.partners-names i{
  font-style:normal;
  color:var(--faint);
}
.partners-logos{
  display:flex;
  flex-wrap:wrap;
  gap:22px 34px;
  align-items:center;
  padding-top:22px;
}
.partners-logos img{
  height:28px;
  width:auto;
  max-width:128px;
  object-fit:contain;
  filter:grayscale(1) contrast(1.1);
  opacity:.78;
  transition:opacity .2s,filter .2s;
}
.partners-logos img:hover{
  filter:grayscale(0);
  opacity:1;
}

/* Final Terracotta Turn (#turn) — compact natural flow on mobile & desktop, zero forced 100svh empty screens */
.turn{
  background:var(--red);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(32px,5vh,56px);
  padding:clamp(52px,8vh,96px) var(--pad) clamp(44px,6vh,72px);
  position:relative;
  overflow:hidden;
}
.turn .rings{
  right:-20vw;
  bottom:-26vw;
  opacity:.08;
}
.turn .in{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0;
  position:relative;
  z-index:4;
}
.turn h2{
  font:800 clamp(42px,8.8vw,138px)/.92 var(--sans);
  font-stretch:94%;
  letter-spacing:-.02em;
  margin:0 0 .32em -.02em;
}
.turn h2 em{
  display:block;
  color:var(--sun);
  font-weight:400;
  letter-spacing:-.015em;
}

/* Single copyable prompt sentence in large Fraunces Italic */
.prompt{
  font:300 italic clamp(22px,2.6vw,36px)/1.3 var(--serif);
  margin:0 0 32px;
  max-width:26em;
  color:#fff;
  letter-spacing:-.01em;
}

.turn-actions{
  display:flex;
  flex-wrap:wrap;
  gap:20px 32px;
  align-items:center;
}

/* Stark cream button */
.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font:800 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:22px 30px;
  background:var(--paper);
  color:var(--bark);
  border:0;
  align-self:flex-start;
  cursor:pointer;
  transition:transform .2s;
}
.btn:hover{
  transform:translateY(-2px);
}

.turn-team-link{
  font:400 italic clamp(19px,1.7vw,24px)/1.25 var(--serif);
  color:var(--paper);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}

/* 1-click AI launcher shortcuts below .turn-actions */
.turn-shortcuts{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(244,239,230,.22);
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:baseline;
}
.turn-shortcuts a{
  font:400 italic clamp(17px,1.5vw,21px)/1.25 var(--serif);
  color:rgba(244,239,230,.95);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  transition:color .2s;
}
.turn-shortcuts a:hover{
  color:var(--sun);
}

/* Discreet footer + Closing maxim + Giant footer wordmark */
.foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:14px 24px;
  padding:44px var(--pad) 18px;
}
.foot .micro{color:var(--mute)}
.foot .micro a{
  color:var(--mute);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.foot .micro a:hover{color:var(--bark)}
.closing-maxim{
  padding:0 var(--pad) 1.5vh;
  font:400 italic clamp(28px,3.8vw,56px)/1.05 var(--serif);
  color:var(--red);
  letter-spacing:-.015em;
}
.wordmark{
  font:800 clamp(80px,21.5vw,340px)/.88 var(--sans);
  font-stretch:92%;
  letter-spacing:-.02em;
  margin:0;
  padding:0 var(--pad) 4vh calc(var(--pad) - .02em);
  color:var(--bark);
  display:block;
}