/* ==========================================================================
   camera-espion.com — charte « A1 — Clair et aéré »       AMC 2026-09-27
   Chargé UNIQUEMENT pour la boutique 1 (id_shop = 1) par
   templates/layouts/layout-both-columns.tpl du thème enfant.

   RÈGLE : le style des sections (couleurs, tailles, marges) se règle dans
   AxonCreator, widget par widget. Ce fichier ne contient que ce qu'Axon ne
   sait pas faire : les polices hébergées, les couleurs de référence et la
   police par défaut du site. Ajouter une règle ici = la commenter.
   ========================================================================== */

/* --- 1. Polices Barlow hébergées dans le thème enfant (licence OFL, pas de Google Fonts) --- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-latin-700-italic.woff2') format('woff2'); }

/* --- 2. Couleurs de référence de la charte (utilisables dans le CSS personnalisé d'Axon : var(--ce-orange)) --- */
:root {
  --ce-anthracite: #1F2226;   /* en-tête sombre, bandes */
  --ce-rayons:     #2A2E33;   /* barre des rayons */
  --ce-noir:       #15171A;   /* bandeau haut, pied de page */
  --ce-fond:       #F6F4F1;   /* fond des sections */
  --ce-blanc:      #FFFFFF;
  --ce-orange:     #E4661B;   /* accent, boutons (texte blanc gras >= 16 px) */
  --ce-orange-fonce: #C2410C; /* liens et texte orange sur fond clair */
  --ce-texte:      #1F2226;
  --ce-texte-2:    #5E6166;   /* texte secondaire */
  --ce-bordure:    #E6E1D8;
  --ce-bleu-fr:    #0055A4;   /* drapeau */
  --ce-rouge-fr:   #EF4135;
}

/* --- 3. Polices du site (boutique 1).
        Akira applique les polices du Theme Customizer via des variables CSS
        (--font-family-body / -title / -label / -semi). On les redéfinit ici
        plutôt que dans le Customizer : y choisir Barlow la ferait charger
        depuis Google Fonts. Laisser les polices du Customizer sur Arial.
        La COULEUR PRINCIPALE, elle, se règle dans le Customizer (boutique 1)
        et n'est pas redéfinie ici.
        Un réglage « Typographie » fait dans l'éditeur Axon reste prioritaire. --- */
:root, body {
  --font-family-body:  'Barlow', Arial, sans-serif;
  --font-family-title: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  --font-family-label: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  --font-family-semi:  'Barlow Condensed', 'Barlow', Arial, sans-serif;
}
body {
  font-family: var(--font-family-body);
  color: var(--ce-texte);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-title);
}

/* --- 4. Classe utilitaire pour l'éditeur Axon (Avancé > Classes CSS) :
        « ce-titre » = police des titres (Barlow Condensed) sur un widget
        qui n'est pas un titre h1-h6 (n° de téléphone, menu des rayons…). --- */
.ce-titre,
.ce-titre a,
.ce-titre .elementor-heading-title {
  font-family: var(--font-family-title);
}

/* --- 5. Carte produit « camera-espion » (miniature n° 27 du thème enfant,
        widget Produits de l'accueil A1 — AMC 2026-09-28). Couleurs de fond,
        de bordure et tailles de texte : réglées dans le widget Axon. --- */
body .ce-carte .element-bottom,
body .ce-carte .product-description { text-align: left; }
body .ce-carte .product-description {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
body .ce-carte .ce-carte-rayon {
  font-family: var(--font-family-title); font-weight: 600; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase; color: #B9BCC0; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body .ce-carte .product_name { margin: 0; }
body .ce-carte .product_name a {
  font-family: var(--font-family-body); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
body .ce-carte .ce-carte-bas {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px;
}
body .ce-carte .info-product,
body .ce-carte .product-price-and-shipping { margin: 0; justify-content: flex-start; text-align: left; }
/* AMC 2026-10-04 (L3) : règle « .label { display: none } » retirée → l'étiquette native TTC/HT de PrestaShop s'affiche (selon le groupe du client). */
body .ce-carte .ce-carte-form { margin: 0; flex-shrink: 0; }
body .ce-carte .ce-carte-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: static; width: auto; height: 44px; min-width: 0; padding: 0 18px; margin: 0;
  border: 0; border-radius: 8px; background: #E9E6E1; color: #1F2226;
  font-family: var(--font-family-body); font-weight: 700; font-size: 14px; line-height: 1;
  text-transform: none; letter-spacing: 0; opacity: 1; visibility: visible; transform: none;
  cursor: pointer; transition: background .15s, color .15s;
}
body .ce-carte .ce-carte-btn:hover,
body .ce-carte .ce-carte-btn:focus-visible { background: #E4661B; color: #FFFFFF; }
body .ce-carte .ce-carte-btn::before,
body .ce-carte .ce-carte-btn::after { display: none; }
@media (max-width: 575px) {
  body .ce-carte .ce-carte-bas { flex-direction: column; align-items: stretch; gap: 8px; }
  body .ce-carte .ce-carte-btn { width: 100%; }
}

/* --- 6. AMC 2026-10-01 — Accueil, « Par lieu d'installation » (ordinateur, tablette) : 3 cartes de même hauteur.
   Classe « ce-lieu-col » posée sur les 3 colonnes de la section « Cartes lieux » (Axon : colonne > Avancé > Classes CSS).
   La liste de liens remplit la hauteur restante de la colonne. Retirer la classe = retour au comportement d'origine. --- */
.ce-lieu-col > .elementor-column-wrap > .elementor-widget-wrap { flex-direction: column; flex-wrap: nowrap; }
.ce-lieu-col .elementor-widget-text-editor { flex-grow: 1; }
.ce-lieu-col .elementor-widget-text-editor > .elementor-widget-container { height: 100%; box-sizing: border-box; }

/* --- 7. AMC 2026-10-01 — Accueil seulement : pas de bande blanche (80 px) entre « Par lieu d'installation » et le pied de page A1
   (marges d'Akira : #main-content margin-bottom 40 px + #wrapper padding-bottom 40 px). Les autres pages gardent leur espace. --- */
body#index #wrapper { padding-bottom: 0; }
body#index #main-content { margin-bottom: 0; }

/* --- 8. AMC 2026-10-03 — Pages catégories et listes de produits A1 (maquette « Pages catégories » du canevas).
   Cartes : miniature n° 27 (Customizer boutique 1 : category_product_layout = 27).
   8a-8b : toutes les listes (catégorie, recherche, nouveautés, promotions, meilleures ventes) ;
   8c-8g : page catégorie seulement (body#category). --- */

/* 8a. 3 produits par rangée sur grand écran (la règle d'Akira, générée par le Customizer, en met 4) */
@media (min-width: 1200px) {
  #box-product-grid .archive-wrapper-items > .item { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* 8b. Cartes produit des listes : carte blanche, nom sur 3 lignes, prix en grand, bouton orange */
#box-product-grid .archive-wrapper-items > .item { margin-bottom: 24px; }
#box-product-grid .ce-carte {
  height: 100%; display: flex; flex-direction: column; background: #FFFFFF;
  border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
#box-product-grid .ce-carte > .js-product-miniature { height: 100%; display: flex; flex-direction: column; }
#box-product-grid .ce-carte .element-top { margin: 0; }
#box-product-grid .ce-carte .element-bottom { flex-grow: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; margin: 0; }
#box-product-grid .ce-carte .product-description { flex-grow: 1; gap: 12px; }
#box-product-grid .ce-carte .product_name a {
  font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ce-texte);
  -webkit-line-clamp: 3; min-height: 4.2em;
}
#box-product-grid .ce-carte .product_name a:hover { color: var(--ce-orange-fonce); }
#box-product-grid .ce-carte .ce-carte-bas { margin-top: auto; }
#box-product-grid .ce-carte .price {
  font-family: var(--font-family-title); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ce-texte);
}
#box-product-grid .ce-carte .ce-carte-btn { background: var(--ce-orange); color: #FFFFFF; font-size: 15px; }
#box-product-grid .ce-carte .ce-carte-btn:hover,
#box-product-grid .ce-carte .ce-carte-btn:focus-visible { background: var(--ce-orange-fonce); color: #FFFFFF; }
body#category #box-product-grid .ce-carte .ce-carte-rayon { display: none; } /* le rayon est déjà le titre de la page */
@media (max-width: 575px) {
  #box-product-grid .archive-wrapper-items > .item { margin-bottom: 12px; }
  #box-product-grid .ce-carte .element-bottom { padding: 10px 10px 12px; }
  #box-product-grid .ce-carte .product_name a { font-size: 14px; line-height: 1.35; }
  #box-product-grid .ce-carte .price { font-size: 24px; }
}

