/**
 * Espace Pro - La Porte Contemporaine
 * Front office.
 *
 * Le bloc professionnel est rendu dans un balisage produit par le module :
 * aucune grille de thème à neutraliser, donc aucune règle défensive.
 */

:root {
    --ap-ink: #1c1f24;
    --ap-text: #3c4249;
    --ap-muted: #6b7078;
    --ap-line: #ddd9d3;
    --ap-line-soft: #ebe8e3;
    --ap-surface: #ffffff;
    --ap-surface-alt: #f7f5f2;
    --ap-accent: #2f665f;
    --ap-accent-soft: #eaf1ef;
    --ap-danger: #a3372c;
    --ap-radius: 4px;
}

/* ===================================================================== */
/* Bloc professionnel                                                    */
/* ===================================================================== */

/* Pas d'encadré : le bloc suit le fil du formulaire. La hiérarchie vient
   du rythme vertical et des libellés, pas d'un cadre. */

.auronepro {
    margin: 2.5rem 0 1.5rem;
}

.auronepro__head {
    padding: 0;
}

.auronepro__body {
    padding: 0;
}

.auronepro__intro {
    margin: 0;
    max-width: 64ch;
    color: var(--ap-muted);
    font-size: 0.8125rem;
    line-height: 1.65;
}

/* Cases à cocher reprises du thème : on annule leur mise en page d'origine. */

.auronepro .custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    float: none;
}

.auronepro .custom-checkbox > span {
    flex: 0 0 auto;
    margin: 0;
}

