/* ==========================================================
   beton-cire.css — page pilier « Béton ciré »
   Palette : crème / aubergine / pistache / paille / lilas
   Typo    : Bricolage Grotesque (titres) + Aeonik (texte)
   ========================================================== */

:root{
  --bc-cream:#EFE9DE;
  --bc-ink:#2B2231;
  --bc-ink-soft:#554A5C;
  --bc-ink-mute:#7A7080;
  --bc-plum:#6E4F7C;
  --bc-lilac:#E5D9EC;
  --bc-pistache:#B8C98F;
  --bc-pistache-dark:#4A5730;
  --bc-straw:#F0DFA8;
  --bc-straw-dark:#6C5A20;

  --bc-r-s:20px;
  --bc-r-m:24px;
  --bc-r-l:28px;
  --bc-r-xl:clamp(30px,4vw,60px);
  --bc-r-arch:clamp(40px,6vw,90px);

  --bc-gutter:clamp(20px,4vw,60px);
  --bc-max:1500px;
  --bc-sec-y:clamp(44px,5.6vw,92px);

  --bc-h1:clamp(2.8rem,8.4vw,7.2rem);
  --bc-h2:clamp(1.9rem,4.4vw,3.5rem);
  --bc-h3:clamp(1.2rem,2.1vw,1.8rem);
  --bc-h4:clamp(1.15rem,1.9vw,1.6rem);
}

/* ---------- base ---------- */