/* 8c. Page catégorie : fond beige, en-tête blanc aligné à gauche (fil d'Ariane au-dessus du titre) */
body#category #wrapper { background: var(--ce-fond); }
body#category .page-title {
  background: #FFFFFF !important; background-image: none !important;
  padding: 28px 0 12px; margin-bottom: 0; text-align: left;
}
body#category .page-title > .container {
  max-width: 1400px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px;
}
body#category .page-title h1 {
  margin: 0; text-align: left; color: var(--ce-texte);
  font-family: var(--font-family-title); font-style: italic; font-weight: 700;
  font-size: 56px; line-height: 1; text-transform: uppercase; letter-spacing: .5px;
}
body#category .page-title .axps-breadcrumb { justify-content: flex-start; margin: 0; font-size: 14px; color: var(--ce-texte-2); }
body#category .page-title .axps-breadcrumb a { color: var(--ce-texte-2); }
body#category .page-title .axps-breadcrumb a:hover { color: var(--ce-orange-fonce); }
body#category .page-title .axps-breadcrumb > span { color: var(--ce-texte); font-weight: 600; }
@media (max-width: 767px) {
  body#category .page-title { padding: 14px 0 8px; }
  body#category .page-title h1 { font-size: 38px; line-height: .98; }
}

/* 8d. Texte d'introduction : prolonge l'en-tête blanc sur toute la largeur */
body#category .category-description {
  background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--ce-bordure); padding: 4px 0 28px; margin: 0 0 32px;
}
body#category .category-description p {
  max-width: 860px; margin: 0; font-size: 17px; line-height: 1.6; color: #3B3E43;
}
@media (max-width: 767px) {
  body#category .category-description { padding: 2px 0 18px; margin-bottom: 16px; }
  body#category .category-description p { font-size: 15px; line-height: 1.55; }
}

/* 8e. Colonne de gauche : carte « Catégories » (menu nrtmegamenu, colonne) */
body#category #left-column .block-categories { display: none; } /* bloc vide de ps_categorytree */
body#category #left-column .wrapper-menu-column {
  background: #FFFFFF; border-radius: 12px; padding: 20px 0 10px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 0;
}
body#category #left-column .wrapper-menu-column .widget-title {
  margin: 0 20px 10px; padding: 0; border: 0;
  font-family: var(--font-family-title); font-weight: 700; font-size: 22px; line-height: 1.2;
  text-transform: uppercase; color: var(--ce-texte);
}
body#category #left-column .wrapper-menu-column .widget-title span { font-size: 0; }
body#category #left-column .wrapper-menu-column .widget-title span::before { content: "Catégories"; font-size: 22px; }
body#category #left-column .wrapper-menu-column .widget-title::after,
body#category #left-column .wrapper-menu-column .widget-title::before { display: none; }
body#category #left-column .col_element_li_depth_0 { border-top: 1px solid #F0ECE5; margin: 0; padding: 0; }
body#category #left-column .col_element_li_depth_0 > .menu_a_wrap { display: flex; align-items: center; justify-content: space-between; }
body#category #left-column .col_element_a_depth_0 {
  flex-grow: 1; display: block; padding: 10px 20px; font-size: 15px; font-weight: 500; color: var(--ce-texte);
}
body#category #left-column .col_element_li_depth_0 .icon-opener { margin-right: 14px; }
body#category #left-column .col_sub_ul { padding: 0 0 8px; margin: 0; }
body#category #left-column .col_sub_li p { margin: 0; }
body#category #left-column .col_sub_li a { display: block; padding: 7px 20px 7px 34px; font-size: 15px; color: #3B3E43; }
body#category #left-column .wrapper-menu-column a:hover { color: var(--ce-orange-fonce); }

