/* ==========================================================
   Client Flow — surcouche charte graphique v1.2 « La Boucle »
   Chargée après les styles de chaque page.
   ========================================================== */
:root{
  --charbon-950:#141413; --charbon:#1C1C1C; --charbon-800:#252422; --charbon-700:#33312D;
  --creme:#F7F3EC; --creme-100:#EDE8DF; --pierre-200:#D9D3C7; --pierre-300:#A8A297; --pierre-500:#6B665E;
  --ambre:#F59E0B; --ambre-clair:#FCC873; --ambre-profond:#9A4A08;
  --font-display:'Archivo','Arial Narrow',Arial,sans-serif;
}
body{font-family:'Instrument Sans',Arial,sans-serif;background:var(--creme)}
::selection{background:var(--ambre);color:var(--charbon)}

/* ---------- Typographie ---------- */
h1,h2,.section-title{font-family:var(--font-display);font-weight:800;font-stretch:82%;letter-spacing:-.005em;line-height:1.02}
h3{font-family:var(--font-display);font-weight:700;font-stretch:90%;letter-spacing:0}
h1 em,h2 em{font-style:normal}
.hero h1 em,header h1 em{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ambre);animation:none!important}
strong,b{font-weight:600}
[class*="-price"],[class*="price-"],[class*="-num"],[class*="stat-n"],.strip-k,.cb-tel,.dstat-n{font-variant-numeric:tabular-nums}

/* Surtitres : Instrument Sans 600, capitales, +8 %, sans pastille */
.section-tag,.hero-tag,.top-tag,.htag{background:none!important;border:0!important;padding:0!important;border-radius:0!important;
  font-family:'Instrument Sans',Arial,sans-serif;font-size:13px!important;font-weight:600!important;letter-spacing:.08em!important;line-height:16px}

/* ---------- Logo ---------- */
.logo,.f-logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:28px;width:auto;display:block}
.f-logo img{height:32px;width:auto;display:block}

/* ---------- Boutons : charbon sur ambre, rayon 12, survol ambre clair ---------- */
.btn-primary,.btn-nav,.btn-submit,.cf-call,.btn-cta,.btn-main{border-radius:12px!important}
.btn-primary:hover,.btn-nav:hover,.btn-submit:hover{background:var(--ambre-clair)!important;color:var(--charbon)!important;box-shadow:none!important}
.btn-primary::after{display:none!important}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ambre);outline-offset:3px}

/* ---------- Icônes de la charte (SVG inline, currentColor + point ambre) ---------- */
.cf-ico{display:block;width:24px;height:24px;flex-shrink:0}
.cf-ico-inline{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.35em;color:currentColor}
.svc-icon,.card-icon,.a-icon,.why-icon,.p-icon,.success-icon,.f-ok-icon{background:var(--charbon)!important;color:var(--creme)!important;border:0}
.svc-icon .cf-ico,.a-icon .cf-ico,.why-icon .cf-ico{width:24px;height:24px}
.card-icon .cf-ico,.p-icon .cf-ico{width:28px;height:28px}
.success-icon .cf-ico,.f-ok-icon .cf-ico{width:32px;height:32px;color:#4CC38A}
.svc-soon .svc-icon{background:var(--charbon-700)!important;color:var(--pierre-300)!important;opacity:1!important}
.pain-icon{width:40px;height:40px;border-radius:10px;background:var(--charbon-800);color:var(--creme);display:flex;align-items:center;justify-content:center;margin-top:0!important}
.pain-icon .cf-ico{width:22px;height:22px}
.tl-dot{color:var(--creme)!important}
.tl-dot .cf-ico{width:22px;height:22px}
.tl-item.now .tl-dot{color:var(--charbon)!important}

/* ---------- Boucles décoratives (ton sur ton, coupées par le bord) ---------- */
.cf-boucle{position:absolute;pointer-events:none;z-index:0;background:no-repeat center/contain}

/* Un seul bouton ambre par écran : le bouton d'en-tête passe en contour */
nav .btn-nav{background:transparent!important;color:var(--creme)!important;border:1px solid rgba(247,243,236,.28)}
nav .btn-nav:hover{background:transparent!important;border-color:var(--ambre);color:var(--ambre)!important}
.tl-item.now .tl-dot circle[fill="#F59E0B"]{fill:var(--creme)}
/* Une ou deux boucles par page au maximum */
.system::after,.process::after,.pricing::after,.included::after{display:none!important}
.htag{color:var(--ambre)!important;position:relative;z-index:1}
.bundle-new{color:var(--creme)!important}
/* Icône posée sur un aplat ambre : version mono (le point prend la couleur du texte) */
.mobile-cta-call circle[fill="#F59E0B"],.btn-primary circle[fill="#F59E0B"],.btn-nav circle[fill="#F59E0B"]{fill:currentColor}
@media (max-width:760px){
  .services::after,.pack::after,.problem::after,.why::after,.showcase::after,.dash::after,.intro::before{display:none!important}
}