/* =====================================================================
   MANIÈRE CUT PLUS — ESPACE PARTENAIRE
   ---------------------------------------------------------------------
   Page autonome : elle ne dépend d'aucune feuille de l'application.
   Un fournisseur y arrive par un lien WhatsApp, souvent sur un téléphone
   d'entrée de gamme, parfois en 3G. Elle doit s'ouvrir vite et se
   remplir au pouce — d'où les champs pleine largeur et les cibles
   larges.
   ===================================================================== */

:root {
  --pa-fond:      #0C0C0E;
  --pa-surface:   #16161A;
  --pa-surface-2: #1D1D22;
  --pa-bord:      #2E2E36;
  --pa-texte:     #F5F5F7;
  --pa-mute:      #9A9AA5;
  --pa-primaire:  #E12D2D;
  --pa-succes:    #10B981;
  --pa-danger:    #EF4444;
  --pa-r:         13px;
}

* { box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'Public Sans', system-ui, sans-serif; }

/* L'attribut hidden ne cache un élément que par un `display:none` venu de
   la feuille du navigateur. Toute règle d'auteur qui pose un display —
   et il y en a plusieurs ici : .pa-compte est en flex, .pa-btn-fin en
   inline-flex — l'emporte sur elle, et l'élément reste visible. Le bouton
   « Déconnexion » s'affichait ainsi avant même la connexion.

   Cette règle rend l'attribut à nouveau fiable, une fois pour toutes. */
[hidden] { display: none !important; }