.bc *{box-sizing:border-box}
body:has(.bc){background:#fff}
.bc{
  background:#fff;
  color:var(--bc-ink);
  font-family:Aeonik,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* resets en :where() (spécificité 0,0,1) : ils ne doivent jamais écraser
   une classe .bc-* (padding de .bc-pill, couleur de .bc-btn-solid…) */
:where(.bc) :where(h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,table){margin:0;padding:0}
:where(.bc) :where(ul,ol){list-style:none}
:where(.bc) img{display:block;max-width:100%;height:auto}
:where(.bc) a{color:var(--bc-ink);text-decoration:none}
:where(.bc) a:hover{color:var(--bc-plum)}
.bc ::selection{background:var(--bc-pistache);color:var(--bc-ink)}
.bc :focus-visible{outline:2px solid var(--bc-plum);outline-offset:3px}
.bc summary::-webkit-details-marker{display:none}

.bc-section{padding:var(--bc-sec-y) 0}
.bc-wrap{max-width:var(--bc-max);margin:0 auto;padding:0 var(--bc-gutter)}
.bc-rel{position:relative}

/* sections sombres, coins hauts arrondis */
.bc-dark{
  background:var(--bc-ink);
  color:var(--bc-cream);
  border-radius:var(--bc-r-arch) var(--bc-r-arch) 0 0;
}
/* section claire au fond béton (même texture que le hero), coins hauts arrondis */
.bc-beton{
  --bc-wave:clamp(34px,5vw,80px);
  position:relative;
  background:#f4f2ee url('images/betoncire/web/beton-texture-1672.webp') center/cover no-repeat;
  padding:calc(var(--bc-wave) + clamp(20px,2.6vw,44px)) 0;
}
/* bords haut et bas en vague : deux voiles blancs par-dessus la texture */
.bc-beton::before,.bc-beton::after{
  content:"";position:absolute;left:0;right:0;height:var(--bc-wave);pointer-events:none;
  background-repeat:no-repeat;background-size:100% 100%;
}
.bc-beton::before{top:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,0H1440V38C1260,88 1060,96 860,62C660,28 480,6 300,24C180,36 80,58 0,70Z'/%3E%3C/svg%3E")}
.bc-beton::after{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,100H1440V44C1300,20 1140,12 960,38C760,68 580,96 380,80C220,68 100,40 0,52Z'/%3E%3C/svg%3E")}
.bc-beton > .bc-wrap{position:relative;z-index:1;max-width:1120px}
/* bloc un peu plus compact */
.bc-beton .bc-h2{font-size:clamp(1.7rem,3.4vw,3rem)}
.bc-beton .bc-card{padding:clamp(14px,1.6vw,20px)}
.bc-beton .bc-lead-big{font-size:clamp(1.15rem,2vw,1.7rem)}
.bc-beton .bc-img-169{max-height:340px;width:100%;object-fit:cover}
.bc-dark a{color:var(--bc-cream)}
.bc-dark a:hover{color:var(--bc-pistache)}

/* ---------- titres ---------- */

.bc-display,.bc-h2,.bc-h3,.bc-h4,.bc-lead-big{
  font-family:var(--bc-font-titre,'Bricolage Grotesque'),Aeonik,sans-serif;
  letter-spacing:-.025em;
}
/* styles.css impose « body * {font-family:Aeonik} » et « p {font-weight:300} » :
   on rend la main aux titres (enfants hérités) et aux paragraphes de la page */
.bc-display *,.bc-h2 *,.bc-h3 *,.bc-h4 *,.bc-lead-big *{font-family:inherit}
:where(.bc) p{font-weight:inherit}
.bc-display{font-weight:500;font-size:var(--bc-h1);line-height:.92;letter-spacing:-.03em;max-width:20ch;margin-top:clamp(16px,2.2vw,28px)}
.bc-h2{font-weight:500;font-size:var(--bc-h2);line-height:1;max-width:24ch;margin-top:clamp(18px,2.2vw,28px)}
.bc-h3{font-weight:500;font-size:var(--bc-h3);line-height:1.08}
.bc-h4{font-weight:500;font-size:var(--bc-h4);line-height:1.1}
.bc-lead-big{font-weight:400;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.18}
.bc-card-title{font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:1.02rem;line-height:1.2}

.bc-mark{background:var(--bc-pistache);padding:0 .12em;border-radius:.24em;font-weight:400}
.bc-mark-dark{background:var(--bc-pistache);color:var(--bc-ink);padding:0 .14em;border-radius:.24em}

.bc-lead{margin-top:16px;max-width:62ch;line-height:1.62;color:var(--bc-ink-soft)}
.bc-dark .bc-lead{color:rgba(239,233,222,.74)}
.bc-intro{font-size:clamp(1.06rem,1.45vw,1.3rem);line-height:1.5;max-width:44ch}
.bc-p{line-height:1.62;color:var(--bc-ink-soft);max-width:52ch}
.bc-dark .bc-p{color:rgba(239,233,222,.74);max-width:54ch}
.bc-p + .bc-p{margin-top:16px}
.bc-note{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--bc-ink-mute);max-width:78ch}
.bc-dark strong{color:var(--bc-cream)}

/* ---------- surlignes / kickers ---------- */

.bc-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bc-plum)}
.bc-kicker-straw{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bc-straw-dark)}
.bc-kicker-pist{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bc-pistache-dark)}
.bc-dark .bc-kicker{color:var(--bc-pistache)}
.bc-pill{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bc-plum);background:var(--bc-lilac);padding:7px 14px;border-radius:40px}
.bc-pill-pist{display:inline-block;background:var(--bc-pistache);border-radius:40px;padding:6px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* en-tête de section : pastille + libellé + filet */
.bc-sechead{display:flex;align-items:center;gap:14px}
.bc-num{
  font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:13px;
  background:var(--bc-ink);color:var(--bc-cream);
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.bc-num-pist{background:var(--bc-pistache);color:var(--bc-ink)}
.bc-sechead-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bc-plum)}
.bc-dark .bc-sechead-label{color:var(--bc-pistache)}
.bc-rule{flex:1;height:1px;background:rgba(43,34,49,.18)}
.bc-dark .bc-rule{background:rgba(239,233,222,.24)}

/* ---------- boutons ---------- */

