/* ====================================================================
   FX-RSE — la mise en scène de la page Démarche RSE (passe 2027)
   --------------------------------------------------------------------
   Pas de nouvelle couleur, pas de nouvelle typographie. La page bouge
   au défilement, les preuves se comptent, le rituel devient un cycle,
   l'éco-conception se mesure en direct.
   Tout ce qui masque du contenu est enfermé dans
   @supports (animation-timeline:view()) + prefers-reduced-motion.
   ==================================================================== */

/* ---- 1. LE HERO : le sceau se trace, le titre cède la place au scroll -- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes rse27-out{to{transform:translateY(-4vh);opacity:.18;filter:blur(2px)}}
    .rse27-hero .rse27-txt{animation:rse27-out linear both;animation-timeline:view();animation-range:exit-crossing 0% exit 100%}
    @keyframes rse27-sceauOut{to{transform:scale(.86);opacity:.2}}
    .rse27-hero .rse27-sceau{animation:rse27-sceauOut linear both;animation-timeline:view();animation-range:exit-crossing 0% exit 100%}
  }
}
@media (prefers-reduced-motion:no-preference){
  .rse27-sceau::after{--rse-ang:0deg;
    mask:conic-gradient(from -90deg,#000 var(--rse-ang),transparent 0);-webkit-mask:conic-gradient(from -90deg,#000 var(--rse-ang),transparent 0);
    animation:rse27-trace 1.7s cubic-bezier(.22,1,.36,1) .25s both}
  @keyframes rse27-trace{from{--rse-ang:0deg}to{--rse-ang:360deg}}
}

/* ---- 2. LES PREUVES : matière, et les chiffres se comptent ------------ */
.rse27-preuves{position:relative;overflow:hidden;isolation:isolate}
.rse27-preuves::before{content:"";position:absolute;inset:-20% -10%;z-index:-2;
  background:radial-gradient(60% 90% at 18% 0%,rgba(242,184,75,.16),transparent 62%),
             radial-gradient(70% 120% at 92% 110%,rgba(120,190,150,.14),transparent 60%),
             linear-gradient(168deg,#1c4d3d 0%,#16382C 48%,#102a21 100%)}
.rse27-preuves::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.055'/></svg>")}
html body .rse27-pgrid b>span[data-count]{display:inline-block;min-width:1ch;text-align:left;font:inherit;font-size:1em;color:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0;opacity:1;max-width:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes rse27-drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
    .rse27-preuves::before{animation:rse27-drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes rse27-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    .rse27-pgrid>div{animation:rse27-in linear both;animation-timeline:view();animation-range:entry 10% entry 45%}
    .rse27-pgrid>div:nth-child(2){animation-range:entry 16% entry 51%}
    .rse27-pgrid>div:nth-child(3){animation-range:entry 22% entry 57%}
    .rse27-pgrid>div:nth-child(4){animation-range:entry 28% entry 63%}
    .rse27-pgrid b i{display:inline-block;animation:rse27-in linear both;animation-timeline:view();animation-range:entry 60% entry 95%}
  }
}

/* ---- 3. LES SIX LEVIERS : un à la fois -------------------------------- */
/* Desktop large : la liste reste, le levier courant s'allume, les
   descriptions défilent. Mobile : un rail qui s'aimante, un levier par
   écran. Entre les deux : la grille d'origine, en trois colonnes.       */
.rse27-lnav{display:none}
.rse27-lhint{display:none}
@media(min-width:1101px){
  html body .rse27-lwrap{timeline-scope:--lv1,--lv2,--lv3,--lv4,--lv5,--lv6;display:grid;grid-template-columns:minmax(260px,.75fr) 1.25fr;gap:clamp(48px,7vw,110px);align-items:start;margin-top:48px;border-top:1px solid rgba(199,154,62,.35);padding-top:40px}
  .rse27-lnav{display:block;position:sticky;top:clamp(110px,20vh,200px);list-style:none;margin:0;padding:0}
  .rse27-lnav li{font-family:'Instrument Serif','Serif secours',Georgia,serif;font-size:clamp(1.5rem,2vw,1.9rem);line-height:1.15;color:var(--vert);padding:12px 0 12px 44px;position:relative;opacity:.6;transition:opacity .3s}
  .rse27-lnav li::before{content:attr(data-n);position:absolute;left:0;top:19px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.2em;color:var(--or);font-weight:700}
  .rse27-lnav li::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ambre);transition:width .4s cubic-bezier(.22,1,.36,1)}
  html body .rse27-lgrid{display:flex;flex-direction:column;gap:0;margin:0;border:0}
  html body .rse27-lgrid article{border:0;padding:clamp(48px,11vh,120px) 0;min-height:0;max-width:52ch;border-bottom:1px solid rgba(29,74,59,.12)}
  html body .rse27-lgrid article:first-child{padding-top:8px}
  html body .rse27-lgrid article:last-child{border-bottom:0;padding-bottom:clamp(40px,14vh,160px)}
  html body .rse27-lgrid h3{font-size:clamp(2rem,2.8vw,2.7rem);margin:12px 0 14px}
  html body .rse27-lgrid p{font-size:1.08rem;line-height:1.6}
  .rse27-lgrid article:nth-child(1){view-timeline-name:--lv1}
  .rse27-lgrid article:nth-child(2){view-timeline-name:--lv2}
  .rse27-lgrid article:nth-child(3){view-timeline-name:--lv3}
  .rse27-lgrid article:nth-child(4){view-timeline-name:--lv4}
  .rse27-lgrid article:nth-child(5){view-timeline-name:--lv5}
  .rse27-lgrid article:nth-child(6){view-timeline-name:--lv6}
  @supports (timeline-scope:--a){
    @media (prefers-reduced-motion:no-preference){
      @keyframes rse27-lit{0%{opacity:.6}42%,58%{opacity:1}100%{opacity:.6}}
      @keyframes rse27-under{0%{width:0}42%,58%{width:100%}100%{width:0}}
      .rse27-lnav li{animation:rse27-lit linear both;animation-range:cover 0% cover 100%}
      .rse27-lnav li::after{animation:rse27-under linear both;animation-range:cover 0% cover 100%}
      .rse27-lnav li:nth-child(1),.rse27-lnav li:nth-child(1)::after{animation-timeline:--lv1}
      .rse27-lnav li:nth-child(2),.rse27-lnav li:nth-child(2)::after{animation-timeline:--lv2}
      .rse27-lnav li:nth-child(3),.rse27-lnav li:nth-child(3)::after{animation-timeline:--lv3}
      .rse27-lnav li:nth-child(4),.rse27-lnav li:nth-child(4)::after{animation-timeline:--lv4}
      .rse27-lnav li:nth-child(5),.rse27-lnav li:nth-child(5)::after{animation-timeline:--lv5}
      .rse27-lnav li:nth-child(6),.rse27-lnav li:nth-child(6)::after{animation-timeline:--lv6}
      @keyframes rse27-stepIn{from{opacity:.25;transform:translateY(24px)}20%,80%{opacity:1;transform:none}to{opacity:.35;transform:translateY(-10px)}}
      html body .rse27-lgrid article{animation:rse27-stepIn linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    }
  }
  @supports not (timeline-scope:--a){ .rse27-lnav li{opacity:1} }
}
@media(max-width:600px){
  html body .rse27-lgrid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:36px calc(50% - 50vw) 0;padding:0 16px 18px;scrollbar-width:none;border-top:0}
  html body .rse27-lgrid::-webkit-scrollbar{display:none}
  html body .rse27-lgrid article{flex:0 0 78vw;scroll-snap-align:start;border:1px solid rgba(29,74,59,.14);border-radius:18px;padding:22px 20px 24px;min-height:0;background:rgba(255,255,255,.35)}
  html body .rse27-lgrid article:first-child{padding-left:20px}
  html body .rse27-lgrid p{font-size:.92rem}
  .rse27-lhint{display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);opacity:.8}
}