/* 8f. Barre de tri au-dessus des produits */
body#category #js-product-list-top {
  background: #FFFFFF; border-radius: 12px; padding: 10px 12px 10px 20px; margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); align-items: center; border: 0;
}
body#category #js-product-list-top .wc-result-count { margin: 0 8px 0 0; font-size: 15px; color: var(--ce-texte-2); }
body#category #js-product-list-top .dropdown-toggle {
  height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid #DDD8CF; border-radius: 8px; background: #FFFFFF; font-size: 14px; font-weight: 500;
}

/* 8g. Texte de bas de catégorie dans une carte blanche */
body#category #js-product-list-footer .category-additional-description {
  background: #FFFFFF; border-radius: 12px; padding: 32px 36px; margin-top: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
body#category #js-product-list-footer .category-additional-description p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #3B3E43; }
body#category #js-product-list-footer .category-additional-description p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  body#category #js-product-list-footer .category-additional-description { padding: 22px 16px; }
  body#category #js-product-list-footer .category-additional-description p { font-size: 14px; line-height: 1.6; }
}

/* --- 9. AMC 2026-10-03 — Page catégorie : éléments ajoutés par templates/catalog/listing/category.tpl du thème enfant
   (introduction réduite + « Lire la suite », pastilles, bouton « Catégories » sur mobile, titre « En savoir plus »). --- */
body#category .ce-intro { position: relative; }
body#category .ce-intro-cb { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body#category .ce-intro-texte {
  max-width: 860px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
body#category .ce-intro-texte p { margin: 0 0 8px; }
body#category .ce-intro-cb:checked ~ .ce-intro-texte { display: block; -webkit-line-clamp: unset; overflow: visible; }
body#category .ce-intro-plus {
  display: inline-block; margin: 6px 0 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ce-orange-fonce);
}
body#category .ce-intro-plus .ce-moins,
body#category .ce-intro-cb:checked ~ .ce-intro-plus .ce-plus { display: none; }
body#category .ce-intro-cb:checked ~ .ce-intro-plus .ce-moins { display: inline; }
body#category .ce-intro-cb:focus-visible ~ .ce-intro-plus { outline: 2px solid var(--ce-orange); outline-offset: 2px; }
body#category .ce-pastilles { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
body#category .ce-pastilles li {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px;
  background: var(--ce-fond); border: 1px solid var(--ce-bordure); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ce-texte);
}
body#category .ce-pastilles a { color: var(--ce-texte); }
body#category .ce-btn-categories { display: none; }
body#category .ce-savoir-plus {
  margin: 0 0 14px; font-family: var(--font-family-title); font-weight: 700; font-size: 30px; line-height: 1.1;
  text-transform: uppercase; color: var(--ce-texte);
}
@media (max-width: 767px) {
  body#category .ce-intro-texte { -webkit-line-clamp: 4; }
  body#category .ce-pastilles { display: none; }
  body#category .ce-btn-categories {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 14px;
    border-radius: 8px; background: var(--ce-anthracite); color: #FFFFFF; font-size: 15px; font-weight: 600;
  }
  body#category .ce-btn-categories:hover { color: #FFFFFF; background: #000000; }
  body#category .ce-savoir-plus { font-size: 22px; }
}

/* --- 10. AMC 2026-10-03 — Page catégorie : sous-catégories en cartes « Nos rayons » de l'accueil A1
   (photo en haut, nom en Barlow Condensed majuscules + flèche orange, carte blanche), placées APRÈS l'introduction. --- */
body#category #wrapper > .container-fluid { display: flex; flex-direction: column; }
body#category #wrapper > .container-fluid > .category-description { order: 1; }
body#category #wrapper > .container-fluid > .product-list-subcategories { order: 2; margin: 0 0 32px; }
body#category #wrapper > .container-fluid > .row { order: 3; }
body#category .product-list-subcategories .row > [class*="col-"] { margin-bottom: 24px; }
body#category .product-list-subcategories .wrapp-category {
  display: flex; flex-direction: column; height: 100%; background: #FFFFFF; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: box-shadow .15s;
}
body#category .product-list-subcategories .wrapp-category:hover { box-shadow: 0 6px 18px rgba(21,23,26,.12); }
body#category .product-list-subcategories .category-image { margin: 0; }
body#category .product-list-subcategories .category-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body#category .product-list-subcategories .category-title {
  position: static; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 16px 18px; margin: 0; background: #FFFFFF; color: var(--ce-texte); text-shadow: none;
  font-family: var(--font-family-title); font-weight: 700; font-size: 19px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .4px; text-align: left;
}
body#category .product-list-subcategories .category-title::after { content: "\2192"; color: var(--ce-orange); flex-shrink: 0; }
body#category .product-list-subcategories .wrapp-category:hover .category-title { color: var(--ce-orange-fonce); }
@media (max-width: 767px) {
  body#category #wrapper > .container-fluid > .product-list-subcategories { margin-bottom: 16px; }
  body#category .product-list-subcategories .row > [class*="col-"] { margin-bottom: 12px; padding-left: 6px; padding-right: 6px; }
  body#category .product-list-subcategories .row { margin-left: -6px; margin-right: -6px; }
  body#category .product-list-subcategories .category-title { font-size: 15px; padding: 10px 12px; }
}

/* --- 11. AMC 2026-10-03 — Fiche produit : blocs dépliants (accordéon d'Akira, gabarit product-tabs.tpl commun aux 4 boutiques, NON modifié).
   Ordre : « Points forts » en premier, « Description » en second (ordre CSS flex) ; ouverture par défaut sur « Points forts »
   par assets/js/camera-espion.js (boutique 1). Titres en cartes blanches A1 + flèche ronde : orange foncé pleine = fermé (inviter à ouvrir), claire = ouvert ; elle pivote à l'ouverture. --- */
