/* ==========================================================================
   w3c-categorie-page.css : nouvelle page categorie W3CAM, partie « page ».
   Introduction, arbre des sous-categories, guide + sommaire, encart contact,
   FAQ, reassurance, et grille qui assemble le tout.
   (Vignettes, filtres et barre d'outils : w3c-categorie.css, autre fichier.)

   Charge par templates/_partials/head.tpl UNIQUEMENT quand le drapeau
   $w3cCatV2 est vrai ; hors du bundle CCC, avec ?v= (a changer a chaque
   modification). Tout est sous .w3c-cat-grid (la .row que product-list.tpl
   rend dans ce cas) : rien ne s'applique si la classe est absente.

   Reprend les styles de la maquette validee (classes w-*, variables --w3-*).
   Le HTML du texte (Elementor, additional_description) n'est PAS reecrit : ce
   fichier l'habille. Les regles du widget Elementor (<style> du texte) et du
   theme portent des !important : les surcharges ci-dessous les contournent par
   la specificite (#js-product-list-header, .w3c-cat-grid) et, au besoin, !important.
   Couleurs : orange #ff6501 seul, survol #df5700 ; stock #167c44 / #b45309 /
   #c62828 / #5c6773 (vignettes : autre fichier).
   ========================================================================== */

.w3c-cat-grid{
  --w3-orange:#ff6501;--w3-orange-hover:#df5700;--w3-orange-soft:#fff4ec;--w3-orange-line:#ffd9c0;
  --w3-grey:#666666;--w3-title:#4d4d4d;--w3-note:#767676;--w3-soft:#f5f5f5;--w3-line:#ececec;
  --w3-radius:6px;--w3-ease:cubic-bezier(.23,1,.32,1);
}

/* --------------------------------------------------------------------------
   1. Grille de la page
   Le HTML garde son ordre (contenu d'abord, colonne gauche ensuite). Les
   conteneurs intermediaires passent en display:contents et chaque bloc est
   place par grid-area : en-tete pleine largeur, arbre | catalogue, guide
   pleine largeur, reassurance. #left-column reste HORS du contenu que
   pm_advancedsearch4 rend en Ajax (son bloc de filtres n'est donc jamais
   duplique).
   -------------------------------------------------------------------------- */
.row.w3c-cat-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "side" "prods" "foot" "rea";
  gap:0 32px;
  align-items:start;
  margin-left:0;margin-right:0;
}
.w3c-cat-grid #content-wrapper,
.w3c-cat-grid #PM_ASearchResults,
.w3c-cat-grid #PM_ASearchResultsInner,
.w3c-cat-grid #main{display:contents}
.w3c-cat-grid #js-product-list-header{grid-area:head;min-width:0}
.w3c-cat-grid #left-column{grid-area:side;flex:none;width:auto;max-width:none;min-width:0;padding:0;box-sizing:border-box}
.w3c-cat-grid #products{grid-area:prods;min-width:0}
.w3c-cat-grid #js-product-list-footer{grid-area:foot;min-width:0}
.w3c-cat-grid .w3c-reassurance{grid-area:rea}

/* Deux colonnes seulement s'il y a quelque chose a mettre a gauche (arbre ou
   bloc de filtres) ; sans :has(), la colonne gauche reste au-dessus du catalogue. */