.bc-btn{
  display:inline-block;
  padding:16px 28px;border-radius:40px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.bc-btn-sm{padding:14px 24px;font-size:11.5px}
/* une seule famille de boutons : blanc cerclé d'encre, encre au survol */
.bc-btn-solid,.bc-btn-pist{background:#fff;border-color:var(--bc-ink);color:var(--bc-ink)}
.bc-btn-outline{border-color:var(--bc-ink);color:var(--bc-ink)}
.bc-btn-solid:hover,.bc-btn-pist:hover,.bc-btn-outline:hover{background:var(--bc-ink);border-color:var(--bc-ink);color:#fff}
.bc-dark .bc-btn-solid,.bc-dark .bc-btn-pist{border-color:#fff}
.bc-dark .bc-btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.bc-dark .bc-btn-solid:hover,.bc-dark .bc-btn-pist:hover,.bc-dark .bc-btn-outline:hover{background:transparent;border-color:#fff;color:#fff}
.bc-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.2vw,28px)}
.bc-link{border-bottom:1px solid rgba(43,34,49,.35)}
.bc-dark .bc-link{border-bottom-color:rgba(239,233,222,.45)}

/* ---------- grilles ---------- */

.bc-grid{display:grid;gap:clamp(20px,2.8vw,48px)}
.bc-grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bc-grid-tight{gap:10px}
.bc-auto-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.bc-auto-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.bc-auto-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.bc-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bc-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bc-center{align-items:center}
.bc-start{align-items:start}
.bc-stack{display:grid;gap:10px}
.bc-flow{display:grid;gap:clamp(24px,3.4vw,56px)}
.bc-span2{grid-column:span 2}

/* hero */
.bc-hero{position:relative;padding:clamp(24px,3.4vw,52px) 0 0}
.bc-hero > .bc-wrap{position:relative;z-index:1}
/* hero : surlignage et pastille sans fond, directement posés sur le béton */
.bc-hero .bc-mark{background:none;padding:0}
.bc-hero .bc-pill{background:none;padding:0}
/* fond béton : s'arrête en vague juste au-dessus de .bc-hero-lead
   (hauteur calée en JS via --bc-hero-bg-h) et passe derrière le haut de la photo */
.bc-hero-bg{
  position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:var(--bc-hero-bg-h,62%);
  background:url('images/betoncire/web/beton-texture-1672.webp') center/cover no-repeat;
  /* Je pense erreur performances chargement pour le speed index , le layout shift , le responsiv */
}
.bc-hero-bg svg{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(40px,6vw,96px);display:block}
.bc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3.4vw,58px);align-items:end;margin-top:clamp(22px,3vw,40px)}
.bc-hero-lead{max-width:48ch;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.6;color:var(--bc-ink-soft)}
.bc-hero-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--bc-r-arch)}
.bc-stamp{
  position:absolute;left:clamp(-8px,-1vw,0px);bottom:clamp(-14px,-1.6vw,-8px);
  background:#fff;border:1.5px solid var(--bc-ink);border-radius:40px;
  padding:10px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

/* chiffres clés du hero */
.bc-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:clamp(22px,2.8vw,36px)}
.bc-kpi{padding:clamp(14px,1.8vw,22px)}
.bc-kpi-num{font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1}
.bc-kpi-lab{margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
/* les 4 chiffres clés : même texture béton, chacun sa courbe */
.bc-kpi{background:#ece6de url('images/betoncire/web/beton-texture-1000.webp') center/cover no-repeat;color:var(--bc-ink)}
.bc-kpi .bc-kpi-lab{color:var(--bc-ink-mute)}
/* courbes organiques, toutes différentes (rayons elliptiques horizontal / vertical) */
.bc-kpi-a{border-radius:26px 70px 30px 90px / 40px 34px 50px 60px}
.bc-kpi-b{border-radius:80px 24px 60px 30px / 50px 30px 60px 40px}
.bc-kpi-c{border-radius:30px 90px 24px 60px / 30px 60px 40px 50px}
.bc-kpi-d{border-radius:70px 30px 90px 26px / 60px 44px 50px 34px}

/* sommaire collant */
.bc-toc{position:sticky;top:0;z-index:60;background:#fff;border-top:1px solid rgba(43,34,49,.12);border-bottom:1px solid rgba(43,34,49,.12);margin-top:clamp(28px,4vw,56px)}
.bc-toc-inner{max-width:var(--bc-max);margin:0 auto;padding:8px clamp(12px,2vw,28px);display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.bc-toc-inner::-webkit-scrollbar{display:none} /* défile toujours au doigt / trackpad, sans barre visible */
.bc-toc-label{flex:none;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bc-plum);padding-right:12px}
.bc-toc a{flex:none;padding:8px 14px;border-radius:40px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bc-toc a:hover,.bc-toc a[aria-current="true"]{background:var(--bc-ink);color:var(--bc-cream)}

/* ---------- cartes ---------- */

.bc-card{border-radius:var(--bc-r-l);padding:clamp(16px,2vw,24px)}
.bc-card-line{border:1.5px solid rgba(43,34,49,.22)}
.bc-card-beton{background:#ece6de url('images/betoncire/web/beton-texture-1000.webp') center/cover no-repeat}
.bc-dark .bc-card-line{border-color:rgba(239,233,222,.28)}
.bc-card-lilac{background:var(--bc-lilac)}
.bc-card-pist{background:var(--bc-pistache)}
.bc-card-straw{background:var(--bc-straw)}
.bc-card-cream{background:var(--bc-cream);border-radius:var(--bc-r-m);padding:clamp(14px,1.8vw,20px)}
.bc-card-ink{background:var(--bc-ink);color:var(--bc-cream);border-radius:var(--bc-r-m);padding:16px 20px;display:block}
.bc-card-ink:hover{background:var(--bc-plum)}
.bc-card p{margin-top:8px;font-size:.92rem;line-height:1.55;color:var(--bc-ink-soft)}
.bc-dark .bc-card p{color:rgba(239,233,222,.7)}
.bc-card-pist p,.bc-card-straw p{color:var(--bc-ink)}
.bc-card-idx{font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:12px;color:var(--bc-plum)}
.bc-dark .bc-card-idx{color:var(--bc-pistache)}
.bc-card-line-title{display:block;margin-top:6px;font-weight:700}

/* ---------- hub des pages de pièce (section 07 « Intérieur ») ----------
   Trois cartes cliquables en tête de section, vers les pages salon, cuisine
   et salle de bain. Ce sont des .bc-card : elles héritent de la cascade
   d'apparition et de l'inclinaison au survol (beton-cire-anim.js).
   L'image porte .bc-img (révélation en fenêtre) mais PAS .bc-img-43 :
   la parallaxe des grandes photos la ferait glisser hors de sa carte. */
.bc-hub{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(22px,2.8vw,38px);
}
.bc-hub-card{display:flex;flex-direction:column;transition:border-color .3s}
.bc-hub-card:hover{border-color:var(--bc-plum)}
.bc-hub-img{aspect-ratio:4/3;border-radius:var(--bc-r-m)}
.bc-hub-card .bc-kicker{display:block;margin-top:16px}
.bc-hub-title{
  margin-top:6px;font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;
  font-weight:700;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.08;letter-spacing:-.01em;
}
/* pousse la ligne « Voir la page » en bas, quelle que soit la longueur du texte */
.bc-hub-card p{flex:1}
.bc-hub-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bc-plum);
  transition:gap .3s ease;
}
.bc-hub-card:hover .bc-hub-go{gap:15px}

/* panneaux teintés pleine largeur */
.bc-panel{border-radius:var(--bc-r-xl);padding:clamp(22px,3.4vw,52px)}
/* grands panneaux : tous au béton du hero (texture + vague blanche en bas),
   quelle que soit leur ancienne couleur (lilac / pist / straw) */
.bc-panel-beton,.bc-panel-lilac,.bc-panel-pist,.bc-panel-straw{
  --bc-wave:clamp(30px,4vw,64px);
  position:relative;overflow:hidden;color:var(--bc-ink);
  background:#f4f2ee url('images/betoncire/web/beton-texture-1672.webp') center/cover no-repeat;
  padding-bottom:calc(clamp(22px,3.4vw,52px) + var(--bc-wave));
}

:is(.bc-panel-beton,.bc-panel-lilac,.bc-panel-pist,.bc-panel-straw) > *{position:relative;z-index:1}
/* dans une section déjà en béton : pas de vague (elle serait blanche sur la texture) */
.bc-beton :is(.bc-panel-beton,.bc-panel-lilac,.bc-panel-pist,.bc-panel-straw){padding-bottom:clamp(22px,3.4vw,52px)!important;background-image:url('images/betoncire/web/beton-texture-1000.webp')}
.bc-beton :is(.bc-panel-beton,.bc-panel-lilac,.bc-panel-pist,.bc-panel-straw)::after{display:none}
:is(.bc-panel-beton,.bc-panel-lilac,.bc-panel-pist,.bc-panel-straw)::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--bc-wave);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0,55C180,95 360,100 560,70C760,40 900,5 1100,20C1260,32 1360,60 1440,50L1440,100L0,100Z'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%;
}
.bc-panel-beton .bc-kicker-pist{color:var(--bc-ink-mute)}
.bc-panel-cut{border-radius:var(--bc-r-m) var(--bc-r-m) var(--bc-r-m) 0}

/* liste de points avec pastille */
.bc-steps{display:grid;gap:14px;margin-top:18px}
.bc-step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.bc-step p{margin-top:4px;font-size:.93rem;line-height:1.55;color:var(--bc-ink-soft)}
.bc-fact{border-radius:var(--bc-r-s);padding:14px 18px;font-size:.93rem;line-height:1.55;background:var(--bc-lilac)}

/* chiffres en blocs */
.bc-stat{border-radius:var(--bc-r-l);padding:clamp(16px,2vw,24px)}
.bc-stat-num{font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1}
.bc-stat-num small{font-size:.42em;color:var(--bc-ink-mute)}
.bc-stat-lab{margin-top:6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-plum)}

