/* ============================================
   MON COMPTE — PENSEZ SAUVAGE KRAFT
   css/account.css
   ============================================ */


/* Taille de base globale page Mon compte */
.woocommerce-account .ps-contenu-border {
    font-size: 1.2rem;
}


/* .ps-account-btn (base + survol) déplacé vers css/boutons.css (composant kraft
   partagé chargé globalement). */

/* ============================================================
   ACCORDEON MON COMPTE (habillage kraft, cran 2)
   Une seule structure, valable mobile et desktop.
   Reprend le vocabulaire kraft existant (.ps-account-btn,
   ancien .ps-account-wrap) pour rester coherent avec le fichier.
   ============================================================ */

.ps-account-accordeon {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 2rem 0 1.5rem;
}

/* Cadre kraft de l'accordeon uniquement sous 599px (en desktop les etiquettes
   suffisent, pas de cadre englobant). */
@media (max-width: 599px) {
    .ps-account-accordeon {
        border: var(--ps-bordure-epaisse);
        border-image: url('../images/border.png') 24 24 / 20px 20px / 0.1rem 0.2rem round;
        background: rgba(200, 168, 130, 0.25);
        padding: 1.5rem 1rem;
    }
}

.ps-acc-item {
    display: flex;
    flex-direction: column;
}

/* Etiquette-titre pleine largeur (meme recette kraft que .ps-account-btn).
   Couleurs portees par les spans enfants (.ps-acc-titre / .ps-acc-sous), pas par
   le bouton, pour echapper au blanc que le theme parent applique au survol d'un
   <button> (cf verrou couleur .ps-account-btn plus bas). */
.ps-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.8rem;
    font-family: var(--ps-police-titre);
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur);
    background-size: 6%;
    border: var(--ps-bordure-epaisse);
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 10px 18px 12px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.2s;
}

.ps-acc-head:hover {
    background:
        radial-gradient(rgba(220, 156, 90, 0.25), rgba(220, 156, 90, 0.25)),
        url('../images/kraft-long.jpg') var(--ps-kraft-couleur);
    background-size: auto, 6%;
    background-clip: padding-box;
}

/* Titre en orange au survol (au lieu du blanc herite du bouton). */
.ps-acc-head:hover .ps-acc-titre {
    color: var(--ps-orange);
}

/* Libelle = titre + sous-titre empiles a gauche, chevron a droite. */
.ps-acc-libelle {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.ps-acc-titre {
    color: #000000;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.ps-acc-sous {
    color: #6B3A2A;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
}

/* Chevron CSS pur, pivote a l'ouverture (aria-expanded) */
.ps-acc-chevron {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--ps-bordure-fonce);
    transition: transform 0.2s;
}

.ps-acc-head[aria-expanded="true"] .ps-acc-chevron {
    transform: rotate(180deg);
}

.ps-acc-panel {
    padding: 0.9rem 0.4rem 0.4rem;
}

.ps-acc-panel[hidden] {
    display: none;
}

/* Boutons d'action sous l'accordeon (reutilisent .ps-account-btn), cote a cote. */
.ps-account-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.8rem;
    margin: 0.5rem 0 1rem;
}

/* Pied de l'espace compte : 2 actions restylees (style I). On neutralise le cadre
   kraft (border-image border.png) et le fond kraft-long.jpg herites de
   .ps-account-btn => !important justifie. Deconnexion = lisere brun fin ;
   Suppression (--danger) = contour rouge. Scope .ps-account-actions : la popup JS de
   suppression (hors ce conteneur) garde son style et n'est PAS affectee.
   Largeur naturelle (flex:0 0 auto) alignee a droite ; wrap si trop etroit (le 2e
   bouton passe a la ligne au lieu de deborder) ; empilage pleine largeur <480. */
.ps-account-actions .ps-account-btn {
    flex: 0 0 auto;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid var(--ps-bordure-fonce) !important;
    border-image: none !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--ps-bordure-fonce) !important;
}

/* Icone inline (SVG en currentColor) a gauche du libelle. height fixe + width auto :
   preserve l'aspect (poubelle.svg est portrait 65x86, ne pas la deformer). */
.ps-account-btn-icone {
    display: inline-flex;
    align-items: center;
}
.ps-account-btn-icone svg {
    width: auto;
    height: 1.1rem;
    display: block;
}

/* Poubelle « Supprimer mes données » : icône externalisée
   (images/poubelle.svg) recolorisée par masque CSS, comme la poubelle du
   panier (cart.css). background-color: currentColor reprend la color du
   bouton -> brun au repos, rouge au survol/focus via les règles
   .ps-account-btn--danger existantes (aucune règle de survol à ajouter).
   Ratio portrait 65x86 conservé : width = height x 65/86.
   -webkit-mask pour Safari. */
.ps-icone-poubelle {
    width: calc(1.1rem * 65 / 86);
    height: 1.1rem;
    -webkit-mask: url('../images/poubelle.svg') no-repeat center / contain;
    mask: url('../images/poubelle.svg') no-repeat center / contain;
    background-color: currentColor;
}

/* Deconnexion : survol leger (fond brun tres transparent). */
.ps-account-actions .ps-account-btn:not(.ps-account-btn--danger):hover,
.ps-account-actions .ps-account-btn:not(.ps-account-btn--danger):focus-visible {
    background: rgba(76, 53, 28, 0.08) !important;
}

/* Suppression de compte : meme apparence que « Se deconnecter » (fond clair, texte
   brun fonce) ; seule la BORDURE est rouge pour signaler l'action sensible sans
   aplat agressif. Au survol, le texte ET l'icone (svg en currentColor) passent en
   rouge. L'epaisseur 2px vient du style commun .ps-account-btn, on ne touche QUE la
   couleur de bordure. */
.ps-account-actions .ps-account-btn--danger {
    background: transparent !important;
    border-color: var(--ps-rouge-alerte) !important;
    color: var(--ps-bordure-fonce) !important;
}
.ps-account-actions .ps-account-btn--danger:hover,
.ps-account-actions .ps-account-btn--danger:focus-visible {
    background: rgba(139, 26, 26, 0.06) !important;
    border-color: var(--ps-rouge-alerte) !important;
    color: var(--ps-rouge-alerte) !important;
}

