/* =====================================================================
   Optimisation page catégorie — Pergola sur mesure (cat 15)
   Thème enfant warehousechild. Scopé à body.op-cat-listing. Mobile-first.
   Design V3 épuré, cohérent fiche produit. Contenu = champ Description (SEO).
   ===================================================================== */
body.op-cat-listing{
  --navy:#1f2d3d; --ink:#1a1f24; --muted:#5f666c; --faint:#949aa0;
  --line:#e4e6e3; --line-2:#d7dad6; --brand:#1f2d3d; --brand-soft:#eef0f3;
  --signal:#c0402c; --good:#2e7d5b; --radius:14px;
  --shadow:0 1px 2px rgba(20,28,36,.04),0 12px 34px rgba(20,28,36,.06);
  --shadow-sm:0 1px 2px rgba(20,28,36,.05),0 3px 12px rgba(20,28,36,.04);
  background:#eff0ee;
}
/* Pleine largeur pour la cat 15 : on masque la colonne gauche et on étend le contenu */
body.op-cat-listing #left-column{display:none !important;}
body.op-cat-listing #content-wrapper{flex:0 0 100% !important;max-width:100% !important;width:100% !important;}
body.op-cat-listing .op-cat15-content,body.op-cat-listing .op-cat{width:100%;}
/* Le contenu Description prend toute la largeur, hors gouttières RTE */
body.op-cat-listing .op-cat{color:var(--ink);line-height:1.6;max-width:1240px;margin:0 auto;padding:0 20px;box-sizing:border-box;}
body.op-cat-listing .op-cat *{box-sizing:border-box;}
body.op-cat-listing .op-cat h1,
body.op-cat-listing .op-cat h2,
body.op-cat-listing .op-cat h3{letter-spacing:-.02em;color:var(--ink);font-weight:800;line-height:1.15;}
body.op-cat-listing .op-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
body.op-cat-listing .op-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;
  font-weight:700;font-size:15px;padding:14px 22px;min-height:48px;text-decoration:none;transition:.16s;cursor:pointer;border:0;}
body.op-cat-listing .op-btn-primary{background:var(--signal);color:#fff;}
body.op-cat-listing .op-btn-dark{background:var(--navy);color:#fff;}
body.op-cat-listing .op-btn-ghost{background:transparent;color:var(--navy);border:1.4px solid var(--line-2);}
body.op-cat-listing .op-btn-ghost-light{background:transparent;color:#fff;border:1.4px solid rgba(255,255,255,.35);}

/* Hero */
body.op-cat-listing .op-hero{display:grid;grid-template-columns:1fr;gap:20px;padding:14px 0 26px;}
body.op-cat-listing .op-hero-media{order:-1;position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/11;background:#e7e9e6;}
body.op-cat-listing .op-hero-media img{width:100%;height:100%;object-fit:cover;}
body.op-cat-listing .op-hero-chip{position:absolute;top:12px;left:12px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;box-shadow:var(--shadow-sm);}
body.op-cat-listing .op-hero h1{font-size:30px;margin:10px 0 14px;text-wrap:balance;}
body.op-cat-listing .op-lead{font-size:16px;color:var(--muted);margin:0 0 18px;}
body.op-cat-listing .op-lead strong{color:var(--ink);}
body.op-cat-listing .op-assur{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:10px 18px;}
body.op-cat-listing .op-assur li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--navy);}
body.op-cat-listing .op-assur li::before{content:"";width:15px;height:15px;flex:0 0 auto;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='2.6'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");}
body.op-cat-listing .op-hero-cta{display:flex;flex-direction:column;gap:10px;}

/* Reassurance strip */
body.op-cat-listing .op-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 4px;}
body.op-cat-listing .op-rc b{display:block;font-size:13.5px;}
body.op-cat-listing .op-rc span{color:var(--muted);font-size:12px;}

/* Sous-nav ancres */
body.op-cat-listing .op-toc{position:sticky;top:0;z-index:20;display:flex;gap:18px;overflow-x:auto;
  background:rgba(239,240,238,.92);backdrop-filter:blur(10px);padding:13px 2px;margin:14px 0;font-size:14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;}
body.op-cat-listing .op-toc a{white-space:nowrap;color:var(--muted);font-weight:600;text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent;}
body.op-cat-listing .op-toc a:hover{color:var(--brand);border-color:var(--brand);}

/* Sections */
body.op-cat-listing .op-sec{padding:36px 0;scroll-margin-top:60px;}
/* Section "alt" : contenu aligné comme les autres, mais fond étendu pleine largeur
   (box-shadow + clip-path = pas de débordement ni de scroll horizontal). */
body.op-cat-listing .op-sec-alt{background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);}
body.op-cat-listing .op-sec-head{max-width:680px;margin:0 0 22px;}
body.op-cat-listing .op-sec-head h2{font-size:23px;margin:8px 0 8px;}
body.op-cat-listing .op-sec-head p{color:var(--muted);margin:0;font-size:15px;}
body.op-cat-listing .op-prose{max-width:760px;margin:0 0 20px;}
body.op-cat-listing .op-prose p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 14px;}
body.op-cat-listing .op-prose strong{color:var(--ink);}