/* prix */
.bc-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:12px}
.bc-price-num{font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:clamp(3rem,6.6vw,5.6rem);line-height:.86;letter-spacing:-.04em}
.bc-price-unit{font-size:clamp(1rem,1.3vw,1.3rem);font-weight:700}

/* ---------- images ---------- */

.bc-img{width:100%;object-fit:cover;border-radius:var(--bc-r-xl)}
.bc-img-43{aspect-ratio:4/3}
.bc-img-1610{aspect-ratio:16/10}
.bc-img-169{aspect-ratio:16/9}
.bc-img-45{aspect-ratio:4/5}
.bc-img-34{aspect-ratio:3/4}
.bc-img-sq{aspect-ratio:1/1}
.bc-img-arch{border-radius:var(--bc-r-arch) var(--bc-r-arch) 0 0}
.bc-img-cut-bl{border-radius:var(--bc-r-xl) var(--bc-r-xl) var(--bc-r-xl) 0}
.bc-img-cut-br{border-radius:var(--bc-r-xl) var(--bc-r-xl) 0 var(--bc-r-xl)}
.bc-img-soft{border-radius:var(--bc-r-m)}
.bc-img-s{border-radius:var(--bc-r-s)}
.bc-img-round{border-radius:50%}
.bc-img-drop{margin-top:clamp(20px,3vw,44px)}      /* décalage vertical d'une paire */
.bc-img-lift{margin-top:clamp(-50px,-4.5vw,-18px)} /* chevauchement */
.bc-figcap{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bc-ink-mute)}
.bc-swatch-lab{margin-top:8px;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bc-ink-soft)}
.bc-swatch-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1/1;background:var(--bc-ink);color:var(--bc-cream);border-radius:50%}
.bc-swatch-more:hover{background:var(--bc-plum);color:var(--bc-cream)}
.bc-swatch-more b{font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:700;font-size:1.7rem}
.bc-swatch-more span{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.bc-logos{display:flex;gap:16px;align-items:center;margin-top:18px}
.bc-logos img{height:66px;width:auto}
.bc-doc{width:100%;max-width:200px;background:var(--bc-cream);border-radius:var(--bc-r-m);padding:16px}
.bc-grid-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.bc-grid-finitions{grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px}
.bc-grid-swatch{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:16px}

/* bandeau image + carte posée dessus */
.bc-banner{padding:0 0 clamp(30px,4vw,60px)}
.bc-banner-img{width:100%;height:clamp(380px,56vh,580px);object-fit:cover;border-radius:var(--bc-r-xl)}
.bc-banner-overlay{position:absolute;inset:clamp(20px,3vw,44px) clamp(40px,6vw,90px);display:flex;align-items:center}
.bc-banner-card{max-width:620px;background:var(--bc-cream);border-radius:var(--bc-r-m);padding:clamp(20px,2.8vw,40px)}
.bc-quote{
  margin:0;padding:clamp(28px,4.5vw,72px) 0;
  max-width:24ch;font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:400;
  font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:1.05;color:var(--bc-ink);
}

/* ---------- tableaux ---------- */

.bc-tablewrap{overflow-x:auto;margin-top:clamp(22px,2.8vw,40px)}
.bc-table{width:100%;min-width:620px;border-collapse:collapse;font-size:.93rem}
.bc-table--wide{min-width:720px}
.bc-table th{
  text-align:left;padding:10px 18px;font-weight:400;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-plum);
  border-bottom:1.5px solid var(--bc-ink);
}
.bc-table td{padding:15px 18px;border-bottom:1px solid rgba(43,34,49,.16);vertical-align:top;line-height:1.55}
.bc-table th:first-child,.bc-table td:first-child{padding-left:0}
.bc-table th:last-child,.bc-table td:last-child{padding-right:0}
.bc-table td small{display:block;color:var(--bc-ink-mute)}
.bc-table-soft{color:var(--bc-ink-soft)}
.bc-dark .bc-table th{color:rgba(239,233,222,.52);border-bottom-color:rgba(239,233,222,.5)}
.bc-dark .bc-table th.bc-th-hi{color:var(--bc-pistache);border-bottom-color:var(--bc-pistache);font-weight:700}
.bc-dark .bc-table td{border-bottom-color:rgba(239,233,222,.16);color:rgba(239,233,222,.7);padding-top:14px;padding-bottom:14px}
.bc-dark .bc-table td.bc-td-hi{color:var(--bc-cream)}
.bc-dark .bc-table td.bc-td-yes{color:var(--bc-pistache);font-weight:700}

