/* ==========================================================================
   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;
}
#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 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); }
}