@media (min-width:861px){
  .row.w3c-cat-grid:has(#left-column .block-categories),
  html:not(.w3c-cat-js) .row.w3c-cat-grid:has(#left-column .PM_ASBlockOutput){
    grid-template-columns:240px minmax(0,1fr);
    grid-template-areas:"head head" "side prods" "foot foot" "rea rea";
  }
}

.w3c-cat-grid :focus-visible{outline:2px solid var(--w3-orange);outline-offset:2px}
.w3c-cat-grid ::selection{background:var(--w3-orange-soft);color:var(--w3-title)}
.w3c-cat-grid a,.w3c-cat-grid button,.w3c-cat-grid summary,.w3c-cat-grid label{-webkit-tap-highlight-color:transparent}
/* defilement doux du sommaire : en JS (w3c-categorie-page.js), plus de scroll-behavior global sur html */

/* --------------------------------------------------------------------------
   2. Introduction (.block-category.w3c-intro, rendue par category-header.tpl)
   Bandeau Elementor : on garde le h1 et le texte, on masque l'image et le degrade.
   Pages SEO d'Advanced Search 4 : leur propre en-tete (h1 + description) recoit
   le meme titre.
   -------------------------------------------------------------------------- */
.w3c-cat-grid .w3c-intro{box-sizing:border-box;padding:32px 0 20px;background:none;border:0;color:var(--w3-grey);font-size:15px;line-height:1.7}
.w3c-cat-grid .w3c-intro:not(:has(*)){display:none}

/* Elementor : a plat */
#js-product-list-header .w3c-intro .elementor-section{background:none!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:0!important;min-height:0!important}
#js-product-list-header .w3c-intro .elementor-background-overlay{display:none!important}
#js-product-list-header .w3c-intro .elementor-container{box-sizing:border-box;width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important}
#js-product-list-header .w3c-intro .elementor-row,
#js-product-list-header .w3c-intro .elementor-column-wrap,
#js-product-list-header .w3c-intro .elementor-widget-wrap{display:block!important;width:auto!important;margin:0!important;padding:0!important}
#js-product-list-header .w3c-intro .elementor-column{float:none!important;width:100%!important;padding:0!important}
#js-product-list-header .w3c-intro .elementor-element-populated{padding:0!important;background:none!important;border-radius:0!important}
#js-product-list-header .w3c-intro .elementor-widget-container{margin:0!important;padding:0!important}
#js-product-list-header .w3c-intro .elementor-widget:not(:last-child){margin-bottom:0!important}
#js-product-list-header .w3c-intro .elementor-widget-image,
#js-product-list-header .w3c-intro .elementor-column:has(.elementor-widget-image){display:none!important}

/* Titre de page */
#js-product-list-header .w3c-intro h1,
#js-product-list-header h1.h1{
  margin:0 0 18px!important;padding:0!important;max-width:20em;
  background:none!important;-webkit-text-fill-color:currentColor!important;
  color:var(--w3-title)!important;
  font-size:44px!important;font-weight:300!important;line-height:1.15!important;
  letter-spacing:-.02em!important;text-transform:none!important;text-align:left!important;
  text-wrap:balance;overflow-wrap:break-word;
}
@media (max-width:767px){
  #js-product-list-header .w3c-intro h1,
  #js-product-list-header h1.h1{font-size:32px!important}
}

/* Texte : premier paragraphe visible, la suite dans <details class="w-more"> (JS) */
.w3c-cat-grid .w3c-intro .w3c-cat,
.w3c-cat-grid .w3c-intro .elementor-text-editor{max-width:820px;margin:0;color:var(--w3-grey);font-size:15px;line-height:1.7}
.w3c-cat-grid .w3c-intro .w3c-cat p,
.w3c-cat-grid .w3c-intro .elementor-text-editor p{margin:0 0 12px;color:var(--w3-grey);font-size:15px;line-height:1.7}
.w3c-cat-grid .w3c-intro .w3c-cat strong,
.w3c-cat-grid .w3c-intro .elementor-text-editor strong{color:var(--w3-title);font-weight:600}
.w3c-cat-grid .w3c-intro .w3c-cat ul{margin:0 0 12px!important}
.w3c-cat-grid .w3c-intro .w3c-cat ul li{font-size:15px;line-height:1.65}
.w3c-cat-grid .w3c-intro .w3c-cat a:not(.w3c-brand),
.w3c-cat-grid .w3c-intro .elementor-text-editor a,
.w3c-cat-grid #js-product-list-header .block-category a:not(.w3c-brand){color:var(--w3-orange)!important;font-weight:inherit!important;text-decoration:underline!important;text-underline-offset:2px}
.w3c-cat-grid .w3c-intro a:not(.w3c-brand):hover{color:var(--w3-orange-hover)!important;text-decoration:underline!important}
.w3c-cat-grid .w3c-intro .w3c-more-cta{display:none}

