/* mriya.aero — styles. Couleurs en RGB (charte Mriya). */
:root{
  --paper: rgb(253,253,253);      /* fond identique à celui de la vidéo */
  --ink: rgb(5,43,106);           /* bleu de référence Mriya */
  --mid: rgb(34,93,161);          /* rémige médiane */
  --gold: rgb(212,162,12);        /* rémige basse, usage rare */
  --text: rgb(33,44,62);
  --soft: rgb(96,108,126);
  --mist: rgb(240,244,249);
  --line: rgb(219,226,235);
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--serif);font-size:1.15rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--mid);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:20}

/* Langues : un seul texte visible à la fois */
html[data-lang="fr"] [lang="en"]:not(html),html[data-lang="en"] [lang="fr"]:not(html){display:none!important}

/* En-tête */
.top{position:sticky;top:0;z-index:10;background:rgba(253,253,253,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:.7rem 1.5rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:34px;width:auto}
nav.menu{display:flex;gap:1.4rem;flex:1;flex-wrap:wrap}
nav.menu a{font-family:var(--sans);font-size:.95rem;color:var(--text);text-decoration:none}
nav.menu a:hover{color:var(--mid)}
.langs{display:flex;gap:.2rem;font-family:var(--sans);font-size:.9rem}
.langs button{background:none;border:1px solid transparent;border-radius:999px;padding:.25rem .65rem;cursor:pointer;color:var(--soft);font:inherit}
.langs button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.btn{display:inline-block;font-family:var(--sans);font-size:.98rem;font-weight:600;text-decoration:none;padding:.7rem 1.25rem;border-radius:6px;border:1.5px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--mid);border-color:var(--mid);color:var(--paper)}
.btn.line{color:var(--ink);background:transparent}
.btn.line:hover{border-color:var(--mid);color:var(--mid)}
.top .btn{padding:.45rem .9rem;font-size:.9rem}

main{max-width:1180px;margin:0 auto;padding:0 1.5rem}

/* Bandeau */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:center;min-height:min(86vh,760px);padding:2rem 0 3rem}
.hero-media{position:relative}
.hero-media video,.hero-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.reduced-motion-poster{display:none}
.pause{position:absolute;right:.6rem;bottom:.6rem;font-family:var(--sans);font-size:.8rem;background:rgba(253,253,253,.9);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;cursor:pointer;color:var(--soft)}
.pause:hover{color:var(--ink);border-color:var(--ink)}
.hero h1{font-family:var(--sans);font-weight:500;color:var(--ink);font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.35;letter-spacing:-.005em;margin:0 0 1.8rem;max-width:26ch}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* Sections */
section{padding:4.5rem 0}
h2{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.2;margin:0 0 1.4rem;letter-spacing:-.01em}
h3{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:1.3rem;margin:0 0 .8rem}
p{margin:0 0 1rem;max-width:62ch}

/* Qui est derrière Mriya */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:3.5rem;align-items:start;border-top:1px solid var(--line)}
.portrait{aspect-ratio:4/5;background:var(--mist);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--soft);font-family:var(--sans);font-size:.9rem;text-align:center;padding:1rem}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:4px}

/* Prestations : encadrés de formes différentes */
.offers{border-top:1px solid var(--line)}
.offers-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.6rem;margin-top:2.2rem}
.box{padding:2rem 2.2rem;border-radius:4px}
.box p:last-child{margin-bottom:0}
.b-audit{grid-column:1 / span 8;background:var(--mist)}
.b-secu{grid-column:5 / span 8;border:1.5px solid var(--ink);background:var(--paper)}
.b-crm{grid-column:1 / span 5;border-left:4px solid var(--gold);border-radius:0;background:transparent;padding-left:1.6rem}
.b-web{grid-column:6 / span 7;background:var(--ink);color:rgb(226,234,246)}
.b-web h3{color:var(--paper)}
.note{font-family:var(--sans);font-size:.92rem;color:var(--soft)}
.b-web .note{color:rgb(176,195,222)}

