/**
 * Akanzu - socle.
 *
 * Ce fichier ne contient que ce qui vaut pour tout le site : le fond de page, la
 * typographie, les boutons, les liens, les champs. Chaque gabarit aura ensuite sa
 * propre section, ajoutée au fur et à mesure.
 *
 * Aucune valeur en dur : tout vient de tokens.css.
 */

/* ---------------------------------------------------------------------------
 * 1. Le fond de page
 *
 * Dans la direction, le fond est une teinte et le contenu vit dans des blocs
 * arrondis encastrés. C'est la première chose à poser, parce que tout le reste
 * en dépend visuellement.
 * ------------------------------------------------------------------------- */

body {
  background-color: var(--ak-ground);
  color: var(--ak-ink);
  font-family: var(--ak-text);
  font-size: var(--ak-fs-body);
  line-height: var(--ak-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
 * 2. Typographie
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--ak-display);
  font-weight: 600;
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-ink);
}

h1, .entry-title { font-size: var(--ak-fs-display); line-height: var(--ak-lh-tight); }
h2 { font-size: var(--ak-fs-section); line-height: 1.12; }
h3 { font-size: 22px; line-height: 1.25; }

/* Le nom d'un produit reste en Figtree : c'est de l'information fonctionnelle,
 * lue en petit et en série. Le display est réservé aux titres qui portent. */
.woocommerce-loop-product__title {
  font-family: var(--ak-text);
  font-weight: 600;
  font-size: var(--ak-fs-product);
  letter-spacing: 0;
}

.ak-label {
  font-size: var(--ak-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ak-ls-label);
  color: var(--ak-ink-soft);
}

/* Le mot qui déborde. Une occurrence par section, jamais plus : au-delà il ne
 * signifie plus rien. Il ne bouge jamais, c'est l'ancrage autour duquel le
 * reste s'anime. */
.ak-bleed {
  position: absolute;
  font-family: var(--ak-display);
  font-weight: 800;
  font-size: var(--ak-fs-bleed);
  line-height: .76;
  letter-spacing: var(--ak-ls-bleed);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * 3. Liens
 * ------------------------------------------------------------------------- */

a {
  color: var(--ak-accent);
  text-decoration: none;
  transition: color var(--ak-dur-fast) var(--ak-ease);
}

a:hover,
a:focus { color: var(--ak-accent-dark); }

/* L'anneau de focus ne se retire jamais. Il se dessine, il ne disparaît pas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--ak-accent);
  outline-offset: 3px;
  border-radius: var(--ak-r-field);
}

/* ---------------------------------------------------------------------------
 * 4. Boutons
 *
 * Une seule couleur d'action sur tout le site. Un bouton secondaire est le même
 * bouton vidé de son fond, jamais une autre couleur.
 * ------------------------------------------------------------------------- */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--ak-text);
  font-weight: 600;
  font-size: var(--ak-fs-small);
  line-height: 1;
  padding: var(--ak-s4) var(--ak-s6);
  border: 1px solid var(--ak-accent);
  border-radius: var(--ak-r-pill);
  background-color: var(--ak-accent);
  color: var(--ak-paper);
  cursor: pointer;
  transition:
    transform var(--ak-dur) var(--ak-ease),
    box-shadow var(--ak-dur) var(--ak-ease),
    background-color var(--ak-dur-fast) var(--ak-ease);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--ak-accent-dark);
  border-color: var(--ak-accent-dark);
  color: var(--ak-paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 35, 33, .22);
}

.button:disabled,
button:disabled,
.woocommerce a.button.disabled {
  background-color: #C3CBC6;
  border-color: #C3CBC6;
  color: var(--ak-paper);
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.ak-button--ghost {
  background-color: transparent;
  color: var(--ak-accent);
}

.ak-button--dark {
  background-color: var(--ak-ink);
  border-color: var(--ak-ink);
}

/* ---------------------------------------------------------------------------
 * 5. Champs de formulaire
 * ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
  font-family: var(--ak-text);
  font-size: 15px;
  padding: var(--ak-s3) var(--ak-s4);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-field);
  background-color: #fff;
  color: var(--ak-ink);
  transition: border-color var(--ak-dur-fast) var(--ak-ease);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ak-accent);
  outline: none;
}

::placeholder { color: var(--ak-ink-mute); opacity: 1; }

/* ---------------------------------------------------------------------------
 * 6. Pastilles
 *
 * Deux familles, pour une raison. Un univers EST sa teinte : le fond porte
 * l'information. Un attribut n'appartient à aucun univers, il reste neutre.
 * Pas de point de couleur : c'est une convention de voyant d'état, elle n'a
 * rien à faire dans un filtre.
 * ------------------------------------------------------------------------- */

.ak-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ak-s2);
  padding: 9px var(--ak-s4);
  border-radius: var(--ak-r-pill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}

.ak-chip--univers {
  background-color: var(--ak-univers);
  color: var(--ak-ink);
  border: 0;
}

.ak-chip--attribut {
  background-color: #fff;
  color: var(--ak-ink);
  border: 1px solid var(--ak-line);
}

.ak-chip[aria-pressed="true"],
.ak-chip--on {
  background-color: var(--ak-ink);
  color: var(--ak-paper);
  border-color: var(--ak-ink);
}

.ak-chip:hover { transform: translateY(-2px); box-shadow: var(--ak-shadow); }

/* ---------------------------------------------------------------------------
 * 7. Badges
 *
 * « Sale » ne vaut que parce qu'il est rare : jamais deux visibles au même écran.
 * ------------------------------------------------------------------------- */

.ak-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--ak-r-pill);
  line-height: 1.4;
}

.ak-badge--sale { background-color: var(--ak-pop); color: #fff; }
.ak-badge--new { background-color: var(--ak-ink); color: var(--ak-paper); }
.ak-badge--low { background-color: #fff; color: var(--ak-ink-soft); border: 1px solid var(--ak-line); }
.ak-badge--out { background-color: #F0EFEA; color: var(--ak-ink-mute); border: 1px solid #E0DED7; }

/* ---------------------------------------------------------------------------
 * 8. Mouvement
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Bandeau de catégorie
 *
 * Il prend la teinte de son univers, et porte le mot qui déborde. C'est le
 * premier endroit où la règle « une couleur par univers » se voit.
 * ------------------------------------------------------------------------- */

.page-header {
  position: relative;
  overflow: hidden;
  background-color: var(--ak-univers) !important;
  background-image: none !important;
  border-radius: var(--ak-r-block);
  margin: var(--ak-s5) var(--ak-s5) var(--ak-s7);
  padding: var(--ak-s7) var(--ak-s6) var(--ak-s8);
}

.page-header .entry-title,
.page-header .woostify-breadcrumb {
  position: relative;
  z-index: 2;
}

.page-header .entry-title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-display);
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-ink);
  margin: 0;
}

.page-header .woostify-breadcrumb,
.page-header .woostify-breadcrumb a { color: var(--ak-ink-soft); }

/* Le mot qui déborde, injecté par functions.php dans data-ak-bleed. */
.page-header[data-ak-bleed]::after {
  content: attr(data-ak-bleed);
  position: absolute;
  left: 14px;
  bottom: -.22em;
  font-family: var(--ak-display);
  font-weight: 800;
  font-size: clamp(72px, 11vw, 168px);
  line-height: .76;
  letter-spacing: var(--ak-ls-bleed);
  white-space: nowrap;
  color: rgba(255, 255, 255, .62);
  pointer-events: none;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * 10. Étoiles de notation : supprimées
 *
 * Décision du ticket #10. Les 83 avis du site portent tous la même date, sous
 * deux noms, avec des textes d'un ou deux mots. Les afficher en note agrégée
 * reviendrait à présenter comme vérifié ce qui ne l'est pas.
 *
 * L'avis lui-même reste visible sur la fiche produit : c'est l'agrégation et
 * l'étoile qui sautent, pas la parole.
 * ------------------------------------------------------------------------- */

.products .star-rating,
.products .woocommerce-product-rating,
.product-loop-rating,
.woocommerce-loop-product__link .star-rating {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 11. Carte produit
 * ------------------------------------------------------------------------- */

.woocommerce ul.products li.product,
.products .product {
  background-color: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  overflow: hidden;
  padding: 0 0 var(--ak-s4);
  transition: transform var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--ak-shadow);
}

/* Le visuel se pose sur l'aplat de son univers, jamais sur du blanc : c'est ce
 * qui fait tenir le détourage des packshots. */
.product-loop-image-wrapper,
.woocommerce ul.products li.product a img {
  background-color: var(--ak-univers);
  margin: 0;
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: var(--ak-s4) var(--ak-s4) 0;
  font-family: var(--ak-text);
  font-weight: 600;
  font-size: var(--ak-fs-product);
  color: var(--ak-ink);
}

.woocommerce ul.products li.product .price {
  padding: 0 var(--ak-s4);
  color: var(--ak-accent);
  font-weight: 600;
  font-size: 15px;
}

.woocommerce ul.products li.product .price del {
  color: var(--ak-ink-mute);
  font-weight: 400;
  margin-right: var(--ak-s2);
}

.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
.product-loop-meta .button {
  margin: var(--ak-s3) var(--ak-s4) 0;
}

/* Le badge soldes se pose dans le visuel, en haut à gauche, jamais en flottant. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: var(--ak-s3);
  left: var(--ak-s3);
  right: auto;
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  background-color: var(--ak-pop);
  color: #fff;
  border-radius: var(--ak-r-pill);
}

/* ---------------------------------------------------------------------------
 * 12. En-tête et pied de page
 * ------------------------------------------------------------------------- */

.site-header-inner { border-bottom: 1px solid var(--ak-line); }

.announcement-bar,
.topbar,
.woostify-topbar {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
}

.site-footer .widget-title,
.site-footer .widgettitle {
  font-family: var(--ak-text);
  font-size: var(--ak-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ak-ls-label);
  color: var(--ak-ink-mute);
}

/* ===========================================================================
 * 13. Structure de page
 *
 * Le principe de la direction : le fond est une teinte, et le contenu vit dans
 * des blocs arrondis encastrés avec une marge extérieure. Jamais de section
 * bord à bord. Tout ce qui suit découle de là.
 * ========================================================================= */

:root { --ak-gutter: 22px; }

@media (max-width: 782px) { :root { --ak-gutter: 14px; } }

.woostify-container {
  max-width: 1440px;
  padding-left: var(--ak-s5);
  padding-right: var(--ak-s5);
}

.site-content,
.content-area { background: transparent; }

.site-main {
  background-color: var(--ak-paper);
  border-radius: var(--ak-r-block);
  padding: var(--ak-s7) var(--ak-s6) var(--ak-s8);
  margin: 0 var(--ak-gutter) var(--ak-gutter);
}

/* ---------------------------------------------------------------------------
 * 14. Barre d'annonce
 *
 * Elle fait défiler six messages, dont « OPEN 24/7 » et « FAST DELIVERY »,
 * invérifiables tous les deux. Le contenu se corrige au ticket #10 : ici on ne
 * fait que la rendre discrète au lieu de criarde.
 * ------------------------------------------------------------------------- */

/* Le bandeau defilant deborde de 32 px a droite, par construction : c'est ce
   debordement qui produit le defilement. La page ne glisse pas pour autant, le
   body la rogne deja. On le contient quand meme a son propre niveau, pour que
   ce ne soit plus une regle lointaine qui l'empeche de sortir de l'ecran.

   Note pour la prochaine fois : scrollWidth compte le contenu meme rogne, donc
   il annonce un debordement la ou il n'y en a plus. Le seul test qui tranche
   est de demander a la page de defiler et de regarder si elle bouge. */
.topbar-slider { overflow: hidden; }

.topbar-slider,
.topbar {
  background-color: var(--ak-ink) !important;
  color: var(--ak-paper);
  font-family: var(--ak-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  padding: 9px 0;
}

.topbar-slider .text-scroll,
.topbar a { color: var(--ak-paper); }

/* ---------------------------------------------------------------------------
 * 15. En-tête
 *
 * Bloc arrondi encastré, posé sur le fond de page, comme tout le reste.
 * ------------------------------------------------------------------------- */

.site-header { background: transparent; border: 0; }

.site-header-inner {
  background-color: var(--ak-paper) !important;
  border: 0 !important;
  border-radius: var(--ak-r-block);
  margin: var(--ak-gutter) var(--ak-gutter) var(--ak-s5);
  padding: var(--ak-s3) 0;
  box-shadow: none;
}

.site-header-inner .woostify-container {
  display: flex;
  align-items: center;
  gap: var(--ak-s4);
  /* Le conteneur du site plafonne a 1440 px. Sur un ecran de 1920, l'en-tete
     perdait 233 px de chaque cote et la barre se tassait au milieu avec une
     police de 13,5 px. L'en-tete est le seul bloc qui gagne a s'etaler : le
     texte courant garde sa mesure ailleurs. */
  max-width: min(1680px, 100%) !important;
}

.site-branding { flex-shrink: 0; margin: 0; }

.site-branding img,
.custom-logo { max-height: 40px; width: auto; }

.site-navigation { flex-grow: 1; min-width: 0; }

/* La barre tient sur une seule ligne, toujours.
 *
 * Elle est passee a huit entrees en gagnant « Journal », et elle s'est cassee
 * en deux etages. Trois choses la remettent d'aplomb : l'espacement passe en
 * gap plutot qu'en marge a droite, ce qui supprime le vide inutile apres la
 * derniere entree ; le retour a la ligne est interdit ; et chaque libelle reste
 * insecable, pour qu'« En savoir plus » ne se coupe pas en deux.
 *
 * Si une neuvieme entree arrive un jour, ce n'est plus un probleme de CSS :
 * c'est un menu a repenser. Sept ou huit portes, c'est ce qu'on retient. */
/* La regle est bornee aux grandes largeurs, et elle exclut le menu mobile.
 *
 * Les deux precautions viennent d'une meme cause : Woostify rend le menu
 * quatre fois dans la page et decide lequel montrer avec des display:none
 * poses dans des media queries. Un display:flex plus specifique que les siens
 * les annule tous, et on se retrouve avec les deux menus a la fois.
 *
 * Constate deux fois de suite : d'abord le menu mobile ressorti sur
 * l'ordinateur, en-tete a 204 px ; puis le menu desktop reste visible a 375 px.
 * D'ou le media query ET le :not(). */
/* La barre horizontale, des 1120 px.
 *
 * Le seuil etait a 1250 px, calcule sur des entrees qui portaient encore
 * 40 px de marge chacune (voir la section 47). Cette marge retiree, les sept
 * entrees tiennent des 1080 px environ.
 *
 * Mesure du degagement de part et d'autre, a 1120 px : 12 px. Ca tient, mais
 * ca se lit comme si ca ne tenait pas. A 1160 px : 30 px. C'est la que le
 * seuil se pose. La plage 1160 a 1249 gagne donc une vraie barre au lieu
 * d'une rangee qui defile. */
@media (min-width: 1160px) {
  .main-navigation .primary-navigation:not(.primary-mobile-navigation) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    /* Le `gap` est desormais le seul espacement de la barre, donc il vaut
       ce que valaient les deux cumules. */
    gap: clamp(20px, 2.2vw, 40px);
  }

  .main-navigation .primary-navigation > li { white-space: nowrap; }

  /* Le logo ramene a l'accueil sur toutes les pages : l'entree du meme nom ne
     dit rien de plus et coute une place qui manque. Elle reste dans le
     burger, ou la place est verticale et donc gratuite. */
  .main-navigation .primary-navigation:not(.primary-mobile-navigation) > .ak-nav-home {
    display: none;
  }
}

/* Entre 992 et 1159 px : la meme barre, plus serree. Pas de defilement.
 *
 * Deux retours en arriere sont enterres ici, autant les ecrire.
 *
 * D'abord j'ai remonte le seuil du burger de 991 a 1249 px pour eviter que la
 * barre ne deborde. Ca ouvrait un panneau vide : Woostify conditionne le
 * contenu du panneau ET sa largeur a la meme largeur d'ecran que le bouton.
 *
 * Ensuite j'ai fait defiler la rangee horizontalement, avec un
 * `overflow-x: auto` sur la barre. Ca reglait le debordement et ca cassait
 * les menus deroulants : un conteneur qui rogne son contenu rogne aussi les
 * sous-menus, qui sont positionnes en absolu et tombent hors de sa boite. Les
 * categories n'avaient plus de deroulant sous 1160 px. C'est ce qui a ete
 * signale, et c'etait de mon fait.
 *
 * La vraie cause etait ailleurs : chaque lien portait 40 px de marge de
 * Woostify qui se cumulaient avec le `gap` du flex, soit 280 px perdus pour
 * sept entrees. Cette marge retiree (section 47), la barre tient jusqu'a
 * 992 px avec un ecart resserre. Plus de defilement, plus de rognage, les
 * deroulants fonctionnent sur toute la plage.
 *
 * `justify-content: flex-start` reste : c'est le centrage qui faisait sortir
 * la liste des deux cotes et la posait sur le logo.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1159px) {
  /* J'ai d'abord rapetisse le logo ici, pensant que la barre manquerait de
   * place. Mesure faite a 992 px, la largeur la plus serree : le logo garde sa
   * taille de repos, 136 px, et il reste 25 px entre la derniere entree et les
   * pictogrammes. La barre n'avait besoin de rien.
   *
   * Les trois declarations sont donc parties. Elles ne servaient a rien, et
   * pire : posees avant la regle de base a specificite egale, elles perdaient
   * la cascade et ne s'appliquaient meme pas. Une regle qui ne fait rien et se
   * lit comme si elle faisait quelque chose coute plus cher qu'une regle
   * absente. */
  .main-navigation .primary-navigation:not(.primary-mobile-navigation) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    /*
     * L'ecart est calcule, pas choisi, et recalcule depuis que le logo est
     * passe en bas de casse : « akanzu » mesure 120 px la ou « AKANZU » en
     * faisait 152. Trente-deux pixels rendus a la barre.
     *
     * Mesures du 10 septembre. La boite de la barre vaut la largeur d'ecran
     * moins 454 px (le logo, les outils, les ecarts de l'en-tete), et les sept
     * libelles font 34 px par point de corps. A 992 px, le plus serre :
     *
     *   boite 538  -  libelles 442 a 13 px  -  six ecarts de 14  =  12 de reserve
     *
     * D'ou deux rampes qui partent de 13 px de corps et 14 px d'ecart, et qui
     * rejoignent 14,5 et 26 pile a 1159 px, pour que le passage a la plage
     * suivante ne se voie pas. La barre ne touche jamais les outils.
     */
    gap: clamp(12px, calc((100vw - 992px) * 0.08 + 12px), 26px);
  }

  .main-navigation .primary-navigation > li { white-space: nowrap; }

  .main-navigation .primary-navigation:not(.primary-mobile-navigation) > .ak-nav-home {
    display: none;
  }
}

