/* =========================================================================
   LES PAGES PUBLIQUES ET DE COMPTE (public.css)
   =========================================================================
   Connexion, mot de passe oublie, premiere connexion, second facteur,
   changement de mot de passe, pages d'erreur, depot par lien, offre
   d'emploi, droits du candidat. Ce sont les pages de ceux qui n'ont pas
   encore de compte, ou qui n'arrivent pas a y entrer : elles doivent se
   comprendre en un coup d'oeil, sur un telephone de 375 px.

   UNE SEULE FACON DE FAIRE, PARTOUT :
     - un titre court, une phrase d'aide au plus ;
     - des etiquettes visibles au-dessus des champs (jamais un simple
       texte grise dans le champ) ;
     - un seul bouton principal, pleine largeur, 48 px de haut au moins ;
     - un message d'erreur en une phrase, avec une icone ET une couleur.
   Contrastes verifies sur le fond #09090b : texte 17,8:1, aide 7,4:1.
   ========================================================================= */

/* LE FOND VA JUSQU'AU BORD. html porte la couleur de la page, comme body : le
   rebond elastique d'iOS et tout decalage du doigt montrent le meme noir, jamais du
   blanc. La classe est posee par _public.html et par les pages publiques autonomes
   (inscription, souscription, parrainage), qui chargent aussi cette feuille. */
