/* RH43 — styles communs à toutes les pages */
@font-face{font-family:"Boxing";src:url("../fonts/Boxing-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Syne";src:url("../fonts/Syne-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --ground:#f5f7f8;
  --paper:#ffffff;
  --ink:#13202a;
  --ink-soft:#4f5d66;
  --ring:#b8c5cb;
  --rh:#314a56;
  --rh-deep:#243943;
  --rh-tint:#e4ebee;
  --rh-mist:#c3d3da;
  --on-rh:#ffffff;
  --font-display:"Boxing","Arial Black",Impact,sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-label:"Syne","IBM Plex Sans",system-ui,sans-serif;
  --space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;
  --radius-pill:999px;
  --content:1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rh);outline-offset:3px;border-radius:var(--radius-pill)}

/* Page d’un seul écran */
.page{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.wrap{width:100%;max-width:calc(var(--content) + 2 * var(--space-6));margin-inline:auto;padding-inline:var(--space-6)}
@media (max-width:560px){.wrap{padding-inline:var(--space-4)}}

.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}

.pill{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.6rem 1.4rem;border-radius:var(--radius-pill);border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:500 1rem/1.2 var(--font-sans);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill.is-solid{background:var(--rh);border-color:var(--rh);color:var(--on-rh)}
.pill.is-solid:hover{background:var(--rh-deep);border-color:var(--rh-deep)}
.pill.is-small{min-height:40px;padding:.45rem 1.1rem;font-size:.95rem}
.pill svg{width:18px;height:18px;flex:none;transition:transform .2s}
.pill:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.pill svg,.pill{transition:none}}

/* Sur-titre */
.eyebrow{margin:0;font-family:var(--font-label);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* Navigation vers les pages du site */
.nav{display:grid;grid-template-columns:1fr auto 1fr}
.nav nav{grid-column:2}
.nav .jarvis{grid-column:3;justify-self:end;letter-spacing:.04em}
.links{display:flex;gap:var(--space-2);list-style:none;margin:0;padding:0}
.links a{display:block;white-space:nowrap;padding:.5rem 1.2rem;border:1.5px solid transparent;border-radius:var(--radius-pill);text-decoration:none;color:var(--ink-soft);font-size:.95rem;transition:color .2s,border-color .2s}
.links a:hover{color:var(--ink);border-color:var(--ring)}
.links a[aria-current="page"]{border-color:var(--ink);color:var(--ink)}
@media (max-width:640px){
  .nav{grid-template-columns:1fr auto;gap:var(--space-2)}
  .nav nav{grid-column:1}
  .nav .jarvis{grid-column:2}
  .links{justify-self:start;gap:0}
  .links a{padding:.35rem .55rem;font-size:.82rem}
  .nav .jarvis{min-height:34px;padding:.3rem .75rem;font-size:.78rem}
}

/* Taches de couleur : plus présentes, dans la gamme bleue RH */
.deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px)}
.blob.a{width:440px;height:440px;left:-160px;bottom:-120px;background:#5fb3c9;opacity:.75}
.blob.b{width:460px;height:460px;right:-170px;top:8%;background:#6f8fd8;opacity:.6}
.blob.c{width:300px;height:300px;left:22%;top:12%;background:#a9d6e5;opacity:.55}
.ring{position:absolute;border-radius:50%;border:1.5px solid #9eadb4}
.ring.a{width:520px;height:520px;left:-340px;top:34%}
.ring.b{width:460px;height:460px;right:-280px;top:22%}
@media (max-width:560px){
  .ring.a{left:-440px;top:52%}.ring.b{right:-420px;top:8%}
  .eyebrow{font-size:.72rem}
  .blob{filter:blur(55px)}
  .blob.a{width:320px;height:320px;left:-150px;bottom:-60px}
  .blob.b{width:300px;height:300px;right:-150px;top:10%}
  .blob.c{width:220px;height:220px;left:10%;top:18%}
}
/* Taches vivantes : chacune suit sa propre boucle (8 à 12 s, déplacement et gonflement).
   --amp réduit l'amplitude sur téléphone ; --since garde la continuité entre les pages. */
.deco{--amp:1}
@media (max-width:560px){.deco{--amp:.55}}
@media (prefers-reduced-motion:no-preference){
  .blob{will-change:transform;animation:float-a 10s ease-in-out infinite;animation-delay:var(--since,0s)}
  .blob.b{animation-name:float-b;animation-duration:12s}
  .blob.c{animation-name:float-c;animation-duration:8s}
}
@keyframes float-a{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(calc(var(--amp)*180px),calc(var(--amp)*-110px)) scale(1.18)}
  50%{transform:translate(calc(var(--amp)*70px),calc(var(--amp)*-220px)) scale(.88)}
  75%{transform:translate(calc(var(--amp)*-90px),calc(var(--amp)*-80px)) scale(1.1)}
}
@keyframes float-b{
  0%,100%{transform:translate(0,0) scale(1)}
  30%{transform:translate(calc(var(--amp)*-200px),calc(var(--amp)*90px)) scale(1.2)}
  60%{transform:translate(calc(var(--amp)*-80px),calc(var(--amp)*220px)) scale(.85)}
  80%{transform:translate(calc(var(--amp)*60px),calc(var(--amp)*90px)) scale(1.08)}
}
@keyframes float-c{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(calc(var(--amp)*220px),calc(var(--amp)*70px)) scale(1.25)}
  66%{transform:translate(calc(var(--amp)*-160px),calc(var(--amp)*120px)) scale(.85)}
}


/* Transitions entre les pages (View Transitions, Chrome/Edge/Safari récents ;
   ailleurs la navigation reste instantanée). Le décor et l'en-tête ne bougent pas,
   seul le contenu change, et le contour de la page active glisse d'un lien à l'autre. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .deco{view-transition-name:decor}
  .nav{view-transition-name:nav}
  /* Seul le contour glisse, pas le texte : chaque lien est capturé à part (son texte reste
     en place) et le contour est dessiné par le <li> de la page active, qui est seul à voyager.
     Au repos, rendu identique : même boîte, même trait que la bordure du lien. */
  .links a[href="/"]{view-transition-name:nav-link-accueil}
  .links a[href="/a-propos"]{view-transition-name:nav-link-a-propos}
  .links a[href="/certification"]{view-transition-name:nav-link-certification}
  .links li{position:relative}
  .links a[aria-current="page"]{border-color:transparent}
  .links li:has(>a[aria-current="page"]){view-transition-name:nav-current}
  .links li:has(>a[aria-current="page"])::before{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:var(--radius-pill);pointer-events:none}
  /* « Mon compte » et J.A.R.V.I.S. (ajout RH43) : capturés à part et figés, sans fondu. */
  .nav .compte{view-transition-name:nav-compte}
  .nav .jarvis{view-transition-name:nav-jarvis}
  ::view-transition-group(nav-compte),::view-transition-group(nav-jarvis),
  ::view-transition-new(nav-compte),::view-transition-new(nav-jarvis){animation:none}
  ::view-transition-old(nav-compte),::view-transition-old(nav-jarvis){display:none}
  main{view-transition-name:page}
  ::view-transition-group(root){animation-duration:0s}
  ::view-transition-old(page){animation:page-out .2s ease-in both}
  ::view-transition-new(page){animation:page-in .42s cubic-bezier(.2,.7,.2,1) .08s both}
  ::view-transition-group(nav-current){animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(nav-current),::view-transition-new(nav-current){animation-duration:.2s}
}
@keyframes page-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}}

