/* Fenetre « Particulier ou professionnel ? » (maquette visuelle, 08/10/2026).
   Aucun style en ligne (CSP) : tout passe par ces classes. */
.profil-voile{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(14,39,66,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s;
}
.profil-voile.is-ouvert{ opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s; }
.profil-carte{
  position:relative; width:min(100%,560px); max-height:calc(100vh - 40px); overflow:auto;
  background:#fff; color:var(--ink); border-radius:22px; padding:34px 32px 24px; text-align:center;
  border-top:6px solid var(--water); box-shadow:0 30px 70px -20px rgba(14,39,66,.6);
  opacity:0; transform:translateY(28px) scale(.97);
  transition:opacity .55s cubic-bezier(.22,.8,.3,1) .08s, transform .6s cubic-bezier(.22,.8,.3,1) .08s;
}
.is-ouvert .profil-carte{ opacity:1; transform:none; }
.profil-mascotte{ width:72px; height:72px; margin:-6px auto 6px; display:block; }
.profil-eyebrow{ margin:0 0 6px; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--water); }
.profil-titre{ margin:0 0 12px; font-family:var(--display); font-weight:600; font-size:26px; line-height:1.2; color:var(--ink); }
.profil-texte{ margin:0 auto 22px; max-width:44ch; font-size:16px; line-height:1.55; color:var(--ink-soft); }
.profil-choix{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.profil-btn{
  appearance:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 14px 18px;
  font:inherit; color:var(--ink); background:var(--paper); border:2px solid var(--line); border-radius:16px; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.profil-btn:hover, .profil-btn:focus-visible{ transform:translateY(-3px); border-color:var(--water); background:#fff; box-shadow:0 14px 28px -16px rgba(31,90,168,.55); }
.profil-btn:focus-visible{ outline:3px solid var(--water-dark); outline-offset:2px; }
.profil-btn{ position:relative; user-select:none; }
.profil-btn[aria-pressed="true"]{ border-color:var(--water); background:#fff; box-shadow:0 0 0 3px rgba(31,90,168,.22), 0 14px 28px -16px rgba(31,90,168,.55); }
.profil-btn[aria-pressed="true"]::after{
  content:"\2713"; position:absolute; top:10px; right:10px; width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; background:var(--water); color:#fff; font-size:14px; font-weight:800; line-height:1;
}
.profil-btn-ico{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--foam); color:var(--water-dark); }
.profil-btn-ico svg{ width:26px; height:26px; }
.profil-btn-txt{ display:flex; flex-direction:column; gap:2px; }
.profil-btn-nom{ font-family:var(--display); font-weight:600; font-size:20px; }
.profil-btn-detail{ font-size:14px; line-height:1.35; color:var(--ink-soft); }
.profil-valider{ display:flex; align-items:center; justify-content:center; text-align:center; margin:20px auto 0; min-width:220px; padding-left:32px; padding-right:32px; transition:opacity .2s ease, transform .15s ease; }
.profil-valider:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.profil-astuce{ margin:10px 0 0; font-size:13px; color:var(--ink-soft); }
.profil-note{ margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.profil-passer{
  appearance:none; margin-top:10px; padding:8px 12px; background:none; border:0; font:inherit; font-size:14px; font-weight:700;
  color:var(--water); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.profil-passer:hover{ color:var(--water-dark); }
.profil-passer:focus-visible{ outline:2px solid var(--water-dark); outline-offset:2px; border-radius:6px; }
@media (max-width:520px){
  .profil-carte{ padding:28px 18px 18px; border-radius:18px; }
  .profil-titre{ font-size:22px; }
  .profil-choix{ grid-template-columns:1fr; gap:10px; }
  .profil-btn{ flex-direction:row; text-align:left; gap:14px; padding:14px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .profil-voile, .profil-carte, .profil-btn{ transition:opacity .2s ease !important; transform:none !important; }
}