/* =========================================================
   Revisly — page « Profil »
   (se charge par-dessus dashboard.css, qui fournit l'ossature
   et les éléments partagés : en-tête, puces, état vide)
   ========================================================= */

.profil{max-width:760px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:18px}

/* ---------- carte d'identité ---------- */
.identite{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--surface-card);border:.8px solid var(--surface-border);
  border-radius:16px;padding:22px;
}
.identite .grand{
  flex:none;width:72px;height:72px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;font-weight:700;color:#fff;background:var(--sky);
}
.identite .qui{min-width:0;flex:1}
.identite h2{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.identite .mail{margin-top:3px;font-size:.875rem;color:var(--ink-tertiary)}
.identite .badges{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.badge{
  padding:2px 10px;border-radius:999px;font-size:.6875rem;font-weight:600;
  background:var(--surface-soft);border:.8px solid var(--surface-border);color:var(--ink-secondary);
}
.badge.sky{background:var(--sky-tint);border-color:var(--sky);color:var(--sky-soft)}

/* ---------- sections ---------- */
.bloc{background:var(--surface-card);border:.8px solid var(--surface-border);border-radius:16px;padding:22px}
.bloc > h3{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.bloc > .aide{margin-top:5px;font-size:.8125rem;color:var(--ink-tertiary)}
.bloc .corps{margin-top:18px}

/* ---------- champs ---------- */
.grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ label{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}
.champ .boite{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  border-radius:10px;padding:9px 12px;min-height:40px;
  transition:border-color .18s,box-shadow .18s;
}
.champ .boite:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(26,122,184,.22)}
.champ input,.champ select{
  flex:1;min-width:0;background:none;border:0;outline:0;padding:0;margin:0;
  color:var(--ink-primary);font:inherit;font-size:.875rem;
}
.champ select{appearance:none;cursor:pointer}
.champ select option{background:var(--surface-card);color:var(--ink-primary)}
.champ input::placeholder{color:var(--ink-tertiary)}
.champ .boite.fige{opacity:.6}
.champ .note{font-size:.75rem;color:var(--ink-tertiary)}

.actions-bloc{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.actions-bloc .etat{font-size:.8125rem;color:var(--moss)}

/* ---------- interrupteurs ---------- */
.lignes{display:flex;flex-direction:column}
.ligne{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;border-bottom:.8px solid var(--surface-line);
}
.ligne:first-child{padding-top:0}
.ligne:last-child{border-bottom:0;padding-bottom:0}
.ligne .txt{flex:1;min-width:0}
.ligne .txt b{display:block;font-size:.9375rem;font-weight:500}
.ligne .txt span{display:block;margin-top:3px;font-size:.8125rem;color:var(--ink-tertiary)}
.bascule{
  flex:none;position:relative;width:44px;height:26px;border-radius:999px;
  background:var(--track);border:.8px solid var(--surface-border);
  transition:background .2s,border-color .2s;
}
.bascule::after{
  content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:999px;
  background:var(--ink-mute);transition:transform .2s,background .2s;
}
.bascule.on{background:rgba(26,122,184,.35);border-color:var(--sky)}
.bascule.on::after{transform:translateX(18px);background:var(--sky-soft)}

/* ---------- abonnement ---------- */
.offre{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.offre .infos{flex:1;min-width:220px}
.offre .jauge{margin-top:12px;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.offre .jauge i{display:block;height:100%;border-radius:999px;background:var(--sky);transition:width .5s ease}
.offre .chiffre{margin-top:8px;font-size:.8125rem;color:var(--ink-tertiary)}
.consos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.conso{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 10px}
.conso .t{font-size:.8125rem;color:var(--ink-secondary)}
.conso b{font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}
.conso .jauge{grid-column:1/-1;margin-top:2px}
.offre-actions{display:flex;flex-direction:column;gap:8px}
.etat-suppr{margin-top:8px;font-weight:600;color:var(--ink-ko)}
.etat-suppr:empty{display:none}
.boite input[readonly]{opacity:.7;cursor:default}

/* ---------- statistiques ---------- */
.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tuile{background:var(--surface-soft);border:.8px solid var(--surface-border);border-radius:12px;padding:14px 12px;text-align:center}
.tuile b{display:block;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tuile span{display:block;margin-top:3px;font-size:.6875rem;color:var(--ink-tertiary)}

/* ---------- zone sensible ---------- */
.bloc.sensible{border-color:rgba(207,86,71,.35)}
.bloc.sensible > h3{color:var(--ink-ko)}
.confirmation{
  margin-top:14px;background:rgba(207,86,71,.1);border:.8px solid rgba(207,86,71,.45);
  border-radius:12px;padding:16px;
}
.confirmation p{font-size:.875rem;line-height:1.6;color:var(--ink-secondary)}
.confirmation .saisie{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.confirmation .saisie .boite{flex:1;min-width:200px}
.btn-danger{background:rgba(207,86,71,.18);border:.8px solid rgba(207,86,71,.5);color:var(--ink-ko)}
.btn-danger:hover{background:rgba(207,86,71,.26)}
.btn-danger:disabled{opacity:.45;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .bascule,.bascule::after,.offre .jauge i{transition:none}
}

@media (max-width:820px){
  .grille{grid-template-columns:1fr}
  .tuiles{grid-template-columns:repeat(2,1fr)}
  .consos{grid-template-columns:1fr}
  .offre-actions{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .identite{padding:18px}
  .identite .grand{width:56px;height:56px;font-size:1.375rem}
  .bloc{padding:18px}
}