/* ---- Ajouts RH43, hors maquette ---- */

/* Barre de défilement (pages légales, « Mon compte ») : le contenu reste centré au même endroit que
   sur les pages sans défilement. Sur téléphone, la barre ne prend pas de place : aucun effet.
   Le décor est fixe, pour couvrir aussi la bande laissée à gauche. */
html{margin-left:calc(100vw - 100%)}
.deco{position:fixed}

/* Barre de défilement fine, fond transparent, poignée dans la couleur RH (aussi pour les tableaux
   des pages légales). Safari, qui ignore scrollbar-color, reçoit l'équivalent -webkit-. */
html{scrollbar-width:thin;scrollbar-color:rgba(49,74,86,.38) transparent}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--radius-pill);background:rgba(49,74,86,.38) padding-box}
  ::-webkit-scrollbar-thumb:hover{background-color:rgba(49,74,86,.6)}
}

/* Barre du haut sur toute la largeur : « Mon compte » et J.A.R.V.I.S. près des bords, à la même
   place que la page défile ou non. --sb : largeur de la barre de défilement (marge de html
   ci-dessus ; 100% = largeur du body, qui vaut 100vw moins deux fois la barre). La barre du haut
   reprend cette marge à gauche et la retire de son retrait à droite : les boutons gardent leur
   distance aux bords de l'écran, et le milieu reste au centre. */
.nav.wrap{--edge:clamp(var(--space-4),2.5vw,var(--space-8));--sb:calc((100vw - 100%) / 2);width:calc(100% + var(--sb));max-width:none;margin-left:calc(-1 * var(--sb));padding-left:var(--edge);padding-right:calc(var(--edge) - var(--sb))}

/* Barre du haut, connecté (assets/js/compte.js) : « Mon compte » à gauche, avec la photo de profil
   Discord ou Roblox, ou les initiales ; J.A.R.V.I.S. reste à droite. */
.nav .compte{grid-column:1;grid-row:1;justify-self:start;gap:.55rem;padding-left:.4rem}
.avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--rh-tint);color:var(--rh-deep);font:600 .62rem/1 var(--font-label);letter-spacing:.03em}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.pill:hover .avatar{box-shadow:0 0 0 1.5px var(--paper)}
@media (max-width:640px){
  .nav.has-compte{grid-template-columns:auto 1fr auto}
  .nav.has-compte nav{grid-column:2;justify-self:center}
  .nav.has-compte .jarvis{grid-column:3}
  /* Téléphone : seulement la photo (ou les initiales), dans un bouton rond. */
  .nav .compte{min-height:34px;min-width:34px;padding:2px;justify-content:center}
  .nav .compte .long{display:none}
}

/* Pied de page de toutes les pages : conditions d'utilisation et confidentialité. */
.foot{display:flex;justify-content:center;padding-block:0 var(--space-4)}
/* Petits téléphones : barre du haut et pied de page plus fins, sur toutes les pages (la barre ne
   bouge donc pas d'une page à l'autre). */
@media (max-width:560px) and (max-height:900px){
  .nav{padding-block:var(--space-4)}
  .foot{padding-bottom:var(--space-2)}
}
.foot nav{display:flex;align-items:center;gap:var(--space-3)}
.foot a{position:relative;padding:.3rem .9rem;border:1.5px solid transparent;border-radius:var(--radius-pill);color:var(--ink-soft);font-size:.8rem;text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s}
.foot a:hover{color:var(--ink);border-color:var(--ring)}
.foot a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.foot a + a::before{content:"";position:absolute;left:calc(-1 * var(--space-3) / 2 - 2px);top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--ring);pointer-events:none}
@media (max-width:560px){.foot{padding-bottom:var(--space-3)}.foot a{font-size:.75rem;padding:.25rem .7rem}}
@media (prefers-reduced-motion:reduce){.foot a{transition:none}}