/* Interface commune des générateurs de formalités (pages G2 + portail).
   Chargée en <link rel="stylesheet" href="../css/formalites.css?v=N"> :
   incrémenter N sur toutes les pages à chaque modification.
   Les documents eux-mêmes (.doc-*) ne sont PAS stylés ici : ils viennent de
   DOC_CSS dans js/formalites-core.js, partagé avec le PDF.

   Direction : « le pupitre du greffe ». La feuille A4 est le héros, posée sur
   un pupitre gris ; le formulaire est l'outil, coiffé du bandeau outremer
   Danaïdes (couleur du logo). Un seul ornement : le point ovale du « d »,
   sous l'onglet actif. */

:root {
  --outremer: #2A1AD8;        /* logo Danaïdes : marque, action principale, focus */
  --outremer-fonce: #1D10A8;
  --outremer-pale: #ECEAFD;
  --encre: #1B1A3A;           /* texte */
  --encre-douce: #57567A;     /* libellés, aides (≥ 6:1 sur blanc) */
  --filet: #D4D3E3;
  --bord-champ: #B4B3CB;
  --papier: #FFFFFF;
  --carte: #F6F6FB;
  --pupitre: #DCDCE6;
  --ok: #2E7D4F;
  --alerte: #9A5B00;
  --erreur: #B3261E;
  --police: 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--police); font-size: 14px; line-height: 1.4; color: var(--encre); background: var(--pupitre); }
/* Google Places : la liste déroulante doit passer au-dessus des panneaux */
.pac-container { z-index: 9999 !important; font-family: var(--police); }

:focus-visible { outline: 3px solid var(--outremer); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Mise en page : formulaire | pupitre ─────────────────────────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }
.form-panel { width: 440px; min-width: 440px; background: var(--papier); overflow-y: auto; border-right: 1px solid var(--filet); }
.form-body { padding: 18px 22px 40px; }