/* Navigation : Figtree, casse normale, pas de capitales. Le design system
 * réserve les capitales aux surtitres, pas à la navigation principale. */
.main-navigation .primary-navigation > li > a,
.primary-navigation > .menu-item > a {
  font-family: var(--ak-text);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ak-ink);
  padding: var(--ak-s3) 0;
}

/* La marge a droite est remplacee par le gap ci-dessus : cumulees, les deux
   poussaient la derniere entree hors de la ligne. */
.main-navigation .primary-navigation > li { margin-right: 0; }

.primary-navigation > .menu-item > a:hover,
.primary-navigation > .menu-item.current-menu-item > a { color: var(--ak-accent); }

/* Sous-menus : bloc arrondi, ombre unique du système. */
.primary-navigation .sub-menu {
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  box-shadow: var(--ak-shadow);
  padding: var(--ak-s2) 0;
  overflow: hidden;
}

.primary-navigation .sub-menu a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ak-ink-soft);
  padding: 9px var(--ak-s4);
}

/* La famille, avec sa pile de repli.
 *
 * Les deroulants sortaient en serif. La cause n'etait pas une mauvaise police
 * mais une police nue : Woostify ecrit `font-family: Figtree` sans rien
 * derriere, depuis le reglage qu'on lui donne a l'etape 5. Le jour ou Figtree
 * n'est pas encore arrivee, et Jetpack Boost differe volontiers les feuilles
 * de Google Fonts, le navigateur n'a aucune consigne et tombe sur son serif
 * par defaut.
 *
 * La regle qui donne notre pile au menu ne les atteignait pas : elle vise
 * `> li > a`, donc le premier niveau seulement. Un sous-menu est un
 * petit-enfant.
 *
 * On vise donc tous les niveaux, et on pose `var(--ak-text)`, qui porte
 * « Figtree, Segoe UI, system-ui, sans-serif ». Si Figtree manque, on tombe sur
 * une linear propre, pas sur du Times.
 * ------------------------------------------------------------------------- */
.main-navigation .primary-navigation a,
.main-navigation .primary-navigation .menu-item-text,
.primary-navigation .sub-menu a,
.primary-navigation .sub-menu .menu-item-text {
  font-family: var(--ak-text);
}

.primary-navigation .sub-menu a:hover {
  color: var(--ak-ink);
  background-color: var(--ak-ground);
}

/* Outils : recherche, compte, souhaits, panier. */
.site-tools {
  display: flex;
  align-items: center;
  gap: var(--ak-s4);
  flex-shrink: 0;
}

.site-tools .tools-icon svg,
.site-tools .woostify-svg-icon { width: 19px; height: 19px; }

.site-tools .shop-cart-count,
.site-tools .wishlist-item-count {
  background-color: var(--ak-pop);
  color: var(--ak-paper);
  font-family: var(--ak-text);
  font-size: 9.5px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: var(--ak-r-pill);
}

/* ---------------------------------------------------------------------------
 * 16. Carte produit, refonte
 *
 * Le visuel se pose sur l'aplat de son univers et respire : c'est ce qui fait
 * tenir les packshots détourés. Une seule action visible, le reste s'efface.
 * ------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ak-s4);
  margin: 0;
}

@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 782px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ak-s3); } }

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}

.product-loop-wrapper { display: flex; flex-direction: column; height: 100%; }

.product-loop-image-wrapper {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--ak-univers);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Le produit respire dans son cadre au lieu de le remplir bord à bord. */
.product-loop-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ak-s5);
  mix-blend-mode: multiply;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.woocommerce ul.products li.product:hover .product-loop-image-wrapper img { transform: scale(1.04); }

/* La liste de souhaits devient un coeur discret, en haut à droite du visuel.
 * Le doublon en lien texte sous la carte disparaît. */
.product-loop-action,
.loop-wrapper-wishlist {
  position: absolute;
  top: var(--ak-s3);
  right: var(--ak-s3);
  z-index: 3;
  margin: 0;
}

.product-loop-action .tinvwl_add_to_wishlist_button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ak-paper);
  border-radius: var(--ak-r-pill);
  box-shadow: none;
}

.product-loop-content .tinv-wishlist,
.product-loop-content .tinvwl_add_to_wishlist-text,
.product-loop-meta .tinv-wishlist { display: none !important; }

.product-loop-content {
  padding: var(--ak-s4);
  text-align: left !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

/* La marque, en surtitre. NEW BALANCE vend plus que Sneakers. */
.ak-brand {
  font-size: var(--ak-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ak-ls-label);
  color: var(--ak-ink-mute);
  line-height: 1.3;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.woocommerce ul.products li.product .price { padding: 0; margin: 0; font-size: 15px; }

.product-loop-meta { margin-top: auto; padding-top: var(--ak-s3); }

.product-loop-meta .button,
.woocommerce ul.products li.product .button {
  margin: 0;
  width: 100%;
  padding: 12px var(--ak-s4);
  font-size: 13px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * 17. Pied de page
 * ------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--ak-ink) !important;
  color: #9AA39E;
  border-radius: var(--ak-r-block) var(--ak-r-block) 0 0;
  margin: var(--ak-s7) var(--ak-gutter) 0;
  padding-top: var(--ak-s8);
  position: relative;
  overflow: hidden;
}

.site-footer a { color: #C7CCC9; }
.site-footer a:hover { color: var(--ak-paper); }

.site-info {
  border-top: 1px solid #2E3532;
  font-size: 11.5px;
  color: #6B736E;
  padding: var(--ak-s4) 0 var(--ak-s7);
}

/* ---------------------------------------------------------------------------
 * 18. Nettoyage
 * ------------------------------------------------------------------------- */

#scroll-to-top {
  background-color: var(--ak-ink);
  border-radius: var(--ak-r-pill);
  /*
   * Remonte au-dessus du badge reCAPTCHA.
   *
   * Le badge est pose en bas a droite, en fixe, 256 x 60 px, a 14 px du bas.
   * Woostify place le bouton de remontee a 20 px du bas, au meme endroit :
   * mesure le 10 septembre, le badge occupe la bande verticale 726-786 et le
   * bouton 740-780. Ils se superposent des que le bouton apparait.
   *
   * En local le badge s'affiche en rouge parce que le domaine n'est pas
   * declare chez Google ; en production il sera gris, toujours present, et la
   * collision aussi. On ne peut pas le masquer : les conditions de Google
   * imposent soit le badge, soit une mention textuelle equivalente, et cette
   * mention est du contenu, pas du CSS.
   *
   * 92 px = 14 du bas + 60 de badge + 18 de respiration.
   */
  bottom: 92px !important;
}

/* Rupture et prix indisponible : un etat explicite, jamais un 0,00 EUR. */
.ak-oos {
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-ink-mute);
}

.ak-badge--low {
  position: absolute;
  top: var(--ak-s3);
  left: var(--ak-s3);
  z-index: 3;
}

.ak-brand--single { margin-bottom: var(--ak-s2); }

/* Barre de tri et de filtres : une ligne, alignee, sans bouton vide. */
.woocommerce-products-header,
.shop-toolbar,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: var(--ak-s5);
}

.woocommerce .woocommerce-result-count {
  font-size: 13px;
  color: var(--ak-ink-soft);
  margin: 0;
}

.woocommerce .woocommerce-ordering select,
.shop-toolbar select {
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-pill);
  padding: 10px var(--ak-s4);
  font-size: 13px;
  font-weight: 500;
  background-color: #fff;
}

/* Le bouton de filtres de Woostify arrive vide quand aucun widget de filtre
   n est configure. Un bouton qui ne fait rien coute plus qu il ne rapporte. */
.woostify-filter-button:empty,
.shop-filter-button:empty,
.filter-button-wrapper:empty { display: none; }

/* ---------------------------------------------------------------------------
 * 19. Barre d'outils de catalogue
 *
 * Le compte de résultats et le tri sont deux informations de service. Elles se
 * lisent d'un coup d'oeil sur une seule ligne, séparées par un filet, et ne
 * doivent jamais peser autant qu'un produit.
 * ------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  float: none;
  margin: 0;
  font-family: var(--ak-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ak-ink-soft);
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  float: none;
  margin: 0;
}

/* La ligne : compte à gauche, tri à droite, un filet dessous. */
.woocommerce .woocommerce-result-count { order: 1; }
.woocommerce .woocommerce-ordering { order: 2; margin-left: auto; }

.woocommerce .products,
.woocommerce-page .products { clear: none; }

.site-main > .woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce-result-count { padding-bottom: 0; }

/* Woostify pose les deux éléments en flottants successifs. On les remet dans
   un flux horizontal en agissant sur leur parent commun. */
.woocommerce .site-main,
.woocommerce-page .site-main { position: relative; }

.woocommerce-result-count,
.woocommerce-ordering {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Le compteur affichait « 176pièces ».
 *
 * Le balisage de WooCommerce est `<strong>176</strong> pièces`, avec l'espace
 * au bon endroit. C'est le `display: inline-flex` ci-dessus qui l'avale : dans
 * un conteneur flex, le texte nu devient un element anonyme, et les espaces qui
 * le bordent sont supprimes. Le HTML etait juste, le CSS mangeait l'espace.
 *
 * Un `gap` le rend, et il suit le corps du texte au lieu d'etre fixe. */
.woocommerce-result-count { gap: .3em; }

.woocommerce-result-count { margin-right: var(--ak-s4) !important; }
.woocommerce-ordering { float: right !important; }

/* Le sélecteur de tri devient une pastille d'attribut, comme le reste. */
.woocommerce-ordering select,
select.orderby,
.woocommerce select.orderby {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--ak-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-ink);
  /* Papier et non blanc pur : le systeme n'utilise nulle part le #fff, et une
     pastille blanche sur du creme se lit comme une piece rapportee. */
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-pill);
  padding: 10px 38px 10px var(--ak-s4);
  line-height: 1;
  cursor: pointer;
  /* Le chevron est dessiné en SVG plutôt que laissé au navigateur, sinon il
     reste au style du système et jure avec le reste. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231E2321' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ak-s4) center;
  transition: border-color var(--ak-dur-fast) var(--ak-ease);
}

.woocommerce-ordering select:hover,
select.orderby:hover { border-color: var(--ak-ink); }

.woocommerce-ordering select:focus-visible,
select.orderby:focus-visible {
  outline: 2px solid var(--ak-accent);
  outline-offset: 2px;
}

/* Le filet qui sépare la barre d'outils de la grille. */
.woocommerce .products,
.woocommerce-page ul.products {
  border-top: 1px solid var(--ak-line);
  padding-top: var(--ak-s5);
  margin-top: var(--ak-s4);
}

/* ---------------------------------------------------------------------------
 * 20. Pagination
 * ------------------------------------------------------------------------- */

.woocommerce-pagination { margin-top: var(--ak-s7); }

.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--ak-s2);
  border: 0;
}

.woocommerce-pagination ul li { border: 0; }

.woocommerce-pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ak-r-pill);
  border: 1px solid var(--ak-line);
  background-color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ak-ink);
}

.woocommerce-pagination .page-numbers.current {
  background-color: var(--ak-ink);
  border-color: var(--ak-ink);
  color: var(--ak-paper);
}

.woocommerce-pagination .page-numbers:hover:not(.current) {
  border-color: var(--ak-ink);
}

/* ---------------------------------------------------------------------------
 * 21. Logo
 *
 * Le fichier livré est un logo carré recadré : on le contraint en hauteur et on
 * le laisse respirer plutôt que de le laisser s'étirer.
 * ------------------------------------------------------------------------- */

.site-branding .custom-logo,
.site-branding .custom-mobile-logo {
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 782px) {
  .site-branding .custom-logo,
  .site-branding .custom-mobile-logo { max-height: 34px; }
}

/* ===========================================================================
 * 22. Accueil
 *
 * Reprend la maquette du design system. Le hero est un bloc teinté qui porte le
 * mot qui déborde et la barre de réassurance épinglée. Les univers sont une
 * grille de blocs, la sélection une rangée de cartes.
 * ========================================================================= */

.ak-home { margin: 0 var(--ak-gutter) var(--ak-gutter); }

/* --- Hero ---------------------------------------------------------------- */

.ak-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ak-r-block);
  background-color: var(--ak-univers);
  padding: var(--ak-s8) var(--ak-s7) var(--ak-s4);
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.ak-hero__inner {
  position: relative;
  z-index: 3;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-s7);
}

.ak-hero__text { max-width: 540px; }

.ak-hero__title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-ink);
  margin: var(--ak-s4) 0 0;
}

.ak-hero__lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: #4A524D;
  max-width: 42ch;
  margin: var(--ak-s4) 0 0;
}

.ak-hero__cta {
  display: flex;
  gap: var(--ak-s3);
  margin-top: var(--ak-s6);
  flex-wrap: wrap;
}

.ak-hero__cta .ak-button--ghost {
  background-color: transparent;
  border-color: var(--ak-ink);
  color: var(--ak-ink);
}

.ak-hero__cta .ak-button--ghost:hover {
  background-color: var(--ak-ink);
  border-color: var(--ak-ink);
  color: var(--ak-paper);
}

/* Le visuel produit flotte sur l'aplat, dans une carte blanche. C'est la seule
   ombre du système, et elle ne sert que là. */
.ak-hero__shot {
  flex-shrink: 0;
  width: min(400px, 38vw);
  aspect-ratio: 1;
  background-color: #fff;
  border-radius: var(--ak-r-img);
  box-shadow: var(--ak-shadow-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-hero__shot:hover { transform: translateY(-4px); }

.ak-hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ak-s6);
  mix-blend-mode: multiply;
}

/* Le mot qui déborde. Il ne bouge jamais : c'est l'ancrage. */
.ak-hero__bleed {
  position: absolute;
  left: var(--ak-s4);
  bottom: -.2em;
  margin: 0;
  z-index: 1;
  font-family: var(--ak-display);
  font-weight: 800;
  font-size: clamp(96px, 15vw, 220px);
  line-height: .76;
  letter-spacing: var(--ak-ls-bleed);
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* --- Les promesses ------------------------------------------------------- */

.ak-promises {
  position: relative;
  z-index: 4;
  list-style: none;
  margin: var(--ak-s6) 0 0;
  padding: var(--ak-s4) var(--ak-s6);
  background-color: var(--ak-ink);
  border-radius: var(--ak-r-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-s5);
  flex-wrap: wrap;
}

.ak-promises__item {
  display: flex;
  align-items: center;
  gap: var(--ak-s3);
  color: var(--ak-paper);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.ak-promises__item .ak-icon { color: #8FA396; flex-shrink: 0; width: 17px; height: 17px; }

/* --- Sections ------------------------------------------------------------ */

.ak-section { margin-top: var(--ak-s7); }

.ak-section--paper {
  background-color: var(--ak-paper);
  border-radius: var(--ak-r-block);
  padding: var(--ak-s7) var(--ak-s6) var(--ak-s8);
}

.ak-section__head { margin-bottom: var(--ak-s5); }

.ak-section__head h2 {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-section);
  letter-spacing: var(--ak-ls-display);
  margin: 0;
}

.ak-section__head p {
  font-size: 13.5px;
  color: var(--ak-ink-soft);
  margin: var(--ak-s2) 0 0;
}

.ak-section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ak-s6);
}

.ak-section__head--split p { text-align: right; max-width: 40ch; margin: 0; }

/* --- Les univers --------------------------------------------------------- */

.ak-universes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ak-s4);
}