/* ---- 4. LE RITUEL : un anneau, pas une liste ---------------------------- */
html body .rse27-etapes .rse27-centre{display:none}
@media(min-width:1101px){
  html body .rse27-rgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
  html body .rse27-etapes{position:relative;width:300px;height:300px;margin:52px 0 40px 200px;list-style:none;padding:0}
  html body .rse27-etapes::before{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:50%;border:1px solid var(--ambre);background:none}
  html body .rse27-etapes::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px dashed rgba(242,233,208,.28)}
  @media (prefers-reduced-motion:no-preference){
    @keyframes rse27-spin{to{transform:rotate(360deg)}}
    html body .rse27-etapes::after{animation:rse27-spin 70s linear infinite}
  }
  html body .rse27-etapes li{position:absolute;width:230px;padding:0;gap:14px;grid-template-columns:40px 1fr;align-items:center}
  html body .rse27-etapes li:nth-child(1){left:50%;top:0;transform:translate(-20px,-50%)}
  html body .rse27-etapes li:nth-child(2){left:100%;top:50%;transform:translate(-20px,-50%)}
  html body .rse27-etapes li:nth-child(3){left:50%;top:100%;transform:translate(-20px,-50%)}
  html body .rse27-etapes li:nth-child(4){right:100%;top:50%;transform:translate(20px,-50%);grid-template-columns:1fr 40px;text-align:right}
  html body .rse27-etapes li:nth-child(4) .d{order:2}
  html body .rse27-etapes li:nth-child(4) p{margin-left:auto}
  html body .rse27-etapes h3{font-size:1.45rem}
  html body .rse27-etapes p{font-size:.82rem;max-width:22ch}
  html body .rse27-etapes .d{transition:background .4s,color .4s,box-shadow .4s}
  html body .rse27-etapes .rse27-centre{display:grid;place-items:center;align-content:center;grid-template-columns:1fr;position:absolute;inset:0;width:auto;transform:none;padding:0;pointer-events:none;text-align:center;
    font-family:'Instrument Serif','Serif secours',Georgia,serif;font-style:italic;color:var(--ambre);font-size:1.35rem;line-height:1.05}
  .rse27-centre b{display:block;font-weight:400}
  .rse27-centre small{display:block;margin-top:8px;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,233,208,.6)}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      html body .rse27-etapes{view-timeline:--rseanneau block;animation:rse27-ring linear both;animation-timeline:--rseanneau;animation-range:entry 40% cover 75%}
      html body .rse27-etapes::before{
        mask:conic-gradient(from -90deg,#000 var(--rse-ang),transparent 0);-webkit-mask:conic-gradient(from -90deg,#000 var(--rse-ang),transparent 0)}
      @keyframes rse27-ring{from{--rse-ang:0deg}to{--rse-ang:360deg}}
      @keyframes rse27-lit2{from{background:var(--vert);color:var(--ambre);box-shadow:none}to{background:var(--ambre);color:#2E1F05;box-shadow:0 0 0 6px rgba(242,184,75,.18)}}
      html body .rse27-etapes .d{animation:rse27-lit2 linear both;animation-timeline:--rseanneau}
      html body .rse27-etapes li:nth-child(1) .d{animation-range:entry 40% entry 60%}
      html body .rse27-etapes li:nth-child(2) .d{animation-range:entry 70% cover 32%}
      html body .rse27-etapes li:nth-child(3) .d{animation-range:cover 32% cover 50%}
      html body .rse27-etapes li:nth-child(4) .d{animation-range:cover 50% cover 75%}
      @keyframes rse27-fadeIn{from{opacity:.35}to{opacity:1}}
      html body .rse27-etapes li>div{animation:rse27-fadeIn linear both;animation-timeline:--rseanneau}
      html body .rse27-etapes li:nth-child(1)>div{animation-range:entry 40% entry 60%}
      html body .rse27-etapes li:nth-child(2)>div{animation-range:entry 70% cover 32%}
      html body .rse27-etapes li:nth-child(3)>div{animation-range:cover 32% cover 50%}
      html body .rse27-etapes li:nth-child(4)>div{animation-range:cover 50% cover 75%}
    }
  }
}
/* la variable animée sur l'anneau est héritée par ::before */
@property --rse-ang{syntax:'<angle>';inherits:true;initial-value:360deg}

/* ---- 5. ÉCO-CONCEPTION : la preuve en direct ---------------------------- */
.rse27-live{display:none;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid rgba(29,74,59,.14);border-bottom:1px solid rgba(29,74,59,.14)}
.rse27-live.on{display:grid}
.rse27-live>div{padding:26px 22px 26px 0;border-left:1px solid rgba(29,74,59,.12);padding-left:22px}
.rse27-live>div:first-child{border-left:0;padding-left:0}
.rse27-live b{display:block;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:clamp(2.2rem,3.6vw,3.2rem);letter-spacing:-.035em;line-height:1;color:var(--vert);font-feature-settings:"tnum" 1,"lnum" 1}
.rse27-live b small{font-size:.42em;letter-spacing:0;margin-left:.15em;color:var(--or);font-weight:500}
.rse27-live>div>span:not(.rse27-mono){display:block;margin-top:8px;font-size:.86rem;color:#5E6B64;line-height:1.45}
.rse27-live .rse27-mono{display:block;color:var(--or);margin-bottom:12px}
.rse27-livenote{margin:14px 0 0;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#8A918B}
body.dark .rse27-live b{color:#F2E9D0}
body.dark .rse27-live>div>span,body.dark .rse27-livenote{color:rgba(242,233,208,.65)}
body.dark .rse27-live,body.dark .rse27-live>div{border-color:rgba(242,233,208,.14)}
@media(max-width:860px){.rse27-live{grid-template-columns:1fr}.rse27-live>div{border-left:0;padding-left:0;border-top:1px solid rgba(29,74,59,.12)}.rse27-live>div:first-child{border-top:0}}

/* ---- 6. TOUT CE QUI EST CLIQUABLE RÉPOND ---------------------------------- */
@media(hover:hover){
  .rse27-lgrid article,.rse27-sgrid>div,.rse27-etapes li,.rse27-eng .rse27-row{transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s}
  .rse27-sgrid>div{padding:14px;margin:-14px;border-radius:14px}
  .rse27-sgrid>div:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--vert,#1D4A3B) 3.5%,transparent)}
  .rse27-eng .rse27-row li,.rse27-eng ul li{transition:color .2s,transform .25s cubic-bezier(.22,1,.36,1)}
  .rse27-eng ul li:hover{transform:translateX(3px)}
  .rse27-logos img,.rse27-eng img{transition:filter .35s,transform .35s cubic-bezier(.22,1,.36,1);filter:grayscale(1) opacity(.75)}
  .rse27-logos img:hover,.rse27-eng img:hover{filter:none;transform:translateY(-2px)}
  .rse27-pgrid>div{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .rse27-pgrid>div:hover{transform:translateY(-3px)}
  .rse27-pgrid>div:hover b{color:var(--ambre)}
  .rse27-pgrid b{transition:color .3s}
  .rse27-ref{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .rse27-ref:hover .ini{transform:scale(1.06)}
  .rse27-ref .ini{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .rse27-lien{transition:color .2s,border-color .2s}
  .rse27-lien:hover{color:var(--or);border-color:var(--or)}
}

/* ---- 7. LE RYTHME ----------------------------------------------------------- */
html body .rse27-preuves{padding-block:64px 72px}
html body .rse27-eng{padding-block:56px 96px}
html body .rse27-leviers{padding-block:120px 72px}
html body .rse27-rituel{padding-block:112px 104px}
html body .rse27-sobre{padding-block:120px 72px}
html body .contactc{padding-block:0 120px!important}
@media(max-width:800px){
  html body .rse27-leviers{padding-block:80px 40px}
  html body .rse27-rituel{padding-block:80px 72px}
  html body .rse27-sobre{padding-block:80px 56px}
}
html body .rse27-leviers h2,html body .rse27-rituel h2,html body .rse27-sobre h2,html body .rse27-eng h2{font-size:clamp(2.5rem,4.4vw,3.9rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
html body .rse27-rituel h2{max-width:14ch}