/* ==========================================================================
   Kite Attitude — theme-custom.css
   Mapping des tokens (tokens.css) vers les sélecteurs réels du thème enfant.
   Implémente les composants Figma : _components/header, _components/footer,
   _components/product-card (default + hover), frame « / » (accueil) et ses
   états (#hero-slide-2 via slider, #menu-lignes-ouvert via :hover CSS).
   Chargé APRÈS le custom.css du thème parent (priorité 1200 > 1000).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Socle
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  color: var(--c-text);
  background: var(--c-page-bg);
}
h1, h2, h3, h4, .h1, .h2, .h3 { color: var(--c-heading); }
a { transition: color var(--duration-btn) ease-in-out; }
a:hover { color: var(--c-accent); }
.btn-primary,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  border-radius: var(--radius-base);
}

/* Garde globale : jamais de barre de défilement horizontale — les débordements
   résiduels (flèches de carrousel du parent, slides translatées) sont rognés,
   comme sur la source. clip ≠ hidden : ne crée pas de conteneur de scroll. */
html, body { overflow-x: clip; }

/* Conteneur : géométrie EXACTE de la source (layout/accueil.json) —
   boîte 1630px centrée, padding 15px → contenu 1600px (x 152.5→1752.5 à 1920).
   Identique pour TOUTES les sections (header, produits, vidéo, articles,
   avis, footer) et appliqué aussi au .container Bootstrap du parent. */
.kite-container,
#wrapper .container,
#header .container,
#footer .container {
  width: 100%;
  max-width: 1630px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* --------------------------------------------------------------------------
   2. Header — _components/header (82:60)
   Topbar blanche 65px (logo | langue, téléphone, compte, panier)
   + navbar bleue 62px centrée (logo Foil, menu, loupe)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #header { background: var(--c-surface); box-shadow: none; margin: 0; }
  #header .header-nav { display: none; }
  #header .header-top { padding: 0; background: var(--c-surface); }

  .kite-topbar { background: var(--c-surface); }
  /* Conteneur du header : 1630px mesurés sur la source (layout/accueil.json :
     container x=137.5 w=1630, contenu 152.5→1752.5 à 1920) — le .container
     Bootstrap du parent (1140px) écrasait toute la géométrie du menu */
  .kite-topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66.5px; /* source : 66.5px */
  }
  .kite-logo { padding: 0; width: auto; }
  .kite-logo h1 { margin: 0; line-height: 0; }
  .kite-logo img { width: 150px; height: 45px; object-fit: contain; } /* source : 150×45 à y=11 */

  .kite-topbar-right { display: flex; align-items: center; gap: 24px; }
  /* ordre Figma : langue (1), téléphone (2), compte (3), panier (4) */
  .kite-topbar-right #_desktop_language_selector { order: 1; display: flex; align-items: center; }
  .kite-topbar-right .kite-phone { order: 2; }
  .kite-topbar-right #_desktop_currency_selector { display: none; } /* absent de la maquette */
  .kite-topbar-right #_desktop_user_info { order: 3; margin: 0; }
  /* source : compte 47×50 (x=1655.5) et panier 50px (x=1702.5) ADJACENTS,
     panier calé contre le bord du conteneur (1752.5) */
  .kite-topbar-right .blockcart, .kite-topbar-right #_desktop_cart { order: 4; margin-left: -24px; width: 50px; }
  /* Le compte connecté contient les liens déconnexion et compte : conserver
     47px comme minimum sans forcer leur empilement. */
  .kite-topbar-right #_desktop_user_info {
    min-width: 47px;
    display: flex;
    justify-content: center;
  }

  /* Langue : drapeau + « Français ⌄ » */
  .kite-topbar-right #_desktop_language_selector::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 11px;
    margin-right: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11'%3E%3Crect width='5.33' height='11' fill='%23002494'/%3E%3Crect x='5.33' width='5.33' height='11' fill='%23fff'/%3E%3Crect x='10.66' width='5.34' height='11' fill='%23ed2938'/%3E%3C/svg%3E") no-repeat;
  }
  .kite-topbar-right #_desktop_language_selector,
  .kite-topbar-right #_desktop_language_selector a,
  .kite-topbar-right #_desktop_language_selector button {
    font-size: var(--fs-base);
    color: var(--c-heading);
    letter-spacing: var(--ls-base);
  }

  /* Téléphone (texte du composant Figma) */
  .kite-phone {
    font-size: var(--fs-base);
    color: var(--c-text-muted);
    letter-spacing: var(--ls-base);
  }

  /* Compte : icônes distinctes et alignées quand la session est ouverte. */
  .kite-topbar-right .user-info {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .kite-topbar-right .user-info a {
    font-size: 0;
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    background: url(/img/icon-user.svg) no-repeat center / contain;
  }
  .kite-topbar-right .user-info a.logout {
    background-image: url(/themes/kiteattitude/assets/img/icon-logout.svg);
  }
  .kite-topbar-right .user-info a i,
  .kite-topbar-right .user-info a .material-icons { display: none; }

  /* Panier : icône + pastille bleue */
  .kite-topbar-right .blockcart {
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  .kite-topbar-right .blockcart,
  .kite-topbar-right .blockcart a,
  .kite-topbar-right .blockcart .header { font-size: 0 !important; }
  .kite-topbar-right .blockcart i { display: none; }
  .kite-topbar-right .blockcart .header {
    position: relative;
    display: inline-block;
    min-width: 34px;
    height: 34px;
    background: url(/img/icon-cart.svg) no-repeat left bottom / 30px auto;
  }
  .kite-topbar-right .blockcart .header a { display: inline-block; width: 34px; height: 34px; }
  .kite-topbar-right .blockcart .cart-products-count {
    font-size: var(--fs-xs) !important;
    background: var(--c-accent);
    color: #fff;
    border-radius: 50%;
    font-weight: 500;
    min-width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: -6px;
    right: -8px;
    padding: 1px 4px;
    letter-spacing: 0;
  }

  /* Ceinture de sécurité : aucune interaction du header (champ de recherche,
     dropdowns) ne doit créer de débordement horizontal de page */
  #header { overflow-x: clip; }

  /* ---- Navbar bleue ---- */
  /* Alignement À DROITE comme le site source kite.cdweb.fr (arbitrage client
     06/07 : la capture source fait foi, pas le centrage de la maquette) */
  .kite-navbar { background: var(--c-accent); }
  .kite-navbar-in {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 60.5px; /* source : 60.5px */
    gap: 6px;
  }
  .kite-cross {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px 0 0;
  }
  .kite-cross img { height: 28px; width: auto; display: block; }

  #header .kite-navbar #_desktop_top_menu {
    margin: 0 !important;
    padding: 0;
    background: transparent;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
  }
  /* Le flex ne concerne QUE la barre de niveau 0 : ps_mainmenu réutilise la
     classe .top-menu sur le <ul data-depth="1"> interne au sous-menu, qui
     devenait lui aussi un flex wrap — items alignés en ligne puis repliés,
     d'où les libellés hors du panneau. */
  #_desktop_top_menu > .top-menu[data-depth="0"] { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
  #_desktop_top_menu .top-menu a[data-depth="0"] {
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;                 /* Poppins Medium */
    font-size: var(--fs-base);
    letter-spacing: var(--ls-base);
    padding: 20px 15px;
    transition: background var(--duration-btn) ease-in-out, color var(--duration-btn) ease-in-out;
  }
  #_desktop_top_menu .top-menu a[data-depth="0"]:focus-visible {
    outline: var(--cs-focus-size) solid var(--cs-home-on-accent);
    outline-offset: calc(-1 * var(--cs-focus-size));
  }
  #_desktop_top_menu .top-menu li:has(.sub-menu) > a[data-depth="0"]::after {
    content: "\e5cf";
    font-family: "Material Icons";
    font-size: 15px;
    display: inline-block;
    vertical-align: -3px;
    margin-left: 4px;
    line-height: 1;
    text-transform: none;
  }

  /* État #menu-lignes-ouvert : item survolé = fond blanc arrondi haut,
     texte anthracite ; sous-menu blanc, ombre, barre bleue en bas */
  #_desktop_top_menu .top-menu > li:hover > a[data-depth="0"] {
    background: var(--c-surface);
    color: var(--c-heading);
    border-radius: var(--radius-dropdown) var(--radius-dropdown) 0 0;
  }
  /* Le panneau s'adapte au plus long libellé : le classic pose
     `white-space: nowrap` sur .dropdown-item, donc une largeur figée à 220px
     faisait sortir les intitulés longs (« Barre Instinct Freestyle / Wave »,
     299px) hors du fond blanc, sur la page. Plancher 220px pour garder le
     rendu source, plafond au-delà duquel le libellé passe à la ligne. */
  #_desktop_top_menu .top-menu .sub-menu {
    left: auto;
    top: 100%;
    width: max-content;
    min-width: 220px;
    max-width: min(360px, 90vw);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 0 var(--radius-dropdown) var(--radius-dropdown);
    background: var(--c-surface);
    box-shadow: var(--shadow-dropdown);
    border-bottom: 4px solid var(--c-accent);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--duration-menu) ease-in-out, transform var(--duration-menu) ease-in-out;
  }
  #_desktop_top_menu .top-menu li:hover > .sub-menu { opacity: 1; transform: none; }
  #_desktop_top_menu .top-menu .sub-menu ul { display: block; padding: 8px 0; margin: 0; min-width: 0; }
  /* Le classic flotte les items de niveau 1 (float: left; margin: 0 1.25rem) :
     en colonne ça décale les libellés et vide la hauteur du panneau. */
  #_desktop_top_menu .top-menu .sub-menu li { padding: 0; float: none; margin: 0; }
  #_desktop_top_menu .top-menu .sub-menu a {
    display: block;
    padding: 8px 20px;
    white-space: normal;
    font-size: var(--fs-base);
    color: var(--c-heading);
    letter-spacing: var(--ls-base);
    text-transform: none;
    font-weight: 400;
  }
  #_desktop_top_menu .top-menu .sub-menu a:hover { color: var(--c-accent); }

  /* Recherche — comportement du site source : la loupe ouvre au CLIC un
     panneau blanc 348×60 ancré sous la barre, aligné à droite (mesures
     kite.cdweb.fr : bordure 2px rgba(0,0,0,.07), input 14px #222 pad 16,
     loupe 26px à droite). Markup : override ps_searchbar.tpl du thème,
     bascule .is-open par assets/js/theme-custom.v4.js. */
  #header .kite-navbar #search_widget {
    margin-left: 6px;
    float: none;
    width: 40px;
    height: 60.5px;            /* = hauteur de la barre, rien ne peut déborder */
    min-width: 0;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  .kite-search-trigger {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
  }
  .kite-search-trigger .material-icons { font-size: 25px; color: #fff; }
  .kite-navbar #search_widget form.kite-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 348px;
    height: 60px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border: 2px solid var(--c-border-subtle);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--duration-menu) ease-in-out, transform var(--duration-menu) ease-in-out, visibility var(--duration-menu) ease-in-out;
  }
  #search_widget.is-open form.kite-search-panel { opacity: 1; visibility: visible; transform: none; }
  .kite-navbar #search_widget .kite-search-panel input[type="text"] {
    flex: 1 1 auto;
    height: 56px;
    min-width: 0 !important;       /* parent : min-width 255px */
    width: auto;
    padding: 0 0 0 16px;
    border: 0;
    outline: none !important;      /* parent : outline 3px cyan au focus */
    background: var(--c-surface);
    color: var(--c-heading);
    font-family: var(--font-base);
    font-size: var(--fs-base);
  }
  .kite-navbar #search_widget .kite-search-panel input[type="text"]::placeholder { color: var(--c-text-muted); }
  .kite-search-submit {
    position: static !important;   /* parent : absolute bottom/right */
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto;
    margin: 0 16px 0 8px;
    padding: 0;
    background: none;
    border: 0;
    line-height: 1;
    cursor: pointer;
  }
  .kite-search-submit .material-icons { font-size: 26px; color: var(--c-heading); }
}