/* ---------- FAQ ---------- */

.bc-faq{display:grid;gap:8px;align-content:start}
.bc-faq-group{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bc-plum)}
.bc-faq-group + *{margin-top:0}
.bc-faq-group.is-later{margin-top:14px}
.bc-faq details{background:var(--bc-cream);border-radius:22px;padding:4px 20px}
.bc-faq summary{
  cursor:pointer;padding:14px 0;list-style:none;
  font-family:var(--bc-font-titre,'Bricolage Grotesque'),sans-serif;font-weight:500;line-height:1.35;
}
.bc-faq-body{padding:0 0 16px;display:grid;gap:10px;font-size:.93rem;line-height:1.6;color:var(--bc-ink-soft)}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .bc-hero-grid{grid-template-columns:1fr;margin-top:clamp(60px,12vw,90px)} /* place pour la vague sous le titre */
  .bc-toc{top:0}
  .bc-banner-overlay{position:static;inset:auto;margin-top:-40px;padding:0 clamp(12px,3vw,24px)}
}
@media (max-width:640px){
  .bc-kpis{grid-template-columns:1fr}
  .bc-trio{grid-template-columns:1fr 1fr}
  .bc-span2{grid-column:auto}
  .bc-img-lift,.bc-img-drop{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .bc *{transition:none!important;animation:none!important}
}


/* ==========================================================
   ÉPURATION — page plus calme : moins de couleurs, moins de traits
   ========================================================== */

/* plus d'air entre les sections */
:root{--bc-sec-y:clamp(60px,7.5vw,124px)}

/* petits blocs : tous au béton « betonbouton », sans bordure
   (!important : certains blocs ont une couleur en style inline dans le HTML) */
.bc-card-lilac,.bc-card-pist,.bc-card-straw,.bc-card-cream,.bc-card-ink,.bc-card-line,
.bc-fact,.bc-doc,.bc-banner-card,.bc-faq details,.bc-stat,.bc-swatch-more,.bc-pill-pist{
  background:#ece6de url('images/betoncire/web/beton-texture-1000.webp') center/cover no-repeat!important;
  color:var(--bc-ink)!important;
  border:1px solid rgba(43,34,49,.12)!important; /* contour léger */
}
.bc-card-ink:hover,.bc-swatch-more:hover{background-color:#e2dcd3!important;opacity:.85}
.bc-stat-num{color:var(--bc-ink)!important}
.bc-stat-lab{color:var(--bc-ink-mute)!important}
.bc-card p{color:var(--bc-ink-soft)!important}

/* surlignages et pastilles colorés retirés */
.bc-mark,.bc-mark-dark{background:none;padding:0}
.bc-pill{background:none;padding:0}
.bc-num,.bc-num-pist{background:none;color:var(--bc-ink-mute);width:auto;height:auto;font-size:12px;font-weight:500}
.bc-kicker,.bc-kicker-pist,.bc-kicker-straw,.bc-sechead-label{color:var(--bc-ink-mute)}

/* traits : filets de section supprimés, tableaux allégés */
.bc-rule{display:none}
.bc-table th{border-bottom:1px solid rgba(43,34,49,.28)!important}
.bc-table td{border-bottom:1px solid rgba(43,34,49,.07)!important}
.bc-table th.bc-th-hi,.bc-table td.bc-td-yes{font-weight:700}

/* sommaire plus doux : pas de filets, texte discret, survol léger */
.bc-toc{border:0!important;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bc-toc-label{color:var(--bc-ink-mute);font-size:10px}
.bc-toc a{color:var(--bc-ink-mute);font-size:11px;letter-spacing:.06em;padding:7px 12px}
.bc-toc a:hover,.bc-toc a[aria-current="true"],.bc-toc a.is-active{background:#f1eee9;color:var(--bc-ink)}

/* numéros 01, 02, 03… : petite pastille douce au lieu du chiffre brut */
.bc-card-idx,.bc-step > .bc-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.75);border:1px solid rgba(43,34,49,.12);
  font-family:Aeonik,sans-serif!important;font-size:10.5px;font-weight:400;letter-spacing:.02em;
  color:var(--bc-ink-mute)!important;
}
.bc-step{grid-template-columns:26px 1fr}
/* chiffres : graisse légère au lieu du Bold, plus élégant */
.bc-kpi-num,.bc-stat-num,.bc-price-num,.bc-swatch-more b{font-weight:400!important;letter-spacing:-.02em}
.bc-price-num{letter-spacing:-.03em}
.bc-card-idx,.bc-step > .bc-num{font-weight:300!important;font-variant-numeric:lining-nums;letter-spacing:.04em}
/* ==========================================================
   ANIMATIONS (beton-cire-anim.js)
   ========================================================== */
/* titres découpés en mots : chaque mot glisse dans son propre masque */
.bc-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .02em .14em;margin:-.1em -.02em -.14em}
.bc-wi{display:inline-block;will-change:transform}
/* barre de progression de lecture sous le sommaire */
.bc-toc{position:sticky}
.bc-toc-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bc-ink);opacity:.55;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* le hero reste caché le temps que GSAP pose ses états de départ (sécurité : 2 s max, cf. <head>) */
.bc-anim-wait .bc-hero .bc-wrap,.bc-anim-wait .bc-hero-bg{visibility:hidden}
.bc-kpi{will-change:transform}
/* photos à bords carrés (les pastilles de teinte .bc-img-round restent rondes) */
.bc-hero-img,.bc-img:not(.bc-img-round),.bc-banner-img{border-radius:0!important}
/* ----- « application du béton ciré » sur les grands blocs (beton-cire-anim.js) -----
   La texture passe dans un calque .bc-trowel-layer, révélé par 3 passes de lisseuse
   (masques animés via --t1/--t2/--t3), puis un reflet façon cire. */
