/* ═══════════════════════════════════════════════════════════════
   ÉPILISE — CHARTE « CUIVRE » (oct. 2026)
   Alignée sur la nouvelle communication (affiches, roll-up, bandeau)
   et sur l'habillage déjà appliqué au site Ténor.
   Habillage uniquement : couleurs, typographie, boutons, fonds.
   Aucun texte ni image de contenu n'est modifié par ce fichier.
   Chargé en dernier sur toutes les pages.
   ═══════════════════════════════════════════════════════════════ */

/* ── Poppins auto-hébergée (pas d'appel Google Fonts) ── */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400-latin.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500-latin.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600 800;font-display:swap;src:url('fonts/poppins-700-latin.woff') format('woff')}

:root{
  --tc:#B4683A;          /* cuivre */
  --tc2:#8A4A26;         /* cuivre profond */
  --tcl:#E9C5A3;         /* cuivre clair (sur fonds sombres) */
  --ink:#1D2229;         /* graphite (titres, fonds sombres) */
  --bdy:#5E6066;         /* texte courant, gris chaud */
  --smk:#F8F1E8;         /* crème */
  --smk2:#F3EADF;
  --brd:#E7DACB;
  --wh:#FFFFFF;
  --cream:#FCF8F3;
  --copper-grad:linear-gradient(135deg,#CB8D5E 0%,#B4683A 48%,#8A4A26 100%);
  --tf:'Poppins','Plus Jakarta Sans',sans-serif;
  --sf:'Poppins','Nunito',sans-serif;
  /* variables utilisées par les articles du blog et les pages LP */
  --ac:#B4683A;
  --hd:#1D2229;
  --hf:'Poppins','Plus Jakarta Sans',sans-serif;
}

body{color:var(--bdy)}
h1,h2,h3,h4{font-family:var(--tf);color:var(--ink);font-weight:700;letter-spacing:-.015em}
::selection{background:var(--tcl);color:var(--ink)}

/* ── Fonds de section ── */
.bg-smoke,.content-block-smoke{background:var(--smk)!important}
.bg-dark{background:var(--ink)}

/* ── Sous-titres : le petit carré devient un filet cuivré ── */
.sub-title{
  font-family:var(--tf);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tc);
}
.sub-title .squre-shape{width:34px;height:1.5px;background:var(--tc)}
.sub-title .squre-shape::before,.sub-title .squre-shape::after{display:none}
.sub-title-wh{color:var(--tcl)}
.sub-title-wh .squre-shape{background:var(--tcl)}

/* ── Titres de section ── */
.sec-title h2{font-weight:700;letter-spacing:-.02em}
.tc{color:var(--tc)!important}
.bg-dark .tc,.sec-title-wh .tc,.counter-area .tc,.page-hero .tc,.footer .tc{color:var(--tcl)!important}

/* ── Boutons ── */
.th-btn{
  font-family:var(--tf);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:13.5px;border-radius:3px;background:var(--copper-grad);
}
.th-btn::before{background:var(--ink)}
.th-btn:hover{box-shadow:0 12px 30px rgba(138,74,38,.28)}
.th-btn-border{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.th-btn-border::before{background:var(--ink)}
.th-btn-border:hover{color:var(--wh);border-color:var(--ink)}
.th-btn-wh{background:var(--wh);color:var(--ink)}
.th-btn-wh::before{background:var(--tc)}
.bg-dark .th-btn-border,.page-hero .th-btn-border{color:var(--wh);border-color:rgba(255,255,255,.45)}
.bg-dark .th-btn-border::before,.page-hero .th-btn-border::before{background:var(--tc)}
.price-btn,.fsbm{font-family:var(--tf);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13.5px;border-radius:3px}
.fsbm,.price-card.featured .price-btn{background:var(--copper-grad)}
.fsbm:hover,.price-card.featured .price-btn:hover{background:var(--ink)}
.price-btn:hover{background:var(--tc)}

/* ── Barre du haut & en-tête ── */
.topbar{background:var(--ink)}
.tb-phone{color:var(--tcl)!important}
.th-header{background:rgba(252,248,243,.96);border-bottom:1px solid var(--brd)}
.main-menu > ul > li > a{font-family:var(--tf);font-weight:500;font-size:13.5px;letter-spacing:.02em}
.main-menu > ul > li > a:hover,.main-menu > ul > li.active > a{color:var(--tc)}
.header-btn-area .th-btn{font-size:12px!important}

/* ── En-tête des pages internes : graphite + halo cuivré ── */
.page-hero{background:var(--ink)}
.page-hero::before{background:radial-gradient(ellipse at 80% 50%,rgba(180,104,58,.16) 0%,transparent 65%)}
.page-hero-dots{background-image:radial-gradient(circle,rgba(233,197,163,.09) 1px,transparent 1px)}
.page-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--copper-grad)}
.page-hero-badge{font-family:var(--tf);background:rgba(180,104,58,.14);border-color:rgba(233,197,163,.28);color:var(--tcl);border-radius:3px}
.page-hero h1{font-family:var(--tf);font-weight:700;letter-spacing:-.02em}
.page-hero p{color:rgba(255,255,255,.68)}