/* --------------------------------------------------------------------------
   3. Accueil — frame « / » (86:255)
   Pleine largeur, sections dans l'ordre : hero, produits, session-video,
   articles, à-propos, FAQ, avis.
   -------------------------------------------------------------------------- */
#index #wrapper { padding-top: 0; background: var(--c-page-bg); }
#index #wrapper .breadcrumb { display: none; }
/* Pleine largeur SANS l'astuce calc(50% - 50vw) : 100vw inclut la barre de
   scroll (1920 vs 1905 utiles) → 8px de débordement horizontal permanent et
   7px de décalage des sections. On neutralise plutôt le conteneur Bootstrap
   sur l'accueil : .kite-home = largeur réelle du body, comme la source. */
#index #wrapper > .container { max-width: none; width: 100%; padding: 0; }
.kite-home { margin: 0; }
.kite-home section { overflow: hidden; }

/* Défilement doux vers #produits (bouton « Voir la boutique » du bloc Univers).
   Neutralisé si le visiteur a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#produits { scroll-margin-top: 12px; }

/* ---- 3.1 Univers (kahomeblocks — hook displayKaUniverses) ----
   Portage du bloc `container-fluid slider-container` de la prod
   www.kiteattitude.fr : deux tuiles côte à côte sur toute la largeur, photo de
   fond en `cover` et logo blanc centré. Il prend la place du hero slider.
   La hauteur desktop vient du back-office via --univers-h (style inline posé
   par univers.tpl) ; la valeur ci-dessous n'est qu'un repli. On utilise une
   grille plutôt que les colonnes Bootstrap flottées de la prod : pas de
   clearfix à gérer et les deux tuiles gardent la même hauteur. */
.kite-section-univers {
  --univers-h: 750px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kite-univers-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--univers-h);
  overflow: hidden;
}
/* La photo vit sur son propre calque (et non en background de la tuile) pour
   qu'on puisse la désaturer sans ternir le logo ni le libellé posés dessus. */
.kite-univers-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tile-img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: filter var(--duration-btn) ease-in-out;
}
.kite-univers-inner {
  position: relative; /* au-dessus de la photo et du voile */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  padding: 0 20px;
}
.kite-univers-logo {
  display: block;
  width: 75%;         /* = .item-cat de la prod */
  max-width: 420px;
  height: auto;
  transition: transform var(--duration-btn) ease-out;
}

/* ---- Mise en avant de la boutique affichée ----
   La tuile qui correspond au domaine visité garde ses couleurs ; l'univers
   voisin passe en retrait et les retrouve au survol. La classe is-current est
   posée par kahomeblocks d'après le lien de la tuile. */
.kite-univers-tile:not(.is-current)::before { filter: grayscale(1) brightness(.6); }
a.kite-univers-tile:not(.is-current):hover::before { filter: grayscale(0) brightness(.88); }

/* Libellé d'action : plein côté boutique visitée (c'est l'entrée principale),
   souligné et discret côté univers voisin (c'est une invitation). */
.kite-univers-label {
  display: inline-block;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  line-height: 1;
  color: #fff;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(255, 255, 255, .7);
  transition: border-color var(--duration-btn) ease-in-out, color var(--duration-btn) ease-in-out;
}
.is-current .kite-univers-label {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-heading);
  background: var(--c-surface);
  border-bottom: 0;
  padding: 14px 28px;
  border-radius: var(--radius-base);
}
a.kite-univers-tile:not(.is-current):hover .kite-univers-label { border-bottom-color: #fff; }
a.is-current:hover .kite-univers-label { color: var(--c-accent); }

/* Affordance de clic — la prod n'a pas de voile au repos (sa règle `a:after`
   est sans `content`, donc jamais rendue) : on ne l'assombrit qu'au survol. */
a.kite-univers-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--duration-btn) ease-in-out;
}
a.kite-univers-tile.is-current:hover::after { background: rgba(0, 0, 0, .25); }
a.kite-univers-tile:hover .kite-univers-logo { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .kite-univers-tile::before,
  .kite-univers-logo,
  .kite-univers-label { transition: none; }
  a.kite-univers-tile:hover .kite-univers-logo { transform: none; }
}

@media (max-width: 767px) {
  /* Une tuile par ligne, hauteur réduite (la prod passe à min-height 300px). */
  .kite-section-univers { grid-template-columns: 1fr; }
  .kite-univers-tile { min-height: 300px; }
  .kite-univers-inner { gap: 18px; }
  .kite-univers-logo { width: 70%; max-width: 300px; }
  .is-current .kite-univers-label { padding: 11px 22px; }
}

/* ---- 3.1b Hero slider (ps_imageslider) — état #hero-slide-2 = slide 2 ----
   Conservé : le diaporama reste réactivable depuis index.tpl (cf. son en-tête). */
.kite-home #carousel { position: relative; margin: 0; width: auto; overflow: hidden; }
#carousel .carousel-inner, #carousel .carousel-item, #carousel .carousel-item figure {
  width: 100%; height: auto; max-width: none; margin: 0;
}
#carousel .carousel-item figure { position: relative; line-height: 0; }
#carousel .carousel-item img { width: 100%; height: auto; display: block; object-fit: cover; }

/* ---- 3.2 Section produits (86:352) ---- */
.kite-home .ka-tabcat, .kite-section-produits {
  background: var(--c-surface);
  padding: 55px 0 60px;
}
/* même boîte 1630/15 que la source (tvtabcategory container x=137.5 w=1630) */
.kite-home .ka-tabcat .container { max-width: none; padding: 0; }
.kite-home .ka-tabcat > .container { width: 100%; max-width: 1630px; margin: 0 auto; padding: 0 15px; }

/* Titre de section : rectangle bleu 14×36 + texte 26px Medium uppercase */
.kite-home .ka-tabcat-title, .kite-section-title {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--ls-base);
  color: var(--c-heading);
  margin: 0 0 30px;
}
.kite-home .ka-tabcat-title::before, .kite-section-title::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 36px;
  background: var(--c-accent);
  flex: 0 0 auto;
}

/* Onglets : 214×44, actif bleu, inactifs blancs bordés */
.kite-home .ka-tabcat-tabs { justify-content: flex-start; gap: 20px; margin-bottom: 30px; }
.kite-home .ka-tab {
  min-width: 214px;
  height: 44px;
  padding: 11px 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-base);
  color: var(--c-heading);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  transition: all var(--duration-btn) ease-in-out;
}
.kite-home .ka-tab:hover { border-color: var(--c-accent); color: var(--c-accent); }
.kite-home .ka-tab.active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* Flèches du slider produits : sous la grille, centrées (Figma 86:394) */
.kite-home .ka-tabpane { padding-bottom: 40px; }
.kite-home .ka-arrow {
  top: auto;
  bottom: 0;
  transform: none;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
  font-size: 26px;
  line-height: 18px;
}
.kite-home .ka-arrow:hover { background: transparent; color: var(--c-heading); border: 0; }
.kite-home .ka-arrow.ka-prev { left: calc(50% - 24px); }
.kite-home .ka-arrow.ka-next { right: calc(50% - 24px); }

/* ---- 3.3 Sections statiques (session vidéo, articles, à-propos, FAQ, avis) ---- */
.kite-section-video { background: var(--c-page-bg); }
.kite-section-video img { display: block; width: 100%; height: 600px; object-fit: cover; }

.kite-section-articles { background: var(--c-surface); padding: 100px 0 60px; }
.kite-articles { display: flex; gap: 31px; align-items: flex-start; }
.kite-article-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.kite-article-card > a { display: block; line-height: 0; }
.kite-article-card img { width: 100%; height: 255px; object-fit: cover; display: block; }
.kite-article-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.kite-article-body h3 {
  font-weight: 600;                    /* Poppins SemiBold */
  font-size: var(--fs-h3-article);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  margin: 0;
}
.kite-article-body p {
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: 1.7;
  letter-spacing: var(--ls-base);
  margin: 0;
}
.kite-article-footer { border-top: 1px solid var(--c-border); padding: 12px 18px; }
.kite-btn-read {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  padding: 8px 20px;
  border-radius: var(--radius-base);
  transition: opacity var(--duration-btn) ease-in-out;
}
.kite-btn-read:hover { color: #fff; opacity: 0.9; }

.kite-section-apropos { background: var(--c-surface); padding: 48px 0 60px; }
.kite-section-apropos img { display: block; width: 100%; height: auto; }

.kite-section-faq {
  background: var(--c-page-bg);
  padding: 55px 0;
}
.kite-section-faq .kite-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.kite-section-faq h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-base);
  color: var(--c-heading);
  margin: 0;
  text-transform: none;
}
.kite-faq-list { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.kite-faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  padding: 13px 16px;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  cursor: pointer;
}
.kite-faq-item::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
}
.kite-btn-more {
  display: inline-block;
  background: var(--c-dark-2);
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-base);
  padding: 10px 22px;
  border-radius: var(--radius-base);
  transition: opacity var(--duration-btn) ease-in-out;
}
.kite-btn-more:hover { color: #fff; opacity: 0.9; }

.kite-section-avis { background: var(--c-page-bg); padding: 65px 0 45px; }
.kite-avis-cards { display: flex; gap: 31px; align-items: flex-start; margin-top: 40px; }
.kite-avis-card { flex: 1 1 0; min-width: 0; position: relative; padding-top: 60px; }
.kite-avis-card .kite-avis-box {
  background: var(--c-surface);
  min-height: 230px;
  margin: 0 24px;
  padding: 75px 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.kite-avis-card .kite-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 120px;
  border-radius: 0; /* avatars carrés (maquettes Kite & Foil) */
  object-fit: cover;
  z-index: 2;
}
.kite-avis-name {
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
}
.kite-avis-sep { width: 46px; height: 3px; background: var(--c-accent); }
.kite-avis-text { font-size: var(--fs-base); color: var(--c-text); line-height: 1.7; letter-spacing: var(--ls-base); }
.kite-slider-arrows { display: flex; justify-content: center; gap: 14px; margin-top: 40px; }
.kite-slider-arrows img { width: 18px; height: 18px; opacity: 0.75; }

/* --------------------------------------------------------------------------
   4. Carte produit — _components/product-card (default + state=hover)
   -------------------------------------------------------------------------- */
.kite-card.product-miniature {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  margin: 0;
  width: 100%;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.kite-card .kite-card-img {
  position: relative;
  width: 100%;
  flex: none;
  float: none;
  height: 350px;
  overflow: hidden;
  background: var(--c-surface);
}
.kite-card .kite-card-body { position: static; width: 100%; }
.kite-card .kite-card-img a.product-thumbnail { display: block; height: 100%; }
.kite-card .kite-card-img img {
  width: 100%;
  height: 350px;
  object-fit: contain;
  display: block;
}
/* Swap d'image au survol : 0.6s ease-in-out (Figma state=hover) */
.kite-card .kite-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-hover-img) ease-in-out;
}
.kite-card:hover .kite-img-hover { opacity: 1; }
.kite-card .kite-img-main { transition: opacity var(--duration-hover-img) ease-in-out; }
.kite-card.has-hover-img:hover .kite-img-main { opacity: 0; }

/* Boutons d'action (panier / cœur / œil) qui apparaissent au survol */
.kite-card .kite-card-actions {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: opacity var(--duration-btn) ease-in-out, transform var(--duration-btn) ease-in-out;
  z-index: 2;
}
.kite-card:hover .kite-card-actions { opacity: 1; transform: translateX(-50%); }
.kite-card .kite-action-btn {
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  border: 0;
  border-radius: var(--radius-base);
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-btn) ease-in-out;
}
.kite-card .kite-action-btn:hover { background: var(--c-heading); color: #fff; }
.kite-card .kite-action-btn .material-icons { font-size: 18px; line-height: 1; }
.kite-card .kite-action-form { display: flex; margin: 0; }
.kite-card button.kite-action-btn { padding: 0; font: inherit; }
.kite-card .kite-stock-status {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-base);
  color: #755400;
  background: #fff3cd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
}
@media (hover: none) {
  .kite-card .kite-card-actions { opacity: 1; transform: translateX(-50%); }
}

