/* ═══════════════════════════════════════════════════════════════
   É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,#1D2229 0%,#3A3330 30%,#B4683A 58%,#DDB896 80%,rgba(221,184,150,0) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.bg-smoke .bg-big-title{background:linear-gradient(90deg,#1D2229 0%,#3A3330 30%,#B4683A 58%,#DDB896 80%,rgba(221,184,150,0) 100%);-webkit-background-clip:text;background-clip:text}
.bg-big-title-wh{
  background:linear-gradient(90deg,rgba(233,197,163,.55) 0%,rgba(233,197,163,.35) 55%,rgba(233,197,163,.12) 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)
   ═══════════════════════════════════════════════════════════════ */
#accueil{
  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 */
#accueil .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%)}
#accueil .hero-banner img{width:100%;height:auto;display:block}
/* voile crème à gauche pour la lisibilité du texte */
#accueil::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%);
}
#accueil .hero-inner{min-height:calc(100vw / 3 + 190px);max-height:none;padding:70px 0 64px;align-items:start}

#accueil .hero-sub-line .line{background:var(--tc);height:1.5px;width:44px}
#accueil .hero-sub-line span{
  font-family:var(--tf);font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tc);
}
#accueil .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;
}
#accueil .big-title .tc{
  color:transparent!important;
  background:var(--copper-grad);-webkit-background-clip:text;background-clip:text;
}
#accueil .big-title .outline{-webkit-text-stroke:1.5px var(--ink);color:transparent}
#accueil .hero-text{font-family:var(--tf);color:var(--ink);opacity:.82;font-size:16.5px;line-height:28px;max-width:560px;margin-bottom:30px}
#accueil .hero-text strong{color:var(--ink);font-weight:600}
#accueil .hero-btns{margin-bottom:34px}
/* le bouton contour avait une couleur blanche en ligne : on le remet en graphite */
#accueil .hero-btns .th-btn-border{color:var(--ink)!important;border-color:var(--ink)!important;background:rgba(255,255,255,.4)}
#accueil .hero-btns .th-btn-border:hover{color:var(--wh)!important}
#accueil .hero-proof{border-top:1px solid rgba(180,104,58,.35);padding-top:26px}
#accueil .proof-sep{background:rgba(180,104,58,.3)}
#accueil .proof-item .num{font-family:var(--tf);color:var(--tc)}
#accueil .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 */
#accueil .hero-thumb{align-self:start;height:auto;justify-content:flex-end}
#accueil .hero-machine{display:flex;flex-direction:row;justify-content:flex-end;gap:12px;padding:8px 0 0;min-height:0;width:100%}
#accueil .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;
}
#accueil .hero-chip:hover{background:#fff;border-color:var(--tc)}
#accueil .hero-chip .cv{font-family:var(--tf);color:var(--tc)}
#accueil .hero-chip .cl{color:var(--bdy)}

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

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

/* ═══ PIED DE PAGE COMPACT ═══
   Les longues listes de liens passent sur 2 colonnes et « Contact » reste sur la même ligne */
.footer-top{padding:56px 0 44px}
.fw-links:has(> a:nth-child(8)){display:block;columns:2;column-gap:32px}
.fw-links:has(> a:nth-child(8)) > a{display:block;margin-bottom:10px;break-inside:avoid}
@media (min-width:1101px){
  .footer-top:has(> div:nth-child(5)){grid-template-columns:1.25fr .85fr .85fr 2fr .9fr!important;gap:36px!important}
}
@media (max-width:1100px) and (min-width:641px){
  .footer-top:has(> div:nth-child(5)){grid-template-columns:repeat(4,1fr)!important;gap:32px 28px!important}
  .footer-top:has(> div:nth-child(5)) > div:first-child{grid-column:1/-1}
  .footer-top > div:has(.fw-links > a:nth-child(8)){grid-column:span 2}
}
@media (max-width:640px){
  .footer-top{padding:44px 0 32px;gap:28px!important}
  .fw-links:has(> a:nth-child(8)){column-gap:20px}
}
@media (max-width:640px){
  .footer-top:has(> div:nth-child(5)){grid-template-columns:1fr 1fr!important;gap:28px 20px!important}
  .footer-top:has(> div:nth-child(5)) > div:first-child,
  .footer-top > div:has(.fw-links > a:nth-child(8)),
  .footer-top:has(> div:nth-child(5)) > div:last-child{grid-column:1/-1}
}

/* ═══ BLOG — bloc « À lire aussi » en fin d'article ═══ */
.related-articles{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--brd)}
.related-articles .ra-h{font-family:var(--tf);font-size:20px;font-weight:700;color:var(--ink);margin:0 0 18px}
.ra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ra-card{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--cream);border:1px solid var(--brd);border-radius:6px;text-decoration:none;transition:.25s}
.ra-card:hover{border-color:var(--tc);box-shadow:0 12px 28px rgba(138,74,38,.10);transform:translateY(-2px)}
.ra-cat{font-family:var(--tf);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tc)}
.ra-title{font-family:var(--tf);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.ra-more{margin-top:16px;font-size:14px;color:var(--bdy)}
.ra-more a{color:var(--tc);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:768px){.ra-grid{grid-template-columns:1fr}}