.ak-universe {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ak-s6);
  min-height: 250px;
  padding: var(--ak-s6);
  border-radius: var(--ak-r-block);
  background-color: var(--ak-univers);
  color: var(--ak-ink);
  text-decoration: none;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-universe:hover { transform: translateY(-4px); color: var(--ak-ink); }

.ak-universe__name {
  display: block;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: var(--ak-ls-display);
  line-height: 1.05;
}

.ak-universe__top .ak-label { display: block; margin-top: var(--ak-s2); }

.ak-universe__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ak-universe__icon { width: 96px; height: 96px; color: #fff; }

.ak-universe__arrow {
  width: 38px;
  height: 38px;
  border-radius: var(--ak-r-pill);
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-universe:hover .ak-universe__arrow { transform: translate(3px, -3px); }

.ak-universe__arrow .ak-icon { width: 16px; height: 16px; color: var(--ak-ink); }

/* --- La sélection -------------------------------------------------------- */

.ak-selection {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ak-s4);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 1100px) { .ak-selection { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 782px)  { .ak-selection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sur l'accueil, chaque carte porte la teinte de son propre univers plutôt que
   celle de la page : c'est ce qui donne la rangée multicolore de la maquette. */
.ak-selection .product-loop-image-wrapper { background-color: var(--ak-packshot); }

@media (max-width: 782px) {
  .ak-hero { padding: var(--ak-s6) var(--ak-s5) var(--ak-s3); min-height: 0; }
  .ak-hero__inner { flex-direction: column; align-items: stretch; }
  .ak-hero__shot { width: 100%; max-width: 260px; margin: var(--ak-s5) auto 0; }
  .ak-promises { flex-direction: column; align-items: flex-start; border-radius: var(--ak-r-block); }
  .ak-section__head--split { flex-direction: column; align-items: flex-start; }
  .ak-section__head--split p { text-align: left; }
}

/* ---------------------------------------------------------------------------
 * 23. Le monogramme
 *
 * Verrouillage horizontal : le monogramme, puis la marque de mot en Figtree,
 * en bas de casse et faiblement interlettrée.
 *
 * Le mot était en capitales à interlettrage large. Marie l'a demandé en bas de
 * casse le 10 septembre 2026. Deux ajustements suivent, et ils ne sont pas
 * cosmétiques.
 *
 * Le corps passe de 19 à 22 px. En capitales, c'est la hauteur de capitale qui
 * porte le mot ; en bas de casse, c'est la hauteur d'x, plus courte d'environ
 * un cinquième. Au même corps, « akanzu » paraissait rétréci à côté du signe.
 *
 * L'interlettrage tombe de 0,30 à 0,05 em. Un interlettrage large est une
 * convention des capitales, qui n'ont pas d'espaces internes pour respirer ;
 * appliqué au bas de casse, il découpe le mot en lettres séparées.
 * ------------------------------------------------------------------------- */

.ak-logo {
  display: inline-flex;
  align-items: center;
  /* L'ecart suit la taille du signe, sinon il parait serre quand le logo
     grandit et lache quand il rapetisse. */
  gap: clamp(12px, 1vw, 16px);
  color: var(--ak-ink);
  text-decoration: none;
  line-height: 1;
}

/* Le logo prend la place dont il dispose.
 *
 * Il tenait 34 px de haut dans un conteneur d'en-tete de 90 px : il flottait au
 * milieu d'un vide qu'il ne remplissait pas. Il monte maintenant jusqu'a 56 px
 * sur un grand ecran, ou il reste 17 px de respiration au-dessus et en dessous.
 *
 * La taille est fluide et non fixe, parce que la place, elle, ne l'est pas : ce
 * qui est disponible a 1920 px est pris a la barre de navigation a 992. Le logo
 * grandit donc avec l'ecran au lieu d'imposer partout la taille d'un seul.
 * ------------------------------------------------------------------------- */
.ak-monogram {
  width: clamp(40px, 3.4vw, 56px);
  height: clamp(40px, 3.4vw, 56px);
}

.ak-logo:hover { color: var(--ak-accent); }

.ak-logo__word {
  font-family: var(--ak-text);
  font-weight: 400;
  font-size: clamp(25px, 2.2vw, 35px);
  /* Le balisage écrit déjà « akanzu ». Ceci n'est qu'un garde-fou, pour le jour
     où quelqu'un remettra une capitale dans le réglage du titre du site. */
  text-transform: lowercase;
  letter-spacing: .05em;
  /* L'interlettrage ajoute une chasse après la dernière lettre : on la reprend
     pour que le bloc reste optiquement centré. */
  margin-right: -.05em;
}

.ak-monogram { flex-shrink: 0; }

/* Sur fond sombre, le monogramme et le mot passent en papier. */
.site-footer .ak-logo,
.ak-hero--dark .ak-logo { color: var(--ak-paper); }

/* Sur mobile il n'y a pas de barre a nourrir : le logo est seul entre le
   burger et les deux pictogrammes, et il peut prendre sa taille. */
@media (max-width: 782px) {
  .ak-logo { gap: 10px; }
  .ak-monogram { width: 40px; height: 40px; }
  .ak-logo__word { font-size: 25px; letter-spacing: .04em; margin-right: -.04em; }
}

/* ---------------------------------------------------------------------------
 * 24. Correctif : largeur des cartes hors contexte WooCommerce
 *
 * Woostify pose une largeur en pourcentage et un flottant sur `li.product`.
 * Sur l'accueil, la liste n'est pas dans un conteneur `.woocommerce`, donc la
 * règle de grille ne s'appliquait pas et les cartes tombaient à 55px.
 * ------------------------------------------------------------------------- */

ul.products li.product,
.ak-selection li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  overflow: hidden;
  padding: 0 0 var(--ak-s4);
}

ul.products li.product::before,
ul.products li.product::after { content: none; }

.ak-selection .product-loop-image-wrapper {
  aspect-ratio: 1;
  width: 100%;
}

.ak-selection .product-loop-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ak-s5);
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
 * 25. Largeur du contenu
 *
 * Woostify réserve la place d'une colonne latérale même quand aucune n'est
 * affichée : `#primary` recevait un flottant, une largeur de 80 % et un
 * décalage de 298 pixels. Le panneau produits se retrouvait plus étroit que
 * l'en-tête et le bandeau, et décentré.
 *
 * Le design system n'a pas de colonne latérale. On rend donc sa pleine largeur
 * au contenu, sauf quand une colonne est réellement demandée.
 * ------------------------------------------------------------------------- */

body:not(.has-sidebar) .content-area,
body:not(.has-sidebar) #primary,
.woocommerce .content-area,
.woocommerce #primary,
.woocommerce-page .content-area,
.woocommerce-page #primary {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Le conteneur de Woostify apporte déjà sa gouttière : la marge de nos blocs
   s'y ajoutait et doublait le retrait. On la reprend à zéro et on laisse le
   conteneur faire son travail. */
.site-content > .woostify-container { padding-left: var(--ak-gutter); padding-right: var(--ak-gutter); }

.site-main,
.ak-home { margin-left: 0; margin-right: 0; }

/* En-tête et bandeau vivent hors du conteneur : ils gardent leur marge propre
   pour rester alignés au contenu. */
.site-header-inner { margin-left: var(--ak-gutter); margin-right: var(--ak-gutter); }

/* Le bandeau de catégorie vit hors du conteneur, comme l'en-tête : il porte
   donc sa propre gouttière pour s'aligner exactement dessus. */
.page-header,
.woocommerce .page-header,
.woocommerce-page .page-header {
  margin-left: var(--ak-gutter);
  margin-right: var(--ak-gutter);
}

.site-footer { margin-left: var(--ak-gutter); margin-right: var(--ak-gutter); }

/* ---------------------------------------------------------------------------
 * 26. La rangée de filtres
 *
 * Une ligne de pastilles au-dessus de la grille, comme sur la planche
 * « Catégorie ». Elle défile horizontalement sur mobile plutôt que de passer à
 * la ligne : une rangée qui grandit pousse les produits hors de l'écran.
 * ------------------------------------------------------------------------- */

.ak-toolbar {
  margin: 0 0 var(--ak-s5);
  padding-bottom: var(--ak-s5);
  border-bottom: 1px solid var(--ak-line);
}

.ak-toolbar__chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ak-toolbar__chips li { margin: 0; }

.ak-toolbar .ak-chip { text-decoration: none; }

.ak-chip__count {
  color: var(--ak-ink-mute);
  font-weight: 500;
}

.ak-chip--on .ak-chip__count,
.ak-chip--univers .ak-chip__count { color: inherit; opacity: .65; }

@media (max-width: 782px) {
  .ak-toolbar__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* La rangée touche les bords de son bloc plutôt que de s'arrêter avant :
       on voit ainsi qu'elle continue. */
    margin-inline: calc(var(--ak-s6) * -1);
    padding-inline: var(--ak-s6);
  }
  .ak-toolbar__chips::-webkit-scrollbar { display: none; }
  .ak-toolbar__chips li { flex-shrink: 0; }
}

/* Le compte de résultats et le tri passent sous la rangée, sur une même ligne. */
.woocommerce .woocommerce-result-count { line-height: 40px; }

/* ---------------------------------------------------------------------------
 * 27. La ligne de tri
 *
 * Woostify pose la rangee, le compte et le tri dans un meme conteneur flex, ce
 * qui ecrasait la rangee de pastilles a 311px. Les pastilles prennent donc
 * toute la premiere ligne, le compte et le tri se partagent la seconde.
 * ------------------------------------------------------------------------- */

.woostify-sorting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ak-s3) var(--ak-s4);
}

.woostify-sorting .ak-toolbar { flex: 1 0 100%; }

.woostify-toolbar-left { margin-right: auto; }

.woostify-sorting .woocommerce-ordering { margin-left: auto; }

.ak-count {
  font-size: 13px;
  color: var(--ak-ink-soft);
  margin: 0;
  line-height: 40px;
}

.ak-count strong { color: var(--ak-ink); font-weight: 600; }

.ak-count__range {
  color: var(--ak-ink-mute);
  padding-left: var(--ak-s2);
}

/* ---------------------------------------------------------------------------
 * 28. Consequences du passage de l'action a l'encre
 *
 * Un lien dans du texte ne peut plus se distinguer par sa couleur seule,
 * puisqu'il porte celle du texte. Il prend donc un soulignement, ce qui est de
 * toute facon plus lisible et ne repose pas sur la perception des couleurs.
 * ------------------------------------------------------------------------- */

.entry-content a:not(.button),
.woocommerce-product-details__short-description a,
.ak-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ak-line);
}

.entry-content a:not(.button):hover { text-decoration-color: var(--ak-ink); }

/* Le prix passe a l'encre. Seul un prix solde prend le signal, ce qui le rend
   enfin visible : avant, tous les prix etaient colores et aucun ne ressortait. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ak-ink);
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--ak-pop);
  font-weight: 700;
}

/* Le bouton secondaire redevient un contour d'encre. */
.ak-button--ghost,
.ak-hero__cta .ak-button--ghost {
  background-color: transparent;
  border-color: var(--ak-ink);
  color: var(--ak-ink);
}

.ak-button--ghost:hover,
.ak-hero__cta .ak-button--ghost:hover {
  background-color: var(--ak-ink);
  color: var(--ak-paper);
}

/* ===========================================================================
 * 29. Fiche produit
 *
 * Reprend la planche « Fiche produit » du design system : la galerie sur
 * l'aplat de son univers à gauche, une seule action dominante à droite, et la
 * réassurance juste sous le bouton là où la décision se prend.
 * ========================================================================= */

.single-product .site-main {
  padding: var(--ak-s7) var(--ak-s6) var(--ak-s8);
}

.single-product div.product {
  display: block;
}

/* Woostify pose deja deux colonnes, `.product-gallery` et `.product-summary`,
 * en flottants dans le meme conteneur. On les remet en grille pour recuperer
 * une gouttiere propre et des hauteurs alignees, sans toucher a leur ordre.
 *
 * Piege evite : mettre la grille sur `.product-summary` elle-meme l'ecrasait a
 * 311px, parce qu'elle ne contient que le resume, pas la galerie. */
.single-product .product-page-container > .woostify-container {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--ak-s7);
  align-items: start;
}

.single-product .product-gallery,
.single-product .product-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* La visionneuse plein ecran est un enfant du meme conteneur : elle ne doit pas
   occuper une cellule de la grille. */
.single-product .product-page-container > .woostify-container > .pswp {
  display: none;
  position: fixed;
}

.single-product .product-page-container > .woostify-container > .pswp.pswp--open { display: block; }

@media (max-width: 900px) {
  .single-product .product-page-container > .woostify-container {
    grid-template-columns: 1fr;
    gap: var(--ak-s6);
  }
}

/* Les vignettes passent SOUS l'image principale, en cinq colonnes, comme sur la
 * planche. Woostify les met en rail vertical a gauche, ce qui vole de la
 * largeur a la photo alors que c'est elle qui vend. */
.single-product .product-gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ak-s3);
}

.single-product .product-images {
  width: 100% !important;
  order: 1;
}

.single-product .product-thumbnail-images {
  width: 100% !important;
  order: 2;
  max-height: none !important;
}

/* --- La galerie ---------------------------------------------------------- */

.woocommerce div.product div.images,
.woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.single-product .product-images,
.single-product .product-images .woocommerce-product-gallery__image {
  border-radius: var(--ak-r-img);
  overflow: hidden;
  background-color: var(--ak-univers);
}

.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img,
.single-product .product-images img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  padding: var(--ak-s6);
  mix-blend-mode: multiply;
  border-radius: var(--ak-r-img);
}

/* Les vignettes : cinq par ligne, celle qui est active porte un filet d'encre
   plutôt qu'un changement d'opacité, qui se voit mal sur un aplat clair. */
.product-thumbnail-images-container,
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ak-s3);
  margin-top: var(--ak-s3);
  list-style: none;
  padding: 0;
}

.thumbnail-item,
.flex-control-thumbs li {
  margin: 0;
  width: 100% !important;
  border-radius: var(--ak-r-field);
  overflow: hidden;
  background-color: var(--ak-univers);
  cursor: pointer;
}

.thumbnail-item img,
.flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--ak-s2);
  mix-blend-mode: multiply;
  opacity: 1;
}

.thumbnail-item.active,
.flex-control-thumbs .flex-active { box-shadow: inset 0 0 0 2px var(--ak-ink); }

/* --- Le résumé ----------------------------------------------------------- */

.woocommerce div.product .summary,
.summary.entry-summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce div.product .product_title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: var(--ak-ls-display);
  margin: var(--ak-s2) 0 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ak-display);
  font-size: 28px;
  font-weight: 600;
  margin: var(--ak-s3) 0 0;
}

.woocommerce div.product p.price del { font-size: 19px; opacity: .55; font-weight: 400; }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ak-ink-soft);
  max-width: 46ch;
  margin-top: var(--ak-s4);
}

/* --- Les variations, en pastilles ---------------------------------------- */

.woocommerce div.product form.cart { margin: var(--ak-s6) 0 0; }

.woocommerce div.product form.cart .variations {
  width: 100%;
  border: 0;
  margin: 0 0 var(--ak-s5);
}

.woocommerce div.product form.cart .variations tr { display: block; }

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}

.woocommerce div.product form.cart .variations label {
  font-size: var(--ak-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ak-ls-label);
  color: var(--ak-ink-soft);
  margin-bottom: var(--ak-s3);
  display: block;
}

/* Woo Variation Swatches produit des boutons : on les habille en pastilles. */
.woo-variation-swatches .variable-items-wrapper {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.woo-variation-swatches .variable-item {
  min-width: 46px;
  height: 42px;
  padding: 0 var(--ak-s4);
  border-radius: var(--ak-r-pill) !important;
  border: 1px solid var(--ak-line) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  font-family: var(--ak-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ak-dur-fast) var(--ak-ease);
}

.woo-variation-swatches .variable-item:hover { border-color: var(--ak-ink) !important; }

.woo-variation-swatches .variable-item.selected {
  background-color: var(--ak-ink) !important;
  border-color: var(--ak-ink) !important;
  color: var(--ak-paper);
}

/* Une taille épuisée reste visible et barrée : la cacher ferait croire qu'elle
   n'existe pas, et la cliente reviendrait chercher. */
.woo-variation-swatches .variable-item.disabled,
.woo-variation-swatches .variable-item[data-wvstooltip*="out"] {
  background-color: #F4F2ED !important;
  color: var(--ak-ink-mute);
  text-decoration: line-through;
  border-color: var(--ak-line) !important;
}

/* --- Quantité et action -------------------------------------------------- */

.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-pill);
  background-color: #fff;
  padding: 5px 7px;
  margin-right: var(--ak-s3);
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 42px;
  border: 0;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  padding: 0;
  background: transparent;
}

.woocommerce div.product form.cart .quantity .qty-btn,
.woocommerce div.product form.cart .quantity button {
  width: 30px;
  height: 30px;
  border-radius: var(--ak-r-pill);
  border: 0;
  background-color: transparent;
  color: var(--ak-ink);
  padding: 0;
}

.woocommerce div.product form.cart .quantity button:hover {
  background-color: var(--ak-ground);
  transform: none;
  box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  flex-grow: 1;
  padding: 17px var(--ak-s6);
  font-size: 15px;
  border-radius: var(--ak-r-pill);
}