.kite-card .kite-card-body {
  padding: 4px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
}
.kite-card .kite-stars {
  color: var(--c-stars);
  font-size: var(--fs-sm);
  letter-spacing: 3px;
}
.kite-card .product-title {
  margin: 0;
  width: 100%;
  text-align: left;
  font-size: var(--fs-base);
  text-transform: uppercase;
}
.kite-card .product-title a {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  transition: color var(--duration-btn) ease-in-out;
}
/* State hover : titre bleu */
.kite-card:hover .product-title a { color: var(--c-accent); }
.kite-card .product-price-and-shipping { text-align: left; }
.kite-card .price {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: var(--fs-md);
  color: var(--c-accent) !important;
  letter-spacing: var(--ls-base);
}
/* Pas d'infos surlignées du thème classic */
.kite-card .highlighted-informations { display: none; }

/* --------------------------------------------------------------------------
   5. Footer — structure du storefront historique, modernisée et responsive
   -------------------------------------------------------------------------- */
#footer { padding-top: 0; background: var(--c-surface); }
.kite-footer { margin: 0 calc(50% - 50vw); background: var(--c-surface); }

.kite-footer-logo { display: flex; justify-content: center; padding: 20px 0; }
.kite-footer-logo img { width: 200px; height: auto; }

.kite-footer-divider { border: 0; border-top: 1px solid var(--c-border); margin: 0; }

.kite-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: flex-start;
  gap: 42px;
  padding-top: 38px;
  padding-bottom: 42px;
}
.kite-footer-cols > div { width: 100%; max-width: 100%; min-width: 0; padding: 0; }
.kite-footer-cols .kite-col-news { grid-column: 5; grid-row: 1; }

/* Ordre des colonnes (Figma) : Informations, liens ×2, Mon compte, Newsletter.
   NB : block-contact et block_myaccount_infos portent AUSSI la classe .links,
   d'où le :not(.wrapper) pour ne cibler que le conteneur ps_linklist. */
.kite-footer-cols > .block-contact { grid-column: 1; grid-row: 1; max-width: none; }
.kite-footer-cols > .links:not(.wrapper) { grid-column: 2 / span 2; grid-row: 1; max-width: none; }
.kite-footer-cols > #block_myaccount_infos { grid-column: 4; grid-row: 1; max-width: none; }

/* ps_linklist rend ses 2 blocs (h3, ul, h3, ul) dans un seul conteneur :
   grid 2 colonnes, remplissage par colonne (h3 en ligne 1, ul en ligne 2) */
.kite-footer-cols > .links:not(.wrapper) {
  display: block;
}
.kite-footer-cols > .links:not(.wrapper) > .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 42px;
  margin: 0;
}
.kite-footer-cols > .links:not(.wrapper) > .row > .wrapper { width: 100%; max-width: none; padding: 0; }
.kite-footer-cols > .links:not(.wrapper) ul { margin-bottom: 0; }

/* Résidus du module blockwishlist injectés dans displayFooter */
.kite-footer-cols > .wishlist-add-to,
.kite-footer-cols > .wishlist-delete,
.kite-footer-cols > .wishlist-create,
.kite-footer-cols > .wishlist-login,
.kite-footer-cols > .wishlist-toast { display: none; }

/* Titres et liens des colonnes (linklist, accountlinks, contactinfo) */
.kite-footer .block-contact-title {
  font-size: var(--fs-h3) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  margin: 0 0 18px;
}
.kite-footer h3, .kite-footer .h3 {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  text-transform: none;
  margin: 0 0 18px;
}
.kite-footer ul { margin: 0; }
.kite-footer ul li { margin-bottom: 18px; }
.kite-footer ul li a,
.kite-footer .block-contact {
  font-size: var(--fs-base);
  color: var(--c-text);
  letter-spacing: var(--ls-base);
}
.kite-footer ul li a:hover { color: var(--c-accent); }
.kite-footer .block-contact { padding: 0; }
.kite-footer .block-contact ul li { margin-bottom: 18px; }

/* Newsletter (ps_emailsubscription) : markup en colonnes bootstrap remis en pile */
.kite-col-news .block_newsletter { padding: 0; width: 100%; max-width: none; }
.kite-col-news .block_newsletter > .row { display: block; margin: 0; }
.kite-col-news .block_newsletter > .row > [class*="col-"] { width: 100%; max-width: 100%; padding: 0; flex: none; }
/* Le libellé du module tient lieu de titre de colonne */
.kite-col-news #block-newsletter-label {
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  margin: 0 0 18px;
}
.kite-col-news .block_newsletter p { margin: 0 0 18px; font-size: var(--fs-base); color: var(--c-text); }
.kite-col-news .block_newsletter form { margin: 0; }
.kite-col-news .block_newsletter form .row { margin: 0; }
.kite-col-news .block_newsletter form .col-xs-12 { padding: 0; }
/* champ + bouton côte à côte (le bouton est AVANT le champ dans le DOM, flotté) */
.kite-col-news .block_newsletter form .col-xs-12:first-child { display: flex; align-items: stretch; }
.kite-col-news .block_newsletter form .input-wrapper { order: 1; flex: 1 1 auto; }
.kite-col-news .block_newsletter form input[type="submit"] { order: 2; float: none; }
.kite-col-news .block_newsletter form .clearfix { display: none; }
.kite-col-news .block_newsletter form .col-xs-12 + .col-xs-12 { margin-top: 18px; }
.kite-col-news .block_newsletter input[type="email"] {
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-base) 0 0 var(--radius-base);
  padding: 12px 14px;
  font-size: var(--fs-base);
  color: var(--c-text);
  letter-spacing: var(--ls-base);
  width: 100%;
}
.kite-col-news .block_newsletter input[type="submit"],
.kite-col-news .block_newsletter button[type="submit"] {
  background: var(--c-accent);
  border: 0;
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;
}
.kite-col-news .block_newsletter .alert { margin-top: 10px; }

/* Réseaux sociaux : ps_socialfollow est vide en démo → icônes statiques du thème */
.kite-col-news .block-social { display: none; }
.kite-social { display: flex; gap: 16px; margin-top: 18px; }
.kite-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-heading);
  border-radius: 50%;
  color: var(--c-heading);
  transition: color var(--duration-btn) ease-in-out, border-color var(--duration-btn) ease-in-out;
}
.kite-social a:hover { color: var(--c-accent); border-color: var(--c-accent); }
.kite-social svg { width: 14px; height: 14px; fill: currentColor; }

