/* ======================================================================
   BLEDX — SYSTEME
   Charge AVANT bledx.css. C'est le socle : une police, une palette,
   une echelle, un rythme. Tout le reste s'y appuie.

   La direction, 2026-09-14
   ------------------------
   Blanc, large, calme. La photo du produit fait le travail ; le reste se
   tait. Des filets d'un pixel plutot que des cadres, du noir plutot que
   du rouge sur les boutons, et beaucoup de vide — c'est le vide qui fait
   qu'une boutique a l'air soignee, pas les effets.

   Le rouge de marque reste, mais rare : la marque, une remise reelle.
   Utilise partout, il crie ; garde pour deux endroits, il se voit.

   Ce que ca remplace : une direction sombre « encre sur coton » qui
   rendait le catalogue lourd et les photos difficiles a lire.

   Pourquoi les huit variables de Blocksy sont redefinies ici : le theme
   parent fait TOUT deriver d'elles — liens, boutons, champs, bordures,
   fil d'Ariane, onglets, panier, tunnel. Les poser une fois repeint le
   site entier, tunnel de commande compris.
   ====================================================================== */

/* ---------------------------------------------------------------- 1. police
   Archivo variable : un seul fichier pour tous les roles. Les axes de
   graisse et de chasse remplacent quatre fichiers — sur une 4G
   marocaine, chaque aller-retour compte. Le sous-ensemble « latin »
   couvre U+0000-00FF : tous les accents du francais y sont. */