/* Filtres */
body.op-cat-listing .op-filterbar{margin:0 0 18px;}
body.op-cat-listing .op-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
body.op-cat-listing .op-chip{cursor:pointer;border:1.4px solid var(--line-2);background:#fff;border-radius:999px;padding:9px 15px;
  font-weight:600;font-size:13.5px;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center;}
body.op-cat-listing .op-chip.op-active{background:var(--navy);border-color:var(--navy);color:#fff;}
body.op-cat-listing .op-sort{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-top:12px;}
body.op-cat-listing .op-sort select{font:inherit;padding:9px 12px;border:1.4px solid var(--line-2);border-radius:10px;background:#fff;min-height:42px;}

/* Grille produits (déplacée dans #op-grid-slot) */
body.op-cat-listing #op-grid-slot .products{display:grid !important;grid-template-columns:1fr 1fr;gap:12px;margin:0;}
body.op-cat-listing #op-grid-slot .js-product-miniature-wrapper{width:auto !important;max-width:none !important;flex:none !important;padding:0 !important;margin:0 !important;}
body.op-cat-listing #op-grid-slot .js-product-miniature-wrapper.op-hide{display:none !important;}
/* Cartes reconstruites par JS (.op-card) — contrôle total, aucun conflit thème */
body.op-cat-listing #op-grid-slot .op-card{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none !important;color:inherit;transition:box-shadow .18s,transform .18s;}
body.op-cat-listing #op-grid-slot .op-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
body.op-cat-listing #op-grid-slot .op-card-media{position:relative;width:100%;aspect-ratio:1/1;background:#f2f3f1;overflow:hidden;}
/* Fallback Safari iOS sans support aspect-ratio : réserve la hauteur via padding */
@supports not (aspect-ratio: 1 / 1){
  body.op-cat-listing #op-grid-slot .op-card-media{height:0;padding-bottom:100%;}
}
body.op-cat-listing #op-grid-slot .op-card-media img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
body.op-cat-listing #op-grid-slot .op-card:hover .op-card-media img{transform:scale(1.04);}
body.op-cat-listing #op-grid-slot .op-card-flag{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.95);
  color:var(--navy);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:7px;}
body.op-cat-listing #op-grid-slot .op-card-flag.op-flag-promo{left:auto;right:10px;background:var(--signal);color:#fff;}
body.op-cat-listing #op-grid-slot .op-card-body{display:flex;flex-direction:column;gap:6px;padding:13px 14px 15px;flex:1;}
body.op-cat-listing #op-grid-slot .op-card .op-type{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint) !important;padding:0;margin:0;}
body.op-cat-listing #op-grid-slot .op-card-title{font-size:14px;line-height:1.35;font-weight:600;color:var(--ink) !important;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.op-cat-listing #op-grid-slot .op-card-price{margin-top:auto;display:flex;flex-direction:column;line-height:1.2;}
body.op-cat-listing #op-grid-slot .op-card .op-from{font-size:11px;color:var(--faint) !important;font-weight:600;}
body.op-cat-listing #op-grid-slot .op-card .op-now{font-size:19px;font-weight:800;color:var(--signal) !important;letter-spacing:-.02em;}
body.op-cat-listing #op-grid-slot .op-card .op-dev{font-size:15px;font-weight:700;color:var(--navy) !important;}
body.op-cat-listing #op-grid-slot .op-card .op-configurer{margin-top:8px;color:var(--navy) !important;font-weight:700;font-size:13.5px;}
body.op-cat-listing #op-grid-slot .op-card:hover .op-configurer{color:var(--signal) !important;}

/* Quiz */
body.op-cat-listing .op-quiz{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px;box-shadow:var(--shadow-sm);}
body.op-cat-listing .op-quiz-q{margin-bottom:18px;}
body.op-cat-listing .op-quiz-q > label{display:block;font-weight:700;margin-bottom:10px;font-size:14.5px;}
body.op-cat-listing .op-quiz-opts{display:flex;gap:8px;flex-wrap:wrap;}
body.op-cat-listing .op-quiz-opt{cursor:pointer;border:1.4px solid var(--line-2);background:#fff;border-radius:10px;padding:11px 14px;font-weight:600;font-size:13.5px;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;}
body.op-cat-listing .op-quiz-opt.op-sel{border-color:var(--navy);background:var(--brand-soft);color:var(--navy);}
body.op-cat-listing .op-quiz-result{margin-top:6px;padding:18px;border-radius:12px;background:var(--brand-soft);border:1px solid #dfe3e8;display:none;}
body.op-cat-listing .op-quiz-result.op-show{display:block;}
body.op-cat-listing .op-r-name{font-weight:800;color:var(--navy);font-size:16px;}
body.op-cat-listing .op-quiz-result p{margin:6px 0 14px;color:var(--muted);font-size:14px;}

/* Comparateur */
body.op-cat-listing .op-cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;-webkit-overflow-scrolling:touch;}
body.op-cat-listing table.op-cmp{border-collapse:collapse;width:100%;min-width:640px;}
body.op-cat-listing table.op-cmp th,body.op-cat-listing table.op-cmp td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);font-size:13.5px;}
body.op-cat-listing table.op-cmp thead th{background:#fafbfa;font-weight:700;color:var(--navy);}
body.op-cat-listing table.op-cmp tbody th{font-weight:600;color:var(--muted);}
body.op-cat-listing table.op-cmp td .op-hi{color:var(--ink);font-weight:700;}
body.op-cat-listing table.op-cmp .op-rowcta a{font-size:13px;font-weight:700;color:var(--navy);border-bottom:2px solid var(--brand-soft);text-decoration:none;}

/* Panels / ticks / steps */
body.op-cat-listing .op-cols2{display:grid;grid-template-columns:1fr;gap:16px;}
body.op-cat-listing .op-cols3{display:grid;grid-template-columns:1fr;gap:16px;}
body.op-cat-listing .op-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
body.op-cat-listing .op-panel h3{margin:0 0 10px;font-size:17px;}
body.op-cat-listing .op-panel .op-p{color:var(--muted);font-size:14px;line-height:1.65;margin:0;}
body.op-cat-listing .op-panel h3 a{color:var(--ink) !important;text-decoration:none;}
body.op-cat-listing .op-panel h3 a:hover{color:var(--signal) !important;}
body.op-cat-listing .op-mini-cta{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--signal) !important;text-decoration:none !important;border-bottom:2px solid var(--brand-soft);}
body.op-cat-listing .op-mini-cta:hover{border-color:var(--signal);}
body.op-cat-listing .op-ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
body.op-cat-listing .op-ticks li{position:relative;padding-left:26px;font-size:14px;}
body.op-cat-listing .op-ticks li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='2.6'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");}
body.op-cat-listing .op-steps{display:grid;grid-template-columns:1fr;gap:14px;}
body.op-cat-listing .op-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
body.op-cat-listing .op-step .op-num{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--navy);color:var(--navy);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
body.op-cat-listing .op-step b{display:block;font-size:15.5px;margin-bottom:6px;}
body.op-cat-listing .op-step span{color:var(--muted);font-size:13.5px;}

