/* ====================================================================
   FX-PAROLES — « Paroles de clients » en ruban (passe 2027)
   Un témoignage par carte, la carte s'aimante au centre, les voisines
   s'estompent au défilement. Palette et typographies de la charte.
   ==================================================================== */
html body .parole.rub27,html body:has(.ref27-hero) .parole.rub27{padding:clamp(56px,8vh,88px) 0 clamp(44px,6vh,64px);background:var(--sombre,#16382C);overflow:hidden;position:relative;isolation:isolate}
.parole.rub27::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 70% at 15% 10%,rgba(242,184,75,.13),transparent 60%),radial-gradient(60% 80% at 90% 100%,rgba(120,190,150,.12),transparent 60%)}
.parole.rub27 .wrap{text-align:left}
html body .parole.rub27 .eyebrow{display:block;color:var(--ambre,#F2B84B)!important;text-align:left}
html body .parole.rub27 h2{color:#F2E9D0!important;text-align:left;margin:14px 0 32px;max-width:22ch;font-size:clamp(2rem,3.4vw,3rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.parole.rub27 h2 em{color:var(--ambre,#F2B84B)}
.rub27-rail{display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:6px calc(50vw - min(420px,40vw)) 14px;scroll-padding:0 calc(50vw - min(420px,40vw));margin:0 calc(50% - 50vw);width:100vw}
.rub27-rail::-webkit-scrollbar{display:none}
.rub27-rail figure{flex:0 0 min(840px,80vw);margin:0;scroll-snap-align:center;position:relative;
  padding:clamp(24px,3vw,40px) clamp(22px,3.5vw,48px);border:1px solid rgba(242,233,208,.14);border-radius:24px;min-height:min(44vh,300px);
  display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.025)}
html body .parole .rub27-rail blockquote{margin:0;text-align:left!important;font-family:'Instrument Serif','Serif secours',Georgia,serif!important;font-weight:400!important;font-style:normal!important;
  font-size:clamp(1.35rem,2.3vw,2.1rem)!important;line-height:1.2!important;letter-spacing:-.015em;color:#F2E9D0!important;text-wrap:balance;max-width:30ch;padding:0;border:0;background:none}
.rub27-rail blockquote em{font-style:italic!important;color:var(--ambre,#F2B84B)!important}
html body .parole .rub27-rail figcaption{text-align:left;margin-top:20px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,233,208,.65);line-height:1.7}
.rub27-rail figcaption b{color:var(--ambre,#F2B84B);font-weight:500}
.rub27-rail .no{position:absolute;top:18px;right:22px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.22em;color:rgba(242,233,208,.45)}
.rub27-barre{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.rub27-pts{display:flex;gap:8px}
.rub27-pts i{width:22px;height:2px;background:rgba(242,233,208,.22);border-radius:2px;transition:background .3s,width .3s}
.rub27-pts i.on{background:var(--ambre,#F2B84B);width:40px}
.rub27-btns{display:flex;gap:10px}
.rub27-btns button{background:transparent;border:1px solid rgba(242,233,208,.3);color:#F2E9D0;width:44px;height:44px;border-radius:50%;cursor:pointer;font:inherit;font-size:1.1rem;line-height:1;transition:background .2s,transform .2s,border-color .2s}
.rub27-btns button:hover{background:rgba(242,233,208,.1);transform:translateY(-1px);border-color:rgba(242,233,208,.6)}
.rub27-btns button:focus-visible{outline:2px solid var(--ambre,#F2B84B);outline-offset:3px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes rub27-focus{0%{opacity:.35;transform:scale(.94)}35%,65%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.94)}}
    .rub27-rail figure{animation:rub27-focus linear both;animation-timeline:view(inline);animation-range:cover 10% cover 90%}
  }
}
@media(max-width:600px){
  .rub27-rail figure{flex-basis:86vw;min-height:0;padding:26px 22px 28px}
  .rub27-rail blockquote{font-size:1.25rem!important}
  .parole.rub27 h2{margin-bottom:26px}
}
html body.dark .parole.rub27,html body.dark:has(.ref27-hero) .parole.rub27{background:var(--d-fond,#0B1F17)}
/* onze témoignages : points plus courts sur mobile pour tenir sur une ligne */
.rub27-pts{flex-wrap:wrap}
@media(max-width:600px){.rub27-pts{gap:6px}.rub27-pts i{width:12px}.rub27-pts i.on{width:26px}}

/* ====================================================================
   PAROLES v2 — cartes blanches sur le vert nuit (contemporain 2027)
   Une carte crème par témoignage, guillemet ambre, citation en vert
   profond, signature en mono. La carte du centre est nette, les
   voisines reculent. Rien de nouveau dans la palette.
   ==================================================================== */
html body .parole .rub27-rail figure{
  background:#FFFDF8;border:0;border-radius:28px;
  padding:clamp(34px,4vw,52px) clamp(28px,4vw,56px) clamp(28px,3.4vw,44px);
  flex:0 0 min(780px,80vw);min-height:min(46vh,330px);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
/* le guillemet, en ambre, comme une enseigne */
html body .parole .rub27-rail figure::before{
  content:"\201C";position:absolute;left:clamp(22px,3vw,44px);top:clamp(6px,1.2vw,14px);
  font-family:'Instrument Serif','Serif secours',Georgia,serif;font-size:clamp(5rem,9vw,8rem);line-height:1;color:var(--ambre,#F2B84B);pointer-events:none;
}
html body .parole .rub27-rail figure::after{content:"";display:block;width:40px;height:2px;background:var(--ambre,#F2B84B);margin:22px 0 14px;order:2}
html body .parole .rub27-rail blockquote{
  color:var(--vert,#1D4A3B)!important;padding-top:clamp(28px,3.4vw,44px);max-width:32ch;
  font-size:clamp(1.3rem,2.15vw,1.95rem)!important;line-height:1.22!important;
}
html body .parole .rub27-rail blockquote em{color:var(--or,#B8892F)!important}
html body .parole .rub27-rail figcaption{margin-top:0;order:3;color:#68766F;font-size:.6rem}
html body .parole .rub27-rail figcaption b{color:var(--vert,#1D4A3B);font-weight:500}
html body .parole .rub27-rail .no{color:rgba(29,74,59,.45);top:22px;right:26px}
/* survol : la carte se soulève */
@media(hover:hover){html body .parole .rub27-rail figure:hover{transform:translateY(-6px);box-shadow:0 56px 80px -44px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.35) inset}}
/* la carte du centre est nette, les voisines reculent (défilement) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes rub27-focus{0%{opacity:.45;transform:scale(.9) translateY(18px)}38%,62%{opacity:1;transform:none}100%{opacity:.45;transform:scale(.9) translateY(18px)}}
    html body .parole .rub27-rail figure{animation:rub27-focus linear both;animation-timeline:view(inline);animation-range:cover 8% cover 92%}
    @media(hover:hover){html body .parole .rub27-rail figure:hover{animation:none}}
  }
}
/* commandes : boutons pleins, points crème */
html body .rub27-btns button{background:#FFFDF8;border-color:transparent;color:var(--vert,#1D4A3B);width:46px;height:46px}
html body .rub27-btns button:hover{background:var(--ambre,#F2B84B);color:#1B1204;transform:translateY(-2px);border-color:transparent}
html body .rub27-pts i{background:rgba(242,233,208,.25)}
html body .rub27-pts i.on{background:#FFFDF8}
@media(max-width:600px){
  html body .parole .rub27-rail figure{flex-basis:86vw;min-height:0;padding:30px 22px 26px;border-radius:22px}
  html body .parole .rub27-rail figure::before{font-size:4.6rem;left:18px;top:4px}
  html body .parole .rub27-rail blockquote{font-size:1.2rem!important;padding-top:26px}
}