.w3c-cat-grid .w-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-top:4px;color:var(--w3-orange);font-size:13px;font-weight:600;list-style:none;cursor:pointer}
.w3c-cat-grid .w-more>summary::-webkit-details-marker{display:none}
.w3c-cat-grid .w-more .w-more-open,
.w3c-cat-grid .w-more[open] .w-more-closed{display:none}
.w3c-cat-grid .w-more[open] .w-more-open{display:inline}
.w3c-cat-grid .w-more .w-chev{flex:0 0 auto;transition:transform .2s var(--w3-ease)}
.w3c-cat-grid .w-more[open] .w-chev{transform:rotate(180deg)}
.w3c-cat-grid .w-more-body{padding-top:8px}

/* Marques / familles (dans « Lire la suite ») */
.w3c-cat-grid .w3c-intro .w3c-cat h2.w3c-explore{margin:20px 0 16px;padding:0;color:var(--w3-title);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none}
#js-product-list-header .w3c-intro .w3c-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0 0 4px}
#js-product-list-header .w3c-intro .w3c-brand{display:flex;flex-direction:column;gap:4px;box-sizing:border-box;min-height:108px;padding:18px 20px;background:#fff;border:1px solid var(--w3-line);border-radius:var(--w3-radius);box-shadow:none;text-decoration:none!important;transition:background-color .2s ease,border-color .2s ease}
#js-product-list-header .w3c-intro .w3c-brand h3,
#js-product-list-header .w3c-intro .w3c-brand h4{margin:0;color:var(--w3-title);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.04em;text-transform:none}
#js-product-list-header .w3c-intro .w3c-brand p{margin:0;color:var(--w3-grey);font-size:13px;line-height:1.5}
@media (hover:hover) and (pointer:fine){
  #js-product-list-header .w3c-intro .w3c-brand:hover{background:var(--w3-orange-soft);border-color:var(--w3-orange-line);box-shadow:none}
}
@media (max-width:767px){
  #js-product-list-header .w3c-intro .w3c-brands{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #js-product-list-header .w3c-intro .w3c-brand{min-height:48px;padding:10px 12px;justify-content:center}
  #js-product-list-header .w3c-intro .w3c-brand h3,
  #js-product-list-header .w3c-intro .w3c-brand h4{font-size:14px;overflow-wrap:anywhere}
  #js-product-list-header .w3c-intro .w3c-brand p{display:none}
}

/* Pages SEO Advanced Search 4 : leur description d'en-tete */
.w3c-cat-grid #js-product-list-header .block-category.card{background:none;border:0;border-radius:0;box-shadow:none;padding:32px 0 20px;margin:0}
.w3c-cat-grid #js-product-list-header .block-category.card .card-block,
.w3c-cat-grid #js-product-list-header .block-category-inner{padding:0}
.w3c-cat-grid #js-product-list-header #category-description{max-width:820px;color:var(--w3-grey);font-size:15px;line-height:1.7}

/* --------------------------------------------------------------------------
   3. Arbre des sous-categories (#left-column .block-categories)
   Meme HTML qu'avant (le gabarit ps_categorytree n'est pas touche : son rendu
   est mis en cache par Smarty). Carte repliable sous 861 px.
   -------------------------------------------------------------------------- */
