/* ============================================================
   EBEN & OR — composants des sections 05 → 09
   B2B · Prescripteurs · Réalisations · Témoignages · Conversion
   S'appuie sur ebenor.css + sections.css
   ============================================================ */

/* sections longues : flux naturel, respiration ample */
.flow{ min-height:0; }
.wrap-pad{ position:relative; z-index:2;
  padding:clamp(72px,11vh,150px) clamp(26px,5vw,90px); }
.container{ max-width:1240px; margin:0 auto; }
.measure{ max-width:560px; }      /* largeur de lecture */
.measure-wide{ max-width:680px; }

/* glow ambiant diffus (jamais de dégradé franc) */
.glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(60px); opacity:.5;
  background:radial-gradient(circle, rgba(201,164,92,.16), transparent 68%); }

/* séparateur de section (filet doré centré, très fin) */
.sec-sep{ height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent); }

/* sur-titre mono + numéro fantôme bloc */
.ghost-head{ position:relative; }
.ghost-num{ position:absolute; font-family:var(--cormorant); font-weight:300;
  line-height:.74; color:transparent; -webkit-text-stroke:1px rgba(245,240,232,.1);
  z-index:0; user-select:none; pointer-events:none; }

/* ---------- CITATION filet gauche ---------- */
.pull{ font-family:var(--cormorant); font-style:italic; font-weight:500;
  color:var(--paper); line-height:1.42; margin:0;
  padding-left:24px; border-left:2px solid var(--or); text-wrap:balance; }
.pull em{ font-family:var(--serif); font-style:italic; color:var(--or-bright); font-weight:400; }

/* ---------- gages (label mono + une ligne) ---------- */
.gages{ display:flex; gap:clamp(20px,3vw,52px); flex-wrap:wrap; }
.gage{ flex:1 1 200px; min-width:180px; }
.gage .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--or); margin-bottom:10px;
  display:flex; align-items:center; gap:8px; }
.gage .k::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--or-bright); box-shadow:0 0 6px rgba(240,214,149,.7); flex:0 0 auto; }
.gage p{ font-family:var(--cormorant); font-weight:500; font-size:clamp(14px,1.1vw,16.5px);
  color:var(--paper-soft); line-height:1.5; margin:0; }

/* ---------- bloc CTA doré ---------- */
.cta-card{ position:relative; border:1px solid var(--hair); background:var(--noir-2);
  padding:clamp(30px,3.4vw,52px); display:flex; align-items:center;
  justify-content:space-between; gap:clamp(24px,4vw,60px); flex-wrap:wrap;
  overflow:hidden; }
.cta-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--or-bright), var(--or) 60%, transparent); }
.cta-card .ct-title{ font-family:var(--cormorant); font-weight:500;
  font-size:clamp(22px,2.4vw,34px); color:var(--paper); margin:0 0 8px; line-height:1.12; }
.cta-card .ct-title em{ font-family:var(--serif); font-style:italic; color:var(--or-bright); font-weight:400; }
.cta-card .ct-sub{ font-family:var(--cormorant); font-weight:500;
  font-size:clamp(15px,1.3vw,18px); color:var(--paper-soft); margin:0; }
.cta-card .cta{ flex:0 0 auto; }

/* ---------- 05 · triptyque de cartes ---------- */
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,24px); }
.tri-card{ position:relative; display:block;
  border:1px solid var(--hair); background:var(--noir-2); overflow:hidden;
  transition:border-color .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.tri-card:hover{ border-color:var(--or); transform:translateY(-4px); }
.tri-card .ph{ position:relative; height:230px; overflow:hidden; }
.tri-card .ph img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) brightness(.78) contrast(1.03); transition:transform 1.4s cubic-bezier(.22,1,.36,1), filter .8s ease; }
.tri-card:hover .ph img{ transform:scale(1.05); filter:saturate(.92) brightness(.9); }
.tri-card .ph::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,17,12,.92), transparent 52%); }
.tri-body{ padding:clamp(22px,2vw,30px); }
.tri-body .k{ font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--or); margin-bottom:14px; }
.tri-body h3{ font-family:var(--cormorant); font-weight:500; font-size:clamp(20px,1.7vw,25px);
  color:var(--paper); margin:0 0 14px; line-height:1.16; }
