/* ===========================================================================
   TEC'OFFICE M08 — ACCUEIL, section 03 « La RSE, en actes »
   ---------------------------------------------------------------------------
   Une rosace de bureau d'etudes (quatre quarts = les quatre themes de la RSE)
   et, en face, les actes de TEC'OFFICE, theme par theme. Le mouvement est dans
   assets/js/rse.js ; ici, l'etat de repos : sans GSAP tout est visible.
   =========================================================================== */
.rse{padding-bottom:var(--sp);}
.rse-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);
  align-items:center;margin-top:clamp(40px,6vh,80px);}

/* ---- la rosace ---- */
.rse-ros{position:relative;margin:0;justify-self:center;width:100%;max-width:520px;}
.rse-ref{display:inline-block;margin-bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);border-radius:3px;padding:4px 8px;}
.rse-svg{display:block;}
.rse-ros svg{display:block;width:100%;height:auto;overflow:visible;color:var(--ink);}
.rse-ros .ring{fill:none;stroke:var(--line2);stroke-width:1;}
.rse-ros .tk{fill:none;stroke:var(--mute);stroke-width:1;}
.rse-ros .ax{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:2 6;}
.rse-ros .q{fill:var(--sand);fill-opacity:var(--qp,.3);cursor:pointer;
  transition:fill-opacity .35s cubic-bezier(.23,1,.32,1),fill .35s cubic-bezier(.23,1,.32,1);}
/* le quart du theme en cours : encre pleine, numero en papier (jamais terne) */
.rse-ros .q.on{fill:var(--ink);fill-opacity:.94;}
.rse-ros .qn{transition:fill .3s;}
.rse-ros .qn.on{fill:var(--paper);}
.rse-ros .arc{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:butt;}
.rse-ros .qn{font-family:var(--mono);font-size:13px;letter-spacing:.12em;fill:var(--ink);pointer-events:none;}
.rse-ros .ctr{fill:var(--white);stroke:var(--ink);stroke-width:1.2;}
.rse-ros .ctr-t{font-family:var(--disp);font-weight:900;font-size:42px;letter-spacing:-.02em;fill:var(--ink);}
.rse-ros .ctr-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;fill:var(--mute);}
.rse-ros figcaption{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;line-height:1.7;
  color:var(--mute);text-align:center;}
@media (hover:none){ .rse-ros figcaption{display:none;} }

/* ---- les actes, theme par theme ---- */
.rse-th{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);}
.rse-th > li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;
  padding:clamp(18px,2.6vh,28px) 0 clamp(18px,2.6vh,28px) 14px;border-bottom:1px solid var(--line);}
.rse-th > li::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--sand);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .35s cubic-bezier(.23,1,.32,1);}
.rse-th > li.on::before{transform:scaleY(1);}
.rse-th .no{grid-row:1 / span 3;padding-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--mute);transition:color .25s;}
.rse-th > li.on .no{color:var(--ink);}
.rse-th h3{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,1.45vw,21px);letter-spacing:-.005em;line-height:1.15;color:var(--ink);}
.rse-th ul{list-style:none;margin:10px 0 0;padding:0;}
.rse-th ul li{position:relative;margin-top:6px;padding-left:20px;font-size:15px;line-height:1.65;color:var(--ink2);}
.rse-th ul li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--ink);}
.rse-th ul b{color:var(--ink);font-weight:600;}
.rse-l{justify-self:start;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.rse-l .arw{display:inline-block;transition:transform .25s cubic-bezier(.23,1,.32,1);}
@media (hover:hover) and (pointer:fine){ .rse-l:hover .arw{transform:translateX(4px);} }
.rse-l:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}

/* grand ecran : la rosace reste sous les yeux pendant qu'on lit les quatre fiches */
@media (min-width:1101px) and (min-height:700px){
  .rse-grid{align-items:start;}
  .rse-ros{position:sticky;top:clamp(96px,13vh,132px);}
  /* ecrans bas : la rosace garde de la course pendant la lecture de la fiche 04 */
  .rse-th{margin-bottom:max(0px, calc(clamp(96px,13vh,132px) + 440px - 50vh));}
}

/* ---- tablette et telephone ---- */
@media (max-width:1100px){
  .rse-grid{grid-template-columns:1fr;gap:clamp(36px,6vw,56px);}
  .rse-ros{max-width:400px;}
  .rse-th ul{max-width:68ch;}
}
@media (max-width:600px){
  .rse-ros{max-width:320px;}
  .rse-th > li{grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding-left:12px;}
  .rse-th ul li{font-size:14.5px;}
}

/* impression : jamais une rosace a moitie tracee ni des fiches blanches */
@media print{
  .rse-grid,.rse-grid *{opacity:1 !important;visibility:visible !important;}
  .rse-th > li,.rse-ref,.rse-ros .ctr-g{transform:none !important;}
  .rse-ros .ring,.rse-ros .arc{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
  .rse-ros .ax{stroke-dasharray:2 6 !important;stroke-dashoffset:0 !important;}
  .rse-ros .q{fill-opacity:.3 !important;}
  .rse-ros{position:static !important;}
}