.w3c-cat-grid #left-column{padding-top:16px}
.w3c-cat-grid #left-column .block-categories{margin:0 0 16px;padding:0;background:#fff;border:1px solid var(--w3-line);border-radius:var(--w3-radius);box-shadow:none}
.w3c-cat-grid #left-column .block-categories .clearfix:empty{display:none}
.w3c-cat-grid #left-column .block-categories .title_block{box-sizing:border-box;align-items:center;justify-content:space-between;gap:8px;min-height:52px;margin:0;padding:0 16px;background:none;border:0;color:var(--w3-title);font-size:14px;font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none;text-decoration:none}
/* le theme dessine son propre chevron en ::before / ::after sur le titre : on le retire, le notre est ci-dessous */
.w3c-cat-grid #left-column .block-categories .title_block::before{content:none!important;display:none!important}
.w3c-cat-grid #left-column .block-categories .category-top-menu{margin:0;padding:0 8px 12px;list-style:none;background:none;border:0}
.w3c-cat-grid #left-column .block-categories .category-top-menu>li{margin:0;padding:0;list-style:none}
.w3c-cat-grid #left-column .block-categories .category-sub-menu{margin:0;padding:0;list-style:none}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li{position:relative;margin:0;padding:0;border:0;list-style:none}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li>a{display:flex;align-items:center;box-sizing:border-box;min-height:36px;padding:6px 8px;border-radius:var(--w3-radius);color:var(--w3-grey);font-size:13px;font-weight:400;line-height:1.35;text-decoration:none;transition:background-color .2s ease}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li:has(>.icon-collapse)>a{padding-right:36px}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li[data-depth="0"]>a{min-height:40px;color:var(--w3-title);font-weight:500}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li[data-depth="2"]>a,
.w3c-cat-grid #left-column .block-categories .category-sub-menu li[data-depth="3"]>a{min-height:32px;font-size:12.5px}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li .category-sub-menu{margin:0 0 4px 12px;padding:0 0 0 10px;border-left:1px solid #f0f0f0}
.w3c-cat-grid #left-column .block-categories .category-sub-menu .icon-collapse{position:absolute;right:4px;top:6px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:var(--w3-radius);color:var(--w3-grey);font-size:14px;line-height:1;cursor:pointer;transition:transform .2s var(--w3-ease),color .2s ease}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li[data-depth="1"]>.icon-collapse{top:4px}
.w3c-cat-grid #left-column .block-categories .category-sub-menu li[data-depth="2"]>.icon-collapse{top:2px}
.w3c-cat-grid #left-column .block-categories .category-sub-menu .icon-collapse[aria-expanded="true"]{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .w3c-cat-grid #left-column .block-categories .category-sub-menu li>a:hover,
  .w3c-cat-grid #left-column .block-categories .category-sub-menu li>a:focus-visible{background:var(--w3-orange-soft);color:var(--w3-orange)}
  .w3c-cat-grid #left-column .block-categories .category-sub-menu .icon-collapse:hover{color:var(--w3-orange)}
}

/* >= 861 px : titre fixe + liste toujours visible ; en dessous : carte repliable */
@media (min-width:861px){
  .w3c-cat-grid #left-column .block-categories p.title_block{display:flex!important}
  .w3c-cat-grid #left-column .block-categories a.title_block{display:none!important}
  .w3c-cat-grid #left-column .block-categories #category-top-menu{display:block!important;height:auto!important;visibility:visible!important}
}
@media (max-width:860px){
  .w3c-cat-grid #left-column{padding-top:0}
  .w3c-cat-grid #left-column .block-categories p.title_block{display:none!important}
  .w3c-cat-grid #left-column .block-categories a.title_block{display:flex!important;cursor:pointer}
  .w3c-cat-grid #left-column .block-categories a.title_block::after{content:"";flex:0 0 14px;width:14px;height:14px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");transition:transform .2s var(--w3-ease)}
  .w3c-cat-grid #left-column .block-categories a.title_block[aria-expanded="true"]::after{transform:rotate(180deg)}
  .w3c-cat-grid #left-column .block-categories #category-top-menu.show{border-top:1px solid #f2f2f2;padding-top:8px}
}

/* --------------------------------------------------------------------------
   4. Pied de page : guide, sommaire, encart contact, FAQ
   .w3c-foot = #js-product-list-footer ; .w3c-guide = description additionnelle
   (HTML d'origine : .w3c-cat#w3c-more-info, h2 titre, h3/h2 sections, .w3c-info,
   .w3c-faq). Le sommaire (nav.w3c-toc) et les classes .w3c-guide--toc,
   .w3c-guide-title, .w3c-faq-title sont poses par w3c-categorie-page.js.
   Marges en HAUT seulement : le meme rendu en bloc et en grille.
   -------------------------------------------------------------------------- */