@font-face {
  font-family: 'Archivo';
  /* v2 (2026-10-05) : chasse figée à 100 %, graisses 400 à 900 — les
     seules utilisées. 90 Ko -> 34 Ko. */
  src: url('../fonts/archivo-latin-v2.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -------------------------------------------------------- 2. palette
     Six valeurs. Chaque ratio est calcule sur le blanc et verifie par
     qa/audit.py. */
  --bx-blanc:    #ffffff;   /* le fond */
  --bx-voile:    #f7f7f5;   /* lit d'image, section alternee */
  --bx-encre:    #131313;   /* titres, boutons pleins — 18,9:1 */
  --bx-gris:     #5a5a5a;   /* texte courant — 6,9:1 */
  --bx-sourd:    #6e6e6e;   /* meta, libelles — 5,0:1 */
  --bx-sang:     #d81f26;   /* la marque, et une remise reelle — 5,1:1 */
  --bx-trait:    #e6e6e3;   /* le filet */
  --bx-trait-fort: #c9c9c4;

  /* Conserves pour les composants hérités qui les utilisent encore.
     Ils pointent vers la nouvelle palette : rien a reecrire ailleurs. */
  --bx-papier:   var(--bx-encre);   /* role « premier plan » */
  --bx-panneau:  var(--bx-voile);

  /* ------------------------------------------------- 3. pont vers Blocksy */
  --theme-palette-color-1: var(--bx-encre);   /* liens, accents */
  --theme-palette-color-2: var(--bx-sang);    /* survol */
  --theme-palette-color-3: var(--bx-gris);    /* texte courant */
  --theme-palette-color-4: var(--bx-encre);   /* titres */
  --theme-palette-color-5: var(--bx-trait);   /* bordures */
  --theme-palette-color-6: var(--bx-voile);   /* surfaces */
  --theme-palette-color-7: #fbfbfa;
  --theme-palette-color-8: var(--bx-blanc);

  --theme-font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --theme-font-size: 16px;
  --theme-line-height: 1.65;
  --theme-text-color: var(--bx-gris);
  --theme-normal-container-max-width: 1400px;
  --theme-narrow-container-max-width: 760px;
  --theme-content-vertical-spacing: 0px;   /* les sections gerent leur rythme */

  /* Le bouton : noir plein, blanc dessus. 52 px de haut — au-dessus des
     48 de Material, parce qu'un bouton d'achat merite d'etre franc. */
  --theme-button-min-height: 52px;
  --theme-button-font-size: 15px;
  --theme-button-font-weight: 600;
  --theme-button-padding: 16px 30px;
  --theme-button-transform: none;
  --theme-button-background-initial-color: var(--bx-encre);
  --theme-button-background-hover-color: #2f2f2f;
  --theme-button-text-initial-color: #ffffff;
  --theme-button-text-hover-color: #ffffff;
  --theme-button-shadow: none;
  --theme-button-border: none;

  /* ------------------------------------------------------ 4. l'echelle
     Plancher a 12 px. Les titres restent en chasse normale et en graisse
     moyenne : c'est l'espace autour qui leur donne du poids, pas le gras. */
  --bx-t-micro:   12px;
  --bx-t-libelle: 13px;
  --bx-t-corps:   16px;
  --bx-t-grand:   clamp(17px, .6vw + 15px, 20px);
  --bx-t-h3:      clamp(19px, 1vw + 15px, 24px);
  --bx-t-h2:      clamp(26px, 2.2vw + 16px, 44px);
  --bx-t-h1:      clamp(32px, 3.4vw + 18px, 64px);

  /* ------------------------------------------------------- 5. le rythme
     C'est ici que se joue l'impression de proprete : une boutique parait
     soignee parce qu'elle respire, pas parce qu'elle est decoree. */
  --bx-section:  clamp(56px, 7vw, 104px);   /* respiration verticale */
  --bx-marge:    clamp(20px, 4vw, 48px);    /* gouttiere laterale */
  --bx-gouttiere: clamp(12px, 1.6vw, 28px); /* entre deux cartes */
  --bx-max: 1400px;
  --bx-rayon: 4px;
  --bx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------- 6. socle */
html { -webkit-text-size-adjust: 100%; }

body,
body.bledx-store {
  background-color: var(--bx-blanc);
  color: var(--bx-gris);
  font-family: var(--theme-font-family);
  font-size: var(--bx-t-corps);
  line-height: 1.65;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

/* Les titres : chasse normale, graisse 600. Le poids vient du contraste
   avec le gris du texte et de l'espace autour, pas de la graisse. */
h1, h2, h3, h4, h5, h6,
.bledx-display {
  font-family: var(--theme-font-family);
  color: var(--bx-encre);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: var(--bx-t-h1); letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: var(--bx-t-h2); letter-spacing: -.025em; line-height: 1.08; }
h3 { font-size: var(--bx-t-h3); }

p { line-height: 1.65; }

a { color: var(--bx-encre); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--bx-sang); }

/* Un libelle : petites capitales, interlettrage mesure. Pas l'affiche —
   l'etiquette. */
.bx-libelle,
.bledx-kicker,
.bledx-eyebrow {
  font-size: var(--bx-t-libelle) !important;
  font-weight: 500;
  font-variation-settings: 'wdth' 100;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bx-sourd);
  line-height: 1.4;
}

/* --------------------------------------------- 7. plancher typographique
   Aucun texte sous 12 px. On ne peut pas poser un plancher en cascade —
   un selecteur universel casserait tout l'heritage. On vise donc
   nommement les composants mesures sous le plancher. */
.bledx-world-top,
.bledx-world-pill,
.bledx-world-bottom p,
.bledx-editorial-main p,
.bledx-editorial-side p,
.bledx-featured-meta span,
.bledx-proof span,
.bledx-marquee span,
.bledx-ticker span,
.bledx-strip span,
.bledx-note,
.bledx-legal,
small {
  font-size: var(--bx-t-micro) !important;
  line-height: 1.5;
}

/* ---------------------------------------------------------- 8. primitives */

/* Le bouton. Noir plein, coins a peine adoucis, aucune ombre. */
.bledx-store .button,
.bledx-store button.button,
.bledx-store .wp-element-button,
.bx-action,
.bledx-store .single_add_to_cart_button,
.bledx-store .checkout-button,
.bledx-store .wc-block-components-button:not(.is-link) {
  min-height: 52px;
  padding: 16px 30px;
  border-radius: var(--bx-rayon);
  font-size: 15px;
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  letter-spacing: .01em;
  text-transform: none;
  background-color: var(--bx-encre);
  color: #fff;
  border: 0;
  box-shadow: none;
  transition: background-color .18s var(--bx-ease);
  touch-action: manipulation;
}
.bledx-store .button:hover,
.bledx-store .single_add_to_cart_button:hover,
.bledx-store .checkout-button:hover,
.bledx-store .wc-block-components-button:not(.is-link):hover {
  background-color: #2f2f2f;
  color: #fff;
}

/* L'action secondaire : un contour, rien d'autre. */
.bx-action-2,
.bledx-button-secondary {
  background: transparent;
  color: var(--bx-encre);
  border: 1px solid var(--bx-trait-fort);
}
.bx-action-2:hover,
.bledx-button-secondary:hover { background: var(--bx-encre); color: #fff; border-color: var(--bx-encre); }

.bx-filet { border-top: 1px solid var(--bx-trait); }

/* --------------------------------------------------- 9. cibles au pouce
   24 x 24 px au minimum (WCAG 2.2), 44 pour une action. C'est toujours la
   ZONE qui grandit, jamais le dessin. */
.bledx-store .woocommerce-loop-product__link { display: block; }
.bledx-store .woocommerce-loop-product__title,
.bledx-store .product .ct-woo-card-title a,
.bledx-store .ct-woo-card-extra a,
.bledx-store .posted_in a,
.bledx-store .woocommerce-breadcrumb a,
.bledx-store .ct-breadcrumbs a,
.bledx-store [class*="ct-term-"],
.bledx-store .meta-categories a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}
.bledx-store .ct-header-trigger,
.bledx-store .ct-header-search,
.bledx-store .ct-cart-item {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-logo-container a,
.ct-header-brand a,
.bledx-store .site-title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* -------------------------------------------------------- 10. formulaires
   Un champ sous 16 px declenche le zoom automatique de Safari iOS : le
   visiteur perd sa page au moment ou il tape son telephone. */
.bledx-store input[type="text"],
.bledx-store input[type="email"],
.bledx-store input[type="tel"],
.bledx-store input[type="number"],
.bledx-store input[type="search"],
.bledx-store select,
.bledx-store textarea,
.bledx-store .wc-block-components-text-input input {
  font-size: 16px;
  min-height: 52px;
  background: var(--bx-blanc);
  color: var(--bx-encre);
  border: 1px solid var(--bx-trait-fort);
  border-radius: var(--bx-rayon);
}
.bledx-store input:focus,
.bledx-store select:focus,
.bledx-store textarea:focus { border-color: var(--bx-encre); }
.bledx-store input::placeholder,
.bledx-store textarea::placeholder { color: var(--bx-sourd); opacity: 1; }
.bledx-store label { color: var(--bx-gris); }

/* ------------------------------------------------------ 11. accessibilite */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bx-encre);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  z-index: 99999;
  padding: 12px 18px;
  background: var(--bx-encre);
  color: #fff;
  font-weight: 600;
}

::selection { background: var(--bx-encre); color: #fff; }

@media (hover: none) {
  .bledx-store .button:active,
  .bx-action:active { transform: scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------- 12. barre d'accueil iOS */
.bledx-sticky,
.bx-sticky,
#woo-cart-panel .ct-panel-actions {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}