body {
  background: var(--pa-fond);
  color: var(--pa-texte);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, legend {
  font-family: 'Archivo', system-ui, sans-serif;
  letter-spacing: -.028em;
}

/* ---------- En-tête ------------------------------------------------ */
.pa-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 18px;
  border-bottom: 1px solid var(--pa-bord);
  background: rgba(12, 12, 14, .9);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.pa-marque {
  display: flex; align-items: center; gap: 9px;
  color: var(--pa-texte); text-decoration: none;
  font-weight: 600; font-size: .95rem;
}
.pa-marque img { border-radius: 8px; }
.pa-marque b { color: var(--pa-primaire); }
.pa-compte { display: flex; align-items: center; gap: 10px;
             font-size: .8rem; color: var(--pa-mute); }

/* ---------- Page --------------------------------------------------- */
.pa-page { max-width: 780px; margin: 0 auto; padding: 26px 18px 60px; }

.pa-eyebrow {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: rgba(225, 45, 45, .12); color: var(--pa-primaire);
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; margin-bottom: 14px;
}
h1 { font-size: clamp(1.7rem, 5.5vw, 2.5rem); font-weight: 800; line-height: 1.15; }
.pa-chapo { color: var(--pa-mute); margin-top: 12px; font-size: 1rem; }
.pa-chapo-court { margin-bottom: 22px; }

/* ---------- Atouts ------------------------------------------------- */
.pa-atouts {
  display: grid; gap: 12px; margin: 26px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pa-atout {
  padding: 16px 17px; border-radius: var(--pa-r);
  border: 1px solid var(--pa-bord); background: var(--pa-surface);
}
.pa-atout-i { font-size: 1.5rem; line-height: 1; margin-bottom: 9px; }
.pa-atout-t { font-weight: 800; font-size: .93rem; margin-bottom: 5px; }
.pa-atout-p { font-size: .84rem; color: var(--pa-mute); line-height: 1.6; }

/* ---------- Boutons ------------------------------------------------ */
.pa-btn, .pa-btn-sec, .pa-btn-fin, .pa-btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer;
  padding: 12px 18px; border: 1px solid transparent; transition: .18s;
  min-height: 44px;                 /* cible confortable au pouce */
}
.pa-btn { background: var(--pa-primaire); color: #fff; }
.pa-btn:hover { filter: brightness(1.08); }
.pa-btn-sec { background: var(--pa-surface-2); color: var(--pa-texte);
              border-color: var(--pa-bord); font-size: .87rem; }
.pa-btn-sec:hover { border-color: var(--pa-primaire); }
.pa-btn-fin { background: transparent; color: var(--pa-mute);
              border-color: var(--pa-bord); font-size: .82rem;
              font-weight: 600; padding: 9px 14px; min-height: 38px; }
.pa-btn-fin:hover { color: var(--pa-texte); }
.pa-btn-fin.pa-danger:hover { color: var(--pa-danger); border-color: var(--pa-danger); }
.pa-btn-google { background: #fff; color: #1F1F1F; width: 100%; font-size: .95rem; }
.pa-btn-google:hover { filter: brightness(.96); }
button:disabled { opacity: .55; cursor: not-allowed; }

.pa-connexion { margin-top: 8px; max-width: 420px; }
.pa-fine { font-size: .79rem; color: var(--pa-mute); line-height: 1.6; margin-top: 10px; }
.pa-erreur {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3);
  color: #FCA5A5; font-size: .84rem; line-height: 1.55;
}

/* ---------- Formulaire --------------------------------------------- */
.pa-etat-publication {
  padding: 12px 15px; border-radius: var(--pa-r); margin-bottom: 20px;
  font-size: .85rem; line-height: 1.55;
  border: 1px solid rgba(16, 185, 129, .3);
  background: rgba(16, 185, 129, .09); color: #6EE7B7;
}
.pa-etat-publication.est-brouillon {
  border-color: rgba(234, 179, 8, .32);
  background: rgba(234, 179, 8, .09); color: #FDE68A;
}
.pa-etat-publication.est-retire {
  border-color: var(--pa-bord); background: var(--pa-surface); color: var(--pa-mute);
}

.pa-bloc {
  border: 1px solid var(--pa-bord); border-radius: var(--pa-r);
  background: var(--pa-surface); padding: 17px 17px 19px; margin-bottom: 15px;
}
.pa-bloc legend {
  padding: 0 8px; font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--pa-mute);
}
.pa-grille { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pa-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-plein { grid-column: 1 / -1; }
.pa-champ > span { font-size: .79rem; font-weight: 600; color: var(--pa-mute); }
.pa-champ b { color: var(--pa-primaire); }
.pa-champ input, .pa-champ select {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--pa-bord); background: var(--pa-fond);
  color: var(--pa-texte); font: inherit; font-size: .92rem;
}
.pa-champ input:focus, .pa-champ select:focus {
  outline: none; border-color: var(--pa-primaire);
}
.pa-champ input::placeholder { color: #5B5B66; }

/* ---------- Choix du métier ---------------------------------------- */
.pa-types { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pa-type {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px 15px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--pa-bord); background: var(--pa-surface-2);
  color: var(--pa-texte); font: inherit; transition: .18s;
}
.pa-type:hover { border-color: var(--pa-mute); }
.pa-type.est-choisi { border-color: var(--pa-primaire); box-shadow: 0 0 0 1px var(--pa-primaire); }
.pa-type-i { font-size: 1.5rem; line-height: 1.1; }
/* display:block — sans quoi le nom du métier et son explication se
   suivent sur la même ligne, et « Fournisseur Profilés, vitrage… » se lit
   comme une seule phrase bancale. */
.pa-type-n { display: block; font-weight: 800; font-size: .93rem; }
.pa-type-p { display: block; font-size: .79rem; color: var(--pa-mute);
             line-height: 1.5; margin-top: 3px; }

/* ---------- Cases à cocher ----------------------------------------- */
.pa-cases { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pa-case {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--pa-bord); background: var(--pa-surface-2);
  font-size: .87rem; transition: .18s;
}
.pa-case:hover { border-color: var(--pa-mute); }
.pa-case input { width: 18px; height: 18px; accent-color: var(--pa-primaire); flex: none; }
.pa-case:has(input:checked) { border-color: var(--pa-primaire); }

/* ---------- Position ----------------------------------------------- */
.pa-gps {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  margin-top: 15px; padding: 14px 15px; border-radius: 12px;
  border: 1px dashed var(--pa-bord); background: var(--pa-surface-2);
}
.pa-gps-txt { flex: 1 1 220px; min-width: 0; }
.pa-gps-t { font-weight: 700; font-size: .88rem; margin-bottom: 4px; }
.pa-gps-p { font-size: .8rem; color: var(--pa-mute); line-height: 1.55; }
.pa-gps-p.est-ok { color: var(--pa-succes); }
.pa-gps-p.est-alerte { color: #FCA5A5; }
.pa-gps-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Logo ---------------------------------------------------- */
.pa-logo-zone { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.pa-logo-apercu {
  width: 74px; height: 74px; flex: none; border-radius: 12px;
  border: 1px solid var(--pa-bord); background: var(--pa-fond) center/contain no-repeat;
  display: grid; place-items: center; font-size: 26px;
}
.pa-logo-txt { flex: 1 1 210px; min-width: 0; }
.pa-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Visibilité + pied -------------------------------------- */
.pa-visibilite {
  padding: 15px 17px; border-radius: var(--pa-r);
  border: 1px solid var(--pa-bord); background: var(--pa-surface); margin-bottom: 15px;
}
.pa-bascule { display: flex; align-items: center; gap: 11px; cursor: pointer; font-weight: 600; }
.pa-bascule input { width: 19px; height: 19px; accent-color: var(--pa-succes); }
.pa-pied { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pa-pied .pa-btn { flex: 1 1 220px; }

/* ---------- Aperçu -------------------------------------------------- */
.pa-apercu-zone { margin-top: 34px; }
.pa-apercu-zone h2 { font-size: 1.05rem; margin-bottom: 11px; }
.pa-apercu {
  display: flex; gap: 13px; align-items: center;
  padding: 14px 15px; border-radius: var(--pa-r);
  border: 1px solid var(--pa-bord); background: var(--pa-surface);
}
.pa-ap-vignette {
  width: 54px; height: 54px; flex: none; border-radius: 11px;
  background: #2A2A31 center/contain no-repeat; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.3rem;
}
.pa-ap-nom { font-weight: 800; font-size: .97rem; display: flex; align-items: center; gap: 7px; }
.pa-ap-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 4px 0 3px; }
.pa-ap-type {
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 5px;
  background: rgba(225, 45, 45, .14); color: var(--pa-primaire);
}
.pa-ap-lieu { font-size: .78rem; color: var(--pa-mute); }
.pa-ap-desc { font-size: .82rem; color: var(--pa-mute); line-height: 1.5; }

/* ---------- Bas de page --------------------------------------------- */
.pa-bas {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 20px 18px 34px; max-width: 780px; margin: 0 auto;
  border-top: 1px solid var(--pa-bord); font-size: .8rem; color: var(--pa-mute);
}
.pa-bas a { color: var(--pa-mute); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}