/* Mobile : empiler en pleine largeur sous 480px (sinon cote a cote, serre). */
@media (max-width: 480px) {
    .ps-account-actions {
        flex-direction: column;
    }
    .ps-account-actions .ps-account-btn {
        width: 100%;
        flex: none;
    }
}


/* ── PANEL ACCUEIL ───────────────────────────*/

.ps-account-bienvenue {
    font-family: var(--ps-police-titre);
    color: var(--ps-orange);
    font-size: 1.9rem;
    font-weight: 400;
    margin: 0 0 0.4rem;
    letter-spacing: 0.03em;
}

.ps-account-email {
    font-family: var(--ps-police-titre);
    color: #6B3A2A;
    font-size: 1.1rem;
    margin: 0 0 1rem;
}

/* ── PANEL ADRESSE — grille 2 colonnes responsive ──*/

.ps-adresses-grille {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}

.ps-adresse-bloc {
    flex: 1 1 320px;
    min-width: 0;
}

/* Résumé : reprend exactement le look de .ps-account-adresse */
.ps-adresse-resume {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.1rem;
    line-height: 1.7;
    background: rgba(200, 168, 130, 0.3);
    border: 1px solid rgba(76, 53, 28, 0.25);
    padding: 0.7rem 1rem;
    box-sizing: border-box;
    width: 100%;
}

.ps-adresse-resume strong {
    color: var(--ps-bordure-fonce);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.3rem;
}

/* Variante "bloc vide" (aucune adresse enregistrée) */
.ps-adresse-resume--vide {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.6rem;
}

/* Hidden prioritaire : sans cette règle, .ps-adresse-resume--vide
   (display:flex) écrase le [hidden] user-agent sur les blocs vides. */
.ps-adresse-resume[hidden],
.ps-adresse-form[hidden] {
    display: none;
}

/* Lien "Modifier l'adresse" / "Ajouter une adresse" */
.ps-adresse-lien {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: var(--ps-police-titre);
    color: var(--ps-titre);
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
}

.ps-adresse-lien:hover,
.ps-adresse-lien:focus {
    color: var(--ps-bordure-fonce);
}

/* Formulaire dans le bloc : prend toute la largeur, look kraft */
.ps-adresse-form {
    background: rgba(200, 168, 130, 0.3);
    border: 1px solid rgba(76, 53, 28, 0.25);
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    width: 100%;
}

.ps-adresse-form > strong {
    display: block;
    color: var(--ps-bordure-fonce);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
}

/* Bouton Annuler : même look que Valider mais ton plus discret */
.ps-adresse-annuler {
    opacity: 0.85;
}

.ps-adresse-annuler:hover,
.ps-adresse-annuler:focus {
    opacity: 1;
}

@media (max-width: 768px) {
    .ps-adresses-grille {
        flex-direction: column;
        gap: 1rem;
    }
    .ps-adresse-bloc {
        flex: 1 1 100%;
    }
    .ps-form-boutons {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ── SOUS-TITRES DANS LES PANELS ─────────────*/

.ps-account-sous-titre {
    font-family: var(--ps-police-titre);
    color: var(--ps-bordure-fonce);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 400;
    margin: 0 0 0.8rem;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
    padding-bottom: 0.3rem;
}

/* ── FORMULAIRES (WooCommerce + panel password) ──
   Scoped dans .ps-acc-panel pour ne pas
   déborder sur le reste du site
   ─────────────────────────────────────────── */

.ps-acc-panel input[type="text"],
.ps-acc-panel input[type="email"],
.ps-acc-panel input[type="tel"],
.ps-acc-panel input[type="password"],
.ps-acc-panel select,
.ps-acc-panel textarea {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    background: var(--ps-beige-clair) !important;
    border: var(--ps-bordure-fine) !important;
    padding: 0.4rem 0.8rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.05rem !important;
    border-radius: var(--ps-radius) !important;
    outline: none !important;
}

.ps-acc-panel input:focus,
.ps-acc-panel select:focus,
.ps-acc-panel textarea:focus {
    border-color: var(--ps-orange);
    background: rgba(200, 168, 130, 0.25);
}

.ps-acc-panel label,
.ps-acc-panel .ps-form-champ label {
    font-family: var(--ps-police-titre);
    color: var(--ps-bordure-fonce);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-bottom: 0.25rem;
}

/* Champs WooCommerce générés par woocommerce_form_field() */
.ps-acc-panel .form-row {
    margin-bottom: 0.8rem;
}

.ps-acc-panel .form-row.form-row-first,
.ps-acc-panel .form-row.form-row-last {
    float: left;
    width: 48%;
    box-sizing: border-box;
}

.ps-acc-panel .form-row.form-row-last {
    float: right;
}

.ps-acc-panel .form-row.form-row-wide {
    clear: both;
    width: 100%;
}

.ps-acc-panel .form-row::after {
    content: '';
    display: table;
    clear: both;
}

/* Champs manuels (panel password) */
.ps-form-champ {
    margin-bottom: 0.8rem;
}

/* Mention d'aide sous un champ (ex. "8 caracteres minimum" sous le mot de passe). */
.ps-champ-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--ps-texte);
    opacity: 0.75;
    font-style: italic;
}


/* ── BOUTON VALIDER ──────────────────────────*/

.ps-account-valider {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur);
    background-size: 6%;
    border: var(--ps-bordure-epaisse);
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 6px 24px 8px;
    cursor: pointer;
    display: inline-block;
    margin-top: 1rem;
    transition: background 0.2s;
    clear: both;
}



/* ── MES COMMANDES ───────────────────────────*/

.ps-orders-vide {
    font-family: var(--ps-police-titre);
    color: #6B3A2A;
    font-size: 1rem;
    font-style: italic;
    margin: 0;
}

/* ── TABLEAU MES COMMANDES ───────────────────*/

.ps-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ps-police-titre);
    font-size: 1.05rem;
    color: var(--ps-texte);
}

.ps-orders-table thead th {
    font-family: var(--ps-police-titre);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ps-bordure-fonce);
    border-bottom: 2px solid rgba(76, 53, 28, 0.35);
    padding: 0.3rem 0.6rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

.ps-orders-table tbody tr:not(.ps-order-detail-row):not(.ps-devis-detail-row) {
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
}