/* Barre basse noire : paiements + copyright */
.kite-footer-bottom { background: var(--c-footer-bottom); }
.kite-footer-bottom-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
}
.kite-payments { display: flex; gap: 10px; align-items: center; }
.kite-payments span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
  border-radius: var(--radius-base);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0;
}
.kite-pay-visa { background: #1a1f71; color: #fff; }
.kite-pay-mc { background: #fff; color: #eb001b; }
.kite-pay-amex { background: #2e77bc; color: #fff; }
.kite-pay-discover { background: #fff; color: #f76e20; }
.kite-copyright {
  color: #fff;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  margin: 0;
}
.kite-copyright a { color: #fff; }
.kite-copyright a:hover { color: var(--c-accent); }
.kite-footer-bottom-spacer { width: 182px; }

/* Blocs hérités hors maquette */
#footer .block-reassurance { display: none; }
.kite-footer .wishlist-footer-link { display: none; }

@media (min-width: 768px) and (max-width: 1199px) {
  .kite-footer-cols {
    grid-template-columns: minmax(180px, 1fr) minmax(420px, 2fr);
    gap: 34px 42px;
  }
  .kite-footer-cols > .block-contact { grid-column: 1; grid-row: 1; }
  .kite-footer-cols > .links:not(.wrapper) { grid-column: 2; grid-row: 1; }
  .kite-footer-cols > #block_myaccount_infos { grid-column: 1; grid-row: 2; }
  .kite-footer-cols .kite-col-news { grid-column: 2; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   5.1 Page contact — géométrie fidèle au storefront historique
   -------------------------------------------------------------------------- */
.page-contact #wrapper { background: var(--c-surface); }
.page-contact .ka-contact-page {
  display: grid;
  gap: 30px;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto 30px;
}
.page-contact .ka-contact-info,
.page-contact .ka-contact-form-shell {
  padding: 15px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.page-contact .ka-contact-info .contact-rich { margin: 0; padding: 0; background: transparent; box-shadow: none; }
.page-contact .ka-contact-info .contact-rich > h4,
.page-contact .ka-contact-title {
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  text-transform: none;
}
.page-contact .ka-contact-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 227px; margin: 0 -15px; }
.page-contact .ka-contact-info-grid > .block {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 30px 15px;
  place-items: center;
  border-right: 1px solid var(--c-border);
  text-align: center;
}
.page-contact .ka-contact-info-grid > .block:last-child { border-right: 0; }
.page-contact .ka-contact-info-grid .data { width: auto; color: var(--c-text); font-size: 14px; line-height: 1.7; letter-spacing: 0; }
.page-contact .ka-contact-info-grid .data a { color: var(--c-heading); }
.page-contact .ka-contact-info-grid .data a:hover { color: var(--c-accent); }
.page-contact .contact-form { width: 100%; padding: 0; background: transparent; box-shadow: none; }
.page-contact .contact-form form { width: 100%; max-width: none; margin: 0; }
.page-contact .ka-contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  max-width: 868px;
  margin: 31px auto 0;
}
.page-contact .contact-form .form-group { position: relative; margin: 0 0 16px; }
.page-contact .contact-form .form-control-label {
  display: block;
  margin: 0 0 7px;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  padding-top: 10px;
  text-align: left;
}
.page-contact .contact-form .form-control {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
  color: var(--c-heading);
  background: #f1f1f1;
  font: inherit;
}
.page-contact .contact-form .form-control-file {
  display: block;
  width: 100%;
  min-height: 22px;
  padding: 0 10px;
  border: 0;
  color: var(--c-text);
  background: transparent;
  font: inherit;
}
.page-contact .contact-form .form-control:focus,
.page-contact .contact-form .form-control-file:focus { border-color: var(--c-accent); outline: 2px solid color-mix(in srgb, var(--c-accent) 25%, transparent); outline-offset: 1px; }
.page-contact .contact-form .form-control-comment { display: inline; margin-left: 8px; color: var(--c-text); font-size: 14px; text-align: left; }
.page-contact .ka-contact-fields-message { display: flex; flex-direction: column; }
.page-contact .ka-contact-message { flex: 1; }
.page-contact .contact-form .ka-contact-message textarea { min-height: 250px; resize: vertical; }
.page-contact .ka-contact-consent { margin-bottom: 16px; }
.page-contact .contact-form .form-footer { margin: auto 0 0; padding: 0; text-align: right; }
.page-contact .contact-form .form-footer .btn { min-width: 93px; margin-bottom: 5px; padding: 10px; border: 0; border-radius: 2px; background: var(--c-accent); font-weight: 400; line-height: 16px; }
.page-contact .ka-contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 767px) {
  .page-contact .ka-contact-page { display: block; margin-bottom: 16px; }
  .page-contact .ka-contact-info { display: none; }
  .page-contact .ka-contact-form-shell { padding: 15px; }
  .page-contact .ka-contact-title { margin-bottom: 32px; }
  .page-contact .ka-contact-form-grid { grid-template-columns: 1fr; gap: 0; margin: 0; }
  .page-contact .contact-form .ka-contact-message textarea { min-height: 250px; }
  .page-contact .contact-form .form-footer { text-align: left; }
  .page-contact .contact-form .form-footer .btn { width: auto; }
}

@media (max-width: 767px) {
  .kite-footer-logo { padding: 24px 0; }
  .kite-footer-divider { margin: 0 15px; }
  .kite-footer-cols { display: flex; flex-direction: column; gap: 0; padding: 0 15px 26px; }
  .kite-footer-cols > div,
  .kite-footer-cols > .block-contact,
  .kite-footer-cols > #block_myaccount_infos { width: 100%; max-width: none; min-width: 0; }
  .kite-footer-cols > .block-contact { order: 1; }
  .kite-footer-cols > .links:not(.wrapper) { display: block; order: 2; }
  .kite-footer-cols > #block_myaccount_infos { order: 3; }
  .kite-footer-cols > .kite-col-news { order: 4; }
  .kite-footer-cols > .links:not(.wrapper) > .row { display: block; margin: 0; }
  .kite-footer-cols > .links:not(.wrapper) > .row > .wrapper { width: 100%; max-width: none; padding: 0; }
  .kite-footer .title {
    min-height: 56px;
    margin: 0;
    padding: 17px 10px;
    border: 0;
    border-bottom: 1px solid var(--c-border);
  }
  .kite-footer .title .h3 { margin: 0; font-size: 17px; line-height: 22px; }
  .kite-footer .title .float-xs-right { margin-left: auto; }
  .kite-footer .collapse { padding: 15px 10px 5px; }
  .kite-footer-cols .kite-col-news { padding: 32px 10px 0; }
  .kite-col-news #block-newsletter-label { font-size: 18px; }
  .kite-footer-bottom-in { flex-direction: column; gap: 14px; min-height: 0; padding-top: 16px; padding-bottom: 16px; text-align: center; }
  .kite-footer-bottom-spacer { display: none; }
}

/* ==========================================================================
   PASSAGE 2 — gabarits catégorie / fiche produit / connexion / inscription
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. Socle des pages internes : fond gris + breadcrumb centré (Figma 88:470)
   -------------------------------------------------------------------------- */
#wrapper { background: var(--c-page-bg); box-shadow: none; }
#wrapper .banner { display: none; }

#wrapper .breadcrumb {
  display: flex;
  justify-content: center;
  background: transparent;
  padding: 14px 0 6px;
  margin: 0;
}
#wrapper .breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
#wrapper .breadcrumb ol::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2 8l6-5.5L14 8M3.5 7v6.5h9V7' stroke='%23666' stroke-width='1.4' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
#wrapper .breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  color: var(--c-text);
  margin: 0;
}
#wrapper .breadcrumb li a span { color: var(--c-text); }
#wrapper .breadcrumb li a:hover span { color: var(--c-accent); }
#wrapper .breadcrumb li:not(:last-child)::after { content: "/"; color: var(--c-text); margin: 0; }
#wrapper .breadcrumb li:last-child span { color: var(--c-accent); }

/* Carte blanche générique des gabarits internes */
.kite-card-block { background: var(--c-surface); margin-bottom: 16px; }

/* Gabarits pleine largeur (le .container bootstrap est étroit) */
#main.kite-category, #main.kite-product { margin: 0 calc(50% - 50vw); }

/* --------------------------------------------------------------------------
   7. Gabarit catégorie — frames /13, /20, /24, /17, /18 (88:419…)
   -------------------------------------------------------------------------- */

/* 7.1 card-category-header (88:476) */
.kite-cat-header { padding: 28px 16px 20px; }
.kite-cat-title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;                    /* Poppins/H1 Category */
  font-size: var(--fs-h1-category);
  line-height: 1.2;
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: var(--c-accent);
}
.kite-cat-desc {
  margin-top: 14px;
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: 1.7;
  letter-spacing: var(--ls-base);
}
.kite-cat-desc p { margin: 0; }
.kite-cat-desc a { color: var(--c-accent); }
.kite-cat-banner { margin-top: 14px; line-height: 0; }
.kite-cat-banner img { width: 100%; height: auto; max-height: 703px; object-fit: cover; }

/* 7.2 card-sous-categories (91:210) */
.kite-subcats-card { padding: 24px 16px; }
.kite-subcats-title {
  margin: 0 0 20px;
  font-weight: 600;
  font-size: var(--fs-h3-article);     /* 17px */
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: var(--c-heading);
}
.kite-subcats { display: flex; margin: 0; padding: 0; list-style: none; }
.kite-subcat { flex: 1 1 0; min-width: 0; }
.kite-subcat a { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kite-subcat-img { width: 130px; height: 100px; display: flex; align-items: center; justify-content: center; }
.kite-subcat-img img { max-width: 130px; max-height: 100px; width: auto; height: auto; object-fit: contain; }
.kite-subcat-name {
  font-size: var(--fs-base);
  color: var(--c-text);
  letter-spacing: var(--ls-base);
  text-align: center;
  transition: color var(--duration-btn) ease-in-out;
}
.kite-subcat a:hover .kite-subcat-name { color: var(--c-accent); }

/* 7.3 card-filtres (91:229) */
#category .kite-filters, .kite-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.kite-filters-left { display: flex; align-items: center; gap: 18px; }
.kite-btn-filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-base);
  font-family: var(--font-base);
  font-size: var(--fs-md);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  cursor: pointer;
}
.kite-products-count { margin: 0; font-size: var(--fs-md); color: var(--c-heading); letter-spacing: var(--ls-base); }
.kite-products-count p { margin: 0; }

.kite-view-toggles { display: flex; align-items: center; gap: 18px; }
.kite-view-btn { background: none; border: 0; padding: 0; color: #9a9a9a; cursor: pointer; line-height: 0; }
.kite-view-btn.active, .kite-view-btn:hover { color: var(--c-heading); }

.kite-sort { display: flex; align-items: center; gap: 14px; }
.kite-sort-label { font-size: var(--fs-md); color: var(--c-heading); letter-spacing: var(--ls-base); margin: 0; }
.kite-sort-dropdown { position: relative; }
.kite-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 181px;
  padding: 9px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-base);
  font-size: var(--fs-md);
  color: var(--c-text);
  letter-spacing: var(--ls-base);
}
/* État #tri-ouvert (125:5168) : panneau 280px, items 45px, courant bleu */
.kite-sort-menu.dropdown-menu {
  left: auto;
  right: 0;
  min-width: 280px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--c-surface);
  box-shadow: var(--shadow-dropdown);
}
.kite-sort-menu .select-list {
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 20px;
  font-size: var(--fs-md);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
}
.kite-sort-menu .select-list:hover { background: var(--c-surface-alt); color: var(--c-heading); }
.kite-sort-menu .select-list.current { background: var(--c-accent); color: #fff; }

.kite-active-filters:empty { display: none; }
.kite-active-filters .active_filters { margin: 0 auto 16px; }

/* Hors maquette : flags (« Nouveau ») et bulle wishlist du module sur les cartes */
.kite-card { position: relative; }
.kite-card .product-flags, .kite-card .product-flag { display: none; }
.kite-card .wishlist-button-add, .kite-card .wishlist-button-product { display: none; }

/* 7.4 Liste de produits : cartes liste 2 colonnes (défaut Figma) / grille */
.kite-product-list { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 16px; }
.kite-product-list .js-product { margin: 0; padding: 0; }
.kite-view-mode-list .js-product { width: calc(50% - 8px); }
.kite-view-mode-grid .js-product { width: calc(25% - 12px); }
.kite-product-list .kite-card { height: 100%; }

/* Éléments spécifiques au mode liste, masqués en grille */
.kite-card-list-desc, .kite-card-list-actions { display: none; }

/* _components/product-card-list (92:628) */
.kite-view-mode-list .kite-card {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 8px 16px;
  min-height: 306px;
}
.kite-view-mode-list .kite-card .kite-card-img {
  flex: 0 0 354px;
  width: 354px;
  height: 290px;
}
.kite-view-mode-list .kite-card .kite-card-img img { height: 290px; }
.kite-view-mode-list .kite-card .kite-card-actions { display: none; }
.kite-view-mode-list .kite-card .kite-card-body { padding: 0; gap: 12px; flex: 1 1 auto; min-width: 0; }
.kite-view-mode-list .kite-card .kite-stars { display: none; }
.kite-view-mode-list .kite-card .product-title { text-transform: none; }
.kite-view-mode-list .kite-card .product-title a {
  font-weight: 600;
  font-size: var(--fs-card-list-title);
  color: var(--c-heading);
}
/* au survol le titre liste reste sombre (REF #hover) — seule l'image swappe */
/* hover : titre → accent (source mesurée #222→#427ab5, variante Figma idem) */
.kite-view-mode-list .kite-card:hover .product-title a { color: var(--c-accent); }
.kite-view-mode-list .kite-card .price {
  font-weight: 500;
  font-size: var(--fs-card-list-title);
}
.kite-view-mode-list .kite-card-list-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: 1.65;
  letter-spacing: var(--ls-base);
}
.kite-card-list-desc p {
  margin: 0;
  display: inline;
  font-size: inherit;
  line-height: inherit;
}
.kite-view-mode-list .kite-card-list-actions { display: flex; gap: 10px; }

/* 7.5 Pagination + strip « no more results » (93:1055) */
.kite-pagination { margin-bottom: 16px; }
.kite-pagination .pagination { font-size: var(--fs-base); }
.kite-no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 65px;
}
.kite-no-more-txt { font-size: var(--fs-base); color: var(--c-text); letter-spacing: var(--ls-base); }
.kite-back-top {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-heading);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Fiche produit — frame /116-… (96:1180)
   -------------------------------------------------------------------------- */
.kite-product-card {
  display: flex;
  gap: 40px;
  padding: 28px 30px 60px 16px;
}

/* 8.1 Galerie : cover + colonne de vignettes à droite (96:1238) */
.kite-product-gallery { flex: 0 0 760px; width: 760px; max-width: 48%; }
/* le classic borne #content à 452px sur la fiche produit : on l'annule */
#product #content.page-content { max-width: none; margin: 0; width: 100%; }
#product .kite-product-card .product-flags { display: none; }
.kite-product-gallery .images-container { display: flex; gap: 20px; position: relative; padding-bottom: 44px; }
.kite-product-gallery .product-cover { flex: 1 1 auto; min-width: 0; margin: 0; }
.kite-product-gallery .product-cover img { width: 100%; height: auto; max-height: 625px; object-fit: contain; }
.kite-product-gallery .js-qv-mask {
  flex: 0 0 100px;
  width: 100px;
  max-height: 580px;
  overflow-y: auto;
  scrollbar-width: none;
  margin: 0;
}
.kite-product-gallery .js-qv-mask::-webkit-scrollbar { display: none; }
.kite-product-gallery .product-images { display: flex; flex-direction: column; gap: 14px; margin: 0; white-space: normal; }
.kite-product-gallery .thumb-container { display: block; margin: 0; }
#product .kite-product-gallery .thumb-container .thumb {
  width: 100px;
  height: auto;
  margin: 0;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: none;
}
#product .kite-product-gallery .thumb-container .thumb.selected,
#product .kite-product-gallery .thumb-container .thumb:hover { border: 1px solid var(--c-border); }
.kite-product-gallery .scroll-box-arrows { display: none; }
.kite-thumb-arrows {
  position: absolute;
  right: 22px;
  bottom: 0;
  display: flex;
  gap: 20px;
}
.kite-thumb-arrow {
  background: none;
  border: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--c-heading);
  cursor: pointer;
}

/* 8.2 Infos produit (96:1239) */
.kite-product-infos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kite-product-infos .product-information { display: flex; flex-direction: column; gap: 18px; }
.kite-product-title {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-h1-product);
  line-height: 1.3;
  letter-spacing: var(--ls-base);
  color: var(--c-heading-soft);
  text-transform: none;
}
.kite-product-stars { display: flex; align-items: center; gap: 14px; }
.kite-product-stars .kite-stars { color: var(--c-stars); font-size: var(--fs-base); letter-spacing: 3px; }
.kite-review-count {
  font-size: 13px;
  color: var(--c-text-muted);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
}

#product .product-prices { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#product .product-prices > div { margin: 0; }
#product .current-price { display: flex; align-items: baseline; gap: 10px; }
#product .current-price-value, #product .current-price span[itemprop="price"] {
  font-weight: 600;
  font-size: var(--fs-price-product);
  color: var(--c-accent);
  letter-spacing: 0;
}
#product .tax-shipping-delivery-label { font-size: 13px; color: var(--c-text-muted); margin: 0; }

