/* =====================================================================================
   RIO — SITE V2 · VERSION 3 « FLUIDE »
   Se charge après charte-rio.css et charte-rio-plus.css. Même charte Graphite, mêmes textes.
   L'idée directrice vient du produit : RIO est une rivière, et sa promesse est une chaîne
   que l'on remonte (« D'où vient ce chiffre ? »). La page devient cette chaîne.
     A. Courants : des lignes d'eau traversent le haut de chaque page et convergent
     B. Fil de la page : une chaîne de stations à gauche, une par section, qui se remplit
     C. La maquette se redresse à l'arrivée, la feuille claire se pose
     D. « La vraie valeur » : les trois étapes s'allument l'une après l'autre, reliées
     E. Titres qui se mettent au point, flèches qui répondent, pages qui s'enchaînent
     F. Métiers en mosaïque, signature RIO en grand dans le pied de page
   Retirer ce fichier et rio-fluide.js ramène exactement à la version 2.
   ===================================================================================== */

/* A — courants ------------------------------------------------------------------------ */
.hero,.page-hero{position:relative;overflow:hidden}
.courants{position:absolute;inset:0 0 auto 0;width:100%;height:min(720px,100%);z-index:0;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.page-hero .courants{height:100%;opacity:.7}
.hero>.container,.page-hero>.container{position:relative;z-index:1}

/* B — fil de la page -------------------------------------------------------------------
   Le fil a son propre couloir de 52 px à gauche : aucune carte ni section ne passe dessous.
   Le nom de la section se lit à la verticale, DANS le couloir, sous les stations : il ne
   recouvre jamais le contenu. Au survol d'une station, il affiche le nom de celle-ci. */
.fil{display:none}
@media(min-width:1280px){
  .fil{display:flex;align-items:flex-start;justify-content:center;position:fixed;left:0;top:0;bottom:0;width:52px;padding-top:clamp(120px,19vh,220px);z-index:40;pointer-events:none}
  .fil-stations{position:relative;display:flex;flex-direction:column;pointer-events:auto}
  .fil-stations::before,.fil-stations::after{content:"";position:absolute;left:50%;margin-left:-.5px;top:15px;bottom:15px;width:1px;border-radius:1px}
  .fil-stations::before{background:rgba(148,163,184,.35)}
  .fil-stations::after{background:linear-gradient(180deg,var(--rio),var(--rio-strong));transform-origin:top;transform:scaleY(var(--fil,0));box-shadow:0 0 8px rgba(46,196,166,.6)}
  .fil button{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:30px;padding:0;border:0;background:none;cursor:pointer}
  .fil button::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid rgba(148,163,184,.75);background:var(--bg);
    transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .fil button.passe::before{border-color:var(--rio);background:var(--rio)}
  .fil button[aria-current=true]::before{border-color:var(--rio-strong);background:var(--rio-strong);box-shadow:0 0 0 4px rgba(46,196,166,.18),0 0 12px rgba(46,196,166,.9);transform:scale(1.2)}
  .fil button:hover::before{transform:scale(1.45);border-color:#fff}
  .fil button:focus-visible{outline:0}
  .fil button:focus-visible::before{outline:2px solid var(--rio);outline-offset:3px}
  .fil-nom{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);writing-mode:vertical-rl;text-orientation:sideways;white-space:nowrap;overflow:hidden;
    max-height:calc(100vh - clamp(120px,19vh,220px) - var(--fil-n,6)*30px - 44px);
    font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.62);
    -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent);
    transition:opacity 140ms var(--ease),color var(--dur) var(--ease)}
  .fil-nom.change{opacity:0}
  .fil-nom.survol{color:#fff}
  /* le couloir est réservé : la feuille claire et le pied de page s'arrêtent avant lui */
  .a-un-fil .sector-explorer{margin-inline:60px}
  .a-un-fil .site-footer{max-width:min(1280px,calc(100% - 120px))}
  /* le fil remplace le trait de progression de la capsule */
  .a-un-fil .nav-shell::after{display:none}
}