.tri-body p{ font-family:var(--cormorant); font-weight:500; font-size:15px;
  color:var(--paper-soft); line-height:1.56; margin:0; }

/* ---------- 06 · deux voies ---------- */
.voies{ display:grid; grid-template-columns:1fr 1px 1fr; gap:clamp(28px,4vw,70px); }
.voies .filet-v{ background:linear-gradient(180deg, transparent, var(--hair) 14%, var(--hair) 86%, transparent); }
.voie .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--or); margin-bottom:8px; }
.voie .vt{ font-family:var(--cormorant); font-weight:500; font-size:clamp(22px,2.1vw,30px);
  color:var(--paper); margin:0 0 18px; line-height:1.16; }
.voie .vt em{ font-family:var(--serif); font-style:italic; color:var(--or-bright); font-weight:400; }
.voie p{ font-family:var(--cormorant); font-weight:500; font-size:clamp(15px,1.2vw,17px);
  color:var(--paper-soft); line-height:1.58; margin:0 0 22px; }
.tags{ display:flex; flex-wrap:wrap; gap:9px; }
.tag-chip{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-soft); border:1px solid var(--hair); border-radius:999px; padding:7px 13px;
  transition:border-color .5s ease, color .5s ease; }
.voie:hover .tag-chip{ border-color:rgba(201,164,92,.4); }

/* ---------- 07 · galerie de réalisations ---------- */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:200px; gap:clamp(12px,1.3vw,18px); }
.tile{ position:relative; overflow:hidden; background:var(--noir-2);
  border:1px solid transparent; transition:border-color .6s ease; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.84) brightness(.82) contrast(1.03);
  transition:transform 1.5s cubic-bezier(.22,1,.36,1), filter .8s ease; }
.tile:hover img{ transform:scale(1.06); filter:saturate(.96) brightness(.94); }
.tile::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,17,12,.8), transparent 46%);
  opacity:.6; transition:opacity .7s ease; }
.tile:hover::after{ opacity:.95; }
.tile:hover{ border-color:var(--hair); }
.tile .cap{ position:absolute; left:18px; bottom:16px; z-index:2;
  transform:translateY(8px); opacity:0;
  transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.tile:hover .cap{ opacity:1; transform:none; }
.tile .cap .cn{ font-family:var(--cormorant); font-weight:500; font-size:21px;
  color:var(--or-bright); line-height:1.1; display:block; }
.tile .cap .cm{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-soft); }
/* dispositions asymétriques — 6 colonnes, mosaïque éditoriale */
.t-a{ grid-column:span 3; grid-row:span 2; }
.t-b{ grid-column:span 3; grid-row:span 1; }
.t-c{ grid-column:span 3; grid-row:span 1; }
.t-d{ grid-column:span 2; grid-row:span 1; }
.t-e{ grid-column:span 2; grid-row:span 1; }
.t-f{ grid-column:span 2; grid-row:span 1; }

/* ---------- 08 · témoignages ---------- */
.temoins{ display:flex; flex-direction:column; gap:clamp(54px,8vh,104px); align-items:center; }
.temoin{ max-width:880px; text-align:center; position:relative; }
.temoin .mk{ font-family:var(--cormorant); font-style:italic; font-weight:300;
  font-size:clamp(40px,6vw,90px); color:var(--or); opacity:.5; line-height:0; display:block; height:.4em; }
.temoin q{ display:block; font-family:var(--cormorant); font-style:italic; font-weight:500;
  font-size:clamp(23px,3vw,40px); color:var(--paper); line-height:1.32; quotes:none; text-wrap:balance; }
.temoin q em{ font-family:var(--serif); font-style:italic; color:var(--or-bright); font-weight:400; }
.temoin .attr{ font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--or); margin-top:28px;
  display:inline-flex; align-items:center; gap:12px; }
.temoin .attr::before{ content:""; width:26px; height:1px; background:var(--hair); }