.woocommerce div.product form.cart .woostify-single-add-to-cart,
.woocommerce div.product form.cart > .quantity + .button,
.woocommerce div.product form.cart {
  align-items: center;
}

/* --- Réassurance sous le bouton ------------------------------------------ */

.ak-single-promises {
  list-style: none;
  margin: var(--ak-s5) 0 0;
  padding: var(--ak-s4) var(--ak-s5);
  background-color: var(--ak-ground);
  border-radius: var(--ak-r-card);
  display: flex;
  flex-direction: column;
  gap: var(--ak-s3);
}

.ak-single-promises li {
  display: flex;
  align-items: center;
  gap: var(--ak-s3);
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
}

.ak-single-promises .ak-icon { color: var(--ak-ink); flex-shrink: 0; width: 17px; height: 17px; }

/* --- Méta ---------------------------------------------------------------- */

.woocommerce div.product .product_meta {
  margin-top: var(--ak-s5);
  padding-top: var(--ak-s4);
  border-top: 1px solid var(--ak-line);
  font-size: 12.5px;
  color: var(--ak-ink-mute);
}

.woocommerce div.product .product_meta a { color: var(--ak-ink-soft); }

/* --- Onglets ------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--ak-s8);
  padding-top: var(--ak-s6);
  border-top: 1px solid var(--ak-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--ak-s3);
  padding: 0;
  margin: 0 0 var(--ak-s5);
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--ak-r-pill);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px var(--ak-s5);
  border-radius: var(--ak-r-pill);
  border: 1px solid var(--ak-line);
  background-color: #fff;
  font-family: var(--ak-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background-color: var(--ak-ink);
  border-color: var(--ak-ink);
  color: var(--ak-paper);
}

.woocommerce div.product .woocommerce-tabs .panel {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ak-ink-soft);
  max-width: 74ch;
}

.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }

/* --- Avis ---------------------------------------------------------------- */

/* La note agrégée et les étoiles ne s'affichent pas : les avis existants
   portent tous la même date sous deux noms. Décision du ticket #10. L'avis
   lui-même reste lisible, c'est l'agrégation qui saute. */
.woocommerce div.product .woocommerce-product-rating,
.woocommerce #reviews .star-rating,
.woocommerce #review_form .stars { display: none !important; }

.woocommerce #reviews .commentlist { padding: 0; }

.woocommerce #reviews .comment_container {
  border: 0;
  padding: 0 0 var(--ak-s4);
  border-bottom: 1px solid var(--ak-line);
  background: transparent;
}

.woocommerce #reviews .comment-text { border: 0; padding: 0; margin-left: 58px; }

.ak-reviews-note {
  font-size: 12px;
  color: var(--ak-ink-mute);
  line-height: 1.6;
  margin-top: var(--ak-s4);
}

/* --- Produits liés ------------------------------------------------------- */

.woocommerce .related,
.woocommerce .up-sells {
  margin-top: var(--ak-s8);
  padding-top: var(--ak-s6);
  border-top: 1px solid var(--ak-line);
}

.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-section);
  letter-spacing: var(--ak-ls-display);
  margin: 0 0 var(--ak-s5);
}

/* ===========================================================================
 * 30. Le panier coulissant
 *
 * Livrable du Tier 1 : « panier coulissant latéral sans rechargement de page ».
 *
 * Exception enregistrée : le panneau est NATIF à Woostify (#shop-cart-sidebar)
 * et passe déjà par les fragments AJAX de WooCommerce. En écrire un second
 * dupliquerait la logique de panier, casserait les fragments et se battrait
 * avec le parent. On l'habille.
 * ========================================================================= */

#shop-cart-sidebar {
  width: min(390px, 100vw);
  background-color: var(--ak-paper);
  border-radius: var(--ak-r-block) 0 0 var(--ak-r-block);
  box-shadow: -20px 0 50px rgba(30, 35, 33, .14);
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  #shop-cart-sidebar { border-radius: var(--ak-r-block) var(--ak-r-block) 0 0; }
}

.cart-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ak-s6) var(--ak-s6) var(--ak-s4);
  border-bottom: 1px solid var(--ak-line);
}

.cart-sidebar-title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--ak-ls-display);
  margin: 0;
}

#close-cart-sidebar-btn {
  background: transparent;
  border: 0;
  padding: var(--ak-s2);
  color: var(--ak-ink);
  border-radius: var(--ak-r-pill);
}

#close-cart-sidebar-btn:hover {
  background-color: var(--ak-ground);
  transform: none;
  box-shadow: none;
}

.cart-sidebar-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--ak-s4) var(--ak-s6);
}

/* --- Une ligne de panier ------------------------------------------------- */

.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }

.woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: var(--ak-s4);
  padding: var(--ak-s4) 0;
  border-bottom: 1px solid var(--ak-line);
  margin: 0;
}

.woocommerce-mini-cart-item:last-child { border-bottom: 0; }

.woocommerce-mini-cart-item img {
  width: 78px;
  height: 92px;
  object-fit: contain;
  background-color: var(--ak-packshot);
  border-radius: var(--ak-r-field);
  padding: var(--ak-s2);
  margin: 0;
  mix-blend-mode: multiply;
}

.woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--ak-text);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ak-ink);
  line-height: 1.3;
  padding: 0;
}

.woocommerce-mini-cart-item .variation,
.woocommerce-mini-cart-item dl.variation {
  font-size: 12.5px;
  color: var(--ak-ink-soft);
  margin: 4px 0 0;
}

.woocommerce-mini-cart-item .quantity {
  font-size: 14px;
  font-weight: 600;
  color: var(--ak-ink);
  margin-top: var(--ak-s2);
}

/* La croix de suppression reste discrète : c'est une action de repli, pas une
   action principale, et un rouge vif à côté du prix ferait hésiter. */
.woocommerce-mini-cart-item a.remove {
  color: var(--ak-ink-mute) !important;
  background: transparent !important;
  font-size: 18px;
  line-height: 1;
}

.woocommerce-mini-cart-item a.remove:hover { color: var(--ak-pop) !important; }

/* --- Le pied du panneau -------------------------------------------------- */

.woocommerce-mini-cart__bottom,
.cart-sidebar-content .woocommerce-mini-cart__total {
  padding: var(--ak-s5) var(--ak-s6) var(--ak-s6);
  border-top: 1px solid var(--ak-line);
  background-color: #fff;
  margin: 0 calc(var(--ak-s6) * -1);
}

.woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--ak-text);
  font-size: 15px;
  font-weight: 600;
  border: 0;
  padding: 0 0 var(--ak-s4);
  margin: 0;
}

.woocommerce-mini-cart__total .amount,
.woocommerce-mini-cart__total strong + .amount {
  font-family: var(--ak-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ak-ink);
  letter-spacing: var(--ak-ls-display);
}

.woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--ak-s3);
  margin: 0;
}

/* Une seule action dominante : « Commander ». Voir le panier devient un lien,
   pas un bouton, sinon les deux se disputent le clic. */
.woocommerce-mini-cart__buttons .checkout {
  width: 100%;
  text-align: center;
  padding: var(--ak-s4) var(--ak-s6);
  font-size: 15px;
}

.woocommerce-mini-cart__buttons a:not(.checkout) {
  background: transparent !important;
  border: 0 !important;
  color: var(--ak-ink-soft) !important;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-mini-cart__buttons a:not(.checkout):hover {
  color: var(--ak-ink) !important;
  transform: none;
  box-shadow: none;
}

/* --- Le rappel d'expédition ---------------------------------------------- */

.ak-cart-note {
  display: flex;
  align-items: center;
  gap: var(--ak-s3);
  margin-top: var(--ak-s4);
  padding: var(--ak-s3) var(--ak-s4);
  background-color: var(--ak-bienetre);
  border-radius: var(--ak-r-field);
  font-size: 12.5px;
  line-height: 1.5;
  color: #2A3B32;
}

.ak-cart-note .ak-icon { flex-shrink: 0; width: 17px; height: 17px; }

/* --- Panier vide --------------------------------------------------------- */

.woocommerce-mini-cart__empty-message {
  text-align: center;
  padding: var(--ak-s8) var(--ak-s4);
  color: var(--ak-ink-soft);
  font-size: 14.5px;
}

/* ===========================================================================
 * 31. Panier et tunnel de paiement
 *
 * RESTYLAGE SEULEMENT. Le comportement est gelé : aucun hook de paiement,
 * aucun plugin de livraison, aucune logique touchée. Règle 5 des Notes de la
 * carte, et le tunnel était déjà cassé avant notre intervention (ticket #12).
 * ========================================================================= */

.woocommerce-cart-form__contents,
.woocommerce-checkout .shop_table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce-cart-form__contents thead th,
.woocommerce-checkout .shop_table thead th {
  font-family: var(--ak-text);
  font-size: var(--ak-fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ak-ls-label);
  color: var(--ak-ink-soft);
  border-bottom: 1px solid var(--ak-line);
  padding: 0 var(--ak-s4) var(--ak-s3);
}

.woocommerce-cart-form__contents td,
.woocommerce-checkout .shop_table td {
  border: 0;
  border-bottom: 1px solid var(--ak-line);
  padding: var(--ak-s4);
  vertical-align: middle;
}

.woocommerce-cart-form__contents .product-thumbnail img {
  width: 76px;
  border-radius: var(--ak-r-field);
  background-color: var(--ak-packshot);
  padding: var(--ak-s2);
  mix-blend-mode: multiply;
}

.woocommerce-cart-form__contents .product-name a {
  font-weight: 600;
  color: var(--ak-ink);
}

.cart_totals,
.woocommerce-checkout-review-order {
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-block);
  padding: var(--ak-s6);
}

.cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--ak-ls-display);
  margin: 0 0 var(--ak-s4);
}

.cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
  font-family: var(--ak-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ak-ink);
}

.wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order {
  width: 100%;
  padding: var(--ak-s4) var(--ak-s6);
  font-size: 15px;
  text-align: center;
}

/* Les étapes du checkout multi-étapes de Woostify. */
.multi-step-item .item-text {
  font-family: var(--ak-text);
  font-size: 13px;
  font-weight: 600;
}

.has-multi-step-checkout .multi-step-item.active::before,
.has-multi-step-checkout .multi-step-item::before {
  background-color: var(--ak-ink);
}

/* Le formulaire respire : sur un checkout, chaque champ serré coûte une vente. */
.woocommerce-checkout .form-row { margin-bottom: var(--ak-s4); }

.woocommerce-checkout .form-row label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ak-ink-soft);
  margin-bottom: 6px;
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  background-color: var(--ak-ground) !important;
  color: var(--ak-ink) !important;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  padding: var(--ak-s4) var(--ak-s5);
  font-size: 14px;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before { color: var(--ak-ink); }

.woocommerce .woocommerce-error {
  background-color: #FBEDE8 !important;
  border: 1px solid #F0CDC0;
  border-radius: var(--ak-r-card);
  color: #8E3A1E !important;
}

/* Le panier vide : un cul-de-sac doit proposer une sortie. */
.cart-empty {
  font-family: var(--ak-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-ink);
  background: transparent !important;
  border: 0;
  padding: var(--ak-s8) 0 var(--ak-s4) !important;
  text-align: center;
}

.cart-empty::before { display: none !important; }

.return-to-shop { text-align: center; padding-bottom: var(--ak-s8); }

/* La vignette du panier coulissant.
 *
 * WooCommerce ecrit ses dimensions en attributs HTML, et sa feuille de widget
 * la contraint en plus. Il faut donc a la fois une specificite superieure et
 * un max-width, sinon elle retombe a 75px carres. */
#shop-cart-sidebar .woocommerce-mini-cart-item img,
.cart-sidebar-content .mini_cart_item img,
.woocommerce ul.product_list_widget li img,
.product_list_widget.woocommerce-mini-cart img {
  width: 78px !important;
  height: 92px !important;
  /* Woostify plafonne la vignette a 75px de haut : une hauteur, meme en
     !important, ne passe pas au-dessus d un max-height. Il faut relever les
     deux. */
  max-width: 78px !important;
  max-height: 92px !important;
  object-fit: contain !important;
  float: none !important;
}

/* ---------------------------------------------------------------------------
 * 32. Un seul logo, a toutes les largeurs
 *
 * Woostify gere un logo desktop et un logo mobile separes, et masque le premier
 * des que la classe has-custom-mobile-logo est presente. Notre monogramme est
 * un SVG plus du texte : il n a pas besoin d une seconde version, il se met a
 * l echelle. On masque donc le logo mobile du parent et on rend le notre
 * visible partout.
 *
 * Au passage, le PNG mobile de la production ne se charge meme pas : la
 * cliente affichait une image cassee sur telephone, ce qui est le premier
 * ecran que voient ses visiteuses.
 * ------------------------------------------------------------------------- */

.site-branding .ak-logo { display: inline-flex !important; }

.custom-mobile-logo-url,
.site-branding .custom-mobile-logo,
.site-branding .custom-logo-link:not(.ak-logo) { display: none !important; }

/* ===========================================================================
 * 33. Le hero en carrousel
 *
 * Le hero garde sa structure et change d'article. La teinte de fond suit
 * l'univers du produit montre : le carrousel demontre la regle de couleur au
 * lieu de la decorer.
 *
 * Les diapositives sont empilees en grille plutot qu'en absolu, pour que la
 * hauteur du hero soit celle de la plus grande et ne saute pas d'une a l'autre.
 * ========================================================================= */

.ak-hero { display: grid; }

.ak-slide {
  grid-area: 1 / 1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-s7);
  min-height: 420px;
}

/* Une diapositive masquee doit disparaitre du flux.
   Sans cette ligne, le display:flex ci-dessus bat la regle navigateur de
   l'attribut hidden et les cinq diapositives se dessinent l'une sur l'autre. */
.ak-slide[hidden] { display: none; }

/* Ceinture et bretelles : si le script ne demarre pas (GSAP indisponible), seule
   la premiere reste lisible. */
.ak-hero:not(.is-ready) .ak-slide + .ak-slide { visibility: hidden; }

.ak-slide__text { max-width: 540px; }

.ak-hero__title--product {
  font-size: clamp(30px, 3.4vw, 46px);
  max-width: 16ch;
}

/* Le prix d'un article remplace la phrase de marque : il doit peser autant. */
.ak-hero__lead .price,
.ak-hero__lead .woocommerce-Price-amount {
  font-family: var(--ak-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ak-ink);
  letter-spacing: var(--ak-ls-display);
}

.ak-hero__lead del,
.ak-hero__lead del .woocommerce-Price-amount {
  font-size: 18px;
  color: var(--ak-ink-mute);
  font-weight: 400;
  margin-right: var(--ak-s2);
}

.ak-hero__lead ins { text-decoration: none; }

.ak-hero__shot { position: relative; }

.ak-hero__shot .ak-badge--sale {
  position: absolute;
  top: var(--ak-s4);
  left: var(--ak-s4);
  z-index: 2;
}

/* --- Le pied du hero ----------------------------------------------------- */

.ak-hero__foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--ak-s4);
  margin-top: var(--ak-s6);
}

.ak-hero__foot .ak-promises { flex-grow: 1; margin: 0; }