body#product #wrapper-tab-product .tab-content { display: flex; flex-direction: column; }
body#product #wrapper-tab-product .tab-content > * { order: 10; }
body#product #wrapper-tab-product .tab-content > a.js-accordion[href="#points-forts"],
body#product #wrapper-tab-product .tab-content > #points-forts { order: 1; }
body#product #wrapper-tab-product .tab-content > a.js-accordion[href="#description"],
body#product #wrapper-tab-product .tab-content > #description { order: 2; }
body#product #wrapper-tab-product .tab-content > a.js-accordion {
  position: relative; display: flex; align-items: center; min-height: 64px; margin: 12px 0 0; padding: 16px 70px 16px 22px;
  background: #FFFFFF; border: 1px solid var(--ce-bordure); border-radius: 12px; box-sizing: border-box;
  font-family: var(--font-family-title); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ce-texte); text-decoration: none;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
body#product #wrapper-tab-product .tab-content > a.js-accordion:hover { color: var(--ce-orange-fonce); border-color: #F2C3A4; box-shadow: 0 2px 8px rgba(21,23,26,.06); }
body#product #wrapper-tab-product .tab-content > a.js-accordion.active_accordion { border-radius: 12px 12px 0 0; border-bottom-color: #F0ECE5; }
body#product #wrapper-tab-product .tab-content > a.js-accordion::before { display: none; }
body#product #wrapper-tab-product .tab-content > a.js-accordion::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 36px; height: 36px; margin: -18px 0 0; border-radius: 50%;
  font-family: inherit; font-size: 0; line-height: 0;
  background: var(--ce-orange-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transform: none; transition: transform .2s ease, background-color .2s;
}
body#product #wrapper-tab-product .tab-content > a.js-accordion:hover::after { background-color: #9A3412; }
body#product #wrapper-tab-product .tab-content > a.js-accordion.active_accordion::after {
  transform: rotate(180deg); background-color: #FCEBDF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
body#product #wrapper-tab-product .tab-content > .tab-pane {
  background: #FFFFFF; border: 1px solid var(--ce-bordure); border-top: 0; border-radius: 0 0 12px 12px;
  padding: 20px 22px 24px; box-sizing: border-box;
}
@media (max-width: 767px) {
  body#product #wrapper-tab-product .tab-content > a.js-accordion { min-height: 56px; padding: 14px 62px 14px 16px; font-size: 18px; }
  body#product #wrapper-tab-product .tab-content > a.js-accordion::after { right: 14px; width: 32px; height: 32px; margin-top: -16px; }
  body#product #wrapper-tab-product .tab-content > .tab-pane { padding: 16px; }
}

/* --- 12. AMC 2026-10-03 — Fiche produit : même habillage que les pages catégories A1
   (fond crème, carte « Catégories » arrondie dans la colonne de gauche, fiche produit dans une carte blanche à contour). --- */
body#product #wrapper { background: var(--ce-fond); }
body#product .single-breadcrumbs-wrapper { background: transparent; }
/* Colonne de gauche : carte « Catégories » (menu nrtmegamenu, colonne) — mêmes règles que § 8e */
body#product #left-column .block-categories { display: none; }
body#product #left-column .wrapper-menu-column {
  background: #FFFFFF; border-radius: 12px; padding: 20px 0 10px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 0;
}
body#product #left-column .wrapper-menu-column .widget-title {
  margin: 0 20px 10px; padding: 0; border: 0;
  font-family: var(--font-family-title); font-weight: 700; font-size: 22px; line-height: 1.2;
  text-transform: uppercase; color: var(--ce-texte);
}
body#product #left-column .wrapper-menu-column .widget-title span { font-size: 0; }
body#product #left-column .wrapper-menu-column .widget-title span::before { content: "Catégories"; font-size: 22px; }
body#product #left-column .wrapper-menu-column .widget-title::after,
body#product #left-column .wrapper-menu-column .widget-title::before { display: none; }
body#product #left-column .col_element_li_depth_0 { border-top: 1px solid #F0ECE5; margin: 0; padding: 0; }
body#product #left-column .col_element_li_depth_0 > .menu_a_wrap { display: flex; align-items: center; justify-content: space-between; }
body#product #left-column .col_element_a_depth_0 {
  flex-grow: 1; display: block; padding: 10px 20px; font-size: 15px; font-weight: 500; color: var(--ce-texte);
}
body#product #left-column .col_element_li_depth_0 .icon-opener { margin-right: 14px; }
body#product #left-column .col_sub_ul { padding: 0 0 8px; margin: 0; }
body#product #left-column .col_sub_li p { margin: 0; }
body#product #left-column .col_sub_li a { display: block; padding: 7px 20px 7px 34px; font-size: 15px; color: #3B3E43; }
body#product #left-column .wrapper-menu-column a:hover { color: var(--ce-orange-fonce); }
/* Fiche produit (photos + résumé) dans une carte blanche à contour */
body#product #main-content > .row-product {
  margin: 0 0 8px; padding: 28px 16px; background: #FFFFFF;
  border: 1px solid var(--ce-bordure); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
body#product #main-content > .container { padding-left: 0; padding-right: 0; max-width: none; }
@media (max-width: 767px) {
  body#product #main-content > .row-product { padding: 16px 4px; border-radius: 12px; }
}

/* --- 13. AMC 2026-10-03 (soir) — Menu mobile (☰, panneau #canvas-menu-mobile) : ordre et titres de section (L2).
   Le menu mobile enchaîne les menus nrtmegamenu de la boutique 1 : barre horizontale (location 0 : Accueil, Nouveaux
   produits, Promotions, Meilleures ventes, Contact) puis rayons (location 1). Changer l'ordre dans le BO changerait
   aussi la barre sur ordinateur → l'ordre mobile se règle ici (flex + order) :
   Accueil (0) · NOS RAYONS = tous les autres éléments (10) · À DÉCOUVRIR = 21 / 103 / 2 (20) · Contact 22 (30).
   ⚠ Un NOUVEL élément ajouté à la barre horizontale arrivera parmi les rayons : ajouter sa classe nrt_mo_mega_<id> ici.
   Fait dans le BO / la base (pas ici) : « Masquer sur mobile » sur le menu du bouton Catégories (location 2, ligne
   « Catégories » en doublon) et sur « Nouveauté » (98) ; module nrtsocialbutton détaché de displayFollowButtons (boutique 1). */