.kite-oney { display: flex; align-items: center; gap: 8px; }
.kite-oney-label { font-weight: 500; font-size: 11px; color: var(--c-heading); }
.kite-oney-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #7ac242;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
}
.kite-oney-brand { font-weight: 600; font-size: 22px; line-height: 1; color: #7ac242; }

.kite-product-desc-short { font-size: var(--fs-base); color: var(--c-text); line-height: 1.75; letter-spacing: var(--ls-base); }
.kite-product-desc-short p { margin: 0; }
.kite-product-sep { border: 0; border-top: 1px solid var(--c-border); margin: 0; width: 100%; }

/* 8.3 Variantes en pastilles — _components/variant-chip (143:3472) */
#product .product-variants-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}
.kite-option-label,
#product .product-variants-item .control-label {
  flex: 0 0 160px;
  width: 160px;
  margin: 0;
  font-size: 13px;
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  font-weight: 400;
}
#product .product-variants-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 2px 2px 10px;      /* laisse respirer l'ombre des pastilles */
  flex: 1 1 auto;
}
#product .product-variants-item .input-container { margin: 0; float: none; }
#product .product-variants-item .input-container label { margin: 0; }
#product .input-radio + .radio-label,
#product .radio-label {
  display: inline-block;
  font-weight: 400;
  background: var(--c-surface);
  border: 2px solid var(--c-surface);          /* state=default : bordure invisible */
  border-radius: 2px;
  padding: 9px 16px;
  font-size: var(--fs-base);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  box-shadow: var(--shadow-variant);
  transition: border-color var(--duration-btn) ease-in-out;
  cursor: pointer;
}
#product .input-radio:checked + .radio-label {
  border-color: var(--c-black);                /* state=selected : bordure 2px noire */
  background: var(--c-surface);
  color: var(--c-heading);
}
#product .input-radio:hover + .radio-label { border-color: var(--c-black); }
/* Groupe de type liste (montage des lignes) : select bordé arrondi (97:848) */
#product .product-variants-item select.form-control-select {
  flex: 1 1 auto;
  width: auto;
  height: 41px;
  padding: 9px 14px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius-base);
  font-size: var(--fs-base);
  color: var(--c-text);
  letter-spacing: var(--ls-base);
  box-shadow: none;
}

/* 8.4 Quantité : [1] [−] [+] (97:852) — touchspin classic restylé */
.kite-qty-row { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.kite-qty-row .qty { margin: 0; }
.kite-qty-row .input-group.bootstrap-touchspin {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: auto;
  box-shadow: none;
  background: transparent;
}
#product #quantity_wanted {
  order: 1;
  width: 37px;
  height: 39px;
  padding: 9px 0;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  color: var(--c-heading);
  font-size: var(--fs-base);
  box-shadow: none;
  -moz-appearance: textfield;
}
#product #quantity_wanted::-webkit-inner-spin-button,
#product #quantity_wanted::-webkit-outer-spin-button { -webkit-appearance: none; }
.kite-qty-row .input-group-btn-vertical {
  order: 2;
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: auto;
  float: none;
}
.kite-qty-row .input-group-btn-vertical .btn {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 39px;
  margin: 0;
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 0;
  box-shadow: var(--shadow-qty-btn);
  color: var(--c-heading);
  float: none;
}
/* − avant + (Figma), glyphes − / + à la place des chevrons du touchspin */
.kite-qty-row .bootstrap-touchspin-down { order: 1; }
.kite-qty-row .bootstrap-touchspin-up { order: 2; }
.kite-qty-row .input-group-btn-vertical .btn i { display: none; }
.kite-qty-row .bootstrap-touchspin-down::before { content: "\2212"; font-size: 15px; line-height: 1; }
.kite-qty-row .bootstrap-touchspin-up::before { content: "+"; font-size: 15px; line-height: 1; }
/* le bouton wishlist du module s'injecte dans la ligne quantité : hors maquette */
.kite-qty-row .wishlist-button-add, .product-quantity .wishlist-button-product { display: none; }

/* 8.5 Actions : AJOUTER AU PANIER sombre + cœur (97:860) */
.kite-cart-actions { display: flex; align-items: center; gap: 26px; margin: 0 0 18px; }
.kite-cart-actions .add { margin: 0; }
#product .kite-add-to-cart,
#product .kite-add-to-cart:hover, #product .kite-add-to-cart:focus, #product .kite-add-to-cart:active {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 37px;
  background: var(--c-dark);
  border: 0;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-btn-cart);
  font-family: var(--font-base);
  font-weight: 300;                       /* Poppins/Add To Cart */
  font-size: var(--fs-add-to-cart);
  line-height: 1;
  letter-spacing: var(--ls-add-to-cart);
  text-transform: uppercase;
  color: #fff;
}
#product .kite-add-to-cart:hover { opacity: 0.92; }
#product .kite-add-to-cart .material-icons { font-size: 18px; line-height: 1; }
#product .kite-add-to-cart:disabled { opacity: 0.4; }
.kite-wishlist-link { color: var(--c-heading); line-height: 0; }
.kite-wishlist-link .material-icons { font-size: 24px; }

/* 8.6 Stock : jauge verte + disponibilité (97:868) */
.kite-stock { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kite-stock-gauge {
  display: block;
  width: 220px;
  height: 6px;
  border-radius: 3px;
  background: var(--c-green-stock);
}
#product #product-availability {
  display: block;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: var(--ls-base);
}
#product #product-availability .material-icons { display: none; }
#product #product-availability b { font-weight: 500; }

/* 8.7 Réseaux sociaux + donnez votre avis (97:871 / 97:878) */
.kite-product-social { display: flex; gap: 12px; }
.kite-soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 500;
  font-size: var(--fs-h4);
}
.kite-soc:hover { color: #fff; opacity: 0.9; }
.kite-soc-fb { background: #3b5998; }
.kite-soc-tw { background: #38a1f3; }
.kite-soc-ig { background: #e0452c; }
.kite-give-review {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  text-decoration: underline;
}
#product .product-additional-info { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.kite-product-infos .block-reassurance,
.kite-product-infos .blockreassurance_product { display: none; }   /* hors maquette */
.kite-product-infos .social-sharing { display: none; }  /* remplacé par .kite-product-social */
#product .featured-products { display: none; }          /* hors maquette (frame /116) */

/* 8.8 Onglets description (98:793) + contenu (98:800) */
#product .tabs.kite-product-tabs {
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#product .kite-product-tabs .nav-tabs { border: 0; display: flex; flex-wrap: wrap; }
#product .kite-product-tabs .nav-item { margin: 0; }
#product .kite-product-tabs .nav-tabs .nav-link {
  display: block;
  padding: 20px 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: 0;
  margin: 0;
  font-size: var(--fs-tab);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  text-transform: none;
  font-weight: 400;
  opacity: 1;
}
#product .kite-product-tabs .nav-tabs .nav-link.active,
#product .kite-product-tabs .nav-tabs .nav-link:hover {
  color: var(--c-accent);
  border: 1px solid var(--c-border-soft);
}
#product .kite-product-tabs .tab-content { padding: 60px 15%; margin-bottom: 0; }
.kite-product-tabs .product-description { font-size: var(--fs-base); color: var(--c-text); line-height: 1.8; letter-spacing: var(--ls-base); }
.kite-product-tabs .product-description h2,
.kite-product-tabs .product-description h3 {
  margin: 28px 0 24px;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: var(--ls-base);
  color: var(--c-blue-heading);
  text-transform: none;
}
.kite-product-tabs .product-description h2:first-child { margin-top: 0; }
.kite-product-tabs .product-description hr { border-color: var(--c-border); margin: 28px 0; }
.kite-product-tabs .product-description img,
.kite-product-tabs .product-description iframe { max-width: 100%; height: auto; }
.kite-product-tabs .product-description iframe { width: 100%; min-height: 620px; }

/* --------------------------------------------------------------------------
   9. Connexion / Inscription — frames /connexion (123:2502), #erreur
      (125:4336), /inscription (123:3701) ; composants field-auth,
      alert-danger ; jauge de force (REF #password-faible)
   -------------------------------------------------------------------------- */

/* Panneau centré : #main = carte (le titre classic est hors du card #content) */
#authentication #main, #registration #main, #password #main {
  max-width: 640px;
  margin: 0 auto 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-panel-border);
  padding: 96px 51px 88px;
}
#registration #main { max-width: 597px; padding: 96px 48px 60px; }
#authentication #content.page-content, #registration #content.page-content, #password #content.page-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
#authentication .page-header, #registration .page-header, #password .page-header {
  border: 0;
  padding: 0;
  margin: 0 0 30px;
  background: transparent;
}
#authentication .page-header h1, #registration .page-header h1, #password .page-header h1 {
  text-align: center;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-base);
  color: var(--c-heading);
  margin: 0;
  text-transform: none;
}
#authentication .page-footer, #registration .page-footer, #password .page-footer { display: none; }

/* Champs — _components/field-auth (default / focus) */
#authentication .form-group.row, #registration .form-group.row, #password .form-group.row {
  display: block;
  margin: 0 0 20px;
}
#authentication .form-control-label, #registration .form-control-label, #password .form-control-label {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 0 6px;
  margin: 0;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: var(--ls-base);
}
#authentication .form-control-label.required::after,
#registration .form-control-label.required::after,
#password .form-control-label.required::after { content: " *"; color: var(--c-red); }
#authentication .js-input-column, #registration .js-input-column, #password .js-input-column {
  width: 100%;
  max-width: 100%;
  padding: 0;
  flex: none;
}
/* Le template classic `password-new.tpl` n’applique `js-input-column` qu’au
   premier champ. Neutraliser aussi la grille Bootstrap de la confirmation afin
   que les deux saisies utilisent la même largeur utile. */
#password .renew-password .form-group > .col-md-4 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
}
#password .renew-password .form-control {
  width: 100%;
  min-height: 44px;
}
#authentication .form-control, #registration .form-control, #password .form-control {
  height: 40px;
  padding: 8px 12px;
  background: var(--c-field-auth-bg);
  border: 1px solid var(--c-field-auth-border);
  border-radius: 0;
  box-shadow: none;
  font-size: var(--fs-base);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
}
#registration .form-control { height: 33px; padding: 5px 12px; }
#authentication .form-control:focus, #registration .form-control:focus, #password .form-control:focus {
  background: var(--c-field-auth-bg-focus);
  border-color: var(--c-field-auth-border-focus);
  outline: none;
}
/* neutralise le focus « js-parent-focus » (fond gris + anneau bleu) du classic */
#authentication .js-parent-focus.focus, #registration .js-parent-focus.focus { background: transparent; }
#authentication .input-group.focus, #registration .input-group.focus,
#authentication .form-control:focus, #registration .form-control:focus { outline: 0 !important; box-shadow: none; }

/* Bouton MONTRER (123:3609) */
#authentication .input-group, #registration .input-group { display: flex; width: 100%; }
#authentication .input-group .form-control, #registration .input-group .form-control { flex: 1 1 auto; }
#authentication .input-group-btn, #registration .input-group-btn { display: flex; }
#authentication .kite-btn-montrer, #registration .kite-btn-montrer, .kite-btn-montrer {
  height: 40px;
  padding: 0 14px;
  background: var(--c-btn-montrer);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  box-shadow: none;
}
#registration .kite-btn-montrer { height: 33px; }
.kite-btn-montrer:hover, .kite-btn-montrer:focus { background: var(--c-heading); color: #fff; }

/* Commentaires de champ (« Optionnel », règles prénom/nom, exemple date) */
#authentication .form-control-comment, #registration .form-control-comment, #password .form-control-comment {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 6px 0 0;
  margin: 0;
  text-align: left;
  font-size: var(--fs-base);
  color: var(--c-text-muted);
  letter-spacing: var(--ls-base);
}