.ak-dots {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Le WCAG 2.2.2 exige un moyen d'arreter tout contenu qui defile plus de cinq
   secondes. La pause au survol ne compte pas : elle n'existe ni au doigt, ni
   pour qui ne passe jamais la souris sur le hero. */
.ak-hero__pause {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  margin-right: var(--ak-s2);
  border: 1px solid var(--ak-ink);
  border-radius: var(--ak-r-pill);
  background-color: transparent;
  color: var(--ak-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  flex-shrink: 0;
  transition: opacity var(--ak-dur-fast) var(--ak-ease);
}

.ak-hero__pause:hover,
.ak-hero__pause:focus-visible {
  background-color: transparent;
  color: var(--ak-ink);
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.ak-hero__pause .ak-icon { width: 13px; height: 13px; }

/* Le bouton porte les deux pictogrammes et n'en montre qu'un. La regle est
   explicite parce qu'on s'est deja fait avoir une fois : une declaration
   display quelque part bat la feuille du navigateur pour [hidden], et les deux
   se dessineraient l'un sur l'autre. */
.ak-hero__pause .ak-icon[hidden] { display: none; }

/* La puce se voit sur 9 px et se clique sur 24. Le WCAG 2.5.8 demande une
   cible de 24 px ; un point de 9 px de large est infernal au doigt, et rien
   n'oblige a le grossir pour autant. Le padding transparent fait la zone, le
   background-clip garde le dessin a sa taille. */
.ak-dot {
  width: 24px;
  height: 24px;
  padding: 7px;
  box-sizing: border-box;
  background-clip: content-box;
  border-radius: var(--ak-r-pill);
  border: 1px solid var(--ak-ink);
  background-color: transparent;
  opacity: .35;
  transition: opacity var(--ak-dur-fast) var(--ak-ease), width var(--ak-dur) var(--ak-ease);
}

.ak-dot:hover { opacity: .7; transform: none; box-shadow: none; }

.ak-dot[aria-current="true"],
.ak-dot[aria-selected="true"] {
  background-color: var(--ak-ink);
  opacity: 1;
  width: 39px;
}

@media (max-width: 782px) {
  .ak-slide { flex-direction: column; align-items: stretch; min-height: 0; }
  .ak-hero__foot { flex-direction: column; align-items: stretch; }
  .ak-dots { justify-content: center; }
}

/* ===========================================================================
 * 34. Les univers en bento
 *
 * Cinq blocs identiques alignes, c'etait beaucoup de hauteur pour peu
 * d'information et aucune hierarchie : le rayon de 142 pieces pesait autant que
 * celui de 13. La grille bento donne a chaque univers la place qu'il merite,
 * laisse entrer de vraies photos, et reste sur la meme empreinte verticale.
 *
 * Une tuile large, une tuile haute, deux petites : la dissymetrie est la regle,
 * pas l'accident. C'est exactement le "blocs arrondis qu'on assemble" de la
 * direction Plein Jour.
 * ========================================================================= */

.ak-universes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 152px;
  grid-template-areas:
    "femme femme junior junior bienetre"
    "femme femme homme accessoires bienetre";
  gap: var(--ak-s3);
}

.ak-universe--femme       { grid-area: femme; }
.ak-universe--junior      { grid-area: junior; }
.ak-universe--homme       { grid-area: homme; }
.ak-universe--accessoires { grid-area: accessoires; }
.ak-universe--bienetre    { grid-area: bienetre; }

@media (max-width: 1100px) {
  .ak-universes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 150px;
    grid-template-areas:
      "femme femme junior"
      "homme accessoires bienetre";
  }
}

@media (max-width: 640px) {
  .ak-universes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 138px;
    grid-template-areas:
      "femme femme"
      "junior homme"
      "accessoires bienetre";
  }

  /* Une tuile de 168 px ne tient pas un nom en 21 px, un compte, une liste de
     rayons et une pastille de fleche. On garde ce qui sert a choisir : le nom
     et le volume. Le detail des rayons attend la page du rayon. */
  .ak-universe { padding: var(--ak-s3) var(--ak-s4); }
  .ak-universe__body { max-width: 68%; }
  .ak-universe__name { font-size: 17px; }
  .ak-universe__hint { display: none; }
  .ak-universe__arrow {
    width: 26px;
    height: 26px;
    right: var(--ak-s3);
    top: var(--ak-s3);
  }
  .ak-universe--femme .ak-universe__name { font-size: 24px; }
}

.ak-universe {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 0;
  padding: var(--ak-s4) var(--ak-s5);
  border-radius: var(--ak-r-card);
  background-color: var(--ak-univers);
  color: var(--ak-ink);
  text-decoration: none;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-universe:hover { transform: translateY(-4px); color: var(--ak-ink); }

.ak-universe__body {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 54%;
}

.ak-universe__name {
  display: block;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: var(--ak-ls-display);
  line-height: 1.05;
}

.ak-universe__body .ak-label { display: block; margin-top: 5px; }

.ak-universe__hint {
  display: block;
  font-size: 12px;
  color: var(--ak-ink-soft);
  margin-top: 4px;
  line-height: 1.4;
}

/* Les deux grandes tuiles portent un titre plus fort : la hierarchie doit se
   lire meme en detournant le regard. */
.ak-universe--femme .ak-universe__name    { font-size: 34px; }
.ak-universe--bienetre .ak-universe__name { font-size: 26px; }
.ak-universe--femme .ak-universe__body    { max-width: 62%; }
.ak-universe--bienetre .ak-universe__body { max-width: 100%; }

/* La photo sort par l'angle du bloc plutot que d'y etre posee bien au centre :
   le produit devient la matiere de la tuile.

   Elle est bornee en haut ET en bas, jamais par un ratio. Avec un
   aspect-ratio: 1, une vignette de 250 px de cote dans une tuile de 152 px de
   haut debordait par le haut et se faisait couper net : le t-shirt raye
   apparaissait decapite. Le contain fait le reste.

   Pas de z-index ici non plus. Un z-index ferait de la vignette un contexte
   d'empilement, le mix-blend-mode ne verrait plus l'aplat derriere lui, et les
   packshots garderaient leur fond blanc sur la couleur. */
.ak-universe__thumb {
  position: absolute;
  top: var(--ak-s3);
  right: -10px;
  bottom: -10px;
  width: 44%;
  display: block;
  pointer-events: none;
}

.ak-universe--femme .ak-universe__thumb {
  width: 46%;
  right: -14px;
  bottom: -14px;
  top: var(--ak-s5);
}

/* La tuile haute prend sa photo de face, sous le texte : c'est la seule dont
   la hauteur le permet.

   Elle est centree par ses marges et pas par un translateX. La raison est la
   meme que pour le z-index plus haut : un transform autre que none cree lui
   aussi un groupe d'isolation, le mix-blend-mode ne verrait plus l'aplat, et
   le packshot retrouverait son fond blanc. En permanence, ici. */
.ak-universe--bienetre .ak-universe__thumb {
  left: 14%;
  right: 14%;
  width: auto;
  top: 42%;
  bottom: -10px;
}

/* Le grossissement au survol porte sur l'image et pas sur son conteneur, pour
   la meme raison : un transform sur le parent isolerait l'enfant melange. Sur
   l'element melange lui-meme, il est sans effet sur le melange. */
.ak-universe:hover .ak-universe__thumb img { transform: scale(1.04); }

.ak-universe__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  mix-blend-mode: multiply;
  transform-origin: bottom right;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-universe--bienetre .ak-universe__thumb img { object-position: bottom center; }

.ak-universe__icon {
  width: 62%;
  height: 62%;
  margin: auto;
  color: #fff;
  opacity: .5;
}

.ak-universe__arrow {
  position: absolute;
  right: var(--ak-s4);
  top: var(--ak-s4);
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: var(--ak-r-pill);
  background-color: var(--ak-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-universe:hover .ak-universe__arrow { transform: translate(3px, -3px); }

.ak-universe__arrow .ak-icon { width: 14px; height: 14px; color: var(--ak-ink); }

/* --- La selection, huit pieces plutot que quatre ------------------------- */

.ak-section__more { text-align: center; margin: var(--ak-s6) 0 0; }

/* ===========================================================================
 * 35. Le compte
 *
 * WooCommerce livre deux colonnes flottantes cerclees de pointilles, et notre
 * style de bouton avait transforme la bascule d'affichage du mot de passe en
 * pastille noire posee sur le champ. On remet la page dans le systeme : deux
 * blocs arrondis qu'on assemble, la creation de compte teintee parce que c'est
 * l'invitation et pas la porte de service.
 * ========================================================================= */

/* La page de connexion n'est pas un article : elle n'a pas besoin du grand
   cadre clair que porte site-main. Deux cartes claires posees sur une carte
   claire ne se detachaient plus, et le cadre exterieur ne contenait que du
   vide. On rend le fond a la page et les cartes redeviennent des objets. */
.woocommerce-account:not(.logged-in) .site-main {
  background-color: transparent;
  border-radius: 0;
  padding-inline: 0;
}

.woocommerce-account .site-main .woocommerce {
  max-width: 920px;
  margin-inline: auto;
}

/* --- Se connecter / creer un compte -------------------------------------- */

.woocommerce-account .u-columns.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ak-s5);
  align-items: stretch;
}

/* Woostify pose un max-width: calc(50% - 15px) sur ces colonnes, heritage de
   son ancienne mise en page flottante. Dans une grille, il les reduisait a la
   moitie de leur propre colonne : deux cartes de 230 px perdues au milieu de
   1000 px de vide. On le neutralise plutot que de le contourner. */
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--ak-s6) var(--ak-s6) var(--ak-s7);
  border-radius: var(--ak-r-card);
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  display: flex;
  flex-direction: column;
}

/* Le formulaire pousse vers le bas pour que les deux cartes finissent a la
   meme hauteur sans qu'on ait a leur inventer une hauteur fixe. */
.woocommerce-account .u-columns .u-column1 > form,
.woocommerce-account .u-columns .u-column2 > form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit { margin-top: auto; }

.woocommerce-account .u-columns .u-column2 {
  background-color: var(--ak-bienetre);
  border-color: transparent;
}

.woocommerce-account .u-columns h2 {
  font-family: var(--ak-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: var(--ak-ls-display);
  line-height: 1.1;
  margin: 0 0 var(--ak-s4);
}

/* Deux cadres imbriques, c'est un cadre de trop : le bloc porte la bordure,
   le formulaire ne porte plus rien.

   On reprend mot pour mot le selecteur de Woostify. Le sien compte trois
   classes, le notre en comptait deux plus un element : il gagnait, et les
   pointilles restaient. Copier sa specificite coute moins cher qu'un
   !important qu'il faudrait ensuite trainer partout. */
.woocommerce-account .woocommerce-form.woocommerce-form-login,
.woocommerce-account .woocommerce-form.woocommerce-form-register,
.woocommerce-account form.login,
.woocommerce-account form.register {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.woocommerce-account form .form-row {
  margin: 0 0 var(--ak-s4);
  padding: 0;
}

.woocommerce-account form label {
  display: block;
  font-size: 13px;
  color: var(--ak-ink-soft);
  margin-bottom: 6px;
}

/* L'asterisque passe a l'encre. En orange sur le papier il tombait a 3,8:1,
   sous le seuil AA de 4,5:1, alors qu'il est le seul repere visuel de
   l'obligation. */
.woocommerce-account form .required {
  color: var(--ak-ink);
  text-decoration: none;
  border: 0;
}

.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="tel"] {
  width: 100%;
  min-height: 46px;
}

.woocommerce-account form .woocommerce-form-login__submit,
.woocommerce-account form .woocommerce-form-register__submit {
  width: 100%;
  margin-top: var(--ak-s2);
}

.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ak-ink-soft);
  margin: 0 0 var(--ak-s4);
}

.woocommerce-account .woocommerce-form-login__rememberme input { margin: 0; }
.woocommerce-account .woocommerce-form-login__rememberme span { margin: 0; }

.woocommerce-account .lost_password {
  margin: var(--ak-s4) 0 0;
  font-size: 13px;
  text-align: center;
}

.woocommerce-account form.register > p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ak-ink-soft);
  margin: 0 0 var(--ak-s4);
}

.woocommerce-account .woocommerce-privacy-policy-text p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ak-ink-soft);
}

/* La bascule du mot de passe est un oeil dans un champ, pas une action
   principale. Sans cette remise a zero, elle heritait du bouton a l'encre. */
.woocommerce-account .password-input {
  position: relative;
  display: block;
}

.woocommerce-account .show-password-input {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ak-r-pill);
  background-color: transparent;
  color: var(--ak-ink-soft);
  box-shadow: none;
  line-height: 1;
}

.woocommerce-account .show-password-input:hover,
.woocommerce-account .show-password-input:focus {
  background-color: transparent;
  color: var(--ak-ink);
  transform: translateY(-50%);
  box-shadow: none;
}

.woocommerce-account .password-input input[type="password"],
.woocommerce-account .password-input input[type="text"] { padding-right: 46px; }

/* --- Le tableau de bord, une fois connectee ------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.woocommerce-account.logged-in .site-main .woocommerce {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--ak-s5);
  align-items: start;
}

.woocommerce-account.logged-in .site-main .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px var(--ak-s4);
  border-radius: var(--ak-r-pill);
  color: var(--ak-ink-soft);
  text-decoration: none;
  font-size: 14px;
  transition: background-color var(--ak-dur-fast) var(--ak-ease), color var(--ak-dur-fast) var(--ak-ease);
}

.woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--ak-packshot);
  color: var(--ak-ink);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--ak-ink);
  color: var(--ak-paper);
}

.woocommerce-MyAccount-content {
  padding: var(--ak-s6);
  border-radius: var(--ak-r-card);
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

@media (max-width: 782px) {
  .woocommerce-account .u-columns.col2-set,
  .woocommerce-account.logged-in .site-main .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ===========================================================================
 * 36. Le preloader et la barre de progression
 *
 * Les deux sont vendus au contrat. Les deux sont en CSS, pour la meme raison :
 * un rideau qui depend d'un script retient la page en otage quand le script
 * casse, et une barre pilotee par un ecouteur de defilement recalcule la mise
 * en page a chaque pixel.
 * ========================================================================= */

.ak-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ak-paper);

  /* Le garde-fou. Le rideau se retire seul au bout de 2,4 s meme si le script
     ne s'execute jamais : un ecran blanc coute une vente, une demi-seconde
     d'attente non. */
  animation: ak-curtain 2.4s var(--ak-ease) forwards;
}

.ak-preloader.is-gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ak-ease), visibility 0s linear .45s;
}

@keyframes ak-curtain {
  0%, 88%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; }
}

.ak-preloader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ak-s5);
}

.ak-preloader__mark .ak-monogram {
  animation: ak-mark-in .7s var(--ak-ease) both;
}

@keyframes ak-mark-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Un rail plutot qu'un pourcentage. On ne connait pas la progression reelle du
   chargement, et afficher un chiffre invente serait un mensonge. */
.ak-preloader__rail {
  display: block;
  width: 96px;
  height: 1px;
  background-color: var(--ak-line);
  overflow: hidden;
}

.ak-preloader__fill {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--ak-ink);
  transform-origin: left;
  animation: ak-fill 1.6s var(--ak-ease) infinite;
}

@keyframes ak-fill {
  0%   { transform: scaleX(0); }
  55%  { transform: scaleX(1); transform-origin: left; }
  56%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* --- La barre de progression -------------------------------------------- */

.ak-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  height: 2px;
  pointer-events: none;
}

.ak-progress__bar {
  display: block;
  height: 100%;
  background-color: var(--ak-ink);
  transform: scaleX(0);
  transform-origin: left;
}

/* La ou le navigateur sait lier une animation au defilement, il le fait sur
   son compositeur, sans repasser par le fil principal. Ailleurs,
   experience.js prend le relais. */
@supports (animation-timeline: scroll()) {
  .ak-progress__bar {
    animation: ak-progress linear;
    animation-timeline: scroll(root block);
  }
}

@keyframes ak-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Le rideau est une politesse, pas une information : qui demande moins de
   mouvement ne le voit pas du tout. La barre reste, parce qu'elle dit quelque
   chose de vrai sur la position dans la page. */
@media (prefers-reduced-motion: reduce) {
  .ak-preloader { display: none; }
}

/* ===========================================================================
 * 37. Le zoom doux et la seconde image
 *
 * Woostify sait faire les deux, les reglages etaient eteints. Ils sont rallumes
 * dans tools/apply-tokens.php. Il ne reste ici que la maniere.
 * ========================================================================= */

.product-loop-image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Le grossissement des cartes existait deja, en section 16, a 1,04 et sous un
   selecteur plus specifique. On ne le redit pas ici : deux regles qui font la
   meme chose finissent toujours par diverger. On etend seulement sa portee aux
   cartes posees hors du contexte .woocommerce, comme celles de l'accueil. */
.woocommerce-loop-product__link:hover .product-loop-image-wrapper img {
  transform: scale(1.04);
}

/* La seconde image de la galerie, en fondu par-dessus la premiere. */
.product-loop-hover-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .45s var(--ak-ease), transform .6s var(--ak-ease);
}

li.product:hover .product-loop-hover-image,
.woocommerce-loop-product__link:hover .product-loop-hover-image {
  opacity: 1;
  transform: scale(1.04);
}

/* Le doigt n'a pas de survol. Sur tactile la seconde image ne se declencherait
   qu'au moment du tap, juste avant de quitter la page : autant ne rien faire. */
@media (hover: none) {
  .product-loop-hover-image { display: none; }
  .product-loop-image-wrapper img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-loop-image-wrapper img,
  .product-loop-hover-image { transition: none; }
  li.product:hover .product-loop-image-wrapper img,
  li.product:hover .product-loop-hover-image { transform: none; }
}

/* --- Le zoom de la fiche produit ---------------------------------------- */

/* WooCommerce pose une copie agrandie de l'image en surimpression. Elle doit
   rester dans le cadre arrondi de la galerie, sinon elle deborde par les
   angles. */
.product-images .woocommerce-product-gallery__image,
.product-images .zoomImg {
  border-radius: var(--ak-r-card);
}

.product-images .woocommerce-product-gallery__image {
  overflow: hidden;
  background-color: var(--ak-packshot);
}

/* ===========================================================================
 * 38. Le journal
 *
 * Grille editoriale : dissymetrie, lettrine, exergues, filets de section,
 * mesure bornee. Palette et typographies restent celles du site, parce que le
 * blog n'est pas une autre marque.
 *
 * La contrainte qui a decide de la composition : aucun des onze articles n'a
 * d'image a la une. Le bloc teinte n'est donc pas un repli quand la photo
 * manque, c'est la forme par defaut, et la photo est le cas particulier qui
 * vient s'y poser.
 * ========================================================================= */

.ak-journal { margin: 0 var(--ak-gutter) var(--ak-s9); }

/* --- L'en-tete du journal ------------------------------------------------ */

.ak-journal__head {
  padding: var(--ak-s9) var(--ak-s7) var(--ak-s8);
  text-align: center;
}