/* ── Bandeau défilant ── */
.marquee-area{background:var(--copper-grad)}
.mq-item{font-family:var(--tf);font-weight:600;letter-spacing:.14em;color:var(--wh)}
.mq-star{opacity:.7}

/* ── Compteurs ── */
.counter-area{background:var(--ink)}
.counter-item .box-number{font-family:var(--tf);font-weight:700}
.counter-item .box-number .sfx{color:var(--tcl)}
.counter-item .counter-title{color:rgba(255,255,255,.5)}
.counter-item::after{background:var(--copper-grad)}

/* ── Icônes : cercle fin cuivré (style affiches) ── */
.usp-icon,.service-card-ico,.profil-ico,.ci-card-ico,.check-ico,.pf-ico{
  border-radius:50%!important;background:transparent!important;
  border:0!important;box-shadow:inset 0 0 0 1.5px var(--tc);
}
.ci-card-ico{box-shadow:inset 0 0 0 1.5px var(--tcl)}
.ci-card-ico svg{stroke:var(--tcl)}
.usp-text-title,.service-card-title,.profil-name,.price-name,.strat-title,.proc-title,.ps-title,.faq-q{font-family:var(--tf)}

/* ── Grand titre en filigrane derrière les sections ── */
.bg-big-title{
  background:linear-gradient(90deg,#F1E2D3 0%,#F5EADF 50%,#F9F2EB 78%,transparent 100%);
  -webkit-background-clip:text;background-clip:text;
}
.bg-smoke .bg-big-title{background:linear-gradient(90deg,#EAD3BD 0%,#F0DFCD 50%,#F5EADF 78%,transparent 100%);-webkit-background-clip:text;background-clip:text}
.bg-big-title-wh{
  background:linear-gradient(90deg,rgba(233,197,163,.22) 0%,rgba(233,197,163,.14) 55%,rgba(233,197,163,.05) 85%,transparent 100%);
  -webkit-background-clip:text;background-clip:text;
}

/* ── Cartes : coins plus fins, bordure chaude ── */
.service-card,.profil-card,.strat-card,.price-card,.sim-wrap,.form-wrap{border-color:var(--brd)}
.service-card,.profil-card,.strat-card{border-radius:6px}
.service-card:hover,.profil-card:hover,.strat-card:hover{border-color:var(--tc);box-shadow:0 18px 40px rgba(138,74,38,.10)}
.price-card{border-radius:8px}
.price-card.featured{border-color:var(--tc);box-shadow:0 0 0 1.5px var(--tc),0 24px 60px rgba(138,74,38,.14)}
.price-card.featured .price-top{background:var(--copper-grad)}
.featured-badge{font-family:var(--tf);border-radius:3px}
.price-amount,.profil-num,.sr-num,.about-float-num{font-family:var(--tf)}
.strat-num{color:rgba(180,104,58,.10);-webkit-text-stroke:1.5px rgba(180,104,58,.35)}
.ps-num{color:rgba(180,104,58,.22)}
.proc-tag,.ap-tag{border-radius:3px}
.about-float{border-radius:6px;border-color:var(--brd);box-shadow:0 14px 40px rgba(138,74,38,.12)}
.about-img-main,.tech-img-side,.faq-img-side,.process-img-col{border-radius:8px}

/* ── Panneaux accordéon (photos) ── */
.ap-container{border-radius:8px}
.ap-overlay{background:linear-gradient(to bottom,rgba(29,34,41,.35) 0%,rgba(29,34,41,.6) 60%,rgba(29,34,41,.88) 100%)}
.ap-panel.active .ap-overlay{background:linear-gradient(to bottom,rgba(29,34,41,.15) 0%,rgba(29,34,41,.45) 50%,rgba(29,34,41,.92) 100%)}
.ap-drag-btn{background:var(--copper-grad);color:var(--wh);font-family:var(--tf)}

/* ── Tableaux ── */
.freq-table th{background:var(--ink)}
.freq-table th.tc-col{color:var(--tcl)}
.freq-table tr:nth-child(odd) td{background:var(--cream)}

/* ── Simulateur ── */
.sim-results{background:var(--ink)}
.sr-num{color:var(--tcl)}
.sim-range::-webkit-slider-thumb{background:var(--tc)}

/* ── FAQ ── */
.faq-q-icon{border-color:var(--tc)}
.faq-q-icon svg{stroke:var(--tc)}
.faq-item.open .faq-q-icon{background:var(--copper-grad);border-color:var(--tc)}

/* ── Formulaires ── */
.finp{border-radius:4px;border-color:var(--brd)}
input:focus,select:focus,textarea:focus{outline-color:var(--tc);border-color:var(--tc)}
.form-right::before{background:radial-gradient(circle,rgba(180,104,58,.22) 0%,transparent 70%)}

/* ── Avant / Après ── */
.ba-slider{border-radius:8px}
.ba-label-before{background:rgba(29,34,41,.8)}
.ba-label-after{background:var(--copper-grad);color:var(--wh)}

/* ── Sections éditoriales SEO ── */
.seo-editorial{border-top:3px solid var(--tc)}
.seo-editorial h2{color:var(--ink)!important;border-bottom-color:var(--tc)!important}
.seo-editorial h3{color:var(--ink)!important;border-left-color:var(--tc)!important}
.seo-editorial strong{color:var(--ink)!important}
.seo-editorial ul li::before,.seo-editorial .seo-links a{color:var(--tc)}

/* ── Blog : articles ── */
.article-hero{position:relative}
.article-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--copper-grad)}
.article-meta-cat{background:rgba(180,104,58,.18)!important;color:var(--tcl)!important;border-radius:3px!important}
.article-cta a{background:var(--copper-grad)!important;border-radius:3px!important;text-transform:uppercase;letter-spacing:.06em;font-family:var(--tf)}

/* ── Pied de page ── */
.footer{background:var(--ink);border-top:3px solid var(--tc)}
.fw-title{color:var(--tcl);font-family:var(--tf)}
.fw-links a{color:rgba(255,255,255,.78)}
.fw-links a:hover,.fb-links a:hover{color:var(--tcl)}
.footer-brevet{background:rgba(180,104,58,.14);border-color:rgba(233,197,163,.28);color:var(--tcl);border-radius:3px}
.footer-bot{color:rgba(255,255,255,.4)}
.fb-links a{color:rgba(255,255,255,.4)}

/* ── WhatsApp : pastille cuivre ── */
.wa-float::after{background:var(--tc)!important}

/* ── Vidéos ── */
video{background:var(--ink);border-radius:8px}

/* ═══════════════════════════════════════════════════════════════
   ACCUEIL — NOUVEAU BANDEAU (fond crème, machine à droite)
   ═══════════════════════════════════════════════════════════════ */
.hero-1{
  background:linear-gradient(180deg,#FCF7F1 0%,#F8EEE2 55%,#F4E6D8 100%);
  min-height:0;align-items:stretch;
}
/* Bandeau affiché en entier, calé en bas à droite ; l'emblème cuivré se fond dans le crème */
.hero-banner{position:absolute;right:0;bottom:0;width:100%;z-index:0;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
.hero-banner img{width:100%;height:auto;display:block}
/* voile crème à gauche pour la lisibilité du texte */
.hero-1::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(252,247,241,.92) 0%,rgba(252,247,241,.7) 30%,rgba(252,247,241,0) 46%);
}
.hero-inner{min-height:calc(100vw / 3 + 190px);max-height:none;padding:70px 0 64px;align-items:start}

.hero-sub-line .line{background:var(--tc);height:1.5px;width:44px}
.hero-sub-line span{
  font-family:var(--tf);font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tc);
}
.hero-1 .big-title{
  font-family:var(--tf);font-weight:800;color:var(--ink);
  font-size:clamp(42px,4.6vw,72px);line-height:1.02;letter-spacing:-.025em;
  text-transform:uppercase;
}
.hero-1 .big-title .tc{
  color:transparent!important;
  background:var(--copper-grad);-webkit-background-clip:text;background-clip:text;
}
.hero-1 .big-title .outline{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.hero-text{font-family:var(--tf);color:var(--ink);opacity:.82;font-size:16.5px;line-height:28px;max-width:560px;margin-bottom:30px}
.hero-text strong{color:var(--ink);font-weight:600}
.hero-btns{margin-bottom:34px}
/* le bouton contour avait une couleur blanche en ligne : on le remet en graphite */
.hero-btns .th-btn-border{color:var(--ink)!important;border-color:var(--ink)!important;background:rgba(255,255,255,.4)}
.hero-btns .th-btn-border:hover{color:var(--wh)!important}
.hero-proof{border-top:1px solid rgba(180,104,58,.35);padding-top:26px}
.proof-sep{background:rgba(180,104,58,.3)}
.proof-item .num{font-family:var(--tf);color:var(--tc)}
.proof-item .lbl{color:var(--bdy);letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}

/* Puces techniques : verre crème, alignées en haut à droite, au-dessus de la machine */
.hero-thumb{align-self:start;height:auto;justify-content:flex-end}
.hero-machine{display:flex;flex-direction:row;justify-content:flex-end;gap:12px;padding:8px 0 0;min-height:0;width:100%}
.hero-chip{
  position:static;
  background:rgba(255,255,255,.72);border:1px solid rgba(180,104,58,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:4px;box-shadow:0 10px 30px rgba(138,74,38,.10);
  min-width:118px;
}
.hero-chip:hover{background:#fff;border-color:var(--tc)}
.hero-chip .cv{font-family:var(--tf);color:var(--tc)}
.hero-chip .cl{color:var(--bdy)}

/* Écrans moyens : texte sur une colonne, puces masquées */
@media (max-width:1200px) and (min-width:901px){
  .hero-1::before{background:linear-gradient(90deg,rgba(252,247,241,.95) 0%,rgba(252,247,241,.82) 45%,rgba(252,247,241,.1) 70%)}
  .hero-inner{grid-template-columns:1fr}
  .hero-content{text-align:left;max-width:600px}
  .hero-btns,.hero-proof{justify-content:flex-start}
}

/* Mobile : visuel en haut, texte en dessous sur fond crème */
@media (max-width:900px){
  .hero-1{display:block;min-height:0}
  .hero-1::before{display:none}
  .hero-banner{position:relative;inset:auto;aspect-ratio:1152/724;-webkit-mask-image:none;mask-image:none}
  .hero-banner img{height:100%;object-fit:cover}
  .hero-banner img{object-position:center}
  .hero-inner{min-height:0;padding:36px 0 56px}
  .hero-thumb{display:none}
  .hero-content{text-align:center}
  .hero-sub-line{justify-content:center}
  .hero-sub-line .line{display:none}
  .hero-sub-line span{font-size:11.5px;letter-spacing:.12em}
  .hero-1 .hero-content h1.big-title{font-size:clamp(34px,10vw,46px)!important}
  .hero-text{font-size:16px;line-height:27px;margin-left:auto;margin-right:auto}
  .hero-1 .hero-inner{padding:30px 0 48px!important;min-height:0!important}
  .hero-proof{display:grid!important;grid-template-columns:1fr 1fr;gap:18px 12px;padding-top:26px}
  .hero-proof .proof-sep{display:none}
  .header-btn-area .th-btn{letter-spacing:.02em;padding:10px 14px!important}
}

/* Écrans moyens : puces techniques masquées (déjà reprises dans la ligne de preuves) */
@media (max-width:1200px) and (min-width:901px){ .hero-thumb{display:none!important} }
/* Bouton d'en-tête sur une seule ligne */
.header-btn-area .th-btn{white-space:nowrap}
@media (max-width:1200px){ .header-btn-area .th-btn{padding:12px 16px!important;letter-spacing:.03em} }
@media (max-width:480px){
  .header-btn-area .th-btn{font-size:10.5px!important;padding:10px 12px!important;gap:6px}
  .header-btn-area .th-btn svg{display:none}
}

/* Boutons des cartes tarifs : flèche à la bonne taille (corrige l'affichage géant) */
.price-btn svg,.fsbm svg{width:16px;height:16px;flex-shrink:0}