/* C — la maquette se redresse, la feuille se pose ---------------------------------------- */
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .fluide .home-demo{transform-origin:50% 0;will-change:transform;
    transform:perspective(1800px) rotateX(calc(var(--bascule,0)*14deg)) scale(calc(1 - var(--bascule,0)*.06))}
  .fluide .sector-explorer{transform-origin:50% 100%;transform:scale(calc(.94 + var(--pose,1)*.06));will-change:transform}
}

/* D — la chaîne des trois étapes : un fil et ses stations, comme « D'où vient ce chiffre ? » -- */
.fluide .mini-flow{position:relative;gap:14px;padding-left:30px}
.fluide .mini-flow::before,.fluide .mini-flow::after{content:"";position:absolute;left:8px;top:34px;bottom:34px;width:2px;border-radius:2px;pointer-events:none}
.fluide .mini-flow::before{background:rgba(255,255,255,.12)}
.fluide .mini-flow::after{background:linear-gradient(180deg,var(--rio),var(--rio-strong));transform-origin:top;transform:scaleY(var(--chaine,0));transition:transform 500ms var(--ease);box-shadow:0 0 8px rgba(46,196,166,.5)}
.fluide .mini-flow .flow-row::before{content:"";position:absolute;left:-27px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;z-index:1;
  border:2px solid rgba(255,255,255,.45);background:var(--bg);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.fluide .mini-flow .flow-row{transition:background var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.fluide .mini-flow.suivie .flow-row{opacity:.6}
.fluide .mini-flow.suivie .flow-row.vue{opacity:.88}
.fluide .mini-flow.suivie .flow-row.active{opacity:1;border-color:var(--line-hover);background:rgba(46,196,166,.07)}
.fluide .mini-flow .flow-row.vue::before,.fluide .mini-flow .flow-row.active::before{border-color:var(--rio);background:var(--rio)}
.fluide .mini-flow .flow-row.active::before{box-shadow:0 0 0 4px rgba(46,196,166,.18),0 0 14px rgba(46,196,166,.8)}
.fluide .mini-flow .flow-row.active>span:first-child{background:var(--rio);color:#04211b}

/* E — titres, flèches, enchaînement des pages -------------------------------------------- */
.rvh{opacity:0;transform:translateY(22px);filter:blur(8px)}
.rvh.rvh-in{opacity:1;transform:none;filter:none;
  transition:opacity 700ms cubic-bezier(0,0,.2,1) var(--rv-d,0ms),transform 700ms cubic-bezier(0,0,.2,1) var(--rv-d,0ms),filter 700ms cubic-bezier(0,0,.2,1) var(--rv-d,0ms)}
.btn span[aria-hidden],.text-link:after{display:inline-block;transition:transform var(--dur) var(--ease)}
@media(hover:hover){
  .btn:hover span[aria-hidden]{transform:translate(3px,-3px)}
  .btn[href^="#"]:hover span[aria-hidden]{transform:translateY(3px)}
  .text-link:hover:after{transform:translate(3px,-3px)}
}
@media(prefers-reduced-motion:no-preference){
  main{animation:page-arrive 600ms cubic-bezier(0,0,.2,1) both}
  @keyframes page-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @view-transition{navigation:auto}
  .nav-shell{view-transition-name:capsule}
  .site-footer{view-transition-name:pied}
  ::view-transition-old(root){animation:240ms cubic-bezier(.4,0,.2,1) both page-part}
  ::view-transition-new(root){animation:420ms cubic-bezier(0,0,.2,1) 120ms both page-arrive}
  @keyframes page-part{to{opacity:0;transform:translateY(-8px)}}
}
/* avec les transitions de page natives, l'entrée CSS ferait doublon */
@supports (view-transition-name:none){@media(prefers-reduced-motion:no-preference){.vt-natif main{animation:none}}}

/* F — métiers en mosaïque, signature en grand --------------------------------------------- */
@media(min-width:1000px){
  .detail-grid:has(>.detail-card:nth-child(6):last-child){grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .detail-grid:has(>.detail-card:nth-child(6):last-child)>.detail-card{grid-column:span 2}
  .detail-grid:has(>.detail-card:nth-child(6):last-child)>.detail-card:nth-child(1){grid-column:span 4;background:var(--light-top),var(--glass)}
  .detail-grid:has(>.detail-card:nth-child(6):last-child)>.detail-card:nth-child(6){grid-column:span 6}
}
.site-footer::after{content:"";display:block;height:clamp(90px,15vw,190px);margin:36px auto 0;width:min(86%,900px);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 92%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 9 366 190'%3E%3Cg fill='none' stroke='%23000' stroke-width='46' stroke-linecap='round'%3E%3Cpath d='M40 172 V128 C40 98 60 86 92 86'/%3E%3Cpath d='M150 172 V86'/%3E%3Cellipse cx='282' cy='129' rx='74' ry='45'/%3E%3C/g%3E%3Ccircle cx='150' cy='34' r='23'/%3E%3C/svg%3E") center bottom/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 9 366 190'%3E%3Cg fill='none' stroke='%23000' stroke-width='46' stroke-linecap='round'%3E%3Cpath d='M40 172 V128 C40 98 60 86 92 86'/%3E%3Cpath d='M150 172 V86'/%3E%3Cellipse cx='282' cy='129' rx='74' ry='45'/%3E%3C/g%3E%3Ccircle cx='150' cy='34' r='23'/%3E%3C/svg%3E") center bottom/contain no-repeat}

@media(prefers-reduced-motion:reduce){
  .rvh{opacity:1!important;transform:none!important;filter:none!important}
  .fluide .mini-flow.suivie .flow-row{opacity:1;transform:none}
}

/* G — pages : proportions revues ----------------------------------------------------------- */
/* titre d'accueil : trois temps courts, à la taille d'affichage de la charte */
.motion-title{font-size:clamp(40px,5.6vw,84px)!important;line-height:1.04;letter-spacing:-.035em}
@media(max-width:480px){.motion-title{font-size:clamp(38px,11.5vw,48px)!important}}
/* pages intérieures : titres aux tailles du site public (56 px au plus), chapeau de 16 à 20 px */
.page-hero{padding:56px 0 44px}
.page-hero h1{font-size:clamp(1.875rem,1.1rem + 3vw,3.5rem);line-height:1.08;max-width:22ch}
.page-hero .lead{font-size:clamp(1rem,.9rem + .6vw,1.25rem);max-width:60ch;margin-top:20px}
.breadcrumbs{margin-bottom:26px}
.section{padding-block:clamp(56px,6.5vw,92px)}
h2{font-size:clamp(1.75rem,1rem + 2.6vw,3.25rem)}
.tour-heading h2{font-size:clamp(24px,2.4vw,36px)}
.detail-card h2{font-size:clamp(22px,2vw,28px)}
.cta-band h2{font-size:clamp(26px,3vw,40px)}
/* la démonstration : les vrais écrans, ramenés à l'échelle d'une illustration.
   L'application est affichée à 72 % dans un cadre qui tient dans la hauteur de l'écran. */
.rio-live-demo{max-width:1180px;margin-inline:auto}
.rio-live-frame{position:relative;height:clamp(440px,66vh,620px);background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-xl);box-shadow:var(--shadow-lg),0 0 0 8px rgba(255,255,255,.03)}
.rio-live-frame iframe{position:absolute;top:0;left:0;width:calc(100%/.72);height:calc(100%/.72);transform:scale(.72);transform-origin:0 0}
.rio-live-intro{max-width:70ch;font-size:15px;margin-bottom:22px}
.rio-live-note{max-width:80ch;margin-top:16px}
.tour-heading{margin-bottom:16px}
.button.secondary{display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 18px;border-radius:var(--r-pill);border:1px solid var(--line-field);background:rgba(255,255,255,.045);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.button.secondary:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
@media(max-width:700px){
  .rio-live-frame{height:560px;border-radius:var(--r-lg)}
  .rio-live-frame iframe{width:calc(100%/.82);height:calc(100%/.82);transform:scale(.82)}
}