.ak-journal__head h1 {
  font-family: var(--ak-display);
  font-size: var(--ak-fs-display);
  font-weight: 600;
  line-height: var(--ak-lh-tight);
  letter-spacing: var(--ak-ls-display);
  margin: var(--ak-s3) 0 var(--ak-s4);
}

.ak-journal__lead {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--ak-ink-soft);
}

.ak-journal__head--archive {
  background-color: var(--ak-univers);
  border-radius: var(--ak-r-block);
  padding: var(--ak-s8) var(--ak-s7);
}

.ak-journal__back { margin: var(--ak-s5) 0 0; font-size: var(--ak-fs-small); }

/* --- La grille ----------------------------------------------------------
 * Trois colonnes, la premiere carte en prend deux. C'est la dissymetrie de la
 * grille editoriale, et elle donne au dernier billet le poids qu'il merite
 * sans obliger Marie a entretenir un reglage « mis en avant ». */

.ak-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ak-s4);
}

/* --- La carte d'un billet ------------------------------------------------ */

.ak-post {
  border-radius: var(--ak-r-card);
  overflow: hidden;
  background-color: var(--ak-univers);
  transition: transform var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}

.ak-post--wide { grid-column: span 2; }

.ak-post:hover { transform: translateY(-4px); box-shadow: var(--ak-shadow-lift); }

.ak-post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 260px;
  color: var(--ak-ink);
  text-decoration: none;
}

.ak-post__link:focus-visible { outline: 2px solid var(--ak-ink); outline-offset: -4px; }

.ak-post__shot { display: block; overflow: hidden; }

.ak-post__shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-post:hover .ak-post__shot img { transform: scale(1.03); }

.ak-post__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--ak-s3);
  padding: var(--ak-s6);
}

.ak-post--shot .ak-post__body { background-color: var(--ak-paper); }

.ak-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ak-s2) var(--ak-s3);
  font-size: var(--ak-fs-label);
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ak-ink-soft);
}

.ak-post__cat {
  background-color: var(--ak-paper);
  border-radius: var(--ak-r-pill);
  padding: 4px 10px;
}

.ak-post--shot .ak-post__cat { background-color: var(--ak-univers); }

.ak-post__title {
  display: block;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: var(--ak-ls-display);
  text-wrap: balance;
}

/* Sans photo, le titre porte la carte a lui seul : il grossit. */
.ak-post--plain.ak-post--wide .ak-post__title { font-size: clamp(28px, 3.2vw, 40px); }
.ak-post--plain .ak-post__title { font-size: clamp(22px, 2vw, 27px); }

.ak-post__excerpt {
  display: block;
  font-size: var(--ak-fs-small);
  line-height: 1.6;
  color: var(--ak-ink-soft);
}

.ak-post__more {
  margin-top: auto;
  font-size: var(--ak-fs-label);
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 2px;
}

/* --- Rien a montrer ------------------------------------------------------ */

.ak-journal__empty {
  text-align: center;
  padding: var(--ak-s9) var(--ak-s6);
  background-color: var(--ak-paper);
  border-radius: var(--ak-r-block);
}

.ak-journal__empty h2 { font-family: var(--ak-display); font-size: var(--ak-fs-section); margin: 0 0 var(--ak-s3); }
.ak-journal__empty p { color: var(--ak-ink-soft); margin: 0 0 var(--ak-s5); }

/* ===========================================================================
 * L'article
 * ========================================================================= */

.ak-article { margin: 0 var(--ak-gutter) var(--ak-s9); }

.ak-article__head {
  position: relative;
  overflow: hidden;
  background-color: var(--ak-univers);
  border-radius: var(--ak-r-block);
  padding: var(--ak-s9) var(--ak-s7) var(--ak-s8);
  text-align: center;
}

.ak-article__head-inner { position: relative; z-index: 2; max-width: 22ch; margin: 0 auto; }

.ak-article__head h1 {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: var(--ak-lh-tight);
  letter-spacing: var(--ak-ls-display);
  margin: var(--ak-s3) 0 var(--ak-s4);
  text-wrap: balance;
}

.ak-article__by { margin: 0; font-size: var(--ak-fs-small); color: var(--ak-ink-soft); }

/* Le mot qui deborde, comme sur les blocs de l'accueil. Il est decoratif et
   porte aria-hidden : un lecteur d'ecran n'a rien a faire de « Journal » lu au
   milieu du titre. */
.ak-article__bleed {
  position: absolute;
  left: 50%;
  bottom: -0.30em;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-bleed);
  line-height: .8;
  letter-spacing: var(--ak-ls-bleed);
  color: var(--ak-paper);
  opacity: .45;
  pointer-events: none;
  white-space: nowrap;
}

/* --- La photo de tete ---------------------------------------------------- */

.ak-article__shot {
  margin: calc(var(--ak-s7) * -1) auto var(--ak-s7);
  max-width: 860px;
  position: relative;
  z-index: 3;
  padding: 0 var(--ak-s5);
}

.ak-article__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ak-r-img);
  box-shadow: var(--ak-shadow);
}

.ak-article__shot figcaption {
  margin-top: var(--ak-s3);
  font-size: var(--ak-fs-small);
  color: var(--ak-ink-mute);
  text-align: center;
}

/* --- Le corps du texte ---------------------------------------------------
 * La mesure est bornee a 68 caracteres. Au-dela, l'oeil perd la ligne suivante
 * en revenant a la marge, et c'est le defaut le plus courant d'un blog pose
 * sur un theme de boutique. Le texte reste sur le creme : la couleur situe
 * l'article dans son en-tete, elle ne l'accompagne pas jusqu'au bout, parce
 * qu'on lit mal sur un aplat. */

.ak-article__body {
  max-width: 68ch;
  margin: var(--ak-s8) auto 0;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ak-ink);
}

.ak-article__body > * + * { margin-top: var(--ak-s5); }

.ak-article__body p { margin: 0; }

.ak-article__body h2,
.ak-article__body h3 {
  font-family: var(--ak-display);
  font-weight: 600;
  letter-spacing: var(--ak-ls-display);
  line-height: 1.15;
  margin-top: var(--ak-s8);
  text-wrap: balance;
}

.ak-article__body h2 { font-size: 28px; }
.ak-article__body h3 { font-size: 21px; }

/* La lettrine. Elle ne s'applique qu'au premier paragraphe, et seulement s'il
   suit directement le debut : sur un billet de trois lignes elle serait
   ridicule, donc elle attend un texte qui la porte. */
.ak-article__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 3.6em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--ak-ink);
}

.ak-article__body a {
  color: var(--ak-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ak-ink-mute);
}

.ak-article__body a:hover { text-decoration-color: var(--ak-ink); }

.ak-article__body ul,
.ak-article__body ol { padding-left: var(--ak-s5); }
.ak-article__body li + li { margin-top: var(--ak-s2); }
.ak-article__body li::marker { color: var(--ak-ink-mute); }

/* L'exergue. Elle sort de la mesure des deux cotes : c'est ce qui la fait
   respirer et ce qui donne son rythme a une page longue. */
.ak-article__body blockquote {
  margin: var(--ak-s8) calc(var(--ak-s7) * -1);
  padding: 0 var(--ak-s7);
  border-left: 2px solid var(--ak-ink);
  font-family: var(--ak-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: var(--ak-ls-display);
}

.ak-article__body blockquote p { margin: 0; }
.ak-article__body blockquote cite {
  display: block;
  margin-top: var(--ak-s3);
  font-family: var(--ak-text);
  font-size: var(--ak-fs-small);
  font-style: normal;
  color: var(--ak-ink-soft);
}

/* Les images du corps depassent la mesure : un texte etroit et une photo
   etroite donnent une colonne qui n'en finit pas. */
.ak-article__body img,
.ak-article__body figure {
  max-width: none;
  width: 100%;
}

.ak-article__body figure {
  margin-left: calc(var(--ak-s7) * -1);
  margin-right: calc(var(--ak-s7) * -1);
  width: auto;
}

.ak-article__body img { border-radius: var(--ak-r-img); height: auto; display: block; }

.ak-article__body figcaption {
  margin-top: var(--ak-s3);
  font-size: var(--ak-fs-small);
  color: var(--ak-ink-mute);
  text-align: center;
}

.ak-article__body hr {
  border: 0;
  border-top: 1px solid var(--ak-line);
  margin: var(--ak-s8) 0;
}

/* Un billet sans corps de texte. Il ne reste que le titre et la discussion :
   l'invitation fait le pont, et evite un grand vide entre les deux. */
.ak-article__invite {
  max-width: 68ch;
  margin: var(--ak-s8) auto 0;
  text-align: center;
}

.ak-article__invite a {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--ak-r-pill);
  background-color: var(--ak-ink);
  color: var(--ak-paper);
  text-decoration: none;
  font-size: var(--ak-fs-label);
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  font-weight: 600;
}

.ak-article__invite a:hover { background-color: var(--ak-accent-dark); color: var(--ak-paper); }

/* --- Etiquettes et navigation entre billets ------------------------------ */

.ak-article__tags {
  max-width: 68ch;
  margin: var(--ak-s8) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-s2);
}

.ak-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--ak-r-pill);
  border: 1px solid var(--ak-line);
  background-color: var(--ak-paper);
  color: var(--ak-ink);
  font-size: var(--ak-fs-small);
  text-decoration: none;
}

.ak-chip:hover { background-color: var(--ak-ink); color: var(--ak-paper); border-color: var(--ak-ink); }

.ak-article__around {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ak-s4);
  margin: var(--ak-s9) auto 0;
  max-width: 900px;
}

.ak-around {
  display: block;
  padding: var(--ak-s6);
  border-radius: var(--ak-r-card);
  background-color: var(--ak-univers);
  color: var(--ak-ink);
  text-decoration: none;
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-around:hover { transform: translateY(-3px); color: var(--ak-ink); }

.ak-around__title {
  display: block;
  margin-top: var(--ak-s2);
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: var(--ak-ls-display);
}

/* ===========================================================================
 * Les pieces citees
 * ========================================================================= */

.ak-cited {
  max-width: 900px;
  margin: var(--ak-s9) auto 0;
  padding: var(--ak-s7);
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-block);
}

.ak-cited__title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-section);
  letter-spacing: var(--ak-ls-display);
  margin: var(--ak-s2) 0 var(--ak-s6);
}

.ak-cited__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ak-s4);
}

/* Chaque piece porte la teinte de son propre rayon, pas celle de l'article.
   C'est la meme regle que partout : la couleur dit le rayon du produit. */
.ak-cited__item { border-radius: var(--ak-r-card); overflow: hidden; background-color: var(--ak-univers); }

.ak-cited__item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ak-ink);
  text-decoration: none;
}

.ak-cited__shot { display: block; padding: var(--ak-s4) var(--ak-s4) 0; }

.ak-cited__shot img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

.ak-cited__body { display: block; padding: var(--ak-s4); }

.ak-cited__name {
  display: block;
  font-size: var(--ak-fs-small);
  font-weight: 500;
  line-height: 1.3;
}

.ak-cited__price { display: block; margin-top: 4px; font-size: var(--ak-fs-small); color: var(--ak-ink-soft); }
.ak-cited__price del { color: var(--ak-ink-mute); margin-right: 6px; }
.ak-cited__price ins { text-decoration: none; color: var(--ak-pop); }

/* ===========================================================================
 * La discussion
 * ========================================================================= */

.ak-talk { max-width: 68ch; margin: var(--ak-s9) auto 0; }

.ak-talk__title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-section);
  letter-spacing: var(--ak-ls-display);
  margin: 0 0 var(--ak-s6);
}

.ak-talk__list, .ak-talk__list .children { list-style: none; margin: 0; padding: 0; }
.ak-talk__list .children { margin-left: var(--ak-s6); padding-left: var(--ak-s5); border-left: 1px solid var(--ak-line); }

.ak-comment { margin: 0 0 var(--ak-s4); }

.ak-comment__body {
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  padding: var(--ak-s5);
}

.ak-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ak-s3); margin-bottom: var(--ak-s3); }
.ak-comment__author { font-weight: 600; }
.ak-comment__date { font-size: var(--ak-fs-label); letter-spacing: var(--ak-ls-label); text-transform: uppercase; color: var(--ak-ink-mute); }

.ak-comment__pending {
  margin: 0 0 var(--ak-s3);
  padding: var(--ak-s3) var(--ak-s4);
  border-radius: var(--ak-r-field);
  background-color: var(--ak-bienetre);
  font-size: var(--ak-fs-small);
}

.ak-comment__text p { margin: 0 0 var(--ak-s3); }
.ak-comment__text p:last-child { margin-bottom: 0; }

.ak-comment__reply { display: inline-block; margin-top: var(--ak-s3); font-size: var(--ak-fs-small); }

/* Le formulaire ---------------------------------------------------------- */

.ak-talk .comment-respond { margin-top: var(--ak-s8); }

.ak-talk .comment-form { display: grid; gap: var(--ak-s4); }

.ak-talk .comment-form p { margin: 0; }

.ak-talk .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--ak-fs-small);
  color: var(--ak-ink-soft);
}

.ak-talk .comment-form input[type="text"],
.ak-talk .comment-form input[type="email"],
.ak-talk .comment-form textarea {
  width: 100%;
  min-height: 46px;
}

.ak-talk .comment-form textarea { min-height: 140px; resize: vertical; }

.ak-help { display: block; margin-top: 6px; font-size: 12px; color: var(--ak-ink-mute); }
.ak-req { color: var(--ak-ink); }

.ak-talk__note, .ak-talk .comment-notes {
  font-size: var(--ak-fs-small);
  color: var(--ak-ink-soft);
  margin: 0;
}

.ak-talk__closed { color: var(--ak-ink-soft); font-size: var(--ak-fs-small); }

/* Le piege a robots. Il doit etre invisible a l'oeil et absent du parcours au
   clavier, sans etre display:none : plusieurs robots ignorent les champs
   caches de cette maniere, ce qui viderait le piege de son interet. */
.ak-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Adaptation ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .ak-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ak-post--wide { grid-column: span 2; }
}

@media (max-width: 782px) {
  .ak-journal__grid { grid-template-columns: minmax(0, 1fr); }
  .ak-post--wide { grid-column: span 1; }
  .ak-journal__head { padding: var(--ak-s7) var(--ak-s5) var(--ak-s6); }
  .ak-article__head { padding: var(--ak-s7) var(--ak-s5) var(--ak-s6); }
  .ak-article__body { padding: 0 var(--ak-s5); font-size: 16px; }
  .ak-article__body blockquote { margin-left: 0; margin-right: 0; padding-left: var(--ak-s4); padding-right: 0; }
  .ak-article__body figure { margin-left: 0; margin-right: 0; }
  .ak-article__tags, .ak-talk { padding: 0 var(--ak-s5); }
  .ak-article__around { grid-template-columns: minmax(0, 1fr); }
  .ak-cited { padding: var(--ak-s5); }
  .ak-talk__list .children { margin-left: 0; padding-left: var(--ak-s4); }
}

@media (prefers-reduced-motion: reduce) {
  .ak-post, .ak-post__shot img, .ak-around { transition: none; }
  .ak-post:hover, .ak-around:hover { transform: none; }
  .ak-post:hover .ak-post__shot img { transform: none; }
}

/* ===========================================================================
 * 39. Le journal, vu depuis une fiche produit
 *
 * L'autre moitie du maillage. Le bloc des pieces citees mene de l'article vers
 * la boutique ; celui-ci ramene de la boutique vers l'article. Il ne parait que
 * s'il a quelque chose a dire : un bloc vide avec un titre annonce du contenu
 * et n'en montre pas.
 * ========================================================================= */

.ak-reads {
  margin: var(--ak-s9) auto 0;
  max-width: 1120px;
  padding: 0 var(--ak-gutter);
}

.ak-reads__title {
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: var(--ak-fs-section);
  letter-spacing: var(--ak-ls-display);
  margin: var(--ak-s2) 0 var(--ak-s6);
}

.ak-reads__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ak-s4);
}

.ak-reads__item {
  border-radius: var(--ak-r-card);
  overflow: hidden;
  background-color: var(--ak-univers);
  transition: transform var(--ak-dur) var(--ak-ease);
}

.ak-reads__item:hover { transform: translateY(-3px); }

.ak-reads__item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ak-ink);
  text-decoration: none;
}

.ak-reads__shot { display: block; overflow: hidden; }

.ak-reads__shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.ak-reads__body { display: block; padding: var(--ak-s5); }

.ak-reads__date {
  display: block;
  font-size: var(--ak-fs-label);
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ak-ink-soft);
  margin-bottom: var(--ak-s2);
}

.ak-reads__name {
  display: block;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--ak-ls-display);
}

@media (prefers-reduced-motion: reduce) {
  .ak-reads__item { transition: none; }
  .ak-reads__item:hover { transform: none; }
}