html:not(.w3c-hide-cat-text) body:not(#module-pm_advancedsearch4-searchresults) .w3c-foot:has(.w3c-guide){padding:56px 0;border-top:1px solid var(--w3-line)}
.w3c-cat-grid .w3c-guide{box-sizing:border-box;max-width:820px;margin:0;padding:0;color:var(--w3-grey);font-size:15px;line-height:1.75}
.w3c-cat-grid .w3c-guide.w3c-guide--toc{max-width:none}

/* Titre du guide (h2 d'origine, ou h1 pour les rares categories dont le h1 vit dans le guide) */
.w3c-cat-grid .w3c-guide .w3c-cat>h2:first-child:has(+ hr.w3c-rule),
.w3c-cat-grid .w3c-guide .w3c-guide-title,
.w3c-cat-grid .w3c-guide>h1,
.w3c-cat-grid .w3c-guide .w3c-cat>h1:first-child{margin:0;padding:0;max-width:760px;color:var(--w3-title);font-size:32px;font-weight:300;line-height:1.2;letter-spacing:-.01em;text-transform:none}
/* h1 du guide : le contenu porte un style en ligne (couleur, 1.6rem, 500), donc !important */
.w3c-cat-grid .w3c-guide>h1,
.w3c-cat-grid .w3c-guide .w3c-cat>h1:first-child{margin:0!important;color:var(--w3-title)!important;font-size:32px!important;font-weight:300!important;line-height:1.2!important}
.w3c-cat-grid .w3c-guide hr.w3c-rule{display:none}
/* Le premier element du guide ne decolle pas du filet haut (ni du sommaire place a cote) */
.w3c-cat-grid .w3c-guide>:first-child,
.w3c-cat-grid .w3c-guide>:first-child>:first-child,
.w3c-cat-grid .w3c-guide .w3c-toc--top+*,
.w3c-cat-grid .w3c-guide .w3c-toc--top+*>:first-child{margin-top:0}

/* Sections */
.w3c-cat-grid .w3c-guide h2,
.w3c-cat-grid .w3c-guide h3{margin:40px 0 0;padding:0;color:var(--w3-title);font-size:20px;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none;scroll-margin-top:24px}
.w3c-cat-grid .w3c-guide h4{margin:20px 0 0;padding:0;color:var(--w3-title);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none}
.w3c-cat-grid .w3c-guide :is(h2,h3,h4)+:is(p,ul,ol,div,table){margin-top:14px}
.w3c-cat-grid .w3c-guide :is(p,ul,ol,table,figure,.w3c-tbl-wrap,.w3c-usecases,.w3c-brands){margin:14px 0 0;color:var(--w3-grey);font-size:15px;line-height:1.75}
.w3c-cat-grid .w3c-guide p>em{font-size:13px}
.w3c-cat-grid .w3c-guide strong{color:var(--w3-title);font-weight:600}
.w3c-cat-grid .w3c-guide a{color:var(--w3-orange)!important;font-weight:inherit!important;text-decoration:underline!important;text-underline-offset:2px}
.w3c-cat-grid .w3c-guide a:hover{color:var(--w3-orange-hover)!important;text-decoration:underline!important}
.w3c-cat-grid .w3c-guide ul{padding:0!important;list-style:none!important}
.w3c-cat-grid .w3c-guide ul li{margin:10px 0 0!important;font-size:15px;line-height:1.65}
.w3c-cat-grid .w3c-guide ul li:first-child{margin-top:0!important}
.w3c-cat-grid .w3c-guide ol{padding-left:22px}
.w3c-cat-grid .w3c-guide ol li{margin:10px 0 0;padding-left:4px}
.w3c-cat-grid .w3c-guide img,
.w3c-cat-grid .w3c-guide svg{max-width:100%;height:auto}

/* Tableaux : cadre arrondi, defilement horizontal sur petit ecran */
.w3c-cat-grid .w3c-guide table.w3c-tbl{width:100%;margin:14px 0 0;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--w3-line);border-radius:var(--w3-radius);overflow:hidden;font-size:13px;line-height:1.5}
.w3c-cat-grid .w3c-guide table.w3c-tbl th,
.w3c-cat-grid .w3c-guide table.w3c-tbl td{padding:12px 16px;border:0;border-bottom:1px solid #f2f2f2;background:none;color:var(--w3-grey);font-size:13px;text-align:left;text-transform:none;letter-spacing:0;vertical-align:top}
.w3c-cat-grid .w3c-guide table.w3c-tbl th{border-bottom:1px solid var(--w3-line);color:var(--w3-title);font-weight:600}
.w3c-cat-grid .w3c-guide table.w3c-tbl tr:last-child td{border-bottom:0}
.w3c-cat-grid .w3c-guide table.w3c-tbl tr:nth-child(even) td{background:none}
.w3c-cat-grid .w3c-guide .w3c-tbl-wrap{overflow-x:auto;border:1px solid var(--w3-line);border-radius:var(--w3-radius);background:#fff;-webkit-overflow-scrolling:touch}
.w3c-cat-grid .w3c-guide .w3c-tbl-wrap table.w3c-tbl{margin:0;border:0;border-radius:0;min-width:100%;width:max-content}
@media (max-width:767px){
  .w3c-cat-grid .w3c-guide>table.w3c-tbl,
  .w3c-cat-grid .w3c-guide .w3c-cat>table.w3c-tbl{display:block;overflow-x:auto}
}

/* Cartes (cas d'usage, familles) */
.w3c-cat-grid .w3c-guide .w3c-usecases,
.w3c-cat-grid .w3c-guide .w3c-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.w3c-cat-grid .w3c-guide .w3c-uc{margin:0;padding:20px;background:var(--w3-soft);border:0;border-radius:var(--w3-radius)}
.w3c-cat-grid .w3c-guide .w3c-uc h4{margin:0 0 6px;color:var(--w3-title);font-size:15px;font-weight:600}
.w3c-cat-grid .w3c-guide .w3c-uc p{margin:0;font-size:13px;line-height:1.6}
.w3c-cat-grid .w3c-guide .w3c-uc h4 a{color:inherit!important;text-decoration:none!important}
.w3c-cat-grid .w3c-guide .w3c-brand{display:flex;flex-direction:column;gap:4px;min-height:108px;padding:18px 20px;box-sizing:border-box;background:#fff;border:1px solid var(--w3-line);border-radius:var(--w3-radius);text-decoration:none!important}
.w3c-cat-grid .w3c-guide .w3c-brand h3,
.w3c-cat-grid .w3c-guide .w3c-brand h4{margin:0;font-size:15px;font-weight:600;letter-spacing:.04em}
.w3c-cat-grid .w3c-guide .w3c-brand p{margin:0;font-size:13px;line-height:1.5}

/* Encart contact : l'encadre propre a la categorie (.w3c-info), s'il existe */
.w3c-cat-grid .w3c-guide .w3c-info{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;box-sizing:border-box;margin:40px 0 0;padding:28px;background:var(--w3-orange-soft);border:0;border-radius:var(--w3-radius)}
.w3c-cat-grid .w3c-guide .w3c-info p{flex:1 1 320px;min-width:0;margin:0;color:var(--w3-grey);font-size:14px;line-height:1.65}
.w3c-cat-grid .w3c-guide .w3c-info p>strong:first-child{display:block;margin:0 0 6px;color:var(--w3-title);font-size:18px;font-weight:500;line-height:1.4}
.w3c-cat-grid .w3c-guide .w3c-info p+p{margin-top:8px}
.w3c-cat-grid .w3c-guide .w3c-info-cta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:48px;padding:0 28px;border-radius:var(--w3-radius);background:var(--w3-orange);color:#fff!important;font-size:15px;font-weight:600;text-decoration:none!important;white-space:nowrap;transition:background-color .2s ease,transform .16s var(--w3-ease)}
.w3c-cat-grid .w3c-guide .w3c-info-cta:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .w3c-cat-grid .w3c-guide .w3c-info-cta:hover{background:var(--w3-orange-hover);color:#fff!important}
}

/* FAQ : meme balisage (.w3c-faq-item > label > input + .w3c-q-text, .w3c-answer), lu par w3camseoschema.
   Case a cocher + :has() comme avant ; seul l'habillage change. */
.w3c-cat-grid .w3c-guide .w3c-faq-title{margin-top:56px;padding-top:56px;border-top:1px solid var(--w3-line);font-size:32px;font-weight:300;line-height:1.2;letter-spacing:-.01em}
.w3c-cat-grid .w3c-guide .w3c-faq{margin:24px 0 0}
/* FAQ des autres balisages (categories 736, 766-772 : questions en texte brut, pas de .w3c-faq-item) : laissees telles quelles */
.w3c-cat-grid .w3c-guide .w3c-faq:has(>.w3c-faq-item){display:flex;flex-direction:column;gap:8px}
.w3c-cat-grid .w3c-guide .w3c-faq-item{position:relative;margin:0;background:#fff;border:1px solid var(--w3-line);border-radius:var(--w3-radius)}
.w3c-cat-grid .w3c-guide .w3c-faq-item label{display:flex;align-items:center;justify-content:space-between;gap:16px;box-sizing:border-box;min-height:56px;margin:0;padding:14px 20px;background:none;border:0;border-radius:var(--w3-radius);color:var(--w3-title);font-size:15px;font-weight:500;line-height:1.4;cursor:pointer;transition:color .2s ease}
.w3c-cat-grid .w3c-guide .w3c-faq-item label .w3c-q-text{flex:1;min-width:0}
.w3c-cat-grid .w3c-guide .w3c-faq-item label::after,
.w3c-cat-grid .w3c-guide .w3c-faq-item label:has(input:checked)::after{content:""!important;flex:0 0 18px;width:18px;height:18px;margin:0;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6501' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")!important;font-size:0!important;transition:transform .2s var(--w3-ease)}
.w3c-cat-grid .w3c-guide .w3c-faq-item label:has(input:checked)::after{transform:rotate(45deg)}
.w3c-cat-grid .w3c-guide .w3c-faq-item label:has(input:checked){background:none;border-radius:var(--w3-radius) var(--w3-radius) 0 0;color:var(--w3-title)}
.w3c-cat-grid .w3c-guide .w3c-faq-item label:has(input:focus-visible){outline:2px solid var(--w3-orange);outline-offset:2px}
.w3c-cat-grid .w3c-guide .w3c-faq-item .w3c-answer{max-height:0;margin:0;padding:0 20px;overflow:hidden;background:none;border:0;border-radius:0;transition:max-height .3s ease,padding .3s ease}
.w3c-cat-grid .w3c-guide .w3c-faq-item:has(input:checked) .w3c-answer{max-height:2000px;padding:0 20px 20px}
.w3c-cat-grid .w3c-guide .w3c-faq-item .w3c-answer p{margin:0 0 8px;color:var(--w3-grey);font-size:14px;line-height:1.75}
.w3c-cat-grid .w3c-guide .w3c-faq-item .w3c-answer p:last-child{margin-bottom:0}
.w3c-cat-grid .w3c-guide .w3c-faq-item .w3c-answer ul{margin:6px 0 0!important}
.w3c-cat-grid .w3c-guide .w3c-faq-item .w3c-answer ul li{font-size:14px}
@media (hover:hover) and (pointer:fine){
  .w3c-cat-grid .w3c-guide .w3c-faq-item label:hover{color:var(--w3-orange);background:none}
}

/* Sommaire : nav.w3c-toc (JS), colonne de gauche sur grand ecran */
.w3c-cat-grid .w3c-toc{box-sizing:border-box;min-width:0;margin:24px 0 0;padding:20px;background:var(--w3-soft);border-radius:var(--w3-radius)}
.w3c-cat-grid .w3c-toc>details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;color:var(--w3-title);font-size:13px;font-weight:600;line-height:1.4;list-style:none;cursor:pointer}
.w3c-cat-grid .w3c-toc>details>summary::-webkit-details-marker{display:none}
.w3c-cat-grid .w3c-toc>details>summary::after{content:"";flex:0 0 14px;width:14px;height:14px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");transition:transform .2s var(--w3-ease)}
.w3c-cat-grid .w3c-toc>details[open]>summary::after{transform:rotate(180deg)}
.w3c-cat-grid .w3c-toc ol{display:flex;flex-direction:column;gap:2px;margin:10px 0 0;padding:0;list-style:none}
.w3c-cat-grid .w3c-toc li{margin:0;padding:0}
.w3c-cat-grid .w3c-toc a{display:block;padding:6px 0;color:var(--w3-grey)!important;font-size:13px;font-weight:400!important;line-height:1.45;text-decoration:none!important}
.w3c-cat-grid .w3c-toc li.w3c-toc-l2 a{padding-left:14px}
@media (hover:hover) and (pointer:fine){
  .w3c-cat-grid .w3c-toc a:hover{color:var(--w3-orange)!important}
}

@media (min-width:900px){
  .w3c-cat-grid .w3c-guide.w3c-guide--toc{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,820px);column-gap:48px;row-gap:0;align-items:start}
  .w3c-cat-grid .w3c-guide.w3c-guide--toc .w3c-cat{display:contents}
  .w3c-cat-grid .w3c-guide.w3c-guide--toc>*,
  .w3c-cat-grid .w3c-guide.w3c-guide--toc .w3c-cat>*{grid-column:2}
  .w3c-cat-grid .w3c-guide.w3c-guide--toc .w3c-guide-title{grid-column:1/-1}
  .w3c-cat-grid .w3c-guide.w3c-guide--toc .w3c-toc{grid-column:1;grid-row:2/span 60;margin-top:40px}
  .w3c-cat-grid .w3c-guide.w3c-guide--toc .w3c-toc.w3c-toc--top{grid-row:1/span 60;margin-top:0}
  .w3c-cat-grid .w3c-toc>details>summary{pointer-events:none;cursor:default}
  .w3c-cat-grid .w3c-toc>details>summary::after{display:none}
}
@media (max-width:899px){
  .w3c-cat-grid .w3c-guide.w3c-guide--toc{max-width:820px}
}

/* --------------------------------------------------------------------------
   5. Reassurance (rendue par product-list.tpl)
   -------------------------------------------------------------------------- */
.w3c-cat-grid .w3c-reassurance{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0;padding:8px 0 56px;list-style:none}
.w3c-cat-grid .w3c-reassurance li{display:flex;flex-direction:column;gap:2px;margin:0;padding:20px;background:var(--w3-soft);border-radius:var(--w3-radius)}
.w3c-cat-grid .w3c-reassurance strong{color:var(--w3-title);font-size:14px;font-weight:500;line-height:1.4}
.w3c-cat-grid .w3c-reassurance span{color:var(--w3-grey);font-size:13px;line-height:1.5}

/* --------------------------------------------------------------------------
   6. Mouvement reduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .w3c-cat-grid .w-more .w-chev,
  .w3c-cat-grid .w3c-toc>details>summary::after,
  .w3c-cat-grid #left-column .block-categories a.title_block::after,
  .w3c-cat-grid #left-column .block-categories .category-sub-menu .icon-collapse,
  .w3c-cat-grid #left-column .block-categories .category-sub-menu li>a,
  .w3c-cat-grid .w3c-guide .w3c-faq-item label,
  .w3c-cat-grid .w3c-guide .w3c-faq-item label::after,
  .w3c-cat-grid .w3c-guide .w3c-faq-item .w3c-answer,
  .w3c-cat-grid .w3c-guide .w3c-info-cta,
  #js-product-list-header .w3c-intro .w3c-brand{transition:none}
  .w3c-cat-grid .w3c-guide .w3c-info-cta:active{transform:none}
}

/* [2026-11-09] Bandeau de reassurance retire (product-list.tpl) : on garde l'espace
   qu'il laissait avant le pied de page (56px avec la marge existante). */
.row.w3c-cat-grid{padding-bottom:36px}