#canvas-menu-mobile .wrapper-menu-mobile > .mo_element_ul_depth_0 { display: flex; flex-direction: column; }
#canvas-menu-mobile .mo_element_ul_depth_0 > .mo_element_li_depth_0 { order: 10; }
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_1 { order: 0; }
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_21,
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_103,
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_2 { order: 20; }
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_22 { order: 30; border-top: 6px solid var(--ce-fond); }
#canvas-menu-mobile .mo_element_ul_depth_0 > .mo_element_li_depth_0 > .menu_a_wrap { position: relative; }
/* Titres de section (pseudo-éléments : rien à traduire dans le BO) */
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_99::before,
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_21::before {
  display: block; padding: 16px 20px 6px; background: var(--ce-fond);
  font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ce-orange-fonce);
}
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_99::before { content: "Nos rayons"; }
#canvas-menu-mobile .mo_element_ul_depth_0 > .nrt_mo_mega_21::before { content: "À découvrir"; }
/* Rayons plus visibles : gras, flèches orange ; sous-rayons compacts */
#canvas-menu-mobile .mo_element_ul_depth_0 > .mo_element_li_depth_0:not(.nrt_mo_mega_1):not(.nrt_mo_mega_21):not(.nrt_mo_mega_103):not(.nrt_mo_mega_2):not(.nrt_mo_mega_22) > .menu_a_wrap > .mo_element_a_depth_0 {
  font-weight: 600; font-size: 15px; color: var(--ce-texte);
}
#canvas-menu-mobile .mo_element_li_depth_0 > .menu_a_wrap > .icon-opener { color: var(--ce-orange); }
#canvas-menu-mobile .mo_sub_li { padding: 0; }
#canvas-menu-mobile .mo_sub_li p { margin: 0; }
#canvas-menu-mobile .mo_sub_li > p > a { display: block; padding: 11px 20px 11px 34px; font-size: 14px; color: #3B3E43; }
/* AMC 2026-10-04 — L2 suite (2) : rayon ouvert → carré orange, flèche blanche (sinon orange sur orange, invisible).
   Aucune option dans nrtmegamenu pour cette couleur. */
#canvas-menu-mobile .mo_element_li_depth_0.active > .menu_a_wrap > .icon-opener { color: #FFFFFF; }

/* --- 14. AMC 2026-10-04 — Fiche produit : boutons alignés (L12, option A validée par l'utilisateur).
   « Ajouter au panier » occupe toute la place à droite de la quantité ; « Ajouter au comparatif » toute la largeur
   en dessous → les deux boutons finissent au même bord droit (mobile et ordinateur). Aucune option Akira pour cela. */
body#product .product-add-to-cart .add { flex: 1 1 auto; }
body#product .product-add-to-cart .add > .add-to-cart { flex: 1 1 auto; justify-content: center; }
body#product .product-additional-info .js-compare { display: flex; width: 100%; justify-content: center; }

/* --- 15. AMC 2026-10-04 — Comparatif (module nrtcompare) : titres de groupe de caractéristiques démarqués (L5, validé).
   Le gabarit (commun aux 4 boutiques) ne distingue pas les titres de groupe (Full Features Groups) des caractéristiques :
   un titre de groupe = ligne dont AUCUNE cellule valeur n'est remplie (une caractéristique a toujours au moins une valeur).
   1re ligne (photos / boutons) exclue. Bandeau crème pleine largeur, titre orange foncé (même style que « Nos rayons »). */