/* ===========================================================================
 * 40. Le tunnel en blocs
 *
 * La boutique utilise le tunnel en blocs de WooCommerce, pas l'ancien a
 * raccourci. Notre section 31 visait les selecteurs de l'ancien, donc elle ne
 * touchait rien : le bouton de commande restait au gris #32373C de WooCommerce
 * et les champs a leur rayon de 4 px, au milieu d'un site entierement arrondi.
 *
 * Les polices, elles, passaient deja par heritage. C'est ce qui rendait le
 * defaut discret : la page avait l'air presque juste, et c'est le pire etat
 * pour une page ou l'on sort sa carte bancaire.
 *
 * On ne redessine pas le tunnel. On lui donne nos formes et notre encre sur ce
 * qui se voit et se touche : les champs, le bouton, les cartes. Le reste garde
 * le comportement de WooCommerce, qui sait ce qu'il fait.
 * ========================================================================= */

/* --- Les champs ---------------------------------------------------------- */

/* On reprend le selecteur de WooCommerce et on ajoute body devant.
   Egaler sa specificite ne suffisait pas : ses feuilles de blocs se chargent
   apres la notre, donc a egalite c'est lui qui gagnait. Un element de plus
   suffit a passer devant, et ca reste moins cher qu'un !important qu'il
   faudrait ensuite trainer sur chaque champ. */
body .wc-block-components-form .wc-block-components-text-input input[type="text"],
body .wc-block-components-form .wc-block-components-text-input input[type="email"],
body .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body .wc-block-components-form .wc-block-components-text-input input[type="number"],
body .wc-block-components-form .wc-block-components-textarea,
body .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-form .components-combobox-control__input {
  border-radius: var(--ak-r-field);
  border: 1px solid var(--ak-line);
  background-color: var(--ak-paper);
  color: var(--ak-ink);
  font-family: var(--ak-text);
  min-height: 50px;
}

body .wc-block-components-form .wc-block-components-text-input input:focus,
body .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--ak-ink);
  outline: 2px solid var(--ak-ink);
  outline-offset: 1px;
  box-shadow: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  color: var(--ak-ink-soft);
  font-family: var(--ak-text);
}

/* --- Les boutons --------------------------------------------------------- */

.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
  background-color: var(--ak-accent);
  color: var(--ak-paper);
  border-radius: var(--ak-r-pill);
  font-family: var(--ak-text);
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  font-size: var(--ak-fs-label);
  min-height: 54px;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
  background-color: var(--ak-accent-dark);
  color: var(--ak-paper);
}

.wc-block-components-button.is-link {
  color: var(--ak-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Les blocs de la page ------------------------------------------------ */

.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-order-summary {
  background-color: var(--ak-paper);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-card);
  padding: var(--ak-s5);
}

.wc-block-components-checkout-step__title {
  font-family: var(--ak-display);
  font-weight: 600;
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-ink);
}

.wc-block-components-checkout-step {
  border-bottom: 1px solid var(--ak-line);
  padding-bottom: var(--ak-s6);
}

.wc-block-components-checkout-step:last-child { border-bottom: 0; }

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--ak-display);
  font-weight: 600;
  color: var(--ak-ink);
}

.wc-block-components-product-name { color: var(--ak-ink); text-decoration: none; }

.wc-block-components-order-summary-item__image img {
  border-radius: var(--ak-r-field);
  background-color: var(--ak-packshot);
}

/* --- Les messages -------------------------------------------------------- */

.wc-block-components-notice-banner {
  border-radius: var(--ak-r-card);
  font-family: var(--ak-text);
}

.wc-block-components-notice-banner.is-error { border-color: var(--ak-pop); }

/* La ligne qui apparait tant qu aucune adresse n est saisie. Elle est normale,
   mais sur cette boutique elle reste affichee meme apres saisie : aucune zone
   de livraison ne couvre les pays de vente. Defaut anterieur a notre
   intervention, chiffre a part, voir services-additionnels.md point A. */
.wc-block-components-shipping-address-notice,
.wc-block-components-shipping-rates-control__no-results-notice {
  border-radius: var(--ak-r-field);
  background-color: var(--ak-accessoires);
  color: var(--ak-ink);
}

/* ===========================================================================
 * 41. Rester en contact
 *
 * La bande du pied de page : une invitation a ecrire, puis les comptes. Elle
 * vit dans le pied de page a l'encre, donc tout y est en clair sur sombre.
 *
 * Les pictogrammes des reseaux sont ceux du jeu maison, au trait. Ils ne sont
 * pas les logos des plateformes : un logo ne se recolore pas, et un aplat bleu
 * au milieu d'un pied de page a l'encre casserait le systeme.
 * ========================================================================= */

.ak-connect {
  /* Woostify pose ses colonnes de widgets en flottants. Sans `clear`, la bande
     demarrait a la meme hauteur qu'elles : son filet se dessinait tout en haut
     du pied de page, en travers des colonnes, et sa boite mesurait 603 px pour
     76 px de contenu. Mesure faite le 10 septembre a 1000 px de large.

     Un `clear: both` suffit. C'est le genre de detail qu'on ne voit pas en
     lisant le CSS et qu'on voit tout de suite en mesurant le rendu. */
  clear: both;
  border-top: 1px solid #2E3532;
  padding: var(--ak-s7) 0;
}

.ak-connect__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-s5) var(--ak-s7);
}

.ak-connect__say .ak-label { color: #7E8783; margin-bottom: var(--ak-s2); }

.ak-connect__title {
  margin: 0;
  font-family: var(--ak-display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.15;
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-paper);
  max-width: 22ch;
}

.ak-connect__do {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ak-s4);
}

/* --- L'appel a l'action -------------------------------------------------- */

.ak-connect__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ak-s2);
  min-height: 48px;
  padding: 0 var(--ak-s5);
  border-radius: var(--ak-r-pill);
  background-color: var(--ak-paper);
  color: var(--ak-ink);
  font-size: var(--ak-fs-label);
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--ak-dur) var(--ak-ease), background-color var(--ak-dur-fast) var(--ak-ease);
}

.ak-connect__cta:hover {
  background-color: #FFFFFF;
  color: var(--ak-ink);
  transform: translateY(-2px);
}

.ak-connect__cta:focus-visible { outline: 2px solid var(--ak-paper); outline-offset: 3px; }

/* Le texte du bouton etait presque invisible.
 *
 * La cause est une histoire de specificite, pas de couleur. Le bloc ci-dessus
 * pose bien de l'encre sur du creme, mais `.site-footer a { color: #C7CCC9 }`
 * compte (0,1,1) contre (0,1,0) : le gris pale du pied de page gagnait. On
 * lisait donc du #C7CCC9 sur un fond #FBFAF6, soit un contraste de 1,3:1 la
 * ou il en faut 4,5. Et au survol, `.site-footer a:hover` posait du creme sur
 * du creme : le texte disparaissait completement.
 *
 * Un cran de specificite suffit. Rien ne change dans la palette : la couleur
 * voulue etait la bonne, elle n'arrivait simplement jamais.
 * ------------------------------------------------------------------------- */
.site-footer .ak-connect__cta,
.site-footer .ak-connect__cta:hover,
.site-footer .ak-connect__cta:focus,
.site-footer .ak-connect__cta span {
  color: var(--ak-ink);
}

.site-footer .ak-connect__cta .ak-icon { color: var(--ak-ink); }

/* Meme piege sur les pictogrammes des reseaux, un cran plus bas : la couleur
   du pied de page l'emportait sur celle du composant. */
.site-footer .ak-connect__icon { color: var(--ak-paper); }
.site-footer .ak-connect__icon:hover { color: var(--ak-ink); }

.ak-connect__cta .ak-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Les comptes --------------------------------------------------------- */

.ak-connect__list {
  display: flex;
  align-items: center;
  gap: var(--ak-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 44 px de cote : c'est la cible tactile minimale, et elle ne se negocie pas
   sur un pied de page ou tout le monde arrive au pouce. */
.ak-connect__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ak-r-pill);
  border: 1px solid #3A423E;
  color: #C7CCC9;
  transition: border-color var(--ak-dur-fast) var(--ak-ease), color var(--ak-dur-fast) var(--ak-ease), transform var(--ak-dur) var(--ak-ease);
}

.ak-connect__icon:hover {
  border-color: var(--ak-paper);
  color: var(--ak-paper);
  transform: translateY(-2px);
}

.ak-connect__icon:focus-visible { outline: 2px solid var(--ak-paper); outline-offset: 3px; }

.ak-connect__icon .ak-icon { width: 19px; height: 19px; }

@media (max-width: 782px) {
  .ak-connect__inner { flex-direction: column; align-items: flex-start; }
  .ak-connect__title { max-width: none; }
  .ak-connect__do { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-connect__cta:hover, .ak-connect__icon:hover { transform: none; }
}

/* ===========================================================================
 * 42. Le residuel de la fiche produit
 *
 * L'infobulle des pastilles de taille repetait mot pour mot le libelle deja
 * ecrit dans la pastille : « L/XL » au-dessus de « L/XL ». Elle se lisait
 * comme un second selecteur, et c'est ce qu'on nous a signale.
 *
 * Elle est produite par un ::before alimente par data-wvstooltip, active par
 * la classe wvs-tooltip posee sur le body. On la neutralise plutot que de
 * chercher le reglage de l'extension : le reglage se perd a la prochaine
 * mise a jour, une regle de style non.
 * ========================================================================= */

body.wvs-tooltip .variable-item::before,
body.wvs-tooltip .variable-item::after {
  content: none !important;
  display: none !important;
}

/* Le lien « Effacer » ne ressemblait a rien : un texte nu avec un picto de
   rechargement, pose sous les pastilles. Il reste utile, il devient discret. */
.woocommerce div.product .variations .reset_variations {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--ak-s2);
  font-size: 12.5px;
  color: var(--ak-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ak-line);
}

.woocommerce div.product .variations .reset_variations:hover {
  color: var(--ak-ink);
  text-decoration-color: var(--ak-ink);
}

/* Le libelle de l'attribut occupait soixante pixels pour un texte de
   vingt-quatre. L'ecart venait du gabarit en tableau de WooCommerce. */
.woocommerce div.product .variations th.label,
.woocommerce div.product .variations .label {
  padding-bottom: var(--ak-s2);
  vertical-align: top;
}

.woocommerce div.product .variations th.label label,
.woocommerce div.product .variations .label label {
  margin: 0;
  font-size: var(--ak-fs-label);
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  color: var(--ak-ink-mute);
}

/* ===========================================================================
 * 43. La galerie, le melange rattrape
 *
 * Le fond blanc des packshots restait visible sur l'aplat de la fiche produit,
 * alors que le mix-blend-mode etait bien applique. La cause a mis du temps a
 * se voir et elle vaut d'etre ecrite.
 *
 * Woostify monte sa galerie sur Flickity. Le rail du carrouset porte un
 * `transform`, ce qui cree un groupe d'isolation : un element melange ne voit
 * plus que ce qui est peint DANS ce groupe. Or la teinte etait posee sur
 * `.product-images`, deux niveaux au-dessus du rail, donc en dehors. L'image
 * se melangeait avec du vide, et un blanc melange a du vide reste blanc.
 *
 * La correction n'est pas de retirer le transform, qui fait fonctionner le
 * carrousel, mais de faire descendre la teinte au contact de l'image, a
 * l'interieur du groupe.
 *
 * C'est la troisieme fois que ce piege se presente sur ce projet, apres les
 * vignettes du bento et le survol des tuiles. Regle a retenir : quand un
 * mix-blend-mode ne fait rien, chercher l'ancetre transforme, pas le melange.
 * ========================================================================= */

.product-images .image-item,
.product-images .woocommerce-product-gallery__image,
.product-images figure,
.product-thumbnail-images .image-item,
.product-thumbnail-images li,
.product-thumbnail-images figure {
  background-color: var(--ak-univers);
}

/* Les vignettes gardent leur arrondi une fois la teinte descendue sur elles. */
.product-thumbnail-images .image-item,
.product-thumbnail-images li {
  border-radius: var(--ak-r-field);
  overflow: hidden;
}

/* ===========================================================================
 * 44. Les pastilles de taille
 *
 * L'etat selectionne passait au noir, et le libelle ecrit dedans devenait
 * illisible. Il prend la teinte du rayon : la selection se voit, le texte
 * reste a l'encre, et la couleur dit de quel rayon on parle, comme partout
 * ailleurs sur le site.
 *
 * Les !important sont assumes ici. L'extension pose ses couleurs dans sa
 * propre feuille, chargee apres la notre et avec une specificite qu'on ne peut
 * pas depasser sans ecrire des selecteurs illisibles.
 * ========================================================================= */

.woocommerce div.product .variable-items-wrapper .variable-item.button-variable-item {
  background-color: var(--ak-paper) !important;
  border: 1px solid var(--ak-line) !important;
  border-radius: var(--ak-r-pill) !important;
  box-shadow: none !important;
  color: var(--ak-ink) !important;
  min-height: 38px;
  padding: 0 var(--ak-s4);
  transition: border-color var(--ak-dur-fast) var(--ak-ease), background-color var(--ak-dur-fast) var(--ak-ease);
}

.woocommerce div.product .variable-items-wrapper .variable-item.button-variable-item:hover {
  border-color: var(--ak-ink-mute) !important;
}

.woocommerce div.product .variable-items-wrapper .variable-item.button-variable-item.selected,
.woocommerce div.product .variable-items-wrapper .variable-item.button-variable-item[aria-checked="true"] {
  background-color: var(--ak-univers) !important;
  border-color: var(--ak-ink) !important;
  color: var(--ak-ink) !important;
}

.woocommerce div.product .variable-items-wrapper .variable-item .variable-item-contents {
  color: var(--ak-ink) !important;
  font-size: var(--ak-fs-small);
  font-weight: 500;
}

/* Une taille en rupture se voit, sans etre cliquable pour rien. */
.woocommerce div.product .variable-items-wrapper .variable-item.disabled,
.woocommerce div.product .variable-items-wrapper .variable-item.out-of-stock {
  opacity: .4;
  text-decoration: line-through;
}

/* ===========================================================================
 * 45. Les vignettes de la fiche produit
 *
 * Trois defauts d'un coup, tous mesures : des cadres de 77x77, 77x112 et
 * 77x87 donc de hauteurs differentes, des vignettes desalignees, et deux
 * masses blanches inexpliquees.
 *
 * Les masses blanches etaient les fleches du carrousel de vignettes :
 * `button.thumb-btn`, 56x32, en border-radius 50 pour cent, donc deux
 * ellipses blanches posees au-dessus et en dessous de la rangee. Sur trois
 * vignettes elles ne servent a rien.
 *
 * On sort les vignettes du carrousel plutot que de l'habiller : une rangee qui
 * revient a la ligne fait le travail sans fleches, et elle tient quel que soit
 * le nombre de photos. Les !important sont necessaires parce que Flickity pose
 * ses tailles et ses positions en style en ligne.
 * ========================================================================= */

.product-thumbnail-images .thumb-btn { display: none !important; }

.product-thumbnail-images-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ak-s2);
  height: auto !important;
  overflow: visible !important;
}

.product-thumbnail-images .thumbnail-item {
  position: static !important;
  left: auto !important;
  top: auto !important;
  /* Verrouille par min et max : Woostify comprimait la vignette a 80 px
     malgre le width, et un min-width ne se contourne pas. */
  flex: 0 0 auto;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ak-r-field);
  overflow: hidden;
  background-color: var(--ak-univers);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color var(--ak-dur-fast) var(--ak-ease);
}

/* La teinte est posee sur le cadre, au contact de l'image : meme raison que
   pour la galerie principale, section 43. */
.product-thumbnail-images .thumbnail-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  mix-blend-mode: multiply;
  display: block;
}

.product-thumbnail-images .thumbnail-item:hover { border-color: var(--ak-ink-mute); }

/* La vignette active se voit a son contour, pas a un fond different : le fond
   porte deja la teinte du rayon. */
.product-thumbnail-images .thumbnail-item.is-nav-selected {
  border-color: var(--ak-ink);
}

/* ===========================================================================
 * 46. La recherche
 *
 * Elle arrivait telle que Woostify la livre : une carte blanche a coins de
 * 4 px, un champ gris rempli, un libelle en capitales grises. Rien de faux,
 * rien qui appartienne a la marque non plus.
 *
 * Le luxe ne se joue pas ici sur un effet mais sur trois choses : de l'espace,
 * un caractere qui se voit, et un seul filet au lieu d'un fond. Le champ perd
 * sa boite grise et se pose sur le creme, avec un trait qui s'epaissit quand
 * on ecrit dedans.
 * ========================================================================= */

.dialog-search-content {
  background-color: var(--ak-paper) !important;
  border-radius: var(--ak-r-block) !important;
  box-shadow: var(--ak-shadow-lift) !important;
  padding: var(--ak-s6) var(--ak-s7) var(--ak-s7) !important;
  max-width: 620px;
  width: min(620px, calc(100vw - 2 * var(--ak-gutter)));
}

.dialog-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ak-s4);
  padding: 0 0 var(--ak-s5) !important;
  border: 0 !important;
  font-family: var(--ak-text);
  font-size: var(--ak-fs-label) !important;
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  color: var(--ak-ink-mute) !important;
}

.dialog-search-main { padding: 0 !important; }

.dialog-search-content .woocommerce-product-search {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ak-line);
  transition: border-color var(--ak-dur) var(--ak-ease);
}

.dialog-search-content .woocommerce-product-search:focus-within {
  border-bottom-color: var(--ak-ink);
}

