.account-layout {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.account-sidebar {
    min-width: 0;
}

.account-shell-nav {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.account-shell-nav__section {
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--account-soft-line, var(--line));
    border-radius: 14px;
    background: rgba(255, 253, 247, .84);
    box-shadow: var(--account-soft-shadow, 0 10px 22px rgba(27, 29, 24, .045));
}

.account-shell-nav__title {
    margin: 1px 6px 6px;
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.account-shell-nav__links {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.account-shell-nav__links a {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: var(--tap-size);
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 10px;
    color: #4E574F;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.account-shell-nav__links a.is-active {
    background: rgba(36, 90, 59, .1);
    color: var(--brand);
}

.account-shell-nav__links a:hover {
    background: rgba(223, 232, 220, .48);
    text-decoration: none;
}

.account-shell-nav__links a:focus-visible,
.account-list-row:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -4px;
}

.side-nav {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 8px;
    scrollbar-width: thin;
}

.side-nav a {
    flex: 0 0 auto;
    min-height: var(--tap-size);
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    color: var(--text);
    padding: 0 12px;
    white-space: nowrap;
}

.side-nav a:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.account-content {
    min-width: 0;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-4);
}

.summary-grid dt {
    color: var(--muted);
    font-size: .9rem;
}

.summary-grid dd {
    margin: .25rem 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.account-summary-head {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.account-summary-head h1 {
    margin: 0;
}

.account-page {
    --hp-orange: var(--accent);
    --hp-space-1: 4px;
    --hp-space-2: 8px;
    --hp-font-xs: .58rem;
    --hp-icon-sm: 22px;
    --account-page-x: clamp(10px, 3.6vw, 18px);
    --account-card-radius: 12px;
    --account-soft-line: rgba(223, 212, 195, .72);
    --account-soft-shadow: 0 8px 18px rgba(27, 29, 24, .045);
    background:
        radial-gradient(circle at 50% 0, rgba(200, 97, 56, .055), transparent 28%),
        linear-gradient(180deg, #FFFDF7 0%, #FFF9EF 48%, #F8F4EE 100%);
}

.account-page .page-shell {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0 0 calc(var(--hp-bottom-nav-height) + env(safe-area-inset-bottom));
}

.account-page .site-footer {
    display: none;
}

.account-dashboard {
    display: grid;
    min-width: 0;
    gap: 10px;
    width: min(100%, 760px);
    margin-inline: auto;
    padding: 10px var(--account-page-x) 18px;
}

.account-profile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.account-profile__avatar {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 22%, rgba(255, 253, 247, .96), rgba(200, 97, 56, .13));
    color: var(--accent-strong);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: 0;
}

.account-profile__identity {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-profile__identity h1 {
    overflow: hidden;
    margin: 0;
    color: var(--text);
    font-size: clamp(1.08rem, 5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-profile__identity p {
    margin: 0;
    color: #626A62;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
}

.account-profile__location {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    color: var(--brand);
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-profile__location .ui-icon {
    flex: 0 0 auto;
}

.account-profile__edit {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    min-height: var(--tap-size);
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid rgba(47, 54, 53, .42);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
}

.account-profile__edit span {
    display: inline;
}

.account-profile__edit:hover,
.account-promo-card:hover,
.account-row-card:hover,
.account-list-row:hover,
.account-metric-tile:hover {
    text-decoration: none;
}

.account-promo-card,
.account-row-card,
.account-list-card,
.account-metric-grid {
    border: 1px solid var(--account-soft-line);
    border-radius: var(--account-card-radius);
    background: rgba(255, 253, 247, .82);
    box-shadow: var(--account-soft-shadow);
}

.account-promo-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    gap: 8px;
    align-items: center;
    min-height: 64px;
    padding: 9px;
    color: var(--text);
}

.account-promo-card__copy,
.account-row-card__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-promo-card__copy strong,
.account-row-card__copy strong {
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.12;
}

.account-promo-card__copy small,
.account-row-card__copy small {
    color: #626A62;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.34;
}

.account-section {
    display: grid;
    gap: 6px;
}

.account-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.account-section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.04;
}

.account-section-heading a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    min-height: var(--tap-size);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.account-section-heading--solo {
    display: block;
}

.account-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
}

.account-metric-tile {
    display: grid;
    min-width: 0;
    min-height: 62px;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 7px 4px;
    color: var(--text);
    border-top: 1px solid rgba(223, 212, 195, .62);
    border-left: 0;
}

.account-metric-tile:first-child {
    border-left: 0;
}

.account-metric-tile:nth-child(-n + 2) {
    border-top: 0;
}

.account-metric-tile:nth-child(2n) {
    border-left: 1px solid rgba(223, 212, 195, .62);
}

.account-metric-tile strong {
    max-width: 11ch;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.12;
    text-align: center;
}

.account-metric-tile > span:last-child {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.account-token {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.account-token--orange {
    background: rgba(200, 97, 56, .12);
    color: var(--accent-strong);
}

.account-token--green {
    background: rgba(36, 90, 59, .12);
    color: var(--brand);
}

.account-row-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    gap: 8px;
    align-items: center;
    min-height: 58px;
    padding: 9px;
    color: var(--text);
}

.account-list-card {
    display: grid;
    overflow: hidden;
}

.account-list-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 14px;
    gap: 7px;
    align-items: center;
    min-height: var(--tap-size);
    padding: 0 9px;
    border-top: 1px solid rgba(223, 212, 195, .62);
    color: var(--text);
    font-size: .72rem;
    font-weight: 600;
}

.account-list-row__content {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-list-row__content > span,
.account-list-row__content > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-list-row__content > small {
    color: #6D746D;
    font-size: 0.7rem;
    font-weight: 600;
}

.account-list-row > strong {
    color: var(--accent-strong);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* La ligne de liste sert aussi l'espace particulier : le plancher ne vaut que
   sous le portail pro (et gagne sur la surcharge a 860 px par sa portee). */
.account-page--professional .account-list-row__content > small,
.account-page--professional .account-list-row > strong {
    font-size: var(--pro-texte-min);
}

.account-list-row:first-child {
    border-top: 0;
}

.account-list-row > .ui-icon:first-child {
    color: #2F3635;
}

.pro-capability-row--open,
.pro-capability-row--blocked {
    min-height: 58px;
    padding-block: 8px;
}

.pro-capability-row--open .account-list-row__content > span,
.pro-capability-row--open .account-list-row__content > small,
.pro-capability-row--blocked .account-list-row__content > span,
.pro-capability-row--blocked .account-list-row__content > small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.pro-capability-row--open > strong {
    color: var(--brand);
}

.pro-capability-row--blocked > strong {
    color: var(--accent-strong);
}

.account-reservation-summary {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-width: 0;
    padding: 7px 9px 8px;
    border-top: 1px dashed rgba(223, 212, 195, .76);
    background: rgba(223, 232, 220, .24);
    color: var(--text);
}

.account-reservation-summary > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-reservation-summary strong {
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-reservation-summary small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-reservation-summary__state {
    justify-items: end;
}

.account-reservation-summary__state em {
    color: var(--brand);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
}

.pro-layout {
    display: block;
    min-width: 0;
    width: 100%;
}

.pro-content {
    min-width: 0;
}

.pro-dashboard {
    gap: 12px;
}

/* LE PLANCHER DE TEXTE DE L'ESPACE PRO (audit visuel du 15/09/2026, P2).
   La base `html` descend a 14 px sous 420 px (public/layout.css) : sous-titres
   a .72rem, meta et pastilles a .7rem tombaient a ~10 px sur un telephone — 55
   textes sous 12 px sur le tableau de bord, 62 sur les commandes. UN jeton, lu
   par chaque texte secondaire du portail : .86rem = 12 px au pouce. Sur :root
   parce que cette feuille n'est servie qu'aux ecrans de compte, et que la
   mesure du premier ecran (`test_premier_ecran_pro`) ne resout que :root. */
:root {
    --pro-texte-min: .86rem;
}

.pro-header {
    display: grid;
    gap: 8px;
    align-items: center;
}

.pro-header h1,
.pro-header p {
    margin: 0;
}

.pro-header h1 {
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.08;
}

.pro-header p:not(.pro-eyebrow) {
    margin-top: 3px;
    color: #626A62;
    font-size: var(--pro-texte-min);
    font-weight: 500;
    line-height: 1.28;
}

.pro-eyebrow {
    color: var(--brand);
    font-size: var(--pro-texte-min);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.pro-header__action {
    display: inline-flex;
    width: fit-content;
    min-height: var(--tap-size);
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(36, 90, 59, .2);
    border-radius: 8px;
    background: rgba(244, 249, 240, .72);
    color: var(--brand);
    font-size: .7rem;
    font-weight: 600;
}

.pro-header__action:hover {
    text-decoration: none;
}

.pro-status-badge {
    min-height: 26px;
    padding-inline: 8px;
    border-radius: 7px;
    font-size: var(--pro-texte-min);
}

/* UNE CARTE A SES MARGES INTERIEURES (audit visuel du 15/09/2026). Sans elles,
   « Retraits », « Vérification », « Équipe » et la carte Stripe collaient leur
   texte et leurs champs au bord — le selecteur de lieu sortait meme de la carte.
   Les cartes qui ont deja leur respiration (`.pro-form-card`, `.pro-steps`,
   `.pro-verification-card`, `.pro-invitations`) la gardent : elles sont
   declarees plus bas, a la meme specificite, et l'emportent. */
.pro-card {
    padding: 14px;
    border: 1px solid var(--account-soft-line);
    border-radius: var(--account-card-radius);
    background: rgba(255, 253, 247, .84);
    box-shadow: var(--account-soft-shadow);
}

.pro-card > h2 {
    margin: 0 0 10px;
}

/* LA PASTILLE DES RUBRIQUES. `segmented_nav.html` la posait sans qu'aucune
   feuille ne l'habille : la rubrique est un `inline-flex`, qui avale l'espace,
   et l'ecran lisait « Commandes6 », « Messages1 ». */
.account-segmented-nav__badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding-inline: 5px;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-strong, #B6532C);
    color: #FFF8EC;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

/* LES LIGNES « NOM + GESTE » (membres, demandes de rattachement, pieces a
   fournir). La classe etait posee par trois gabarits et definie nulle part :
   le nom et l'adresse se collaient (« Demo HEOPdemo.pro@heop.fr »). Une
   colonne au pouce, le geste a droite a partir de 720 points. */
.account-list {
    display: grid;
}

.account-list__item {
    display: grid;
    gap: 8px;
    padding-block: 12px;
    border-top: 1px solid var(--account-soft-line);
}

.account-list__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.account-list__item > span:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-list__item small {
    color: #626A62;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.account-list__item form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.account-list__item select {
    min-height: var(--tap-size);
    padding-inline: 10px;
    border: 1px solid var(--account-soft-line);
    border-radius: 10px;
    background: rgba(255, 253, 247, .96);
    color: var(--text);
}

/* LE REPLI « RECHERCHER, FILTRER » — une poignee, fermee par defaut. Partage
   par « Mes produits » et le marche entre pros. */
.pro-repli {
    margin-block: 0;
}

.pro-repli > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size, 44px);
    padding-inline: 0.7rem;
    border: 1px solid var(--ui-color-line);
    border-radius: 999px;
    color: var(--ui-color-ink);
    font-size: var(--ui-font-sm, 0.875rem);
    cursor: pointer;
}

.pro-repli > summary:hover,
.pro-repli > summary:focus-visible {
    border-color: var(--ui-color-accent);
}

.pro-repli[open] > summary {
    margin-bottom: 10px;
}

/* LA MESSAGERIE. Aucune regle n'existait : la liste s'affichait en puces de
   navigateur. Chaque message est une `.pro-card` ; on ne pose ici que ce qui
   lui est propre — la reponse deja envoyee et la pastille « Nouveau ». */
.pro-messages__liste {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-messages__item {
    display: grid;
    gap: 8px;
}

.pro-messages__item.is-nouveau {
    border-color: rgba(36, 90, 59, .42);
}

.pro-messages__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.pro-messages__meta time,
.pro-messages__reponse-titre {
    color: #626A62;
    font-size: .8rem;
}

.pro-messages__pastille {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 700;
}

.pro-messages__corps,
.pro-messages__reponse p {
    margin: 0;
}

.pro-messages__reponse {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-left: 3px solid var(--brand);
    border-radius: 0 8px 8px 0;
    background: rgba(47, 54, 53, .045);
}

.pro-messages__form {
    display: grid;
    gap: 8px;
}

.pro-messages__form .ui-button {
    justify-self: start;
}

@media (min-width: 720px) {
    .pro-card {
        padding: 18px;
    }

    .account-list__item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.pro-company-card,
.pro-verification-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 96px;
    padding: 14px;
}

.pro-company-card h2,
.pro-verification-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.1;
}

.pro-company-card p,
.pro-verification-card p {
    margin: 5px 0 0;
    color: #626A62;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.3;
}

.pro-company-card > a {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    min-height: var(--tap-size);
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(47, 54, 53, .28);
    border-radius: 999px;
    color: var(--text);
    font-size: .76rem;
    font-weight: 600;
}

.pro-company-card > a:hover {
    text-decoration: none;
}

.pro-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.pro-step {
    display: inline-flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(47, 54, 53, .055);
    color: #626A62;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
}

.pro-step .ui-icon {
    opacity: .45;
}

.pro-step.is-done {
    background: rgba(36, 90, 59, .12);
    color: var(--brand);
}

.pro-step.is-done .ui-icon {
    opacity: 1;
}

.pro-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pro-form-card {
    padding: 16px;
}

/* --- Les invitations de l'equipe (14/09/2026) ------------------------------
   Une carte par invitation, lisible au pouce : l'adresse, les faits (envoyee
   le, expire le, etat) en deux colonnes, puis deux boutons pleine largeur.
   A partir de 720px la carte s'etale en ligne et les boutons se rangent a
   droite — la regle de base reste celle du mobile. */
.pro-invitations {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.pro-invitations__aide {
    margin: 0;
    color: #6D746D;
    font-size: .8rem;
    line-height: 1.45;
}

.pro-invitation {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--account-soft-line);
}

.pro-invitation__identite {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pro-invitation__identite strong {
    /* Une adresse n'a pas de mots : elle passe a la ligne n'importe ou plutot
       que de deborder de la carte a 375px. */
    word-break: break-all;
}

.pro-invitation__identite small {
    color: #6D746D;
    font-size: .74rem;
    font-weight: 600;
}

.pro-invitation__faits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin: 0;
    font-size: .8rem;
}

.pro-invitation__faits dt {
    color: #6D746D;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pro-invitation__faits dd {
    margin: 0;
    font-weight: 600;
}

.pro-invitation__gestes {
    display: grid;
    gap: 8px;
}

.pro-invitation__gestes .button {
    width: 100%;
}

@media (min-width: 720px) {
    .pro-invitation {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .pro-invitation__faits {
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        gap: 6px 18px;
    }

    .pro-invitation__gestes {
        grid-column: 2;
        grid-row: 1 / span 2;
        grid-template-columns: auto auto;
    }

    .pro-invitation__gestes .button {
        width: auto;
    }
}

.pro-form-card .form-stack {
    gap: 14px;
}

.pro-form-card .form-actions {
    margin-top: 4px;
}

.pro-onboarding-vitrine {
    gap: 12px;
}

.pro-onboarding-vitrine__status {
    min-height: 34px;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #C8D6C5;
    background: rgba(244, 249, 240, .8);
    color: #2B6A45;
    font-size: 0.7rem;
    font-weight: 700;
}

.pro-empty {
    --catalog-empty-padding: 22px 16px;
    --catalog-empty-border: transparent;
    --catalog-empty-radius: 0;
    --catalog-empty-bg: transparent;
    --catalog-empty-shadow: none;
    --catalog-empty-icon-bg: rgba(200, 97, 56, .12);
    --catalog-empty-icon-color: var(--accent);
    --catalog-empty-title-color: var(--text);
    --catalog-empty-title-size: .95rem;
    --catalog-empty-text-color: #626A62;
    --catalog-empty-text-size: .78rem;
}

.pro-enrichment,
.pro-enrichment__list,
.pro-enrichment-suggestion,
.pro-enrichment-suggestion form {
    display: grid;
    gap: 12px;
}

.pro-enrichment__intro,
.pro-enrichment__status,
.pro-enrichment__empty,
.pro-enrichment-suggestion {
    padding: 14px;
}

.pro-enrichment__intro,
.pro-enrichment__status,
.pro-enrichment-suggestion > header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pro-enrichment h2,
.pro-enrichment p {
    margin: 0;
}

.pro-enrichment h2 {
    font-size: .92rem;
}

.pro-enrichment p,
.pro-enrichment__status,
.pro-enrichment-suggestion small {
    color: #626A62;
    font-size: .76rem;
    line-height: 1.4;
}

.pro-enrichment__notice {
    padding: 10px 12px;
    border: 1px solid #E3C99D;
    border-radius: var(--account-card-radius);
    background: #FFF8E9;
}

.pro-enrichment-suggestion textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
}

.pro-enrichment-suggestion__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (min-width: 760px) {
    .pro-enrichment__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.address-form-panel {
    display: grid;
    gap: 16px;
}

.address-form-panel__head {
    display: grid;
    gap: 6px;
}

.address-form-panel__head h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.08;
}

.address-form-panel__head p:last-child,
.section-heading p {
    max-width: 58ch;
    margin: 0;
    color: #626A62;
    font-size: .84rem;
    font-weight: 400;
    line-height: 1.38;
}

.address-form {
    gap: 14px;
}

.address-form__grid {
    display: grid;
    gap: 14px;
}

.address-autocomplete {
    position: relative;
}

.address-autocomplete__results {
    position: absolute;
    z-index: 20;
    inset: calc(100% + 6px) 0 auto;
    display: grid;
    gap: 4px;
    max-height: 220px;
    overflow: auto;
    padding: 6px;
    border: 1px solid rgba(32, 68, 45, .14);
    border-radius: 14px;
    background: rgba(255, 253, 247, .98);
    box-shadow: 0 18px 40px rgba(35, 28, 18, .14);
}

.ban-result-item {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    color: #20251F;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.ban-result-item:hover,
.ban-result-item:focus-visible {
    outline: none;
    background: rgba(232, 240, 223, .72);
}

/* La ligne qui n'est pas un choix : ce que le formulaire ANNONCE quand la
   recherche ne rend rien ou ne repond pas. Meme gabarit que les propositions
   pour rester dans la meme liste, mais rien a cliquer — donc ni curseur de
   main, ni surbrillance au survol, qui promettraient un geste. */
.ban-result-item--muet {
    margin: 0;
    color: #55605A;
    font-weight: 500;
    cursor: default;
}

.ban-result-item--muet:hover {
    background: transparent;
}

.address-form__toggle {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid rgba(32, 68, 45, .13);
    border-radius: 12px;
    color: #20251F;
    font-size: .84rem;
    font-weight: 600;
    background: rgba(255, 253, 247, .72);
}

.address-form__toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.address-card__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

@media (min-width: 680px) {
    .address-form__grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.auth-mobile-page {
    --auth-ink: var(--text);
    --auth-muted: var(--muted);
    --auth-line: rgba(223, 212, 195, .94);
    --auth-orange: var(--accent);
    --auth-orange-strong: var(--accent-strong);
    --auth-green: var(--brand);
    --auth-page-x: 28px;
    --hp-orange: var(--accent);
    --hp-space-1: 4px;
    --hp-space-2: 8px;
    --hp-font-xs: .58rem;
    --hp-icon-sm: 22px;
    min-height: 100svh;
    background:
        radial-gradient(circle at 50% 0, rgba(200, 97, 56, .065), transparent 30%),
        linear-gradient(180deg, #FFFDF7 0%, #FFF8EC 48%, #F7F4EF 100%);
}

.auth-mobile-page .page-shell {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 0;
}

/* Ce bloc placait les utilitaires de l'en-tete en colonne 2 sur les dix-huit
   gabarits du tunnel de connexion et d'inscription. Sa specificite egalait
   celle de la feuille publique, et users.css est chargee APRES : il gagnait.
   Entre 900 et 1160px, les tuiles et la barre de recherche recevaient donc la
   MEME cellule — le champ, opaque et plus loin dans le DOM, peignait par-dessus
   la bascule, les trois tuiles et la pilule Panier, qui disparaissaient et
   devenaient incliquables. Sur le tunnel de creation de compte.

   L'en-tete public n'est plus une grille : ces `grid-column` seraient de toute
   facon inertes sur un conteneur flexible. Ils partent quand meme — une regle
   morte qui a cause ce defaut-la n'a pas a rester en embuscade. La feuille
   publique possede sa composition a toutes les largeurs, et elle seule. */

.auth-login {
    display: grid;
    gap: 24px;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    padding: 24px var(--auth-page-x) 28px;
}

/* LA ZONE MORTE AU-DESSUS DU LOGO — 118px reserves pour un logo de 145px.
 *
 * Julien, capture a l'appui : « tasse un peu la hauteur pour ne pas devoir
 * scroller ». Ces 118px etaient la respiration d'un ecran mobile plein cadre ;
 * sur un portable 1280x800, ils repoussent le bouton « Continuer par e-mail »
 * sous le pli, et il faut defiler pour valider un formulaire qu'on voit
 * entierement sauf sa conclusion — le pire cas possible.
 *
 * 72px suffisent : le bouton de retour garde sa cible de 44px et le logo sa
 * place. Rien n'est retire, tout est resserre. */
.auth-login__top {
    position: relative;
    display: grid;
    /* 72 -> 62 : mesure au navigateur, le contenu n'en occupait que 56 — le
       bouton de retour de 44px pose a 12 du haut. Dix pixels rendus au pli
       sans que ni la cible tactile ni le logo ne bougent. */
    min-height: 62px;
    align-items: start;
    justify-items: center;
}

.auth-login__back {
    position: absolute;
    top: 12px;
    left: 0;
    display: inline-flex;
    /* La cible reste a 44px : on deplace le bouton, on ne le retrecit pas. */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--auth-green);
}

.auth-login__brand {
    align-self: end;
    display: inline-flex;
}

/* Un cran plus petit : 116px se lisent aussi bien et rendent vingt-neuf
   pixels de hauteur a l'ecran. */
.auth-login__brand .heop-logo {
    width: 116px;
}

.auth-login__intro {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
}

.auth-login__intro h1 {
    margin: 0;
    color: var(--auth-ink);
    font-size: clamp(1.56rem, 7vw, 1.92rem);
    font-weight: 700;
    line-height: 1.05;
}

.auth-login__intro p {
    margin: 0;
    color: var(--auth-muted);
    font-size: .96rem;
    font-weight: 400;
    line-height: 1.3;
}

.auth-login__switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 52px;
    overflow: hidden;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: rgba(255, 253, 247, .76);
}

.auth-login__switch-option {
    display: inline-flex;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--auth-green);
    font-size: .94rem;
    font-weight: 600;
}

.auth-login__switch-option:first-child {
    border-right: 1px solid var(--auth-line);
}

.auth-login__switch-option.is-active {
    color: var(--auth-orange-strong);
    background: linear-gradient(180deg, rgba(255, 248, 236, .86), rgba(255, 253, 247, .42));
}

.auth-login__form {
    display: grid;
    gap: 22px;
}

.auth-login__errors,
.auth-field__error {
    padding: 10px 12px;
    border: 1px solid rgba(200, 97, 56, .24);
    border-radius: 10px;
    background: rgba(200, 97, 56, .08);
    color: var(--auth-orange-strong);
    font-size: .72rem;
    font-weight: 600;
}

.auth-login__errors ul,
.auth-field__error ul {
    margin: 0;
    padding-left: 16px;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field__label {
    color: var(--auth-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
}

.auth-field__control {
    position: relative;
    display: flex;
    min-height: 56px;
    align-items: center;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    background: rgba(255, 253, 247, .82);
    box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .62);
}

.auth-field__icon {
    position: absolute;
    left: 14px;
    width: 22px;
    height: 22px;
    color: var(--auth-ink);
    pointer-events: none;
}

.auth-field__control input,
.auth-field__control select {
    width: 100%;
    min-height: 54px;
    padding: 0 48px 0 50px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--auth-ink);
    font-size: .98rem;
    font-weight: 500;
}

.auth-field__control select {
    appearance: auto;
    padding-right: 16px;
    cursor: pointer;
}

.auth-field__control input::placeholder {
    color: var(--auth-muted);
}

.auth-field__control:focus-within {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 3px rgba(36, 90, 59, .1);
}

.auth-field--invalid .auth-field__control {
    border-color: var(--auth-orange-strong);
}

.auth-field--invalid .auth-field__control:focus-within {
    box-shadow: 0 0 0 3px rgba(200, 97, 56, .12);
}

.auth-mobile-page .assistant-widget:not(.assistant-widget--signup) {
    display: none;
}

.auth-field__toggle {
    position: absolute;
    right: 6px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--auth-ink);
}

.auth-login__forgot {
    justify-self: end;
    color: var(--auth-green);
    font-size: .86rem;
    font-weight: 600;
}

.auth-login__submit {
    min-height: 56px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #A63D21, #8F311A);
    color: #FFFDF7;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(200, 97, 56, .24);
}

.auth-login__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    color: var(--auth-muted);
    font-size: .9rem;
    font-weight: 600;
}

.auth-login__divider::before,
.auth-login__divider::after {
    height: 1px;
    background: var(--auth-line);
    content: "";
}

.auth-login__signup:hover {
    text-decoration: none;
}

.auth-login__signup {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    gap: 12px;
    align-items: center;
    min-height: 78px;
    padding: 12px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(223, 232, 220, .78), rgba(255, 253, 247, .82));
    color: var(--auth-ink);
    box-shadow: 0 10px 24px rgba(27, 29, 24, .055);
}

.auth-login__signup-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(223, 232, 220, .9);
    color: var(--auth-green);
}

.auth-login__signup-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.auth-login__signup-copy strong {
    overflow: hidden;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-login__signup-copy small {
    overflow: hidden;
    color: var(--auth-muted);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-login__signup-action {
    display: none;
    color: var(--auth-green);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.auth-login__signup-chevron {
    color: var(--auth-green);
}

.auth-reset {
    gap: 30px;
}

.auth-reset__top {
    min-height: 126px;
}

.auth-reset__intro {
    gap: 10px;
}

.auth-reset__intro h1 {
    font-size: clamp(1.6rem, 7.4vw, 2rem);
}

.auth-reset__intro p {
    max-width: 29ch;
    color: #6A716A;
    font-size: .94rem;
    font-weight: 500;
    line-height: 1.42;
}

.auth-reset__form {
    gap: 30px;
}

.auth-reset__submit {
    min-height: 58px;
    margin-top: 2px;
    padding-inline: 14px;
    font-size: 1rem;
}

.auth-info-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 86px;
    padding: 14px;
    border: 1px solid rgba(223, 212, 195, .42);
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(223, 232, 220, .52), rgba(255, 253, 247, .78));
    color: var(--auth-ink);
    box-shadow: 0 10px 24px rgba(27, 29, 24, .045);
}

.auth-info-card:hover {
    text-decoration: none;
}

.auth-info-card__icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(223, 232, 220, .9);
    color: var(--auth-green);
}

.auth-info-card__icon--orange {
    background: rgba(200, 97, 56, .12);
    color: var(--auth-orange-strong);
}

.auth-info-card__copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.auth-info-card__copy strong {
    color: var(--auth-ink);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.1;
}

.auth-info-card__copy small {
    color: var(--auth-muted);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.34;
}

.auth-reset__return {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    gap: 9px;
    color: var(--auth-green);
    font-size: .92rem;
    font-weight: 600;
}

.auth-reset__return:hover {
    text-decoration: none;
}

.auth-info-card--help {
    grid-template-columns: 48px minmax(0, 1fr) auto 16px;
    margin-top: 14px;
    background: linear-gradient(90deg, rgba(255, 248, 236, .86), rgba(255, 253, 247, .78));
}

.auth-info-card__action {
    color: var(--auth-orange-strong);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.auth-info-card__chevron {
    color: var(--auth-orange-strong);
}

.auth-signup-choice {
    gap: 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
}

.auth-signup-choice__top {
    min-height: 86px;
}

.auth-signup-choice__intro {
    margin-top: -2px;
    gap: 4px;
}

.auth-signup-choice__intro h1 {
    font-size: clamp(1.34rem, 6vw, 1.72rem);
}

.auth-signup-choice__intro p {
    font-size: .78rem;
    line-height: 1.16;
}

.auth-signup-choice__form {
    display: grid;
    gap: 14px;
}

.auth-account-card {
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 0;
    padding: 14px 12px 12px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: rgba(255, 253, 247, .76);
    box-shadow: 0 10px 22px rgba(27, 29, 24, .055);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.auth-account-card.is-professional {
    border-color: rgba(36, 90, 59, .22);
    background: linear-gradient(180deg, rgba(255, 253, 247, .82), rgba(244, 249, 240, .72));
}

.auth-account-card__hero {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(200, 97, 56, .1);
    color: var(--auth-orange-strong);
}

.auth-account-card.is-professional .auth-account-card__hero {
    background: rgba(36, 90, 59, .12);
    color: var(--auth-green);
}

.auth-account-card__hero .ui-icon {
    width: 28px;
    height: 28px;
}

.auth-account-card h2 {
    margin: 0;
    color: var(--auth-orange-strong);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.auth-account-card.is-professional h2 {
    color: var(--auth-green);
}

.auth-account-card > p {
    max-width: 30ch;
    margin: 0;
    color: #2F332D;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.22;
    text-align: center;
}

.auth-account-card__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 2px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--auth-line);
    list-style: none;
}

.auth-account-card__benefits li {
    display: grid;
    gap: 5px;
    align-items: start;
    justify-items: center;
    text-align: center;
}

.auth-account-card__benefits li > span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(200, 97, 56, .1);
    color: var(--auth-orange-strong);
}

.auth-account-card.is-professional .auth-account-card__benefits li > span {
    background: rgba(36, 90, 59, .1);
    color: var(--auth-green);
}

.auth-account-card__benefits strong {
    color: var(--auth-ink);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
}

.auth-account-card__submit {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #B12A0C, #982208 52%, #A63D21);
    color: #FFFDF7;
    font-size: .84rem;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(200, 97, 56, .2);
}

.auth-account-card.is-professional .auth-account-card__submit {
    background: linear-gradient(135deg, #245A3B, #174428);
    box-shadow: 0 14px 28px rgba(36, 90, 59, .22);
}

.auth-info-card--security {
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    margin-top: 4px;
}

.auth-signup-choice__login {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    justify-content: center;
    margin: 0;
    color: var(--auth-ink);
    font-size: .78rem;
    font-weight: 500;
}

.auth-signup-choice__login a {
    color: var(--auth-orange-strong);
    font-weight: 600;
}

.auth-signup-form {
    gap: 20px;
}

.auth-signup-form__intro {
    margin-top: -2px;
}

.auth-signup-form__intro h1 {
    font-size: clamp(1.58rem, 7vw, 2rem);
}

.auth-signup-form__type {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    background: rgba(255, 253, 247, .8);
    color: var(--auth-ink);
    box-shadow: 0 10px 24px rgba(27, 29, 24, .05);
}

.auth-signup-form__type:hover {
    text-decoration: none;
}

.auth-signup-form__type-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(223, 232, 220, .82);
    color: var(--auth-green);
}

.auth-signup-form__type strong,
.auth-signup-form__type small {
    display: block;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.auth-signup-form__type strong {
    color: var(--auth-ink);
    font-size: .94rem;
    font-weight: 700;
}

.auth-signup-form__type small {
    margin-top: 3px;
    color: var(--auth-muted);
    font-size: .74rem;
    font-weight: 500;
}

.auth-signup-form__form {
    gap: 18px;
}

.auth-signup-form__grid {
    display: grid;
    gap: 18px;
}

.auth-signup-form__fieldset {
    display: grid;
    gap: 18px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-signup-form__fieldset legend {
    padding: 0;
    margin-bottom: -6px;
    color: #555E56;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* LA QUESTION DU COMPLEMENT (23/10/2026) n'est pas un intitule de rubrique :
   c'est une phrase adressee au pro. Elle se lit comme le sous-titre de la carte
   (`.auth-card__intro p`) — casse normale, meme couleur, meme corps — et garde
   sa marge : la legende d'un `<fieldset>` n'est pas un enfant de la grille, le
   `gap` ne l'espace pas, et la marge negative ci-dessus la faisait chevaucher
   le premier libelle des qu'elle passait sur trois lignes. */
.auth-signup-form__lieu legend {
    margin-bottom: 12px;
    color: var(--ui-color-muted, #5F665D);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
}

.auth-signup-form__pays {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* Le geste sans script : 44 px sous le pouce ; le script le cache ([hidden]). */
.auth-signup-form__pays-bouton {
    -webkit-appearance: none;
    appearance: none;
    justify-self: start;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--auth-green);
    border-radius: 8px;
    background: transparent;
    color: var(--auth-green);
    font-size: .92rem;
    font-weight: 600;
}

.auth-signup-form__check {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    min-height: 44px;
    align-items: start;
    padding-block: 6px;
    color: #555E56;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.32;
    cursor: pointer;
}

.auth-signup-form__check input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--auth-orange-strong);
}

.auth-check-field {
    display: grid;
    gap: 6px;
}

.auth-check-field--invalid .auth-signup-form__check {
    color: var(--auth-orange-strong);
}

.auth-signup-form .auth-login__submit {
    margin-top: 4px;
    font-size: .98rem;
}

.auth-signup-form [aria-busy="true"] {
    opacity: .62;
    cursor: wait;
}

.auth-signup-form__divider {
    margin-block: -2px;
}

.auth-signup-form__social {
    display: grid;
    gap: 10px;
}

.auth-signup-methods {
    display: grid;
    gap: 12px;
}

.auth-signup-methods__heading {
    display: grid;
    gap: 4px;
}

.auth-signup-methods__heading h2 {
    margin: 0;
    color: var(--auth-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.auth-signup-methods__heading p,
.auth-signup-methods__privacy {
    margin: 0;
    color: var(--auth-muted);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.4;
}

.auth-signup-methods__list {
    display: grid;
    gap: 8px;
}

.auth-social-button {
    display: inline-grid;
    width: 100%;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: rgba(255, 253, 247, .82);
    color: var(--auth-ink);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(27, 29, 24, .045);
    text-align: left;
}

.auth-social-button-form {
    min-width: 0;
    margin: 0;
}

.auth-social-button-form .auth-social-button {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}

.auth-social-button:hover {
    text-decoration: none;
}

.auth-social-button:focus-visible {
    border-color: var(--auth-green);
}

.auth-social-button.is-disabled {
    opacity: .58;
    box-shadow: none;
    cursor: not-allowed;
}

.auth-social-button__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.auth-social-button__copy strong,
.auth-social-button__copy small {
    overflow-wrap: anywhere;
}

.auth-social-button__copy strong {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
}

.auth-social-button__copy small {
    color: var(--auth-muted);
    font-size: .74rem;
    font-weight: 400;
    line-height: 1.25;
}

.auth-social-button__mark {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
}

.auth-social-button__mark--email {
    background: rgba(36, 90, 59, .1);
    color: var(--auth-green);
}

.auth-social-button__mark--google {
    background: rgba(66, 133, 244, .1);
    color: #4285F4;
}

.auth-social-button__mark--facebook {
    background: rgba(24, 119, 242, .1);
    color: #1877F2;
}

.auth-social-button__mark--instagram {
    background:
        radial-gradient(circle at 30% 110%, rgba(252, 175, 69, .22), transparent 44%),
        linear-gradient(135deg, rgba(131, 58, 180, .12), rgba(253, 29, 29, .12), rgba(252, 176, 69, .14));
    color: #C13584;
}

.auth-social-button__mark--meta {
    width: 42px;
    border-radius: 999px;
    background: rgba(24, 119, 242, .1);
    color: #1877F2;
    font-size: 0.7rem;
}

.auth-private-preparation {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
    border-block: 1px solid var(--auth-line);
}

.auth-private-preparation__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(36, 90, 59, .1);
    color: var(--auth-green);
}

.auth-private-preparation h2 {
    margin: 0 0 4px;
    color: var(--auth-ink);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
}

.auth-private-preparation p {
    margin: 0;
    color: var(--auth-muted);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.4;
}

.auth-social-confirm {
    gap: 20px;
}

.auth-social-confirm__provider {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: 1px solid var(--auth-line);
    border-radius: 50%;
    background: rgba(255, 253, 247, .88);
    box-shadow: 0 14px 30px rgba(27, 29, 24, .08);
}

.auth-social-confirm__provider .auth-social-button__mark {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.auth-social-confirm__form {
    gap: 0;
}

.auth-social-confirm__form .auth-login__submit {
    margin-top: 0;
}

.auth-social-confirm__cancel {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    color: var(--auth-green);
    font-size: .86rem;
    font-weight: 600;
    text-align: center;
}

.auth-social-confirm__cancel:hover {
    color: var(--auth-orange-strong);
}

/* Le repli de la barre au-dela de 900px vivait ici aussi, en double du
   composant. Une destination vit a UN endroit : il est desormais declare
   uniquement dans home/bottom-nav.css, avec son motif. */

@media (max-width: 559px) {
    .auth-signup-form-page .auth-signup-form {
        padding-top: 10px;
    }
}

@media (min-width: 375px) {
    .auth-login__signup {
        grid-template-columns: 46px minmax(0, 1fr) auto 16px;
    }

    .auth-login__signup-icon {
        width: 46px;
        height: 46px;
    }

    .auth-login__signup-action {
        display: inline;
    }

    .auth-info-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 16px;
        min-height: 92px;
        padding: 16px;
    }

    .auth-info-card__icon {
        width: 54px;
        height: 54px;
    }

    .auth-info-card--help {
        grid-template-columns: 54px minmax(0, 1fr) auto 16px;
    }

    .auth-signup-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .auth-signup-form__grid .auth-field__label {
        font-size: .9rem;
    }

    .auth-signup-form__grid .auth-field__control input {
        padding-left: 44px;
    }
}

@media (min-width: 560px) {
    .account-layout {
        gap: 16px;
    }

    .account-dashboard {
        width: min(calc(100% - 24px), 900px);
        padding-inline: 12px;
    }

    .account-profile {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .account-profile__avatar {
        width: 56px;
        height: 56px;
        font-size: 1.05rem;
    }

    .account-profile__identity h1 {
        font-size: 1.55rem;
    }

    .account-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-metric-tile {
        border-top: 0;
        border-left: 1px solid rgba(223, 212, 195, .62);
    }

    .account-metric-tile:first-child {
        border-left: 0;
    }
}

@media (min-width: 860px) {
    .account-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
        gap: 18px;
        width: min(calc(100vw - 32px), 1320px);
        margin-inline: auto;
    }

    .account-sidebar {
        position: sticky;
        top: 16px;
    }

    .side-nav {
        display: grid;
        overflow: visible;
        padding: 12px;
    }

    .side-nav a {
        width: 100%;
    }

    .account-shell-nav {
        gap: 12px;
    }

    .account-shell-nav__section {
        padding: 10px;
        border-radius: 16px;
    }

    .account-shell-nav__title {
        margin-bottom: 10px;
        font-size: .7rem;
    }

    .account-shell-nav__links {
        display: grid;
        overflow: visible;
    }

    .account-shell-nav__links a {
        width: 100%;
        min-height: var(--tap-size);
        padding-inline: 10px;
    }

    .account-summary-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .account-layout--dashboard .account-content {
        width: 100%;
    }

    .account-dashboard {
        gap: 16px;
        width: 100%;
        max-width: 1040px;
        padding: 18px 0 32px;
    }

    .account-profile {
        grid-template-columns: 68px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .account-profile__avatar {
        width: 68px;
        height: 68px;
        font-size: 1.08rem;
    }

    .account-profile__identity h1 {
        font-size: 1.55rem;
    }

    .account-profile__identity p {
        font-size: .82rem;
    }

    .account-profile__location {
        font-size: .78rem;
    }

    .account-profile__edit {
        grid-column: auto;
        justify-self: end;
        min-height: var(--tap-size);
        padding-inline: 13px;
        font-size: .78rem;
    }

    .account-profile__edit span {
        display: inline;
    }

    .account-promo-card {
        grid-template-columns: 42px minmax(0, 1fr) 16px;
        min-height: 78px;
        padding: 12px;
    }

    .account-promo-card__copy strong,
    .account-row-card__copy strong {
        font-size: .9rem;
    }

    .account-promo-card__copy small,
    .account-row-card__copy small {
        font-size: .74rem;
    }

    .account-section-heading h2 {
        font-size: 1.02rem;
    }

    .account-section-heading a {
        font-size: .74rem;
    }

    .account-metric-tile {
        min-height: 76px;
    }

    .account-token {
        width: 36px;
        height: 36px;
    }

    .account-row-card {
        grid-template-columns: 40px minmax(0, 1fr) 16px;
        min-height: 70px;
        padding: 12px;
    }

    .account-list-row {
        min-height: 48px;
        font-size: .82rem;
    }

    .account-list-row__content > small {
        font-size: 0.7rem;
    }

    .account-list-row > strong {
        font-size: .74rem;
    }

    .pro-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
    }

    .pro-header h1 {
        font-size: 1.3rem;
    }

    .pro-company-card,
    .pro-verification-card {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        padding: 18px;
    }

    .pro-company-card > a {
        grid-column: auto;
        justify-self: end;
    }

    .pro-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pro-form-card {
        padding: 22px;
    }
}

@media (min-width: 1180px) {
    .account-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .account-dashboard {
        max-width: 1180px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .account-layout {
        gap: var(--space-3);
    }

    .side-nav {
        padding: 6px;
    }
}

/* Compact professional account home. Shared primitives live under account-pro-* so
   the same metric, task and quick-link components can be reused by the pro portal. */
.account-page--professional {
    background: #FBF8F2;
}

.account-page--professional .page-shell {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.account-page--professional .assistant-widget {
    display: none;
}

.account-layout--pro-home {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
}

.account-layout--pro-home .account-sidebar {
    display: none;
}

.account-pro-portal-shell {
    display: grid;
    width: min(100%, 1180px);
    min-width: 0;
    margin-inline: auto;
    gap: 14px;
    padding: 12px var(--account-page-x) 28px;
}

.account-pro-workspace-header {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.account-pro-portal-content {
    min-width: 0;
}

.account-pro-portal-content > .account-dashboard {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.pro-settings-groups {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.pro-company-profile {
    min-width: 0;
}

.pro-company-profile__tabs {
    min-width: 0;
}

.pro-company-profile__tabs .account-segmented-nav a {
    padding-inline: 3px;
    font-size: 0.7rem;
}

.pro-company-profile-grid {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.pro-company-profile-summary {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--account-soft-line);
    border-radius: var(--account-card-radius);
    background: rgba(244, 249, 240, .62);
}

.pro-company-profile-summary__icon,
.pro-company-profile-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(36, 90, 59, .1);
    color: var(--brand);
}

.pro-company-profile-summary__icon {
    width: 42px;
    height: 42px;
}

.pro-company-profile-summary h2,
.pro-company-profile-section-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.12;
}

.pro-company-profile-summary > div:nth-child(2) > p:not(.pro-eyebrow),
.pro-company-profile-section-head p:not(.pro-eyebrow) {
    margin: 3px 0 0;
    color: #646C64;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.32;
}

.pro-company-profile-facts,
.pro-company-profile-readonly__grid {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 4px 0 0;
}

.pro-company-profile-facts > div,
.pro-company-profile-readonly__grid > div {
    min-width: 0;
    padding: 9px;
    border-radius: 7px;
    background: rgba(255, 253, 247, .75);
}

.pro-company-profile-facts dt,
.pro-company-profile-readonly__grid dt {
    color: #737A73;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pro-company-profile-facts dd,
.pro-company-profile-readonly__grid dd {
    overflow-wrap: anywhere;
    margin: 3px 0 0;
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
}

.pro-company-profile-summary__registry {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    color: #687068;
    font-size: 0.7rem;
    font-weight: 500;
}

.pro-company-profile-summary__registry a,
.pro-company-profile-section-head > a {
    color: var(--brand);
    font-weight: 700;
}

.pro-company-profile-section,
.pro-company-profile-readonly {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.pro-company-profile-readonly {
    padding: 16px;
}

.pro-company-profile-section-head {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.pro-company-profile-section-head > a {
    font-size: 0.7rem;
    white-space: nowrap;
}

.pro-company-profile-form-grid {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.pro-company-profile-list {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--account-soft-line);
    border-radius: var(--account-card-radius);
    background: rgba(255, 253, 247, .86);
    box-shadow: var(--account-soft-shadow);
}

.pro-company-profile-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-top: 1px solid var(--account-soft-line);
    color: var(--text);
}

.pro-company-profile-row:first-child {
    border-top: 0;
}

.pro-company-profile-row--link:hover {
    background: rgba(244, 249, 240, .58);
    text-decoration: none;
}

.pro-company-profile-row__icon {
    width: 38px;
    height: 38px;
}

.pro-company-profile-row__body,
.pro-company-profile-row__meta {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.pro-company-profile-row__title {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.pro-company-profile-row__title h3,
.pro-company-profile-row__title strong {
    overflow: hidden;
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.18;
    text-overflow: ellipsis;
}

.pro-company-profile-row__title > span {
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(36, 90, 59, .1);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
}

.pro-company-profile-row__title > span.is-muted {
    background: rgba(47, 54, 53, .08);
    color: #6A716A;
}

.pro-company-profile-row__body > p,
.pro-company-profile-row__body > span:not(.pro-company-profile-row__title),
.pro-company-profile-row address {
    margin: 0;
    color: #687068;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.28;
}

.pro-company-profile-row__body .is-warning {
    color: #A84F30;
}

.pro-company-profile-row__meta {
    justify-items: end;
    color: #687068;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
}

.pro-company-profile-row__meta a {
    color: var(--accent-strong);
    font-size: 0.7rem;
    font-weight: 700;
}

.pro-public-profile-editor {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.pro-public-profile-preview {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--account-soft-line);
    border-radius: var(--account-card-radius);
    background: rgba(255, 253, 247, .9);
    box-shadow: var(--account-soft-shadow);
}

.pro-public-profile-preview__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #E6ECE2;
}

.pro-public-profile-preview__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-public-profile-preview__media > span {
    position: absolute;
    top: 10px;
    left: 10px;
    min-height: 26px;
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(255, 253, 247, .92);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 700;
}

.pro-public-profile-preview__body {
    display: grid;
    gap: 7px;
    padding: 14px;
}

.pro-public-profile-preview__body h2 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.08;
}

.pro-public-profile-preview__body > p:not(.pro-eyebrow),
.pro-public-profile-preview__body > small {
    margin: 0;
    color: #626A62;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.36;
}

.pro-public-profile-preview__tagline {
    color: var(--text) !important;
    font-weight: 700 !important;
}

.pro-public-profile-preview__body dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 0;
}

.pro-public-profile-preview__body dl > div {
    min-width: 0;
    padding: 8px;
    border-radius: 7px;
    background: rgba(36, 90, 59, .07);
}

.pro-public-profile-preview__body dt {
    color: #6D756D;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pro-public-profile-preview__body dd {
    overflow: hidden;
    margin: 2px 0 0;
    font-size: .72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pro-public-profile-form-card {
    min-width: 0;
}

.pro-public-profile-form__section {
    min-width: 0;
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--account-soft-line);
}

.pro-public-profile-form__section:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.pro-public-profile-form__section legend {
    display: grid;
    width: 100%;
    gap: 2px;
    margin: 0 0 12px;
    padding: 0;
}

.pro-public-profile-form__section legend strong {
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
}

.pro-public-profile-form__section legend span {
    color: #687068;
    font-size: 0.7rem;
    font-weight: 500;
}

.pro-public-profile-form .form-section__fields {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.pro-public-profile-form input[type="file"] {
    min-height: 44px;
    padding: 8px;
}

.account-pro-dashboard {
    width: min(100%, 1180px);
    gap: 14px;
    padding: 12px var(--account-page-x) 28px;
}

.account-pro-profile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) var(--tap-size);
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 2px;
}

.account-pro-profile__avatar {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1F633F;
    color: #FFF;
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: 0;
}

.account-pro-profile__identity {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.account-pro-profile__identity h1,
.account-pro-profile__identity p {
    margin: 0;
}

.account-pro-profile__identity h1 {
    overflow: hidden;
    color: #20231F;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pro-profile__identity p {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #5F665F;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
}

.account-pro-profile__identity p > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-pro-profile__status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.account-pro-profile__status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.account-pro-profile__status--green {
    color: #1F633F;
}

.account-pro-profile__status--orange {
    color: #B65330;
}

.account-pro-profile__settings {
    display: inline-flex;
    width: var(--tap-size);
    height: var(--tap-size);
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #20231F;
}

.account-pro-profile__settings:hover,
.account-pro-profile__settings:focus-visible {
    border-color: #E4D8C7;
    background: #FFFDF7;
    text-decoration: none;
}

.account-segmented-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #E4D8C7;
    border-radius: 8px;
    background: #FFFDF7;
}

/* LA BARRE DU PRO NE COUPE PLUS LES MOTS EN DEUX (08/09/2026).

   CE QU'ELLE FAISAIT. Autant de colonnes EGALES que de rubriques, quoi qu'il
   arrive : six rubriques a 390 points de large donnaient des colonnes de
   60 points, dont 52 de texte une fois les respirations retirees. « Commandes »
   fait neuf lettres a 10,5px, soit ~49 points sans compter la pastille — et la
   feuille autorisait le retour a la ligne. L'iPhone de Julien affichait
   « Comma / ndes », « Messag / es », « Entrepri / se ».

   CE QU'ELLE FAIT. Chaque rubrique prend la largeur de son mot (`nowrap`), et
   les rubriques se partagent la place restante (`flex: 1 1 auto`). Quand la
   rangee est pleine, elles passent A LA LIGNE ENSEMBLE, sans qu'aucun mot ne se
   coupe et sans qu'aucune ne disparaisse — le defilement horizontal a ete
   ecarte pour ca : ce qui sort de l'ecran n'existe plus pour quelqu'un qui
   n'utilise pas souvent l'informatique.

   LE FILET D'UN POINT entre les rangees laisse voir le fond de la barre, qui
   est deja sa couleur de bordure : sans lui, deux rangees se lisent comme une
   seule grille sans bord. Aucune couleur nouvelle. */
.account-pro-workspace-tabs .account-segmented-nav {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1px;
    background: #E4D8C7;
}

.pro-company-profile__tabs .account-segmented-nav {
    grid-template-columns: repeat(var(--pro-company-profile-tab-count, 4), minmax(0, 1fr));
}

.account-pro-workspace-tabs .account-segmented-nav a {
    flex: 1 1 auto;
    padding-inline: 8px;
    background: #FFFDF7;
    font-size: .75rem;
    line-height: 1.15;
    white-space: nowrap;
}

.account-pro-workspace-tabs .account-segmented-nav a:focus-visible,
.account-pro-metric:focus-visible,
.account-pro-task:focus-visible {
    z-index: 1;
    outline-offset: -4px;
}

.account-segmented-nav a {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: var(--tap-size);
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: #5F665F;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.account-segmented-nav a:hover {
    background: #F5F2EB;
    text-decoration: none;
}

.account-segmented-nav a.is-active {
    background: #F8FBF7;
    color: #1F633F;
}

.account-segmented-nav a.is-active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #1F633F;
    content: "";
}

.account-pro-onboarding {
    display: grid;
    min-width: 0;
    padding: 12px;
    gap: 10px;
    border: 1px solid #D8E3D4;
    border-radius: 8px;
    background: #F8FBF7;
}

.account-pro-onboarding__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.account-pro-onboarding__head > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-pro-onboarding__head small {
    color: #B65330;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.account-pro-onboarding__head strong {
    overflow: hidden;
    color: #20231F;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pro-onboarding__head > b {
    color: #1F633F;
    font-size: 1rem;
}

.account-pro-onboarding__bar {
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: #DFE8DC;
}

.account-pro-onboarding__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1F633F;
}

.account-pro-onboarding__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.account-pro-onboarding__step {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 1px solid #E4D8C7;
    border-radius: 6px;
    background: #FFFDF7;
    color: #4F574F;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}

.account-pro-dashboard .account-pro-onboarding__step {
    min-height: var(--tap-size);
}

.account-pro-onboarding__step > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pro-onboarding__step .ui-icon {
    color: #A6ADA6;
}

.account-pro-onboarding__step.is-done {
    border-color: #D8E3D4;
    background: #EEF3EB;
    color: #1F633F;
}

.account-pro-onboarding__step.is-done .ui-icon {
    color: #1F633F;
}

.account-pro-activity,
.account-pro-section {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.account-pro-action-head,
.account-pro-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.account-pro-action-head h2,
.account-pro-section__head h2 {
    margin: 0;
    color: #20231F;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.08;
}

.account-pro-action-head h2 {
    font-size: 1.08rem;
}

.account-pro-section__head h2 {
    font-size: .92rem;
}

.account-pro-primary-action {
    display: inline-flex;
    min-height: var(--tap-size);
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 8px;
    background: #D45F35;
    color: #FFF;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.account-pro-primary-action:hover {
    background: #B65330;
    color: #FFF;
    text-decoration: none;
}

.account-pro-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #E4D8C7;
    border-radius: 8px;
    background: #FFFDF7;
}

.account-pro-metrics--1,
.account-pro-metrics--3 {
    grid-template-columns: minmax(0, 1fr);
}

.account-pro-metrics--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-pro-metrics--1 .account-pro-metric,
.account-pro-metrics--3 .account-pro-metric {
    border-left: 0;
}

.account-pro-metrics--3 .account-pro-metric:nth-child(2) {
    border-top: 1px solid #E4D8C7;
}

.account-pro-metric {
    display: grid;
    min-width: 0;
    min-height: 68px;
    align-content: center;
    gap: 3px;
    padding: 9px 11px;
    border-top: 1px solid #E4D8C7;
    color: #20231F;
}

.account-pro-metric:nth-child(-n + 2) {
    border-top: 0;
}

.account-pro-metric:nth-child(2n) {
    border-left: 1px solid #E4D8C7;
}

.account-pro-metric:hover {
    background: #F8FBF7;
    text-decoration: none;
}

.account-pro-metric strong {
    overflow: hidden;
    color: #1F633F;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pro-metric span {
    color: #4F574F;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.12;
}

.account-pro-dashboard__lower {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.account-pro-scope-note,
.account-pro-scope-card {
    margin: 0;
    padding: 12px;
    border: 1px solid #D8E3D4;
    border-radius: 8px;
    background: #F8FBF7;
    color: #4F574F;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
}

.account-pro-scope-card h2,
.account-pro-scope-card p {
    margin: 0;
}

.account-pro-scope-card h2 {
    color: #20231F;
    font-size: .92rem;
}

.account-pro-section__head > a {
    display: inline-flex;
    min-height: var(--tap-size);
    align-items: center;
    gap: 5px;
    color: #1F633F;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.account-pro-section__head > a:hover {
    color: #164A2E;
    text-decoration: none;
}

.account-pro-task-list {
    display: grid;
    overflow: hidden;
    border: 1px solid #E4D8C7;
    border-radius: 8px;
    background: #FFFDF7;
}

.account-pro-task {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 14px;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid #E4D8C7;
    color: #20231F;
}

.account-pro-task:first-child {
    border-top: 0;
}

.account-pro-task:hover {
    background: #F8FBF7;
    text-decoration: none;
}

.account-pro-task__icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #EAF1E8;
    color: #1F633F;
}

.account-pro-task__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-pro-task__copy strong,
.account-pro-task__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pro-task__copy strong {
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.1;
}

.account-pro-task__copy small {
    color: #636A63;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1;
}

.account-pro-task__status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 7px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.account-pro-task__status--orange {
    background: #FFF8F3;
    color: #C55A33;
}

.account-pro-task__status--green {
    background: #F1F7EF;
    color: #1F633F;
}

.account-pro-empty {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 60px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid #E4D8C7;
    border-radius: 8px;
    background: #FFFDF7;
    color: #1F633F;
}

.account-pro-empty > span {
    display: grid;
    gap: 2px;
}

.account-pro-empty strong {
    color: #20231F;
    font-size: .74rem;
}

.account-pro-empty small {
    color: #636A63;
    font-size: 0.7rem;
}

.account-pro-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.account-pro-quick-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid #E4D8C7;
    border-radius: 8px;
    background: #FFFDF7;
    color: #20231F;
}

.account-pro-quick-link:hover {
    border-color: #C8D6C5;
    background: #F8FBF7;
    color: #1F633F;
    text-decoration: none;
}

.account-pro-quick-link > .ui-icon:first-child {
    color: #1F633F;
}

.account-pro-quick-link > span {
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-pro-quick-link--wide {
    grid-column: 1 / -1;
}

@media (min-width: 560px) {
    .account-pro-portal-shell {
        padding-inline: 18px;
    }

    .pro-settings-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .pro-company-profile__tabs .account-segmented-nav a {
        font-size: .72rem;
    }

    .pro-company-profile > .pro-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
    }

    .pro-company-profile-facts,
    .pro-company-profile-readonly__grid,
    .pro-company-profile-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-pro-dashboard {
        padding-inline: 18px;
    }

    .account-pro-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-pro-metrics--1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-pro-metrics--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-pro-metrics--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-pro-metrics--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-pro-metric {
        border-top: 0;
        border-left: 1px solid #E4D8C7;
    }

    .account-pro-metric:first-child {
        border-left: 0;
    }

    .account-pro-metrics--3 .account-pro-metric:nth-child(2) {
        border-top: 0;
    }

    .account-pro-metrics--3 .account-pro-metric {
        border-left: 1px solid #E4D8C7;
    }

    .account-pro-metrics--3 .account-pro-metric:first-child {
        border-left: 0;
    }
}

@media (min-width: 860px) {
    .account-pro-portal-shell {
        gap: 18px;
        padding: 20px clamp(24px, 4vw, 48px) 40px;
    }

    .account-pro-workspace-header {
        gap: 12px;
    }

    .pro-settings-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .pro-company-profile-grid {
        grid-template-columns: minmax(260px, .72fr) minmax(0, 1.45fr);
        align-items: start;
        gap: 18px;
    }

    .pro-company-profile-summary {
        position: sticky;
        top: 20px;
    }

    .pro-company-profile-facts {
        grid-template-columns: 1fr;
    }

    .pro-public-profile-editor {
        grid-template-columns: minmax(250px, .72fr) minmax(0, 1.45fr);
        align-items: start;
        gap: 18px;
    }

    .pro-public-profile-preview {
        position: sticky;
        top: 20px;
    }

    .pro-public-profile-form .form-section__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pro-public-profile-form .form-field:has(textarea),
    .pro-public-profile-form .form-field:has(input[type="file"]) {
        grid-column: 1 / -1;
    }

    .account-pro-dashboard {
        gap: 18px;
        padding: 20px clamp(24px, 4vw, 48px) 40px;
    }

    .account-pro-profile {
        grid-template-columns: 52px minmax(0, 1fr) var(--tap-size);
    }

    .account-pro-profile__avatar {
        width: 52px;
        height: 52px;
    }

    .account-pro-profile__identity h1 {
        font-size: 1.16rem;
    }

    .account-pro-onboarding__steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .account-segmented-nav a {
        min-height: 46px;
        font-size: .78rem;
    }

    .account-pro-action-head h2 {
        font-size: 1.2rem;
    }

    .account-pro-primary-action {
        min-height: var(--tap-size);
        padding-inline: 16px;
        font-size: .8rem;
    }

    .account-pro-metric {
        min-height: 78px;
        padding-inline: 14px;
    }

    .account-pro-metric strong {
        font-size: 1.5rem;
    }

    .account-pro-dashboard__lower {
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
        align-items: start;
        gap: 18px;
    }

    .account-pro-task {
        min-height: 66px;
    }

}

@media (max-width: 350px) {
    .account-pro-portal-shell {
        --account-page-x: 8px;
    }

    .account-pro-dashboard {
        --account-page-x: 8px;
    }

    .account-pro-profile {
        grid-template-columns: 44px minmax(0, 1fr) var(--tap-size);
        gap: 7px;
    }

    .account-pro-profile__avatar {
        width: 44px;
        height: 44px;
    }

    .account-pro-action-head {
        gap: 6px;
    }

    .account-pro-primary-action {
        padding-inline: 9px;
        font-size: 0.7rem;
    }

    .account-pro-task {
        grid-template-columns: 32px minmax(0, 1fr) auto 12px;
        gap: 6px;
        padding-inline: 8px;
    }

    .account-pro-task__icon {
        width: 32px;
        height: 32px;
    }

    .account-pro-task__status {
        padding-inline: 5px;
        font-size: 0.7rem;
    }

    .account-pro-quick-link {
        grid-template-columns: 22px minmax(0, 1fr) 12px;
        gap: 4px;
        padding-inline: 7px;
    }

    .account-pro-quick-link > span {
        font-size: 0.7rem;
    }
}

/* La pastille Meta etait elargie pour loger le mot "Meta"; avec un logo
   elle redevient un cercle comme les autres. */
.auth-social-button__mark--meta,
.auth-social-button__mark--facebook {
    width: 30px;
    border-radius: 50%;
    font-size: .78rem;
}

/* Logo plus grand dans une pastille plus petite: le trace gagne en nettete. */
.auth-social-button__mark .brand-mark {
    width: 21px;
    height: 21px;
}


/* ============================================================
   Graphique de performance vendeur — CA mensuel (SVG inline).
   Aucune librairie : la politique de contenu est script-src 'self',
   un canvas pilote en JS serait bloque sans un mot. La geometrie
   est precalculee cote Python ; la feuille ne fait que peindre.
   ============================================================ */
.account-pro-chart__figure { margin: 0; }

.account-pro-chart__sub {
    color: var(--ui-color-muted, #6E6252);
    font-size: .72rem;
    font-weight: 500;
}

.account-pro-chart__peak {
    color: var(--ui-color-muted, #6E6252);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.account-pro-chart__svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}

.account-pro-chart__axis { stroke: var(--ui-color-sable, #E7DCC6); stroke-width: 1; }

.account-pro-chart__bar { fill: var(--ui-color-brand, #245A3B); }

/* Le mois en cours est PARTIEL : terracotta, le « encore en mouvement » de la
   charte — jamais un vert qu on lirait comme solde. */
.account-pro-chart__bar--current { fill: var(--ui-color-accent, #C86138); }

.account-pro-chart__labels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.account-pro-chart__labels li {
    color: var(--ui-color-muted, #6E6252);
    font-size: .58rem;
    font-weight: 600;
    text-align: center;
}

.account-pro-chart__labels li.is-current { color: var(--ui-color-accent-dark, #A64F31); }

.account-pro-chart__cta { justify-self: start; margin-top: 8px; }

.account-pro-trend {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.account-pro-trend--up { background: var(--ui-color-brand-soft, #DFE8DC); color: var(--ui-color-brand, #245A3B); }
.account-pro-trend--down { background: #F7E4DC; color: var(--ui-color-accent-dark, #A64F31); }
.account-pro-trend--flat,
.account-pro-trend--new { background: #F1EADD; color: var(--ui-color-muted, #6E6252); }

.account-spark { display: block; width: 100%; height: 26px; margin-top: 4px; }
.account-spark__area { fill: var(--ui-color-brand-soft, #DFE8DC); opacity: .7; }
.account-spark__line { stroke: var(--ui-color-brand, #245A3B); stroke-width: 1.5; }
.account-spark__dot { fill: var(--ui-color-brand, #245A3B); }
.account-spark--baisse .account-spark__line,
.account-spark--baisse .account-spark__dot { stroke: var(--ui-color-accent, #C86138); fill: var(--ui-color-accent, #C86138); }

.account-pro-chart__head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Dans une tuile vendeur, l etincelle reste discrete : elle accompagne le
   chiffre, elle ne le concurrence pas. */
.account-pro-metric .account-spark { height: 16px; margin-top: 2px; }

/* ==================================================================
   LE SEMAINIER DES RETRAITS (26/08) — la semaine du client, d'un coup
   d'oeil : blocs pleins = reservable, grise = desactive, tiret = muet.
   ================================================================== */

.pro-semainier__etat {
    margin: 0;
    font-size: .8rem;
    color: var(--hp-muted, #5F665D);
}

.pro-semainier__grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.pro-semainier__jour {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 4px;
    min-height: 76px;
    padding: 6px 3px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--hp-creme-doux, #DFE8DC) 45%, transparent);
}

.pro-semainier__jour--muet {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--hp-muted, #5F665D) 30%, transparent);
}

.pro-semainier__nom {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hp-muted, #5F665D);
}

.pro-semainier__creneau {
    width: 100%;
    padding: 4px 2px;
    border-radius: 7px;
    background: var(--hp-green, #245A3B);
    color: var(--hp-creme, #FFF8EC);
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pro-semainier__creneau--pause {
    background: color-mix(in srgb, var(--hp-muted, #5F665D) 25%, transparent);
    color: var(--hp-muted, #5F665D);
    text-decoration: line-through;
}

.pro-semainier__vide {
    color: color-mix(in srgb, var(--hp-muted, #5F665D) 55%, transparent);
    font-size: .8rem;
}

.pro-semainier__legende {
    margin: 10px 0 0;
    font-size: .7rem;
    color: var(--hp-muted, #5F665D);
}

@media (max-width: 560px) {
    .pro-semainier__grille {
        gap: 3px;
    }

    .pro-semainier__creneau {
        font-size: .56rem;
    }
}

/* RECEVOIR VOS VERSEMENTS (13/09) — le formulaire Stripe dans Heop.
   MOBILE D'ABORD : une colonne au pouce, boutons pleine largeur et hauts de
   48px ; les regles min-width elargissent ensuite, jamais l'inverse. */
.heop-versements__formulaire,
.heop-versements__plan-b,
.heop-versements__fait {
    padding: 16px 12px;
}

.heop-versements__formulaire {
    min-height: 320px;
}

.heop-versements__chargement {
    margin: 0;
    color: var(--account-muted, inherit);
}

.heop-versements__plan-b {
    display: grid;
    gap: 12px;
}

.heop-versements__plan-b p {
    margin: 0;
}

.heop-versements__plan-b .auth-submit {
    width: 100%;
    min-height: 48px;
}

@media (min-width: 720px) {
    .heop-versements__formulaire,
    .heop-versements__plan-b,
    .heop-versements__fait {
        padding: 24px;
    }

    .heop-versements__plan-b {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .heop-versements__plan-b .auth-submit {
        width: auto;
    }
}

/* ==========================================================================
 * « DEPOSEZ VOS DOCUMENTS, ON S'OCCUPE DU RESTE » (20/09/2026)
 *
 * Ecrit depuis le telephone : une colonne, des cibles de pouce, et la zone de
 * depot EST le champ de fichier (il recoit donc le glisser-deposer du bureau
 * sans une ligne de script). Un seul elargissement, a 720px.
 * ========================================================================== */
.pro-depot {
    display: grid;
    gap: 12px;
}

.pro-depot__tete {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: space-between;
}

.pro-depot__tete h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.pro-depot__piece--validee .pro-depot__etat {
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-creme, #FBF8F1);
}

.pro-depot__piece--a_refaire {
    border-color: var(--auth-orange-strong, #B4531F);
}

.pro-depot__raison {
    margin: 8px 0 0;
    color: var(--auth-orange-strong, #B4531F);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

.pro-depot__zone {
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: center;
    min-height: 88px;
    margin-top: 10px;
    padding: 16px 12px;
    border: 2px dashed var(--account-soft-line, #E7DCC6);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
}

.pro-depot__zone:focus-within {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
}

.pro-depot__geste {
    color: var(--ui-color-brand, #245A3B);
    font-weight: 700;
}

.pro-depot__mention {
    color: #626A62;
    font-size: .75rem;
    line-height: 1.35;
}

/* Le champ couvre la zone : c'est LUI qui recoit le fichier glisse. Il reste
   dans l'arbre d'accessibilite (pas de display:none) et montre, sous la
   mention, les noms des fichiers choisis. */
.pro-depot__zone input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    font-size: .8125rem;
}

.pro-depot__fichiers {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pro-depot__fichiers small {
    color: #626A62;
}

.pro-depot__liens {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.pro-depot__liens .ui-cta,
.pro-depot__envoi {
    min-height: 44px;
    justify-content: center;
}

@media (min-width: 720px) {
    .pro-depot__liens {
        grid-template-columns: repeat(2, minmax(0, max-content));
    }
}