/* ============================================================ HOTELLA — Site web · Accueil · PROPOSITION 2 Page CLAIRE, comme le site live. Structure des sections reprise de test.hotella.io ; seul l'habillage change. Deux panneaux sombres seulement (bandeau de marque + CTA), exactement comme sur le site actuel. Contenu identique. ============================================================ */ :root{ /* --- surfaces claires --- */ --paper:#FFFFFF; --ivory:#F4F8FD; --ivory-2:#EAF1FA; --line:#E3EBF5; --line-strong:#CEDCEC; /* --- fonds sombres (bandeau + CTA + pied de page) --- */ --abyss:#04050F; --navy-900:#070B1C; --navy-800:#0B1226; --navy-700:#111C3A; --navy-600:#16244A; /* --- accent de marque --- */ --teal:#0574A0; --electric:#0BA9EE; --cyan:#35D6FF; --cyan-200:#9BE4FF; --water:#C9F5F4; --azure:#116BC7; /* bleu profond pour le texte : 5,3:1 sur blanc, là où --electric ne donne que 2,7:1 */ --grad:linear-gradient(118deg,var(--teal) 0%,var(--electric) 48%,var(--cyan) 100%); /* Variante pour le TEXTE sur fond clair. Le --grad de marque finit sur du cyan à 1,7:1 sur blanc : illisible. Celle-ci reste entre 5,2 et 3,2:1 d'un bout à l'autre, donc toujours au-dessus du seuil des grands titres. Sur fond sombre on reprend --grad, bien plus vif. */ --grad-ink:linear-gradient(104deg,var(--teal) 0%,#0787C4 46%,#0999D7 100%); /* Et l'inverse pour le TEXTE sur fond sombre : là c'est le teal du --grad qui s'éteint (1,66:1). On part donc du bleu vif. */ --grad-lite:linear-gradient(104deg,#2FB7F2 0%,var(--cyan) 55%,#7FE0FF 100%); /* --- encres (contrastes mesurés sur blanc) --- */ --ink:#0B1B33; /* 17,2:1 */ --body:#41506A; /* 8,1:1 */ --muted:#5B6B85; /* 6,0:1 */ /* --- encres sur fond sombre --- */ --ink-d:#F4FAFF; --body-d:rgba(226,240,255,.82); --muted-d:rgba(203,224,255,.62); --line-d:rgba(173,205,255,.16); --line-d-strong:rgba(173,205,255,.28); --glass-d:rgba(146,186,255,.09); --r-md:16px; --r-lg:24px; --r-xl:32px; --r-slab:30px; --r-big:48px; --r-pill:100px; --sh-sm:0 2px 10px rgba(11,27,51,.05); --sh-md:0 16px 44px -20px rgba(11,27,51,.26); --sh-lg:0 34px 80px -34px rgba(11,27,51,.34); --ease:cubic-bezier(.22,.8,.26,1); --ease-out:cubic-bezier(.16,1,.3,1); --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --gut:clamp(20px,5vw,72px); --maxw:1320px; } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--paper)} body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:rgba(53,214,255,.26)} :focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:8px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)} .wrap--wide{max-width:1560px} section{position:relative} /* ---------- typographie ---------- */ h1,h2,h3,h4,h5{color:var(--ink);margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.12} .h-hero{font-size:clamp(40px,6.2vw,96px);line-height:1;letter-spacing:-.04em;font-weight:700} .h-sec{font-size:clamp(28px,3.6vw,52px);letter-spacing:-.032em} /* un cran sous .h-sec, pour les titres internes à une section */ .h-sub{font-size:clamp(21px,2.1vw,30px);letter-spacing:-.026em;line-height:1.2; color:var(--ink);margin-bottom:14px} .on-dark .h-sub{color:var(--ink-d)} .h-card{font-size:19px;letter-spacing:-.014em;line-height:1.3} .lede{font-size:clamp(15.5px,1.2vw,18px);line-height:1.62;color:var(--body);margin:0} /* Un lien au fil du texte doit se distinguer autrement que par la couleur seule. Sans cette règle il héritait de `--body` et n'était pas même d'une autre teinte : rien ne le signalait. Teal + soulignement, 5,23:1 sur blanc. (Un seul lien de ce type sur le site aujourd'hui.) */ .lede a{color:var(--teal);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px} .lede a:hover{color:var(--azure)} .grad-text{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} /* sur fond sombre, on repart du bleu vif vers le cyan */ .hero .grad-text,.on-dark .grad-text{background:var(--grad-lite); -webkit-background-clip:text;background-clip:text} /* variante sur fond sombre */ .on-dark{color:var(--body-d)} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--ink-d)} .on-dark .lede{color:var(--body-d)} /* ============================================================ VERRE LIQUIDE Recette du gabarit Asme : un liseré en dégradé posé sur le bord, clair en haut et en bas, transparent au milieu. C'est lui qui donne l'épaisseur ; le flou ne fait que le reste. `.lg` sur fond sombre, `.lg--ink` sur fond clair. ============================================================ */ .lg{position:relative;isolation:isolate; -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); box-shadow:inset 0 1px 1px rgba(255,255,255,.12)} .lg::before{content:"";position:absolute;inset:0;z-index:3; border-radius:inherit;padding:1.4px;pointer-events:none; background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.16), rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%, rgba(255,255,255,.16),rgba(255,255,255,.5)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude} /* même liseré, encré, pour les surfaces claires */ .lg--ink{box-shadow:inset 0 1px 1px rgba(255,255,255,.9)} .lg--ink::before{background:linear-gradient(rgba(11,27,51,.26),rgba(11,27,51,.1), rgba(11,27,51,0) 38%,rgba(11,27,51,0) 62%,rgba(11,27,51,.1),rgba(11,27,51,.26))} /* ---------- boutons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px; border-radius:var(--r-pill);border:0;cursor:pointer;font-family:var(--sans);font-size:15.5px;font-weight:600; transition:transform .22s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .3s} .btn:active{transform:scale(.976)} .btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn--primary{background:var(--grad);color:#042033;box-shadow:0 14px 32px -14px rgba(11,169,238,.75)} .btn--primary:hover{box-shadow:0 20px 44px -14px rgba(11,169,238,.9)} .btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)} .btn--ghost:hover{border-color:var(--electric);color:var(--teal)} .on-dark .btn--ghost{color:var(--ink-d);border-color:var(--line-d-strong);background:var(--glass-d); backdrop-filter:blur(14px)} .on-dark .btn--ghost:hover{border-color:var(--cyan);color:#fff;background:rgba(146,186,255,.16)} .btn--glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .btn--glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)} .btns{display:flex;flex-wrap:wrap;gap:14px} /* Le liseré de verre sur les boutons. Clair sur les fonds colorés ou sombres, encré sur le bouton clair. */ .btn--primary,.btn--glass,.btn--ghost{position:relative;isolation:isolate} .btn--primary::before,.btn--glass::before,.btn--ghost::before{ content:"";position:absolute;inset:0;z-index:2;border-radius:inherit; padding:1.4px;pointer-events:none; background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.2), rgba(255,255,255,0) 44%,rgba(255,255,255,0) 56%, rgba(255,255,255,.2),rgba(255,255,255,.55)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude} /* le bouton clair reçoit un liseré encré, sinon il serait invisible */ .btn--ghost::before{background:linear-gradient(rgba(11,27,51,.3),rgba(11,27,51,.12), rgba(11,27,51,0) 44%,rgba(11,27,51,0) 56%,rgba(11,27,51,.12),rgba(11,27,51,.3))} .on-dark .btn--ghost::before{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.18), rgba(255,255,255,0) 44%,rgba(255,255,255,0) 56%,rgba(255,255,255,.18),rgba(255,255,255,.55))} /* ---------- navigation (la nôtre, inchangée) ---------- */ .nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center; gap:8px;padding:8px 8px 8px 20px;border-radius:var(--r-pill);background:rgba(7,11,28,.52); border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 18px 50px -26px rgba(0,5,20,.8); transition:background .35s,border-color .35s,box-shadow .35s;max-width:calc(100vw - 32px); isolation:isolate} /* le liseré de verre de la barre : clair en haut et en bas, absent au milieu */ .nav::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit; padding:1.4px;pointer-events:none; background:linear-gradient(rgba(255,255,255,.58),rgba(255,255,255,.18), rgba(255,255,255,0) 42%,rgba(255,255,255,0) 58%, rgba(255,255,255,.18),rgba(255,255,255,.5)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; transition:background .35s} /* une fois sur fond clair, le liseré s'encre */ .nav.is-stuck::before{background:linear-gradient(rgba(11,27,51,.22),rgba(11,27,51,.08), rgba(11,27,51,0) 42%,rgba(11,27,51,0) 58%,rgba(11,27,51,.08),rgba(11,27,51,.22))} .nav__brand{display:flex;align-items:center;flex:none;margin-right:12px} .nav__brand img{height:22px;width:auto} .nav__links{display:flex;align-items:center;gap:4px} .nav__links a{padding:9px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:500; color:rgba(233,243,255,.78);white-space:nowrap;transition:color .25s,background .25s} .nav__links a:hover{color:#fff;background:rgba(255,255,255,.1)} .nav .btn{min-height:44px;padding:0 20px;font-size:14px;white-space:nowrap} /* plancher tactile 44 px */ /* une fois sorti du héros, la pastille passe en clair */ .nav.is-stuck{background:rgba(255,255,255,.86);border-color:var(--line); box-shadow:0 14px 40px -24px rgba(11,27,51,.5)} .nav.is-stuck .nav__brand img{filter:brightness(0) saturate(100%) invert(9%) sepia(28%) saturate(1800%) hue-rotate(185deg)} .nav.is-stuck .nav__links a{color:var(--body)} .nav.is-stuck .nav__links a:hover{color:var(--teal);background:var(--ivory)} .nav__burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12);cursor:pointer;align-items:center;justify-content:center} .nav__burger span{display:block;width:16px;height:1.5px;background:#fff;position:relative} .nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:#fff} .nav__burger span::before{top:-5px}.nav__burger span::after{top:5px} .nav.is-stuck .nav__burger{border-color:var(--line-strong);background:var(--ivory)} .nav.is-stuck .nav__burger span,.nav.is-stuck .nav__burger span::before,.nav.is-stuck .nav__burger span::after{background:var(--ink)} /* ---------- le menu « Solutions » ---------- D'après le panneau de Hoteza : panneau absolu, `opacity:0` + `translateY(-.5rem)` au repos, et surtout `pointer-events:none` tant qu'il est fermé — sans ça il intercepterait les clics de la page. Mêmes ressorts ici, calés sur la pastille au lieu d'un bandeau. */ .nav__trigger{display:inline-flex;align-items:center;gap:6px} .nav__chev{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:transform .32s var(--ease)} .nav.mega-open .nav__chev{transform:rotate(180deg)} /* `fixed` et non `absolute` : le panneau est sorti de