/* ==========================================================================
   VERTILYA — refine.css
   Couche « épurée » : en-tête clair + vrai logo, médias réels (photos & vidéos),
   moins d'effets décoratifs. Chargée après style.css.
   ========================================================================== */

:root { --header-h: 84px; --radius: 20px; }

/* ---------- Suppression des effets décoratifs ---------- */
body::after { display: none; }
.flow, .aurora, .marquee, .scroll-cue, .hero::before, .hero::after, .panel-giant { display: none !important; }
.spot::before, .spot::after, .tilt-glare { display: none !important; }
[data-tilt] { transform: none !important; }
.eyebrow::before { animation: none; box-shadow: none; }
.grad-text { animation: none; background-size: 100% auto; background-image: linear-gradient(100deg, #5b8cff 0%, #1fc7e0 55%, #34d399 100%); }
.section--white .grad-text, .section--light .grad-text, .legal .grad-text { background-image: linear-gradient(100deg, #2457d6 0%, #0f9e8a 100%); }
.section-glow::before, .light-glow::before { opacity: .45; }
.footer-giant { display: none; }

/* ---------- Logo ---------- */
.logo-mark { border-radius: 50%; object-fit: cover; background: #fff; }
.pl-inner .logo-mark { width: 96px; height: 96px; opacity: 0; animation: leafIn .9s .2s var(--ease) forwards; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06); }
.orbit-core .logo-mark { width: 62%; height: 62%; animation: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.brand .logo-mark { width: 54px; height: 54px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- En-tête clair ---------- */
.site-header { background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.site-header.scrolled { background: rgba(255, 255, 255, .97); border-color: var(--line); box-shadow: 0 14px 34px -26px rgba(11, 31, 58, .55); }
.site-header .brand { color: var(--ink); }
.site-header .brand-name { color: var(--ink); }
.site-header .brand-name small { color: var(--teal); }
.main-nav a { color: var(--ink-2); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
.burger { border-color: var(--line); background: #fff; }
.burger span { background: var(--ink); }
.menu-open .site-header { background: #fff; border-color: var(--line); }
.header-cta.btn--primary { box-shadow: none; }

.mobile-menu { background: #fff; color: var(--ink); }
.mobile-menu::before { background: radial-gradient(500px 400px at 100% 0%, rgba(47, 107, 255, .08), transparent 70%), radial-gradient(500px 400px at 0% 100%, rgba(52, 211, 153, .1), transparent 70%); }
.mobile-menu nav a { color: var(--ink-3); }
.mobile-menu nav a[aria-current="page"], .mobile-menu nav a:hover { color: var(--ink); }
.mm-foot { color: var(--ink-2); }

/* ---------- Pied de page ---------- */
.site-footer .brand { color: #fff; }
.site-footer .brand .logo-mark { box-shadow: none; }
.site-footer .brand-name { color: #fff; }

/* ---------- Hero avec vidéo ---------- */
.hero { background: var(--night-900); }
.hero-video, .cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-video.is-playing, .cta-video.is-playing { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(4, 10, 21, .93) 0%, rgba(6, 17, 31, .78) 46%, rgba(6, 17, 31, .42) 100%); }
.hero--page .hero-overlay { background: linear-gradient(100deg, rgba(4, 10, 21, .94) 0%, rgba(6, 17, 31, .8) 55%, rgba(6, 17, 31, .55) 100%); }
.cta-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(4, 10, 21, .78); }
.hero-content, .hero-bottom { z-index: 3; }
.cta-inner { z-index: 3; }
.hero--page { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 100px)); }
.hero:not(.hero--page) { padding-top: calc(var(--header-h) + 40px); }
.hero-title { font-size: clamp(2.4rem, 4.4vw, 4.2rem); font-weight: 700; letter-spacing: -.035em; }
.hero-visual { height: 440px; }
.fcard--chip { display: none; }
.fcard--main { top: 30px; animation: none; background: rgba(6, 17, 31, .55); }
.hero-stats { border-top-color: rgba(255, 255, 255, .16); }
.page-title { max-width: 20ch; }

/* ---------- Surfaces & cartes ---------- */
.section { padding: clamp(80px, 10vw, 136px) 0; }
.card { border-radius: 20px; box-shadow: none; }
.card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px rgba(11, 31, 58, .35); }
.card-icon { border-radius: 14px; }
.btn--primary { box-shadow: none; }
.btn--primary:hover { box-shadow: 0 14px 30px -16px rgba(31, 199, 224, .7); }
.viz { box-shadow: none; border-radius: 24px; }
.mform, .diag { box-shadow: none; }

/* ---------- Médias ---------- */
.media { position: relative; margin: 0 0 20px; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--night-800); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: #fff; background: rgba(4, 10, 21, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .18); }
.media video { opacity: 0; transition: opacity 1.2s; }
.media video.is-playing { opacity: 1; }
.media--tall { aspect-ratio: 4 / 5; }

/* Showcase (vidéo + texte) */
.showcase { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 960px) { .showcase { grid-template-columns: 1fr; } }
.showcase .media { aspect-ratio: 16 / 11; margin: 0; border-radius: 28px; }
.showcase-logo { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.showcase-logo img { width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.showcase-logo p { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.35; }
.showcase-logo small { display: block; color: var(--ink-3); font-family: var(--font-body); font-weight: 400; margin-top: 4px; }
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.photo-row .media { margin: 0; aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .photo-row { grid-template-columns: 1fr; } }

/* Panneaux secteurs avec photos */
.panel-photo { position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform 1.6s var(--ease); }
.panel.is-active .panel-photo { transform: scale(1.06); }
.panel-bg { opacity: 1; background: linear-gradient(to top, rgba(4, 10, 21, .88) 0%, rgba(4, 10, 21, .4) 55%, rgba(4, 10, 21, .05) 100%); }
.panel:not(.is-active) .panel-bg { background: linear-gradient(to top, rgba(4, 10, 21, .85) 0%, rgba(4, 10, 21, .3) 60%, rgba(4, 10, 21, .15) 100%); }
.panel-bg::after { display: none; }

/* Couvertures d'articles avec photo */
.nc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.news-card:hover .nc-photo { transform: scale(1.06); }
.news-cover .nc-bg, .reader-cover .nc-bg { opacity: .55; }
.news-cover .nc-bg::after { display: none; }
.news-cover .nc-ico, .reader-cover .nc-ico { display: none; }
.reader-cover { height: 320px; }

/* Cartes pastilles flottantes du hero : version plus sobre */
.proc-badge { background: rgba(255, 255, 255, .1); }

/* ---------- Logo agrandi (fidèle au logo d'origine) ---------- */
:root { --header-h: 116px; }
.site-header { height: var(--header-h); transition: height .4s var(--ease), transform .6s var(--ease), background .4s; }
.site-header.scrolled { height: 92px; }
.brand-logo { display: block; height: 100px; width: auto; transition: height .4s var(--ease); }
.site-header.scrolled .brand-logo { height: 76px; }
.brand:hover .brand-logo { transform: none; }
.pl-inner .logo-mark { width: auto; height: 190px; border-radius: 18px; padding: 10px; background: #fff; opacity: 0; animation: leafIn .9s .2s var(--ease) forwards; box-shadow: 0 0 0 8px rgba(255, 255, 255, .06); }
.site-footer .brand-logo { height: 190px; padding: 10px 12px; background: #fff; border-radius: 18px; }
.showcase-logo { border-top: 1px solid var(--line); }
.showcase-logo img { width: auto; height: 190px; border-radius: 0; box-shadow: none; }
.hero--page { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.hero:not(.hero--page) { padding-top: calc(var(--header-h) + 24px); }
@media (max-width: 1100px) { .brand-logo { height: 88px; } .site-header.scrolled .brand-logo { height: 70px; } }
@media (max-width: 480px) { :root { --header-h: 96px; } .site-header.scrolled { height: 82px; } .brand-logo { height: 76px; } .site-header.scrolled .brand-logo { height: 62px; } .site-footer .brand-logo { height: 150px; } }
/* ---------- Logo en saillie : grand format, fidèle à l'original ---------- */
:root { --header-h: 88px; --logo-h: 150px; }
.site-header, .site-header.scrolled, .menu-open .site-header { background: #fff; height: var(--header-h); overflow: visible; }
.site-header.scrolled { height: 76px; }
.header-inner { align-items: center; }
.site-header .brand { align-self: flex-start; padding: 8px 14px 10px; background: #fff; border-radius: 0 0 22px 22px; box-shadow: 0 22px 34px -22px rgba(11, 31, 58, .55); transition: padding .4s var(--ease); }
.site-header .brand-logo, .site-header.scrolled .brand-logo { height: var(--logo-h); transition: height .4s var(--ease); }
.site-header.scrolled .brand-logo { height: 104px; }
.hero--page { padding-top: calc(var(--logo-h) + 70px); }
.hero:not(.hero--page) { padding-top: calc(var(--logo-h) + 50px); }
.sector-nav { top: calc(76px + 12px); }
@media (max-width: 1100px) { :root { --logo-h: 128px; } .site-header.scrolled .brand-logo { height: 96px; } }
@media (max-width: 480px) { :root { --header-h: 76px; --logo-h: 112px; } .site-header.scrolled { height: 68px; } .site-header .brand { padding: 6px 10px 8px; } .site-header.scrolled .brand-logo { height: 84px; } }