/* ---------- 09.A · 3 portes ---------- */
.portes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,28px); }
.porte{ position:relative; border:1px solid var(--hair); background:var(--noir-2);
  padding:clamp(28px,2.8vw,44px); display:flex; flex-direction:column;
  min-height:300px; transition:border-color .6s ease, background .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.porte:hover{ border-color:var(--or); background:var(--noir-3); transform:translateY(-4px); }
.porte .pn{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--or); margin-bottom:auto; display:flex; align-items:center; gap:12px; }
.porte .pn .dot{ width:7px; height:7px; border-radius:50%; background:var(--or-bright);
  box-shadow:0 0 7px rgba(240,214,149,.7); }
.porte .pa{ font-family:var(--cormorant); font-weight:500; font-size:clamp(18px,1.5vw,22px);
  color:var(--paper); line-height:1.34; margin:32px 0 26px; }
.porte .plink{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  padding-top:18px; border-top:1px solid var(--hair); transition:color .5s ease, gap .4s ease; }
.porte .plink .ar{ color:var(--or); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.porte:hover .plink{ color:var(--or-bright); }
.porte:hover .plink .ar{ transform:translateX(5px); }

/* ---------- 09.B · calendrier ---------- */
.cal-frame{ border:1px solid var(--hair); background:var(--noir-2);
  padding:clamp(24px,2.6vw,40px); display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(28px,4vw,64px); align-items:center; }
.cal-aside .cal-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--or); margin-bottom:18px; }
.cal-aside .reassure{ display:flex; flex-direction:column; gap:16px; margin-top:30px; }
.cal-aside .reassure .ri{ display:flex; gap:12px; align-items:flex-start;
  font-family:var(--cormorant); font-weight:500; font-size:15.5px; color:var(--paper-soft); line-height:1.45; }
.cal-aside .reassure .ri .rc{ color:var(--or-bright); font-family:var(--mono); font-size:12px; margin-top:2px; }

.cal-widget{ background:var(--noir-3); border:1px solid var(--hair); padding:clamp(20px,2vw,30px); }
.cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal-top .mo{ font-family:var(--cormorant); font-weight:500; font-size:20px; color:var(--paper); }
.cal-top .nav-b{ display:flex; gap:8px; }
.cal-top .nav-b span{ width:30px; height:30px; border:1px solid var(--hair); display:grid; place-items:center;
  color:var(--paper-soft); font-family:var(--mono); font-size:12px; cursor:pointer; transition:border-color .4s, color .4s; }
.cal-top .nav-b span:hover{ border-color:var(--or); color:var(--or-bright); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-grid .dow{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-faint); text-align:center; padding-bottom:8px; }
.cal-grid .day{ aspect-ratio:1; display:grid; place-items:center; font-family:var(--cormorant);
  font-weight:500; font-size:15px; color:var(--paper-soft); border:1px solid transparent; cursor:pointer;
  transition:border-color .35s, color .35s, background .35s; }
.cal-grid .day.muted{ color:var(--paper-faint); opacity:.4; cursor:default; }
.cal-grid .day.free:hover{ border-color:var(--or); color:var(--or-bright); }
.cal-grid .day.sel{ background:var(--or); color:var(--noir); font-weight:600; }
.cal-slots{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:20px; border-top:1px solid var(--hair); }
.cal-slots .slot{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--paper);
  border:1px solid var(--hair); padding:9px 15px; cursor:pointer; transition:border-color .4s, color .4s, background .4s; }
.cal-slots .slot:hover{ border-color:var(--or); color:var(--or-bright); }
.cal-slots .slot.sel{ background:var(--or); color:var(--noir); border-color:var(--or); }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .tri{ grid-template-columns:1fr; }
  .tri-card .ph{ height:240px; }
  .voies{ grid-template-columns:1fr; gap:36px; }
  .voies .filet-v{ height:1px; background:linear-gradient(90deg, transparent, var(--hair), transparent); }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f{ grid-column:span 1; grid-row:span 1; }
  .t-a,.t-d{ grid-row:span 2; }
  .portes{ grid-template-columns:1fr; }
  .cta-card{ flex-direction:column; align-items:flex-start; }
  .cta-card .cta{ width:100%; justify-content:center; }
  .cal-frame{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .gallery{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .t-a,.t-d{ grid-row:span 1; }
  .tile .cap{ opacity:1; transform:none; }
  .cal-slots .slot{ flex:1 1 28%; text-align:center; }
}