/* Widget « Compte (CercleKit) » — l'icône du compte de l'en-tête et son menu.
   Piloté par --ckwc-ac-*, posées en ligne par le widget (et par l'aperçu du
   tiroir, qui rend le MÊME markup).

   LA RÈGLE DE CE FICHIER : chaque variable du compte a pour repli la variable
   ÉQUIVALENTE DU PANIER (--ckwc-mc-*), et seulement ensuite une valeur
   littérale. C'est ce qui fait que les deux icônes de l'en-tête se ressemblent
   sans rien régler deux fois : un réglage du compte laissé vide n'est pas posé,
   la couleur du panier reprend la main, et régler la charte du panier habille
   les deux. Les littéraux ne sont là que si le designer de mini-panier est
   éteint — ils sont alors les mêmes que ses propres défauts.

   Les polices viennent de CercleKit (--ck-font-*), les rayons et les espacements
   du design system quand ils ne sont pas réglés ici. */

.ckwc-ac-scope { display: inline-flex; }

/* ── L'icône ───────────────────────────────────────────────────────────────
   `position: relative` : c'est elle qui ancre le menu. Et un `z-index` au
   survol, sinon le menu passe sous le contenu qui suit dans l'en-tête. */
.ckwc-ac {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--ck-font-primary, inherit);
}
.ckwc-ac:hover,
.ckwc-ac:focus-within,
.ckwc-ac.is-open { z-index: 20; }

