/* LUMENOR™ — Guide intelligent / Smart Guide (refonte design v2, 2026-10-29)
   Entrée : petite fenêtre de marque ancrée en haut à droite ; au clic, le
   panneau se déploie depuis cette fenêtre (fondu + glissement, ~300 ms).
   Styles strictement scopés au Guide : aucun sélecteur global, aucune
   redéfinition des variables du site. Polices et couleurs = assets/style.css ; habillage aligné sur le langage « tech 2026 » (modernisation-fiches/note-design.md) : verre dépoli, halos, trame technique, rayons généreux, or en accent. */
.guide-fab, .guide-overlay{
  --navy:#0B1B33; --navy-2:#0E2240; --navy-3:#13294d;
  --gold:#C6A15B; --gold-light:#E3C98A; --gold-dim:rgba(198,161,91,.35);
  --paper:#F7F4EC; --ink:#1b2740; --muted:#5b6b87;
  --line:rgba(198,161,91,.28); --radius:14px;
  --serif:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Entrée du Guide : petite fenêtre en haut à droite ---------- */
.guide-fab{
  position:fixed; top:80px; right:18px; z-index:80;
  display:flex; align-items:center; gap:.62rem;
  max-width:calc(100vw - 24px);
  padding:.5rem .85rem .5rem .55rem;
  background:linear-gradient(180deg,rgba(14,34,64,.85),rgba(8,20,38,.82));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:#f2ead6; border:1px solid rgba(227,201,138,.28); border-radius:16px;
  box-shadow:0 14px 34px -12px rgba(4,10,24,.35), inset 0 1px 0 rgba(255,255,255,.07);
  font-family:var(--sans); text-align:left; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.guide-fab:hover{
  transform:translateY(-1px); border-color:var(--gold);
  box-shadow:0 22px 44px -14px rgba(4,10,24,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
.guide-fab:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.guide-fab-logo{ width:30px; height:30px; border-radius:50%; border:1px solid var(--gold-dim); flex:none; display:block; }
.guide-fab-title{
  font-family:var(--serif); font-size:1.04rem; font-weight:600;
  letter-spacing:.05em; color:#f2ead6; white-space:nowrap; line-height:1.1;
}
.guide-fab-chev{
  flex:none; width:8px; height:8px; margin-left:.15rem;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .3s ease;
}
.guide-fab[aria-expanded="true"] .guide-fab-chev{ transform:rotate(225deg); }
@media (max-width:700px){
  .guide-fab{ top:74px; right:10px; padding:.42rem .65rem .42rem .45rem; gap:.5rem; border-radius:13px; }
  .guide-fab-logo{ width:24px; height:24px; }
  .guide-fab-title{ font-size:.9rem; }
}

/* ---------- Voile + panneau déployé depuis l'entrée ---------- */
.guide-overlay{
  position:fixed; inset:0; z-index:70;
  font-family:var(--sans);
  background:rgba(3,9,20,0);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  visibility:hidden; pointer-events:none;
  transition:background-color .3s ease, visibility 0s linear .36s;
}
.guide-overlay.open{
  background:rgba(3,9,20,.46);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  visibility:visible; pointer-events:auto;
  transition:background-color .3s ease;
}
.guide-overlay .guide-panel{
  position:absolute; top:142px; right:18px;
  width:min(470px, calc(100vw - 36px));
  max-height:calc(100vh - 158px); max-height:calc(100dvh - 158px);
  overflow-y:auto;
  background:
    radial-gradient(430px 230px at 88% -50px, rgba(198,161,91,.16), rgba(198,161,91,0) 62%),
    radial-gradient(520px 320px at -12% 112%, rgba(38,84,160,.20), rgba(38,84,160,0) 62%),
    linear-gradient(165deg,#081426 0%,#0B1B33 55%,#0E2240 100%);
  color:var(--paper);
  border:1px solid rgba(227,201,138,.28); border-radius:20px;
  box-shadow:0 30px 60px -18px rgba(2,6,16,.55), inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0; transform:translateY(-14px) scale(.98); transform-origin:top right;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.guide-overlay .guide-panel::before{ /* filet doré supérieur, comme .card du site */
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,#C6A15B,transparent);
}
.guide-overlay.open .guide-panel{ opacity:1; transform:none; pointer-events:auto; }
.guide-overlay .guide-panel::after{ /* trame technique, fondu radial — langage « tech 2026 » */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    linear-gradient(rgba(227,201,138,.045) 1px, rgba(227,201,138,0) 1px),
    linear-gradient(90deg, rgba(227,201,138,.045) 1px, rgba(227,201,138,0) 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 62% at 50% 0%, #000 0%, rgba(0,0,0,0) 72%);
  mask-image:radial-gradient(120% 62% at 50% 0%, #000 0%, rgba(0,0,0,0) 72%);
}
.guide-overlay .guide-body{ position:relative; z-index:1; }
@media (max-width:700px){
  .guide-overlay .guide-panel{
    top:128px; right:10px; left:10px; width:auto;
    max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px);
  }
}

/* ---------- En-tête du panneau ---------- */
.guide-overlay .guide-head{
  display:flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.2rem .95rem;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,rgba(14,34,64,.55),rgba(11,27,51,.25));
}
.guide-overlay .guide-head img{ width:46px; height:46px; border-radius:50%; border:1px solid var(--gold-dim); }
.guide-overlay .guide-head h2{
  font-family:var(--serif); font-size:1.38rem; font-weight:600;
  line-height:1.08; letter-spacing:.01em; color:#f2ead6;
}
.guide-overlay .guide-head .sub{ font-size:.82rem; color:#a9b4c9; margin-top:.15rem; line-height:1.45; }
.guide-overlay .lang-switch{ margin-left:auto; display:flex; border:1px solid var(--gold-dim); border-radius:999px; overflow:hidden; flex:none; }
.guide-overlay .lang-switch button{
  background:transparent; border:none; color:#a9b4c9;
  font-family:var(--sans); font-weight:700; font-size:.78rem;
  padding:.4rem .65rem; cursor:pointer;
}
.guide-overlay .lang-switch button.on{ background:var(--gold); color:var(--navy); }
.guide-overlay .guide-close{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; flex:none;
  background:transparent; border:1px solid var(--gold-dim); border-radius:8px;
  color:var(--gold-light); font-size:1.2rem; line-height:1; cursor:pointer;
}
.guide-overlay .guide-close:hover{ border-color:var(--gold); background:rgba(198,161,91,.12); }

/* ---------- Étapes et choix ---------- */
.guide-overlay{ line-height:1.62; }
.guide-overlay .guide-body{ padding:1.25rem 1.2rem 1.3rem; }
.guide-overlay .progress{ display:flex; gap:.45rem; margin-bottom:1.05rem; }
.guide-overlay .progress span{ flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.14); }
.guide-overlay .progress span.done{ background:linear-gradient(90deg,#C6A15B,#E3C98A); }
.guide-overlay .step-kicker{
  color:var(--gold); letter-spacing:.3em; text-transform:uppercase;
  font-size:.7rem; font-weight:700; margin-bottom:.5rem;
}
.guide-overlay .guide-q{
  font-family:var(--serif); font-size:1.5rem; font-weight:600;
  line-height:1.25; margin-bottom:1.05rem; color:#f2ead6;
}
.guide-overlay .choices{ display:grid; gap:.65rem; }
.guide-overlay .choice{
  display:flex; align-items:center; gap:.75rem; width:100%;
  min-height:56px; padding:.95rem 1rem;
  background:rgba(255,255,255,.055); border:1px solid rgba(227,201,138,.22); border-radius:16px;
  color:var(--paper); font-family:var(--sans); font-size:.98rem; line-height:1.4;
  text-align:left; cursor:pointer;
  transition:border-color .35s ease, background .35s ease, transform .35s ease;
}
.guide-overlay .choice:hover{ border-color:var(--gold); background:rgba(255,255,255,.09); transform:translateY(-2px); }
.guide-overlay .choice .ic{ color:var(--gold); font-size:.68rem; line-height:1; flex:none; }
.guide-overlay .guide-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.15rem; }
.guide-overlay .link-btn{
  background:none; border:none; color:var(--gold-light);
  font-family:var(--sans); font-size:.92rem; cursor:pointer; padding:.4rem 0;
}
.guide-overlay .link-btn:disabled{ opacity:.3; cursor:default; }

/* ---------- Cartes de recommandation (alignées sur .card du site) ---------- */
.guide-overlay .result-label{
  color:var(--gold-light); letter-spacing:.26em; text-transform:uppercase;
  font-size:.7rem; font-weight:700; margin:1.1rem 0 .55rem;
}
.guide-overlay .result-label:first-child{ margin-top:0; }
.guide-overlay .pcard{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.055); border:1px solid rgba(227,201,138,.22); border-radius:20px;
  padding:1.1rem 1.15rem; margin-bottom:.7rem;
  box-shadow:0 14px 34px -12px rgba(4,10,24,.35);
  transition:transform .35s ease, box-shadow .35s ease;
}
.guide-overlay .pcard h3{
  font-family:var(--serif); font-size:1.3rem; line-height:1.2;
  margin-bottom:.35rem; color:#f4eeda;
}
.guide-overlay .pcard p{ font-size:.92rem; line-height:1.55; color:#b6bfd2; }
.guide-overlay .pcard .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin-top:.85rem; flex-wrap:nowrap;
}
.guide-overlay .pcard .price{
  font-family:var(--serif); font-weight:700; font-size:1.28rem;
  color:var(--gold-light); white-space:nowrap; line-height:1.15;
}
.guide-overlay .pcard .price small{
  display:block; font-family:var(--sans); font-weight:400; font-size:.66rem;
  color:#93a0b8; letter-spacing:.06em; text-transform:uppercase; margin-top:.15rem;
}
/* Recommandation principale : fond crème + bordure or marquée */
.guide-overlay .pcard.main{
  background:linear-gradient(180deg,#FBF9F3,#F7F4EC); border:1px solid var(--gold);
  box-shadow:0 22px 44px -14px rgba(4,10,24,.45);
}
.guide-overlay .pcard.main::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,#C6A15B,transparent);
}
.guide-overlay .pcard.main h3{ color:var(--navy); }
.guide-overlay .pcard.main p{ color:#33405a; }
.guide-overlay .pcard.main .price{ color:var(--navy); }
.guide-overlay .pcard.main .price small{ color:var(--muted); }
/* Porte d'entrée gratuite : même famille, bordure or en pointillés */
.guide-overlay .pcard.free{ border:1px dashed var(--gold); background:rgba(198,161,91,.08); }
.guide-overlay .free-tag{
  display:inline-block; background:#1d7a3a; color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.22rem .6rem; border-radius:999px; margin-bottom:.5rem;
}
.guide-overlay .restart-row{ margin-top:1.25rem; text-align:center; }
.guide-overlay .guide-sig{
  margin-top:1.1rem; text-align:center;
  font-family:var(--serif); font-style:italic; color:var(--gold-light);
  font-size:.98rem; line-height:1.45;
}

/* ---------- Boutons du panneau (miroir de .btn / .btn-gold / .btn-ghost du site) ---------- */
.guide-overlay .btn{
  display:inline-block; border:1px solid transparent; border-radius:999px;
  padding:.78rem 1.35rem;
  font-family:var(--sans); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.guide-overlay .btn-gold{
  background:linear-gradient(135deg,#E3C98A,#C6A15B); color:#241A05;
  box-shadow:0 12px 28px -8px rgba(198,161,91,.45);
}
.guide-overlay .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(198,161,91,.42); }
.guide-overlay .btn-ghost{ background:rgba(255,255,255,.03); color:var(--gold-light); border-color:rgba(198,161,91,.45); }
.guide-overlay .btn-ghost:hover{ background:rgba(198,161,91,.12); }
.guide-overlay .pcard .btn{ flex:none; }

@media (prefers-reduced-motion:reduce){
  .guide-fab, .guide-overlay, .guide-overlay .guide-panel,
  .guide-overlay .choice, .guide-overlay .btn{ transition:none; }
}