.bc-trowel{background-image:none!important;background-color:#fff!important}
.bc-trowel::before,.bc-trowel::after{z-index:1}
.bc-trowel > .bc-trowel-layer{
  position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  --t1:0;--t2:0;--t3:0;
  -webkit-mask-image:
    linear-gradient(90deg,#000 calc(var(--t1)*130% - 30%),transparent calc(var(--t1)*130%)),
    linear-gradient(270deg,#000 calc(var(--t2)*130% - 30%),transparent calc(var(--t2)*130%)),
    linear-gradient(90deg,#000 calc(var(--t3)*130% - 30%),transparent calc(var(--t3)*130%));
          mask-image:
    linear-gradient(90deg,#000 calc(var(--t1)*130% - 30%),transparent calc(var(--t1)*130%)),
    linear-gradient(270deg,#000 calc(var(--t2)*130% - 30%),transparent calc(var(--t2)*130%)),
    linear-gradient(90deg,#000 calc(var(--t3)*130% - 30%),transparent calc(var(--t3)*130%));
  -webkit-mask-size:100% 36%;mask-size:100% 36%;
  -webkit-mask-position:0 0,0 50%,0 100%;mask-position:0 0,0 50%,0 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.bc-trowel > .bc-trowel-layer.is-done{-webkit-mask-image:none;mask-image:none}
.bc-trowel-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);
  transform:translateX(-100%);
}

/* Sur telephone, meme les grands fonds prennent la texture legere : les
   sections y font moins de 800 px de large, et toute la page ne telecharge
   plus qu'une seule image de texture, deja utilisee par les petits blocs. */
@media (max-width:760px){
  .bc-beton,.bc-hero-bg,:is(.bc-panel-beton,.bc-panel-lilac,.bc-panel-pist,.bc-panel-straw){
    background-image:url('images/betoncire/web/beton-texture-1000.webp');
  }
}