/* Bandeau d'erreur — _components/alert-danger (117:1393) */
#authentication .alert-danger, #registration .alert-danger, #password .alert-danger {
  background: var(--c-error-bg);
  border: 1px solid var(--c-error-border);
  border-radius: 0;
  color: var(--c-error-text);
  font-size: var(--fs-base);
  padding: 12px 20px;
  margin: 0 0 30px;
}
#authentication .alert-danger li, #registration .alert-danger li { color: var(--c-error-text); margin: 0; list-style: none; }
#authentication .alert-danger ul, #registration .alert-danger ul { margin: 0; padding: 0; }

/* Liens et boutons connexion */
#authentication .forgot-password { text-align: center; margin: 26px 0 0; padding: 0; }
#authentication .forgot-password a,
#authentication .no-account a {
  font-size: var(--fs-base);
  color: var(--c-heading);
  letter-spacing: var(--ls-base);
  text-decoration: underline;
}
#authentication #submit-login,
#registration .form-footer .btn {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  background: var(--c-accent);
  border: 0;
  border-radius: var(--radius-base);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: #fff;
  float: none;
  margin-top: 34px;
}
#authentication .form-footer, #registration .form-footer { margin: 0; padding: 0; }
#authentication #content hr { display: none; }
#authentication .no-account { text-align: center; margin-top: 22px; }

/* Inscription : intro, radios Titre, checkboxes, textes légaux */
#registration .register-form > p { font-size: var(--fs-base); color: var(--c-text); letter-spacing: var(--ls-base); margin: 0 0 26px; }
#registration .register-form > p a { color: var(--c-heading); font-weight: 600; }
#registration .radio-inline { margin-right: 32px; font-size: var(--fs-base); color: var(--c-text); }
#registration .custom-radio {
  width: 17px;
  height: 17px;
  border: 1px solid var(--c-text-muted);
  margin-right: 8px;
  background: var(--c-surface);
}
#registration .custom-radio input[type="radio"]:checked + span {
  width: 9px;
  height: 9px;
  background: var(--c-accent);
}
#registration .custom-checkbox { display: block; }
#registration .custom-checkbox label {
  display: block;
  position: relative;
  padding-left: 27px;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: var(--ls-base);
}
#registration .custom-checkbox input { position: absolute; left: 0; top: 4px; }
#registration .custom-checkbox input + span {
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--c-text-muted);
  border-radius: 2px;
  background: var(--c-surface);
  margin: 0;
}
#registration .custom-checkbox input + span .checkbox-checked { font-size: 13px; margin: 0; color: var(--c-heading); }
/* Lignes checkbox : le label de colonne (vide) disparaît, l'astérisque passe
   devant le texte de la case (Figma « * J'accepte les conditions… ») */
#registration .form-group:has(.custom-checkbox) > .form-control-label { display: none; }
#registration .form-group:has(> .form-control-label.required) .custom-checkbox label::before {
  content: "* ";
  color: var(--c-red);
}

/* Jauge de force du mot de passe (REF /inscription #password-faible) */
#registration .password-strength-feedback { margin-top: 10px; }
#registration .progress {
  height: 4px;
  width: 70%;
  background: #d6d6d6;
  border-radius: 2px;
  box-shadow: none;
  margin-bottom: 8px;
}
#registration .progress-bar { border-radius: 2px; transition: width 0.2s ease-in-out; }
#registration .password-requirements { font-size: var(--fs-base); color: var(--c-text); }
#registration .password-requirements .material-icons { font-size: 16px; vertical-align: -3px; }

/* --------------------------------------------------------------------------
   10. Header — conformité REF _components/header (corrections passage 2)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Loupe plus présente (REF ~28px) */
  .kite-navbar #search_widget form i.search,
  .kite-navbar #search_widget form .material-icons { font-size: 27px; }
  /* Le menu ne doit pas s'étirer ; groupe logo+menu+loupe calé à droite
     (fidélité au site source, cf. section Navbar) */
  .kite-navbar-in { gap: 0; }
  .kite-cross { padding-right: 15px; }
}

/* ==========================================================================
   11. Déclinaison FOIL — page Figma « Foil » (fichier TacmpXsYu1X4DaYn7uu9rK)
   Tout est scoppé .theme-foil (classe posée par le layout pour id_shop 3) :
   AUCUN impact sur la boutique Kite.
   ========================================================================== */

@media (min-width: 768px) {
  /* ---- Header — _components/header (80:2) : topbar blanche 66.5px (mesurée
     sur foil.cdweb.fr = identique à Kite ; le 96px du composant Figma était
     erroné, la source fait foi), barre de menu bleue 61px, menu aligné À
     DROITE, liens 16px Regular ---- */
  .theme-foil .kite-topbar-in { height: 66.5px; }
  .theme-foil .kite-navbar { background: var(--c-menu-bar-bg); }
  .theme-foil .kite-navbar-in { justify-content: flex-end; min-height: 61px; }
  .theme-foil #_desktop_top_menu .top-menu a[data-depth="0"] {
    color: var(--c-menu-link);              /* foil/menu-link */
    font-size: var(--fs-tab);               /* 16px (Figma menu-link) */
    font-weight: 400;                       /* Poppins Regular */
  }
  /* État /#menu-foils-ouvert (136:6353) « nav-item [actif] » : pastille
     blanche, texte BLEU foil/blue (le défaut de contraste blanc→bleu sur
     fond bleu du site source est normalisé par la maquette via la pastille) */
  .theme-foil #_desktop_top_menu .top-menu > li:hover > a[data-depth="0"] {
    color: var(--c-accent);
  }
}

/* ---- Accueil — frame « / » (84:56) ---- */
/* Titres de sections : 30px Medium uppercase (token --fs-h2 surchargé),
   barre bleue 8×30 (Kite : 14×36), écart 14px */
.theme-foil .kite-home .ka-tabcat-title::before,
.theme-foil .kite-section-title::before { width: 8px; height: 30px; }
.theme-foil .kite-home .ka-tabcat-title,
.theme-foil .kite-section-title { gap: 14px; }
/* FAQ : titre 20px Medium centré (86:337) */
.theme-foil .kite-section-faq h2 { font-size: 20px; font-weight: 500; }

/* Onglets pilule — _components/tab-pill (122:1323) : 212×44, inactif texte
   NOIR foil/black sur blanc, actif fond bleu texte blanc (déjà --c-accent) */
.theme-foil .kite-home .ka-tab { min-width: 212px; color: var(--c-black); }
.theme-foil .kite-home .ka-tabcat-tabs { gap: 18px; }

/* ---- Carte produit — _components/product-card (119:1377) ----
   default : titre 13px Medium uppercase NOIR foil/black, prix 14px Regular
   BLEU foil/blue ; hover : titre passe en bleu (variante Figma state=hover) */
.theme-foil .kite-card .product-title a { font-size: 13px; color: var(--c-black); }
.theme-foil .kite-card:hover .product-title a { color: var(--c-accent); }
.theme-foil .kite-card .price { font-size: var(--fs-base); font-weight: 400; }

/* ---- Carte liste (catégorie) — _components/product-card-list (121:1358) ----
   titre 14px SemiBold #222, hover BLEU (≠ Kite où il reste sombre),
   description 13px, prix 14px Regular bleu */
/* Sous-catégories : la maquette Foil n'a pas de titre (évite aussi le
   « Toutes nos Tous nos foils ») ; dropdown menu sans liseré bleu chez Foil */
.theme-foil .kite-subcats-title { display: none; }
.theme-foil #_desktop_top_menu .top-menu .sub-menu { border-bottom: 0; }
.theme-foil .kite-view-mode-list .kite-card .price { font-weight: 400; }
.theme-foil .kite-card-list-desc { font-size: 13px; }
.theme-foil .kite-view-mode-list .kite-card .product-title a {
  font-size: var(--fs-card-list-title);
}

/* ---- Fiche produit — frame /166-… (92:524) ----
   prix 18px Medium foil/blue (token --fs-price-product surchargé à 18px) ;
   onglets inactifs NOIR foil/black */
/* Jauge de stock (92:524 « stock ») : piste #d6d6e5 220×5 + remplissage
   40px foil/red #db1212 (pas de vert « green-stock » dans la collection foil) */
.theme-foil .kite-stock-gauge {
  height: 5px;
  background: #d6d6e5;              /* bar-bg — valeur mesurée, hors variables */
  position: relative;
  overflow: hidden;
}
.theme-foil .kite-stock-gauge::before {
  content: "";
  display: block;
  width: 40px;
  height: 100%;
  border-radius: inherit;
  background: var(--c-red);         /* foil/red */
}

/* NB : #product est l'id du <body> lui-même → la classe .theme-foil se
   combine sur le même élément (#product.theme-foil), pas en descendant. */
#product.theme-foil .current-price-value,
#product.theme-foil .current-price span[itemprop="price"] { font-weight: 500; }
#product.theme-foil .kite-product-tabs .nav-tabs .nav-link { color: var(--c-black); }
#product.theme-foil .kite-product-tabs .nav-tabs .nav-link.active,
#product.theme-foil .kite-product-tabs .nav-tabs .nav-link:hover { color: var(--c-accent); }

/* Le menu principal reste centré dans la largeur de la page, indépendamment
   des raccourcis de marque à gauche et de la recherche à droite. */
@media (min-width: 1200px) {
  .kite-navbar-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
  }
  .kite-navbar-in > .kite-cross { grid-column: 1; justify-self: start; }
  .kite-navbar-in > #_desktop_top_menu { grid-column: 2; }
  .kite-navbar-in > #search_widget { grid-column: 3; justify-self: end; margin-left: 0; }
}


/* ============================================================
   FAQ — page CMS /content/7-faq (accordéon <details> natif)
   Contenu migré de la source (classes .ka-faq*). Cf. migration/migrate-faq-cms.php
   ============================================================ */
.ka-faq { margin: 0; }
.ka-faq-item { border-bottom: 1px solid #e3e7ec; }
.ka-faq-item > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 40px 16px 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: #1b3a5b;
}
.ka-faq-item > summary::-webkit-details-marker { display: none; }
.ka-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 20px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #2c9ffd;
  border-bottom: 2px solid #2c9ffd;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.ka-faq-item[open] > summary { color: #2c9ffd; }