.ckwc-ac__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 0;
    color: var(--ckwc-ac-icon-color, var(--ckwc-mc-icon-color, #1a1a1a));
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}
.ckwc-ac__toggle:hover,
.ckwc-ac__toggle:focus-visible,
.ckwc-ac.is-open > .ckwc-ac__toggle {
    color: var(--ckwc-ac-icon-color-h, var(--ckwc-mc-icon-color-h, #d85830));
}
.ckwc-ac__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ckwc-ac-icon-size, var(--ckwc-mc-icon-size, 22px));
    height: var(--ckwc-ac-icon-size, var(--ckwc-mc-icon-size, 22px));
    flex: none;
}
/* Le SVG remplit sa boîte ; une icône de police se cale sur la même taille. */
.ckwc-ac__ico svg { width: 100%; height: 100%; display: block; }
.ckwc-ac__ico i { font-size: var(--ckwc-ac-icon-size, var(--ckwc-mc-icon-size, 22px)); line-height: 1; }
.ckwc-ac__label { font-size: .95em; font-weight: 500; }

/* ── Le menu ───────────────────────────────────────────────────────────────
   Fermé, il reste dans le document (aucun `display: none`) : c'est ce qui
   permet la transition, et ce qui laisse le lecteur d'écran le trouver quand le
   déclencheur a le focus. `pointer-events: none` l'empêche d'intercepter un
   clic tant qu'il est invisible. */
.ckwc-ac__menu {
    position: absolute;
    top: 100%;
    z-index: 1;
    box-sizing: border-box;
    min-width: var(--ckwc-ac-panel-w, 210px);
    margin-top: var(--ckwc-ac-gap, 10px);
    padding: var(--ckwc-ac-panel-pad, 8px);
    background: var(--ckwc-ac-panel-bg, var(--ckwc-mc-panel-bg, #fff));
    border: var(--ckwc-ac-border-w, 1px) solid var(--ckwc-ac-border, var(--ckwc-mc-sep, #e8e8e8));
    border-radius: var(--ckwc-ac-panel-radius, 10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ckwc-ac--right .ckwc-ac__menu { right: 0; }
.ckwc-ac--left  .ckwc-ac__menu { left: 0; }

/* Le PONT de survol : entre l'icône et le menu il y a un écart, et une souris
   qui le traverse quitte les deux — le menu se refermait sous le curseur. Ce
   rectangle invisible couvre l'écart et garde le survol continu. Il n'existe
   que sur le menu, donc il ne gêne rien quand celui-ci est fermé
   (pointer-events: none est hérité). */
.ckwc-ac__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--ckwc-ac-gap, 10px));
    height: var(--ckwc-ac-gap, 10px);
}

/* La petite flèche : le même fond et la même bordure que le menu, tournés de
   45° — deux côtés seulement, sinon elle se dessine par-dessus le panneau. */
.ckwc-ac-caret .ckwc-ac__menu::after {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--ckwc-ac-arrow, 9px) / 2) - var(--ckwc-ac-border-w, 1px));
    width: var(--ckwc-ac-arrow, 9px);
    height: var(--ckwc-ac-arrow, 9px);
    background: inherit;
    border-left: var(--ckwc-ac-border-w, 1px) solid var(--ckwc-ac-border, var(--ckwc-mc-sep, #e8e8e8));
    border-top: var(--ckwc-ac-border-w, 1px) solid var(--ckwc-ac-border, var(--ckwc-mc-sep, #e8e8e8));
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}
.ckwc-ac-caret.ckwc-ac--right .ckwc-ac__menu::after { right: 16px; }
.ckwc-ac-caret.ckwc-ac--left  .ckwc-ac__menu::after { left: 16px; }

/* L'ombre : ce qui fait qu'un menu FLOTTE au-dessus de la page au lieu d'être
   collé dedans. Dérivée de l'encre du site, pas un gris posé au hasard. */
.ckwc-ac-shadow .ckwc-ac__menu {
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ck-color-ink, #1a1a1a) 30%, transparent),
                0 2px 6px -2px color-mix(in srgb, var(--ck-color-ink, #1a1a1a) 12%, transparent);
}

/* OUVERT — trois façons, une seule apparence :
   1. le survol, sur les appareils qui en ont un (`hover: hover`) ;
   2. le focus clavier, toujours (Tab jusqu'à l'icône ouvre le menu) ;
   3. la classe posée par le JS (clic, tactile, et aperçu de l'admin). */
.ckwc-ac.is-open > .ckwc-ac__menu,
.ckwc-ac:focus-within > .ckwc-ac__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
@media (hover: hover) {
    .ckwc-ac[data-open="hover"]:hover > .ckwc-ac__menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ── Les entrées ── */
.ckwc-ac__item {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: var(--ckwc-ac-item-pad, 9px) 10px;
    border-radius: max(0px, calc(var(--ckwc-ac-panel-radius, 10px) - var(--ckwc-ac-panel-pad, 8px) / 2));
    color: var(--ckwc-ac-item-color, var(--ckwc-mc-text, #444));
    font-family: var(--ck-font-secondary, inherit);
    font-size: var(--ckwc-ac-item-size, 14px);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s ease, background-color .12s ease;
}
.ckwc-ac__item:hover,
.ckwc-ac__item:focus-visible {
    color: var(--ckwc-ac-item-color-h, var(--ckwc-ac-icon-color-h, var(--ckwc-mc-icon-color-h, #d85830)));
    background-color: var(--ckwc-ac-item-bg-h, transparent);
}
/* Les petites icônes des entrées : optionnelles, jamais lues à voix haute (le
   libellé est juste à côté). */
.ckwc-ac__iico {
    display: none;
    width: 1.15em;
    height: 1.15em;
    flex: none;
    opacity: .7;
}
.ckwc-ac-icons .ckwc-ac__iico { display: inline-flex; }
.ckwc-ac__iico svg { width: 100%; height: 100%; display: block; }

/* Le filet avant la déconnexion : elle n'est pas une destination comme les
   autres, elle termine. Une marge et un trait le disent sans un mot de plus. */
.ckwc-ac-sep .ckwc-ac__item--out {
    margin-top: var(--ckwc-ac-panel-pad, 8px);
    padding-top: calc(var(--ckwc-ac-item-pad, 9px) + var(--ckwc-ac-panel-pad, 8px));
    border-top: 1px solid var(--ckwc-ac-border, var(--ckwc-mc-sep, #e8e8e8));
    border-radius: 0;
}

/* Un thème qui met du gras ou du soulignement sur tous les liens d'en-tête ne
   doit pas traverser le menu : on reprend la main sur ces deux propriétés, et
   sur elles seules. */
.ckwc-ac__toggle,
.ckwc-ac__item { text-decoration: none !important; }

/* ── Mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
    .ckwc-ac__menu,
    .ckwc-ac__item,
    .ckwc-ac__toggle { transition: none; }
    .ckwc-ac__menu { transform: none; }
}

/* ── Aperçu du tiroir de réglages ──────────────────────────────────────────
   Le menu est montré DÉPLIÉ en permanence — on ne règle pas des couleurs qu'on
   ne voit pas. Il repasse donc dans le FLUX : en absolu il recouvrirait le
   mini-panier affiché juste dessous, et l'aperçu est en `overflow: hidden`. */
.ckwc-ac-preview .ckwc-ac__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin-top: var(--ckwc-ac-gap, 10px);
}
/* Ni pont de survol ni flèche : il n'y a plus d'écart à combler, et la flèche
   pointerait vers un menu qui n'est plus dessous. */
.ckwc-ac-preview .ckwc-ac__menu::before,
.ckwc-ac-preview .ckwc-ac-caret .ckwc-ac__menu::after { display: none; }
/* En bloc, le menu déplié se range SOUS son icône au lieu de s'ouvrir à côté
   d'elle dans la rangée. L'icône, elle, reste collée à celle du panier. */
.ckwc-ac-preview .ckwc-ac { display: block; }