/* RIVR : le monde pastel tenu sur les trois pages.
   Titres en Newsreader légère (la sérénité, à contre-pied de la cybersécurité), plus de mono hors du chiffré,
   un menu discret qui reste, et l'eau qui revient sous « Sécurité » et en tête des pages intérieures.
   Cette feuille est chargée après la feuille compilée et les styles de page : elle les précise. */
:root{--encre:#2b3342;--bleu:rgb(30,50,90);--gris:#5c6572;--papier:#f0f0f0;--verre:rgba(255,255,255,.62);--titre:'Newsreader',Georgia,'Times New Roman',serif;--texte:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;--doux:cubic-bezier(.19,1,.22,1)}
html{scrollbar-color:rgba(30,50,90,.35) var(--papier);scrollbar-width:thin}
body{caret-color:var(--bleu)}
::selection{background:rgba(30,50,90,.9);color:#fff}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:6px}

/* ---- Titres ---- */
h1,h2,.rv-card h3{font-family:var(--titre)!important;font-weight:300!important;letter-spacing:-.022em!important;text-wrap:balance}
#h1{font-size:clamp(2.7rem,7vw,6.4rem)!important;line-height:1!important;letter-spacing:-.03em!important}
h1[class*="md:text-6xl"]{font-size:clamp(2.6rem,6.2vw,5.2rem)!important;line-height:1.02!important}
h2[class*="md:text-5xl"],.cf-cap h2,.lp-head h2,.jr-copy h2{font-size:clamp(2.2rem,4.8vw,4.3rem)!important;line-height:1.03!important}
h2[class*="md:text-4xl"]{font-size:clamp(1.9rem,3.6vw,3.1rem)!important;line-height:1.06!important}
h2[class*="text-2xl"]:not([class*="md:text-4xl"]){font-size:clamp(1.6rem,2.4vw,2.2rem)!important;line-height:1.1!important}
.rv-card h3{font-size:1.75rem!important;line-height:1.05}

/* ---- Étiquettes : petites capitales espacées, plus aucune mono (elle retombait sur la police du système) ---- */
.cf-k,.rv-k,.rv-rail span,.jr-n dt,.lp-hint{font-family:var(--texte)!important;font-size:.75rem!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase;line-height:1.3!important}
.cf-chip,.cf-alert,.lp-legend{font-family:var(--texte)!important;font-size:.8125rem!important;font-weight:500!important;letter-spacing:.01em!important;text-transform:none}
.jr-river{font:500 .8125rem/1 var(--texte)!important;font-variant-numeric:tabular-nums}
.jr-copy .cf-k{display:none}
#bl span[class*="text-[10px]"]{font-size:.75rem!important}

/* ---- Accueil : le texte reste lisible quand les rochers passent derrière ---- */
#hero-texte{position:relative;isolation:isolate}
#hero-texte::before{content:"";position:absolute;inset:-14% -22% -10%;z-index:-1;background:radial-gradient(58% 60% at 50% 46%,rgba(238,241,247,.8),rgba(238,241,247,0) 74%);pointer-events:none}
#lead{color:#2f3847!important;opacity:1!important;font-weight:500!important;text-shadow:0 0 18px rgba(238,241,247,.95),0 0 5px rgba(238,241,247,.85)}
.lp-hint{white-space:nowrap}
@media(max-width:767px){
  /* sur téléphone, le bas du film porte la sphère sombre : les légendes montent dans le ciel clair */
  .cf-cap{top:clamp(78px,11vh,112px)!important;bottom:auto!important}
  .lp-hint{letter-spacing:.08em!important}
}

/* ---- La rivière des coffres : la scène a désormais sa propre classe ---- */
.rvr{position:relative;height:340vh;height:340svh;margin-top:-40px}
@media (prefers-reduced-motion:reduce){.rvr{height:auto}}

/* ---- Sécurité : l'eau continue, les trois preuves sont posées dessus ---- */
#securite{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 2 * clamp(12px,1.25vw,20px));max-width:1496px!important;margin:0 auto clamp(60px,10vh,120px)!important;padding:clamp(44px,7vw,104px) clamp(22px,5.4vw,92px)!important;border-radius:clamp(1.5rem,3vw,3rem)}
#securite::before{content:"";position:absolute;inset:0;z-index:-2;background:#cfe6e4 url(../img/riviere.jpg) 94% 58%/auto 172% no-repeat}
#securite::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(98deg,rgba(240,244,247,.95) 0%,rgba(240,244,247,.82) 40%,rgba(240,244,247,.2) 100%)}
#securite ul{gap:14px}
#securite li{border:1px solid rgba(255,255,255,.72)!important;border-radius:26px;background:var(--verre);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:22px 24px!important;box-shadow:0 30px 60px -34px rgba(30,50,90,.42);transition:transform .5s var(--doux),box-shadow .5s var(--doux)}
@media(hover:hover){#securite li:hover{transform:translateY(-3px);box-shadow:0 36px 70px -34px rgba(30,50,90,.5)}}
@media(max-width:767px){
  #securite::before{background-image:url(../img/riviere-m.jpg);background-position:88% 100%;background-size:auto 70%}
  #securite::after{background:linear-gradient(180deg,rgba(240,244,247,.96) 0%,rgba(240,244,247,.86) 52%,rgba(240,244,247,.3) 100%)}
}

/* ---- Pages intérieures : le cube revient en tête de page ---- */
.tete-monde{position:relative;isolation:isolate;overflow:hidden;margin:0 clamp(12px,1.25vw,20px);max-width:1496px;border-radius:clamp(1.5rem,3vw,3rem);min-height:clamp(380px,62vh,620px);display:flex;align-items:flex-end;padding:clamp(28px,5vw,72px)}
@media(min-width:1536px){.tete-monde{margin-inline:auto}}
.tete-monde img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.tete-monde::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(240,244,247,.93) 0%,rgba(240,244,247,.7) 38%,rgba(240,244,247,0) 72%),linear-gradient(0deg,rgba(240,244,247,.5),transparent 40%)}
.tete-monde h1{max-width:13ch;color:var(--encre)}
.tete-monde p{max-width:44ch;margin-top:18px;color:#3d4657;font-size:1.0625rem;line-height:1.6}
@media(max-width:767px){.tete-monde::after{background:linear-gradient(0deg,rgba(240,244,247,.96) 0%,rgba(240,244,247,.8) 46%,rgba(240,244,247,.1) 100%)}}

/* ---- Le menu qui reste : une pastille de verre, visible dès que le menu de tête sort de l'écran ---- */
.barre{position:fixed;z-index:70;top:12px;left:50%;display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);padding:6px 6px 6px 20px;border-radius:999px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(30,50,90,.1);box-shadow:0 18px 40px -22px rgba(30,50,90,.5);font:400 .875rem/1 var(--texte);color:var(--encre);white-space:nowrap;transform:translate(-50%,-160%);opacity:0;visibility:hidden;transition:transform .6s var(--doux),opacity .4s,visibility 0s .6s}
.barre.vue{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .6s var(--doux),opacity .4s}
.barre__marque{font-weight:600;letter-spacing:-.04em;font-size:1.125rem;color:var(--bleu)}
.barre nav{display:flex;gap:clamp(10px,1.8vw,24px)}
.barre nav a{position:relative;padding:12px 0;transition:opacity .25s}
.barre nav a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--bleu);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--doux)}
.barre nav a:hover::after,.barre nav a[aria-current]::after{transform:scaleX(1)}
.barre__cta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--bleu);color:#fff;font-weight:500;transition:background-color .25s,transform .2s}
.barre__cta:hover{background:rgb(22,38,70)}
.barre__cta:active{transform:scale(.97)}
@media(max-width:560px){.barre{font-size:.8125rem;padding-left:14px;gap:10px}.barre nav{gap:10px}.barre__cta{padding:0 13px}}
@media(prefers-reduced-motion:reduce){.barre,.barre.vue{transition:none}}