.ka-faq-item[open] > summary::after { transform: rotate(-135deg); }
.ka-faq-a { padding: 2px 0 18px; color: #555; font-size: 14px; line-height: 1.7; }
.ka-faq-a p { margin: 0 0 10px; }
.ka-faq-a p:last-child { margin-bottom: 0; }

/* Catégorie Foil « à venir » — contenu piloté par la description BO. */
body.category-id-24 .kite-subcats-card,
body.category-id-24 .page-content.page-not-found { display: none; }

.ka-teasing {
  max-width: 620px;
  margin: 8px auto 32px;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid var(--c-border, #e6e6e6);
  border-radius: 8px;
  background: #fff;
}
.ka-teasing__eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--c-accent, #427ab5);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ka-teasing__title {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-heading, #222);
}
.ka-teasing__text {
  margin: 0 auto 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text, #7a7a7a);
}
.ka-teasing__cta { margin: 0; }
.ka-teasing__cta .btn,
.ka-teasing__cta .btn:hover,
.ka-teasing__cta .btn:focus,
.ka-teasing__cta .btn:active {
  padding: 11px 26px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 575px) {
  .ka-teasing { padding: 30px 20px; margin-bottom: 24px; }
  .ka-teasing__title { font-size: 20px; }
}
/* 8.9 Lecteur YouTube des descriptions produit — chargement au clic. */
.kite-product-tabs .product-description .ka-youtube-player {
  width: 100%;
  margin: var(--space-product-video-block) 0;
}
.kite-product-tabs .product-description .ka-youtube-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--ratio-product-video);
  border-radius: var(--radius-base);
  background: var(--c-video-bg);
  box-shadow: var(--shadow-product-video);
}
.kite-product-tabs .product-description .ka-youtube-frame iframe,
.kite-product-tabs .product-description .ka-youtube-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}
.kite-product-tabs .product-description .ka-youtube-trigger {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-video-trigger);
  padding: 0;
  color: var(--c-surface);
  background: var(--bg-video-preview);
  cursor: pointer;
}
.kite-product-tabs .product-description .ka-youtube-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-video-preview);
  pointer-events: none;
}
.kite-product-tabs .product-description .ka-youtube-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kite-product-tabs .product-description .ka-youtube-trigger:focus-visible {
  outline: var(--size-focus-ring) solid var(--c-accent);
  outline-offset: calc(-1 * var(--size-focus-ring));
}
.kite-product-tabs .product-description .ka-youtube-play-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--size-video-play-width);
  height: var(--size-video-play-height);
  place-items: center;
  border-radius: var(--radius-video-play);
  color: var(--c-surface);
  background: var(--c-video-play);
  box-shadow: var(--shadow-video-play);
  font-size: var(--fs-video-play);
  line-height: 1;
}
.kite-product-tabs .product-description .ka-youtube-label {
  position: relative;
  z-index: 1;
  color: var(--c-surface);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-base);
}
.kite-product-tabs .product-description .ka-youtube-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kite-product-tabs .product-description .ka-youtube-fallback:focus {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-top: var(--space-video-trigger);
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@media (max-width: 767px) {
  .kite-product-tabs .product-description .ka-youtube-player {
    margin-inline: 0;
  }
}

/* 12. Accueil CLIENT-28 — grille horizontale 1/2 lignes, vidéo lazy et CTA. */
.kite-home .ka-tabcat { padding: var(--cs-product-section-block-start) 0 var(--cs-product-section-block-end); }
.kite-home .ka-tabcat > .container {
  width: 100%;
  max-width: var(--cs-product-container-width);
  margin-inline: auto;
  padding-inline: var(--cs-product-container-gutter);
}
.kite-home .ka-tabcat-tabs {
  display: flex;
  gap: var(--cs-product-tab-gap);
  overflow-x: auto;
  scrollbar-width: thin;
}
.kite-home .ka-tab:focus-visible,
.kite-home .ka-arrow:focus-visible,
.kite-home .ka-tabcat-more:focus-visible,
.kite-section-articles .kite-btn-all:focus-visible,
.ka-home-video-play:focus-visible,
.ka-home-video-fallback:focus-visible {
  outline: var(--cs-focus-size) solid var(--cs-home-accent);
  outline-offset: var(--cs-focus-size);
}
.kite-home .ka-tabpane[hidden] { display: none; }
.kite-home .ka-prod-slider {
  display: grid;
  grid-template-rows: repeat(var(--cs-product-rows), auto);
  grid-auto-flow: column;
  --cs-product-card-column: calc((100% - (3 * var(--cs-product-grid-gap-inline))) / 4);
  grid-auto-columns: var(--cs-product-card-column);
  gap: var(--cs-product-grid-gap-block) var(--cs-product-grid-gap-inline);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kite-home .ka-prod-slider::-webkit-scrollbar { display: none; }
.kite-home .ka-prod-slide { min-width: 0; scroll-snap-align: start; }
.kite-home .ka-prod-slide .product-miniature { width: 100%; margin: 0; }
.kite-home .ka-tabpane { padding-bottom: 0; }
.kite-home .ka-tabcat-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-product-controls-gap);
  margin-top: var(--cs-product-control-space);
}
.kite-home .ka-tabcat-controls .ka-arrow {
  position: static;
  width: var(--cs-product-arrow-size);
  height: var(--cs-product-arrow-size);
  color: var(--cs-home-text);
}
.kite-home .ka-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.kite-home .ka-tabcat-more,
.kite-section-articles .kite-btn-all {
  display: inline-block;
  padding: var(--cs-home-cta-pad-block) var(--cs-home-cta-pad-inline);
  border-radius: var(--radius-base);
  color: var(--cs-home-on-accent);
  background: var(--cs-home-accent);
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: uppercase;
}
.kite-home .ka-tabcat-more:hover,
.kite-section-articles .kite-btn-all:hover { color: var(--cs-home-on-accent); opacity: 0.9; }

.kite-section-video { position: relative; background: var(--c-page-bg); }
.ka-home-video { position: relative; width: 100%; min-height: var(--cs-home-video-min-height); aspect-ratio: var(--cs-home-video-ratio); overflow: hidden; }
.ka-home-video > img { width: 100%; height: 100%; object-fit: cover; }
.ka-home-video::after { content: ""; position: absolute; inset: 0; background: var(--cs-home-video-overlay); pointer-events: none; }
.ka-home-video-play {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: var(--space-video-trigger);
  border: 0;
  color: var(--cs-home-on-accent);
  background: transparent;
  cursor: pointer;
}
.ka-home-video-play > span:first-child {
  display: grid;
  place-items: center;
  width: var(--cs-home-video-play-width);
  height: var(--cs-home-video-play-height);
  border-radius: var(--radius-video-play);
  background: var(--cs-home-video-play-bg);
  box-shadow: var(--shadow-video-play);
}
.ka-home-video-fallback { position: absolute; z-index: 1; inset: auto var(--cs-product-container-gutter) var(--cs-product-container-gutter) auto; color: var(--cs-home-on-accent); text-decoration: underline; }
.ka-home-video iframe { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; }
.ka-home-video.is-playing::after { display: none; }

.kite-articles-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-blog-heading-gap); }
.kite-articles-more-mobile { display: none; text-align: center; margin-top: var(--cs-blog-mobile-space); }

@media (min-width: 768px) and (max-width: 1199px) {
  .kite-home .ka-prod-slider { --cs-product-card-column: calc((100% - var(--cs-product-grid-gap-inline) - var(--cs-product-grid-gap-inline)) / 3); }
}

@media (max-width: 767px) {
  .kite-home .ka-prod-slider { --cs-product-card-column: calc((100% - var(--cs-product-grid-gap-inline)) / 2); }
  .kite-home .ka-tabcat-controls { flex-wrap: wrap; justify-content: space-between; }
  .kite-home .ka-tabcat-more { flex-basis: 100%; text-align: center; }
  .ka-home-video { aspect-ratio: var(--ratio-product-video); }
  .kite-articles-heading .kite-btn-all-desktop { display: none; }
  .kite-section-articles .kite-articles { display: grid; grid-template-columns: 1fr; gap: var(--cs-product-grid-gap-inline); }
  .kite-section-articles .kite-article-card:nth-child(n + 3) { display: none; }
  .kite-articles-more-mobile { display: block; }
}

/* ==========================================================================
   13. UX mobile CLIENT-91 — storefront Kite + Foil
   Le thème desktop reste inchangé. Les règles suivantes rendent les parcours
   catalogue et achat réellement utilisables de 320 à 767 px.
   ========================================================================== */