.dialog-search-content input.search-field {
  flex: 1;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--ak-s3) var(--ak-s5) var(--ak-s4) 0 !important;
  height: auto !important;
  font-family: var(--ak-display) !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 500;
  letter-spacing: var(--ak-ls-display);
  color: var(--ak-ink) !important;
}

.dialog-search-content input.search-field::placeholder {
  color: var(--ak-ink-mute);
  font-weight: 400;
}

.dialog-search-content input.search-field:focus { outline: none !important; }

/* Le bouton reste un signe, pas un bloc : c'est le filet qui porte le champ. */
.dialog-search-content .woocommerce-product-search button,
.dialog-search-content .search-form-icon {
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 var(--ak-s2) var(--ak-s3);
  color: var(--ak-ink) !important;
  flex-shrink: 0;
  cursor: pointer;
}

.dialog-search-content .woocommerce-product-search button svg,
.dialog-search-content .search-form-icon svg { width: 22px; height: 22px; }

.dialog-close-button {
  color: var(--ak-ink-soft) !important;
  opacity: 1 !important;
  transition: color var(--ak-dur-fast) var(--ak-ease);
}

.dialog-close-button:hover { color: var(--ak-ink) !important; }

/* ===========================================================================
 * 47. La taille du menu, en dernier mot
 *
 * La regle vit ici et pas dans la section 15, pour une raison de cascade : la
 * taille de base du menu est declaree plus haut avec la meme specificite.
 * Declaree avant, la version fluide perdait et le menu restait a 13,5 px sur
 * un ecran de 1920. Un cran de specificite en plus, et la derniere position,
 * reglent la question sans !important.
 * ========================================================================= */

/* Woostify pose `margin: 0 20px` sur chaque lien de la barre. Mon `gap` de
 * flex s'ajoutait par-dessus : chaque entree portait 40 px de marge plus 19 px
 * d'ecart, soit 395 px d'espacement pour sept entrees sur une barre a qui il
 * en manquait 25. A 1280 px, la liste debordait sa boite de 34 px a gauche et
 * la premiere entree venait se poser sur le logo.
 *
 * J'avais deja mis `margin-right: 0`, mais sur le `li`. La marge est sur le
 * `a`. Une regle qui vise le mauvais element ne fait rien et se lit comme si
 * elle faisait quelque chose : c'est pire qu'une regle absente.
 *
 * Le prefixe `.site-navigation` est la pour la cascade : la regle de Woostify
 * gagne sinon, comme elle gagne deja sur le `padding` de la meme declaration.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .site-navigation .main-navigation .primary-navigation:not(.primary-mobile-navigation) > li > a {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Sous 1160 px la place manque vraiment : le corps descend a 12,5 px au plus
   serre et rejoint 14,5 px pile a la limite, pour que le passage d'une plage
   a l'autre ne se voie pas. */
@media (min-width: 992px) and (max-width: 1159px) {
  .site-navigation .main-navigation .primary-navigation > li > a {
    font-size: clamp(12.5px, calc((100vw - 992px) * 0.012 + 12.5px), 14.5px);
  }
}

/* Les 280 px recuperes rendent la police lisible : c'etait la demande de
   depart, une barre qui utilise la place dont elle dispose. */
@media (min-width: 1160px) {
  .site-navigation .main-navigation .primary-navigation > li > a {
    font-size: clamp(14.5px, 1.15vw, 16.5px);
  }
}

/* ===========================================================================
 * 48. Mes envies
 *
 * La page etait injoignable : le reglage du plugin designait une page
 * supprimee, et la page de remplacement portait un shortcode qui n'existe pas.
 * Repare en base, c'est ecrit dans la procedure de mise en ligne.
 *
 * Restait le tableau, livre tel quel par le plugin : filets gris, en-tetes
 * gras, boutons empiles. Il traverse le parcours d'achat, donc il suit le
 * systeme comme le reste.
 * ========================================================================= */

/* Le titre, une seule fois. Le gabarit de page ecrit deja « Mes envies » en
   h1, le shortcode le repete en h2 juste en dessous. */
.tinv-wishlist .tinv-header { display: none; }

/* La barre d'actions groupees, retiree.
 *
 * Trois boutons y vivaient : « Appliquer Action », « Add Selected to Cart » et
 * « Add All to Cart ». Teste le 10 septembre : un clic sur « Add All to Cart »
 * ne fait rien du tout. Panier a zero, aucun message, aucune erreur.
 *
 * Ce n'est pas un bug du plugin et ce n'est pas reparable ici : tous les
 * articles du catalogue sont des produits a variations, et on ne met pas au
 * panier sans avoir choisi une taille. Un ajout groupe n'a donc pas de sens
 * sur ce catalogue.
 *
 * La ligne de l'article porte deja « Choisir la taille », qui mene a la fiche
 * ou le choix se fait. C'est le seul chemin qui marche, autant qu'il soit le
 * seul visible. Rien n'est desactive dans le plugin : le jour ou la boutique
 * vend des produits simples, une ligne a retirer et la barre revient. */
.tinv-wishlist .tinvwl-table-manage-list tfoot { display: none; }

/* La colonne des cases a cocher ne sert plus a rien sans actions groupees. */
.tinv-wishlist .tinvwl-table-manage-list th.product-cb,
.tinv-wishlist .tinvwl-table-manage-list td.product-cb { display: none; }

/* Le tableau ------------------------------------------------------------- */

.tinv-wishlist .tinvwl-table-manage-list {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  background: transparent;
  margin: 0;
}

.tinv-wishlist .tinvwl-table-manage-list thead th {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ak-line);
  padding: 0 var(--ak-s4) var(--ak-s3);
  text-align: left;
  font-family: var(--ak-text);
  font-size: var(--ak-fs-label);
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  color: var(--ak-ink-mute);
  white-space: nowrap;
}

.tinv-wishlist .tinvwl-table-manage-list tbody td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ak-line);
  padding: var(--ak-s4);
  vertical-align: middle;
}

/* La vignette. Meme cadre pour toutes : trois pour quatre, coins adoucis.
 *
 * La teinte est posee sur le lien, qui est le conteneur direct de l'image, et
 * pas plus haut. Troisieme fois dans ce projet que le piege se presente :
 * `mix-blend-mode` ne voit que ce qui est peint dans son propre groupe
 * d'isolation, et un `transform`, une `opacity` ou un `z-index` sur un ancetre
 * en cree un. Le fond doit etre sur le parent immediat, point. */
.tinv-wishlist .tinvwl-table-manage-list td.product-thumbnail {
  width: 84px;
  padding-right: 0;
}

.tinv-wishlist td.product-thumbnail > a {
  display: block;
  width: 84px;
  height: 112px;
  border-radius: var(--ak-r-card);
  background-color: var(--ak-packshot);
  overflow: hidden;
}

.tinv-wishlist td.product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  border-radius: 0;
}

/* Le nom, le prix, la date, l'etat ------------------------------------- */

.tinv-wishlist td.product-name a {
  font-family: var(--ak-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ak-ink);
  text-decoration: none;
}

.tinv-wishlist td.product-name a:hover { text-decoration: underline; }

.tinv-wishlist td.product-price,
.tinv-wishlist td.product-price .amount {
  font-family: var(--ak-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--ak-ink);
  white-space: nowrap;
}

.tinv-wishlist td.product-date,
.tinv-wishlist td.product-date time {
  font-size: 13px;
  color: var(--ak-ink-soft);
  white-space: nowrap;
}

.tinv-wishlist td.product-stock p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-ink-soft);
}

.tinv-wishlist td.product-stock p.in-stock { color: var(--ak-ink-soft); }
.tinv-wishlist td.product-stock p.out-of-stock { color: var(--ak-ink-mute); }

/* Retirer un article : un signe discret, qui se voit quand on le survole. */
.tinv-wishlist td.product-remove { width: 32px; padding-right: 0; }

.tinv-wishlist td.product-remove button {
  background: transparent;
  border: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--ak-r-pill);
  color: var(--ak-ink-mute);
  cursor: pointer;
  transition: color var(--ak-dur-fast) var(--ak-ease),
              background-color var(--ak-dur-fast) var(--ak-ease);
}

.tinv-wishlist td.product-remove button:hover {
  color: var(--ak-ink);
  background-color: var(--ak-ground);
}

/* L'action de la ligne : le seul chemin qui marche, donc le seul en avant. */
.tinv-wishlist td.product-action { text-align: right; white-space: nowrap; }

/* Le bouton porte le meme pictogramme que ceux de la grille, mais le plugin
   le laisse en `display: inline`, donc l'alignement et l'ecart de 5 px que
   Woostify pose sur la grille ne s'appliquent pas ici : le chariot venait
   toucher le T de « taille ». */
.tinv-wishlist td.product-action a.button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  padding: 12px var(--ak-s5);
}

.tinv-wishlist td.product-action a.button .woostify-svg-icon {
  margin: 0;
  flex-shrink: 0;
}

/* Le partage ------------------------------------------------------------ */

/* Six plateformes, c'est un menu, pas une invitation. On garde WhatsApp, qui
   est le canal de la boutique, et le presse-papiers, qui marche partout et
   sans compte. Les quatre autres partent : Twitter n'est pas une audience
   d'Akanzu, et un partage par e-mail depuis un site se termine presque
   toujours dans un client mal configure. */
.tinv-wishlist .social-buttons li:has(.social-facebook),
.tinv-wishlist .social-buttons li:has(.social-twitter),
.tinv-wishlist .social-buttons li:has(.social-pinterest),
.tinv-wishlist .social-buttons li:has(.social-email) { display: none; }

.tinv-wishlist .social-buttons {
  display: flex;
  align-items: center;
  gap: var(--ak-s4);
  margin-top: var(--ak-s6);
  padding-top: var(--ak-s5);
  border-top: 1px solid var(--ak-line);
}

.tinv-wishlist .social-buttons > span {
  font-family: var(--ak-text);
  font-size: var(--ak-fs-label);
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  color: var(--ak-ink-mute);
}

.tinv-wishlist .social-buttons ul {
  display: flex;
  align-items: center;
  gap: var(--ak-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tinv-wishlist .social-buttons a.social {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-pill);
  background: transparent;
  color: var(--ak-ink-soft);
  transition: border-color var(--ak-dur-fast) var(--ak-ease),
              color var(--ak-dur-fast) var(--ak-ease);
}

.tinv-wishlist .social-buttons a.social:hover {
  border-color: var(--ak-ink);
  color: var(--ak-ink);
}

/* Le plugin laisse une coquille vide en fin de page. */
.tinv-wishlist .tinv-lists-nav:empty { display: none; }

/* En dessous de la tablette, le plugin bascule sur son propre affichage
   empile. On lui rend juste ses filets et ses espacements. */
@media (max-width: 767px) {
  .tinv-wishlist .tinvwl-table-manage-list tbody td {
    padding: var(--ak-s3) var(--ak-s3);
  }

  .tinv-wishlist td.product-thumbnail,
  .tinv-wishlist td.product-thumbnail > a { width: 64px; }
  .tinv-wishlist td.product-thumbnail > a { height: 85px; }

  .tinv-wishlist td.product-action { text-align: left; }
}

/* ===========================================================================
 * 49. Les boites grises restees par defaut
 *
 * Un meme defaut, six endroits. WooCommerce et Woostify posent des bordures
 * gris clair a coins de 2 ou 5 px sur leurs conteneurs de formulaire. Nos
 * regles habillaient le champ a l'interieur et laissaient le conteneur nu :
 * on obtenait une pastille arrondie posee dans un rectangle gris.
 *
 * Ils sont listes ici ensemble plutot que chacun dans sa section, parce que
 * c'est un seul motif et qu'on le reconnaitra plus vite la prochaine fois :
 * quand un controle a l'air presque juste, regarder son parent.
 *
 * Reperes le 10 septembre 2026 en sondant le rendu : toute bordure dont la
 * couleur n'appartient pas au systeme est un oubli. Les couleurs trouvees
 * etaient #ddd, #ccc, #e8e8e8 et #555.
 * ========================================================================= */

/* --- Le tri : le formulaire autour de la pastille ---------------------- */

/* C'est lui, l'encadre qu'on voyait. Un rectangle de 196 x 37 a coins de 2 px
   autour d'une pastille de 194 x 35. */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering,
form.woocommerce-ordering {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* La liste ouverte, dans la limite de ce que les navigateurs autorisent.
 *
 * A dire clairement : un menu deroulant natif n'est pas entierement
 * stylisable. Sous Windows, Chrome et Firefox dessinent la liste eux-memes et
 * respectent la couleur de fond et de texte des options, donc les deux regles
 * ci-dessous s'appliquent. Sous macOS, la liste est dessinee par le systeme et
 * les ignore : c'est le surlignage bleu du systeme qu'on voit alors.
 *
 * La seule facon d'aller plus loin serait de remplacer le `select` par un
 * composant maison en JavaScript. Ca se fait, mais ca remplace un controle
 * WooCommerce qui fonctionne, au clavier comme au lecteur d'ecran, par du code
 * a maintenir. A decider a froid, pas a quelques jours de la mise en ligne. */
.woocommerce-ordering select option,
select.orderby option {
  background-color: var(--ak-paper);
  color: var(--ak-ink);
  font-family: var(--ak-text);
  font-weight: 500;
  padding: var(--ak-s2) var(--ak-s3);
}

.woocommerce-ordering select option:checked,
select.orderby option:checked {
  background-color: var(--ak-ground);
  font-weight: 600;
}

/* --- La galerie de la fiche produit ----------------------------------- */

/* La vignette selectionnee. Woostify pose sa bordure sur l'image et non sur le
   cadre : un carre gris #555 a coins droits a l'interieur d'un cadre arrondi. */
.product-thumbnail-images .thumbnail-item img {
  border: 0 !important;
  border-radius: 0 !important;
}

/* Et il faut rendre la marque de selection, que je venais de supprimer avec
   elle.
 *
 * La regle de la section 45 pose `border-color: var(--ak-ink)` sur le cadre,
 * mais elle ne gagne pas : mesure faite, la vignette active et les autres
 * rendaient exactement la meme chose, `border-color: rgba(0,0,0,0)`. La
 * bordure grise de l'image etait donc la seule chose qui montrait l'image en
 * cours. En la retirant, on ne savait plus laquelle on regardait.
 *
 * Un anneau plutot qu'une bordure, pour deux raisons. Il ne pousse rien, donc
 * la vignette ne bouge pas d'un pixel quand on change d'image, ce qu'une
 * bordure qui apparait fait toujours. Et deux pixels d'encre se voient, la ou
 * un seul se devine sur un cadre deja teinte. */
.product-thumbnail-images .thumbnail-item.is-nav-selected,
.product-thumbnail-images .thumbnail-item.is-selected {
  box-shadow: 0 0 0 2px var(--ak-ink) !important;
}

/* Le bouton de la loupe, en bas de l'image principale. */
.photoswipe-toggle-button,
.woocommerce div.product .photoswipe-toggle-button {
  border: 1px solid var(--ak-line) !important;
  border-radius: var(--ak-r-pill) !important;
  background-color: var(--ak-paper) !important;
  color: var(--ak-ink) !important;
  box-shadow: none !important;
  transition: border-color var(--ak-dur-fast) var(--ak-ease);
}

.photoswipe-toggle-button:hover { border-color: var(--ak-ink) !important; }

.photoswipe-toggle-button svg,
.photoswipe-toggle-button path { fill: currentColor; }

/* --- « Effacer », sous les pastilles de taille ------------------------ */

/* La section 42 en fait un lien souligne. Il lui restait la bordure et les
   coins de 5 px de WooCommerce par-dessous, donc un lien souligne dans une
   boite. */
.woocommerce div.product .variations .reset_variations {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* --- Le tableau des caracteristiques ---------------------------------- */

/* Une grille complete en #ddd, comme une feuille de calcul. On garde un seul
   filet par ligne, a la couleur du systeme, et le libelle prend le registre
   des surtitres. */
.woocommerce div.product table.woocommerce-product-attributes,
table.shop_attributes {
  border: 0;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}

.woocommerce div.product table.woocommerce-product-attributes th,
.woocommerce div.product table.woocommerce-product-attributes td,
table.shop_attributes th,
table.shop_attributes td {
  border: 0;
  border-bottom: 1px solid var(--ak-line);
  background: transparent !important;
  padding: var(--ak-s3) 0;
  vertical-align: top;
  font-style: normal;
}

.woocommerce div.product table.woocommerce-product-attributes th,
table.shop_attributes th {
  width: 34%;
  padding-right: var(--ak-s4);
  font-family: var(--ak-text);
  font-size: var(--ak-fs-label);
  font-weight: 600;
  letter-spacing: var(--ak-ls-label);
  text-transform: uppercase;
  color: var(--ak-ink-mute);
  white-space: nowrap;
}

.woocommerce div.product table.woocommerce-product-attributes td p,
table.shop_attributes td p { margin: 0; }

/* La derniere ligne n'a rien a souligner. */
.woocommerce div.product table.woocommerce-product-attributes tr:last-child th,
.woocommerce div.product table.woocommerce-product-attributes tr:last-child td,
table.shop_attributes tr:last-child th,
table.shop_attributes tr:last-child td { border-bottom: 0; }