.ps-orders-table tbody tr:not(.ps-order-detail-row):not(.ps-devis-detail-row):last-of-type {
    border-bottom: none;
}

.ps-orders-table td {
    padding: 0.55rem 0.6rem;
    vertical-align: middle;
}

.ps-order-num {
    font-weight: bold;
    color: var(--ps-bordure-fonce);
    white-space: nowrap;
}

.ps-order-date {
    color: #6B3A2A;
    white-space: nowrap;
}

.ps-order-statut {
    text-transform: capitalize;
}

.ps-order-total {
    font-weight: bold;
    color: var(--ps-orange);
    white-space: nowrap;
}

.ps-order-paiement,
.ps-order-facture-cell,
.ps-order-detail-cell {
    text-align: center;
    white-space: nowrap;
}

.ps-order-facture {
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s;
}

.ps-order-facture:hover {
    opacity: 1;
}

/* Ligne de détail repliée */
.ps-order-detail-row,
.ps-devis-detail-row {
    display: none;
}

.ps-order-detail-row.ouvert,
.ps-devis-detail-row.ouvert {
    display: table-row;
}

.ps-order-detail-wrap {
    padding: 0.8rem 1rem;
    background: rgba(200, 168, 130, 0.15);
    border-left: 3px solid rgba(76, 53, 28, 0.2);
}

/* Icône mode de paiement */
.ps-order-paiement span[data-tooltip] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ps-order-pm-icone {
    width: 38px;
    height: 38px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.ps-order-paiement span[data-tooltip]:hover .ps-order-pm-icone {
    opacity: 1;
}

/* Tooltip CSS pur au survol */
.ps-order-paiement span[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ps-texte);
    color: var(--ps-kraft-couleur);
    font-family: var(--ps-police-titre);
    font-size: 0.8rem;
    white-space: nowrap;
    padding: 3px 8px 5px;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
}

.ps-order-paiement span[data-tooltip]:hover::after {
    opacity: 1;
}

/* Basculement tableau (desktop) / cartes (mobile) au seuil 710px.
   Les cartes .ps-orders-cartes n'existent qu'en mobile (masquees au-dessus). */
.ps-orders-cartes {
    display: none;
}

@media (max-width: 710px) {
    .ps-orders-table {
        display: none;
    }
    .ps-orders-cartes {
        display: block;
    }
}

/* ============================================================
   CARTES COMMANDE (habillage kraft, cran 3d)
   Enrichit la structure du cran 3c. Visible seulement sous 710px
   (bascule .ps-orders-table / .ps-orders-cartes definie plus haut).
   ============================================================ */

.ps-order-carte {
    /* Cadre + fond de la carte commande (vue mobile, sous 710px).
       !important indispensable : le reset GeneratePress (sélecteur `article`,
       style.css) impose border:none et background:transparent en !important,
       ce qui annule sinon le cadre et le fond de la carte.
       Brun unifié avec les cartes du panier via var(--ps-titre). */
    border: 2px solid var(--ps-titre) !important;
    border-radius: var(--ps-radius);
    background: rgba(228, 208, 178, 0.25) !important;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1rem;
}

/* Tete : numero a gauche, total a droite. */
.ps-order-carte-tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}
.ps-order-carte-num {
    font-family: var(--ps-police-titre);
    font-size: 1.2rem;
    color: var(--ps-bordure-fonce);
    letter-spacing: 0.03em;
}
.ps-order-carte-total {
    font-family: var(--ps-police-titre);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--ps-orange);
    white-space: nowrap;
}

/* Lignes d'infos en 2 colonnes (Date+Etat a gauche, Paiement+Facture a droite),
   remplissage par colonne via grid-auto-flow:column sur 2 rangees. Ordre DOM
   Date, Etat, Paiement, Facture => colonne gauche puis colonne droite. */
.ps-order-carte-infos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 0.5rem;
    margin: 0;
}

/* Chaque champ : sans cadre, libelle marron au-dessus, valeur en dessous. */
.ps-order-carte-champ {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.15rem 0;
    font-family: var(--ps-police-titre);
    font-size: 1rem;
    color: var(--ps-texte);
}
.ps-order-carte-champ dt {
    color: #6B3A2A;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}
.ps-order-carte-champ dd {
    margin: 0;
}

/* Bouton Voir pleine largeur (herite du petit style .ps-order-toggle). */
.ps-order-carte-toggle {
    width: 100%;
    margin-top: 0.8rem;
}

/* Detail deplie : on encadre legerement la zone (le contenu .ps-order-produit
   est deja style et reflue). display:none conserve du cran 3c (etat replie),
   la bascule .ouvert le revele. */
.ps-order-carte-detail {
    display: none;
    margin-top: 0.8rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(76, 53, 28, 0.2);
}
.ps-order-carte-detail.ouvert {
    display: block;
}

.ps-order-produit {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: 0.3rem 0;
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1rem;
    border-bottom: 1px solid rgba(76, 53, 28, 0.1);
}

.ps-order-produit:last-child {
    border-bottom: none;
}

.ps-order-produit-nom {
    flex: 1;
    color: var(--ps-texte);
    text-decoration: none;
}

a.ps-order-produit-nom:hover,
a.ps-order-produit-nom:focus {
    color: #6B4226;
    text-decoration: none;
}

.ps-order-produit-qty {
    color: #6B3A2A;
    white-space: nowrap;
}

.ps-order-produit-prix {
    font-weight: bold;
    color: var(--ps-orange);
    white-space: nowrap;
}


/* ============================================================
   CARTES DEVIS (habillage kraft, calque sur les cartes commande)
   Visibles seulement sous 850px (bascule .ps-devis-table /
   .ps-devis-cartes definie en bas de bloc). Le detail reutilise
   .ps-order-produit* (emis par ps_devis_detail_contenu).
   ============================================================ */

.ps-devis-carte {
    /* Meme habillage que .ps-order-carte (coherence cartes mobiles).
       !important : neutralise le reset GeneratePress (selecteur `article`)
       qui impose border:none/background:transparent en !important. */
    border: 2px solid var(--ps-titre) !important;
    border-radius: var(--ps-radius);
    background: rgba(228, 208, 178, 0.25) !important;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1rem;
}

/* Carte devis expiree : grisee comme la ligne du tableau (.ps-devis-row--expire),
   pour la parite table/carte. Le badge « Expire » reste affiche dans la tete. */
.ps-devis-carte--expire {
    opacity: 0.55;
}

/* Tete : numero (+ badge Expire) a gauche, total orange a droite.
   3 enfants possibles (num, badge, total) => margin-left:auto sur le total
   le colle a droite, num + badge restent groupes a gauche. */
.ps-devis-carte-tete {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}
.ps-devis-carte-num {
    font-family: var(--ps-police-titre);
    font-size: 1.2rem;
    color: var(--ps-bordure-fonce);
    letter-spacing: 0.03em;
}
.ps-devis-carte-total {
    margin-left: auto;
    font-family: var(--ps-police-titre);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--ps-orange);
    white-space: nowrap;
}