html.pub-racine { background-color: #09090b; color-scheme: dark; }
html.pub-racine > body { background-color: #09090b; }
.pub {
    background: #09090b;
    color: #f8fafc;
    margin: 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    /* Un mot trop long pour sa ligne (empreinte SHA-256, adresse, reference) passe
       a la ligne au lieu d'elargir la page. */
    overflow-wrap: break-word;
}
.pub *, .pub *::before, .pub *::after { box-sizing: border-box; }
/* `hidden` l'emporte toujours : un bouton que le script n'a pas encore
   montre (cle d'acces) ne doit jamais paraitre, quel que soit son display. */
.pub [hidden] { display: none !important; }

.pub-page {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.pub-page.pub-large { max-width: 760px; }

/* ---------------- La marque, en haut ---------------- */
.pub-marque {
    display: inline-flex; align-items: center;
    color: #f8fafc; text-decoration: none;
    font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
    margin: 0 0 24px;
}
/* Le sigle officiel de BioPoint (l'empreinte, static/sigle.svg). */
.pub-logo {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 36px;
    display: block; margin-right: 10px;
}

/* ---------------- La carte ---------------- */
.pub-carte {
    background: #121215;
    border: 1px solid #27272a;
    border-radius: 18px;
    padding: 24px 20px;
}
@media (min-width: 480px) { .pub-carte { padding: 28px 28px; } }
.pub-carte + .pub-carte { margin-top: 16px; }

.pub-titre { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; color: #f8fafc; }
.pub-aide { color: #b4b4bc; font-size: .95rem; line-height: 1.5; margin: 0 0 20px; }
.pub-sous-titre { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; color: #f8fafc; }
.pub-texte { color: #d4d4d8; font-size: .95rem; line-height: 1.6; margin: 0 0 12px; }
.pub-petit { color: #a1a1aa; font-size: .85rem; line-height: 1.55; margin: 12px 0 0; }

/* ---------------- Les champs ---------------- */
.pub-champ { margin: 0 0 16px; }
.pub-etiquette {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    font-size: .92rem; font-weight: 600; color: #e4e4e7;
    margin: 0 0 6px;
}
.pub-etiquette label { margin: 0; font: inherit; color: inherit; }
.pub-etiquette small { font-weight: 400; color: #a1a1aa; font-size: .82rem; margin-left: auto; padding-left: 8px; }
.pub-etiquette a { font-weight: 600; font-size: .88rem; margin-left: 12px; white-space: nowrap; }
.pub .pub-saisie,
.pub input.pub-saisie[type="text"],
.pub input.pub-saisie[type="email"],
.pub input.pub-saisie[type="password"],
.pub input.pub-saisie[type="tel"],
.pub textarea.pub-saisie {
    display: block; width: 100%;
    min-height: 48px;
    background: #09090b;
    border: 1px solid #3f3f46;
    border-radius: 12px;
    padding: 12px 14px;
    color: #f8fafc;
    font-size: 1rem;       /* 16 px : iOS ne zoome pas dans le champ */
    font-family: inherit;
    line-height: 1.4;
}
.pub textarea.pub-saisie { min-height: 0; resize: vertical; }
.pub input.pub-saisie[type="file"] { padding: 10px; font-size: .9rem; }
.pub .pub-saisie:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, .35); }
.pub .pub-saisie::placeholder { color: #71717a; }
.pub-saisie.pub-chiffres { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }

/* Le mot de passe : le bouton « Afficher » dans le champ. */
.pub-mdp { position: relative; }
.pub-mdp .pub-saisie { padding-right: 52px; }
.pub-voir {
    position: absolute; right: 4px; top: 4px; bottom: 4px; width: 44px;
    border: 0; background: transparent; color: #a1a1aa; cursor: pointer;
    border-radius: 10px; font-size: 1rem;
}
.pub-voir:hover, .pub-voir:focus-visible { color: #f8fafc; background: rgba(255,255,255,.06); outline: none; }
.pub-majuscules { display: none; color: #fbbf24; font-size: .82rem; margin-top: 6px; font-weight: 600; }

.pub-case { display: flex; align-items: flex-start; color: #d4d4d8; font-size: .92rem; line-height: 1.5; margin: 0 0 16px; cursor: pointer; }
.pub-case input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 10px 0 0; accent-color: #6366f1; }

/* ---------------- Les boutons ---------------- */
.pub-bouton {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; min-height: 50px;
    border: 0; border-radius: 12px; padding: 12px 18px;
    background: #6366f1; color: #fff;
    font-size: 1rem; font-weight: 700; font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: background .15s ease;
}
.pub-bouton:hover { background: #4f46e5; color: #fff; text-decoration: none; }
.pub-bouton:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.pub-bouton i { flex: 0 0 auto; margin-right: 8px; }
.pub-bouton[disabled] { opacity: .7; cursor: wait; }
.pub-bouton.pub-danger { background: #dc2626; }
.pub-bouton.pub-danger:hover { background: #b91c1c; }
.pub-bouton.pub-second { background: transparent; color: #e4e4e7; border: 1px solid #3f3f46; }
.pub-bouton.pub-second:hover { background: rgba(255,255,255,.05); }
.pub-boutons { display: flex; flex-wrap: wrap; margin: -4px; }
.pub-boutons > * { flex: 1 1 200px; width: auto; margin: 4px; }

.pub a { color: #93c5fd; }
.pub a:hover { color: #bfdbfe; }
.pub a.pub-marque, .pub a.pub-marque:hover { color: #f8fafc; text-decoration: none; }
.pub a.pub-bouton, .pub a.pub-bouton:hover { color: #fff; text-decoration: none; }
.pub a.pub-bouton.pub-second, .pub a.pub-bouton.pub-second:hover { color: #e4e4e7; }
.pub a:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; border-radius: 4px; }

.pub-liens {
    display: flex; flex-wrap: wrap; justify-content: center;
    margin: 20px 0 0; font-size: .92rem;
}
.pub-liens a { margin: 4px 10px; text-decoration: none; }
.pub-liens a:hover { text-decoration: underline; }
.pub-centre { text-align: center; }

/* ---------------- Les messages ---------------- */
.pub-messages { margin: 0 0 16px; }
.pub-alerte {
    display: flex; align-items: flex-start;
    border-radius: 12px; padding: 12px 14px;
    font-size: .95rem; line-height: 1.5; margin: 0 0 8px;
    border: 1px solid; color: #f8fafc;
}
.pub-alerte i { flex: 0 0 auto; margin: 3px 10px 0 0; }
.pub-alerte-erreur    { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .5); }
.pub-alerte-erreur i  { color: #f87171; }
.pub-alerte-attention { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .5); }
.pub-alerte-attention i { color: #fbbf24; }
.pub-alerte-succes    { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .5); }
.pub-alerte-succes i  { color: #34d399; }
.pub-alerte-info      { background: rgba(56, 189, 248, .10); border-color: rgba(56, 189, 248, .45); }
.pub-alerte-info i    { color: #7dd3fc; }

/* Une note discrete : la precision qui rassure, sous le formulaire. */
.pub-note { display: flex; align-items: flex-start; color: #a1a1aa; font-size: .85rem; line-height: 1.55; margin: 16px 0 0; }
.pub-note i { flex: 0 0 auto; margin: 3px 8px 0 0; color: #34d399; }

/* « En savoir plus » : le detail, replie. */
.pub-details { margin: 16px 0 0; border-top: 1px solid #27272a; padding-top: 12px; }
.pub-details summary { cursor: pointer; color: #93c5fd; font-weight: 600; font-size: .92rem; padding: 6px 0; }
.pub-details summary:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; border-radius: 4px; }
.pub-details[open] summary { margin-bottom: 8px; }
.pub-details p, .pub-details li { color: #b4b4bc; font-size: .88rem; line-height: 1.65; }

/* Une liste de faits : « Poste : Equipier ». */
.pub-faits { margin: 0; }
.pub-faits dt { color: #a1a1aa; font-size: .85rem; font-weight: 400; margin-top: 10px; }
.pub-faits dt:first-child { margin-top: 0; }
.pub-faits dd { color: #f8fafc; margin: 2px 0 0; overflow-wrap: anywhere; }

.pub-pastille {
    display: inline-block; border-radius: 999px; padding: 4px 10px;
    background: #18181b; border: 1px solid #3f3f46;
    color: #e4e4e7; font-size: .85rem; margin: 4px 6px 0 0;
}

/* ---------------- Les pages d'erreur ---------------- */
.pub-erreur { text-align: center; }
.pub-erreur-icone {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(99, 102, 241, .14); color: #a5b4fc; font-size: 1.6rem;
}
.pub-erreur-code { color: #a1a1aa; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; }

.pub-pied { text-align: center; color: #71717a; font-size: .8rem; margin: 28px 0 0; }
.pub-pied a { color: #a1a1aa; }

@media (prefers-reduced-motion: reduce) {
    .pub-bouton { transition: none; }
}

/* =========================================================================
   LE CADRAGE : RIEN NE DEBORDE, RIEN NE SORT DE SON CADRE
   =========================================================================
   Les titres s'equilibrent sur leurs lignes, les paragraphes evitent la derniere
   ligne d'un seul mot, les mots longs se coupent en francais (lang="fr"). */
html.pub-racine > body { overflow-wrap: break-word; }
html.pub-racine h1, html.pub-racine h2, html.pub-racine h3 { text-wrap: balance; }
html.pub-racine p, html.pub-racine li, html.pub-racine dd { text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
html.pub-racine img, html.pub-racine video, html.pub-racine canvas, html.pub-racine iframe { max-width: 100%; }
/* Un libelle de bouton qui passe a la ligne se partage en deux lignes egales ; une
   option trop longue pour sa liste finit par des points de suspension. */
.pub-bouton { text-wrap: balance; }
html.pub-racine select { max-width: 100%; text-overflow: ellipsis; }

/* Les pages publiques, une a une. L'etat du service (statut.html) : l'etiquette se
   resserre et, si la place manque, la valeur passe dessous au lieu de sortir de la
   carte. « Comment BioPoint protege vos donnees » (public_securite.html) : le titre
   d'une rubrique, pose a cote de son icone, coupe un mot trop long plutot que de
   deborder. */
.st-ligne { flex-wrap: wrap; row-gap: 2px; }
.st-etiquette { flex: 1 1 auto; min-width: 0; }
.sec-section h2 { overflow-wrap: anywhere; }
/* L'aide publique (_aide_centre.html) : au telephone, le champ de recherche prend
   toute la largeur et « Chercher » passe dessous, au lieu d'un champ etrangle dont
   l'exemple est coupe. */
@media (max-width: 479px) {
    .pub .ca-cherche { flex-wrap: wrap; }
    .pub .ca-cherche input { flex: 1 1 100%; }
    .pub .ca-cherche button { flex: 1 1 100%; min-height: 44px; }
}
/* Les themes de l'aide, deux par ligne au telephone : sur le plus petit ecran, le titre
   d'une carte se coupe en francais (« Engage-ment ») au lieu de casser n'importe ou. */
@media (max-width: 379px) {
    .pub .ca-carte { padding: .75rem .7rem; }
    .pub .ca-carte strong { font-size: .88rem; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
}
/* Le depot par code (_depot_formulaire.html) : au plus petit ecran, « Analyser le
   document » tient sur une ligne a cote de son icone. */
@media (max-width: 359px) {
    .pub .depot-gros { font-size: 1.02rem; padding: .8rem .75rem; }
}
/* Le recapitulatif de commande et le devis (souscription_contrat.html,
   souscription_reglement.html, creer_etablissement.html) : au telephone, un montant
   court reste a droite de son libelle ; une valeur longue (duree, execution, TVA) passe
   sous son libelle, alignee a droite, au lieu d'etre serree dans une demi-colonne. */
@media (max-width: 480px) {
    html.pub-racine .sc-devis-ligne, html.pub-racine .cr-devis-ligne { flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
    html.pub-racine .sc-devis-ligne > span:first-child,
    html.pub-racine .cr-devis-ligne > span:first-child { flex: 1 1 9em; min-width: 0; }
    html.pub-racine .sc-devis-ligne > span:last-child,
    html.pub-racine .cr-devis-ligne > span:last-child { flex: 0 1 auto; max-width: 100%; margin-left: auto; }
}
/* Les horaires d'ouverture (creer_etablissement.html) : au telephone, le jour sur sa
   ligne, puis l'ouverture et la fermeture cote a cote, de la meme largeur. */
@media (max-width: 640px) {
    html.pub-racine .cr-jour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.pub-racine .cr-jour > label { grid-column: 1 / -1; }
}

/* LE FILET. Les causes de debordement sont corrigees a leur source ; ce filet
   empeche seulement qu'un oubli futur fasse glisser la page de cote au doigt.
   `clip`, et non `hidden` : la barre du haut reste collante (position: sticky).
   La page defile par la fenetre : body ne devient jamais un conteneur de
   defilement (overflow-y visible), sans quoi la barre ne collerait plus. */
html.pub-racine { overflow-x: clip; }
html.pub-racine > body { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }