/* Portail client : theme de base (memes couleurs que le Cockpit). Les motifs viennent de /commun/design.css. */
:root {
  --bg: #000000; --surface: #1C1C1C; --surface-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.05);
  --text: #fff; --text-muted: #D8D1C4; --text-faint: rgba(216,209,196,0.62); --yellow: #F9C041;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text); -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', -apple-system, Segoe UI, Arial, sans-serif;
  background:
    radial-gradient(circle at 18% -8%, rgba(var(--accent-rgb,249,192,65),0.16), transparent 42%),
    radial-gradient(circle at 92% 0%, rgba(var(--accent-rgb,249,192,65),0.07), transparent 38%),
    var(--bg);
  background-attachment: fixed;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px max(20px, calc((100vw - 940px) / 2)); border-bottom: 1px solid var(--border-soft);
}
.marque { display: flex; align-items: center; padding: 6px 0; }
.marque img { display: block; height: 30px; width: auto; }
.topbar-droite { display: flex; align-items: center; gap: 18px; color: var(--text-muted); font-size: 14px; }
.topbar-droite form { margin: 0; }
button.lien { background: none; border: 0; color: var(--text-muted); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
button.lien:hover { color: var(--yellow); }

.main { position: relative; max-width: 940px; margin: 0 auto; padding: 44px 20px 80px; }
.page-title { font-size: 34px; font-weight: 700; letter-spacing: -0.8px; margin: 0 0 8px; }
.page-subtitle { color: var(--text-muted); font-size: 15px; line-height: 22px; margin: 0 0 30px; max-width: 540px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px; margin-bottom: 18px; }
.panel h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel h2::before { content: ''; position: absolute; }
.sous-titre { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin: 26px 0 10px; font-weight: 600; }
.compteur { color: var(--text-muted); font-size: 13px; margin: -4px 0 16px; }
.vide { color: var(--text-faint); font-size: 14px; }

.tag { font-style: normal; font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; background: var(--surface-2); color: var(--text-faint); padding: 3px 9px; border-radius: 20px; margin-left: 8px; font-weight: 600; border: 1px solid var(--border); }
.tag--client, .tag--bloquant { color: var(--yellow); border-color: rgba(var(--accent-rgb,249,192,65),0.4); background: rgba(var(--accent-rgb,249,192,65),0.08); }

/* Jalons */
.jalons, .documents { list-style: none; margin: 0; padding: 0; }
.jalon { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.jalon:last-child { border-bottom: 0; }
.jalon-point { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-faint); flex-shrink: 0; position: relative; }
.jalon--fait { color: var(--text-muted); }
.jalon--fait .jalon-point { background: var(--yellow); border-color: var(--yellow); }
.jalon--fait .jalon-point::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.jalon time { color: var(--text-faint); font-size: 12px; margin-left: 8px; }
.jalon .tag { margin-left: auto; }

/* Documents */
.document { padding: 16px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.document:last-child { border-bottom: 0; }
.document strong { font-weight: 500; font-size: 15px; }
.document form { margin: 0; }
.fichiers { display: flex; flex-direction: column; gap: 4px; }
.fichier { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.fichier::before { content: '↳ '; color: var(--yellow); }
.fichier:hover { color: var(--yellow); }

/* Boutons et formulaires */
.bouton { text-decoration: none; display: inline-block; cursor: pointer; border: 0; border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 600; font-family: inherit; color: #000000; background: var(--yellow); width: fit-content; }
.bouton:hover { filter: brightness(1.06); }
.bouton--discret { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 500; padding: 8px 16px; }
.bouton--discret:hover { border-color: var(--yellow); color: var(--yellow); filter: none; }
.formulaire { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); }
.formulaire input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px 14px; font: 15px inherit; font-family: inherit; }
.formulaire input:focus { outline: 0; border-color: var(--yellow); }
.erreur { background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.35); color: #ffb3b3; padding: 12px 16px; border-radius: 10px; font-size: 14px; max-width: 520px; }
.connexion { max-width: 480px; margin: 40px auto; }

.panel--repli summary { cursor: pointer; list-style: none; }
.panel--repli summary::-webkit-details-marker { display: none; }
.panel--repli summary h2 { margin: 0; }
.panel--repli[open] summary h2 { margin-bottom: 14px; }

@media (max-width: 640px) {
  .main { padding: 28px 16px 60px; }
  .page-title { font-size: 27px; }
  .panel { padding: 20px 18px; }
  .jalon { flex-wrap: wrap; }
}

/* Facturation */
.factures { list-style: none; margin: 0; padding: 0; }
.facture { padding: 18px 0; border-bottom: 1px solid var(--border-soft); }
.facture:last-child { border-bottom: 0; }
.facture-haut { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.facture-haut strong { display: block; font-weight: 500; font-size: 15px; }
.facture small { color: var(--text-faint); font-size: 12.5px; }
.facture-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.facture-droite .tag { margin-left: 0; }
.facture-montant { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.facture-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tag--statut-attente { color: var(--yellow); border-color: rgba(var(--accent-rgb,249,192,65),0.4); background: rgba(var(--accent-rgb,249,192,65),0.08); }
.tag--statut-retard { color: #ff9a8f; border-color: rgba(255,120,100,0.45); background: rgba(255,120,100,0.1); }
.tag--statut-payee { color: #C9B37E; border-color: rgba(201,179,126,0.35); background: rgba(201,179,126,0.08); }
.facture--payee .facture-montant { color: var(--text-muted); }
@media (max-width: 640px) { .facture-droite { align-items: flex-start; } }

/* Avancement global et fil des etapes */
.jauge { margin: 0 0 26px; }
.jauge-texte { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.jauge-texte strong { font-size: 28px; letter-spacing: -0.6px; color: var(--yellow); }
.jauge-texte > span { color: var(--text-muted); font-size: 14px; }
.jauge-barre { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--border-soft); }
.previsions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; }
.prevision { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.prevision-libelle { color: var(--text-muted); font-size: 13px; }
.prevision strong { font-size: 20px; letter-spacing: -0.3px; color: var(--yellow); }
@media (max-width: 560px) { .previsions { grid-template-columns: 1fr; } }
.jauge-barre div { height: 100%; background: var(--yellow); border-radius: 6px; }
.phase h2 { align-items: center; }
.phase-num { color: var(--yellow); font-weight: 700; letter-spacing: .5px; font-size: 14px; }
.phase-compte { margin-left: auto; color: var(--text-faint); font-size: 13px; font-weight: 500; }
.phase--actif { border-color: rgba(var(--accent-rgb,249,192,65),0.45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb,249,192,65),0.08), 0 14px 40px rgba(var(--accent-rgb,249,192,65),0.05); }
.phase--avenir { opacity: .72; }
.tag--phase-actif { color: #000000; background: var(--yellow); border-color: var(--yellow); }
.tag--phase-fini { color: #C9B37E; border-color: rgba(201,179,126,.35); background: rgba(201,179,126,.08); }

/* Onglets */
.onglets { display: flex; gap: 6px; background: var(--surface); padding: 5px; border-radius: 999px; border: 1px solid var(--border); }
.onglet { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: 999px; display: flex; align-items: center; gap: 8px; transition: color .15s, background .15s; }
.onglet:hover { color: var(--text); }
.onglet--actif { background: var(--yellow); color: #000000; font-weight: 600; }
.onglet-alerte { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e5483b; color: #fff; font-size: 12px; font-weight: 800; animation: pulse 1.8s ease-out infinite; }

/* Alerte de reglement */
.alerte { display: flex; align-items: center; gap: 20px; border-radius: 18px; padding: 22px 26px; margin: 0 0 30px; border: 1px solid; }
.alerte--attente { background: rgba(var(--accent-rgb,249,192,65),0.1); border-color: rgba(var(--accent-rgb,249,192,65),0.6); }
.alerte--retard { background: rgba(229,72,59,0.12); border-color: rgba(229,72,59,0.7); }
.alerte-icone { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff; background: #e5483b; animation: pulse 1.8s ease-out infinite; }
.alerte--attente .alerte-icone { background: var(--yellow); color: #000000; }
.alerte-texte { flex: 1; }
.alerte-texte strong { font-size: 17px; display: block; margin-bottom: 4px; }
.alerte-texte p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 21px; }
.bouton--alerte { flex-shrink: 0; background: #e5483b; color: #fff; padding: 13px 26px; font-size: 15px; }
.alerte--attente .bouton--alerte { background: var(--yellow); color: #000000; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,59,0.55); } 70% { box-shadow: 0 0 0 12px rgba(229,72,59,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,59,0); } }
.alerte--attente .alerte-icone { animation-name: pulse-jaune; }
@keyframes pulse-jaune { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb,249,192,65),0.55); } 70% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb,249,192,65),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb,249,192,65),0); } }
@media (prefers-reduced-motion: reduce) { .alerte-icone, .onglet-alerte { animation: none; } }
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .onglets { order: 3; width: 100%; justify-content: center; }
  .alerte { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .bouton--alerte { width: 100%; text-align: center; }
}

/* Jalon en cours : le premier non valide de l'etape en cours */
.jalon--courant { font-weight: 600; }
.jalon--courant .jalon-point { border-color: var(--yellow); }
.jalon--courant .jalon-point::after { content: ''; position: absolute; inset: 3px; border: 0; transform: none; border-radius: 50%; background: var(--yellow); animation: respire 2.2s ease-in-out infinite; }
.tag--encours { color: #000000; background: var(--yellow); border-color: var(--yellow); }

/* Mon compte */
.succes { background: rgba(var(--accent-rgb,249,192,65),0.1); border: 1px solid rgba(var(--accent-rgb,249,192,65),0.4); color: var(--yellow); padding: 12px 16px; border-radius: 10px; font-size: 14px; max-width: 520px; }
.compte-bloc .formulaire small { color: var(--text-faint); font-size: 12px; }
.compte-lecture { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 24px; }
.compte-lecture div { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; }
.compte-lecture dt { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; }
.compte-lecture dd { margin: 0; font-size: 15px; }
.compte-lecture code { font-family: inherit; color: var(--yellow); }
.compte-texte { color: var(--text-muted); font-size: 15px; line-height: 23px; margin: 0 0 16px; }

/* Personnalisation et pastille du client */
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb,249,192,65),.55); background: rgba(var(--accent-rgb,249,192,65),.1); color: var(--yellow); font-size: 14px; font-weight: 700; }
.avatar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.perso .symbole { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: 74px; }
.perso-choix input { position: absolute; opacity: 0; pointer-events: none; }
.perso .symbole em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.perso .symbole input:checked ~ em { color: var(--text); font-weight: 600; }
.symbole span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 3px var(--surface); transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s; }
.symbole span { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); border-radius: 14px; font-weight: 700; font-size: 18px; }
.symbole svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.symbole input:checked ~ span { border-color: var(--yellow); color: var(--yellow); background: rgba(var(--accent-rgb,249,192,65),.1); }
.perso-choix input:focus-visible ~ span { outline: 2px solid var(--yellow); outline-offset: 3px; }
.perso .bouton { margin-top: 18px; }
@media (max-width: 640px) { .nom-client { display: none; } }

.perso-choix { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.perso-choix--large { gap: 14px; }
.perso-phrase { width: 100%; max-width: 520px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px 14px; font: 15px inherit; font-family: inherit; }
.perso-phrase:focus { outline: 0; border-color: var(--yellow); }
.perso-aide { display: block; margin-top: 8px; color: var(--text-faint); font-size: 12px; }
.ambiance { position: relative; display: flex; flex-direction: column; gap: 6px; width: 190px; cursor: pointer; }
.ambiance input { position: absolute; opacity: 0; pointer-events: none; }
.ambiance strong { font-size: 14px; font-weight: 600; }
.ambiance em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.ambiance-vignette { height: 70px; border-radius: 12px; border: 2px solid var(--border); background: #000; transition: border-color .2s, transform .2s cubic-bezier(.34,1.56,.64,1); }
.ambiance-vignette--lueurs { background: radial-gradient(circle at 20% 0%, rgba(249,192,65,.45), transparent 60%), radial-gradient(circle at 90% 10%, rgba(249,192,65,.18), transparent 55%), #000; }
.ambiance:hover .ambiance-vignette { transform: scale(1.03); }
.ambiance input:checked ~ .ambiance-vignette { border-color: var(--yellow); }
.ambiance input:focus-visible ~ .ambiance-vignette { outline: 2px solid var(--yellow); outline-offset: 3px; }
.phrase-accueil { margin: -18px 0 28px; font-size: 16px; font-style: italic; color: var(--yellow); max-width: 560px; }

/* Ambiance sobre : fond noir uni. */
html[data-ambiance="sobre"] body { background: #000; }
html[data-ambiance="sobre"] body::before, html[data-ambiance="sobre"] body::after { display: none; }
.mention { margin: 22px 0 0; font-size: 12px; }
.mention a { color: var(--text-faint); text-decoration: none; }
.mention a:hover { color: var(--yellow); text-decoration: underline; }
.confidentialite h2 { margin-top: 26px; }
.confidentialite h2:first-child { margin-top: 0; }
.confidentialite p, .confidentialite li { color: var(--text-muted); font-size: 15px; line-height: 24px; }
.confidentialite ul { padding-left: 20px; margin: 0; }
.confidentialite li { margin-bottom: 8px; }
.confidentialite strong { color: var(--text); }