/* Infos : une seule paire (Date), libelle au-dessus / valeur dessous. */
.ps-devis-carte-infos {
    margin: 0;
}
.ps-devis-carte-champ {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.15rem 0;
    font-family: var(--ps-police-titre);
    font-size: 1rem;
    color: var(--ps-texte);
}
.ps-devis-carte-champ dt {
    color: #6B3A2A;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}
.ps-devis-carte-champ dd {
    margin: 0;
}

/* Actions en deux rangees (decision Mikou) : ciblage par ROLE (--principale /
   --secondaire), independant de l'ordre DOM. */
.ps-devis-carte-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

/* Rangee principale : Voir + Commander a parts egales, meme hauteur
   (align-items:stretch). Le <form> Commander prend la moitie (flex:1) et son
   bouton remplit sa largeur. */
.ps-devis-carte-actions-ligne--principale {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.ps-devis-carte-actions-ligne--principale .ps-devis-toggle,
.ps-devis-carte-actions-ligne--principale .ps-devis-commander-form {
    flex: 1;
}
.ps-devis-carte-actions-ligne--principale .ps-devis-commander {
    width: 100%;
}

/* Rangee secondaire : PDF (icone + libelle) a gauche, Supprimer (libelle + croix)
   a droite. Les boutons/form sont mis en ligne uniquement DANS la carte (scope
   --secondaire) pour ne pas toucher le tableau desktop. La croix garde ses 2rem
   (form non etire). */
.ps-devis-carte-actions-ligne--secondaire {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.ps-devis-carte-actions-ligne--secondaire .ps-devis-pdf-bouton {
    gap: 0.4rem;
}
.ps-devis-carte-actions-ligne--secondaire .ps-devis-supprimer-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ps-devis-pdf-label,
.ps-devis-supprimer-label {
    font-family: var(--ps-police-titre);
    font-size: 0.9rem;
    color: var(--ps-texte);
}

/* Detail deplie : masque par defaut, revele par .ouvert (pose par le JS
   .ps-devis-toggle). Meme separateur que le detail commande. */
.ps-devis-carte-detail {
    display: none;
    margin-top: 0.8rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(76, 53, 28, 0.2);
}
.ps-devis-carte-detail.ouvert {
    display: block;
}

/* Basculement tableau (desktop) / cartes (mobile) au seuil 850px, dedie aux
   devis et independant du 710 des commandes. La table devis porte aussi
   .ps-orders-table : le 710 commandes la masquerait, mais .ps-devis-table la
   masque deja des 850 => aucun angle mort entre 710 et 850. */
.ps-devis-cartes {
    display: none;
}
@media (max-width: 850px) {
    .ps-devis-table {
        display: none;
    }
    .ps-devis-cartes {
        display: block;
    }
}


/* ── TITRE DE PAGE ───────────────────────────*/

.ps-account-titre-page {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 2.4rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 1rem 0 1.5rem;
}

/* Masquer le titre de page injecté par GeneratePress */
.woocommerce-account .inside-article > header.entry-header {
    display: none !important;
}


/* ── BOUTONS FORMULAIRE EN LIGNE ─────────────*/

.ps-form-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    clear: both;
    margin-top: 1rem;
}

.ps-form-boutons .ps-account-valider {
    margin-top: 0;
    clear: none;
}

/* ── CHAMP MOT DE PASSE AVEC ŒIL ────────────*/

.ps-password-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.ps-password-wrap input[type="password"],
.ps-password-wrap input[type="text"] {
    padding-right: 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Bouton oeil reveler/masquer : 2 SVG (.ps-oeil-ouvert / .ps-oeil-barre), un seul
   visible selon l'etat (.is-revele posee par le JS). Teinte brun kraft via
   currentColor sur les SVG (stroke="currentColor"). */
.ps-password-oeil {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    /* !important : bat le color:#ffffff que GeneratePress impose sur tous les
       <button> ; sans lui, les SVG en currentColor virent au blanc (illisible
       sur le kraft), notamment au survol. */
    color: var(--ps-titre) !important;
    transition: transform 0.12s ease;
}

/* Aucun fond / bordure / halo dans TOUS les etats : neutralise le style natif
   bouton (GeneratePress) qui remontait un fond clair au :focus / :active apres
   le clic (les anciennes regles ne couvraient que :hover / :focus-visible). */
.ps-password-oeil,
.ps-password-oeil:hover,
.ps-password-oeil:focus,
.ps-password-oeil:focus-visible,
.ps-password-oeil:active {
    background: none !important;
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
    color: var(--ps-titre) !important;
}

/* Survol / focus clavier : leger zoom. Conserve translateY(-50%) pour ne pas
   decaler l'oeil verticalement (centre via top:50% + translate). */
.ps-password-oeil:hover,
.ps-password-oeil:focus-visible {
    transform: translateY(-50%) scale(1.15);
}

.ps-password-oeil .ps-oeil-ouvert {
    display: inline-flex;
}

.ps-password-oeil .ps-oeil-ouvert svg,
.ps-password-oeil .ps-oeil-barre svg {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
}

/* Defaut (mot de passe masque) : oeil ouvert visible, barre cache. */
.ps-password-oeil .ps-oeil-barre {
    display: none;
}

/* Etat revele : on inverse. */
.ps-password-oeil.is-revele .ps-oeil-ouvert {
    display: none;
}
.ps-password-oeil.is-revele .ps-oeil-barre {
    display: inline-flex;
}

/* Verrouillages couleur (.ps-order-toggle, .ps-account-btn…) et override petit
   bouton (.ps-order-toggle, .ps-devis-*, .ps-order-payer) déplacés vers
   css/boutons.css (composant kraft partagé chargé globalement). */

/* Frais de port dans le détail commande */
.ps-order-port-prix {
    color: #4f3821 !important;
}

/* Sachet offert dans le détail commande */
.ps-order-cadeau-prix {
    color: var(--ps-vert-bio) !important;
}

/* Code promo dans le détail commande */
.ps-order-promo-prix {
    color: var(--ps-vert-bio) !important;
}


/* ── RESPONSIVE ──────────────────────────────*/

@media (max-width: 600px) {
    .ps-account-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .ps-acc-panel .form-row.form-row-first,
    .ps-acc-panel .form-row.form-row-last {
        float: none;
        width: 100%;
    }

    .ps-order-toggle {
        margin-left: 0;
    }

    .ps-form-boutons {
        flex-direction: column;
        align-items: flex-start;
    }
    .ps-form-boutons .ps-account-valider {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


/* ── CODES PROMO MON COMPTE ──────────────────*/

.ps-promo-mes-codes {
    margin-bottom: 2rem;
}

.ps-promo-code-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
}

.ps-promo-code-item:last-child {
    border-bottom: none;
}

/* Ligne haute : ticket + infos côte à côte */
.ps-promo-code-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.2rem;
}

/* Ticket image avec code par-dessus */
.ps-promo-ticket-wrap {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: auto;
}

.ps-promo-ticket-img {
    width: 140px;
    height: auto;
    display: block;
}

.ps-promo-ticket-code {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--ps-police-titre);
    font-size: 1.6rem;
    color: var(--ps-bordure-fonce);
    letter-spacing: 0.08em;
    white-space: nowrap;
    pointer-events: none;
}

/* Infos : valeur, description, expiry */
.ps-promo-code-infos {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.ps-promo-code-valeur {
    font-family: var(--ps-police-titre);
    font-size: 1.4rem;
    color: var(--ps-orange);
    font-weight: bold;
}

.ps-promo-code-desc {
    font-family: var(--ps-police-titre);
    font-size: 1.1rem;
    color: var(--ps-bordure-fonce);
    font-style: italic;
}

.ps-promo-code-expiry {
    font-family: var(--ps-police-titre);
    font-size: 0.95rem;
    color: #6B3A2A;
}

/* Boutons en bas, pleine largeur */
.ps-promo-code-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ps-promo-form-ligne {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
}

.ps-promo-input--compte {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    background: var(--ps-beige-clair) !important;
    border: var(--ps-bordure-fine) !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 1.05rem !important;
    border-radius: var(--ps-radius) !important;
    width: 220px;
    box-sizing: border-box;
}

.ps-promo-retour {
    margin-top: 0.6rem;
    font-family: var(--ps-police-titre);
    font-size: 1rem;
    min-height: 1.4rem;
}

.ps-promo-ok {
    color: var(--ps-vert-bio);
}

.ps-promo-erreur {
    color: var(--ps-rouge-alerte);
}

.ps-promo-manuel {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(76, 53, 28, 0.2);
}

@media (max-width: 600px) {
    .ps-promo-code-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .ps-promo-input--compte {
        width: 100%;
    }
}

/* ── BOUTON SUPPRIMER MON COMPTE (variant terracotta) ────── */

.ps-account-btn--danger {
    color: var(--ps-titre) !important;
    border-color: var(--ps-titre);
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
}

.ps-account-btn--danger:hover,
.ps-account-btn--danger:active,
.ps-account-btn--danger:focus {
    background:
        radial-gradient(rgba(220, 156, 90, 0.25), rgba(220, 156, 90, 0.25)),
        url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: auto, 6% !important;
    background-clip: padding-box !important;
    color: var(--ps-titre) !important;
}

.ps-account-btn--danger:disabled,
.ps-account-btn--danger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── POPUP SUPPRESSION DE COMPTE ─────────────────────────── */

.ps-popup-wrap--suppression .ps-popup-inner {
    text-align: left;
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    line-height: 1.5;
    font-size: 1.1rem;
}

.ps-suppression-titre {
    font-family: var(--ps-police-titre);
    color: var(--ps-titre);
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 0 1.2rem;
}

.ps-popup-wrap--suppression .ps-popup-inner p {
    margin: 0.6rem 0;
}

.ps-suppression-liste {
    margin: 0.6rem 0 1rem 1.2rem;
    padding: 0;
    list-style: disc;
}

.ps-suppression-liste li {
    margin-bottom: 0.3rem;
}

.ps-suppression-tapez {
    margin-top: 1.2rem !important;
    font-size: 1.05rem;
}

.ps-suppression-input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    font-family: var(--ps-police-titre);
    font-size: 1.1rem;
    color: var(--ps-texte);
    background: var(--ps-beige-clair);
    border: var(--ps-bordure-medium);
    border-radius: var(--ps-radius);
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.ps-suppression-input:focus {
    outline: none;
    border-color: var(--ps-orange);
}

.ps-suppression-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ps-suppression-erreur {
    color: var(--ps-titre);
    text-align: center;
    margin-top: 0.8rem !important;
    min-height: 1.2em;
}

.ps-suppression-admin-info {
    background: #f3e8d4;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--ps-titre);
    margin: 1rem 0 !important;
    font-size: 0.95rem;
}

.ps-popup-wrap--suppression .ps-suppression-image {
    display: block;
    max-width: 320px;
    width: 100%;
    height: auto;
    margin: 0 auto 1.2rem;
}

/* ── PANEL MES DEVIS ─────────────────────────────────────── */

.ps-devis-intro {
    margin-bottom: 1.5rem;
    padding: 1rem 1.2rem;
    background: rgba(200, 168, 130, 0.2);
    border-left: 3px solid rgba(76, 53, 28, 0.25);
    font-family: var(--ps-police-titre);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4f3821;
}

.ps-devis-intro p {
    margin: 0.5rem 0;
}

.ps-devis-intro p:first-child {
    margin-top: 0;
}

.ps-devis-intro p:last-child {
    margin-bottom: 0;
}

/* Encadre « conditions » de l'onglet devis : note discrete, kraft leger, texte
   plus petit que l'intro pour alleger la lecture. */
.ps-devis-conditions {
    background: rgba(228, 208, 178, 0.25);
    border: 1px solid var(--ps-titre);
    border-radius: var(--ps-radius);
    padding: 0.6rem 0.9rem;
    margin: 0.8rem 0 1rem;
    font-family: var(--ps-police-titre);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ps-texte);
}
.ps-devis-conditions p {
    margin: 0.4rem 0;
}
.ps-devis-conditions p:first-child {
    margin-top: 0;
}
.ps-devis-conditions p:last-child {
    margin-bottom: 0;
}

.ps-devis-row--expire {
    opacity: 0.55;
}

.ps-devis-badge-expire {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    background: rgba(125, 43, 11, 0.15);
    border: 1px solid rgba(125, 43, 11, 0.4);
    color: var(--ps-titre);
    font-family: var(--ps-police-titre);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    vertical-align: middle;
}

/* ── BOUTON ICÔNE PDF DANS LE TABLEAU MES DEVIS ──────────── */

.ps-devis-pdf-bouton {
    background: none;
    border: none;
    border-image: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
}

.ps-devis-pdf-bouton:hover,
.ps-devis-pdf-bouton:focus {
    opacity: 1;
    transform: scale(1.05);
    background: none;
    outline: none;
}

.ps-devis-pdf-bouton img {
    display: block;
}

/* Ligne Total en bas du détail (commande + devis) */
.ps-devis-total-ligne,
.ps-order-total-ligne {
    border-top: 1px solid var(--ps-kraft-couleur);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* Popup confirmation suppression devis : plus petite que la popup glossaire.
   Cible la classe modificateur, le reste des règles vient de glossaire.css. */
.ps-popup-wrap--devis-supprimer .ps-popup-cadre {
    width: clamp(280px, 90vw, 420px);
    max-height: none;
}
.ps-popup-wrap--devis-supprimer .ps-popup-inner {
    max-height: none;
    padding: 1.5rem 1.5rem 1.2rem;
}
.ps-popup-wrap--devis-supprimer .ps-devis-supprimer-message {
    font-size: 1.4rem;
    margin: 0 0 0.4rem;
    text-align: center;
}
/* Bouton supprimer un devis : cercle + croix en deux barres arrondies (rendu
   doux, branches courtes qui ne touchent pas le bord). PHP intouché, image
   poubelle.png masquée plus bas. !important : neutralise le cadre kraft hérité
   de .ps-account-btn. position:relative pour ancrer les barres ::before/::after. */
.ps-devis-supprimer {
    position: relative;
    width: 2rem;
    height: 2rem;
    padding: 0 !important;
    box-sizing: border-box;
    background: none !important;
    background-image: none !important;
    border: 2px solid var(--ps-bordure-fonce) !important;
    border-image: none !important;
    border-radius: 50%;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

/* Les deux barres du X : largeur fine, longueur ~50% du cercle, bouts arrondis,
   croisées à ±45° et centrées. */
.ps-devis-supprimer::before,
.ps-devis-supprimer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;                       /* longueur de la barre */
    height: 2px;                         /* épaisseur du trait */
    background: var(--ps-bordure-fonce);
    border-radius: 2px;                  /* bouts arrondis */
    transition: background-color 0.15s ease;
}

.ps-devis-supprimer::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ps-devis-supprimer::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Survol/focus : cercle + croix passent en rouge. */
.ps-devis-supprimer:hover,
.ps-devis-supprimer:focus,
.ps-devis-supprimer:active {
    background: none !important;
    border-color: var(--ps-rouge-alerte) !important;
    box-shadow: none !important;
}

.ps-devis-supprimer:hover::before,
.ps-devis-supprimer:hover::after,
.ps-devis-supprimer:focus::before,
.ps-devis-supprimer:focus::after,
.ps-devis-supprimer:active::before,
.ps-devis-supprimer:active::after {
    background: var(--ps-rouge-alerte);
}
.ps-devis-supprimer img {
    display: none;
}
/* Reset de la marge par défaut des <form> wrappers d'action devis
   (Commander + Supprimer), pour que leurs boutons s'alignent verticalement
   comme les boutons nus (PDF, Voir) dans les cellules vertical-align:middle. */
.ps-devis-commander-form,
.ps-devis-supprimer-form {
    margin: 0;
}
.ps-popup-wrap--devis-supprimer .ps-devis-supprimer-warning {
    font-size: 1.1rem;
    color: #6B4226;
    font-style: italic;
    margin: 0 0 1.2rem;
    text-align: center;
}
.ps-popup-wrap--devis-supprimer .ps-devis-supprimer-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}


/* ============================================
   PAGE LOGIN / REGISTER NON CONNECTÉ
   /mon-compte/ visiteur — page-mon-compte.php
   ============================================ */

/* ── GRILLE 2 COLONNES (desktop) ───────────── */
.ps-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Connexion / inscription : deux colonnes côte à côte sur grand écran,
   empilées en une seule colonne sur petit mobile. */
@media (max-width: 554px) {
    .ps-login-grid {
        grid-template-columns: 1fr;
    }
}

/* ── COLONNE : petit cadre beige discret ──────
   Reproduit le style .ps-account-adresse (bloc
   beige discret DANS le grand cadre kraft).
   Flex column : permet d'aligner les boutons en bas
   des 2 colonnes via margin-top: auto sur .ps-login-actions.
   ─────────────────────────────────────────── */
.ps-login-col {
    background: rgba(200, 168, 130, 0.3);
    border: 1px solid rgba(76, 53, 28, 0.25);
    padding: 1.5rem 1.5rem 1.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Le form occupe tout l'espace restant sous le titre
   pour que margin-top: auto sur .ps-login-actions pousse
   le bouton en bas — alignement vertical entre colonnes. */
.ps-login-col .ps-login-form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── TITRE DE COLONNE (Se connecter / S'inscrire) */
.ps-login-titre {
    font-family: var(--ps-police-titre);
    color: var(--ps-titre);
    font-size: 1.7rem;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

/* ── INPUTS — réplique du pattern .ps-acc-panel
   pour cohérence avec les formulaires d'adresse
   ─────────────────────────────────────────── */
.ps-login-col input[type="text"],
.ps-login-col input[type="email"],
.ps-login-col input[type="password"] {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    background: var(--ps-beige-clair) !important;
    border: var(--ps-bordure-fine) !important;
    padding: 0.4rem 0.8rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.05rem !important;
    border-radius: var(--ps-radius) !important;
    outline: none !important;
}

.ps-login-col input:focus {
    border-color: var(--ps-orange) !important;
    background: rgba(200, 168, 130, 0.25) !important;
}

/* ── LABELS ─────────────────────────────────── */
.ps-login-col label {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.3rem;
}

.ps-login-col .required {
    color: var(--ps-titre);
}

/* ── ESPACEMENT DES LIGNES DE FORMULAIRE ───── */
.ps-login-col .ps-login-row {
    margin-bottom: 1rem;
}

/* ── BLOC ACTIONS (bouton submit centré) ─────
   margin-top: auto pousse le bouton tout en bas
   de la colonne (flex column parent) — alignement
   vertical garanti entre "Se connecter" et "S'inscrire". */
.ps-login-col .ps-login-actions {
    margin-top: auto;
    text-align: center;
}

/* ── LIGNE OPTIONS LOGIN (case Souvenir + lien mot de passe) */
.ps-login-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
}

.ps-login-col .woocommerce-form-login__rememberme {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
}

.ps-login-col .woocommerce-form__input-checkbox {
    margin: 0;
    accent-color: var(--ps-titre);
}

/* ── LIEN "Mot de passe perdu ?" ──────────────
   Lien inline dans .ps-login-options-row (à droite
   de la case "Se souvenir de moi"). */
.ps-login-lost {
    font-family: var(--ps-police-titre);
    font-size: 1rem;
    color: var(--ps-orange);
    text-decoration: underline;
}

.ps-login-lost:hover {
    color: var(--ps-titre);
}

/* ── TEXTE RGPD (sorti par hook WC) ────────── */
.ps-login-col .woocommerce-privacy-policy-text {
    font-family: var(--ps-police-titre);
    color: var(--ps-bordure-fonce);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    font-style: italic;
}

.ps-login-col .woocommerce-privacy-policy-text a {
    color: var(--ps-orange);
    text-decoration: underline;
}


/* ============================================================
   ÉCRANS DE RÉCUPÉRATION DE MOT DE PASSE (kraft)
   Formulaires WooCommerce « mot de passe perdu » et « nouveau mot
   de passe », rendus dans le cadre kraft via le routeur Mon compte.
   Ils portent la classe .woocommerce-ResetPassword, absente du
   checkout : scope sûr (pas de fuite sur la page de paiement).
   Champ et bouton calqués sur le login kraft ; boîte de notice
   calquée sur celle du checkout, re-scopée .woocommerce-account
   (checkout.css n'est pas chargé sur la page compte).
   ============================================================ */

/* Champ de saisie */
.woocommerce-ResetPassword input.input-text {
    font-family: var(--ps-police-titre) !important;
    color: var(--ps-texte) !important;
    background: var(--ps-beige-clair) !important;
    border: var(--ps-bordure-fine) !important;
    padding: 0.4rem 0.8rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1.05rem !important;
    border-radius: var(--ps-radius) !important;
    outline: none !important;
}

.woocommerce-ResetPassword input.input-text:focus {
    border-color: var(--ps-orange) !important;
    background: rgba(200, 168, 130, 0.25) !important;
}

/* Libellés et espacement des lignes */
.woocommerce-ResetPassword label {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.3rem;
}

.woocommerce-ResetPassword .form-row {
    margin-bottom: 1rem;
}

/* Bouton kraft (calqué sur .ps-account-valider) */
.woocommerce-ResetPassword button {
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: 6% !important;
    border: 2px solid var(--ps-titre) !important;
    border-image: url('../images/border.png') 24 24 / 12px 12px / 0 round;
    padding: 6px 24px 8px;
    cursor: pointer;
    display: inline-block;
    margin-top: 1rem;
    transition: background 0.2s;
    clear: both;
}

.woocommerce-ResetPassword button:hover {
    background:
        radial-gradient(rgba(220, 156, 90, 0.25), rgba(220, 156, 90, 0.25)),
        url('../images/kraft-long.jpg') var(--ps-kraft-couleur) !important;
    background-size: auto, 6% !important;
    background-clip: padding-box !important;
    color: var(--ps-texte) !important;
}

/* Verrou couleur texte du bouton (anti-blanc Firefox, tous états) */
.woocommerce-ResetPassword button,
.woocommerce-ResetPassword button:hover,
.woocommerce-ResetPassword button:active,
.woocommerce-ResetPassword button:focus,
.woocommerce-ResetPassword button:visited {
    color: var(--ps-texte) !important;
}

/* Boîte de notice kraft (calquée sur le checkout, re-scopée page compte) */
body.woocommerce-account .woocommerce-error {
    background-color: rgba(192, 57, 43, 0.08) !important;
    border: 2px solid var(--ps-notice-erreur) !important;
    border-top: 2px solid var(--ps-notice-erreur) !important;
    box-shadow: 0 0 18px 4px rgba(230, 100, 50, 0.35);
    color: var(--ps-texte);
    padding: 1rem 1.25rem;
    list-style: none;
    margin: 0 0 1.5rem 0;
    font-family: var(--ps-police-titre);
    font-size: 1.05rem;
    line-height: 1.5;
    border-radius: 0;
}

body.woocommerce-account .woocommerce-error li,
body.woocommerce-account .woocommerce-message li,
body.woocommerce-account .woocommerce-info li {
    margin: 0.25rem 0;
    background: transparent !important;
    border: none !important;
}

body.woocommerce-account .woocommerce-message {
    background-color: var(--ps-notice-fond) !important;
    border: 2px solid var(--ps-notice-succes) !important;
    border-top: 2px solid var(--ps-notice-succes) !important;
    color: var(--ps-texte);
    padding: 1rem 1.25rem;
    list-style: none;
    margin: 0 0 1.5rem 0;
    font-family: var(--ps-police-titre);
    font-size: 1.05rem;
    line-height: 1.5;
    border-radius: 0;
}

body.woocommerce-account .woocommerce-info {
    background-color: var(--ps-notice-fond) !important;
    border: 2px solid #6B4226 !important;
    border-top: 2px solid #6B4226 !important;
    color: var(--ps-texte);
    padding: 1rem 1.25rem;
    list-style: none;
    margin: 0 0 1.5rem 0;
    font-family: var(--ps-police-titre);
    font-size: 1.05rem;
    line-height: 1.5;
    border-radius: 0;
}

/* Notices focalisees par programme au chargement (WC scroll-to-notice) :
   pas d'anneau de focus du navigateur sur un conteneur non interactif.
   Les liens internes (ex. mot de passe oublie) gardent leur propre focus. */
body.woocommerce-account .woocommerce-message:focus,
body.woocommerce-account .woocommerce-error:focus,
body.woocommerce-account .woocommerce-info:focus {
    outline: none;
}

/* Icone native WooCommerce posee en ::before/::after du CONTENEUR de notice
   (pastille ronde rouge "!", coche, ⓘ) : neutralisee, choix "sans icone"
   homogene avec le checkout. Meme patron que cart.css (.ps-promo-erreurs). */
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account ul.woocommerce-error::before,
body.woocommerce-account div.woocommerce-error::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account ul.woocommerce-message::before,
body.woocommerce-account div.woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account ul.woocommerce-info::before,
body.woocommerce-account div.woocommerce-info::before,
body.woocommerce-account .woocommerce-error::after,
body.woocommerce-account .woocommerce-message::after,
body.woocommerce-account .woocommerce-info::after {
    content: none !important;
    display: none !important;
}

/* Masque l'œil natif WC et l'indicateur de force du mot de passe : le thème
   fournit son propre œil kraft. Déplacé depuis un <style> inline (AUDIT-030). */
.woocommerce-password-strength,
.show-password-input {
    display: none !important;
}


/* ═══ MON HISTORIQUE (Brique 3) — cartes anciennes commandes SPIP ═══
   Habillage calqué sur les cartes de commande mobiles (.ps-order-carte*) :
   mêmes variables --ps-* et mêmes rgba, aucune couleur nouvelle. Le bloc
   détail réutilise .ps-order-carte-detail / .ps-order-detail-wrap (déjà
   stylés plus haut), le bouton Voir réutilise .ps-account-btn.ps-order-toggle
   (boutons.css). */

/* Conteneur des cartes */
.ps-histo-liste {
    margin-top: 0.5rem;
}

/* Une carte = une commande. <article> → !important requis (reset GeneratePress). */
.ps-histo-carte {
    border: 2px solid var(--ps-titre) !important;
    border-radius: var(--ps-radius);
    background: rgba(228, 208, 178, 0.25) !important;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1rem;
}

/* En-tête : infos à gauche, total + bouton à droite, aligné baseline. */
.ps-histo-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    border-bottom: 1px solid rgba(76, 53, 28, 0.2);
    padding-bottom: 0.6rem;
}
.ps-histo-ref {
    font-family: var(--ps-police-titre);
    font-size: 1.2rem;
    color: var(--ps-bordure-fonce);
    letter-spacing: 0.03em;
}
.ps-histo-date,
.ps-histo-mode {
    font-family: var(--ps-police-titre);
    font-size: 1rem;
    color: var(--ps-texte);
}
.ps-histo-total {
    font-family: var(--ps-police-titre);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--ps-orange);
    white-space: nowrap;
    margin-left: auto;   /* pousse le total à droite */
}
/* Le bouton Voir (.ps-account-btn.ps-order-toggle) est déjà stylé globalement. */
.ps-histo-tete .ps-order-toggle {
    margin-left: 0.6rem;
}

/* Liste des articles, à l'intérieur du .ps-order-detail-wrap (déjà stylé). */
.ps-histo-lignes {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ps-histo-ligne {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(76, 53, 28, 0.12);
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
}
.ps-histo-ligne:last-child {
    border-bottom: none;
}
.ps-histo-ligne-libelle {
    flex: 1;
}
.ps-histo-ligne-qte {
    color: #6B3A2A;
    white-space: nowrap;
}
.ps-histo-ligne-montant {
    color: var(--ps-prix);
    white-space: nowrap;
    font-weight: bold;
}
/* Ligne de frais de port : discrète, en retrait. */
.ps-histo-ligne--port {
    font-style: italic;
    opacity: 0.85;
}
.ps-histo-ligne--port .ps-histo-ligne-montant {
    font-weight: normal;
}

/* Petit écran : l'en-tête s'empile, le total reprend sa place à gauche. */
@media (max-width: 599px) {
    .ps-histo-total {
        margin-left: 0;
    }
    .ps-histo-tete .ps-order-toggle {
        margin-left: 0;
        width: 100%;
    }
}


/* ── Encart anciens clients (page connexion) ──
   Bloc d'information au-dessus de la grille connexion / inscription :
   comptes SPIP importés sans mot de passe (MIGRATION_CLIENTS §8).
   Palette calquée sur .ps-histo-carte (mêmes fond/bordure, aucune
   couleur nouvelle). Pleine largeur du conteneur, comme .ps-login-grid :
   aucune largeur fixe, l'encart se comprime naturellement sur mobile. */
.ps-encart-anciens-clients {
    border: 2px solid var(--ps-titre);
    border-radius: var(--ps-radius);
    background: rgba(228, 208, 178, 0.25);
    padding: 1.2rem 1.5rem 1.3rem;
    margin: 1.5rem 0;
    box-sizing: border-box;
    font-family: var(--ps-police-titre);
    color: var(--ps-texte);
    font-size: 1.05rem;
    line-height: 1.55;
}

.ps-encart-anciens-clients p {
    margin: 0;
}

/* Titre volontairement plus discret que les h2 .ps-login-titre (1.7rem)
   pour ne pas concurrencer les colonnes Se connecter / S'inscrire. */
.ps-encart-anciens-clients-titre {
    font-family: var(--ps-police-titre);
    color: var(--ps-titre);
    font-size: 1.35rem;
    margin: 0 0 0.6rem;
    letter-spacing: 0.02em;
}