/* Bande CTA */
body.op-cat-listing .op-band-sec{padding-top:0;}
body.op-cat-listing .op-band{background:var(--navy);border-radius:var(--radius);padding:26px;color:#fff;text-align:center;}
body.op-cat-listing .op-band h3{margin:0 0 6px;font-size:20px;color:#fff;}
body.op-cat-listing .op-band p{margin:0 0 16px;color:#b9c2cc;font-size:14.5px;}
body.op-cat-listing .op-band-cta{display:flex;flex-direction:column;gap:10px;}

/* FAQ */
body.op-cat-listing .op-faq{max-width:820px;}
body.op-cat-listing .op-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;}
body.op-cat-listing .op-faq summary{cursor:pointer;padding:16px 18px;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;}
body.op-cat-listing .op-faq summary::-webkit-details-marker{display:none;}
body.op-cat-listing .op-faq summary::after{content:"";width:10px;height:10px;flex:0 0 auto;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:.2s;}
body.op-cat-listing .op-faq details[open] summary::after{transform:rotate(-135deg);}
body.op-cat-listing .op-faq .op-a{padding:0 18px 16px;color:var(--muted);font-size:14px;line-height:1.65;}

/* Sticky CTA (injecté par JS, appendu au body) */
.op-cat-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);
  border-top:1px solid #e4e6e3;box-shadow:0 -6px 22px rgba(20,28,36,.10);transform:translateY(120%);transition:transform .28s;}
.op-cat-sticky.op-show{transform:translateY(0);}
.op-cat-sticky .op-in{display:flex;align-items:center;gap:12px;padding:10px 16px;max-width:1180px;margin:0 auto;}
.op-cat-sticky .op-t{flex:1;min-width:0;}
.op-cat-sticky .op-t b{font-size:13.5px;display:block;color:#1a1f24;}
.op-cat-sticky .op-t small{color:#5f666c;font-size:11.5px;}
/* Bouton CTA sticky : le thème force la couleur de lien (bleu) en !important
   sur les <a> hors .op-cat → on impose blanc sur fond rouge pour la lisibilité. */
.op-cat-sticky a,.op-cat-sticky a:link,.op-cat-sticky a:visited,.op-cat-sticky a:hover,.op-cat-sticky a:focus{
  flex:0 0 auto;background:#c0402c !important;color:#fff !important;border-radius:11px;font-weight:700;font-size:14px;padding:12px 18px;text-decoration:none !important;border:0;}

/* ===== Tablette ≥640px ===== */
@media (min-width:640px){
  body.op-cat-listing .op-strip{grid-template-columns:repeat(4,1fr);}
  body.op-cat-listing #op-grid-slot .products{grid-template-columns:repeat(3,1fr);gap:16px;}
  body.op-cat-listing .op-cols2{grid-template-columns:1fr 1fr;gap:22px;}
  body.op-cat-listing .op-cols3{grid-template-columns:repeat(3,1fr);gap:22px;}
  body.op-cat-listing .op-steps{grid-template-columns:repeat(3,1fr);gap:18px;}
  body.op-cat-listing .op-hero h1{font-size:36px;}
  body.op-cat-listing .op-hero-cta{flex-direction:row;}
  body.op-cat-listing .op-filterbar{display:flex;align-items:center;gap:16px;}
  body.op-cat-listing .op-chips{flex:1;} body.op-cat-listing .op-sort{margin-top:0;}
  body.op-cat-listing .op-band{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:30px;}
  body.op-cat-listing .op-band-cta{flex-direction:row;}
  .op-cat-sticky .op-t b{font-size:15px;}
}
/* ===== Desktop ≥980px ===== */
@media (min-width:980px){
  body.op-cat-listing .op-hero{grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:26px 0 40px;}
  body.op-cat-listing .op-hero-media{order:0;aspect-ratio:5/4;}
  body.op-cat-listing .op-hero h1{font-size:42px;}
  body.op-cat-listing #op-grid-slot .products{grid-template-columns:repeat(4,1fr);gap:20px;}
  body.op-cat-listing .op-sec{padding:52px 0;}
  body.op-cat-listing .op-sec-head h2{font-size:28px;}
}

/* =====================================================================
   Renforcements (le thème surcharge via .rte-content a / .btn / .price)
   ===================================================================== */
/* Boutons */
body.op-cat-listing .op-cat .op-btn-primary{background:var(--signal) !important;color:#fff !important;border:0 !important;}
body.op-cat-listing .op-cat .op-btn-dark{background:var(--navy) !important;color:#fff !important;border:0 !important;}
body.op-cat-listing .op-cat .op-btn-ghost{background:transparent !important;color:var(--navy) !important;border:1.4px solid var(--line-2) !important;}
body.op-cat-listing .op-cat .op-btn-ghost-light{background:transparent !important;color:#fff !important;border:1.4px solid rgba(255,255,255,.4) !important;}
body.op-cat-listing .op-cat .op-btn:hover{text-decoration:none !important;filter:brightness(1.06);}
/* Titres & textes */
body.op-cat-listing .op-cat h1,body.op-cat-listing .op-cat h2,body.op-cat-listing .op-cat h3{color:var(--ink) !important;}
body.op-cat-listing .op-cat .op-lead,body.op-cat-listing .op-cat .op-prose p,body.op-cat-listing .op-cat .op-sec-head p,body.op-cat-listing .op-cat .op-panel .op-p,body.op-cat-listing .op-cat .op-step span{color:var(--muted) !important;}
body.op-cat-listing .op-cat .op-toc a,body.op-cat-listing .op-cat .op-rowcta a,body.op-cat-listing .op-cat .op-assur li,body.op-cat-listing .op-cat .op-r-name{color:var(--navy) !important;}
body.op-cat-listing .op-cat .op-toc a{text-decoration:none !important;}
body.op-cat-listing .op-cat .op-band h3{color:#fff !important;} body.op-cat-listing .op-cat .op-band p{color:#b9c2cc !important;}
body.op-cat-listing .op-cat .op-chip{color:var(--ink) !important;} body.op-cat-listing .op-cat .op-chip.op-active{color:#fff !important;}
body.op-cat-listing .op-cat .op-eyebrow{color:var(--faint) !important;}

/* Barre PrestaShop (tri, compteur, pagination, vue liste/grille) masquée */
body.op-cat-listing #js-product-list-top,
body.op-cat-listing #js-product-list-bottom,
body.op-cat-listing .products-selection,
body.op-cat-listing .view-switcher,
body.op-cat-listing nav.pagination,
body.op-cat-listing .pagination{display:none !important;}

/* Cartes produit — rendu propre */
body.op-cat-listing #op-grid-slot .thumbnail-container{border:1px solid var(--line) !important;border-radius:var(--radius) !important;box-shadow:none !important;background:#fff !important;overflow:hidden;}
body.op-cat-listing #op-grid-slot .product-title a,
body.op-cat-listing #op-grid-slot .product-title{color:var(--ink) !important;font-weight:600 !important;text-decoration:none !important;}
body.op-cat-listing #op-grid-slot .price{color:var(--ink) !important;font-weight:800 !important;}