.prices{display:grid;grid-template-columns:1fr auto;gap:.35rem 1.5rem;margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid rgba(5,43,106,.18);font-family:var(--sans);font-size:.95rem}
.prices dt{margin:0;color:var(--text)}
.prices dd{margin:0;color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
.b-crm .prices{border-top-color:rgba(212,162,12,.45)}
.quote-note{font-family:var(--sans);font-size:.95rem;color:var(--soft);margin-top:2rem;max-width:70ch}
@media (max-width:520px){.prices{grid-template-columns:1fr}.prices dd{text-align:left;margin-bottom:.5rem}}

/* Effet au défilement : une seule apparition, puis immobile */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* Démonstrations */
.demos{border-top:1px solid var(--line)}
.demos-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;margin-top:2rem;align-items:start}
.demo{padding:0}
.demo-slot{margin:1.2rem 0;border:1.5px solid var(--ink);border-radius:4px;background:var(--mist);font-family:var(--sans);font-size:.9rem;color:var(--soft);padding:1rem;min-width:0}
.weather-demo{display:grid;gap:1.2rem;text-align:left}
.weather-demo form,.weather-charts{display:grid;gap:.55rem}
.weather-demo label{color:var(--ink);font-weight:600}
.weather-form-row{display:flex;align-items:stretch;gap:.65rem;min-width:0}
.weather-form-row input,.weather-form-row select{min-width:0;flex:1;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--text);font:inherit;padding:.72rem .8rem}
.weather-form-row .btn{flex:0 0 auto;cursor:pointer}
.weather-state{border-left:3px solid var(--mid);padding:.7rem .85rem;background:#fff;color:var(--text)}
.weather-state[data-level="error"]{border-left-color:rgb(168,51,43)}
.weather-summary{margin:0 0 .8rem;color:var(--ink);font-weight:600}
.weather-station-grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.weather-card{min-width:0;border:1px solid var(--line);border-radius:4px;background:#fff;padding:.85rem}
.weather-card h4{margin:0 0 .45rem;color:var(--ink);font-size:1rem}
.weather-card dl{display:grid;grid-template-columns:1fr auto;gap:.2rem .7rem;margin:.65rem 0}
.weather-card dt,.weather-card dd{margin:0}
.weather-card dd{font-weight:600;color:var(--ink);text-align:right}
.weather-raw{overflow-wrap:anywhere;margin:.55rem 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;line-height:1.45}
.weather-source{margin:0;font-size:.78rem;line-height:1.45}
.weather-charts{border-top:1px solid var(--line);padding-top:1rem}
.weather-charts figure{margin:.3rem 0 0}
.weather-charts figure img{width:100%;height:auto;border:1px solid var(--line);background:#fff}
.weather-charts figcaption{margin-top:.45rem;font-size:.78rem;line-height:1.45}
.wind-demo{display:grid;place-items:center;min-height:260px;text-align:center;overflow:hidden}
.wind-demo.is-running{display:block;padding:0;background:#fdfdfd;border-color:var(--line)}
.demo-launch p{margin:.75rem auto 0;font-size:.82rem}
.wind-demo iframe{display:block;width:100%;height:min(80vh,920px);min-height:620px;border:0;background:#fdfdfd}
@media (max-width:860px){.demos-grid{grid-template-columns:1fr}}

/* Plateforme */
.platform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3rem;align-items:center;border-top:1px solid var(--line)}
.shot{aspect-ratio:16/10;border:1.5px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.shot img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Contact */
.contact{border-top:1px solid var(--line);text-align:left}
.contact .mail{font-family:var(--sans);font-size:1.25rem;color:var(--ink)}

footer{border-top:1px solid var(--line);margin-top:2rem}
.foot{max-width:1180px;margin:0 auto;padding:2rem 1.5rem 3rem;display:flex;flex-wrap:wrap;gap:1rem 2.2rem;align-items:center;font-family:var(--sans);font-size:.9rem;color:var(--soft)}
.foot img{height:26px;width:auto}
.foot a{color:var(--soft)}
.foot a:hover{color:var(--ink)}

/* Version multipage */
.page-intro{padding:clamp(3.5rem,8vw,7rem) 0 2.5rem;border-bottom:1px solid var(--line)}
.page-intro h1{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:clamp(2rem,5vw,4.5rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 1.2rem;max-width:16ch}
.page-intro p{font-size:clamp(1.15rem,2vw,1.45rem);max-width:52ch}
.content-section{padding:3.5rem 0;border-bottom:1px solid var(--line)}
.content-narrow{max-width:780px}
.topic-grid,.try-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2rem}
.topic-card{display:flex;min-height:210px;flex-direction:column;justify-content:space-between;padding:1.8rem;border:1px solid var(--line);border-radius:4px;color:var(--text);text-decoration:none;background:var(--paper)}
.topic-card:nth-child(3n+1){background:var(--mist)}
.topic-card:nth-child(3n+2){border-color:var(--ink)}
.topic-card:nth-child(3n){border-left:4px solid var(--gold)}
.topic-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(5,43,106,.08)}
.topic-card h3{margin-bottom:1rem}
.topic-card p{color:var(--text)}
.topic-card .card-link{font-family:var(--sans);color:var(--mid);font-size:.92rem}
.section-lead{max-width:54ch}
.activity-list{margin-top:2.4rem;border-top:1px solid var(--line)}
.activity-list article{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:clamp(1.5rem,5vw,5rem);padding:2rem 0;border-bottom:1px solid var(--line)}
.activity-list article h3{margin:0}
.activity-list article p:last-child{margin-bottom:0}
.activity-links{font-family:var(--sans);font-size:.92rem}
.scope-note{max-width:76ch;margin:2rem 0 0;padding-left:1rem;border-left:3px solid var(--gold);font-family:var(--sans);font-size:.9rem;line-height:1.55;color:var(--soft)}
.editorial-sections{max-width:860px}
.editorial-sections h2{margin-top:2.5rem}
.editorial-sections h2:first-child{margin-top:0}
.service-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:3rem;align-items:start}
.service-price{position:sticky;top:90px;padding:2rem;background:var(--mist);border:1px solid var(--line);border-radius:4px}
.tariff-disclaimer{font-family:var(--sans);font-size:.8rem;line-height:1.5;color:var(--soft);margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.b-web .tariff-disclaimer{color:rgb(205,218,237);border-top-color:rgba(255,255,255,.25)}
.common-contact{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.5rem 0}
.common-contact p{margin:0}
.common-contact .mail{font-family:var(--sans);font-size:1.2rem}
.foot{justify-content:flex-start}
.site-rights{flex-basis:100%;color:var(--text)}
.ufo-link{margin-left:auto;font-size:.78rem;letter-spacing:.04em;text-decoration:none;opacity:.75}

/* Diaporama manuel */
.slideshow{margin:2rem 0;touch-action:pan-y;border:1px solid var(--line);border-radius:4px;background:var(--mist);overflow:hidden}
.slide-stage{height:clamp(360px,64vw,720px);background:rgb(18,29,43);display:grid;place-items:center;overflow:hidden}
.slide-stage figure{width:100%;height:100%;margin:0;display:grid;place-items:center}
.slide-stage figure[hidden]{display:none}
.slide-stage a{display:grid;place-items:center;width:100%;height:100%;cursor:zoom-in}
.slide-stage img{width:100%;height:100%;object-fit:contain;background:rgb(18,29,43)}
.slide-controls{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem}
.slide-controls button{font:600 .9rem var(--sans);border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:4px;padding:.55rem .85rem;cursor:pointer}
.slide-meta{text-align:center;font-family:var(--sans)}
.slide-meta span{display:block;color:var(--ink);font-weight:600}
.slide-meta p{max-width:none;margin:.2rem 0 0;font-size:.86rem;color:var(--soft);line-height:1.4}
.slide-lightbox{width:min(96vw,1600px);max-width:none;height:min(94vh,1100px);max-height:none;padding:0;border:1px solid rgba(255,255,255,.24);border-radius:6px;background:rgb(11,19,29);color:white;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.slide-lightbox::backdrop{background:rgba(5,12,22,.86)}
.slide-lightbox-bar{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.18)}
.slide-lightbox-bar h3{margin:0;color:white;font:600 1rem var(--sans)}
.slide-lightbox button{font:600 .9rem var(--sans);border:1px solid rgba(255,255,255,.55);background:rgb(30,47,64);color:white;border-radius:4px;padding:.55rem .85rem;cursor:pointer}
.slide-lightbox figure{display:grid;grid-template-rows:minmax(0,1fr) auto;height:calc(100% - 64px);margin:0;padding:1rem}
.slide-lightbox img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain}
.slide-lightbox figcaption{padding:.7rem .25rem 0;text-align:center;font:400 .92rem/1.4 var(--sans);color:rgb(220,229,238)}
.slide-stage a:focus-visible,.slide-controls button:focus-visible,.slide-lightbox button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Pages des démonstrations */
.demo-page main{max-width:1480px}
.demo-page .demo-slot{margin-bottom:2.5rem}
.weather-center-frame{border:0;width:100%;min-height:1100px;background:#09121d}
.weather-charts figure{margin:1rem 0}.weather-charts img{width:100%;height:auto}

@media (max-width:960px){
  .top-in{gap:.8rem}.top .btn{display:none}nav.menu{order:3;flex-basis:100%;gap:1rem;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.15rem}nav.menu a{white-space:nowrap}
  .service-layout{grid-template-columns:1fr}.service-price{position:static}.topic-grid,.try-grid{grid-template-columns:1fr}.activity-list article{grid-template-columns:1fr;gap:.6rem}.common-contact{align-items:flex-start;flex-direction:column}
  .ufo-link{margin-left:0}.slide-controls{grid-template-columns:1fr 1fr}.slide-meta{grid-column:1/-1;grid-row:1}.slide-controls button:last-child{grid-column:2}
}
@media (max-width:620px){.top-in{padding:.55rem 1rem}.brand img{height:29px}main{padding:0 1rem}.hero{grid-template-columns:1fr;gap:1.4rem;min-height:0;padding-top:1.5rem}.hero-media{order:2}.page-intro{padding-top:2.5rem}.topic-card{min-height:170px;padding:1.4rem}.service-price{padding:1.3rem}.weather-form-row{flex-direction:column}.weather-station-grid{grid-template-columns:1fr}.wind-demo iframe{min-height:760px}.foot{padding-left:1rem;padding-right:1rem}}
@media (max-width:620px){.slide-stage{height:min(64vh,520px);min-height:340px}.slide-controls{padding:.8rem;gap:.7rem}.slide-controls button{padding:.55rem .65rem}.slide-lightbox{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}.slide-lightbox figure{padding:.6rem}.slide-lightbox-bar{padding:.6rem .75rem}}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;gap:1.5rem;padding-top:1rem}
  .hero-media{max-width:460px;margin:0 auto;width:100%}
  .about,.platform{grid-template-columns:1fr;gap:2rem}
  .portrait{max-width:320px}
  .offers-grid{grid-template-columns:1fr}
  .b-audit,.b-secu,.b-crm,.b-web{grid-column:1 / -1}
  nav.menu{order:3;flex-basis:100%;gap:.5rem 1.1rem}
  .langs{margin-left:auto}
  section{padding:3.2rem 0}
}
@media (max-width:620px){
  .weather-form-row{display:grid}
  .weather-form-row .btn{width:100%;text-align:center}
  .weather-station-grid{grid-template-columns:1fr}
  .wind-demo iframe{min-height:760px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-media video{display:none}
  .hero-media .reduced-motion-poster{display:block}
  .hero-media .pause{display:none}
  .slide-stage a,.slide-controls button,.slide-lightbox{scroll-behavior:auto;transition:none}
}