/* Uberlys : socle commun à la V1 et aux essais de hero. */
/* Season Serif Light, licence web achetée chez Displaay le 2026-10-28 (commande 411101, licence dans licences/season-serif-light) */
@font-face{font-family:"Season";src:url(fonts/SeasonSerif-Light.woff2) format("woff2"),url(fonts/SeasonSerif-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}

:root{
  --papier:#F3F0EA; --papier-2:#E9E4DA; --blanc:#FAF8F4; --encre:#17150F; --encre-2:#57534A; --encre-3:#8C877C;
  --nuit:#1A1814; --nuit-2:#23201B; --clair:#F1EDE5; --clair-2:#ABA597; --clair-3:#7A7468;
  --chene:#B07F4F;
  --filet:rgba(23,21,15,.13); --filet-n:rgba(241,237,229,.15);
  --serif:"Season",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --g:clamp(20px,5.2vw,88px); --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* au-delà des bords (rebond du trackpad, Safari), on voit le fond de html : le même sombre que le bandeau du haut et le footer */
html{-webkit-text-size-adjust:100%;background:var(--nuit);overscroll-behavior-y:none}
body{background:var(--papier);color:var(--encre);font:350 16px/1.6 var(--sans);letter-spacing:-.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
b,strong{font-weight:450}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
.serif{font-family:var(--serif);font-variation-settings:"SERF" 100;font-weight:300;letter-spacing:-.018em}
.wrap{padding-inline:var(--g);max-width:1600px;margin-inline:auto}
.grille{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.4vw,36px)}
.nuit{background:var(--nuit);color:var(--clair)}
.logo{display:inline-block;aspect-ratio:316/116;background:currentColor;-webkit-mask:url(../logo/uberlys_logo_encre.svg) center/contain no-repeat;mask:url(../logo/uberlys_logo_encre.svg) center/contain no-repeat}
:focus-visible{outline:2px solid var(--chene);outline-offset:3px}

/* seuls les boutons sont arrondis */
.btn{display:inline-flex;align-items:center;gap:10px;font:450 15px/1 var(--sans);letter-spacing:-.02em;text-decoration:none;padding:16px 24px;border-radius:999px;background:var(--encre);color:var(--papier);border:1px solid var(--encre);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn:hover{background:var(--chene);border-color:var(--chene);color:#fff}
.btn.clair{background:var(--clair);color:var(--nuit);border-color:var(--clair)}
.btn.clair:hover{background:#fff;border-color:#fff}
.btn.contour{background:transparent;color:inherit;border-color:currentColor}
.btn.contour:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.nuit .btn.contour:hover{background:var(--clair);color:var(--nuit);border-color:var(--clair)}

/* en-tête pleine largeur : transparent en haut, voile flouté discret dès qu'on défile */
.entete{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .4s var(--ease),-webkit-backdrop-filter .4s,backdrop-filter .4s,color .4s}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.entete .logo{height:34px}
.entete nav{display:flex;align-items:center;gap:28px;font-size:14px}
.entete nav a:not(.btn){text-decoration:none;color:inherit;opacity:.72;transition:opacity .25s}
.entete nav a:not(.btn):hover{opacity:1}
.entete nav .btn{padding:11px 18px;font-size:14px}
.entete.defile{background:rgba(243,240,234,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.entete.defile.sombre{background:rgba(26,24,20,.55);color:var(--clair)}
.entete.sombre nav .btn{background:var(--clair);color:var(--nuit);border-color:var(--clair)}
/* choix de la langue : FR / EN, la langue active à pleine opacité et soulignée */
.entete .langues{display:flex;align-items:center;gap:6px;font-size:13px}
.entete .langues span{opacity:.4}
.entete nav .langues a[aria-current=true]{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:820px){.entete nav a:not(.btn){display:none}.entete nav .langues a{display:inline}}

/* barre du haut : une ligne, au-dessus de l'en-tête, qui part avec le défilement */
.barre-haut{position:relative;z-index:51;height:36px;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--nuit);color:var(--clair-2);font-size:13px;letter-spacing:-.01em;padding-inline:var(--g)}
.barre-haut a{color:var(--clair);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.entete{top:36px;transition:top .35s var(--ease),background-color .4s var(--ease),-webkit-backdrop-filter .4s,backdrop-filter .4s,color .4s}
.entete.defile{top:0}
@media (max-width:620px){.barre-haut .long{display:none}}