/* ==========================================================================
   Orezia — Espace membre (texte Alex validé par Benjamin, 04/10/2026)
   Présentation invité / client + aperçu illustratif. Aucun compte actif,
   aucune donnée réelle. S'appuie sur css/orezia.css.
   ========================================================================== */

/* M01 — Premier écran ----------------------------------------------------- */
.vm-ouverture { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); }
.vm-ouverture__grille { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 56rem) {
  .vm-ouverture__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); }
}
.vm-ouverture__texte .label { margin-bottom: 1.75rem; }
.vm-ouverture__titre { font-size: clamp(2.625rem, 1.6rem + 4.2vw, 5rem); line-height: 1.04; letter-spacing: -.02em; }
.vm-ouverture__titre em { display: block; font-style: italic; color: var(--vert-clair); }
.vm-ouverture__accroche {
  max-width: 29em; margin: 1.75rem 0 0;
  font-size: clamp(1.1875rem, 1.08rem + .45vw, 1.4375rem); line-height: 1.55;
}

/* Aperçu illustratif : une fenêtre sobre, trois cartes, aucune valeur */
.vm-apercu { margin: 0; }
.vm-ecran {
  background: var(--blanc, #FCFCFA);
  border: 1px solid rgba(188, 167, 133, .55);
  border-radius: 18px;
  box-shadow: 0 30px 60px -35px rgba(18, 53, 31, .35);
  overflow: hidden;
}
.vm-ecran__barre { display: flex; gap: 6px; padding: .8rem 1rem; border-bottom: 1px solid rgba(188, 167, 133, .3); }
.vm-ecran__barre span { width: 9px; height: 9px; border-radius: 50%; background: rgba(188, 167, 133, .45); }
.vm-ecran__corps {
  display: grid; gap: .9rem; padding: 1.1rem;
  grid-template-columns: 1fr 1.35fr;
  grid-template-areas: "anneau courbe" "anneau liste";
  background: var(--ivoire);
}
.vm-carte { background: var(--blanc, #FCFCFA); border: 1px solid rgba(188, 167, 133, .3); border-radius: 12px; padding: .9rem 1rem; }
.vm-carte__titre { margin: 0 0 .7rem; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--or-texte); }
.vm-carte--anneau { grid-area: anneau; display: grid; align-content: start; justify-items: center; }
.vm-carte--anneau .vm-carte__titre { justify-self: start; }
.vm-carte--courbe { grid-area: courbe; }
.vm-carte--liste { grid-area: liste; display: grid; gap: .6rem; align-content: start; }
.vm-anneau { width: 100%; max-width: 9.5rem; transform: rotate(-90deg); }
.vm-anneau circle { fill: none; stroke-width: 14; }
.vm-anneau .a1, .vm-legende .a1 { stroke: #12351F; background: #12351F; }
.vm-anneau .a2, .vm-legende .a2 { stroke: #BCA785; background: #BCA785; }
.vm-anneau .a3, .vm-legende .a3 { stroke: #4E6E58; background: #4E6E58; }
.vm-anneau .a4, .vm-legende .a4 { stroke: #DCD3C0; background: #DCD3C0; }
.vm-legende { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; width: 100%; }
.vm-legende li { position: relative; height: 7px; border-radius: 4px; background: none !important; }
.vm-legende li::before { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: inherit; }
.vm-legende li::after { content: ""; position: absolute; left: 14px; right: 18%; top: 2px; height: 3px; border-radius: 2px; background: rgba(32, 38, 34, .12); }
.vm-legende .a1::before { background: #12351F; } .vm-legende .a2::before { background: #BCA785; }
.vm-legende .a3::before { background: #4E6E58; } .vm-legende .a4::before { background: #DCD3C0; }
.vm-courbe { display: block; width: 100%; height: 5.5rem; }
.vm-courbe__aire { fill: rgba(188, 167, 133, .18); }
.vm-courbe__ligne { fill: none; stroke: #12351F; stroke-width: 2; vector-effect: non-scaling-stroke; }
.vm-ligne { display: block; height: 6px; width: var(--l); border-radius: 3px; background: rgba(32, 38, 34, .1); }
.vm-apercu__legende { margin-top: .9rem; font-size: .9375rem; font-style: italic; text-align: center; color: var(--or-texte); }
@media (max-width: 29.99rem) {
  .vm-ecran__corps { grid-template-columns: 1fr 1fr; grid-template-areas: "anneau courbe" "liste liste"; padding: .8rem; gap: .7rem; }
  .vm-carte { padding: .75rem .8rem; }
  .vm-courbe { height: 4.5rem; }
}

/* M02 — Deux accès -------------------------------------------------------- */
.vm-niveaux__grille { display: grid; border-top: 1px solid rgba(188, 167, 133, .45); }
@media (min-width: 52rem) { .vm-niveaux__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vm-niveau { display: grid; align-content: start; gap: 1rem; padding-block: 2rem; border-bottom: 1px solid rgba(188, 167, 133, .45); }
@media (min-width: 52rem) {
  .vm-niveau { padding: 2.5rem clamp(2rem, 4vw, 3.5rem) 2.5rem 0; border-bottom: 0; }
  .vm-niveau + .vm-niveau { padding-left: clamp(2rem, 4vw, 3.5rem); padding-right: 0; border-left: 1px solid rgba(188, 167, 133, .45); }
}
.vm-niveau__titre { margin: 0; font-family: var(--f-titre); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: 1.05; color: var(--ivoire); }
.vm-niveau p { margin: 0; max-width: 30em; color: rgba(247, 246, 241, .9); }

/* M03 — En développement -------------------------------------------------- */
.vm-dev__cadre { max-width: 44rem; text-align: center; }
.vm-dev__cadre .texte { margin-top: 1.25rem; font-style: italic; }

/* V2 PC — repère doré aligné sur les autres pages (même taille, casse normale,
   même marge gauche et même distance sous le bandeau). Mobile inchangé. */
@media (min-width: 64rem) {
  .vm-ouverture { padding-top: 4rem; }
  .vm-ouverture__grille { align-items: start; }
  .vm-ouverture__texte > .label { font-size: 1rem; letter-spacing: .12em; text-transform: none; margin: 0 0 1rem; line-height: 1.6; }
}