/* ── Bandeau de marque ───────────────────────────────────────────────────── */
.brand-bar { position: sticky; top: 0; z-index: 10; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--outremer); color: #fff; }
.brand-bar .marque { width: 34px; height: 34px; flex: none; }
.brand-bar nav { flex: 1; min-width: 0; font-size: 16px; line-height: 1.25; }
.brand-bar nav a { color: #fff; text-decoration: none; opacity: .8; }
.brand-bar nav a:hover { opacity: 1; text-decoration: underline; }
.brand-bar nav .sep { opacity: .55; margin: 0 6px; }
.brand-bar nav strong { font-weight: 700; }
.brand-bar :focus-visible { outline-color: #fff; }
.btn-nouveau { flex: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.btn-nouveau:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.form-intro { font-size: 13px; color: var(--encre-douce); margin-bottom: 16px; }
.form-intro b { color: var(--encre); }

/* ── Sélecteur de forme (commande segmentée) ─────────────────────────────── */
.type-selector { display: flex; border: 1px solid var(--outremer); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.type-btn { flex: 1; padding: 9px 4px; border: none; border-left: 1px solid var(--outremer); background: var(--papier); color: var(--outremer); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.type-btn:first-child { border-left: none; }
.type-btn:hover:not(.active) { background: var(--outremer-pale); }
.type-btn.active { background: var(--outremer); color: #fff; }
.type-btn:focus-visible { outline-offset: -4px; outline-color: var(--outremer-fonce); }
.type-btn.active:focus-visible { outline-color: #fff; }

/* ── Sections et champs ──────────────────────────────────────────────────── */
.section-title { font-size: 17px; font-weight: 700; color: var(--encre); margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--filet); }
.field { display: block; margin-bottom: 12px; }
.field > span, .field-label { display: block; font-size: 13px; color: var(--encre-douce); margin-bottom: 4px; }
input[type="text"], input[type="date"], input[type="number"], input[type="time"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bord-champ); border-radius: 4px;
  background: var(--papier); color: var(--encre); font: inherit; font-size: 14px;
}
select { appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357567A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--encre-douce); }
input:focus, select:focus, textarea:focus { border-color: var(--outremer); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--outremer); outline-offset: 0; }
.row { display: flex; gap: 10px; align-items: flex-end; }   /* champs alignés même si un libellé passe sur 2 lignes */
.row > .field { flex: 1; min-width: 0; }
.hint { font-size: 12px; color: var(--encre-douce); line-height: 1.45; margin: 2px 0 10px; }
.btn-add + .hint { margin-top: 8px; }

/* Boutons radio (personne physique / société, variantes…) */
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.radio-row label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--encre); cursor: pointer; }
.radio-row input[type="radio"] { width: 16px; height: 16px; accent-color: var(--outremer); }

/* ── Cartes répétables (associés, dirigeants, cessions…) ─────────────────── */
.shareholder-card { background: var(--carte); border: 1px solid var(--filet); border-radius: 6px; padding: 12px 12px 2px; margin-bottom: 10px; }
.shareholder-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.shareholder-num { font-size: 14px; font-weight: 700; color: var(--outremer); }
.btn-remove { background: none; border: none; color: var(--encre-douce); cursor: pointer; font: inherit; font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 4px; }
.btn-remove:hover { color: var(--erreur); background: #fbeceb; }
.btn-add { display: block; width: 100%; margin-top: 2px; padding: 9px 12px; border: 1px dashed var(--outremer); border-radius: 4px; background: transparent; color: var(--outremer); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-add:hover { background: var(--outremer-pale); border-style: solid; }

/* ── Pré-remplissage SIREN ───────────────────────────────────────────────── */
.siren-row { display: flex; gap: 8px; }
.siren-row input { flex: 1; min-width: 0; }
.btn-siren { flex: none; background: var(--outremer); color: #fff; border: none; border-radius: 4px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-siren:hover { background: var(--outremer-fonce); }
.btn-siren:disabled { background: var(--bord-champ); cursor: wait; }
.siren-status { font-size: 13px; margin-top: 6px; display: none; line-height: 1.45; }
.siren-status.show { display: block; }
.siren-status.loading { color: var(--encre-douce); }
.siren-status.ok { color: var(--ok); }
.siren-status.warn { color: var(--alerte); }
.siren-status.error { color: var(--erreur); }

/* ── Pupitre : barre d'onglets + feuille ─────────────────────────────────── */
.preview-panel { flex: 1; overflow-y: auto; background: var(--pupitre); }
.preview-bar { position: sticky; top: 0; z-index: 5; min-height: 64px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 28px; background: rgba(220, 220, 230, .94); border-bottom: 1px solid #C8C8D6; }
.preview-tab { position: relative; background: none; border: none; border-radius: 4px; padding: 9px 12px 11px; font: inherit; font-size: 15px; color: var(--encre-douce); cursor: pointer; }
.preview-tab:hover:not(.active) { color: var(--encre); background: rgba(27, 26, 58, .06); }
.preview-tab.active { color: var(--encre); font-weight: 700; }
/* le point ovale du « d » Danaïdes marque le document affiché */
.preview-tab.active::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 9px; height: 5px; margin-left: -4.5px; border-radius: 50%; background: var(--outremer); }
.btn-download { margin-left: auto; background: var(--outremer); color: #fff; border: none; border-radius: 4px; padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.btn-download:hover { background: var(--outremer-fonce); }
.preview-body { padding: 32px 28px 64px; }
.doc-wrapper { display: none; }
.doc-wrapper.active { display: block; }
/* Feuille A4 à 96 dpi (794 px) avec les marges du PDF (20 mm × 15 mm) :
   la preview passe à la ligne aux mêmes endroits que le PDF. */
.document { background: var(--papier); width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto; padding: 57px 76px; box-shadow: 0 1px 2px rgba(27, 26, 58, .14), 0 10px 30px rgba(27, 26, 58, .12); }

/* ── Écrans étroits : formulaire au-dessus de l'aperçu ───────────────────── */
@media (max-width: 960px) {
  .app { flex-direction: column; height: auto; overflow: visible; }
  .form-panel { width: auto; min-width: 0; overflow: visible; border-right: none; border-bottom: 1px solid var(--filet); }
  .preview-panel { overflow: visible; }
  .preview-bar { padding: 8px 16px; }
  .preview-body { padding: 16px; }
  .document { padding: 32px 24px; min-height: 0; }
}

/* ── Portail ─────────────────────────────────────────────────────────────── */
.portail { min-height: 100vh; background: var(--papier); }
.portail .brand-bar { position: static; align-items: center; gap: 18px; padding: 34px max(22px, calc((100vw - 880px) / 2 + 22px)) 30px; }
.portail .brand-bar .marque { width: 64px; height: 64px; }
.portail h1 { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.portail h1 small { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0; opacity: .85; margin-bottom: 4px; }
.portail main { max-width: 880px; margin: 0 auto; padding: 8px 22px 64px; }
.portail-intro { font-size: 16px; color: var(--encre-douce); max-width: 60ch; margin: 22px 0 18px; }
.registre { list-style: none; border-top: 1px solid var(--filet); }
.registre li { border-bottom: 1px solid var(--filet); }
.registre a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 22px 8px 22px 30px; color: inherit; text-decoration: none; }
/* le point ovale du « d » désigne la formalité survolée ou sélectionnée */
.registre a::before { content: ''; position: absolute; left: 8px; top: 33px; width: 12px; height: 7px; border-radius: 50%; background: var(--outremer); opacity: 0; }
.registre a:hover, .registre a:focus-visible { background: var(--carte); }
.registre a:hover::before, .registre a:focus-visible::before { opacity: 1; }
.registre a:hover .registre-nom { color: var(--outremer); }
.registre a:focus-visible { outline-offset: -3px; }
.registre-nom { font-size: 23px; font-weight: 700; line-height: 1.2; }
.registre-formes { grid-column: 2; grid-row: 1; align-self: center; font-size: 13px; color: var(--encre-douce); white-space: nowrap; }
.registre-docs { font-size: 15px; color: var(--encre-douce); max-width: 62ch; }
.anciennes { margin-top: 36px; font-size: 14px; color: var(--encre-douce); }
.anciennes summary { cursor: pointer; padding: 6px 0; }
.anciennes ul { list-style: none; columns: 2; margin: 8px 0 0 18px; }
.anciennes li { padding: 3px 0; }
.anciennes a { color: var(--encre-douce); }
@media (max-width: 640px) {
  .portail .brand-bar { padding: 22px; gap: 14px; }
  .portail .brand-bar .marque { width: 48px; height: 48px; }
  .portail h1 { font-size: 26px; }
  .registre a { grid-template-columns: 1fr; padding-left: 20px; }
  .registre a::before { left: 2px; width: 10px; height: 6px; top: 31px; }
  .registre-formes { grid-column: 1; grid-row: auto; }
  .anciennes ul { columns: 1; }
}