/* Section « Votre espace en ligne » des pages métier (avocats, experts-comptables, pharmaciens).
   Produite par scripts/build_pages.py (espace_en_ligne) ; même famille que les cartes ph-carte des pages métier.
   La maquette est un dessin de l’écran « Ma formation », avec des données fictives. */

/* La scène : photo du métier, maquette posée dessus. */
.es-scene { position:relative; margin:30px 0 0; padding:56px 56px 0; border-radius:28px; overflow:hidden; background:#1e1e1e; isolation:isolate; }
.es-fond { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
.es-scene::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,16,18,.08) 0%, rgba(20,16,18,.28) 100%); }
.es-scene figcaption { position:absolute; top:16px; right:20px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.88); color:var(--texte-2); font-size:11px; }

/* La fenêtre de l’application, coupée en bas par la scène. */
.es-fenetre { max-width:980px; margin:0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.6); border-bottom:0; border-radius:18px 18px 0 0; background:#fff;
  box-shadow:0 2px 4px rgba(30,30,30,.06), 0 40px 90px -30px rgba(20,10,16,.55); text-align:left; }
.es-barre { display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-bottom:1px solid #eef0f3; background:#fbfbfc; }
.es-barre i { width:10px; height:10px; border-radius:50%; background:#dcdfe4; }
.es-barre span { margin:0 auto; padding:4px 14px; border-radius:8px; background:#f3f4f6; color:var(--texte-2); font-size:12px; }
.es-appli { display:grid; grid-template-columns:200px minmax(0,1fr); }
.es-menu { padding:22px 14px; border-right:1px solid #eef0f3; background:#fcfcfd; }
.es-menu b { display:block; margin:0 10px 18px; color:var(--encre); font-size:13px; font-weight:600; }
.es-menu span { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--texte-2); font-size:13px; }
.es-menu span[data-actif] { background:var(--rose-doux); color:var(--rose-texte); font-weight:500; }
.es-menu span i { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; }
.es-menu span[data-actif] i { opacity:1; }
.es-contenu { padding:28px 32px 30px; }
.es-contenu small { color:var(--texte-2); font-size:11.5px; font-weight:500; }
.es-contenu h3 { margin:6px 0 20px; color:var(--encre); font-size:23px; font-weight:500; letter-spacing:-.035em; line-height:1.2; }
.es-reperes { display:grid; grid-template-columns:1.55fr 1fr; gap:14px; }
.es-carte { padding:18px 20px; border:1px solid #eef0f3; border-radius:14px; }
.es-carte small { display:block; margin-bottom:10px; }
.es-carte strong { display:block; color:var(--encre); font-size:18px; font-weight:500; letter-spacing:-.03em; }
.es-carte p { margin:4px 0 0; color:var(--texte-2); font-size:12.5px; }
.es-carte em { display:inline-flex; margin-top:14px; padding:8px 14px; border-radius:999px; background:var(--encre); color:#fff; font-size:12px; font-style:normal; font-weight:500; }
.es-chiffre { color:var(--encre); font-size:30px; font-weight:500; letter-spacing:-.05em; line-height:1; }
.es-chiffre span { color:var(--texte-2); font-size:13px; letter-spacing:0; }
.es-jauge { height:5px; margin-top:18px; border-radius:5px; background:#f1f2f4; overflow:hidden; }
.es-jauge span { display:block; height:100%; border-radius:5px; background:var(--rose); }
.es-seances { display:grid; gap:10px; margin-top:14px; }
.es-seance { display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:16px 20px; border:1px solid #eef0f3; border-radius:14px; }
.es-quand { display:flex; gap:10px; align-items:flex-start; }
.es-quand b { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; border-radius:8px; background:#f3f4f6; color:var(--encre); font-size:11px; font-weight:500; }
.es-quand span { color:var(--encre); font-size:12.5px; font-weight:500; line-height:1.35; }
.es-seance h4 { margin:0; color:var(--encre); font-size:14px; font-weight:550; letter-spacing:-.015em; }
.es-seance p { margin:6px 0 0; padding-left:10px; border-left:2px solid var(--rose); color:var(--encre); font-size:12px; }
.es-travaux { margin:12px 0 0; padding:0; list-style:none; border-top:1px solid #eef0f3; }
.es-travaux li { display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid #eef0f3; color:var(--encre); font-size:12.5px; }
.es-travaux li:last-child { border-bottom:0; padding-bottom:0; }
.es-travaux i { display:grid; place-items:center; width:18px; height:18px; border:1.5px solid #d4d7dd; border-radius:6px; }
.es-travaux li[data-fait] { color:var(--texte-2); }
.es-travaux li[data-fait] i { border-color:var(--encre); background:var(--encre); }
.es-travaux li[data-fait] i::after { content:""; width:7px; height:4px; margin-top:-2px; border:solid #fff; border-width:0 0 1.6px 1.6px; transform:rotate(-45deg); }
.es-travaux em { color:var(--texte-2); font-size:11.5px; font-style:normal; }
.es-travaux li:not([data-fait]) em { padding:5px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px #d4d7dd; color:var(--encre); }

/* Les quatre cartes, photo en tête. */
.es-atouts { grid-template-columns:repeat(4,minmax(0,1fr)); }
.es-atout { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.es-atout img { display:block; width:100%; height:auto; aspect-ratio:4/3.4; object-fit:cover; }
.es-atout h3 { margin:20px 22px 0; font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1.3; }
.es-atout p { margin:8px 22px 24px; color:var(--texte-2); font-size:13.5px; line-height:1.6; }

/* L’offre en ligne, quand le métier en a une (avocats). */
.es-en-ligne { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:16px; }
.es-en-ligne h3 { margin:0; font-size:17px; font-weight:500; letter-spacing:-.02em; }
.es-en-ligne p { max-width:68ch; margin:6px 0 0; color:var(--texte-2); font-size:13.5px; line-height:1.6; }
.es-en-ligne .btn-secondaire { flex-shrink:0; white-space:nowrap; }

@media (max-width: 960px) {
  .es-scene { padding:32px 24px 0; }
  .es-appli { grid-template-columns:1fr; }
  .es-menu { display:none; }
  .es-atouts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .es-scene { margin-top:22px; padding:20px 14px 0; border-radius:22px; }
  .es-scene figcaption { position:static; display:block; margin:0 -14px; padding:10px 14px; border-radius:0; background:#fff; text-align:center; }
  .es-barre span { display:none; }
  .es-contenu { padding:20px 16px 20px; }
  .es-contenu h3 { font-size:19px; }
  .es-reperes { grid-template-columns:1fr; }
  .es-seance { grid-template-columns:1fr; gap:10px; }
  .es-seance:nth-child(2) { display:none; }
  .es-atouts { grid-template-columns:1fr 1fr; gap:12px; }
  .es-atout h3 { margin:14px 14px 0; font-size:14.5px; }
  .es-atout p { margin:6px 14px 16px; font-size:12.5px; }
  .es-en-ligne { flex-direction:column; align-items:flex-start; }
}