/* ---- Pied de page ---- */
.pied-monde{position:relative;overflow:hidden;background:rgba(255,255,255,.5);border-top:1px solid rgba(30,50,90,.12)}
/* la feuille compilée ne contient que les utilitaires déjà employés : le pied est donc mis en page ici */
.pied-monde > div:first-of-type{padding-top:clamp(40px,6vw,72px);gap:32px}
.pied-monde > div:first-of-type > div:last-child{display:flex;gap:clamp(32px,6vw,80px)}
.pied-monde > div:first-of-type > div:last-child > div{display:flex;flex-direction:column;gap:12px}
.pied-monde > div:first-of-type a{padding:2px 0}
.pied-monde > div:last-of-type{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.pied-monde > div:last-of-type a{text-decoration:underline;text-underline-offset:4px}
.pied-monde__mot{display:block;margin:clamp(20px,4vw,48px) auto -0.16em;font-family:var(--titre);font-weight:300;font-size:clamp(5rem,24vw,22rem);line-height:.8;letter-spacing:-.04em;text-align:center;color:rgba(30,50,90,.09);user-select:none}

/* ---- Téléphone : plus un seul texte sous 12 px ---- */
@media(max-width:860px){.jr-river{font-size:.75rem!important}}
[class*="text-[10px]"],[class*="text-[11px]"]{font-size:.75rem!important}
.text-xs{font-size:.8125rem!important}