
/* =========================================================
   TENUTO V41 — DESIGN SYSTEM GLOBAL
   Palette officielle + typographie cohérente
   ========================================================= */

:root{
  /* Palette principale officielle */
  --ink:#172A3A;
  --ink-2:#2F4F4F;
  --sage:#52796F;
  --terra:#C86F52;
  --paper:#F7F5EF;
  --white:#FFFFFF;
  --slate:#66747D;

  /* Palette secondaire officielle */
  --forest:#2F4F4F;
  --sage-light:#8FA9A1;
  --mist-green:#BDCEC9;
  --terra-light:#D08A73;
  --peach:#E3B29E;
  --pearl:#A7B0B6;
  --mist-gray:#D9DEE1;
  --sand:#FAEEE8;

  --line:#D9DEE1;
  --muted:#66747D;

  /* Typographie TENUTO :
     une seule famille contemporaine, nette et opérationnelle.
     Aucun chargement externe, donc rapide et robuste. */
  --font-tenuto:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- TYPOGRAPHIE GLOBALE ---------- */
html,body,button,input,select,textarea{font-family:var(--font-tenuto)}
body{
  color:var(--ink);
  background:var(--paper);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.hero p,.quote,.bridgebox strong,.proofnumber,.pain b,
.tenuto-system-card strong,.tenuto-system-result strong{
  font-family:var(--font-tenuto)!important;
}
h1,h2{
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.045em;
}
h3,h4{
  color:var(--ink);
  font-weight:750;
  letter-spacing:-.025em;
}
p,.copy,.lead,.sectionhead p{color:var(--slate)}
.eyebrow,.kicker{
  color:var(--sage);
  font-weight:850;
  letter-spacing:.13em;
}

/* ---------- SURFACES : CALMES, PAS SAPIN DE NOËL ---------- */
.white{background:#FFFFFF}
.soft{background:var(--sand)}
.card,.leadform,.optional-details{border-color:var(--mist-gray)}
.card{background:#FFFFFF}
.pain{
  background:var(--paper);
  border-top-color:var(--sage);
}
.quote{
  border-left-color:var(--terra);
  background:var(--sand);
}
.speedline span{
  background:#FFFFFF;
  border-color:var(--mist-gray);
}
.speedline i{color:var(--sage)}
.bridgebox,.strong-share{background:var(--ink);color:var(--paper)}
.proofnumber{color:var(--terra)}
.faq details{border-color:var(--mist-gray)}

/* ---------- HEADER / NAVIGATION ---------- */
.sitehead{background:var(--ink);color:var(--paper)}
.logo{color:var(--paper)}
/* CTA partager = BLEU */
.top-cta-share,
.tenuto-header-share{
  background:var(--ink)!important;
  border-color:var(--mist-green)!important;
  color:var(--paper)!important;
}
/* CTA échange = TERRACOTTA */
.top-cta-contact,
.tenuto-header-contact,
.tenuto-sticky-contact{
  background:var(--terra)!important;
  border-color:var(--terra)!important;
  color:#FFFFFF!important;
}
/* Hamburger = VERT SAUGE */
.tenuto-menu-btn{
  background:var(--sage)!important;
  border-color:var(--sage)!important;
  color:var(--paper)!important;
}
.tenuto-menu-btn:hover{background:var(--forest)!important}

/* ---------- HERO : HIÉRARCHIE, PAS MULTICOLORE ---------- */
.tenuto-hero-v37{
  background:var(--paper)!important;
  color:var(--ink)!important;
}
.tenuto-hero-v37::before{border-color:var(--mist-green)!important}
.tenuto-hero-v37::after{background:var(--sand)!important}
.tenuto-hero-v37 .eyebrow{
  color:var(--ink)!important;
  background:transparent!important;
  border-left-color:var(--sage)!important;
}
.tenuto-hero-v37 h1,
.tenuto-hero-v37 h1 em{color:var(--ink)!important}
.tenuto-hero-v37 h1 em::after{background:var(--sage)!important}

/* Les 4 bénéfices deviennent une famille cohérente */
.tenuto-hero-benefits span,
.tenuto-hero-benefits .benefit-master,
.tenuto-hero-benefits .benefit-visibility,
.tenuto-hero-benefits .benefit-sovereignty,
.tenuto-hero-benefits .benefit-durability{
  background:transparent!important;
  color:var(--ink)!important;
  border:1px solid var(--mist-green)!important;
  box-shadow:none!important;
}
.tenuto-hero-benefits .benefit-sovereignty{
  background:var(--mist-green)!important;
  border-color:var(--mist-green)!important;
}
.tenuto-hero-lead{color:var(--slate)!important}

/* Le dispositif utilise surtout bleu + ivoire.
   Sauge = technologie / système ; terracotta = micro-accent seulement. */
.tenuto-hero-system{
  background:var(--ink)!important;
  box-shadow:0 20px 45px rgba(23,42,58,.14)!important;
}
.tenuto-hero-system::before{color:var(--sage-light)!important}

.tenuto-system-card.human,
.tenuto-system-card.ai,
.tenuto-system-card.method{
  background:var(--paper)!important;
  border:1px solid rgba(247,245,239,.12)!important;
}
.tenuto-system-card.human strong,
.tenuto-system-card.ai strong,
.tenuto-system-card.method strong{color:var(--ink)!important}

.tenuto-system-card.human small{
  background:var(--terra)!important;color:#FFFFFF!important;
}
.tenuto-system-card.ai small{
  background:var(--sage)!important;color:#FFFFFF!important;
}
.tenuto-system-card.method small{
  background:var(--ink)!important;color:var(--paper)!important;
}
.tenuto-system-plus{color:var(--sage-light)!important}
.tenuto-system-plus::before,
.tenuto-system-plus::after{background:rgba(189,206,201,.35)!important}
.tenuto-system-result::before{color:var(--sage-light)!important}
.tenuto-system-result strong{
  color:var(--paper)!important;
  font-weight:750!important;
}

/* ---------- CTA / FORMULAIRE ---------- */
.leadform{background:var(--paper)}
input,select,textarea{
  color:var(--ink);
  background:#FFFFFF;
  border-color:var(--mist-gray);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--sage-light);
  outline-offset:1px;
}
button[type="submit"],.submit-btn,.primary-cta{
  background:var(--terra);
  color:#FFFFFF;
  border-color:var(--terra);
}

/* ---------- PARTAGE : BLEU, conformément au rôle ---------- */
.share-public{background:var(--paper)}
.strong-share{background:var(--ink)!important}
.share-public-actions a,
.share-public-actions button,
.share-actions a,
.share-actions button{
  border-color:var(--mist-green)!important;
}
#partager .strong-share .eyebrow{color:var(--mist-green)!important}

/* ---------- FOOTER ---------- */
footer,.footer{background:var(--ink);color:var(--paper)}
footer a,.footer a{color:var(--paper)}

/* ---------- INTERACTIONS ---------- */
a,button{transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.top-cta-contact:hover,.tenuto-sticky-contact:hover{background:var(--terra-light)!important}
.top-cta-share:hover{border-color:var(--paper)!important}

/* ---------- MOBILE ---------- */
@media(max-width:640px){
  h1{letter-spacing:-.04em}
  .tenuto-hero-benefits span{font-weight:800}
  .tenuto-hero-system{box-shadow:0 14px 32px rgba(23,42,58,.13)!important}
}