@media (max-width: 767px) {
  /* Empêche le document de glisser horizontalement tout en conservant le
     défilement natif des carrousels et rangées de vignettes. */
  html,
  body { max-width: 100%; overflow-x: clip; }

  /* La carte de réinitialisation gardait 102 px de padding horizontal sur un
     écran de 320 px, réduisant inutilement les deux champs. */
  #password #main { padding: 40px 20px 44px; }

  /* La page d'accueil retire le padding du container parent : la marge
     négative Bootstrap de .row ne doit donc plus compenser 15 px inexistants. */
  #index #wrapper > .container > .row { margin-inline: 0; }
  #index #wrapper #content-wrapper { width: 100%; max-width: 100%; }

  /* Header : zones tactiles de 44 px et recherche existante rendue visible
     sous la barre principale (la navbar desktop ne contient plus que ce hook
     une fois ps_mainmenu déplacé dans #_mobile_top_menu). */
  #header .header-nav .mobile { min-height: 50px; }
  #header #menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 50px;
    margin-left: -12px;
  }
  #header #_mobile_user_info a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 50px;
  }
  #header #_mobile_cart .blockcart { min-height: 50px; }
  #header .header-top > .kite-navbar.hidden-sm-down {
    display: block !important;
    min-height: 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border-soft);
  }
  #header .kite-navbar .kite-container {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 8px 15px;
  }
  #header .kite-navbar .kite-cross,
  #header .kite-navbar #_desktop_top_menu { display: none !important; }
  #header .kite-navbar #search_widget {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
  }
  #header .kite-navbar .kite-search-trigger { display: none; }
  #header .kite-navbar #search_widget form.kite-search-panel {
    position: static;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-base);
    box-shadow: none;
  }
  #header .kite-navbar #search_widget .kite-search-panel input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0 !important;
    height: 42px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--c-heading);
    font-family: var(--font-base);
    font-size: 16px;
  }
  #header .kite-navbar #search_widget .kite-search-submit {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
  }
  #header .kite-navbar #search_widget .kite-search-submit .material-icons {
    color: var(--c-heading);
    font-size: 24px;
  }

  /* Menu : le catalogue et les réglages ne se disputent plus deux demi-
     colonnes. Les chevrons ont une vraie zone tactile. */
  #mobile_top_menu_wrapper {
    flex-direction: column;
    margin-inline: 0;
    padding: 8px 0 12px;
  }
  #mobile_top_menu_wrapper .js-top-menu.mobile,
  #mobile_top_menu_wrapper .js-top-menu-bottom {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
    padding: 0 15px;
  }
  #mobile_top_menu_wrapper .js-top-menu-bottom { margin-top: 8px; }
  #mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 44px 10px 10px;
    white-space: normal;
    line-height: 1.35;
  }
  #mobile_top_menu_wrapper .top-menu .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  #mobile_top_menu_wrapper .js-top-menu-bottom > div { width: 100%; }
  #mobile_top_menu_wrapper .js-top-menu-bottom .dropdown select,
  #mobile_top_menu_wrapper .js-top-menu-bottom .dropdown-menu { max-width: 100%; }

  /* Breadcrumb : sur une fiche profonde, garder seulement l'entrée et la
     page courante évite quatre lignes avant le produit. */
  #wrapper .breadcrumb { overflow: hidden; }
  #wrapper .breadcrumb ol { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  #wrapper .breadcrumb li:not(:first-child):not(:last-child) { display: none; }
  #wrapper .breadcrumb li:last-child {
    min-width: 0;
    max-width: calc(100vw - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #wrapper .breadcrumb li:last-child span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Catégorie : une carte par ligne, sans dimensions desktop fixes. */
  #category .kite-filters,
  .kite-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .kite-filters-left { justify-content: space-between; gap: 12px; }
  .kite-btn-filtre { min-height: 44px; }
  .kite-view-toggles { display: none; }
  .kite-sort { width: 100%; gap: 8px; }
  .kite-sort-label { flex: 0 0 auto; }
  .kite-sort-dropdown { flex: 1 1 auto; min-width: 0; }
  .kite-sort-btn { width: 100%; min-width: 0; min-height: 44px; gap: 12px; }
  .kite-sort-menu.dropdown-menu { right: 0; left: 0; min-width: 0; width: 100%; }
  .kite-sort-menu .select-list { min-height: 48px; height: auto; }

  .kite-product-list { gap: 16px; }
  .kite-view-mode-list .js-product,
  .kite-view-mode-grid .js-product { width: 100%; }
  .kite-view-mode-list .kite-card,
  .kite-view-mode-grid .kite-card {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .kite-view-mode-list .kite-card .kite-card-img,
  .kite-view-mode-grid .kite-card .kite-card-img {
    flex: none;
    width: 100%;
    height: min(82vw, 340px);
  }
  .kite-view-mode-list .kite-card .kite-card-img img,
  .kite-view-mode-grid .kite-card .kite-card-img img { height: 100%; }
  .kite-view-mode-list .kite-card .kite-card-body,
  .kite-view-mode-grid .kite-card .kite-card-body {
    width: 100%;
    padding: 14px 16px 18px;
    gap: 8px;
  }
  .kite-view-mode-list .kite-card .kite-card-list-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
  .kite-view-mode-list .kite-card .kite-card-list-actions { display: flex; gap: 10px; }
  .kite-view-mode-list .kite-card .kite-card-actions,
  .kite-view-mode-grid .kite-card .kite-card-actions { display: none; }

  /* Fiche produit : galerie puis informations, jamais côte à côte. */
  .kite-product-card {
    flex-direction: column;
    width: 100%;
    gap: 24px;
    padding: 16px;
  }
  .kite-product-gallery {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .kite-product-gallery .images-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    padding-bottom: 0;
  }
  .kite-product-gallery .product-cover { width: 100%; }
  .kite-product-gallery .product-cover img {
    width: 100%;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
  }
  .kite-product-gallery .js-qv-mask {
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .kite-product-gallery .product-images {
    flex-direction: row;
    width: max-content;
    max-width: none;
    gap: 8px;
  }
  .kite-product-gallery .thumb-container { flex: 0 0 72px; scroll-snap-align: start; }
  #product .kite-product-gallery .thumb-container .thumb { width: 72px; height: 72px; object-fit: contain; }
  .kite-thumb-arrows { display: none; }
  .kite-product-infos { width: 100%; min-width: 0; }
  .kite-product-title { font-size: clamp(22px, 6vw, 28px); }
  #product .product-variants-item { align-items: flex-start; flex-direction: column; gap: 8px; }
  .kite-option-label,
  #product .product-variants-item .control-label { flex: none; width: 100%; }
  #product .product-variants-item ul { width: 100%; }
  #product .product-variants-item select.form-control-select { width: 100%; min-height: 44px; }
  .kite-qty-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  #product #quantity_wanted,
  .kite-qty-row .input-group-btn-vertical .btn { width: 44px; height: 44px; }
  .kite-cart-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .kite-cart-actions .add,
  #product .kite-add-to-cart { width: 100%; }
  #product .kite-add-to-cart { justify-content: center; min-height: 48px; padding: 14px 18px; }
  .kite-wishlist-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .kite-stock-gauge { max-width: 100%; }
  .kite-soc { width: 44px; height: 44px; }
  #product .kite-product-tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
  #product .kite-product-tabs .nav-item { flex: 0 0 auto; }
  #product .kite-product-tabs .nav-tabs .nav-link { min-height: 48px; padding: 13px 18px; }
  #product .kite-product-tabs .tab-content { padding: 24px 16px; }
  .kite-product-tabs .product-description iframe { min-height: 0; aspect-ratio: 16 / 9; }

  /* Accueil : moins de chemin avant les produits, commandes utilisables. */
  .kite-univers-tile { min-height: 230px; }
  .kite-univers-logo { width: 62%; }
  .kite-card .kite-action-btn { width: 44px; height: 44px; }
  .kite-home .kite-card .kite-card-img { height: min(52vw, 220px); }
  .kite-home .kite-card .kite-card-img img { height: 100%; }
  .kite-avis-cards { gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .kite-avis-card { flex: 0 0 min(82vw, 300px); scroll-snap-align: start; }

  /* Contrôles secondaires et lecture sur écran étroit. */
  .kite-btn-read,
  .kablog-filter,
  .pagination a,
  .pagination .current a { min-height: 44px; }
  #authentication .form-control,
  #registration .form-control,
  #password .form-control,
  #authentication .kite-btn-montrer,
  #registration .kite-btn-montrer,
  #authentication #submit-login,
  .page-contact .contact-form .form-control,
  .page-contact .contact-form .form-control-file,
  .page-contact .contact-form .form-footer .btn { min-height: 44px; }
  .kite-col-news .block_newsletter input[type="email"],
  .kite-col-news .block_newsletter input[type="submit"],
  .kite-col-news .block_newsletter button[type="submit"] { min-height: 44px; }
  .kite-social a { width: 44px; height: 44px; }
  #cms .page-content,
  #cms .page-content p,
  #cms .page-content li { text-align: left !important; overflow-wrap: anywhere; hyphens: auto; }
}

@media (max-width: 359px) {
  /* Trois actions de 44 px ne tiennent pas correctement dans une demi-carte. */
  .kite-home .ka-prod-slider { --cs-product-card-column: 100%; }
  .kite-home .kite-card .kite-card-img { height: min(86vw, 280px); }
}

/* CLIENT-98 — choix de paiement : cartes lisibles, tactiles et accessibles. */
#checkout-payment-step .ka-payment-options {
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
}
#checkout-payment-step .ka-payment-method {
  min-width: 0;
}
#checkout-payment-step .ka-payment-options .ka-payment-choice {
  position: relative;
  display: flex;
  min-height: 82px;
  margin: 0;
  padding: 14px 16px;
  align-items: center;
  border: 1px solid var(--c-border-input);
  border-radius: 6px;
  background: var(--c-surface);
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
  cursor: pointer;
}
#checkout-payment-step .ka-payment-choice:hover {
  border-color: var(--c-brand);
}
#checkout-payment-step .ka-payment-choice:has(input[type="radio"]:checked) {
  border-color: var(--c-brand);
  background: color-mix(in srgb, var(--c-brand) 9%, #fff);
  box-shadow: 0 0 0 1px var(--c-brand);
}
#checkout-payment-step .ka-payment-choice:has(input[type="radio"]:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--c-brand) 38%, transparent);
  outline-offset: 3px;
}
#checkout-payment-step .ka-payment-choice > .custom-radio {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0 8px 0 -8px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#checkout-payment-step .ka-payment-choice > .custom-radio input {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
#checkout-payment-step .ka-payment-choice > .custom-radio > span {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #979797;
  border-radius: 50%;
  background: var(--c-surface);
  pointer-events: none;
}
#checkout-payment-step .ka-payment-choice > .custom-radio input:checked + span {
  border: 6px solid var(--c-brand);
}
body#checkout #checkout-payment-step .ka-payment-choice > label.ka-payment-choice__label {
  display: grid;
  min-width: 0;
  min-height: 52px;
  flex: 1 1 auto;
  margin: 0;
  grid-template-columns: 54px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  color: var(--c-heading);
  float: none;
  text-align: left;
  cursor: pointer;
}
#checkout-payment-step .ka-payment-choice__badge {
  display: grid;
  width: 50px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-brand) 45%, var(--c-border-input));
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-brand);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
#checkout-payment-step .ka-payment-choice__badge { grid-column: 1; }
#checkout-payment-step .ka-payment-choice__copy { grid-column: 2; }
#checkout-payment-step .ka-payment-choice__logo { grid-column: 3; }
#checkout-payment-step .ka-payment-choice__check { grid-column: 4; }
#checkout-payment-step .ka-payment-choice__copy,
#checkout-payment-step .ka-payment-choice__title,
#checkout-payment-step .ka-payment-choice__hint {
  display: block;
  min-width: 0;
}
#checkout-payment-step .ka-payment-choice__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
#checkout-payment-step .ka-payment-choice__hint {
  margin-top: 4px;
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
#checkout-payment-step .ka-payment-choice__logo {
  display: flex;
  max-width: 112px;
  min-height: 36px;
  align-items: center;
  justify-content: flex-end;
}
#checkout-payment-step .ka-payment-choice__logo img {
  width: auto;
  max-width: 108px;
  height: auto;
  max-height: 38px;
  margin: 0;
  object-fit: contain;
}
#checkout-payment-step .ka-payment-choice__check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .16s ease, transform .16s ease;
}
#checkout-payment-step .ka-payment-choice:has(input[type="radio"]:checked) .ka-payment-choice__check {
  opacity: 1;
  transform: scale(1);
}
#checkout-payment-step .ka-payment-method--oney .ka-payment-choice__badge {
  border-color: #76318a;
  color: #76318a;
}
#checkout-payment-step .ka-payment-additional,
#checkout-payment-step .ka-payment-form:not(.ps-hidden) {
  margin: -1px 8px 4px;
  padding: 16px;
  border: 1px solid var(--c-border-input);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--c-surface-alt);
}
#checkout-payment-step #conditions-to-approve {
  margin: 20px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-input);
  border-radius: 4px;
  background: var(--c-surface-alt);
  cursor: pointer;
}
#checkout-payment-step #conditions-to-approve ul,
#checkout-payment-step #conditions-to-approve li {
  margin: 0;
}
#checkout-payment-step #conditions-to-approve li {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 10px;
}
/* Le markup Classic ajoute un wrapper flottant autour de la case. Dans une
   ligne flex, neutraliser ce float et aligner le carré sur une ligne de texte
   de 24 px évite qu’il remonte au-dessus du libellé quand celui-ci se replie. */
#checkout-payment-step #conditions-to-approve li > .float-xs-left {
  float: none !important;
  flex: 0 0 24px;
  width: 24px;
  margin: 0;
}
#checkout-payment-step #conditions-to-approve .custom-checkbox {
  display: flex;
  width: 24px;
  height: 24px;
  margin: 0;
  align-items: center;
  justify-content: center;
}
#checkout-payment-step #conditions-to-approve .condition-label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
#checkout-payment-step #conditions-to-approve .js-terms {
  display: block;
  margin: 0;
  line-height: 24px;
  cursor: pointer;
}
#checkout-payment-step #payment-confirmation .btn {
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 767px) {
  #checkout-payment-step .ka-payment-options { gap: 12px; }
  #checkout-payment-step .ka-payment-options .ka-payment-choice {
    min-height: 92px;
    padding: 12px;
  }
  #checkout-payment-step .ka-payment-choice > .custom-radio {
    flex-basis: 40px;
    width: 40px;
    margin-right: 4px;
    margin-left: -8px;
  }
  body#checkout #checkout-payment-step .ka-payment-choice > label.ka-payment-choice__label {
    min-height: 66px;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    gap: 9px;
  }
  #checkout-payment-step .ka-payment-choice__badge {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  #checkout-payment-step .ka-payment-choice__copy {
    grid-column: 2;
    grid-row: 1;
  }
  #checkout-payment-step .ka-payment-choice__badge {
    width: 44px;
    height: 36px;
  }
  #checkout-payment-step .ka-payment-choice__logo {
    grid-column: 2;
    grid-row: 2;
    max-width: 100%;
    min-height: 18px;
    margin-top: -6px;
    justify-content: flex-start;
  }
  #checkout-payment-step .ka-payment-choice__logo img {
    max-width: 88px;
    max-height: 28px;
  }
  #checkout-payment-step .ka-payment-choice__check {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  #checkout-payment-step .ka-payment-additional,
  #checkout-payment-step .ka-payment-form:not(.ps-hidden) {
    margin-inline: 4px;
    padding: 14px 12px;
  }
  #checkout-payment-step #conditions-to-approve { padding: 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #checkout-payment-step .ka-payment-choice,
  #checkout-payment-step .ka-payment-choice__check { transition: none; }
}

/* Checkout : rendre le code promo visible dans le flux principal, juste avant
   le choix du transporteur, plutôt que dans le récapitulatif latéral. */
body#checkout .ka-checkout-promo {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--c-border-input);
  border-radius: 6px;
  background: var(--c-surface-alt);
}
body#checkout .ka-checkout-promo > .h3 {
  margin: 0 0 12px;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}
body#checkout .ka-promo-inline,
body#checkout .ka-promo-inline .cart-voucher,
body#checkout .ka-promo-inline .promo-code {
  margin: 0;
}
body#checkout .ka-promo-inline #promo-code {
  display: block;
}
body#checkout .ka-promo-inline .promo-code form {
  display: flex;
  width: 100%;
  gap: 10px;
}
body#checkout .ka-promo-inline .promo-input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  flex: 1 1 auto;
  margin: 0;
  border: 1px solid var(--c-border-input);
  border-radius: 4px;
}
body#checkout .ka-promo-inline .btn {
  min-height: 46px;
  flex: 0 0 auto;
}
body#checkout .ka-promo-inline .js-error {
  margin: 10px 0 0;
}

@media (max-width: 575px) {
  body#checkout .ka-checkout-promo { padding: 14px 12px; }
  body#checkout .ka-promo-inline .promo-code form {
    align-items: stretch;
    flex-direction: column;
  }
  body#checkout .ka-promo-inline .btn { width: 100%; }
}