/**
 * Gabarit « Mon compte » — nav latérale persistante à gauche, contenu à droite.
 *
 * AUCUNE VALEUR VISUELLE NE S'INVENTE ICI. Les couleurs viennent des réglages du
 * tiroir (--ckwc-acc-*, posées en style inline sur .ckwc-acc-scope) ; quand un
 * réglage est vide, la teinte est DÉRIVÉE de l'encre du site
 * (color-mix sur --ck-form-text). Les rayons et espacements passent par
 * --ck-radius-* / --ck-space-*, les champs par --ck-form-*. Les littéraux ne
 * sont là que comme replis de var() — un site qui change sa charte fait suivre
 * cette page sans toucher un réglage.
 */

.ckwc-acc-scope {
    /* L'encre du site, et tout ce qui s'en déduit. */
    --acc-ink:       var(--ck-form-text, #16181c);
    --acc-line:      var(--ckwc-acc-line, color-mix(in srgb, var(--ck-form-text, #16181c) 13%, transparent));
    --acc-line-soft: var(--ckwc-acc-line, color-mix(in srgb, var(--ck-form-text, #16181c) 8%, transparent));
    --acc-muted:     var(--ckwc-acc-muted, color-mix(in srgb, var(--ck-form-text, #16181c) 55%, transparent));
    --acc-hover:     color-mix(in srgb, var(--ck-form-text, #16181c) 4%, transparent);
    --acc-card:      var(--ckwc-acc-card-bg, var(--ck-form-bg, #fff));
    --acc-accent:    var(--ckwc-acc-accent, var(--ck-form-accent, var(--ck-form-text, #16181c)));
    --acc-accent-fg: var(--ckwc-acc-accent-fg, #fff);

    /* Géométrie — chaque valeur est un réglage du tiroir, avec le jeton du
       design system en repli. */
    --acc-r:      var(--ckwc-acc-radius, var(--ck-radius-lg, 12px));
    --acc-r-sm:   var(--ck-radius, 8px);
    --acc-pad:    var(--ckwc-acc-pad, var(--ck-space-lg, 20px));
    --acc-gap:    var(--ckwc-acc-gap, var(--ck-space-2xl, 44px));
    --acc-vgap:   var(--ckwc-acc-vgap, var(--ck-space-md, 14px));
    --acc-nav:    var(--ckwc-acc-nav, 212px);
    --acc-pt:     var(--ckwc-acc-pt, 32px);
    --acc-pt-m:   var(--ckwc-acc-pt-m, 24px);
    --acc-pb:     var(--ckwc-acc-pb, 50px);
    --acc-pb-m:   var(--ckwc-acc-pb-m, 32px);
    --acc-px:     var(--ckwc-acc-px, 24px);
    --acc-px-m:   var(--ckwc-acc-px-m, 18px);

    /* L'entrée de navigation se règle : rayon, hauteur, retrait. */
    --acc-nav-r:     var(--ckwc-acc-nav-radius, var(--ck-radius, 8px));
    --acc-nav-pad-y: var(--ckwc-acc-nav-pad-y, 10px);
    --acc-nav-pad-x: var(--ckwc-acc-nav-pad-x, 13px);

    color: var(--acc-ink);
    font-family: var(--ck-form-font, inherit);

    /* ENVELOPPE CONTRAINTE — la règle qui manquait.
       Elementor monte ses conteneurs en flex : cette enveloppe est donc un
       ÉLÉMENT FLEX, et un élément flex se dimensionne par défaut sur son
       contenu (`flex-basis:auto`) sans jamais descendre sous sa largeur
       minimale (`min-width:auto`). Résultat : dès que le contenu était plus
       large que la place disponible, le bloc débordait — la colonne sortait à
       gauche en desktop, la carte était coupée à droite en mobile. Et
       `max-width` n'y pouvait rien : il plafonne, il ne ramène pas.
       `width:100%` + `min-width:0` rendent l'enveloppe obéissante. */
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.ckwc-acc-scope *,
.ckwc-acc-scope *::before,
.ckwc-acc-scope *::after { box-sizing: border-box; }

/* ─────────────────────────────────────────────────────────────
   Le châssis
   ───────────────────────────────────────────────────────────── */

/* LA LARGEUR EST CELLE D'ELEMENTOR. `--container-max-width` est la variable que
   pose Elementor pour la largeur de contenu du site (Réglages du site › Mise en
   page › Largeur du contenu) : elle vit sur `.e-con` et descend par héritage
   jusqu'ici. On la reprend telle quelle — aucune valeur n'est écrite dans le
   plugin, et changer la largeur du site change cette page avec.

   Le repli `100%` couvre le cas où la page n'est pas montée dans un conteneur
   Elementor : la largeur est alors celle de ce qui l'enveloppe, comme avant. */
.ckwc-acc {
    display: grid;
    /* `minmax(0, …)` sur les DEUX colonnes : sans lui, une piste de grille se
       refuse à passer sous la largeur minimale de son contenu (un e-mail long,
       un nom de produit) et pousse la grille au-delà du conteneur. */
    grid-template-columns: minmax(0, var(--acc-nav)) minmax(0, 1fr);
    gap: var(--acc-gap);
    align-items: start;
    width: 100%;
    max-width: var(--container-max-width, 100%);
    margin-inline: auto;
    /* L'air autour de la page — les quatre côtés, réglables, avec leur valeur
       mobile. La marge est portée par la GRILLE : la colonne étant collante,
       une marge posée sur le dernier enfant la laisserait sans respiration. */
    padding: var(--acc-pt) var(--acc-px) var(--acc-pb);
}

/* Pas connecté : une seule colonne. Sa largeur reste celle du conteneur —
   aucune valeur ici non plus. */
.ckwc-acc--out { grid-template-columns: minmax(0, 1fr); }

/* Les deux colonnes doivent pouvoir rétrécir, pas seulement le contenu. */
.ckwc-acc__main,
.ckwc-acc__side { min-width: 0; }

/* ── La colonne ── */

/* Le décalage est un réglage (Navigation › « Distance du haut ») : sur
   un site à en-tête collant, 24 px laissent la nav sous l'en-tête. */
.ckwc-acc__side.is-sticky {
    position: sticky;
    top: var(--ckwc-acc-sticky-top, var(--ck-space-xl, 24px));
}

.ckwc-acc__me {
    padding-bottom: var(--ck-space-lg, 18px);
    margin-bottom: var(--ck-space-md, 14px);
    border-bottom: 1px solid var(--acc-line);
}
.ckwc-acc__me b {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.ckwc-acc__me span {
    display: block;
    margin-top: 0.15em;
    font-size: 0.8125rem;
    color: var(--acc-muted);
    /* Une adresse e-mail est un mot insécable : sans ceci, c'est ELLE qui fixe
       la largeur minimale de la colonne, et la grille déborde. */
    overflow-wrap: anywhere;
}

.ckwc-acc__nav { display: flex; flex-direction: column; gap: 2px; }

.ckwc-acc__nav a {
    display: flex;
    align-items: center;
    gap: var(--ck-space-sm, 10px);
    padding: var(--acc-nav-pad-y) var(--acc-nav-pad-x);
    border-radius: var(--acc-nav-r);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--acc-muted);
    transition: background-color .15s ease, color .15s ease;
}
.ckwc-acc__nav a:hover,
.ckwc-acc__nav a:focus-visible { background: var(--acc-hover); color: var(--acc-ink); }
.ckwc-acc__nav a[aria-current] { background: var(--acc-accent); color: var(--acc-accent-fg); }

.ckwc-acc__nav svg {
    width: 1.0625em;
    height: 1.0625em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ckwc-acc__out {
    margin-top: var(--ck-space-md, 12px);
    padding-top: var(--ck-space-md, 12px);
    border-top: 1px solid var(--acc-line);
}
.ckwc-acc__out a {
    display: inline-block;
    padding-inline: 0.8em;
    font-size: 0.8125rem;
    color: var(--acc-muted);
    text-decoration: none;
}
.ckwc-acc__out a:hover { color: var(--acc-ink); }

/* ── En-tête de section ── */

.ckwc-acc__head { margin-bottom: var(--ck-space-xl, 22px); }
.ckwc-acc__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
}
.ckwc-acc__sub {
    margin: 0.4em 0 0;
    font-size: 0.875rem;
    color: var(--acc-muted);
}
/* Le détail d'une commande : le numéro et sa pastille sur la même ligne. */
.ckwc-acc__head--order {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    column-gap: var(--ck-space-md, 12px);
}
.ckwc-acc__head--order .ckwc-acc__sub { grid-column: 1 / -1; }

.ckwc-acc__notices:empty { display: none; }

/* ─────────────────────────────────────────────────────────────
   Cartes
   ───────────────────────────────────────────────────────────── */

.ckwc-acc-card {
    background: var(--acc-card);
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-r);
}
.ckwc-acc-card + .ckwc-acc-card,
.ckwc-acc-card + .ckwc-acc-pager,
.ckwc-acc-acts + .ckwc-acc-card { margin-top: var(--acc-vgap); }

.ckwc-acc-card--pad { padding: var(--acc-pad); }

/* La carte s'efface quand la LIGNE en est une (voir CKWC_Compte_Page::render_orders) :
   sans ça, son cadre et celui de la ligne se doublent. */
.ckwc-acc-card--bare {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ckwc-acc-card__top {
    padding: var(--acc-pad);
    border-bottom: 1px solid var(--acc-line-soft);
}
.ckwc-acc-card__top h2,
.ckwc-acc-card__h {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ckwc-acc-card__h3 {
    margin: var(--ck-space-xl, 24px) 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
}
.ckwc-acc-help {
    margin: 0.35em 0 0;
    font-size: var(--ck-form-help-size, 0.8125rem);
    color: var(--ck-form-help-color, var(--acc-muted));
}

/* ─────────────────────────────────────────────────────────────
   La liste des commandes
   ───────────────────────────────────────────────────────────── */

/* LA CARTE D'UNE COMMANDE se règle dans son propre volet du tiroir (Carte de
   commande) : fond, survol, bordure, rayon, marges, espace entre les lignes,
   filet, et les trois couleurs de texte. Rien n'est décidé ici — chaque valeur
   est un réglage, avec le rendu actuel pour défaut. */
.ckwc-acc-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ckwc-acc-row-gap, 0px);
}
/* Le filet ne sépare que des lignes COLLÉES : dès qu'elles sont espacées ou
   qu'elles ont un fond à elles, il n'a plus rien à séparer. */
/* Cette règle est plus spécifique (0,3,0) que celle de la ligne (0,1,0) : elle
   réimposait donc 1 px en haut quelle que soit l'épaisseur réglée — l'épaisseur
   semblait « ne pas fonctionner » alors qu'elle s'appliquait aux trois autres
   côtés. `max()` fait gagner la valeur réglée dès qu'elle dépasse le filet, et
   la couleur suit celle de la bordure quand elle est choisie. */
.ckwc-acc-card:not(.is-nosep) .ckwc-acc-row + .ckwc-acc-row {
    border-top-style: solid;
    border-top-width: max(var(--ckwc-acc-row-bw, 0px), 1px);
    border-top-color: var(--ckwc-acc-row-bc, var(--acc-line-soft));
}

.ckwc-acc-row {
    display: flex;
    align-items: center;
    gap: var(--ck-space-md, 14px);
    padding: var(--ckwc-acc-row-pad-y, 14px) var(--ckwc-acc-row-pad-x, var(--acc-pad));
    background: var(--ckwc-acc-row-bg, transparent);
    border: var(--ckwc-acc-row-bw, 0px) solid var(--ckwc-acc-row-bc, var(--acc-line));
    border-radius: var(--ckwc-acc-row-radius, 0px);
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}
.ckwc-acc-row:hover,
.ckwc-acc-row:focus-visible { background: var(--ckwc-acc-row-hover, var(--acc-hover)); }


.ckwc-acc-row__txt { flex: 1; min-width: 0; }
.ckwc-acc-row__txt b {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ckwc-acc-row-title, inherit);
}
.ckwc-acc-row__meta {
    display: block;
    margin-top: 0.15em;
    font-size: 0.8125rem;
    color: var(--ckwc-acc-row-meta, var(--acc-muted));
}
.ckwc-acc-row__sep { opacity: .5; }
.ckwc-acc-row__price {
    flex: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}
.ckwc-acc-row__price del { opacity: .5; font-weight: 400; }

.ckwc-acc-chev {
    width: 1em;
    height: 1em;
    flex: none;
    stroke: var(--ckwc-acc-row-chev, var(--acc-muted));
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Pastille de statut. Les trois tons se dérivent de l'accent et de l'encre :
   aucune couleur « verte » ou « orange » n'est écrite ici, sinon un site à la
   charte sombre hériterait de nos teintes plutôt que des siennes. */
.ckwc-acc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.ckwc-acc-pill.is-wait { color: var(--acc-accent); }
.ckwc-acc-pill.is-ok   { color: color-mix(in srgb, var(--acc-ink) 78%, transparent); }
.ckwc-acc-pill.is-off  { color: var(--ck-form-error-color, color-mix(in srgb, var(--acc-ink) 45%, transparent)); }

/* Vide */
.ckwc-acc-empty { padding: calc(var(--acc-pad) * 2) var(--acc-pad); text-align: center; }
.ckwc-acc-empty p { margin: 0 0 var(--ck-space-lg, 18px); color: var(--acc-muted); }

/* Pagination */
.ckwc-acc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-lg, 18px);
    font-size: 0.875rem;
    color: var(--acc-muted);
}
.ckwc-acc-pager a { color: var(--acc-ink); text-decoration: none; text-underline-offset: 3px; }
.ckwc-acc-pager a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   Le détail d'une commande
   ───────────────────────────────────────────────────────────── */

.ckwc-acc-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-bottom: var(--ck-space-md, 14px);
    font-size: 0.8125rem;
    color: var(--acc-muted);
    text-decoration: none;
}
.ckwc-acc-back:hover { color: var(--acc-ink); }
.ckwc-acc-back svg {
    width: 1em; height: 1em;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.ckwc-acc-acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ck-space-sm, 8px);
    margin-bottom: var(--acc-vgap);
}

/* Les lignes d'articles sont LE composant partagé du widget Panier
   (.ckwc-panier__*), chargé en dépendance : rien à styler ici. Seul reste
   l'espacement du bloc dans la carte. */
/* AUCUNE MARGE EMPRUNTÉE. Le conteneur du widget et son enveloppe ne portent
   plus rien : la ligne va d'un bord à l'autre de la carte, et c'est ELLE qui
   porte le retrait du texte — celui de la carte, pour tomber sous le titre.
   Le retrait vertical reste celui du designer Panier (--ckwc-cart-item-pad). */
.ckwc-acc-scope .ckwc-panier-scope,
.ckwc-acc-scope .ckwc-panier { padding: 0; margin: 0; }
.ckwc-acc-scope .ckwc-panier,
.ckwc-acc-scope .ckwc-panier__items { width: 100%; min-width: 0; }
.ckwc-acc-scope .ckwc-panier__item { padding-inline: var(--acc-pad); }

/* L'« OMBRE » SOUS LES ARTICLES : DEUX FILETS, PAS UNE OMBRE.
   La ligne du widget Panier porte un filet bas — il sépare deux articles.
   Le dernier article n'a rien sous lui : son filet tombe alors à 1 px du
   cadre de la carte (ou du filet des totaux, qui porte le sien). Deux traits
   gris quasi collés ne se lisent pas comme deux traits : ils se lisent comme
   un bord flou, une ombre qu'on n'a jamais déclarée. On retire celui qui ne
   sépare rien — et le cadre de la carte redevient net, comme celui de
   « Adresse de livraison » juste en dessous. */
.ckwc-acc-scope .ckwc-panier--lines .ckwc-panier__item:last-child { border-bottom: 0; }

.ckwc-acc-totals {
    margin: 0;
    padding: var(--ck-space-md, 14px) var(--acc-pad) var(--acc-pad);
    border-top: 1px solid var(--acc-line-soft);
    font-size: 0.875rem;
}
.ckwc-acc-totals > div { display: flex; align-items: baseline; gap: var(--ck-space-md, 12px); }
.ckwc-acc-totals > div + div { margin-top: 0.35em; }
.ckwc-acc-totals dt { margin: 0; color: var(--acc-muted); font-weight: 400; }
.ckwc-acc-totals dd { margin: 0 0 0 auto; text-align: right; }
.ckwc-acc-totals .is-total {
    margin-top: 0.6em;
    padding-top: 0.6em;
    border-top: 1px solid var(--acc-line-soft);
}
.ckwc-acc-totals .is-total dt { color: var(--acc-ink); font-weight: 600; }
.ckwc-acc-totals .is-total dd { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.ckwc-acc-totals .tax_label { font-size: 0.75rem; font-weight: 400; opacity: .65; }

.ckwc-acc-note {
    margin: 0;
    padding: var(--ck-space-md, 14px) var(--acc-pad) var(--acc-pad);
    font-size: 0.875rem;
    color: var(--acc-muted);
}
.ckwc-acc-addr { margin: 0.4em 0 0; font-style: normal; line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────
   Boutons
   ───────────────────────────────────────────────────────────── */

/* LES BOUTONS SONT CEUX DE CERCLEKIT. Le rendu pose `ck-btn ck-btn--{aspect}`
   et l'aspect choisi dans Création › Boutons fait tout le travail — c'est le
   même geste que la boucle produit, le mini-panier et le devis.

   Les règles ci-dessous ne s'appliquent QUE si aucun aspect n'est choisi
   (`:not([class*="ck-btn--"])`, la garde qu'utilise déjà cercle-form.css pour
   son bouton d'envoi). Dès qu'un aspect est là, on ne déclare plus rien : nos
   déclarations écraseraient les siennes, et le bouton du compte finirait par
   ne ressembler à aucun autre bouton du site. */
.ckwc-acc-scope .ckwc-acc-btn.ck-btn:not([class*="ck-btn--"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    padding: 0.6em 1.1em;
    border-radius: var(--ck-radius, 8px);
    border: 1px solid var(--acc-accent);
    background: var(--acc-accent);
    color: var(--acc-accent-fg);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s ease;
}
.ckwc-acc-scope .ckwc-acc-btn.ck-btn:not([class*="ck-btn--"]):hover { opacity: .88; }
/* ─────────────────────────────────────────────────────────────
   Formulaires — CEUX DE CERCLEKIT, on n'en dessine aucun

   Les champs portent `ck-form` / `ck-form-grid` / `ck-f` / `ck-f-label` /
   `ck-f-input`, et c'est `cercle-form.css` (chargé en dépendance) plus le
   bouclier de Création › Forms qui posent hauteur, rayon, bordure, police,
   focus et libellés. Une hauteur ou un rayon écrit ici battrait le réglage du
   site en silence : le compte serait le seul écran hors charte.

   Ce qui suit est donc UNIQUEMENT ce que le parent ne peut pas savoir : la
   mise en page autour du formulaire, et la neutralisation des floats que
   WooCommerce pose sur `.form-row`.
   ───────────────────────────────────────────────────────────── */

.ckwc-acc-form { margin: 0; }
.ckwc-acc-form__foot {
    margin-top: var(--ck-space-xl, 22px);
    padding-top: var(--ck-space-lg, 18px);
    border-top: 1px solid var(--acc-line-soft);
}
.ckwc-acc-card__h + .ck-form-grid,
.ckwc-acc-card__h3 + .ck-form-grid,
.ckwc-acc-help + .ck-form-grid { margin-top: var(--ck-space-lg, 16px); }

/* WooCommerce fait flotter ses `.form-row` et leur donne une largeur en
   pourcentage. Dans la grille du parent, ces deux réflexes cassent la
   colonne — on les annule, sans toucher à l'apparence du champ. */
.ckwc-acc-scope .ck-form-grid .form-row {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}
/* `woocommerce_form_field()` enveloppe le contrôle ; l'enveloppe doit
   s'étirer, sinon un select rendu par select2 garde sa largeur intrinsèque. */
.ckwc-acc-scope .ck-form-grid .woocommerce-input-wrapper,
.ckwc-acc-scope .ck-form-grid .select2-container { width: 100%; }

/* Select2 monte son propre bouton par-dessus le `<select>` : il ne reçoit donc
   pas `ck-f-input`. On lui fait porter les MÊMES variables — pas des valeurs à
   nous — pour qu'il ait la tête d'un champ CercleKit. */
.ckwc-acc-scope .ck-form-grid .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: var(--ck-form-height, 46px);
    padding: 0 var(--ck-form-pad-x, 14px);
    border-style: solid;
    border-width: var(--ck-form-border-width, 1px);
    border-color: var(--ck-form-border-color, var(--acc-line));
    border-radius: var(--ck-form-radius, var(--ck-radius, 8px));
    background: var(--ck-form-bg, var(--acc-card));
}
.ckwc-acc-scope .ck-form-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: inherit;
    color: var(--ck-form-text, inherit);
    font-size: var(--ck-form-size, inherit);
}
.ckwc-acc-scope .ck-form-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: var(--ck-form-pad-x, 14px);
}

/* Le formulaire de connexion vient d'un template de WooCommerce : ses classes
   sont écrites en dur, et le rendu leur ajoute `ck-f-label` / `ck-f-input`
   (voir CKWC_Compte_Page::ck_form_skin). Il ne reste ici que l'empilement. */
.ckwc-acc-scope .woocommerce-form-login,
.ckwc-acc-scope .woocommerce-form-register {
    margin: 0;
    padding: 0;
    border: 0;
}
.ckwc-acc-scope .woocommerce-form-login .form-row,
.ckwc-acc-scope .woocommerce-form-register .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 var(--ck-form-gap, var(--ck-space-lg, 16px));
    padding: 0;
    float: none;
    width: auto;
}
.ckwc-acc-scope .woocommerce-form-login .woocommerce-form-login__rememberme {
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

/* LE BOUTON NE S'ÉTIRE PAS. Les lignes ci-dessus sont des conteneurs flex en
   colonne, et un conteneur flex étire ses enfants sur l'axe croisé : le bouton
   partait donc sur toute la largeur sans qu'aucune largeur ne soit écrite nulle
   part — d'où la barre pleine à la place du bouton de l'aspect. `align-self`
   le ramène à sa taille, sans toucher aux champs (qui, eux, tiennent leur
   largeur de `--ck-form-*`). */
.ckwc-acc-scope .woocommerce-form-login .ckwc-acc-btn,
.ckwc-acc-scope .woocommerce-form-register .ckwc-acc-btn { align-self: flex-start; }
.ckwc-acc-scope .woocommerce-LostPassword { margin: 0; font-size: 0.8125rem; }
.ckwc-acc-scope .woocommerce-LostPassword a { color: var(--acc-muted); }

/* ─────────────────────────────────────────────────────────────
   Déconnecté : UNE carte, centrée et étroite

   Un seul formulaire à l'écran, puis une phrase-lien vers l'autre. Pas
   d'onglets, pas de deux colonnes : c'est la convention, et deux murs de
   champs ne se comparent pas — ils se subissent.
   ───────────────────────────────────────────────────────────── */

.ckwc-acc-auth {
    /* La seule largeur du gabarit, et elle est réglable. Elle ne concerne QUE
       cet écran : un formulaire seul au milieu d'une page large se lit mal,
       alors que la page connectée, elle, suit la largeur d'Elementor. */
    max-width: var(--ckwc-acc-auth-max, 540px);
    margin-inline: auto;
}

.ckwc-acc-auth__h {
    margin: 0 0 var(--ck-space-lg, 18px);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.ckwc-acc-auth__foot { margin-top: var(--ck-space-xl, 22px); }

/* L'erreur de connexion est un BANDEAU WOOCOMMERCE (`ul.woocommerce-error`) :
   son fond, son liseré, sa couleur d'icône et sa taille de texte viennent du
   module Badge (Custom › Badge), comme tous les autres messages du site. On ne
   redéclare donc RIEN de son apparence — seulement sa place dans la carte. */
.ckwc-acc-auth__err {
    margin: 0 0 var(--ck-space-lg, 16px) !important;
}

/* Le bouton garde SA largeur — celle de l'aspect CercleKit. L'étirer sur toute
   la ligne écrase le dessin de l'aspect (rayon, icône, marges internes) et fait
   une barre pleine à la place d'un bouton. */

/* « Déjà un compte ? Connectez-vous » — EN HAUT de la carte, centrée, et un
   filet qui la sépare du titre. On annonce l'autre porte avant de faire
   remplir celle-ci, pas une fois le formulaire parcouru. */
.ckwc-acc-switch {
    margin: 0 0 var(--ck-space-lg, 18px);
    padding-bottom: var(--ck-space-md, 14px);
    border-bottom: 1px solid var(--acc-line-soft);
    text-align: center;
    font-size: 0.875rem;
    color: var(--acc-muted);
}
.ckwc-acc-switch a {
    color: var(--acc-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── LE FORMULAIRE D'INSCRIPTION COMPOSÉ ───────────────────────────────────
   `CKWC_Inscription::render_fields()` produit des `.form-row.ckwc-wNN` — le
   format du formulaire de COMMANDE, pas les `.ck-f--wNN` du moteur de
   formulaires. Il lui faut donc sa grille 12 colonnes, exactement celle que
   `.ckwc-acct__fields` porte au checkout. Les règles ci-dessous en sont le
   pendant scopé à cette page : sans elles, les largeurs n'ont aucune grille où
   s'accrocher et le champ adresse composé s'écrase en quatre cases minuscules.

   L'habillage des champs, lui, ne se répète pas : ils portent déjà les
   variables --ck-form-* de Création › Forms. */
.ckwc-acc-scope .ckwc-acct__fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--ck-space-xl, 24px);
    align-items: start;
    margin-top: var(--ck-space-lg, 16px);
}
.ckwc-acc-scope .ckwc-acct__fields > .form-row { grid-column: span 12; }
.ckwc-acc-scope .ckwc-acct__fields > .form-row.ckwc-w75 { grid-column: span 9; }
.ckwc-acc-scope .ckwc-acct__fields > .form-row.ckwc-w66 { grid-column: span 8; }
.ckwc-acc-scope .ckwc-acct__fields > .form-row.ckwc-w50 { grid-column: span 6; }
.ckwc-acc-scope .ckwc-acct__fields > .form-row.ckwc-w33 { grid-column: span 4; }
.ckwc-acc-scope .ckwc-acct__fields > .form-row.ckwc-w25 { grid-column: span 3; }

.ckwc-acc-scope form.ckwc-acct__form .form-row {
    margin: 0 0 var(--ck-form-gap, var(--ck-space-lg, 16px));
    padding: 0;
    float: none;
    width: auto;
    min-width: 0;
}
.ckwc-acc-scope form.ckwc-acct__form label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--ck-form-label-font, inherit);
    font-size: var(--ck-form-label-size, 0.8125rem);
    font-weight: var(--ck-form-label-weight, 500);
    color: var(--ck-form-label-color, var(--acc-muted));
}
/* « (facultatif) » : jamais — un formulaire signale l'obligatoire, pas l'inverse. */
.ckwc-acc-scope .optional { display: none !important; }
/* Un champ conditionnel démarre MASQUÉ, c'est la passe JS qui tranche. */
.ckwc-acc-scope .form-row.ckwc-cond { display: none; }

/* Les titres de section du formulaire composé (qui vous êtes / où / vos
   identifiants) : ils découpent la saisie, ils ne crient pas. */
.ckwc-acc-scope .ckwc-acct__section {
    margin: var(--ck-space-md, 14px) 0 2px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}
.ckwc-acc-scope .ckwc-acct__fields > .form-row:first-child .ckwc-acct__section { margin-top: 0; }
.ckwc-acc-scope .ckwc-acct__grouplabel {
    display: block;
    margin-bottom: 6px;
    font-family: var(--ck-form-label-font, inherit);
    font-size: var(--ck-form-label-size, 0.8125rem);
    font-weight: var(--ck-form-label-weight, 500);
    color: var(--ck-form-label-color, var(--acc-muted));
}

/* L'adresse : un champ composé, sa propre petite grille. `position:relative`
   est l'ancrage de la liste de suggestions de l'API Adresse (moteur CercleKit,
   qui la pose en top:100% de son parent positionné). */
.ckwc-acc-scope .ckwc-acct__address {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--ck-space-xl, 24px);
    row-gap: var(--ck-form-gap, var(--ck-space-md, 14px));
}
.ckwc-acc-scope .ckwc-acct__apart { position: relative; grid-column: span 12; min-width: 0; }
.ckwc-acc-scope .ckwc-acct__apart.ckwc-w33 { grid-column: span 4; }
.ckwc-acc-scope .ckwc-acct__apart.ckwc-w66 { grid-column: span 8; }
.ckwc-acc-scope .ckwc-acct__apart label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.78125rem;
    color: var(--ck-form-help-color, var(--acc-muted));
}

/* Les champs du formulaire composé passent par `woocommerce_form_field()` et
   portent `input-text` — pas `ck-f-input`. On leur rend la même tête, avec les
   MÊMES variables de Création › Forms : aucune valeur inventée. */
.ckwc-acc-scope form.ckwc-acct__form .input-text,
.ckwc-acc-scope form.ckwc-acct__form select {
    width: 100%;
    box-sizing: border-box;
    height: var(--ck-form-height, 2.875rem);
    padding: 0 var(--ck-form-pad-x, 0.875rem);
    border: var(--ck-form-border-width, 1px) solid var(--ck-form-border-color, var(--acc-line));
    border-radius: var(--ck-form-radius, var(--acc-r-sm));
    background: var(--ck-form-bg, var(--acc-card));
    color: var(--ck-form-text, var(--acc-ink));
    font-family: var(--ck-form-font, inherit);
    font-size: var(--ck-form-size, 0.9375rem);
    line-height: normal;
    outline: none;
}
.ckwc-acc-scope form.ckwc-acct__form .input-text:focus,
.ckwc-acc-scope form.ckwc-acct__form select:focus {
    border-color: var(--ck-form-focus-color, var(--acc-accent));
    box-shadow: var(--ck-form-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acc-accent) 18%, transparent));
}
/* Une case à cocher n'est pas un champ texte : elle garde sa taille et se pose
   à côté de son libellé. */
.ckwc-acc-scope form.ckwc-acct__form .form-row input[type="checkbox"] {
    width: auto;
    height: auto;
    margin-right: 0.5em;
}
.ckwc-acc-scope form.ckwc-acct__form .form-row label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.15em;
    margin: 0;
}

@media (max-width: 600px) {
    .ckwc-acc-scope .ckwc-acct__fields > .form-row,
    .ckwc-acc-scope .ckwc-acct__apart { grid-column: span 12 !important; }
}


/* Un endpoint qu'on ne dessine pas : au moins, ses tableaux respirent — et un
   tableau trop large défile DANS sa carte au lieu de pousser la page. */
.ckwc-acc-foreign { overflow-x: auto; }
.ckwc-acc-foreign table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ckwc-acc-foreign th,
.ckwc-acc-foreign td { padding: 0.7em 0; border-bottom: 1px solid var(--acc-line-soft); text-align: left; }

/* ─────────────────────────────────────────────────────────────
   Mobile — la colonne repasse au-dessus, en rang de pastilles.
   Jamais un hamburger : la navigation d'un compte doit rester à portée.
   ───────────────────────────────────────────────────────────── */

/* 767 px : le seuil « mobile » d'Elementor, et celui de cercle-form.css. La
   colonne et les champs basculent donc au même moment que le reste du site. */
@media (max-width: 767px) {
    .ckwc-acc {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ck-space-xl, 22px);
        padding: var(--acc-pt-m) var(--acc-px-m) var(--acc-pb-m);
    }
    .ckwc-acc__side.is-sticky { position: static; }

    .ckwc-acc__me { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15em 0.6em; }

    .ckwc-acc__nav { flex-direction: row; flex-wrap: wrap; gap: var(--ck-space-sm, 8px); }
    .ckwc-acc__nav a {
        border: 1px solid var(--acc-line);
        padding: 0.5em 0.9em;
        font-size: 0.875rem;
    }
    .ckwc-acc__nav a[aria-current] { border-color: var(--acc-accent); }

    .ckwc-acc__out { margin-top: var(--ck-space-sm, 10px); padding-top: var(--ck-space-sm, 10px); }
    .ckwc-acc__out a { padding-inline: 0; }

    /* Les champs se réempilent tout seuls : la grille est celle du parent
       (.ck-f--wNN), qui bascule déjà à 767 px. Rien à faire ici. */

    /* Le total quitte la ligne : sur 375 px, le titre et la date passent avant
       un montant qu'on retrouve d'un clic. */
    .ckwc-acc-row__price { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   BOUCLIER DE FORMULAIRE — les réglages de Création › Forms gagnent

   MESURÉ sur le site : le `reset.css` du thème cible `input[type="text"]…`
   (spécificité 0,1,1) et bat `.ck-f-input` de cercle-form.css (0,1,0). La
   bordure du champ sortait donc en #666 au lieu de la couleur réglée. Le
   bouclier de CercleKit existe pour ça, mais son sélecteur exige un ancêtre
   `.ck-form` — classe qu'on ne peut PAS poser ici : `cercle-form.js` s'y
   accroche et détourne l'envoi du formulaire (bug de connexion, 1.0.264).

   On rejoue donc le même duel dans notre scope, à spécificité suffisante
   (classe doublée = 0,3,0), et UNIQUEMENT avec les variables du site : aucune
   valeur n'est décidée ici, tout vient de Création › Forms.
   ───────────────────────────────────────────────────────────── */

.ckwc-acc-scope .ck-f-input.ck-f-input,
.ckwc-acc-scope input.input-text.input-text,
.ckwc-acc-scope textarea.input-text.input-text,
.ckwc-acc-scope .ckwc-acct__form .input-text.input-text,
.ckwc-acc-scope .ckwc-acct__form select.select {
    height: var(--ck-form-height, 2.875rem);
    padding: 0 var(--ck-form-pad-x, 0.875rem);
    border-style: solid;
    border-width: var(--ck-form-border-width, 1px);
    border-color: var(--ck-form-border-color, currentColor);
    border-radius: var(--ck-form-radius, var(--ck-radius, 8px));
    background-color: var(--ck-form-bg, #fff);
    color: var(--ck-form-text, inherit);
    font-family: var(--ck-form-font, inherit);
    font-size: var(--ck-form-size, 0.9375rem);
    box-shadow: none;
}
/* Un textarea grandit : ni hauteur fixe, ni padding sur deux côtés seulement. */
.ckwc-acc-scope textarea.input-text.input-text {
    height: auto;
    padding: var(--ck-form-pad-x, 0.875rem);
}
.ckwc-acc-scope .ck-f-input.ck-f-input:focus,
.ckwc-acc-scope input.input-text.input-text:focus,
.ckwc-acc-scope .ckwc-acct__form .input-text.input-text:focus {
    outline: none;
    border-color: var(--ck-form-focus-color, currentColor);
    box-shadow: 0 0 0 var(--ck-form-focus-ring, 1px) var(--ck-form-focus-glow, transparent);
}
.ckwc-acc-scope .ck-f-input.ck-f-input::placeholder,
.ckwc-acc-scope input.input-text.input-text::placeholder {
    color: var(--ck-form-placeholder-color, inherit);
}
/* Les étiquettes suivent le même réglage — y compris celles des formulaires du
   cœur, qui n'ont que la classe qu'on leur pose (ck_form_skin). */
.ckwc-acc-scope .ck-f-label.ck-f-label,
.ckwc-acc-scope .ckwc-acct__form label {
    font-family: var(--ck-form-label-font, inherit);
    font-size: var(--ck-form-label-size, 0.8125rem);
    font-weight: var(--ck-form-label-weight, 500);
    color: var(--ck-form-label-color, inherit);
}