.auronepro .custom-checkbox label,
.auronepro .custom-checkbox > label {
    margin: 0;
    padding: 0;
    color: var(--ap-ink);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.auronepro__reco .custom-checkbox label,
.auronepro__reco .custom-checkbox > label {
    font-size: 0.7rem;
}

/* ===================================================================== */
/* Champs                                                                */
/* ===================================================================== */

/* Les champs du module conservent l'enveloppe du thème : rien à styler ici.
   Seules les lignes que le module ajoute lui-même sont ajustées. */

.auronepro__row {
    margin-bottom: 1rem;
}

.auronepro__reco-fields[hidden] {
    display: none;
}

/* ===================================================================== */
/* Dépôt du justificatif                                                 */
/* ===================================================================== */

.auronepro-drop__wrap {
    position: relative;
    width: 100%;
}

/* Le champ fichier recouvre la zone au lieu d'être escamoté hors écran.
   Un champ obligatoire doit pouvoir recevoir le focus, sans quoi le navigateur
   refuse l'envoi sans pouvoir désigner le fautif ; c'est aussi ce qui place
   correctement son infobulle de validation. */

.auronepro-drop__input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

/* Document accepté : la zone s'efface, le champ ne doit plus intercepter les
   clics destinés aux boutons Remplacer et Retirer. */

.auronepro-drop__wrap.is-filled .auronepro-drop__input {
    pointer-events: none;
}

.auronepro-drop {
    display: flex;
    margin: 0;
    font-weight: 400;
    text-align: left;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.25rem;
    border: 1px dashed var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-surface-alt);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.auronepro-drop:hover,
.auronepro-drop:focus-visible,
.auronepro-drop.is-hover {
    border-color: var(--ap-accent);
    background: var(--ap-accent-soft);
    outline: none;
}

.auronepro-drop.is-busy {
    cursor: progress;
    opacity: 0.65;
}

.auronepro-drop__icon {
    flex: 0 0 auto;
    color: var(--ap-accent);
    line-height: 0;
}

.auronepro-drop__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.auronepro-drop__text strong {
    color: var(--ap-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.auronepro-drop__hint {
    color: var(--ap-muted);
    font-size: 0.8125rem;
}

.auronepro-drop__meta {
    flex: 0 0 auto;
    color: var(--ap-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .auronepro-drop {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .auronepro-drop__meta {
        flex-basis: 100%;
        padding-left: 2.5rem;
    }
}

.auronepro-drop__progress {
    height: 2px;
    margin-top: 0.6rem;
    background: var(--ap-line-soft);
}

.auronepro-drop__progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ap-accent);
    transition: width 0.2s ease;
}

.auronepro-drop__result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.25rem;
    border: 1px solid var(--ap-accent);
    border-radius: var(--ap-radius);
    background: var(--ap-accent-soft);
}

.auronepro-drop__check {
    flex: 0 0 auto;
    color: var(--ap-accent);
    line-height: 0;
}

.auronepro-drop__filename {
    flex: 1 1 auto;
    min-width: 0;
}

.auronepro-drop__filename strong {
    display: block;
    overflow: hidden;
    color: var(--ap-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auronepro-drop__size {
    color: var(--ap-muted);
    font-size: 0.75rem;
}

.auronepro-drop__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.85rem;
}

.auronepro-drop__action {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ap-accent);
    font-size: 0.8125rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.auronepro-drop__action:focus-visible,
.auronepro-drop:focus-visible {
    outline: 2px solid var(--ap-accent);
    outline-offset: 2px;
}

.auronepro-drop__action--remove {
    color: var(--ap-muted);
}

.auronepro-drop__message {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

.auronepro-drop__message.is-error {
    color: var(--ap-danger);
}

.auronepro-drop__message.is-info {
    color: var(--ap-muted);
}

/* ===================================================================== */
/* Mentions et avantages                                                 */
/* ===================================================================== */

.auronepro__legal {
    margin: 0.5rem 0 0;
    max-width: 64ch;
    color: var(--ap-muted);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.55;
}

.auronepro__benefits {
    margin: 0;
    padding: 0;
    list-style: none;
}

.auronepro__benefits li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--ap-text);
    font-size: 0.875rem;
    line-height: 1.6;
    list-style: none;
}

.auronepro__benefits li::before {
    position: absolute;
    left: 0;
    color: var(--ap-accent);
    content: "—";
}

/* ===================================================================== */
/* Professionnels recommandés                                            */
/* ===================================================================== */

.auronepro__reco {
    margin: 1.75rem 0 0;
    padding: 0;
}

.auronepro__hint {
    margin: 0.45rem 0 0.45rem;
    max-width: 62ch;
    color: var(--ap-muted);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.55;
}

.auronepro__reco-fields {
    margin-top: 1.25rem;
}

/* ===================================================================== */
/* Pastille prix Pro                                                     */
/* ===================================================================== */

.auronepro-tag {
    display: inline-flex;
    align-items: center;
    /* Écart franc avec le prix, et alignement sur l'axe médian de la ligne :
       vertical-align vaut dans un conteneur en ligne, align-self dans un
       conteneur flex — le thème peut utiliser l'un ou l'autre. */
    margin: 0 0 0 0.85rem;
    vertical-align: middle;
    align-self: center;
    padding: 0.25rem 0.6rem;
    /* Couleurs réglables au back-office ; le contour suit celle du texte. */
    border: 1px solid currentColor;
    border-radius: var(--ap-radius);
    color: var(--ap-accent);
    background-color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Ligne de prix de la fiche produit : ancien prix, prix, mention de taxe et
   pastille s'alignent sur le même axe. */

#product .product-prices {
    display: flex;
    align-items: center;
}

/* ===================================================================== */
/* Panier : progression vers le palier suivant                           */
/* ===================================================================== */

.auronepro-cart {
    margin: 1.25rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-surface-alt);
}

.auronepro-cart__current {
    margin: 0;
    color: var(--ap-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.auronepro-cart__next {
    margin: 0.4rem 0 0.75rem;
    color: var(--ap-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.auronepro-cart__next strong {
    color: var(--ap-accent);
}

.auronepro-cart__bar {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--ap-line-soft);
}

.auronepro-cart__bar span {
    display: block;
    height: 100%;
    background: var(--ap-accent);
    transition: width 0.3s ease;
}

/* ===================================================================== */
/* Bloc « Mon compte »                                                   */
/* ===================================================================== */

.auronepro-account {
    display: block;
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    background: var(--ap-surface-alt);
    text-decoration: none;
}

.auronepro-account__title {
    margin: 0 0 0.35rem;
    color: var(--ap-ink);
    font-size: 1rem;
    font-weight: 600;
}

.auronepro-account__state {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--ap-radius);
    font-size: 0.75rem;
    font-weight: 600;
}

.auronepro-account__state--pending {
    background: #f4efe2;
    color: #7a5a17;
}

.auronepro-account__state--active {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
}

.auronepro-account__state--refused {
    background: #f6e8e6;
    color: var(--ap-danger);
}

.auronepro-account ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.auronepro-account li {
    color: var(--ap-muted);
    font-size: 0.875rem;
    line-height: 1.8;
}

/* Repère d'insertion posé par le thème : jamais visible. */

.auronepro-anchor {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .auronepro-drop,
    .auronepro-drop__progress span,
    .auronepro-cart__bar span {
        transition: none;
    }
}