.wrapper-compare-table .compare-row:not(:first-child):not(:has(> .compare-value:not(:empty))) { background: var(--ce-fond); border-top: 1px solid var(--ce-bordure, #E7E3DD); margin-top: 8px; }
.wrapper-compare-table .compare-row:not(:first-child):not(:has(> .compare-value:not(:empty))) > .compare-label {
  flex: 1 0 100%; max-width: none; padding: 12px 16px 8px; background: transparent !important;
  font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ce-orange-fonce);
}
.wrapper-compare-table .compare-row:not(:first-child):not(:has(> .compare-value:not(:empty))) > .compare-value { display: none; }

/* --- 16. AMC 2026-10-04 — Fiche produit, suite de L12 (demande utilisateur) :
   coins légèrement arrondis des boutons panier / comparatif (toutes tailles) ;
   ordinateur (≥ 1200 px) : « Ajouter au comparatif » à côté de « Ajouter au panier ». En dessous de 1200 px, la colonne
   est trop étroite → disposition du § 14 (l'un sous l'autre). .product-actions et .product-additional-info sont voisins
   dans .product-information → flex ; additional-info en display: contents pour que le comparatif rejoigne la ligne
   du panier et que « liste d'envies » passe dessous. Alignement par le bas (marge 25 px = 15 du bloc + 10 du bouton
   panier) : reste juste même si des déclinaisons s'affichent au-dessus du panier. */
body#product .product-add-to-cart .add > .add-to-cart,
body#product .product-additional-info .js-compare { border-radius: 6px; }
@media (min-width: 1200px) {
  body#product .product-information { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; }
  body#product .product-information > * { flex: 0 0 100%; min-width: 0; }
  body#product .product-information > .product-actions { flex: 1 1 0; }
  body#product .product-information > .product-additional-info { display: contents; }
  body#product .product-additional-info > * { flex: 0 0 100%; }
  body#product .product-additional-info > .js-compare { flex: 0 0 auto; width: auto; margin: 0 0 25px; }
}

/* --- 17. AMC 2026-10-04 — Étiquette de taxe native (TTC / HT selon le groupe du client) : petite et grisée (L3, validé sur aperçu).
   L'étiquette elle-même vient de PrestaShop ($product.labels.tax_short, affichée si « Afficher l'étiquette de taxe » du pays) ;
   ici seulement sa présentation. */
body .product-prices .current-price .label,
body .ce-carte .product-price-and-shipping .label { font-size: 12px; font-weight: 400; color: #8A8F96; letter-spacing: .02em; }

/* --- 18. AMC 2026-10-04 — L6 (demande utilisateur) : sur smartphone et tablette (< 992 px, la colonne de gauche passe
   en bas de page), le menu vertical « Categories » de la colonne de gauche (nrtmegamenu, emplacement colonne) et le
   bouton « Catégories » de l'en-tête de catégorie (qui y renvoyait) sont masqués : doublon du menu ☰ en haut à gauche.
   Les blocs Axon de la colonne (« Un conseil avant d'acheter ? », « Nos engagements », « Moyens de paiement ») restent.
   Pas d'option « masquer sur mobile » pour l'emplacement colonne dans nrtmegamenu → CSS. Ordinateur (≥ 992 px) inchangé. */
@media (max-width: 991px) {
  #left-column .wrapper-menu-column,
  body#category .ce-btn-categories { display: none; }
}

/* --- 19. AMC 2026-10-04 — L11 (demande utilisateur) : fiche produit.
   (a) Ordre : « Ajouter au comparatif » et « Ajouter à mes produits intéressants » juste sous le panier, puis le bloc
   « Paiement sécurisé » de PrestaShop Checkout (logos, injecté par le module dans .product-add-to-cart), puis la
   réassurance. Les conteneurs .product-actions / formulaire / .product-add-to-cart passent en display: contents pour
   que leurs enfants deviennent des éléments flex de .product-information (formulaire et rechargement Ajax inchangés).
   ≥ 1200 px : comparatif toujours à côté du panier (remplace la mécanique du § 16, que le bloc de logos cassait).
   (b) Réassurance (module psreassurance, textes communs aux 4 boutiques : Garantie 2 ans · Livraison 48 h ·
   Assistance installation SAV en France) : un cadre crème, 3 colonnes compactes (≈ 120 px au lieu de 240). */
body#product .product-information { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; }
body#product .product-information > * { flex: 0 0 100%; min-width: 0; }
body#product .product-information > .product-actions,
body#product .product-actions > #add-to-cart-or-refresh,
body#product #add-to-cart-or-refresh > .product-add-to-cart { display: contents; }
body#product #add-to-cart-or-refresh > *,
body#product .product-add-to-cart > * { flex: 0 0 100%; min-width: 0; }
body#product #ps_checkout-payment-method-logo-block-container { order: 1; margin: 6px 0 4px; }
body#product .product-information > .block-reassurance { order: 2; }
@media (min-width: 1200px) {
  body#product .product-add-to-cart > .product-quantity { flex: 1 1 0; }
  body#product .product-additional-info > .js-compare { flex: 0 0 auto; width: auto; margin: 0 0 10px; }
}
body#product .block-reassurance { border: 1px solid #E3DED6; border-radius: 10px; background: #FBF8F3; padding: 12px 6px; margin-top: 6px; }
body#product .block-reassurance ul { display: flex !important; gap: 4px; margin: 0; padding: 0; }
body#product .block-reassurance li { flex: 1 1 0; min-width: 0; list-style: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
body#product .block-reassurance .block-reassurance-item { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 !important; }
body#product .block-reassurance .block-reassurance-item img { width: 32px !important; height: 32px !important; margin: 0 !important; }
body#product .block-reassurance .block-reassurance-item span { display: block; font: 600 13px/1.2 'Barlow', sans-serif !important; }
body#product .block-reassurance .block-reassurance-item span + span { font-weight: 400 !important; font-size: 12px !important; color: #6B7076 !important; }

/* ===== § 20 — AMC 2026-10-05 (L7) — « Points forts » : petit point gris devant chaque point, tiret gris pour les sous-points (boutique 1) ===== */
body#product #points-forts .product-description ul { margin: 0; padding: 0; list-style: none; }
body#product #points-forts .product-description > ul > li { position: relative; padding: 4px 0 4px 18px; line-height: 1.6; list-style: none; }
body#product #points-forts .product-description > ul > li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: #A3A3A3; }
body#product #points-forts .product-description ul ul { margin: 2px 0 0; }
body#product #points-forts .product-description ul ul li { position: relative; padding: 1px 0 1px 16px; list-style: none; }
body#product #points-forts .product-description ul ul li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 6px; height: 1px; background: #A3A3A3; }

/* ===== § 21 — AMC 2026-10-06 (L19) — Panier et récapitulatif de commande : « Taxes incluses » au-dessus, puis « Total TTC » en gras, 16 px (boutique 1, validé sur aperçu) ===== */
.cart-summary-totals { display: flex; flex-direction: column; }
.cart-summary-totals .cart-summary-line:not(.cart-total) { order: 1; }
.cart-summary-totals .cart-summary-line.cart-total { order: 2; }
.cart-summary-totals .cart-total .label, .cart-summary-totals .cart-total .value { font-weight: 700; font-size: 16px; color: #1F2226; }

/* ===== § 22 — AMC 2026-10-06 (L19 suite, demande utilisateur, validé sur aperçu) — Panier, boutons du « Total du panier » :
   à droite, même largeur (290 px au lieu de toute la largeur), texte 16 px, coins arrondis 8 px ;
   « Commander » reste orange, « Transformer ce panier en devis » en gris clair de la charte (survol anthracite) ===== */
body#cart .cart-detailed-actions .text-sm-center { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
body#cart .cart-detailed-actions .text-sm-center > .clearfix { margin: 0 !important; }
body#cart .cart-detailed-actions .text-sm-center .btn { display: block; width: 290px !important; max-width: 100%; height: auto; min-height: 0; padding: 11px 14px; border-radius: 8px; font-size: 16px; line-height: 1.2; text-align: center; }
body#cart .cart-detailed-actions .text-sm-center > .clearfix .btn { background: #E9E6E1 !important; border-color: #E9E6E1 !important; color: #1F2226 !important; }
body#cart .cart-detailed-actions .text-sm-center > .clearfix .btn:hover { background: #1F2226 !important; border-color: #1F2226 !important; color: #FFFFFF !important; }

/* ===== § 23 — AMC 2026-10-07 (L8 suite, demande utilisateur) — Page « Qui sommes-nous ? » (CMS 29) : nouvelle mise en page
   Classes .ce-qs-* écrites dans le contenu de la page (BO > Apparence > Pages, boutique Camera-espion.com).
   Mise en page selon la largeur du contenu (requêtes de conteneur) ; photos dans /img/cms/CameraEspion/pages/ ===== */
.ce-qs { container-type: inline-size; color: var(--ce-texte); font-family: var(--font-family-body); font-size: 16px; line-height: 1.6; }
.ce-qs * { box-sizing: border-box; }
.ce-qs p { margin: 0 0 12px; }
.ce-qs a { color: var(--ce-orange-fonce); }
.ce-qs a:hover { color: var(--ce-texte); }
.ce-qs .ce-qs-eyebrow { margin: 0 0 8px; font: 600 14px/1.2 var(--font-family-title); letter-spacing: .08em; text-transform: uppercase; color: var(--ce-orange-fonce); }
.ce-qs .ce-qs-titre { margin: 0 0 14px; font: 700 28px/1.1 var(--font-family-title); text-transform: uppercase; color: var(--ce-texte); text-wrap: balance; }
.ce-qs .ce-qs-section { padding: 48px 0; border-top: 1px solid var(--ce-bordure); }
.ce-qs .ce-qs-btn, .ce-qs .ce-qs-btn:visited { display: inline-block; padding: 12px 22px; border-radius: 8px; background: var(--ce-orange); color: #FFFFFF; font: 700 16px/1.2 var(--font-family-body); text-decoration: none; }
.ce-qs .ce-qs-btn:hover, .ce-qs .ce-qs-btn:focus-visible { background: var(--ce-orange-fonce); color: #FFFFFF; }
.ce-qs .ce-qs-btn-clair, .ce-qs .ce-qs-btn-clair:visited { background: var(--ce-blanc); color: var(--ce-texte); box-shadow: inset 0 0 0 2px var(--ce-texte); }
.ce-qs .ce-qs-btn-clair:hover, .ce-qs .ce-qs-btn-clair:focus-visible { background: var(--ce-texte); color: #FFFFFF; }
.ce-qs .ce-qs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.ce-qs .ce-qs-actions a:not(.ce-qs-btn) { font-weight: 600; }
/* Haut de page : texte + photo des bureaux */
.ce-qs .ce-qs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 8px 0 40px; }
.ce-qs .ce-qs-hero h2 { margin: 0 0 16px; font: italic 700 40px/1.05 var(--font-family-title); text-transform: uppercase; color: var(--ce-texte); text-wrap: balance; }
.ce-qs .ce-qs-hero .ce-qs-chapo { font-size: 18px; color: var(--ce-texte); }
.ce-qs .ce-qs-photo { margin: 0; }
.ce-qs .ce-qs-photo img { display: block; width: 100%; height: auto; border-radius: 16px; }
.ce-qs .ce-qs-photo figcaption { margin-top: 8px; font-size: 13px; color: var(--ce-texte-2); }
/* Bandeau des engagements */
.ce-qs .ce-qs-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 8px; padding: 0; list-style: none; background: var(--ce-bordure); border: 1px solid var(--ce-bordure); border-radius: 12px; overflow: hidden; }
.ce-qs .ce-qs-atouts li { margin: 0; padding: 18px 20px; background: var(--ce-fond); }
.ce-qs .ce-qs-atouts strong { display: block; font: 700 19px/1.15 var(--font-family-title); text-transform: uppercase; }
.ce-qs .ce-qs-atouts strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--ce-orange); vertical-align: middle; }
.ce-qs .ce-qs-atouts span { display: block; margin-top: 4px; font-size: 14px; color: var(--ce-texte-2); }
/* Éthique : texte + normes */
.ce-qs .ce-qs-ethique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.ce-qs .ce-qs-normes { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.ce-qs .ce-qs-normes span { padding: 6px 14px; border: 2px solid var(--ce-texte); border-radius: 6px; font: 700 18px/1 var(--font-family-title); letter-spacing: .06em; }
/* Équipe : 3 cartes */
.ce-qs .ce-qs-equipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.ce-qs .ce-qs-carte { display: flex; flex-direction: column; padding: 24px; background: var(--ce-blanc); border: 1px solid var(--ce-bordure); border-radius: 16px; }
.ce-qs .ce-qs-carte img { display: block; width: 72px; height: 72px; margin: 0 0 16px; padding: 12px; border-radius: 50%; background: var(--ce-fond); }
.ce-qs .ce-qs-carte h3 { margin: 0 0 8px; font: 700 22px/1.15 var(--font-family-title); text-transform: uppercase; color: var(--ce-texte); }
.ce-qs .ce-qs-carte p { font-size: 15px; color: var(--ce-texte-2); }
.ce-qs .ce-qs-carte p:last-child { margin: auto 0 0; padding-top: 8px; }
.ce-qs .ce-qs-carte p:last-child a { font-weight: 600; }
/* Retrait sur rendez-vous : bande sombre */
.ce-qs .ce-qs-retrait { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; margin: 8px 0 48px; padding: 32px 36px; border-radius: 16px; background: var(--ce-anthracite); color: #E9E6E1; }
.ce-qs .ce-qs-retrait .ce-qs-titre { color: #FFFFFF; }
.ce-qs .ce-qs-retrait .ce-qs-eyebrow { color: #F4A06B; }
.ce-qs .ce-qs-retrait p:last-child { margin: 0; }
/* Où nous trouver */
.ce-qs .ce-qs-acces { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; margin-top: 24px; }
.ce-qs .ce-qs-adresse { padding: 24px; background: var(--ce-fond); border-radius: 16px; }
.ce-qs .ce-qs-label { margin: 0 0 4px !important; font: 600 13px/1.2 var(--font-family-title); letter-spacing: .08em; text-transform: uppercase; color: var(--ce-texte-2); }
.ce-qs .ce-qs-adresse p + .ce-qs-label { margin-top: 18px !important; }
.ce-qs .ce-qs-trajets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ce-qs .ce-qs-trajet { padding: 20px 22px; border: 1px solid var(--ce-bordure); border-radius: 16px; }
.ce-qs .ce-qs-trajet h3 { margin: 0 0 6px; font: 700 18px/1.2 var(--font-family-title); text-transform: uppercase; color: var(--ce-texte); }
.ce-qs .ce-qs-trajet p { margin: 0; font-size: 15px; color: var(--ce-texte-2); }
/* Mentions légales : bloc discret (lien « Mentions légales » du pied : #mentions) */
.ce-qs .ce-qs-mentions { margin-top: 48px; padding: 28px 32px; background: var(--ce-fond); border-radius: 16px; font-size: 14px; color: var(--ce-texte-2); scroll-margin-top: 170px; }
.ce-qs .ce-qs-mentions .ce-qs-titre { font-size: 22px; }
.ce-qs .ce-qs-mentions p:last-child { margin: 0; }
/* Tablette puis téléphone */
@container (max-width: 900px) {
  .ce-qs .ce-qs-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-qs .ce-qs-equipe { grid-template-columns: minmax(0, 1fr); }
  .ce-qs .ce-qs-carte { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .ce-qs .ce-qs-carte img { grid-row: span 3; margin: 0; }
  .ce-qs .ce-qs-acces, .ce-qs .ce-qs-ethique { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@container (max-width: 640px) {
  .ce-qs .ce-qs-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 28px; }
  .ce-qs .ce-qs-hero h2 { font-size: 30px; }
  .ce-qs .ce-qs-hero .ce-qs-chapo { font-size: 16px; }
  .ce-qs .ce-qs-titre { font-size: 24px; }
  .ce-qs .ce-qs-section { padding: 36px 0; }
  .ce-qs .ce-qs-atouts { grid-template-columns: minmax(0, 1fr); }
  .ce-qs .ce-qs-atouts li { padding: 14px 16px; }
  .ce-qs .ce-qs-carte { grid-template-columns: 56px minmax(0, 1fr); padding: 20px; }
  .ce-qs .ce-qs-carte img { width: 56px; height: 56px; padding: 9px; }
  .ce-qs .ce-qs-retrait { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .ce-qs .ce-qs-trajets { grid-template-columns: minmax(0, 1fr); }
  .ce-qs .ce-qs-mentions { padding: 22px 20px; }
}
/* § 23 (suite) : le thème numérote les puces des listes de contenu -> aucune puce dans le bandeau des engagements */
.ce-qs ul.ce-qs-atouts, .ce-qs ul.ce-qs-atouts > li { list-style: none !important; }
.ce-qs ul.ce-qs-atouts > li { display: block; }
.ce-qs ul.ce-qs-atouts > li::marker { content: none; }

/* ===== § 24 — AMC 2026-10-07 (L16, validé sur aperçu) — Fiche produit, bloc « Ce pack contient » : pas de cadre gris autour des photos, photos 80 px (au lieu de 55), cadre de chaque ligne arrondi 8 px (boutique 1) ===== */
body#product .product-pack .card { border: 1px solid #E6E1D8; border-radius: 8px; padding: 8px 12px; }
body#product .product-pack .pack-product-container { align-items: center; }
body#product .product-pack .thumb-mask { flex: 0 0 80px; width: 80px; max-width: 80px; }
body#product .product-pack .thumb-mask .mask { border: 0; margin: 0; }
body#product .product-pack .thumb-mask img { width: 80px; height: auto; border-radius: 6px; }
/* § 24 (suite) : le thème fixe la largeur du cadre de la photo (.thumb-mask > .mask = 5.5rem) -> 80 px */
body#product .product-pack .thumb-mask .mask { width: 80px; }
/* § 24 (suite 2) : téléphone — photo 64 px, stock et quantité sur une seule ligne */
@media (max-width: 575px) {
  body#product .product-pack .card { padding: 8px 10px; }
  body#product .product-pack .thumb-mask, body#product .product-pack .thumb-mask .mask { flex: 0 0 64px; width: 64px; max-width: 64px; }
  body#product .product-pack .thumb-mask img { width: 64px; }
  body#product .product-pack .pack-product-name { font-size: 13px; min-width: 0; }
  body#product .product-pack .pack-product-quantity { white-space: nowrap; margin-left: 6px; padding-left: 8px; font-size: 13px; }
}

/* ===== § 25 — AMC 2026-10-07 (remarque utilisateur M2) — Listes de produits (rayons, recherche) =====
   Mosaïque : titre complet (le thème le coupait à 3 lignes, surtout sur téléphone : 2 produits voisins devenaient identiques).
   Mode liste : mention de stock du thème (« Derniers articles en stock ») masquée — pas à jour comme le badge de la fiche (L4). */
#products .js-product-miniature .product_name a { -webkit-line-clamp: unset !important; line-clamp: unset !important; display: block !important; overflow: visible !important; height: auto !important; max-height: none !important; }
#products .item-product-list .product-availability-list { display: none !important; }

/* ===== § 26 — AMC 2026-10-07 (remarque utilisateur M1, version B choisie) — Accueil A1 (page Axon 83) :
   horaires du service commercial dans le bouton « Être conseillé » (widget 8e10c1c) ; les 2 boutons du haut à la même hauteur (fd3308e + 8e10c1c). */
.elementor-element-8e10c1c .elementor-button-text::after { content: "Lun.–ven. 9 h–12 h / 14 h–17 h"; display: block; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; opacity: .75; }
.elementor-element.elementor-element-fd3308e .elementor-button, .elementor-element.elementor-element-8e10c1c .elementor-button { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding-top: 0; padding-bottom: 0; }

/* ===== § 27 — AMC 2026-10-07 (aperçus validés : pleine largeur, texte un peu plus grand) — Page Contact : bouton « Envoyer » orange (était vert #61CE70), texte blanc 17 px, arrondi 8 px ===== */
body#contact .elementor-contact-form button[name="submitMessage"] { background-color: var(--ce-orange) !important; color: #FFFFFF !important; border-radius: 8px !important; font-weight: 700; }
body#contact .elementor-contact-form button[name="submitMessage"], body#contact .elementor-contact-form button[name="submitMessage"] * { font-size: 17px !important; }
body#contact .elementor-contact-form button[name="submitMessage"]:hover, body#contact .elementor-contact-form button[name="submitMessage"]:focus-visible { background-color: var(--ce-orange-fonce) !important; }