/* YNOVRA — feuille de style du site vitrine (15/10/2026).
   Couleurs du logo : bleu marine et or, sur ivoire ; bleu ciel en appui ; titres Poppins, texte Nunito. */
:root{
  --encre:#0e2a66; --encre-2:#163a8a; --ivoire:#f8f6f1; --blanc:#fff; --gris:#56607a; --ligne:#e4e1d6;
  --or:#c99a5b; --or-2:#dcb27a; --sable:#f0d9a8; --ciel:#5b8def; --ciel-2:#e7eefb;
  --titre:'Poppins',system-ui,sans-serif; --corps:'Nunito',system-ui,sans-serif;
  --r:18px; --r-s:10px; --ombre:0 18px 50px rgba(14,42,102,.12);
  --w:1140px; --gout:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17.5px/1.6 var(--corps);color:var(--encre);background:var(--ivoire)}
img,svg{max-width:100%;display:block}
a{color:var(--encre)}
h1,h2,h3{font-family:var(--titre);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.5vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.w{max-width:var(--w);margin:0 auto;padding:0 var(--gout)}
.etroit{max-width:780px}
.k{display:inline-block;font:700 .78rem/1 var(--corps);letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:1rem}
.intro{font-size:1.15rem;color:var(--gris);max-width:640px}
.skip{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* Boutons */
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.6rem;border-radius:999px;font:700 1rem var(--corps);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.b1{background:var(--or);color:var(--encre);box-shadow:0 10px 24px rgba(201,154,91,.35)}
.b1:hover{background:var(--or-2);transform:translateY(-2px)}
.b2{background:transparent;color:inherit;border-color:currentColor}
.b2:hover{background:rgba(20,18,58,.06)}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0}

/* Bandeau d'annonce (lancement) */
.annonce{display:block;background:var(--or);color:var(--encre);text-align:center;font-weight:700;font-size:.95rem;padding:.6rem var(--gout);text-decoration:none;line-height:1.35}
.annonce span{display:inline-block;margin-left:.3rem;transition:transform .15s}
.annonce:hover span{transform:translateX(4px)}
/* En-tête */
.top{position:sticky;top:0;z-index:50;background:rgba(248,246,241,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.top .w{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.35rem var(--titre);color:var(--encre)}
.logo .mark{width:44px;height:44px;object-fit:contain}
.logo span{letter-spacing:.04em}
.top nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1.5rem}
.top nav a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--encre-2)}
.top nav a:hover{color:var(--or)}
.top nav a.cta{background:var(--encre);color:#fff;padding:.6rem 1.2rem;border-radius:999px}
.top nav a.cta:hover{background:var(--or);color:var(--encre)}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger i{display:block;height:3px;background:var(--encre);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(10.5px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-10.5px) rotate(-45deg)}

/* Héros */
.hero{position:relative;background:var(--encre);color:#fff;overflow:hidden;padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5rem)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .w{position:relative;display:grid;grid-template-columns:1.25fr .85fr;gap:2.5rem;align-items:center}
.hero .k{color:var(--sable)}
.hero h1 b{color:var(--or-2)}
.hero p{font-size:1.2rem;max-width:620px;color:rgba(255,255,255,.82)}
.hero .b2{color:#fff}
.hero .b2:hover{background:rgba(255,255,255,.1)}
.disque{justify-self:center;width:min(360px,70vw);aspect-ratio:1;background:#fff;border-radius:50%;display:grid;place-items:center;padding:7%;box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 14px rgba(255,255,255,.06)}
.disque img{width:100%;height:100%;object-fit:contain}
.preuves{grid-column:1/-1;list-style:none;margin:1.5rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.preuves b{display:block;font:800 1.7rem var(--titre);color:var(--sable)}
.preuves span{font-size:.92rem;color:rgba(255,255,255,.75)}

/* Sections */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.concept{background:var(--blanc)}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem}
.trois article{position:relative;background:var(--ivoire);border-radius:var(--r);padding:2rem 1.6rem 1.6rem;border:1px solid var(--ligne)}
.n{position:absolute;top:-16px;left:1.6rem;width:36px;height:36px;border-radius:50%;background:var(--or);color:var(--encre);font:800 1rem/36px var(--titre);text-align:center;font-style:normal}
.trois article:nth-child(2) .n{background:var(--encre);color:#fff}
.trois article:nth-child(3) .n{background:var(--sable);color:var(--encre)}

.etapes{background:var(--encre);color:#fff}
.etapes .k{color:var(--sable)}
.frise{list-style:none;counter-reset:e;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.frise li{counter-increment:e;position:relative;padding-top:1.4rem;border-top:3px solid var(--or)}
.frise li::before{content:"0" counter(e);display:block;font:700 .8rem var(--corps);letter-spacing:.1em;color:var(--or-2);margin-bottom:.6rem}
.frise b{display:block;font:700 1.2rem var(--titre);margin-bottom:.5rem}
.frise p{color:rgba(255,255,255,.78);font-size:.98rem}

.gammes{background:var(--ivoire)}
.cartes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin:2.5rem auto 0;max-width:900px}
.cartes article{background:var(--blanc);border-radius:var(--r);padding:2rem 1.8rem;box-shadow:var(--ombre);border-top:6px solid var(--or)}
.cartes h3{font-size:1.5rem}
.cartes li{font-size:1.02rem;font-weight:600}
.cartes .g2{border-top-color:var(--encre)}
.cartes .g3{border-top-color:var(--ciel)}
.cartes ul{margin:1rem 0 0;padding:0;list-style:none}
.cartes li{padding:.45rem 0 .45rem 1.6rem;position:relative;border-top:1px solid var(--ligne);font-size:.95rem}
.cartes li::before{content:"";position:absolute;left:0;top:.95rem;width:10px;height:10px;border-radius:50%;background:var(--or)}

.remu{background:var(--blanc)}
.plan{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.5rem}
.plan div{background:var(--ivoire);border:1px solid var(--ligne);border-radius:var(--r);padding:1.6rem 1.4rem}
.plan b{display:block;font:800 2.4rem/1 var(--titre);color:var(--encre)}
.plan span{display:block;font-weight:700;margin:.5rem 0 .4rem}
.plan p{margin:0;font-size:.95rem;color:var(--gris)}
.note{margin-top:2rem;padding:1rem 1.2rem;border-left:4px solid var(--or);background:#fbf4e6;border-radius:0 var(--r-s) var(--r-s) 0;font-size:.95rem}

.engage{background:var(--ciel-2)}
.engage .k{color:var(--encre-2)}
.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.5rem}
.grille div{background:var(--blanc);border-radius:var(--r);padding:1.8rem 1.6rem}
.grille h3::before{content:"✓";display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--encre);color:#fff;text-align:center;line-height:28px;font-size:.95rem;margin-right:.6rem}

.faq{background:var(--ivoire)}
.qs{max-width:820px;margin-top:2rem}
.qs details{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-s);margin-bottom:.8rem;padding:0 1.3rem}
.qs summary{cursor:pointer;font:700 1.05rem var(--corps);padding:1rem 2rem 1rem 0;list-style:none;position:relative}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";position:absolute;right:0;top:.8rem;font:700 1.5rem/1 var(--titre);color:var(--or);transition:transform .2s}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs details p{margin:0 0 1.1rem;color:var(--gris)}

.rejoindre{background:var(--encre);color:#fff}
.rejoindre .w{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:start}
.rejoindre .k{color:var(--sable)}
.rejoindre .txt a{color:var(--or-2)}
.rejoindre form,.rejoindre .ok{background:var(--blanc);color:var(--encre);border-radius:var(--r);padding:2rem;box-shadow:var(--ombre)}
.rejoindre label{display:block;font-weight:700;font-size:.92rem;margin-bottom:1rem}
.rejoindre label small{font-weight:400;color:var(--gris)}
.rejoindre input[type=text],.rejoindre input[type=email],.rejoindre input[type=tel],.rejoindre textarea{display:block;width:100%;margin-top:.35rem;padding:.75rem .9rem;border:1.5px solid var(--ligne);border-radius:var(--r-s);font:400 1rem var(--corps);color:var(--encre);background:var(--ivoire)}
.rejoindre input:focus,.rejoindre textarea:focus{outline:none;border-color:var(--or);background:#fff}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.motif{border:0;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.6rem}
.motif legend{font-weight:700;font-size:.92rem;margin-bottom:.5rem}
.motif label{margin:0;cursor:pointer}
.motif input{position:absolute;opacity:0}
.motif span{display:inline-block;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--ligne);font-weight:600;font-size:.92rem}
.motif input:checked+span{background:var(--encre);border-color:var(--encre);color:#fff}
.motif input:focus-visible+span{outline:2px solid var(--or);outline-offset:2px}
.chk{display:flex;gap:.6rem;align-items:flex-start;font-weight:400 !important;font-size:.88rem !important;color:var(--gris)}
.chk input{margin-top:.25rem;accent-color:var(--or)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.err{background:#fde8e4;color:#8a2211;padding:.8rem 1rem;border-radius:var(--r-s);font-size:.95rem}
.ok b{display:block;font:800 1.4rem var(--titre);margin-bottom:.5rem}
.ok .b2{margin-top:.5rem}

/* Pages intérieures */
.page{background:var(--blanc)}
.page h1{font-size:clamp(2rem,5vw,3rem)}
.page h2{font-size:1.4rem;margin-top:2.2rem}
.page p{color:#2e2d4a}
.retour{margin-top:3rem}

/* Pied */
.pied{background:#091b45;color:rgba(255,255,255,.75);padding:3.5rem 0 2rem;font-size:.95rem}
.pied .w{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.pied .logo{color:#fff;margin-bottom:.8rem}
.pied .logo .mark{background:#fff;border-radius:50%;padding:3px}
.pied .col b{display:block;color:#fff;margin-bottom:.8rem;font-family:var(--titre)}
.pied .col a{display:block;color:rgba(255,255,255,.75);text-decoration:none;margin-bottom:.4rem}
.pied .col a:hover{color:var(--or-2)}
.pied .legal{display:block;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(255,255,255,.5)}

/* Apparition au défilement */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Écrans moyens et mobiles */
@media (max-width:960px){
  .trois,.cartes,.frise,.plan{grid-template-columns:repeat(2,1fr)}
  .hero .w{grid-template-columns:1fr}
  .disque{width:min(240px,60vw);box-shadow:0 20px 50px rgba(0,0,0,.35)}
  .rejoindre .w{grid-template-columns:1fr}
  .pied .w{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .burger{display:flex}
  .top nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:var(--ivoire);flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gout) 1rem;border-bottom:1px solid var(--ligne);box-shadow:var(--ombre)}
  .top nav ul.open{display:flex}
  .top nav li a{display:block;padding:.8rem 0}
  .top nav a.cta{text-align:center;margin-top:.5rem}
  .preuves{grid-template-columns:1fr 1fr}
  .trois,.cartes,.frise,.plan,.grille,.deux{grid-template-columns:1fr}
  .trois article{padding-top:2.2rem}
  .pied .w{grid-template-columns:1fr}
  .rejoindre form,.rejoindre .ok{padding:1.4rem}
}

/* ---------- Maya, l'assistante IA (15/10/2026) : section de présentation et bulle de conversation ---------- */
.maya{background:var(--blanc);overflow:hidden}
.maya .w{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center}
.portrait{position:relative;justify-self:center;width:min(380px,80vw)}
.portrait::before{content:"";position:absolute;inset:auto 0 0 0;height:88%;border-radius:200px 200px var(--r) var(--r);background:linear-gradient(160deg,var(--ciel-2),#fbf4e6);z-index:0}
.portrait img{position:relative;z-index:1;width:100%;height:auto}
.exemples{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}
.exemples button{background:var(--ivoire);border:1.5px solid var(--ligne);border-radius:999px;padding:.55rem 1rem;font:600 .92rem var(--corps);color:var(--encre);cursor:pointer;transition:border-color .15s,background .15s}
.exemples button:hover{border-color:var(--or);background:#fbf4e6}
.note-maya{font-size:.85rem;color:var(--gris);max-width:560px}

.maya-bulle{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:.6rem;padding:6px 18px 6px 6px;border:0;border-radius:999px;background:var(--encre);color:#fff;font:700 .95rem var(--corps);cursor:pointer;box-shadow:0 14px 40px rgba(14,42,102,.35);transition:transform .15s}
.maya-bulle:hover{transform:translateY(-2px)}
.maya-bulle img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--or)}
.maya-bulle[aria-expanded=true]{display:none}
.maya-chat{position:fixed;right:18px;bottom:18px;z-index:95;width:min(400px,calc(100vw - 36px));height:min(600px,calc(100vh - 36px));display:flex;flex-direction:column;background:var(--blanc);border-radius:var(--r);box-shadow:0 24px 70px rgba(14,42,102,.35);overflow:hidden}
.maya-chat[hidden]{display:none}
.mc-tete{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;background:var(--encre);color:#fff}
.mc-tete img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--or)}
.mc-tete div{flex:1;line-height:1.2}
.mc-tete b{display:block;font-family:var(--titre)}
.mc-tete span{font-size:.8rem;color:rgba(255,255,255,.7)}
.mc-fermer{background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;padding:0 .2rem}
.mc-fil{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--ivoire)}
.mc-msg{max-width:88%;padding:.7rem .95rem;border-radius:16px;font-size:.95rem;line-height:1.5;white-space:pre-wrap}
.mc-msg.maya{align-self:flex-start;background:var(--blanc);border:1px solid var(--ligne);border-bottom-left-radius:4px}
.mc-msg.moi{align-self:flex-end;background:var(--encre);color:#fff;border-bottom-right-radius:4px}
.mc-msg.err{align-self:flex-start;background:#fde8e4;color:#8a2211}
.mc-msg.attente::after{content:"…";animation:mc-pt 1s steps(4,end) infinite}
@keyframes mc-pt{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.mc-saisie{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--ligne);background:var(--blanc)}
.mc-saisie textarea{flex:1;resize:none;border:1.5px solid var(--ligne);border-radius:14px;padding:.6rem .8rem;font:400 .95rem var(--corps);color:var(--encre);max-height:120px}
.mc-saisie textarea:focus{outline:none;border-color:var(--or)}
.mc-saisie button{width:44px;height:44px;border:0;border-radius:50%;background:var(--or);color:var(--encre);cursor:pointer;display:grid;place-items:center;flex:none}
.mc-saisie button:disabled{opacity:.5;cursor:default}
.mc-note{margin:0;padding:0 .9rem .6rem;font-size:.72rem;color:var(--gris);text-align:center;background:var(--blanc)}
.sr{position:absolute;left:-9999px}
@media (max-width:960px){.maya .w{grid-template-columns:1fr}.portrait{width:min(300px,70vw)}}
@media (max-width:720px){.maya-bulle span{display:none}.maya-bulle{padding:4px}.maya-chat{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}}